/* ============================================================================
   وسيطكم — Waseetkom  |  Design System (Arabic / RTL)
   منصة وساطة تعليمية بين المعلم والمدرسة
   HTML5 · Bootstrap 5 (RTL) · CSS3 · Vanilla JS/jQuery
   ----------------------------------------------------------------------------
   الفهرس:
   1. المتغيّرات (Design Tokens) + الوضع الليلي
   2. إعادة الضبط والأساسيات
   3. Typography
   4. Layout / Containers / Sections
   5. Buttons
   6. Cards
   7. Badges / Status Pills / Chips
   8. Forms / Inputs / Wizard / Dropzone
   9. Tables
   10. Navbar (Public) + Footer
   11. Dashboard Shell (Sidebar + Topbar)
   12. Components (Timeline, Accordion, Avatars, Progress, Rating, Stepper, Empty)
   13. Utilities / Animations / AOS fallback
   14. Responsive
   ============================================================================ */

/* ==========================================================================
   1) DESIGN TOKENS
   ========================================================================== */
:root {
  /* ألوان الهوية */
  --brand:        #0FA3A3;   /* تركوازي أساسي */
  --brand-dark:   #0B7F86;
  --brand-light:  #16C0B0;
  --brand-050:    #E7F7F6;
  --brand-100:    #C7ECEA;
  --brand-grad:   linear-gradient(135deg, #0FA3A3 0%, #12B3A6 100%);

  --ink:          #0E2A38;   /* كحلي داكن */
  --ink-700:      #163a4d;
  --ink-soft:     #22485c;

  --accent:       #F6A821;   /* كهرماني */
  --accent-dark:  #d98e0c;
  --accent-050:   #FEF4E0;

  /* دلالية */
  --success: #16A34A; --success-050:#E7F6EC;
  --warning: #F59E0B; --warning-050:#FEF3DC;
  --danger:  #DC2626; --danger-050: #FBE9E9;
  --info:    #0EA5E9; --info-050:   #E4F5FD;

  /* محايدة (Light) */
  --bg:        #F6F9FB;
  --surface:   #FFFFFF;
  --surface-2: #F1F5F8;
  --border:    #E6EBF0;
  --border-2:  #D5DEE6;
  --muted:     #64748B;
  --muted-2:   #94A3B8;
  --text:      #0F172A;
  --heading:   #0E2A38;

  /* ظلال */
  --shadow-sm: 0 1px 2px rgba(14,42,56,.06), 0 1px 3px rgba(14,42,56,.05);
  --shadow-md: 0 4px 12px rgba(14,42,56,.08), 0 2px 6px rgba(14,42,56,.05);
  --shadow-lg: 0 12px 32px rgba(14,42,56,.12), 0 6px 12px rgba(14,42,56,.06);
  --shadow-brand: 0 8px 24px rgba(15,163,163,.28);

  /* حواف */
  --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* مسافات */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;

  /* حركة */
  --t-fast: .18s ease; --t: .3s cubic-bezier(.4,0,.2,1); --t-slow: .5s cubic-bezier(.4,0,.2,1);

  /* fonts */
  --font: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-head: 'Plus Jakarta Sans', 'Inter', sans-serif;

  --topbar-h: 68px;
  --sidebar-w: 268px;
}

/* الوضع الليلي */
[data-theme="dark"] {
  --brand:      #22C3B6;
  --brand-dark: #17A79c;
  --brand-050:  #10312f;
  --brand-100:  #14403c;
  --brand-grad: linear-gradient(135deg, #159c96 0%, #1fb6a9 100%);

  --ink:      #0a1922;
  --accent:   #F6B94B;
  --accent-050:#332715;

  --success-050:#12291c; --warning-050:#33280f; --danger-050:#331717; --info-050:#0d2836;

  --bg:        #0B1620;
  --surface:   #12222E;
  --surface-2: #172c3a;
  --border:    #22323F;
  --border-2:  #2c4150;
  --muted:     #90A4B4;
  --muted-2:   #6b8092;
  --text:      #E6EDF2;
  --heading:   #F1F6FA;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 14px 36px rgba(0,0,0,.55);
  --shadow-brand: 0 8px 24px rgba(34,195,182,.22);
}

/* ==========================================================================
   2) RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  direction: ltr;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  transition: background var(--t), color var(--t);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-dark); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--brand); }
ul { padding-inline-start: 1.1rem; }
:focus-visible { outline: 3px solid rgba(15,163,163,.45); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brand-100); color: var(--ink); }

/* Skip link (a11y) */
.skip-link {
  position: absolute; inset-inline-start: -999px; top: 0; z-index: 2000;
  background: var(--brand); color:#fff; padding:.6rem 1.2rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { inset-inline-start: 0; color:#fff; }

/* شريط تمرير */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* ==========================================================================
   3) TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); color: var(--heading); line-height: 1.35; margin: 0 0 .6rem; font-weight: 800; }
h1 { font-size: clamp(2rem, 4vw, 2.75rem); letter-spacing: -.5px; }
h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -.4px; }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
p  { margin: 0 0 1rem; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); line-height: 1.9; }
.text-muted-2 { color: var(--muted) !important; }
.text-brand { color: var(--brand) !important; }
.text-accent { color: var(--accent-dark) !important; }
.fw-800 { font-weight: 800; } .fw-900 { font-weight: 900; }

.section-tag {
  display:inline-flex; align-items:center; gap:.45rem;
  background: var(--brand-050); color: var(--brand-dark);
  font-weight:700; font-size:.85rem; padding:.4rem .9rem; border-radius: var(--r-pill);
  margin-bottom: .9rem;
}
.section-title { position: relative; margin-bottom: .6rem; }
.section-head { max-width: 680px; margin-inline: auto; text-align: center; margin-bottom: 2.6rem; }

/* تدرّج نصي */
.text-gradient {
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ==========================================================================
   4) LAYOUT / SECTIONS
   ========================================================================== */
.container-x { width: min(1200px, 92%); margin-inline: auto; }
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-sm { padding: clamp(2rem, 4vw, 3rem) 0; }
.bg-surface { background: var(--surface); }
.bg-soft { background: var(--surface-2); }
.bg-brand-soft { background: var(--brand-050); }
.divider { height:1px; background: var(--border); border:0; margin: 0; }

/* ==========================================================================
   5) BUTTONS
   ========================================================================== */
.btn {
  --bs-btn-focus-box-shadow: none;
  font-family: var(--font); font-weight: 700; border-radius: var(--r-sm);
  padding: .68rem 1.4rem; border: 1.5px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content:center; gap:.5rem;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t), color var(--t);
  line-height: 1.4; font-size: .98rem;
}
.btn:active { transform: translateY(1px); }
.btn i { font-size: 1.05em; }

.btn-brand { background: var(--brand-grad); color:#fff; box-shadow: var(--shadow-brand); }
.btn-brand:hover { color:#fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,163,163,.36); }
.btn-ink { background: var(--ink); color:#fff; }
.btn-ink:hover { background: var(--ink-700); color:#fff; transform: translateY(-2px); }
.btn-accent { background: var(--accent); color: var(--ink); }
.btn-accent:hover { background: var(--accent-dark); color:#fff; transform: translateY(-2px); }
.btn-outline-brand { background: transparent; color: var(--brand-dark); border-color: var(--brand); }
.btn-outline-brand:hover { background: var(--brand); color:#fff; }
.btn-soft { background: var(--brand-050); color: var(--brand-dark); }
.btn-soft:hover { background: var(--brand-100); color: var(--brand-dark); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-white { background:#fff; color: var(--ink); }
.btn-white:hover { background:#eef7f6; color: var(--ink); transform: translateY(-2px); }
.btn-lg { padding: .9rem 1.9rem; font-size: 1.05rem; }
.btn-sm { padding: .45rem .95rem; font-size: .85rem; }
.btn-pill { border-radius: var(--r-pill); }
.btn-block { width: 100%; }
.btn-icon { width: 42px; height: 42px; padding:0; border-radius: var(--r-sm); }

/* Icon action (tables/toolbars) */
.icon-btn {
  width: 38px; height: 38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius: var(--r-xs); border:1px solid var(--border); background: var(--surface);
  color: var(--muted); cursor:pointer; transition: all var(--t-fast);
}
.icon-btn:hover { color: var(--brand-dark); border-color: var(--brand); background: var(--brand-050); }
.icon-btn.danger:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-050); }

/* ==========================================================================
   6) CARDS
   ========================================================================== */
.card-x {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  overflow: hidden;
}
.card-x.hoverable:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--brand-100); }
.card-body-x { padding: 1.5rem; }
.card-pad-lg { padding: 2rem; }

/* بطاقة ميزة */
.feature-card { text-align: center; padding: 2rem 1.5rem; }
.feature-ico {
  width: 66px; height: 66px; border-radius: var(--r-md); display:grid; place-items:center;
  font-size: 1.7rem; margin-inline: auto; margin-bottom: 1.1rem;
  background: var(--brand-050); color: var(--brand-dark);
}
.feature-ico.amber { background: var(--accent-050); color: var(--accent-dark); }
.feature-ico.info  { background: var(--info-050);  color: var(--info); }
.feature-ico.ink   { background: rgba(14,42,56,.07); color: var(--ink); }
[data-theme="dark"] .feature-ico.ink { background: rgba(255,255,255,.08); color: var(--text); }

/* بطاقة إحصائية */
.stat-card { display:flex; align-items:center; gap:1rem; padding: 1.4rem; }
.stat-ico { width: 54px; height: 54px; border-radius: var(--r-md); display:grid; place-items:center; font-size:1.35rem; flex:0 0 auto; }
.stat-ico.brand { background: var(--brand-050); color: var(--brand-dark); }
.stat-ico.amber { background: var(--accent-050); color: var(--accent-dark); }
.stat-ico.success{ background: var(--success-050); color: var(--success); }
.stat-ico.info  { background: var(--info-050); color: var(--info); }
.stat-ico.danger{ background: var(--danger-050); color: var(--danger); }
.stat-val { font-family: var(--font-head); font-size: 1.85rem; font-weight: 800; line-height:1.1; color: var(--heading); }
.stat-label { color: var(--muted); font-size: .92rem; }
.stat-trend { font-size:.8rem; font-weight:700; display:inline-flex; align-items:center; gap:.2rem; }
.stat-trend.up { color: var(--success); } .stat-trend.down { color: var(--danger); }

/* بطاقة معلم */
.teacher-card { padding: 1.5rem; text-align:center; position: relative; }
.teacher-card .avatar { margin-inline:auto; margin-bottom:.9rem; }
.teacher-meta { display:flex; justify-content:center; gap:1.2rem; color:var(--muted); font-size:.9rem; margin:.6rem 0; flex-wrap:wrap; }
.teacher-tags { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:.7rem; }

/* ==========================================================================
   7) BADGES / STATUS PILLS / CHIPS
   ========================================================================== */
.badge-x { display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:700; padding:.32rem .75rem; border-radius: var(--r-pill); line-height:1; }
.badge-brand { background: var(--brand-050); color: var(--brand-dark); }
.badge-success{ background: var(--success-050); color: var(--success); }
.badge-warning{ background: var(--warning-050); color: var(--warning); }
.badge-danger { background: var(--danger-050); color: var(--danger); }
.badge-info   { background: var(--info-050); color: var(--info); }
.badge-muted  { background: var(--surface-2); color: var(--muted); }
.badge-x .dot { width:7px; height:7px; border-radius:50%; background: currentColor; }

/* Chip قابل للإزالة */
.chip { display:inline-flex; align-items:center; gap:.4rem; background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:.35rem .75rem; border-radius: var(--r-pill); font-size:.85rem; font-weight:600; }
.chip .x { cursor:pointer; color:var(--muted); }
.chip .x:hover { color: var(--danger); }

/* ==========================================================================
   8) FORMS
   ========================================================================== */
.form-label-x { font-weight: 700; color: var(--heading); margin-bottom:.4rem; font-size:.92rem; display:block; }
.form-label-x .req { color: var(--danger); }
.form-control-x, .form-select-x {
  width: 100%; background: var(--surface); border:1.5px solid var(--border-2);
  border-radius: var(--r-sm); padding: .7rem .95rem; color: var(--text); font-family: var(--font);
  font-size: .98rem; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t);
}
.form-control-x::placeholder { color: var(--muted-2); }
.form-control-x:focus, .form-select-x:focus { outline:none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(15,163,163,.13); }
.form-control-x.is-invalid { border-color: var(--danger); }
.form-control-x.is-valid { border-color: var(--success); }
textarea.form-control-x { min-height: 120px; resize: vertical; }
.form-hint { font-size:.82rem; color: var(--muted); margin-top:.35rem; }
.form-error { font-size:.82rem; color: var(--danger); margin-top:.35rem; display:flex; align-items:center; gap:.3rem; }

/* حقل مع أيقونة */
.input-icon { position: relative; }
.input-icon > i { position:absolute; inset-inline-start: .95rem; top:50%; transform: translateY(-50%); color: var(--muted-2); pointer-events:none; }
.input-icon .form-control-x { padding-inline-start: 2.6rem; }
.input-icon .toggle-pass { inset-inline-start:auto; inset-inline-end:.95rem; pointer-events:auto; cursor:pointer; }

/* Checkbox / Radio card */
.check-card { display:flex; gap:.75rem; align-items:flex-start; border:1.5px solid var(--border-2); border-radius: var(--r-sm); padding:.9rem 1rem; cursor:pointer; transition: all var(--t-fast); background: var(--surface); }
.check-card:hover { border-color: var(--brand); }
.check-card input { margin-top:.25rem; accent-color: var(--brand); width:1.05rem; height:1.05rem; }
.check-card.selected { border-color: var(--brand); background: var(--brand-050); }

/* Dropzone رفع الملفات */
.dropzone {
  border: 2px dashed var(--border-2); border-radius: var(--r-md); padding: 2.2rem 1.5rem; text-align:center;
  background: var(--surface-2); cursor:pointer; transition: all var(--t);
}
.dropzone:hover, .dropzone.drag { border-color: var(--brand); background: var(--brand-050); }
.dropzone .dz-ico { font-size: 2.4rem; color: var(--brand); margin-bottom:.6rem; }
.file-item { display:flex; align-items:center; gap:.8rem; background: var(--surface); border:1px solid var(--border); border-radius: var(--r-sm); padding:.7rem .9rem; }
.file-item .fi-ico { width:40px;height:40px;border-radius: var(--r-xs); display:grid;place-items:center; background: var(--danger-050); color: var(--danger); flex:0 0 auto; }

/* Wizard / Stepper (تسجيل متعدّد الخطوات) */
.stepper { display:flex; gap:.5rem; align-items:center; margin-bottom: 2rem; flex-wrap:wrap; }
.step { display:flex; align-items:center; gap:.6rem; flex:1 1 0; min-width: 120px; }
.step-num { width:38px;height:38px;border-radius:50%; display:grid;place-items:center; font-weight:800; background: var(--surface-2); color: var(--muted); border:2px solid var(--border-2); flex:0 0 auto; transition: all var(--t); }
.step-label { font-weight:700; color: var(--muted); font-size:.92rem; }
.step-line { flex:1; height:2px; background: var(--border-2); }
.step.active .step-num { background: var(--brand-grad); color:#fff; border-color: transparent; box-shadow: var(--shadow-brand); }
.step.active .step-label { color: var(--heading); }
.step.done .step-num { background: var(--success); color:#fff; border-color: transparent; }
.step.done .step-label { color: var(--text); }

/* ==========================================================================
   9) TABLES
   ========================================================================== */
.table-wrap { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: var(--shadow-sm); }
.table-x { width:100%; border-collapse: collapse; font-size:.94rem; }
.table-x thead th {
  background: var(--surface-2); color: var(--muted); font-weight:700; text-align:left;
  padding: .9rem 1.1rem; font-size:.85rem; white-space:nowrap; border-bottom:1px solid var(--border);
}
.table-x tbody td { padding: .95rem 1.1rem; border-bottom:1px solid var(--border); vertical-align: middle; }
.table-x tbody tr { transition: background var(--t-fast); }
.table-x tbody tr:hover { background: var(--surface-2); }
.table-x tbody tr:last-child td { border-bottom:0; }
.table-x .u-cell { display:flex; align-items:center; gap:.7rem; }
.table-toolbar { display:flex; gap:.8rem; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:1rem; }
.th-sort { cursor:pointer; user-select:none; }
.th-sort:hover { color: var(--brand-dark); }

/* ==========================================================================
   10) PUBLIC NAVBAR + FOOTER
   ========================================================================== */
.nav-x {
  position: sticky; top: 0; z-index: 1000; background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px); border-bottom:1px solid var(--border); transition: box-shadow var(--t), background var(--t);
}
.nav-x.scrolled { box-shadow: var(--shadow-md); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height: 72px; gap:1rem; }
.brand-logo { display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:800; font-size:1.35rem; color:var(--heading); }
.brand-logo img, .brand-logo svg { height: 40px; width:auto; }
.brand-logo:hover { color: var(--brand-dark); }
.nav-links { display:flex; align-items:center; gap:.35rem; list-style:none; margin:0; padding:0; }
.nav-links a { color: var(--text); font-weight:600; padding:.55rem .9rem; border-radius: var(--r-sm); transition: all var(--t-fast); }
.nav-links a:hover { color: var(--brand-dark); background: var(--brand-050); }
.nav-links a.active { color: var(--brand-dark); background: var(--brand-050); }
.nav-actions { display:flex; align-items:center; gap:.6rem; }
.nav-toggle { display:none; background:none; border:0; font-size:1.5rem; color:var(--heading); cursor:pointer; }

/* الوضع الليلي زر */
.theme-btn { width:42px;height:42px;border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; display:grid;place-items:center; transition: all var(--t-fast); }
.theme-btn:hover { color: var(--brand-dark); border-color: var(--brand); }

/* لغة */
.lang-btn { font-weight:700; color: var(--muted); border:1px solid var(--border); background: var(--surface); border-radius: var(--r-sm); padding:.5rem .8rem; display:inline-flex; align-items:center; gap:.35rem; }
.lang-btn:hover { color: var(--brand-dark); border-color: var(--brand); }

/* قائمة موبايل */
.mobile-menu {
  position: fixed; top:0; bottom:0; left:-100%; width: min(320px, 84vw); background: var(--surface);
  z-index: 1200; transition: left var(--t-slow);
  box-shadow: var(--shadow-lg); padding: 1.5rem; overflow-y:auto;
}
.mobile-menu.open { left:0; }
.mobile-overlay { position: fixed; inset:0; background: rgba(4,15,22,.5); z-index:1150; opacity:0; visibility:hidden; transition: all var(--t); }
.mobile-overlay.open { opacity:1; visibility:visible; }
.mobile-menu .m-links a { display:block; padding:.85rem .6rem; border-radius:var(--r-sm); color:var(--text); font-weight:600; border-bottom:1px solid var(--border); }
.mobile-menu .m-links a:hover { background: var(--brand-050); color: var(--brand-dark); }

/* Footer */
.footer-x { background: var(--ink); color: #c7d6df; padding: clamp(2.5rem,5vw,4rem) 0 1.5rem; }
[data-theme="dark"] .footer-x { background: #08131b; }
.footer-x h5 { color:#fff; margin-bottom:1rem; font-size:1.05rem; }
.footer-x a { color:#a9bfcb; }
.footer-x a:hover { color: var(--brand-light); }
.footer-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; }
.footer-social { display:flex; gap:.6rem; }
.footer-social a { width:40px;height:40px;border-radius: var(--r-sm); background: rgba(255,255,255,.08); display:grid;place-items:center; color:#c7d6df; transition: all var(--t-fast); }
.footer-social a:hover { background: var(--brand); color:#fff; transform: translateY(-3px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:2.5rem; padding-top:1.5rem; text-align:center; color:#8aa0ac; font-size:.9rem; }

/* ==========================================================================
   11) DASHBOARD SHELL (Sidebar + Topbar)
   ========================================================================== */
.app-shell { display:flex; min-height:100vh; }
.sidebar {
  width: var(--sidebar-w); flex:0 0 auto; background: var(--ink); color:#c7d6df;
  position: fixed; top:0; bottom:0; left:0; z-index:1100; display:flex; flex-direction:column;
  transition: left var(--t-slow); overflow-y:auto;
}
[data-theme="dark"] .sidebar { background:#08131b; border-right:1px solid var(--border); }
.sidebar-brand { display:flex; align-items:center; gap:.6rem; padding:1.1rem 1.3rem; color:#fff; font-family:var(--font-head); font-weight:800; font-size:1.2rem; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar-brand svg, .sidebar-brand img { height:34px; }
.sidebar-role { font-size:.75rem; font-weight:600; color: var(--brand-light); background: rgba(34,195,182,.14); padding:.15rem .55rem; border-radius: var(--r-pill); }
.side-section { padding: 1rem 1.3rem .4rem; font-size:.72rem; letter-spacing:.5px; color:#7d94a1; font-weight:700; text-transform:uppercase; }
.side-nav { list-style:none; padding:.3rem .7rem; margin:0; display:flex; flex-direction:column; gap:.15rem; }
.side-nav a {
  display:flex; align-items:center; gap:.75rem; padding:.7rem .85rem; border-radius: var(--r-sm);
  color:#b8cad4; font-weight:600; font-size:.95rem; transition: all var(--t-fast); position:relative;
}
.side-nav a i { font-size:1.15rem; width:22px; text-align:center; flex:0 0 auto; }
.side-nav a:hover { background: rgba(255,255,255,.07); color:#fff; }
.side-nav a.active { background: var(--brand-grad); color:#fff; box-shadow: var(--shadow-brand); }
.side-nav a .side-badge { margin-inline-start:auto; background: var(--accent); color: var(--ink); font-size:.7rem; font-weight:800; padding:.1rem .45rem; border-radius: var(--r-pill); }
.side-nav a.active .side-badge { background:#fff; color: var(--brand-dark); }
.sidebar-foot { margin-top:auto; padding: 1rem 1.3rem; border-top:1px solid rgba(255,255,255,.08); }

.app-main { flex:1 1 auto; margin-left: var(--sidebar-w); min-width:0; display:flex; flex-direction:column; }
.topbar {
  height: var(--topbar-h); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border); position: sticky; top:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 0 clamp(1rem,3vw,2rem);
}
.topbar-title { font-family:var(--font-head); font-weight:800; font-size:1.15rem; color: var(--heading); }
.topbar-actions { display:flex; align-items:center; gap:.6rem; }
.topbar-search { position: relative; width: min(320px, 40vw); }
.topbar-search input { padding-inline-start:2.4rem; }
.topbar-search i { position:absolute; inset-inline-start:.8rem; top:50%; transform:translateY(-50%); color:var(--muted-2); }
.icon-badge { position:relative; }
.icon-badge .dot-count { position:absolute; top:-3px; inset-inline-end:-3px; background: var(--danger); color:#fff; font-size:.62rem; font-weight:800; min-width:17px; height:17px; border-radius:999px; display:grid;place-items:center; padding:0 3px; border:2px solid var(--surface); }
.sidebar-toggle { display:none; background:none;border:0;font-size:1.5rem;color:var(--heading);cursor:pointer; }
.app-content { padding: clamp(1.2rem, 3vw, 2rem); flex:1; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.page-head h1 { font-size: 1.6rem; margin:0; }
.page-head .sub { color: var(--muted); margin-top:.25rem; }

/* User menu */
.user-chip { display:flex; align-items:center; gap:.6rem; cursor:pointer; padding:.3rem; border-radius: var(--r-sm); transition: background var(--t-fast); }
.user-chip:hover { background: var(--surface-2); }
.user-chip .u-name { font-weight:700; font-size:.9rem; color:var(--heading); line-height:1.1; }
.user-chip .u-role { font-size:.78rem; color:var(--muted); }

/* Breadcrumb */
.crumb { display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.88rem; margin-bottom:1rem; flex-wrap:wrap; }
.crumb a { color:var(--muted); } .crumb a:hover { color:var(--brand-dark); }
.crumb .sep { color: var(--muted-2); }
.crumb .current { color: var(--heading); font-weight:700; }

/* ==========================================================================
   12) COMPONENTS
   ========================================================================== */
/* Avatar */
.avatar { width:48px;height:48px;border-radius:50%; object-fit:cover; background: var(--brand-050); color: var(--brand-dark); display:inline-grid; place-items:center; font-weight:800; font-family:var(--font-head); flex:0 0 auto; border:2px solid var(--surface); }
.avatar.sm { width:36px;height:36px; font-size:.85rem; }
.avatar.lg { width:72px;height:72px; font-size:1.5rem; }
.avatar.xl { width:104px;height:104px; font-size:2.1rem; }
.avatar-ring { box-shadow: 0 0 0 3px var(--brand-050); }

/* Timeline / سير العمل */
.timeline { position: relative; padding-inline-start: 0; list-style:none; margin:0; }
.timeline::before { content:''; position:absolute; inset-inline-start: 19px; top:6px; bottom:6px; width:2px; background: var(--border); }
.timeline li { position: relative; padding-inline-start: 3.2rem; padding-bottom: 1.6rem; }
.timeline li:last-child { padding-bottom:0; }
.tl-dot { position:absolute; inset-inline-start:6px; top:2px; width:28px;height:28px; border-radius:50%; display:grid;place-items:center; background:var(--surface); border:2px solid var(--border-2); color:var(--muted); font-size:.8rem; z-index:1; }
.timeline li.done .tl-dot { background: var(--success); border-color:transparent; color:#fff; }
.timeline li.active .tl-dot { background: var(--brand-grad); border-color:transparent; color:#fff; box-shadow: var(--shadow-brand); }
.tl-title { font-weight:700; color: var(--heading); }
.tl-time { font-size:.82rem; color: var(--muted); }

/* Chat / محادثة الطلب */
.chat-box { display:flex; flex-direction:column; gap:1rem; padding:1.2rem; max-height:460px; overflow-y:auto; }
.msg { max-width: 78%; padding:.8rem 1.05rem; border-radius: var(--r-md); position:relative; }
.msg .meta { font-size:.72rem; color: var(--muted); margin-top:.35rem; }
.msg.in  { background: var(--surface-2); border:1px solid var(--border); align-self:flex-start; border-start-start-radius:4px; }
.msg.out { background: var(--brand-050); border:1px solid var(--brand-100); align-self:flex-end; border-start-end-radius:4px; }

/* Accordion (FAQ) */
.acc-item { border:1px solid var(--border); border-radius: var(--r-md); margin-bottom:.9rem; background: var(--surface); overflow:hidden; transition: box-shadow var(--t); }
.acc-item.open { box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.acc-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.3rem; cursor:pointer; font-weight:700; color: var(--heading); font-family: var(--font-head); }
.acc-head .acc-ico { color: var(--brand); transition: transform var(--t); flex:0 0 auto; }
.acc-item.open .acc-ico { transform: rotate(180deg); }
.acc-body { max-height:0; overflow:hidden; transition: max-height var(--t-slow); }
.acc-body-inner { padding: 0 1.3rem 1.2rem; color: var(--muted); line-height:1.9; }

/* Progress */
.progress-x { height:10px; background: var(--surface-2); border-radius: var(--r-pill); overflow:hidden; }
.progress-x > span { display:block; height:100%; background: var(--brand-grad); border-radius: var(--r-pill); transition: width var(--t-slow); }
.progress-x.amber > span { background: linear-gradient(135deg,#F6A821,#f7bd4f); }
.progress-x.success > span { background: linear-gradient(135deg,#16A34A,#34d17e); }

/* Rating */
.rating { display:inline-flex; gap:.15rem; color: var(--accent); }
.rating .bi-star { color: var(--border-2); }

/* Empty state */
.empty-state { text-align:center; padding: 3rem 1.5rem; }
.empty-state .es-ico { width:88px;height:88px;border-radius:50%; background: var(--surface-2); color: var(--muted-2); display:grid;place-items:center; font-size:2.4rem; margin-inline:auto; margin-bottom:1.1rem; }

/* Pagination */
.pager { display:flex; gap:.35rem; justify-content:center; align-items:center; margin-top:1.5rem; }
.pager a, .pager span { min-width:40px; height:40px; display:grid;place-items:center; border-radius: var(--r-xs); border:1px solid var(--border); background: var(--surface); color: var(--text); font-weight:600; transition: all var(--t-fast); padding:0 .5rem; }
.pager a:hover { border-color: var(--brand); color: var(--brand-dark); }
.pager .active { background: var(--brand-grad); color:#fff; border-color:transparent; }
.pager .disabled { opacity:.45; pointer-events:none; }

/* Toast */
.toast-wrap { position: fixed; top:1.2rem; inset-inline-start:1.2rem; z-index:3000; display:flex; flex-direction:column; gap:.6rem; }
.toast-x { background: var(--surface); border:1px solid var(--border); border-inline-start:4px solid var(--brand); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); padding:.9rem 1.1rem; display:flex; align-items:center; gap:.7rem; min-width:280px; animation: toastIn .4s ease; }
.toast-x.success { border-inline-start-color: var(--success); }
.toast-x.danger { border-inline-start-color: var(--danger); }
.toast-x .t-ico { font-size:1.3rem; color: var(--brand); }
.toast-x.success .t-ico { color: var(--success); }
.toast-x.danger .t-ico { color: var(--danger); }
@keyframes toastIn { from { opacity:0; transform: translateX(-16px); } to { opacity:1; transform:none; } }

/* Stat mini list */
.mini-list { list-style:none; margin:0; padding:0; }
.mini-list li { display:flex; align-items:center; gap:.8rem; padding:.8rem 0; border-bottom:1px solid var(--border); }
.mini-list li:last-child { border-bottom:0; }

/* Hero */
.hero { position: relative; overflow: hidden; padding: clamp(3rem,7vw,6rem) 0 clamp(3rem,7vw,5rem); }
.hero-blob { position:absolute; border-radius:50%; filter: blur(60px); opacity:.5; z-index:0; }
.hero-blob.one { width:420px;height:420px; background: var(--brand-100); top:-120px; inset-inline-start:-100px; }
.hero-blob.two { width:360px;height:360px; background: var(--accent-050); bottom:-140px; inset-inline-end:-80px; }
[data-theme="dark"] .hero-blob { opacity:.25; }
.hero > .container-x { position: relative; z-index:1; }
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; background: var(--surface); border:1px solid var(--border); box-shadow: var(--shadow-sm); padding:.45rem 1rem; border-radius: var(--r-pill); font-weight:700; font-size:.88rem; color: var(--ink); margin-bottom:1.2rem; }
.hero-badge .dot { width:8px;height:8px;border-radius:50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-050); }

/* CTA band */
.cta-band { background: var(--brand-grad); border-radius: var(--r-xl); padding: clamp(2rem,5vw,3.5rem); color:#fff; position:relative; overflow:hidden; }
.cta-band h2, .cta-band p { color:#fff; }
.cta-band::after { content:''; position:absolute; width:300px;height:300px;border-radius:50%; background: rgba(255,255,255,.12); top:-100px; inset-inline-start:-60px; }

/* Steps (how it works) */
.hiw-step { position:relative; padding:2rem 1.5rem; text-align:center; }
.hiw-num { width:52px;height:52px;border-radius:50%; background: var(--ink); color:#fff; font-family:var(--font-head); font-weight:800; font-size:1.3rem; display:grid;place-items:center; margin-inline:auto; margin-bottom:1rem; }

/* logo mark inline */
.logo-mark { display:inline-grid; place-items:center; }

/* Auth split layout */
.auth-wrap { min-height:100vh; display:grid; grid-template-columns: 1fr 1fr; }
.auth-aside { position:relative; background: var(--brand-grad); color:#fff; padding: clamp(2rem,4vw,3.5rem); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.auth-aside::after { content:''; position:absolute; width:360px;height:360px;border-radius:50%; background:rgba(255,255,255,.12); bottom:-120px; inset-inline-start:-80px; }
.auth-aside::before { content:''; position:absolute; width:220px;height:220px;border-radius:50%; background:rgba(255,255,255,.10); top:-60px; inset-inline-end:-40px; }
.auth-aside > * { position:relative; z-index:1; }
.auth-aside h2 { color:#fff; }
.auth-feature { display:flex; align-items:flex-start; gap:.8rem; margin-bottom:1.1rem; }
.auth-feature .fico { width:40px;height:40px;border-radius: var(--r-sm); background:rgba(255,255,255,.18); display:grid;place-items:center; flex:0 0 auto; font-size:1.15rem; }
.auth-main { display:flex; align-items:center; justify-content:center; padding: clamp(1.5rem,4vw,3rem); background: var(--bg); }
.auth-card { width:100%; max-width: 440px; }
.auth-tabs { display:flex; gap:.4rem; background: var(--surface-2); padding:.35rem; border-radius: var(--r-md); margin-bottom:1.5rem; }
.auth-tabs button { flex:1; border:0; background:transparent; padding:.7rem; border-radius: var(--r-sm); font-weight:700; color: var(--muted); cursor:pointer; transition: all var(--t-fast); display:flex; align-items:center; justify-content:center; gap:.45rem; }
.auth-tabs button.active { background: var(--surface); color: var(--brand-dark); box-shadow: var(--shadow-sm); }
.auth-divider { display:flex; align-items:center; gap:1rem; color: var(--muted); margin:1.3rem 0; font-size:.88rem; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background: var(--border); }
.social-btn { display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%; border:1.5px solid var(--border-2); background:var(--surface); border-radius: var(--r-sm); padding:.7rem; font-weight:700; color: var(--text); transition: all var(--t-fast); }
.social-btn:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-050); }
@media (max-width: 900px) { .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display:none; } }

/* ==========================================================================
   13) UTILITIES / ANIMATIONS
   ========================================================================== */
.shadow-sm-x{box-shadow:var(--shadow-sm)} .shadow-md-x{box-shadow:var(--shadow-md)} .shadow-lg-x{box-shadow:var(--shadow-lg)}
.rounded-x{border-radius:var(--r-lg)} .rounded-pill-x{border-radius:var(--r-pill)}
.gap-x{gap:1rem} .w-100{width:100%}
.grid-auto { display:grid; gap:1.4rem; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.grid-2 { display:grid; gap:1.4rem; grid-template-columns: repeat(2,1fr); }
.grid-3 { display:grid; gap:1.4rem; grid-template-columns: repeat(3,1fr); }
.grid-4 { display:grid; gap:1.4rem; grid-template-columns: repeat(4,1fr); }
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.flex-center{display:flex;align-items:center;gap:.6rem}
.stack{display:flex;flex-direction:column;gap:1rem}
.d-none-sm{display:block}
@media (max-width:600px){ .d-none-sm{display:none} }

/* AOS fallback (لو المكتبة ما حمّلت) */
[data-aos] { transition: opacity .6s ease, transform .6s ease; }
.no-aos [data-aos] { opacity:1 !important; transform:none !important; }

@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.floaty { animation: floaty 5s ease-in-out infinite; }
@keyframes pulse-ring { 0%{box-shadow:0 0 0 0 rgba(15,163,163,.4)} 70%{box-shadow:0 0 0 12px rgba(15,163,163,0)} 100%{box-shadow:0 0 0 0 rgba(15,163,163,0)} }
.pulse { animation: pulse-ring 2s infinite; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   13.5) MOBILE OVERFLOW HARDENING — prevent horizontal scroll on mobile
   ========================================================================== */
/* Bootstrap grid adds negative margins to .row (half the gutter). The custom
   .container-x has no padding, so those negative margins leak out and cause a
   horizontal scroll. Fix: give the container padding to absorb the negative
   margins + a safety net on html. */
html { overflow-x: hidden; }
.container-x { padding-inline: .75rem; }
@media (max-width: 768px) {
  /* Tame the oversized gutter (g-5 = 3rem) so the negative margin can't exceed the viewport */
  .g-5, .gx-5 { --bs-gutter-x: 1.5rem; }
}

/* ==========================================================================
   14) RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 992px) {
  .nav-links { display:none; }
  .nav-toggle { display:block; }
  /* Dashboard: sidebar becomes off-canvas (physical left for reliability) */
  .sidebar { left: calc(-1 * var(--sidebar-w) - 16px); }
  .sidebar.open { left: 0; box-shadow: var(--shadow-lg); }
  .app-main { margin-left: 0; }
  .sidebar-toggle { display:block; }
  .sidebar-backdrop { position:fixed; inset:0; background:rgba(4,15,22,.5); z-index:1050; opacity:0; visibility:hidden; transition: all var(--t); }
  .sidebar-backdrop.open { opacity:1; visibility:visible; }
}
@media (max-width: 768px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .section-head { margin-bottom:1.8rem; }
  .topbar-search { display:none; }
  .table-toolbar { align-items:stretch; }
  /* جداول → بطاقات */
  .table-responsive-cards thead { display:none; }
  .table-responsive-cards, .table-responsive-cards tbody, .table-responsive-cards tr, .table-responsive-cards td { display:block; width:100%; }
  .table-responsive-cards tr { border:1px solid var(--border); border-radius: var(--r-md); margin-bottom:1rem; padding:.4rem; background: var(--surface); }
  .table-responsive-cards td { border:0 !important; display:flex; justify-content:space-between; gap:1rem; padding:.6rem .8rem; text-align:right; }
  .table-responsive-cards td::before { content: attr(data-label); font-weight:700; color: var(--muted); text-align:left; }
}
@media (max-width: 480px) {
  .btn-lg { padding:.75rem 1.3rem; font-size:1rem; }
  .card-body-x, .card-pad-lg { padding:1.15rem; }
  .stat-val { font-size:1.5rem; }
  .page-head h1 { font-size:1.35rem; }
  .hero { text-align:center; }
}