/* ============================================================
   تقوية العقيق — النمط الأساسي
   assets/css/main.css
   ------------------------------------------------------------
   ⚠️ قاعدة موروثة من البوابة وإتقان: كل رمز لون يبدأ بـ --tk- ويُستعمل
      دائماً بقيمة احتياطية var(--tk-x, #fallback).
   ============================================================ */
:root{
  --tk-bg:#f3f5f8; --tk-card:#fff; --tk-ink:#15233b; --tk-soft:#5b6b82; --tk-line:#e0e6ee;
  --tk-brand:#0f6e68; --tk-brand-dk:#0a524d; --tk-brand-lt:#e6f3f2; --tk-accent:#1f3864;
  --tk-gold:#b7892f; --tk-warn:#a8651a; --tk-warn-lt:#fbf1e3; --tk-danger:#a3392f; --tk-danger-lt:#fbeae8;
  --tk-ok:#1d7a4b; --tk-ok-lt:#e5f4ec;
  --tk-radius:14px; --tk-shadow:0 1px 2px rgba(21,35,59,.05),0 8px 24px -16px rgba(21,35,59,.28);
  --tk-sidebar:252px; --tk-font:"Tajawal","Segoe UI",Tahoma,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--tk-bg,#f3f5f8);color:var(--tk-ink,#15233b);font-family:var(--tk-font);font-size:15px;line-height:1.75;direction:rtl}
a{color:var(--tk-brand,#0f6e68);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--tk-brand,#0f6e68);outline-offset:2px}
h1,h2,h3{line-height:1.35;margin:0 0 .5em}
.muted{color:var(--tk-soft,#5b6b82)} .small{font-size:13px} .nowrap{white-space:nowrap} .num{font-variant-numeric:tabular-nums}
.hidden{display:none!important}

/* ── القالب ── */
.app-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;height:62px;padding:0 18px;
  background:var(--tk-card,#fff);border-bottom:1px solid var(--tk-line,#e0e6ee)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--tk-accent,#1f3864);font-size:17px}
.brand:hover{text-decoration:none}
.brand .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--tk-brand,#0f6e68),#14948c);color:#fff;display:grid;place-items:center;font-size:15px}
.app-header .spacer{flex:1}
.app-header .who{color:var(--tk-soft,#5b6b82);font-size:13.5px}
.pill{font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--tk-line,#e0e6ee);color:var(--tk-soft,#5b6b82);background:#fff}
.menu-toggle{display:none;border:0;background:none;font-size:22px;cursor:pointer;color:var(--tk-accent,#1f3864)}
.app-sidebar{position:fixed;top:62px;inset-inline-start:0;bottom:0;width:var(--tk-sidebar,252px);background:var(--tk-card,#fff);
  border-inline-end:1px solid var(--tk-line,#e0e6ee);overflow-y:auto;padding:14px 10px 30px}
.app-sidebar .label{font-size:11.5px;font-weight:700;color:var(--tk-soft,#5b6b82);padding:10px 12px 4px;letter-spacing:.02em}
.app-sidebar a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:9px;color:var(--tk-ink,#15233b);font-size:14.5px;border-inline-start:3px solid transparent}
.app-sidebar a:hover{background:var(--tk-bg,#f3f5f8);text-decoration:none}
.app-sidebar a.active{background:var(--tk-brand-lt,#e6f3f2);border-inline-start-color:var(--tk-brand,#0f6e68);font-weight:700;color:var(--tk-brand-dk,#0a524d)}
.app-sidebar .ic{width:20px;text-align:center;opacity:.85}
.main-content{margin-inline-start:var(--tk-sidebar,252px);padding:24px 26px 70px;min-height:calc(100vh - 62px)}
.main-content.full{margin-inline-start:0;max-width:1100px;margin-inline:auto;padding:20px 16px 60px}
@media (max-width:960px){
  .menu-toggle{display:block}
  .app-sidebar{transform:translateX(110%);transition:transform .2s;z-index:50;box-shadow:var(--tk-shadow)}
  body.nav-open .app-sidebar{transform:none}
  .main-content{margin-inline-start:0;padding:16px 14px 56px}
  .app-header .who{display:none}
}

/* ── عناوين الصفحات ── */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.page-title{font-size:23px;font-weight:800;color:var(--tk-accent,#1f3864);margin:0}
.page-sub{color:var(--tk-soft,#5b6b82);margin:2px 0 0}
.crumbs{font-size:13px;color:var(--tk-soft,#5b6b82);margin-bottom:6px}

/* ── بطاقات وشبكات ── */
.card{background:var(--tk-card,#fff);border:1px solid var(--tk-line,#e0e6ee);border-radius:var(--tk-radius,14px);box-shadow:var(--tk-shadow);padding:18px;margin-bottom:16px}
.card > h2,.card > h3{font-size:17px;color:var(--tk-accent,#1f3864);display:flex;align-items:center;gap:8px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.card-head h2,.card-head h3{margin:0;font-size:17px;color:var(--tk-accent,#1f3864)}
.grid{display:grid;gap:14px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}
.stat{padding:16px 18px}
.stat .k{font-size:13px;color:var(--tk-soft,#5b6b82)}
.stat .v{font-size:28px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums;color:var(--tk-ink,#15233b)}
.stat .h{font-size:12.5px;color:var(--tk-soft,#5b6b82)}
.stat.hero{background:linear-gradient(135deg,#0f6e68,#138d85);color:#fff;border:0}
.stat.hero .k,.stat.hero .h,.stat.hero .v{color:#fff}

/* ── شارات ── */
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--tk-brand-lt,#e6f3f2);color:var(--tk-brand-dk,#0a524d);white-space:nowrap}
.badge.warn{background:var(--tk-warn-lt,#fbf1e3);color:var(--tk-warn,#a8651a)}
.badge.danger{background:var(--tk-danger-lt,#fbeae8);color:var(--tk-danger,#a3392f)}
.badge.ok{background:var(--tk-ok-lt,#e5f4ec);color:var(--tk-ok,#1d7a4b)}
.badge.gray{background:#eef1f5;color:#56657a}
.badge.blue{background:#e8eef9;color:#1f3864}

/* ── أزرار ونماذج ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 16px;border-radius:10px;border:1px solid transparent;
  background:var(--tk-brand,#0f6e68);color:#fff;font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;line-height:1.3}
.btn:hover{background:var(--tk-brand-dk,#0a524d);text-decoration:none}
.btn.ghost{background:#fff;color:var(--tk-ink,#15233b);border-color:var(--tk-line,#e0e6ee)}
.btn.ghost:hover{background:var(--tk-bg,#f3f5f8)}
.btn.danger{background:var(--tk-danger,#a3392f)} .btn.gold{background:var(--tk-gold,#b7892f)}
.btn.sm{padding:5px 11px;font-size:13px;border-radius:8px}
.btn.block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;color:var(--tk-soft,#5b6b82);margin-bottom:5px;font-weight:600}
input:not([type]),input[type=email],input[type=text],input[type=number],input[type=date],input[type=time],input[type=datetime-local],input[type=tel],input[type=password],input[type=url],input[type=search],select,textarea{
  width:100%;padding:9px 12px;font-size:15px;font-family:inherit;border:1px solid var(--tk-line,#e0e6ee);border-radius:10px;background:#fff;color:var(--tk-ink,#15233b)}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--tk-brand,#0f6e68);outline:none;box-shadow:0 0 0 3px rgba(15,110,104,.12)}
.form-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.check{display:flex;align-items:center;gap:8px;font-size:14.5px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--tk-brand,#0f6e68)}
.inline-form{display:inline}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filters .field{margin:0;min-width:150px}

/* ── جداول ── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th,table.data td{padding:9px 11px;text-align:right;border-bottom:1px solid var(--tk-line,#e0e6ee);vertical-align:middle}
table.data th{background:var(--tk-bg,#f3f5f8);font-size:12.5px;color:var(--tk-soft,#5b6b82);font-weight:700;white-space:nowrap}
table.data tr:hover td{background:#fafbfc}
table.data td.num,table.data th.num{text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
table.data tfoot td{font-weight:800;background:#fafbfc}
.empty{padding:28px;text-align:center;color:var(--tk-soft,#5b6b82)}

/* ── تنبيهات ── */
.alert{border-radius:11px;padding:11px 15px;margin-bottom:14px;font-size:14.5px;border-inline-start:4px solid var(--tk-brand,#0f6e68);background:var(--tk-brand-lt,#e6f3f2)}
.alert.error{border-inline-start-color:var(--tk-danger,#a3392f);background:var(--tk-danger-lt,#fbeae8)}
.alert.warn{border-inline-start-color:var(--tk-warn,#a8651a);background:var(--tk-warn-lt,#fbf1e3)}

/* ── نطاقات الدرجات (تقرير الفترة المعتمد) ── */
.band-high{color:#1d7a4b} .band-mid{color:#a8651a} .band-low{color:#a3392f} .band-na{color:#8391a5}
.band-bg-high{background:#e5f4ec} .band-bg-mid{background:#fbf1e3} .band-bg-low{background:#fbeae8}
.meter{position:relative;height:10px;border-radius:99px;background:#edf0f4;overflow:visible;margin:10px 0 18px}
.meter .range{position:absolute;top:0;bottom:0;background:#d9e2ec;border-radius:99px}
.meter .avg{position:absolute;top:-4px;width:2px;height:18px;background:#8391a5}
.meter .me{position:absolute;top:-5px;width:20px;height:20px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transform:translateX(50%)}
.meter .lbl{position:absolute;top:14px;font-size:11px;color:var(--tk-soft);transform:translateX(50%);white-space:nowrap}
.bar{height:8px;border-radius:99px;background:#edf0f4;overflow:hidden}
.bar > span{display:block;height:100%;border-radius:99px;background:var(--tk-brand,#0f6e68)}

/* ── التوصيات ── */
.rec{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--tk-line,#e0e6ee);border-radius:12px;margin-bottom:10px;background:#fff}
.rec.required{border-inline-start:5px solid var(--tk-danger,#a3392f)}
.rec.recommended{border-inline-start:5px solid var(--tk-warn,#a8651a)}
.rec.optional{border-inline-start:5px solid #9fb1c5}
.rec.nodata{border-inline-start:5px solid #d4dbe4;opacity:.9}
.rec .t{font-weight:800}
.rec input[type=checkbox]{width:22px;height:22px;margin-top:2px;accent-color:var(--tk-brand,#0f6e68)}

/* ── صفحات ولي الأمر والطالب (جوال أولاً) ── */
.public-top{background:linear-gradient(135deg,#0f6e68,#1f3864);color:#fff;padding:18px 16px 56px}
.public-top .inner{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.public-top .brand{color:#fff}
.public-top .brand .mark{background:rgba(255,255,255,.18)}
.public-top a{color:#fff}
.public-main{max-width:900px;margin:-40px auto 0;padding:0 14px 60px}
.kid-head{display:flex;align-items:center;gap:14px}
.kid-head .av{width:54px;height:54px;border-radius:16px;background:var(--tk-brand-lt,#e6f3f2);color:var(--tk-brand-dk);display:grid;place-items:center;font-size:22px;font-weight:800;flex:none}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px}
.tabs a{padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--tk-line,#e0e6ee);color:var(--tk-ink);font-size:14px;white-space:nowrap;font-weight:600}
.tabs a.active{background:var(--tk-brand,#0f6e68);color:#fff;border-color:transparent}
.sticky-total{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--tk-line);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-radius:14px;box-shadow:0 -8px 20px -12px rgba(0,0,0,.2)}
.big{font-size:24px;font-weight:800}
.otp-input{letter-spacing:.5em;text-align:center;font-size:24px!important;font-weight:800}

/* ── جدول أسبوعي ── */
.week{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:760px){.week{grid-template-columns:1fr}}
.day h4{margin:0 0 6px;font-size:14px;color:var(--tk-soft)}
.slot{border-radius:10px;padding:8px 10px;margin-bottom:6px;background:#f6f8fb;border-inline-start:4px solid var(--tk-brand,#0f6e68);font-size:13.5px}
.slot b{display:block}

/* ── التحضير ── */
.att-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 4px;border-bottom:1px solid var(--tk-line)}
.att-opts{display:flex;gap:4px}
.att-opts label{cursor:pointer}
.att-opts input{display:none}
.att-opts span{display:inline-block;padding:6px 11px;border-radius:9px;border:1px solid var(--tk-line);font-size:13px;font-weight:700;background:#fff}
.att-opts input:checked + span.p{background:#1d7a4b;color:#fff;border-color:#1d7a4b}
.att-opts input:checked + span.l{background:#a8651a;color:#fff;border-color:#a8651a}
.att-opts input:checked + span.a{background:#a3392f;color:#fff;border-color:#a3392f}
.att-opts input:checked + span.e{background:#1f3864;color:#fff;border-color:#1f3864}

/* ── دخول ── */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 500px at 80% -10%,#d7ecea,transparent),var(--tk-bg)}
.auth-card{width:100%;max-width:430px;background:#fff;border:1px solid var(--tk-line);border-radius:18px;box-shadow:var(--tk-shadow);padding:30px 26px}
.auth-card .mark{width:56px;height:56px;border-radius:16px;margin:0 auto 12px;background:linear-gradient(135deg,#0f6e68,#1f3864);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:800}
.auth-card h1{text-align:center;font-size:22px;color:var(--tk-accent)}
.auth-card .sub{text-align:center;color:var(--tk-soft);font-size:14px;margin-bottom:18px}
.seg{display:flex;background:var(--tk-bg);border-radius:12px;padding:4px;margin-bottom:16px}
.seg a{flex:1;text-align:center;padding:8px;border-radius:9px;color:var(--tk-soft);font-weight:700;font-size:14px}
.seg a.active{background:#fff;color:var(--tk-brand-dk);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ── طباعة ── */
@media print{
  .app-header,.app-sidebar,.no-print,.public-top,.tabs,.btn{display:none!important}
  .main-content,.public-main{margin:0!important;padding:0!important;max-width:none}
  .card{box-shadow:none;border-color:#ccc;break-inside:avoid}
  body{background:#fff}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}