/* =========================================================
   نظام إدارة السنتر التعليمي — Design System
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:translateY(0) } }
@keyframes scaleIn{ from{ opacity:0; transform:scale(.92) } to{ opacity:1; transform:scale(1) } }

:root{
  /* ===== Theme seed variables — override per theme in the blocks below ===== */
  --primary: #3454D1;
  --secondary: #F2A65A;
  --bg: #F5F7FA;
  --surface: #FFFFFF;
  --text: #1B2333;
  --muted: #6B7280;
  --border: #E4E7EC;
  --success: #1FA37C;
  --danger: #E5484D;

  /* ===== Derived automatically from the seeds above — never hardcode these per theme ===== */
  --primary-dark: color-mix(in srgb, var(--primary) 78%, black);
  --primary-light: color-mix(in srgb, var(--primary) 10%, var(--surface));
  --success-light: color-mix(in srgb, var(--success) 14%, var(--surface));
  --danger-light: color-mix(in srgb, var(--danger) 12%, var(--surface));
  --warning: var(--secondary);
  --warning-light: color-mix(in srgb, var(--secondary) 16%, var(--surface));
  --info: var(--primary);
  --bg-2: color-mix(in srgb, var(--bg) 85%, var(--text));
  --muted-2: color-mix(in srgb, var(--muted) 55%, var(--surface));
  --border-2: color-mix(in srgb, var(--border) 55%, var(--surface));

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .07);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-full: 999px;

  /* Layout */
  --sidebar-w: 264px;
  --header-h: 68px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: .15s;
  --t-med: .25s;
}

/* =========================================================
   السيمز (Themes) — كل سيم بيغيّر المتغيرات الأساسية بس،
   وكل الألوان التانية بتتحسب تلقائيًا منها فوق عبر color-mix()
   ========================================================= */
html[data-theme="dark-mode"]{
  --primary: #3B82F6;
  --secondary: #FBBF24;
  --bg: #0F172A;
  --surface: #1E293B;
  --text: #F8FAFC;
  --muted: #94A3B8;
  --border: #334155;
  --success: #059669;
  --danger: #DC2626;
}
html[data-theme="nature-green"]{
  --primary: #059669;
  --secondary: #D97706;
  --bg: #F0FDF4;
  --surface: #FFFFFF;
  --text: #064E3B;
  --muted: #4B5563;
  --border: #A7F3D0;
  --success: #10B981;
  --danger: #EF4444;
}
html[data-theme="royal-purple"]{
  --primary: #6D28D9;
  --secondary: #DB2777;
  --bg: #FAF5FF;
  --surface: #FFFFFF;
  --text: #2E1065;
  --muted: #6B7280;
  --border: #E9D5FF;
  --success: #059669;
  --danger: #E11D48;
}

*, *::before, *::after{ box-sizing: border-box; }

html, body{
  margin:0; padding:0; height:100%;
}

body{
  font-family: 'Cairo', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }

::selection{ background: var(--primary-light); color: var(--primary-dark); }

/* Scrollbar */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background: #D3D8E2; border-radius: var(--r-full); }
::-webkit-scrollbar-track{ background: transparent; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* =========================================================
   APP SHELL
   ========================================================= */

.app-shell{
  display:flex;
  min-height:100vh;
}

/* ---------- Sidebar ---------- */
.sidebar{
  width: var(--sidebar-w);
  background: var(--surface);
  border-left: 1px solid var(--border);
  position: fixed;
  right:0; top:0; bottom:0;
  display:flex;
  flex-direction:column;
  z-index:40;
  transition: transform var(--t-med) var(--ease);
}

.sidebar__brand{
  height: var(--header-h);
  display:flex;
  align-items:center;
  gap:10px;
  padding: 0 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink:0;
}

.sidebar__brand-mark{
  width:36px; height:36px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--primary), #6C8CF5);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:15px; flex-shrink:0;
}

.sidebar__brand-text{ font-weight:800; font-size:15.5px; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar__brand-sub{ font-size:11.5px; color: var(--muted-2); }

.sidebar__nav{
  padding: 14px 12px;
  overflow-y:auto;
  flex:1;
}

.sidebar__section-title{
  font-size:11px; color: var(--muted-2); font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  padding: 10px 12px 6px;
}

.nav-link{
  display:flex; align-items:center; gap:12px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  color: var(--muted);
  font-weight:600; font-size:14.5px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  margin-bottom:2px;
  position:relative;
}

.nav-link .nav-icon{
  width:20px; height:20px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.nav-link svg{ width:20px; height:20px; stroke: currentColor; }

.nav-link:hover{ background: var(--bg); color: var(--text); }

.nav-link.is-active{
  background: var(--primary-light);
  color: var(--primary-dark);
}
.nav-link.is-active::before{
  content:"";
  position:absolute; right:-12px; top:8px; bottom:8px; width:3px;
  background: var(--primary);
  border-radius: var(--r-full);
}

.sidebar__footer{
  padding: 14px; border-top:1px solid var(--border); flex-shrink:0;
}

/* ---------- Main column ---------- */
.main{
  margin-right: var(--sidebar-w);
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* ---------- Header ---------- */
.topbar{
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 26px;
  position:sticky; top:0; z-index:30;
  gap: 16px;
}

.topbar__left{ display:flex; align-items:center; gap:14px; min-width:0; }
.topbar__title{ font-weight:800; font-size:18px; }
.topbar__date{
  font-size:13px; color: var(--muted); background: var(--bg);
  padding:6px 12px; border-radius: var(--r-full); white-space:nowrap;
}

.topbar__right{ display:flex; align-items:center; gap:14px; }

.shift-indicator{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:var(--r-full);
  font-size:12px; font-weight:600;
  white-space:nowrap; line-height:1;
}
.shift-indicator svg{ width:14px; height:14px; flex-shrink:0; }
.shift-indicator--open{
  background: rgba(16,185,129,.1);
  color: var(--success);
}
.shift-indicator--closed{
  background: rgba(239,68,68,.1);
  color: var(--danger);
  cursor:pointer;
}
.shift-indicator--closed:hover{ background: rgba(239,68,68,.18); }

.menu-toggle{
  display:none;
  width:38px; height:38px; align-items:center; justify-content:center;
  border-radius: var(--r-md); border:1px solid var(--border); background: var(--surface);
  cursor:pointer;
}

.user-chip{
  display:flex; align-items:center; gap:10px;
  padding: 6px 8px 6px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  cursor:pointer;
  background: var(--surface);
  transition: box-shadow var(--t-fast) var(--ease);
}
.user-chip:hover{ box-shadow: var(--shadow-sm); }

.user-chip__avatar{
  width:30px; height:30px; border-radius:50%;
  background: var(--primary-light); color: var(--primary-dark);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px;
}
.user-chip__name{ font-weight:700; font-size:13.5px; }
.user-chip__role{ font-size:11.5px; color: var(--muted); }

.btn-logout{
  display:flex; align-items:center; gap:8px;
  padding: 9px 16px;
  border-radius: var(--r-md);
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--danger);
  font-weight:700; font-size:13.5px;
  cursor:pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn-logout:hover{ background: var(--danger-light); border-color: var(--danger); }

.topbar-logout{
  display:flex; align-items:center; gap:6px;
  padding:7px 16px;
  border-radius:var(--r-full);
  border:2px solid rgba(239,68,68,.25);
  background:rgba(239,68,68,.06);
  color:var(--danger);
  font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.topbar-logout svg{ width:16px; height:16px; }
.topbar-logout:hover{
  background:var(--danger);
  color:#fff;
  border-color:var(--danger);
  box-shadow:0 2px 8px rgba(239,68,68,.3);
}

.page{
  padding: 26px;
  flex:1;
}

.page__header{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:24px; gap:14px; flex-wrap:wrap;
}
.page__title{
  font-size:22px; font-weight:800; color: var(--text); letter-spacing:-.01em;
  display:flex; align-items:center; gap:10px;
}
.page__title svg{ width:26px; height:26px; flex-shrink:0; color: var(--primary); }
.page__title > .page__title-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}
.page__title > .page__title-icon svg{ width:22px; height:22px; }
.page__subtitle{ color: var(--muted); font-size:13.5px; margin-top:4px; }

/* =========================================================
   COMPONENTS
   ========================================================= */

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 11px 20px;
  border-radius: var(--r-md);
  border:1px solid transparent;
  font-weight:700; font-size:14px;
  cursor:pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn svg{ width:18px; height:18px; }

.btn-primary{ background: var(--primary); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--primary-dark); box-shadow: var(--shadow-md); }

.btn-success{ background: var(--success); color:#fff; }
.btn-success:hover{ filter:brightness(1.05); box-shadow: var(--shadow-md); }

.btn-danger{ background: var(--danger); color:#fff; }
.btn-danger:hover{ filter:brightness(1.05); box-shadow: var(--shadow-md); }

.btn-warning{ background: var(--warning); color:#fff; }
.btn-warning:hover{ filter:brightness(1.05); box-shadow: var(--shadow-md); }

.btn-info{ background: var(--info); color:#fff; }
.btn-info:hover{ filter:brightness(1.05); box-shadow: var(--shadow-md); }

.btn-outline{ background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-outline:hover{ border-color: var(--primary); color: var(--primary); }

.btn-ghost{ background:transparent; color: var(--muted); }
.btn-ghost:hover{ background: var(--bg); color: var(--text); }

.btn-sm{ padding: 7px 12px; font-size:13px; border-radius: var(--r-sm); }
.btn-lg{ padding:14px 26px; font-size:15px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-icon{ width:38px; height:38px; padding:0; border-radius: var(--r-md); }
.btn-xs{ padding:4px 8px; font-size:11px; border-radius:var(--r-sm); }
.btn-xs svg{ width:14px; height:14px; }

/* ---------- Cards ---------- */
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.card-pad{ padding: 20px 22px; }
.card:hover.card-hoverable{ box-shadow: var(--shadow-md); transform: translateY(-2px); }

.card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.card__title{ font-weight:800; font-size:15.5px; }

/* WhatsApp template cards */
.wa-tpl-card{ padding:12px 14px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); transition:all .15s ease; }
.wa-tpl-card:hover{ border-color:var(--primary); box-shadow:var(--shadow-sm); }
.wa-tpl-card--edited{ border-color:var(--warning); background:color-mix(in srgb, var(--warning) 4%, var(--surface)); }

/* Stat card */
.stat-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:18px;
  margin-bottom:22px;
}
.stat-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px; display:flex; flex-direction:column; gap:10px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.stat-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-card__icon{
  width:42px; height:42px; border-radius: var(--r-md);
  display:flex; align-items:center; justify-content:center;
}
.stat-card__icon svg{ width:22px; height:22px; }
.stat-card__value{ font-size:26px; font-weight:800; }
.stat-card__label{ font-size:13px; color: var(--muted); font-weight:600; }

.tone-primary{ background: var(--primary-light); color: var(--primary-dark); }
.tone-success{ background: var(--success-light); color: var(--success); }
.tone-danger{ background: var(--danger-light); color: var(--danger); }
.tone-warning{ background: var(--warning-light); color: var(--warning); }

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius: var(--r-full);
  font-size:12.5px; font-weight:700;
}
.badge-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-success{ background: var(--success-light); color: var(--success); }
.badge-danger{ background: var(--danger-light); color: var(--danger); }
.badge-warning{ background: var(--warning-light); color: var(--warning); }
.badge-primary{ background: var(--primary-light); color: var(--primary-dark); }
.badge-neutral{ background: var(--bg); color: var(--muted); }
.badge-info{ background: var(--primary-light); color: var(--info); }

/* ---------- Forms ---------- */
.field{ margin-bottom:18px; }
.field__label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:7px; color: var(--text); }
.field__hint{ font-size:12px; color: var(--muted-2); margin-top:6px; }

.input, .select, textarea.input{
  width:100%;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family:inherit; font-size:14.5px; color: var(--text);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input::placeholder{ color: var(--muted-2); }
.input:focus, .select:focus, textarea.input:focus{
  outline:none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.input-group{ position:relative; }
.input-group .input{ padding-right:44px; }
.input-group .input-icon{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color: var(--muted-2); width:19px; height:19px; pointer-events:none;
}

.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 16px; }

.checkbox-row{ display:flex; align-items:center; gap:10px; }

/* ---------- Search bar (reception) ---------- */
.search-hero{
  position:relative;
}
.search-hero .input{
  padding: 20px 60px 20px 20px;
  font-size:18px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.search-hero .input-icon{
  position:absolute; width:24px; height:24px; right:22px; top:50%; transform:translateY(-50%);
  color: var(--muted-2); pointer-events:none;
}

.search-results{
  position:absolute; top:calc(100% + 8px); right:0; left:0;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  max-height:340px; overflow-y:auto; z-index:20;
  display:none;
}
.search-results.is-open{ display:block; }
.search-result-item{
  display:flex; align-items:center; justify-content:space-between;
  padding: 13px 18px; cursor:pointer;
  border-bottom:1px solid var(--border-2);
  transition: background var(--t-fast);
}
.search-result-item:last-child{ border-bottom:none; }
.search-result-item:hover{ background: var(--bg); }
.search-result-item__name{ font-weight:700; font-size:14.5px; }
.search-result-item__meta{ font-size:12.5px; color: var(--muted); margin-top:2px; }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; border-radius: var(--r-lg); border:1px solid var(--border); background: var(--surface); }
table.table{ width:100%; border-collapse:collapse; min-width:640px; }
table.table thead th{
  text-align:right; font-size:12.5px; font-weight:700; color: var(--muted);
  text-transform:uppercase; letter-spacing:.03em;
  padding: 14px 18px; background: var(--bg); border-bottom:1px solid var(--border);
  white-space:nowrap;
}
table.table tbody td{
  padding: 15px 18px; border-bottom:1px solid var(--border-2);
  font-size:14px; vertical-align:middle; word-break:break-word; overflow-wrap:break-word;
}
table.table tbody tr{ transition: background var(--t-fast) var(--ease); }
table.table tbody tr:hover{ background: var(--bg); }
table.table tbody tr:last-child td{ border-bottom:none; }

.table-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:16px;
}
.table-toolbar__filters{ display:flex; gap:10px; flex-wrap:wrap; }

.avatar-sm{
  width:36px; height:36px; border-radius:50%;
  background: var(--primary-light); color: var(--primary-dark);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; flex-shrink:0;
}
/* أفتار الطالب الموحد — صورة أو initials */
.sv-photo{
  border-radius:50%; object-fit:cover; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color:#fff; font-weight:800; box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
}
.sv-photo--img{ background:var(--surface); border:2px solid var(--border); }
.sv-photo--ini{ letter-spacing:0; }
/* حقل رفع صورة الطالب */
.std-photo-wrap{ position:relative; width:64px; height:64px; }
.std-photo-btn{
  position:absolute; bottom:-4px; left:-4px; width:26px; height:26px;
  border-radius:50%; border:2px solid var(--surface);
  background: var(--primary); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .15s ease;
}
.std-photo-btn:hover{ transform: scale(1.12); }
.std-photo-btn svg{ width:13px; height:13px; }
.cell-user{ display:flex; align-items:center; gap:10px; }
.cell-user__name{ font-weight:700; }
.cell-user__meta{ font-size:12px; color: var(--muted); }

.row-actions{ display:flex; gap:6px; justify-content:flex-end; }

/* ---------- Empty state ---------- */
.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 60px 20px; color: var(--muted);
}
.empty-state__icon{
  width:64px; height:64px; border-radius:50%; background: var(--bg);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  color: var(--muted-2);
}
.empty-state__icon svg{ width:30px; height:30px; }
.empty-state__title{ font-weight:800; color: var(--text); font-size:15.5px; margin-bottom:6px; }
.empty-state__text{ font-size:13.5px; max-width:320px; }

/* ---------- Loading ---------- */
.skeleton{
  background: linear-gradient(90deg, var(--border-2) 25%, var(--border) 37%, var(--border-2) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes skeleton-loading{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

.spinner{
  width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation: spin .7s linear infinite;
}
.spinner-dark{ border:2.5px solid var(--border); border-top-color: var(--primary); }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------- Toast ---------- */
.toast-stack{
  position:fixed; bottom:24px; left:24px; z-index:100;
  display:flex; flex-direction:column; gap:10px;
  max-width:min(340px, calc(100vw - 48px));
}
.toast{
  display:flex; align-items:flex-start; gap:12px;
  background: var(--text); color:#fff;
  padding: 14px 16px; border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size:13.5px; font-weight:600;
  animation: toast-in .25s var(--ease);
}
.toast.is-leaving{ animation: toast-out .2s var(--ease) forwards; }
@keyframes toast-in{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes toast-out{ to{ opacity:0; transform: translateY(10px); } }
.toast-icon{ width:20px; height:20px; flex-shrink:0; margin-top:1px; }
.toast-success{ background:#16805F; }
.toast-danger{ background:#B33639; }
.toast-warning{ background:#B4712E; }

/* ---------- Modal / Dialog ---------- */
.modal-overlay{
  position:fixed; inset:0; background: rgba(20,24,35,.5);
  display:none; align-items:center; justify-content:center; z-index:90;
  padding:20px; backdrop-filter: blur(2px);
  animation: fade-in .18s var(--ease);
}
.modal-overlay.is-open{ display:flex; }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }

.modal{
  background: var(--surface); border-radius: var(--r-lg);
  width:100%; max-width:420px;
  box-shadow: var(--shadow-lg);
  animation: modal-in .22s var(--ease);
  overflow:hidden;
}
.modal--wide{ max-width:560px; }
@keyframes modal-in{ from{ opacity:0; transform: scale(.96) translateY(6px); } to{ opacity:1; transform:scale(1) translateY(0); } }

.modal__head{ padding: 20px 22px 0; }
.modal__title{ font-size:17px; font-weight:800; }
.modal__body{ padding: 14px 22px 22px; color: var(--muted); font-size:14px; }
.modal__actions{ display:flex; gap:10px; padding: 0 22px 22px; }
.modal__actions .btn{ flex:1; }

/* ---------- Misc ---------- */
.divider{ height:1px; background: var(--border); border:none; margin: 18px 0; }
.text-muted{ color: var(--muted); }
.text-success{ color: var(--success); }
.text-danger{ color: var(--danger); }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.flex-gap{ display:flex; align-items:center; gap:10px; }
.mt-0{ margin-top:0 !important; }

/* ---------- Grid helpers ---------- */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .grid-3{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px){
  .sidebar{ transform: translateX(100%); box-shadow: var(--shadow-lg); }
  .sidebar.is-open{ transform: translateX(0); }
  .main{ margin-right:0; }
  .menu-toggle{ display:flex; }
  .form-grid{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
  .topbar__date{ display:none; }
}

@media (max-width: 560px){
  .page{ padding:16px; }
  .topbar{ padding:0 14px; }
  .user-chip__name, .user-chip__role{ display:none; }
  .user-chip{ padding:6px; }
  .stat-grid{ grid-template-columns: 1fr 1fr; }
}

.sidebar-backdrop{
  display:none; position:fixed; inset:0; background: rgba(20,24,35,.4); z-index:35;
}
.sidebar-backdrop.is-open{ display:block; }

/* ---------- Login page ---------- */
.auth-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(52,84,209,.12), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(52,84,209,.10), transparent 40%),
    var(--bg);
  padding:20px;
}
.auth-card{
  width:100%; max-width:400px; background: var(--surface);
  border:1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 36px 32px;
}
.auth-card__logo{
  width:52px; height:52px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--primary), #6C8CF5);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:20px; margin:0 auto 18px;
}
.auth-card__title{ text-align:center; font-size:20px; font-weight:800; margin-bottom:4px; }
.auth-card__subtitle{ text-align:center; color: var(--muted); font-size:13.5px; margin-bottom:26px; }
.auth-error{
  background: var(--danger-light); color: var(--danger); font-size:13px; font-weight:700;
  padding:10px 14px; border-radius: var(--r-md); margin-bottom:16px; display:none;
}
.auth-error.is-open{ display:block; }
.auth-demo-hint{ text-align:center; font-size:12px; color: var(--muted-2); margin-top:18px; }
.auth-secret-note{
  background: var(--warning-light, #fff7e0); color: var(--warning, #b8860b);
  font-size:12.5px; font-weight:600; line-height:1.6; border-radius:var(--r-md);
  padding:10px 14px; margin-bottom:14px;
}

/* ===== Auth role tabs ===== */
.auth-tabs{
  display:flex; gap:4px; margin-bottom:24px; background:var(--bg);
  padding:4px; border-radius:var(--r-md);
}
.auth-tab{
  flex:1; padding:9px 12px; border:none; background:transparent;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--muted);
  border-radius:var(--r-sm); cursor:pointer; transition:var(--t-fast) var(--ease);
  white-space:nowrap; display:flex; align-items:center; justify-content:center; gap:6px;
}
.auth-tab:hover{ color:var(--text); }
.auth-tab.is-active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.auth-tab.is-disabled{ opacity:.45; cursor:not-allowed; }
.auth-tab.is-disabled:hover{ color:var(--muted); }
.auth-tab-badge{ font-size:10px; font-weight:700; color:var(--muted-2); }
.auth-fields{ transition:opacity .15s var(--ease); }

/* ===== Parent dashboard — Bento ===== */
.parent-dashboard{ margin-top:8px; }

/* Stat rail */
.ps-rail{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:28px; }
.ps-chip{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:16px 18px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:var(--t-med) var(--ease);
}
.ps-chip::before{ content:""; position:absolute; top:0; right:0; width:4px; height:100%; background:var(--c,var(--primary)); }
.ps-chip:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.ps-chip__n{ font-size:28px; font-weight:700; line-height:1; color:var(--text); margin-bottom:3px; }
.ps-chip__l{ font-size:12px; font-weight:600; color:var(--muted); }

/* Bento grid */
.ps-bento{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:14px; }

.ps-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--shadow-sm); cursor:pointer; position:relative; overflow:hidden;
  transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
  display:flex; flex-direction:column; gap:10px;
}
.ps-card::after{ content:""; position:absolute; top:0; right:0; left:0; height:3px; background:var(--c,var(--primary)); }
.ps-card{ animation:fadeUp .35s ease both; }
.ps-card:nth-child(1) { animation-delay:.03s; }
.ps-card:nth-child(2) { animation-delay:.06s; }
.ps-card:nth-child(3) { animation-delay:.09s; }
.ps-card:nth-child(4) { animation-delay:.12s; }
.ps-card:nth-child(5) { animation-delay:.15s; }
.ps-card:nth-child(6) { animation-delay:.18s; }
.ps-chip{ animation:fadeUp .3s ease both; }
.ps-chip:nth-child(1) { animation-delay:.02s; }
.ps-chip:nth-child(2) { animation-delay:.05s; }
.ps-chip:nth-child(3) { animation-delay:.08s; }
.ps-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; }
.ps-card:active{ transform:translateY(-1px); }
.ps-card__top{ display:flex; align-items:center; gap:14px; }
.ps-card__av{
  width:48px; height:48px; border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--primary), #6C8CF5);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:17px; flex-shrink:0;
}
.ps-card__info{ flex:1; min-width:0; }
.ps-card__name{ font-weight:700; font-size:15px; color:var(--text); }
.ps-card__meta{ font-size:12px; color:var(--muted); margin-top:2px; }
.ps-card__codes{ display:flex; gap:6px; margin-top:4px; flex-wrap:wrap; }
.ps-card__code{ font-size:11px; font-weight:700; color:var(--muted-2); background:var(--bg); padding:2px 8px; border-radius:var(--r-sm); }
.ps-card__body{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:2px; }
.ps-card__badge{
  font-size:11px; font-weight:700; padding:5px 10px; border-radius:var(--r-full);
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
}
.ps-card__badge--wallet{ background:var(--success-light); color:var(--success); }
.ps-card__badge--debt{ background:var(--danger-light); color:var(--danger); }
.ps-card__badge--inactive{ background:var(--warning-light); color:var(--warning); }
.ps-card__badge--status{ background:var(--primary-light); color:var(--primary); }
.ps-card__footer{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:10px; border-top:1px solid var(--border); }
.ps-card__footer .hint{ font-size:11.5px; color:var(--muted-2); font-weight:600; display:flex; align-items:center; gap:5px; }
.ps-card__footer .arrow{ color:var(--muted-2); font-size:20px; transition:transform var(--t-fast) var(--ease); }
.ps-card:hover .ps-card__footer .arrow{ transform:translateX(-4px); color:var(--primary); }
.ps-card__empty{
  grid-column:1/-1; text-align:center; padding:40px 20px; color:var(--muted);
  background:var(--surface); border:1px dashed var(--border); border-radius:var(--r-lg);
}

.btn-ghost{
  background:transparent; border:none; color:var(--primary); font-weight:600;
  font-size:13px; cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; padding:6px 10px; border-radius:var(--r-sm);
  transition:var(--t-fast) var(--ease);
}
.btn-ghost:hover{ background:var(--primary-light); }



/* ---------- 404 ---------- */
.error-screen{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: var(--bg); text-align:center; padding:20px;
}
.error-screen__code{ font-size:88px; font-weight:800; color: var(--primary); line-height:1; }
.error-screen__title{ font-size:20px; font-weight:800; margin:14px 0 8px; }
.error-screen__text{ color: var(--muted); margin-bottom:22px; }

/* ---------- Tabs (Settings lookup tables) ---------- */
.tabs{
  display:flex; gap:2px; flex-wrap:nowrap; margin-bottom:24px;
  background: var(--bg); border-radius:var(--r-md);
  padding:4px; border:1px solid var(--border);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.tab-btn{
  padding:10px 18px; border:none; background:transparent; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:700; color: var(--muted);
  border-radius:var(--r-sm); transition: all .15s var(--ease);
  display:flex; align-items:center; gap:8px; flex-shrink:0; white-space:nowrap;
}
.tab-btn:hover{ color: var(--text); background: var(--surface); }
.tab-btn.is-active{
  color: var(--primary-dark); background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.tab-btn svg{ width:16px; height:16px; }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; animation: fadeIn .15s ease; }

/* ---------- Code pill (student/group codes) ---------- */
.code-pill{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: 'Cairo', sans-serif; font-weight:800; letter-spacing:.3px;
  background: var(--primary-light); color: var(--primary-dark);
  padding:4px 10px; border-radius: var(--r-sm); font-size:13px; direction:ltr;
}

/* ---------- Status action group (reception secondary actions) ---------- */
.action-zone{
  background: var(--bg); border:1px dashed var(--border); border-radius: var(--r-md);
  padding:14px 16px; margin-top:14px;
}
.action-zone__label{ font-size:12.5px; font-weight:700; color: var(--muted); margin-bottom:10px; }

@keyframes fadeIn{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform:none; } }

/* =========================================================
   ACADEMIC PERIODS TREE — شجرة العام الدراسي
   ========================================================= */
.ap-year{
  border:1px solid var(--border); border-right:3px solid var(--primary);
  border-radius:var(--r-md); margin-bottom:16px; overflow:hidden;
  background: var(--surface);
}
.ap-year__header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px;
  background: var(--bg);
}
.ap-year__title{
  display:flex; align-items:center; gap:10px; font-size:15px; color: var(--text);
}
.ap-year__title svg{ width:18px; height:18px; color: var(--primary); }
.ap-year__title strong{ color: var(--primary-dark); }

.ap-term{
  margin:8px 12px 0; border:1px solid var(--border);
  border-radius:var(--r-sm); overflow:hidden;
  background: var(--surface);
}
.ap-term:last-child{ margin-bottom:12px; }
.ap-term__header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px;
  background: var(--bg);
  border-bottom:1px solid var(--border);
}
.ap-term__title{
  display:flex; align-items:center; gap:8px; font-size:13px;
}
.ap-term__title svg{ width:15px; height:15px; color: var(--success); }
.ap-term__title span:first-of-type{ font-weight:700; color: var(--text); }

.ap-months{
  padding:10px 12px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:8px;
}
.ap-month{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px; border-radius:var(--r-sm);
  background: var(--bg);
  border:1px solid transparent;
  font-size:13px;
}
.ap-month:hover{
  border-color: var(--border);
}
.ap-month__info{
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.ap-month__info strong{ font-size:13px; color: var(--text); }
.ap-month__info span{ font-size:11px; color: var(--muted); }

.ap-empty{
  padding:12px 16px; font-size:12px; color: var(--muted-2); font-style:italic;
}

/* =========================================================
   ROLLOVER PAGE — صفحة ترحيل الطلاب
   ========================================================= */
.rollover-modes{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px;
  margin-bottom:24px;
}
.rollover-mode-card{
  display:flex; align-items:center; gap:16px;
  padding:18px 22px; border:1px solid var(--border);
  border-radius:var(--r-md); cursor:pointer;
  background: var(--surface);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.rollover-mode-card:hover{
  background: var(--bg);
}
.rollover-mode-card.is-active{
  border-color: var(--primary); background: var(--surface);
}
.rollover-mode-card input[type="radio"]{ display:none; }

.rollover-mode-card__icon{
  width:48px; height:48px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
  color: var(--surface);
}
.rollover-mode-card__content{ flex:1; min-width:0; }
.rollover-mode-card__title{ font-size:15px; font-weight:700; color: var(--text); margin-bottom:3px; }
.rollover-mode-card__desc{ font-size:12px; color: var(--muted); line-height:1.6; }

.rollover-mode-card__check{
  width:22px; height:22px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  background: var(--primary); color:#fff;
  font-size:12px; flex-shrink:0;
  opacity:0;
  transition: opacity .15s var(--ease);
}
.rollover-mode-card.is-active .rollover-mode-card__check{
  opacity:1;
}

/* ---------- Status button grid (reception) ---------- */
.status-btn-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px;
}
.status-btn-grid .btn{
  justify-content:center; padding:14px 12px; font-size:14px;
}
.status-btn-grid .btn svg{ width:18px; height:18px; }

/* ---------- Session page (إدارة الحصة) — سريع جدًا لأعداد كبيرة ---------- */
.session-toolbar{
  position: sticky; top: 0; z-index: 6; background: var(--surface);
  padding: 14px 0 14px; border-bottom: 1px solid var(--border); margin-bottom:14px;
}
.mode-selector{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.mode-btn{
  padding:10px 16px; border-radius: var(--r-md); border:2px solid var(--border);
  background: var(--surface); font-family:inherit; font-weight:700; font-size:13.5px;
  cursor:pointer; display:flex; align-items:center; gap:8px; transition:.15s;
  color: var(--muted);
}
.mode-btn:hover{ border-color: var(--primary-light); }
.mode-btn.is-active{ border-color: currentColor; box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
.mode-btn.tone-success.is-active{ background: var(--success-light); color: var(--success); }
.mode-btn.tone-info.is-active{ background: var(--primary-light); color: var(--info); }
.mode-btn.tone-warning.is-active{ background: var(--warning-light); color: var(--warning); }
.mode-btn.tone-danger.is-active{ background: var(--danger-light); color: var(--danger); }

.quick-stats-bar{
  display:flex; gap:18px; flex-wrap:wrap; padding:12px 16px; background: var(--bg);
  border-radius: var(--r-md); margin-bottom:14px; font-size:13px;
}
.quick-stats-bar__item{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.quick-stats-bar__value{ font-weight:800; font-size:15px; }
.quick-stats-bar__label{ color: var(--muted); }

.quick-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr));
  gap:8px;
}
.quick-card{
  position:relative; border:2px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); padding:10px 10px 8px; cursor:pointer; text-align:center;
  transition: transform .1s, box-shadow .15s, border-color .15s, background .15s;
  user-select:none;
}
.quick-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.quick-card:active{ transform: translateY(0); }
.quick-card__code{ font-weight:800; font-size:12.5px; direction:ltr; color: var(--muted); margin-bottom:4px; }
.quick-card__name{ font-weight:700; font-size:13px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.quick-card__menu{
  position:absolute; top:4px; left:4px; width:22px; height:22px; border-radius:6px;
  border:none; background:rgba(0,0,0,.06); color: var(--muted); display:flex;
  align-items:center; justify-content:center; cursor:pointer; font-size:14px; line-height:1;
}
.quick-card__menu:hover{ background:rgba(0,0,0,.12); }
.quick-card.tone-success{ background: var(--success-light); border-color: var(--success); }
.quick-card.tone-info{ background: var(--primary-light); border-color: var(--info); }
.quick-card.tone-warning{ background: var(--warning-light); border-color: var(--warning); }
.quick-card.tone-danger{ background: var(--danger-light); border-color: var(--danger); }

@media (max-width:768px){
  .quick-grid{ grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); }
}

/* ---------- Form sections (student-form full page) ---------- */
.form-section__title{
  font-size:13.5px; font-weight:800; color: var(--primary-dark);
  text-transform:uppercase; letter-spacing:.03em; margin-bottom:14px;
}

@keyframes pulse{
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(1.4); }
}

/* ---------- Finance panel (reception — تفاصيل الحساب عند التسجيل) ---------- */
.finance-panel{
  background: linear-gradient(135deg, var(--success-light) 0%, var(--primary-light) 100%);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin: 16px 0;
}
.finance-panel__row{
  display:flex; justify-content:space-between; align-items:center;
  padding: 5px 0; font-size: 13.5px; color: var(--text);
}
.finance-panel__row .og-price{ text-decoration: line-through; color: var(--muted); margin-left:8px; font-size:12.5px; }
.finance-panel__row.is-discount{ color: var(--success); font-weight:700; }
.finance-panel__row.is-due{ color: var(--danger); font-weight:700; }
.finance-panel__row.is-wallet{ color: var(--success); font-weight:700; background: rgba(16,185,129,.06); border-radius:6px; padding:4px 8px; }
.finance-panel__divider{ height:1px; background: rgba(0,0,0,.08); margin: 10px 0; }
.finance-panel__total-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
}
.finance-panel__total-row label{ font-weight:800; font-size:14.5px; }
.finance-panel__input-wrap{
  display:flex; align-items:center; gap:6px; background:#fff; border:2px solid var(--primary);
  border-radius: var(--r-sm); padding:6px 14px; box-shadow: var(--shadow-sm);
}
.finance-panel__input-wrap input{
  border:none; outline:none; width:100px; font-weight:800; font-size:19px; text-align:center;
  font-family:inherit; background:transparent; color: var(--primary-dark);
}
.finance-panel__input-wrap span{ font-size:13px; color: var(--muted); font-weight:700; }

/* ---------- Theme switcher (header) ---------- */
.theme-switcher{ position:relative; }
.theme-switcher__btn{
  display:flex; align-items:center; gap:8px;
  padding:7px 14px;
  border-radius:var(--r-full);
  border:2px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer;
  transition: border-color .2s, box-shadow .2s;
}
.theme-switcher__btn:hover{
  border-color:var(--primary);
  box-shadow:var(--shadow-sm);
}
.theme-switcher__swatch{
  width:16px; height:16px; border-radius:50%; flex-shrink:0;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4), 0 1px 3px rgba(0,0,0,.15);
}
.theme-switcher__label{ line-height:1; }
.theme-switcher__btn svg{ width:18px; height:18px; color:var(--muted); }
.theme-menu{
  display:none; position:absolute; top:calc(100% + 8px); left:0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); padding:6px; min-width:200px; z-index:80;
}
.theme-menu.is-open{ display:block; animation:fadeIn .15s ease; }
.theme-menu__item{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px;
  border:none; background:none; border-radius:var(--r-sm); cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--text);
  text-align:right;
  transition:background .12s;
}
.theme-menu__item:hover{ background:var(--bg); }
.theme-menu__item.is-active{ color:var(--primary); font-weight:800; }
.theme-menu__item svg{ width:16px; height:16px; margin-right:auto; flex-shrink:0; }
.theme-menu__swatch{
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.12);
}

/* ---------- Pager (session roster navigation) ---------- */
.pager{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--border);
}
.pager__label{ font-weight:700; font-size:13.5px; color: var(--muted); min-width:80px; text-align:center; }

/* ---------- New compact theme button (dashboard) ---------- */
.theme-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border:2px solid var(--border); border-radius:50%;
  background: var(--surface); cursor:pointer; font-family:inherit;
  transition: all .15s;
}
.theme-btn:hover{ transform: scale(1.1); border-color: var(--muted); }
.theme-btn.is-active{ 
  border-color: var(--primary); 
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), 0.2);
  transform: scale(1.1);
}
.theme-btn__swatch{
  width:24px; height:24px; border-radius:50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 0 0 1px rgba(0,0,0,.05);
}
.theme-btn__check{
  position:absolute; top:-4px; right:-4px; width:16px; height:16px; border-radius:50%;
  background: var(--success); color:#fff; display:flex; align-items:center; justify-content:center;
}
.theme-btn__check svg{ width:10px; height:10px; }

/* ---------- Sidebar close button (mobile discoverability) ---------- */
.sidebar__close{
  margin-right:auto; width:30px; height:30px; border-radius: var(--r-sm);
  border:none; background: var(--bg); color: var(--muted); align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; display:none;
}
.sidebar__close svg{ width:16px; height:16px; }
.sidebar__close:hover{ background: var(--border); }
@media (max-width: 900px){
  .sidebar__close{ display:flex; }
}

/* ---------- Quick Attendance (الحضور السريع) ---------- */
.qa-group-card{
  border:2px solid; border-radius: var(--r-md); padding:14px 12px; cursor:pointer;
  font-family:inherit; text-align:right; transition: transform .1s, box-shadow .15s;
}
.qa-group-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.qa-group-card.is-active{ box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.qa-group-card__name{ font-weight:800; font-size:14px; margin-bottom:4px; }
.qa-group-card__meta{ font-size:12px; opacity:.85; font-weight:600; }

.qa-section{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--r-md);
  margin-bottom:14px; overflow:hidden;
}
.qa-section summary{
  padding:14px 18px; cursor:pointer; font-weight:800; font-size:14.5px;
  display:flex; align-items:center; gap:10px; list-style:none; user-select:none;
}
.qa-section summary::-webkit-details-marker{ display:none; }
.qa-section summary::before{
  content:"▸"; display:inline-block; transition: transform .15s; color: var(--muted);
}
.qa-section[open] summary::before{ transform: rotate(90deg); }
.qa-section__body{ padding:6px 12px 14px; }

.qa-row{
  display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius: var(--r-sm);
  flex-wrap:wrap;
}
.qa-row:hover{ background: var(--bg); }
.qa-row.is-processed{ opacity:.6; }
.qa-row__name{ font-weight:700; font-size:14px; flex:1; min-width:120px; }

/* ---------- Finance daily breakdown (per-group colorful cards + grand total) ---------- */
.finance-group-card{
  border:2px solid; border-radius: var(--r-md); padding:16px; background: var(--surface);
}
.finance-group-card__name{ font-weight:800; font-size:15px; margin-bottom:3px; }
.finance-group-card__time{ font-size:12.5px; color: var(--muted); margin-bottom:12px; font-weight:600; }
.finance-group-card__stats{ display:flex; gap:14px; margin-bottom:12px; }
.finance-group-card__stat{ display:flex; flex-direction:column; align-items:center; flex:1; }
.finance-group-card__value{ font-weight:800; font-size:18px; color: var(--text); }
.finance-group-card__label{ font-size:11px; color: var(--muted); font-weight:600; margin-top:2px; }
.finance-group-card__revenue{
  border-top:2px dashed; padding-top:10px; font-size:13px; text-align:center; color: var(--text);
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.finance-group-card--wide .finance-group-card__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:12px; flex-wrap:wrap; }
.finance-group-card--wide .finance-group-card__stats{ margin-bottom:0; flex:0 0 auto; }

.finance-total-card{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--r-lg); padding:22px 24px; color:#fff; box-shadow: var(--shadow-lg);
}
.finance-total-card__title{
  font-size:16px; font-weight:800; margin-bottom:16px; display:flex; align-items:center; gap:8px;
}
.finance-total-card__title svg{ width:20px; height:20px; }
.finance-total-card__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:16px; }
.finance-total-card__item{ display:flex; flex-direction:column; }
.finance-total-card__value{ font-size:26px; font-weight:800; }
.finance-total-card__label{ font-size:12.5px; opacity:.85; margin-top:2px; font-weight:600; }

/* =========================================================
   RESPONSIVE — Tablettte & Mobile improvements
   ========================================================= */

/* --- Tablets portrait (≤768px) --- */
@media (max-width: 768px){
  .grid-2{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
  .status-btn-grid{ grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); }
  .status-btn-grid .btn{ padding:12px 10px; font-size:13px; }
  .quick-stats-bar{ gap:10px; padding:10px 12px; font-size:12px; }
  .quick-stats-bar__value{ font-size:14px; }
  .finance-group-card__stats{ gap:8px; }
  .finance-group-card__value{ font-size:16px; }
  .finance-total-card__grid{ grid-template-columns:repeat(auto-fit, minmax(110px,1fr)); gap:12px; }
  .finance-total-card__value{ font-size:22px; }
}

/* --- Small mobile (≤560px) --- */
@media (max-width: 560px){
  .page__header{ flex-direction:column; align-items:flex-start; gap:10px; }
  .page__header .flex-gap{ width:100%; }
  .page__header .btn{ flex:1; justify-content:center; min-width:0; }
  .page__title{ font-size:18px; }
  .page__subtitle{ font-size:12px; }

  .tabs{ gap:2px; }
  .tab-btn{ padding:9px 12px; font-size:12.5px; }
  .tab-btn svg{ width:14px; height:14px; }

  .status-btn-grid{ grid-template-columns:1fr 1fr; gap:8px; }
  .status-btn-grid .btn{ padding:12px 8px; font-size:12.5px; }

  .quick-stats-bar{ gap:8px; padding:8px 10px; font-size:11px; flex-wrap:wrap; }
  .quick-stats-bar__value{ font-size:13px; }

  .modal,
  .modal--wide{ max-width:calc(100vw - 32px); padding:20px 16px; }

  .pager{ gap:8px; padding:12px 0 0; }
  .pager__label{ font-size:12px; min-width:auto; }

  .row-actions{ flex-wrap:wrap; gap:4px; }

  .finance-panel{ padding:12px 14px; margin:12px 0; }
  .finance-panel__row{ font-size:12.5px; }
  .finance-panel__input-wrap input{ width:80px; font-size:16px; }

  .finance-group-card{ padding:12px; }
  .finance-group-card__name{ font-size:14px; }
  .finance-group-card__value{ font-size:15px; }
  .finance-group-card__stats{ gap:6px; }
  .finance-group-card__revenue{ font-size:12px; flex-wrap:wrap; justify-content:center; }

  .finance-total-card{ padding:16px; }
  .finance-total-card__title{ font-size:14px; }
  .finance-total-card__value{ font-size:20px; }
  .finance-total-card__grid{ grid-template-columns:1fr 1fr; gap:10px; }

  .auth-card{ padding:24px 20px; }
  .auth-card__title{ font-size:18px; }
}

/* --- Very small mobile (≤380px) --- */
@media (max-width: 380px){
  .page{ padding:12px; }
  .page__title{ font-size:16px; }
  .status-btn-grid{ grid-template-columns:1fr; }
  .finance-total-card__grid{ grid-template-columns:1fr; }
}

/* --- Mobile form inputs: prevent iOS zoom on focus --- */
@media (max-width: 768px){
  .input, .select, textarea, input:not([type=checkbox]):not([type=radio]){ font-size:16px !important; }
}

/* --- Bulk import modal responsive --- */
.bulk-modal{ max-width:820px; width:100%; }
@media (max-width: 640px){
  .bulk-modal{ max-width:calc(100vw - 32px); }
}
@media (max-width: 400px){
  .bulk-modal{ max-width:100%; border-radius:12px; }
}

/* =========================================================
   COMPREHENSIVE MOBILE RESPONSIVENESS
   ========================================================= */

/* --- Topbar two-row on mobile (≤768px) --- */
@media (max-width: 768px){
  .topbar{
    height:auto; min-height:var(--header-h);
    flex-wrap:wrap; padding:10px 14px; gap:8px;
  }
  .topbar__left{
    width:100%; justify-content:flex-start;
  }
  .topbar__right{
    width:100%; justify-content:flex-start;
    flex-wrap:wrap; gap:6px;
  }
}

/* --- Topbar compact actions (≤560px) --- */
@media (max-width: 560px){
  .topbar{ padding:8px 12px; gap:6px; }
  .topbar__title{ font-size:15px; }

  /* Hide date */
  .topbar__date{ display:none; }

  /* Hide user chip completely */
  .user-chip{ display:none; }

  /* Shift indicator → icon only */
  .shift-indicator{ padding:4px 6px; font-size:0; gap:0; }
  .shift-indicator svg{ margin:0; }
  .shift-indicator--open{ width:32px; height:32px; border-radius:50%; }
  .shift-indicator--closed{ width:32px; height:32px; border-radius:50%; }

  /* Theme switcher → icon only (swatch dot) */
  .theme-switcher__btn{ padding:6px; gap:0; }
  .theme-switcher__label{ display:none; }
  .theme-switcher__btn svg{ display:none; }
  .theme-switcher__swatch{ width:20px; height:20px; }

  /* Logout → icon only */
  .topbar-logout{ padding:6px; gap:0; }
  .topbar-logout span{ display:none; }
  .topbar-logout svg{ margin:0; }

  /* Menu toggle */
  .menu-toggle{ width:40px; height:40px; }
  .menu-toggle svg{ width:18px; height:18px; }
}

/* --- Topbar very small (≤380px) --- */
@media (max-width: 380px){
  .topbar{ padding:6px 10px; gap:4px; }
  .topbar__title{ font-size:14px; }
  .denomination-grid{ grid-template-columns:1fr !important; }
}

/* --- Tables mobile (≤560px) --- */
@media (max-width: 560px){
  table.table{ min-width:480px; font-size:13px; }
  table.table thead th{ padding:10px 12px; font-size:11px; }
  table.table tbody td{ padding:10px 12px; font-size:13px; }
  .table-toolbar{ flex-direction:column; align-items:stretch; }
  .table-toolbar__filters{ gap:6px; }
}

/* --- Stat grid small mobile (≤380px) --- */
@media (max-width: 380px){
  .stat-grid{ grid-template-columns:1fr; }
}

/* --- Roster controls wrapping (≤480px) --- */
@media (max-width: 480px){
  .roster-controls{ flex-wrap:wrap; }
  .roster-controls__filter{ flex:1 1 100%; }
}

/* --- Modal full width on very small (≤400px) --- */
@media (max-width: 400px){
  .modal-overlay{ padding:10px; }
  .modal,
  .modal--wide{ max-width:100%; border-radius:var(--r-md); }
}

/* --- Quick attendance group cards (≤768px) --- */
@media (max-width: 768px){
  .qa-row{ gap:8px; padding:8px 6px; }
  .qa-row__name{ font-size:13px; min-width:80px; }
  .qa-row .btn{ padding:6px 8px; font-size:12px; }
  .absent-row{ flex-wrap:wrap; gap:6px; padding:6px 8px; }
}

/* --- Shift denomination inputs (≤560px) --- */
@media (max-width: 560px){
  .denomination-grid{ grid-template-columns:1fr 1fr !important; gap:8px; }
  .denomination-row .input{ min-width:0; width:100%; text-align:center; padding:12px 4px; font-size:16px !important; }
  .denomination-row .label{ font-size:12px; flex:1; }
  .denom-field{ padding:8px; background:var(--bg); border-radius:var(--r-sm); border:1px solid var(--border); }
}

/* --- Reception search (≤560px) --- */
@media (max-width: 560px){
  .search-hero .input{ padding:14px 50px 14px 14px; font-size:16px; }
  .search-results{ max-height:280px; }
  .search-result-item{ padding:10px 14px; }
}

/* --- Settings tabs (≤560px) --- */
@media (max-width: 560px){
  .tabs{ gap:1px; padding:3px; }
  .tab-btn{ padding:8px 10px; font-size:12px; gap:4px; }
  .tab-btn svg{ width:12px; height:12px; }
}

/* --- Finance group cards (≤768px) --- */
@media (max-width: 768px){
  .finance-group-card{ padding:12px; }
  .finance-group-card__name{ font-size:13px; }
  .finance-group-card__time{ font-size:11px; }
  .finance-group-card__stats{ gap:6px; }
  .finance-group-card__value{ font-size:14px; }
}

/* --- Page padding mobile (≤560px) --- */
@media (max-width: 560px){
  .page{ padding:16px 12px; }
  .page__header{ flex-direction:column; align-items:flex-start; gap:8px; }
  .page__subtitle{ font-size:12px; }
}

/* --- Mobile: clip stray shadows, prevent horizontal scroll --- */
html{ overflow-x:hidden; }
body{ overflow-x:hidden; min-width:0; width:100%; }
.page{ overflow:visible; }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* --- Ultra-small phones (≤320px): fix inline min-widths --- */
@media (max-width: 320px){
  .ti-actions{ gap:8px; margin-bottom:16px; }
  .ti-action-btn{ padding:12px 10px; gap:10px; border-radius:10px; }
  .ti-action-btn__icon{ width:32px; height:32px; }
  .ti-action-btn__icon svg{ width:16px; height:16px; }
  .ti-action-btn__title{ font-size:11px; }
  .ti-action-btn__count{ font-size:10px; }

  .ti-student-row{ flex-wrap:wrap; gap:6px; padding:10px 0; }
  .ti-student-row__actions{ width:100%; justify-content:flex-end; }
  .ti-group-header{ flex-wrap:wrap; gap:6px; }

  .ti-exam-table{ font-size:11px; }
  .ti-exam-table th, .ti-exam-table td{ padding:6px 8px; font-size:11px; }

  .ti-health-grid{ grid-template-columns:1fr 1fr; gap:8px; }
  .ti-health-card{ padding:10px; }

  .qa-group-card{ min-width:110px; padding:10px; }
  .qa-group-card__name{ font-size:12px; }
  .qa-group-card__code{ font-size:10px; }

  .sa-summary__progress-section{ min-width:0; flex:1 1 100%; }
  .sa-summary__finance-section{ min-width:0; flex:1 1 100%; }
  .sa-summary__progress-header{ flex-wrap:wrap; gap:6px; }
  .sa-summary__progress-count{ font-size:12px; }
  .sa-summary__progress-percent{ font-size:14px; }
  .sa-summary__progress-legend{ flex-wrap:wrap; gap:4px 10px; }
  .sa-summary__legend-item{ font-size:10px; }

  .roster-header{ flex-direction:column; gap:4px; }
  .roster-controls__search{ min-width:0; }

  .qa-row{ flex-wrap:wrap; }
  .qa-row .btn{ padding:4px 6px; font-size:11px; }

  .card-pad{ padding:14px 12px; }
  .card__title{ font-size:13px; }

  .page{ padding:10px 8px; }
  .page__title{ font-size:15px; }
  .page__subtitle{ font-size:11px; }

  .badge{ font-size:10px; padding:2px 6px; }
  .btn-sm{ padding:5px 8px; font-size:11px; }

  .btn-xs{ padding:8px 10px; font-size:12px; min-height:44px; }
  .btn-xs svg{ width:16px; height:16px; }

  .followup-tab-btn{ padding:8px 10px; font-size:12px; min-height:44px; }

  .absent-row{ flex-wrap:wrap; gap:6px; padding:10px 8px !important; }
  .absent-row .btn-xs{ flex:1 1 auto; min-width:0; text-align:center; }

  .finance-group-card__value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .finance-total-card__value{ font-size:16px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ti-health-card__value{ font-size:14px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .auth-card{ padding:20px 16px; }
  .auth-card__title{ font-size:16px; }

  .denomination-grid{ grid-template-columns:1fr !important; }
}

/* =========================================================
   Collection Dialog v2 — Animations
   ========================================================= */

@keyframes ucdFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ucdFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes ucdSlideUp {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ucdPop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.ucd-pay-btn:hover {
  background: color-mix(in srgb, var(--success) 85%, #000) !important;
  transform: scale(1.04);
  box-shadow: 0 3px 12px rgba(16,185,129,0.35) !important;
}

.ucd-pay-btn:active {
  transform: scale(0.96);
}

.ucd-confirm:hover {
  box-shadow: 0 6px 24px rgba(16,185,129,0.4) !important;
  transform: translateY(-1px);
}

.ucd-confirm:active {
  transform: translateY(0) scale(0.98);
}

.ucd-pay-all:hover {
  background: color-mix(in srgb, var(--success) 85%, #000) !important;
  box-shadow: 0 3px 12px rgba(16,185,129,0.35) !important;
}

.ucd-pay-all:active {
  transform: scale(0.98);
}

.ucd-item {
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
}

/* ─── Mobile card views ─── */
.fu-card-view,
.stg-card-view{ display:none; }

@media (max-width:560px) {
  .fu-table-wrap,
  .stg-groups-table-wrap,
  .stg-team-table-wrap{ display:none !important; }
  .fu-card-view,
  .stg-card-view{ display:flex; flex-direction:column; gap:10px; }
}

.fu-card,
.stg-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:12px;
  display:flex; flex-direction:column; gap:10px;
}
.fu-card__header{ display:flex; align-items:center; gap:8px; }
.fu-card__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  background:var(--bg); border-radius:var(--r-sm); padding:8px;
}
.fu-card__stat{
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.fu-card__actions{
  display:flex; flex-wrap:wrap; gap:6px;
  border-top:1px solid var(--border); padding-top:8px;
}
.stg-card__header{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-weight:700; font-size:14px;
}
.stg-card__body{
  display:flex; flex-direction:column; gap:6px; font-size:13px;
}
.stg-card__row{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.stg-card__row .text-muted{ font-size:12px; }
.stg-card__actions{
  display:flex; flex-wrap:wrap; gap:6px;
  border-top:1px solid var(--border); padding-top:8px;
}

/* ─── Bulk import preview table ─── */
.bi-row-done{ opacity:0.5; }
.bi-row-done td{ text-decoration:line-through; }
.bi-add-one{ transition:all .15s var(--ease); }
.bi-add-one:hover{ background:var(--success); color:#fff !important; border-color:var(--success) !important; }

/* ─── Incomplete data badge ─── */
.badge-incomplete{
  display:inline-flex; align-items:center; gap:4px;
  background:#fbbf24; color:#000; font-size:11px;
  padding:2px 8px; border-radius:var(--r-full);
  font-weight:700;
  animation: pulse-badge 2s ease infinite;
}
@keyframes pulse-badge{
  0%,100%{ opacity:1; }
  50%{ opacity:0.6; }
}

/* ─── Incomplete data banner ─── */
.incomplete-banner{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  border:1.5px solid #f59e0b;
  border-radius:var(--r-md); padding:12px 16px;
  font-weight:700; font-size:13.5px; color:#92400e;
}
.incomplete-banner .btn{ flex-shrink:0; }