/* =====================================================================
   أستاذي — Design tokens
   الفكرة: دفتر علامات/سجل حضور المدرس الورقي، منقول لواجهة رقمية.
   العنصر المميز: القائمة الجانبية بشكل "تابات دفتر ملفات" + بطاقات بهامش
   أحمر رفيع وخط منقّط يشبه سجل الدرجات الورقي.
   ===================================================================== */

:root{
  --paper:      #F7F4EC;
  --paper-raised:#FFFFFF;
  --ink:        #1C2624;
  --ink-soft:   #5B6A66;
  --teal:       #0E4B43;
  --teal-deep:  #0A362F;
  --teal-tint:  #E6EFEC;
  --gold:       #E4A93D;
  --gold-deep:  #C98A22;
  --coral:      #D65B4A;
  --line:       #E1D9C4;
  --shadow:     0 8px 24px rgba(15, 40, 35, .08);
  --radius-lg:  18px;
  --radius-md:  12px;
  --radius-sm:  8px;
  --font-display: 'Cairo', 'Tajawal', sans-serif;
  --font-body:  'Tajawal', 'Cairo', sans-serif;
}

[data-theme="dark"]{
  --paper:      #12201C;
  --paper-raised:#182B25;
  --ink:        #EFEAE0;
  --ink-soft:   #A7B5B0;
  --teal:       #4FBFA8;
  --teal-deep:  #0A362F;
  --teal-tint:  #1B322C;
  --gold:       #EFC066;
  --gold-deep:  #E4A93D;
  --coral:      #E58676;
  --line:       #274038;
  --shadow:     0 8px 28px rgba(0,0,0,.35);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,.brand-name,.login-brand h1{ font-family: var(--font-display); }
a{ color: inherit; }
button{ font-family: inherit; }

/* ---------- Toasts ---------- */
.toast-stack{ position:fixed; top:16px; left:16px; z-index:2000; display:flex; flex-direction:column; gap:8px; }
.app-toast{
  background: var(--paper-raised); color: var(--ink); border-radius: var(--radius-sm);
  padding:12px 16px; box-shadow: var(--shadow); border-inline-start: 4px solid var(--teal);
  min-width: 240px; font-size:.92rem; animation: slideIn .25s ease;
}
.app-toast.error{ border-inline-start-color: var(--coral); }
@keyframes slideIn{ from{ transform: translateY(-8px); opacity:0;} to{ transform:none; opacity:1;} }

/* ---------- Login ---------- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(228,169,61,.18), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(14,75,67,.25), transparent 45%),
    var(--teal-deep);
  padding:24px;
}
.login-card{
  background: var(--paper-raised); width:100%; max-width:400px; border-radius: var(--radius-lg);
  padding:36px 32px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.login-brand{ text-align:center; margin-bottom:24px; }
.login-mark{
  display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px;
  background: var(--teal); color:#fff; border-radius: 14px; font-size:1.6rem; font-weight:800; margin-bottom:10px;
}
.login-brand h1{ margin:0; font-size:1.5rem; color: var(--teal); }
.login-brand p{ margin:2px 0 0; color: var(--ink-soft); font-size:.9rem; }
.btn-brand{
  background: var(--teal); color:#fff; border:none; border-radius: var(--radius-sm);
  padding:.6rem 1rem; font-weight:700;
}
.btn-brand:hover{ background: var(--teal-deep); color:#fff; }

/* ---------- App shell / layout ---------- */
.app-shell{ display:flex; min-height:100vh; }

/* التوقيعة البصرية: القائمة الجانبية كتابات ملف مُدرّج */
.sidebar{
  width:250px; background: var(--teal-deep); color:#EFE9DA; padding:18px 0;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; flex-shrink:0;
  transition: transform .25s ease; z-index:1000;
}
.sidebar-top{ padding:0 20px 18px; border-bottom:1px dashed rgba(239,233,218,.25); margin-bottom:10px;}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:34px; height:34px; border-radius:9px; background: var(--gold); color: var(--teal-deep);
  display:flex; align-items:center; justify-content:center; font-weight:800;
}
.brand-name{ font-size:1.15rem; font-weight:800; }

.sidebar-nav{ display:flex; flex-direction:column; gap:6px; padding:6px 12px; flex:1; }
.nav-tab{
  display:flex; align-items:center; gap:10px; text-align:right; background:transparent; color:#D9D2C0;
  border:none; padding:11px 14px; border-radius: 10px 999px 999px 10px; font-size:.95rem; cursor:pointer;
  position:relative; transition: all .15s ease;
}
.nav-tab .tab-ico{ font-size:1.05rem; }
.nav-tab:hover{ background: rgba(239,233,218,.08); color:#fff; }
.nav-tab.active{
  background: var(--paper); color: var(--teal-deep); font-weight:700;
  box-shadow: inset 3px 0 0 var(--gold);
}
.sidebar-profile-link{
  margin:10px 14px 0; background: transparent; border:1px dashed rgba(239,233,218,.35); color:#D9D2C0;
  border-radius: var(--radius-sm); padding:10px 12px; font-size:.82rem; cursor:pointer;
}
.sidebar-profile-link:hover{ border-color:var(--gold); color:#fff; }

.app-main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:center; gap:14px; padding:14px 22px; background: var(--paper-raised);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:900;
}
.topbar-title{ font-family: var(--font-display); font-weight:800; font-size:1.15rem; color: var(--teal); flex:1; }
.topbar-actions{ display:flex; align-items:center; gap:6px; }
.icon-btn{
  background: var(--teal-tint); border:none; width:38px; height:38px; border-radius:10px; font-size:1rem;
  cursor:pointer; position:relative; color: var(--ink);
}
.icon-btn:hover{ filter:brightness(.96); }
.sync-dot{ color:#4CAF7D; font-size:.7rem; margin-inline-end:4px; }
.badge-dot{
  position:absolute; top:4px; left:4px; width:8px; height:8px; border-radius:50%; background: var(--coral);
}
.notif-wrap{ position:relative; }
.notif-panel{
  position:absolute; top:46px; left:0; width:320px; max-height:420px; overflow:auto;
  background: var(--paper-raised); border-radius: var(--radius-md); box-shadow: var(--shadow); z-index:1500;
}
.notif-panel-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); }
.link-btn{ background:none; border:none; color: var(--teal); font-size:.8rem; cursor:pointer; }
.notif-list .notif-item{ padding:10px 14px; border-bottom:1px solid var(--line); font-size:.85rem; }
.notif-list .notif-item.unread{ background: var(--teal-tint); }

.view-container{ padding:22px; max-width:1180px; width:100%; margin:0 auto; }

/* ---------- Signature "دفتر الدرجات" card ---------- */
.notebook-card{
  background: var(--paper-raised); border-radius: var(--radius-md); padding:18px 20px;
  border-inline-end: 5px solid var(--coral); box-shadow: var(--shadow); position:relative;
}
.notebook-card + .notebook-card{ margin-top:0; }
.card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
.stat-card{ background: var(--paper-raised); border-radius: var(--radius-md); padding:18px 20px; box-shadow: var(--shadow); border-inline-end:5px solid var(--gold); }
.stat-card .stat-value{ font-family: var(--font-display); font-size:2rem; font-weight:800; color: var(--teal); }
.stat-card .stat-label{ color: var(--ink-soft); font-size:.85rem; margin-top:4px; }

.section-title{ font-family: var(--font-display); font-weight:800; color: var(--teal); margin:26px 0 12px; font-size:1.05rem; }

/* Teacher card */
.teacher-card{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.teacher-card h2{ margin:0; font-size:1.3rem; }
.teacher-card p{ margin:2px 0 0; color: var(--ink-soft); }

/* Session list rows (dashed ruled-paper feel) */
.session-row{
  display:flex; align-items:center; justify-content:space-between; padding:10px 4px;
  border-bottom:1px dashed var(--line);
}
.session-row:last-child{ border-bottom:none; }
.session-time{ background: var(--teal-tint); color: var(--teal); border-radius:8px; padding:4px 10px; font-weight:700; font-size:.85rem; }

.empty-state{ text-align:center; padding:36px 16px; color: var(--ink-soft); }
.empty-state .emoji{ font-size:2rem; display:block; margin-bottom:8px; }

/* ---------- Chips / filters ---------- */
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 18px; }
.chip{
  border:1px solid var(--line); background: var(--paper-raised); border-radius:999px; padding:6px 14px;
  font-size:.85rem; cursor:pointer; color: var(--ink-soft);
}
.chip.active{ background: var(--teal); border-color: var(--teal); color:#fff; }

/* ---------- Groups grid ---------- */
.group-card{ cursor:pointer; transition: transform .12s ease; }
.group-card:hover{ transform: translateY(-2px); }
.group-card .badge-type{ font-size:.72rem; padding:3px 9px; border-radius:999px; background: var(--gold); color:#3B2A05; font-weight:700;}
.group-card .badge-type.online{ background:#7FB6D9; color:#062033;}
.group-card .badge-type.private_group{ background:#C6A6E0; color:#2B0F41; }
.group-card .group-meta{ color: var(--ink-soft); font-size:.85rem; margin-top:6px; }
.group-card .group-sched{ margin-top:10px; display:flex; gap:6px; flex-wrap:wrap; }
.group-card .sched-pill{ background: var(--teal-tint); color: var(--teal); font-size:.75rem; padding:3px 9px; border-radius:999px; }

/* ---------- Tables ---------- */
.table-notebook{ width:100%; border-collapse:collapse; background: var(--paper-raised); border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow); }
.table-notebook th{ background: var(--teal-tint); color: var(--teal); text-align:right; padding:12px 14px; font-size:.85rem; }
.table-notebook td{ padding:12px 14px; border-top:1px dashed var(--line); font-size:.9rem; }
.table-notebook tr.clickable{ cursor:pointer; }
.table-notebook tr.clickable:hover{ background: var(--teal-tint); }

.status-pill{ font-size:.72rem; padding:3px 10px; border-radius:999px; font-weight:700; }
.status-pill.present, .status-pill.done, .status-pill.paid, .status-pill.excellent{ background:#DCF3E4; color:#1F7A44; }
.status-pill.late{ background:#FCEBC8; color:#8A5A0A; }
.status-pill.absent, .status-pill.not_done, .status-pill.unpaid, .status-pill.weak{ background:#FBDFDA; color:#A3372A; }
.status-pill.none, .status-pill.exempt{ background:#E7E2D3; color:#6B6350; }
[data-theme="dark"] .status-pill{ filter:brightness(.9) saturate(1.2); }

/* ---------- Tabs (student profile) ---------- */
.profile-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:16px; flex-wrap:wrap; }
.profile-tab{ background:none; border:none; padding:8px 14px; cursor:pointer; color: var(--ink-soft); border-bottom:3px solid transparent; font-weight:600; }
.profile-tab.active{ color: var(--teal); border-color: var(--gold); }

/* ---------- Buttons ---------- */
.btn-teal{ background: var(--teal); color:#fff; border:none; }
.btn-teal:hover{ background: var(--teal-deep); color:#fff; }
.btn-gold{ background: var(--gold); color:#3B2A05; border:none; font-weight:700; }
.btn-gold:hover{ background: var(--gold-deep); color:#3B2A05; }
.btn-outline-teal{ border:1px solid var(--teal); color: var(--teal); background:transparent; }
.btn-outline-teal:hover{ background: var(--teal-tint); }
.btn-whatsapp{ background:#25D366; color:#fff; border:none; font-weight:700; }
.btn-whatsapp:hover{ background:#1DA851; color:#fff; }

/* ---------- Schedule (traditional grid) ---------- */
.schedule-toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.trad-grid{ display:grid; grid-template-columns: 90px repeat(24, minmax(50px,1fr)); border:1px solid var(--line); border-radius: var(--radius-md); overflow:auto; background: var(--paper-raised); }
.trad-grid .cell{ border-inline-start:1px solid var(--line); border-bottom:1px solid var(--line); min-height:34px; font-size:.68rem; padding:2px 3px; position:relative; }
.trad-grid .head{ background: var(--teal-tint); color: var(--teal); text-align:center; font-weight:700; font-size:.72rem; position:sticky; top:0; }
.trad-grid .day-label{ background: var(--teal-tint); color: var(--teal); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:.75rem; position:sticky; right:0; }
.trad-grid .session-block{ background: var(--gold); color:#3B2A05; border-radius:5px; font-size:.65rem; padding:2px 4px; position:absolute; inset:2px; overflow:hidden; }

@media print{
  .sidebar, .topbar, .schedule-toolbar, .btn, .icon-btn{ display:none !important; }
  .view-container{ padding:0; max-width:none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .sidebar{ position:fixed; right:0; transform: translateX(100%); box-shadow: var(--shadow); }
  .sidebar.open{ transform:none; }
  .view-container{ padding:16px; }
}

/* ---------- Focus visibility (a11y) ---------- */
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}