/* ============================================================================
   base.css — الرموز (Tokens) والثيمان + العناصر الأساسية المشتركة.
   هوية: قاعدة كحلية ليلية + لكنة خضراء كهربائية + لمسة ذهبية.
   ============================================================================ */

:root{
  color-scheme:dark;
  --bg:#060b16;
  --bg-1:#0a1322;
  --surface:#0f1b2e;
  --surface-2:#13243c;
  --surface-3:#182c47;
  --glass:rgba(16,28,48,.72);
  --border:#22364f;
  --border-2:#304864;
  --text:#eef4fc;
  --text-2:#c2d2e8;
  --muted:#8298b8;
  --faint:#5f7a9c;
  --accent:#2ee6a6;
  --accent-2:#15c2d6;
  --accent-ink:#04241a;
  --accent-soft:rgba(46,230,166,.13);
  --accent-line:rgba(46,230,166,.45);
  --gold:#f3c34e;
  --gold-soft:rgba(243,195,78,.14);
  --danger:#ff5d6c;--danger-soft:rgba(255,93,108,.14);
  --warn:#ffb14e;--warn-soft:rgba(255,177,78,.14);
  --purple:#a78bfa;--purple-soft:rgba(167,139,250,.16);
  --blue:#5b9ff0;
  --ring-track:#1d3148;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --shadow-lg:0 30px 80px rgba(0,0,0,.6);
  --shadow-accent:0 14px 38px rgba(46,230,166,.22);
  --r:14px;--r-lg:20px;--r-xl:28px;
  --bottom-nav-offset:0px;
  --bottom-nav-height:76px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#eaf0f6;
  --bg-1:#dde7f1;
  --surface:#ffffff;
  --surface-2:#f3f7fc;
  --surface-3:#e9f1f8;
  --glass:rgba(255,255,255,.82);
  --border:#dde7f1;
  --border-2:#c7d6e6;
  --text:#0c1726;
  --text-2:#2c3e57;
  --muted:#5e708c;
  --faint:#8fa1ba;
  --accent:#0a9e6b;
  --accent-2:#0e8fa6;
  --accent-ink:#ffffff;
  --accent-soft:rgba(10,158,107,.12);
  --accent-line:rgba(10,158,107,.4);
  --gold:#c8901a;
  --gold-soft:rgba(200,144,26,.14);
  --danger:#d6324a;--danger-soft:rgba(214,50,74,.10);
  --warn:#c9760a;--warn-soft:rgba(201,118,10,.12);
  --purple:#7c3aed;--purple-soft:rgba(124,58,237,.12);
  --ring-track:#dbe6f0;
  --shadow:0 16px 44px rgba(20,45,80,.10);
  --shadow-lg:0 28px 70px rgba(20,45,80,.16);
  --shadow-accent:0 14px 34px rgba(10,158,107,.18);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;min-height:100dvh;
  font-family:'IBM Plex Sans Arabic','Tajawal',system-ui,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-text-size-adjust:100%;
  line-height:1.55;
  overflow-x:hidden;
}
/* خلفية: شبكة تدرجات + حبيبات */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(55% 45% at 0% 100%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 60%),
    radial-gradient(50% 40% at 50% 30%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 70%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg-1) 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grain);
  opacity:.05;mix-blend-mode:overlay;
}

::selection{background:var(--accent-soft);}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:20px;border:2px solid transparent;background-clip:padding-box;}
*::-webkit-scrollbar-track{background:transparent;}

a{color:var(--accent);}
.hidden{display:none!important;}
.muted{color:var(--muted);font-size:13.5px;}
.bad{color:var(--danger);}

/* ------------------------------- الأزرار ------------------------------- */
button{
  cursor:pointer;border:none;font-family:'Reem Kufi','IBM Plex Sans Arabic',sans-serif;font-weight:600;
  font-size:15px;padding:12px 18px;border-radius:12px;color:var(--accent-ink);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:var(--shadow-accent);transition:transform .08s ease,filter .15s ease,box-shadow .2s ease;
}
button:hover{filter:brightness(1.07);}
button:active{transform:translateY(1px) scale(.99);}
button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;filter:saturate(.5);}
button.ghost{background:transparent;color:var(--text-2);border:1px solid var(--border-2);box-shadow:none;}
button.ghost:hover{background:var(--surface-2);color:var(--accent);border-color:var(--accent-line);}
button.gold{background:linear-gradient(135deg,var(--gold),#e0a93a);color:#241a02;box-shadow:0 12px 30px var(--gold-soft);}
button.danger{background:linear-gradient(135deg,var(--danger),#ff7a86);color:#2a0408;}
button.purple{background:linear-gradient(135deg,var(--purple),#8b6df0);color:#13082e;}

/* ------------------------------- الحقول ------------------------------- */
label{display:block;font-family:'Reem Kufi';font-weight:600;font-size:13.5px;color:var(--text-2);margin-bottom:7px;}
input,select,textarea{
  width:100%;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:15px;
  padding:13px 14px;border-radius:12px;border:1px solid var(--border-2);
  background:var(--surface-2);color:var(--text);outline:none;
  transition:border-color .15s,box-shadow .15s,background .2s;
}
input::placeholder{color:var(--faint);}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3.5px var(--accent-soft);background:var(--surface);}
select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(0% + 15px) 53%,calc(0% + 20px) 53%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-start:36px;}
.field{position:relative;}
.field .fi{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);font-size:16px;opacity:.6;pointer-events:none;}
.field:focus-within .fi{opacity:1;}
input.hasicon{padding-inline-start:44px;}

.row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;}
.row>div{flex:1;min-width:160px;}

/* خط أسماء الطلاب: نسخي تقليدي واضح (Amiri) */
.nmcell,td.c-name,.matchhead .nm,.mini td.subj,.mktbl td.subj{font-family:'Amiri','IBM Plex Sans Arabic',serif!important;letter-spacing:0;}
.nmcell,td.c-name{font-weight:700;}
.mini td.subj{font-size:16px;}

/* =============================== نافذة منبثقة =============================== */
.backdrop{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:18px;
  background:rgba(3,8,16,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.backdrop.open{display:flex;animation:fade .2s both;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.modal{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-xl);padding:26px;width:100%;max-width:440px;box-shadow:var(--shadow-lg);animation:pop .22s cubic-bezier(.2,.8,.3,1);}
@keyframes pop{from{transform:scale(.92) translateY(10px);opacity:.4;}to{transform:none;opacity:1;}}
.modal h3{font-family:'Reem Kufi';font-weight:700;color:var(--text);margin:0 0 14px;text-align:center;}
.modal .actions{display:flex;gap:11px;margin-top:18px;}
.modal .actions button{flex:1;}
.modal-x{width:36px;height:36px;min-width:36px;flex:0 0 auto;padding:0;border-radius:50%;background:var(--surface-2);color:var(--muted);font-size:15px;font-weight:700;line-height:1;border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.modal-x:hover{background:var(--danger-soft);color:var(--danger);border-color:transparent;}

/* =============================== توست =============================== */
.toast{position:fixed;bottom:90px;bottom:calc(var(--bottom-nav-height,76px) + var(--bottom-nav-offset,0px) + max(env(safe-area-inset-bottom),8px) + 24px);inset-inline-start:18px;z-index:320;max-width:440px;padding:15px 17px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border-2);border-inline-start:4px solid var(--accent);
  color:var(--text);font-size:14px;white-space:pre-line;line-height:1.6;display:none;box-shadow:var(--shadow-lg);}
.toast.show{display:block;animation:toastIn .3s cubic-bezier(.2,.8,.3,1);}
@keyframes toastIn{from{transform:translateY(22px);opacity:0;}to{transform:none;opacity:1;}}

/* =============================== حالات =============================== */
.statebox{text-align:center;padding:38px 18px;color:var(--muted);}
.statebox .ic{font-size:50px;display:block;margin-bottom:12px;opacity:.85;}
.statebox .t{font-family:'Reem Kufi';font-weight:700;color:var(--text-2);font-size:17px;margin-bottom:5px;}
.statebox .s{font-size:13.5px;}
.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:shimmer 1.3s infinite;border-radius:var(--r-lg);}
@keyframes shimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}
.skel-card{height:240px;margin-bottom:16px;}

@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes grow{to{transform:scaleX(1);}}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;}}