/* =========================================================
   EFB Knowledge Center — Design System
   Tokens: color / type / layout / signature (leaf-notch motif)
   ========================================================= */

:root{
  color-scheme: light;
  --primary: #0B5D3B;
  --primary-dark: #073E28;
  --primary-light: #E7F1E9;
  --leaf: #5FA83D;
  --leaf-light: #EBF5E3;
  --amber: #E0982A;
  --amber-light: #FCF0DC;
  --danger: #D65A44;
  --danger-light: #FCEAE6;
  --violet: #7C5CBF;
  --violet-light: #F1ECFA;
  --teal: #1E8F8A;
  --teal-light: #E3F5F3;
  --badge-leaf-text: #3E6B27;
  --badge-amber-text: #8A5F17;
  --tone-gray-bg: #EEF0EA;

  --bg: #F4F7F1;
  --bg-image:
    radial-gradient(1100px 620px at 88% -8%, rgba(95,168,61,0.14), transparent 60%),
    radial-gradient(900px 520px at -8% 14%, rgba(224,152,42,0.10), transparent 55%);
  --surface: #FFFFFF;
  --surface-2: #FAFCF8;
  --text: #17241B;
  --text-muted: #5B6B5F;
  --text-faint: #8A968B;
  --border: #E2E8DC;
  --border-strong: #CDD8C6;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;

  --shadow-card: 0 1px 2px rgba(11,93,59,.07), 0 8px 24px rgba(11,93,59,.06);
  --shadow-card-hover: 0 4px 10px rgba(11,93,59,.10), 0 16px 34px rgba(11,93,59,.12);
  --shadow-pop: 0 14px 38px rgba(11,40,25,.18);

  --grad-primary: linear-gradient(135deg, #0B5D3B 0%, #16794F 55%, #5FA83D 100%);
  --grad-amber: linear-gradient(135deg, #E0982A 0%, #EFB74E 100%);

  --ease: cubic-bezier(.22,.8,.36,1);

  --font-display: 'Tajawal', 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

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

/* ---------- Dark mode ---------- */
html[data-theme="dark"]{
  color-scheme: dark; /* عشان عناصر الفورم الأصلية (select, checkbox...) تتلوّن صح من المتصفح نفسه */
  --primary: #3FA06B;
  --primary-dark: #2C7A50;
  --primary-light: #12291D;
  --leaf: #7CC257;
  --leaf-light: #17291A;
  --amber: #E3AE4D;
  --amber-light: #2E260F;
  --danger: #E07A64;
  --danger-light: #331C17;
  --violet: #A78BDA;
  --violet-light: #241E33;
  --teal: #4FC4BE;
  --teal-light: #12302E;
  --badge-leaf-text: #BFE8A6;
  --badge-amber-text: #F3CB84;
  --tone-gray-bg: #26302A;
  --grad-primary: linear-gradient(135deg, #0E3F2A 0%, #1B5C3B 55%, #3FA06B 100%);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,.35), 0 18px 36px rgba(0,0,0,.3);

  --bg: #121914;
  --bg-image:
    radial-gradient(1100px 620px at 88% -8%, rgba(63,160,107,0.10), transparent 60%),
    radial-gradient(900px 520px at -8% 14%, rgba(227,174,77,0.08), transparent 55%);
  --surface: #1A231C;
  --surface-2: #202B22;
  --text: #EAF1E9;
  --text-muted: #A7B6AB;
  --text-faint: #8CA091;
  --border: #2B3A2E;
  --border-strong: #3A4C3D;

  --shadow-card: 0 1px 2px rgba(0,0,0,.25), 0 6px 20px rgba(0,0,0,.25);
  --shadow-pop: 0 10px 30px rgba(0,0,0,.45);
}
html[data-theme="dark"] .login-visual{ background: linear-gradient(165deg, #0E3F2A 0%, #081F15 100%); }
html[data-theme="dark"] .fahman-fab, html[data-theme="dark"] .fahman-panel, html[data-theme="dark"] .dropdown-panel{ border-color: var(--border); }

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font-body);
  background-color: var(--bg);
  background-image: var(--bg-image);
  background-attachment: fixed;
  color: var(--text);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s, color .2s;
  position: relative;
}
.ambient-mark{
  position: fixed; left: -8vw; bottom: -12vh; width: 42vw; max-width: 560px;
  opacity: .05; pointer-events: none; z-index: 0;
  animation: markFloat 14s ease-in-out infinite;
}
html[data-theme="dark"] .ambient-mark{ opacity: .04; }
.ambient-mark-dark{ display:none; }
html[data-theme="dark"] .ambient-mark-light{ display:none; }
html[data-theme="dark"] .ambient-mark-dark{ display:block; }
@keyframes markFloat{ 0%,100%{ transform: translateY(0) rotate(-2deg); } 50%{ transform: translateY(-14px) rotate(1deg); } }
html[dir="ltr"] body{ font-family: 'IBM Plex Sans Arabic', 'Segoe UI', sans-serif; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; color: var(--text); }
p{ margin:0; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select, button{ color: var(--text); } /* عناصر الفورم مبترثش لون النص تلقائيًا من غير كده */
ul{ margin:0; padding:0; list-style:none; }
::selection{ background: var(--leaf-light); color:var(--primary-dark); }

/* Leaf-notch signature: a quarter-circle bite echoing the EFB leaf mark */
.leaf-notch{
  position:relative;
  -webkit-mask-image: radial-gradient(circle 22px at 100% 0%, transparent 21px, black 22px);
          mask-image: radial-gradient(circle 22px at 100% 0%, transparent 21px, black 22px);
}
[dir="rtl"] .leaf-notch,
.leaf-notch{
  -webkit-mask-image: radial-gradient(circle 22px at 0% 0%, transparent 21px, black 22px);
          mask-image: radial-gradient(circle 22px at 0% 0%, transparent 21px, black 22px);
}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius:8px; }
::-webkit-scrollbar-track{ background: transparent; }

/* =========================================================
   LOGIN PAGE
   ========================================================= */
.login-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface);
}
.login-visual{
  background: var(--grad-primary);
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 48px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.login-visual::before{
  content:"";
  position:absolute; inset:auto -10% -30% auto;
  width:420px; height:420px; border-radius:50%;
  background: rgba(255,255,255,.06);
}
.login-visual::after{
  content:"";
  position:absolute; top:-15%; right:-10%;
  width:260px; height:260px; border-radius:50%;
  background: rgba(255,255,255,.05);
}
.login-visual img.brand-logo{ height:22px; width:auto; position:relative; z-index:1; display:block; }
.login-visual .quote{
  position:relative; z-index:1;
  font-family: var(--font-display);
  font-size: 30px; font-weight:700; line-height:1.5; max-width:460px;
}
.login-visual .quote span{ color: #BFE3A6; }
.login-visual .fahman-wrap{ position:relative; z-index:1; display:flex; align-items:center; gap:16px; }
.login-visual .fahman-wrap img{ width:76px; }
.login-visual .fahman-wrap .bubble{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius);
  padding:12px 16px;
  font-size:14px;
  max-width:260px;
}

.login-form-side{ display:flex; align-items:center; justify-content:center; padding:32px; }
.login-card{ width:100%; max-width:380px; }
.login-card .kicker{ color: var(--leaf); font-weight:700; font-size:13px; letter-spacing:.02em; margin-bottom:8px; }
.login-card h1{ font-size:26px; margin-bottom:6px; }
.login-card .sub{ color: var(--text-muted); font-size:14px; margin-bottom:28px; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; color: var(--text); }
.field input{
  width:100%; height:46px; border-radius: var(--radius-sm);
  border:1px solid var(--border-strong); background: var(--surface-2);
  padding: 0 14px; font-size:14px; font-family:inherit; color:var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

.remember-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; font-size:13px; }
.remember-row label{ display:flex; align-items:center; gap:8px; color: var(--text-muted); cursor:pointer; }

.btn-primary{
  width:100%; height:48px; border:none; border-radius: var(--radius-sm);
  background: var(--primary); color:#fff; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition: background .15s, transform .1s;
}
.btn-primary:hover{ background: var(--primary-dark); }
.btn-primary:active{ transform: scale(.99); }

.login-error{
  display:none; background: var(--danger-light); color: var(--danger);
  border:1px solid #ecc9c1; border-radius: var(--radius-sm);
  padding:10px 14px; font-size:13px; margin-bottom:16px;
}
.demo-hint{ margin-top:22px; font-size:12px; color: var(--text-faint); text-align:center; line-height:1.8; }
.demo-hint b{ color: var(--text-muted); font-family: var(--font-mono); }

/* =========================================================
   APP SHELL
   ========================================================= */
.app-shell{ display:flex; min-height:100vh; }

/* ---- Sidebar ---- */
.sidebar{
  width: var(--sidebar-w); flex-shrink:0;
  background: var(--surface); border-left:1px solid var(--border);
  height:100vh; position:sticky; top:0;
  display:flex; flex-direction:column;
  transition: width .22s var(--ease), margin .22s var(--ease), opacity .18s var(--ease), border-color .22s var(--ease);
  overflow:hidden;
}
.sidebar.collapsed{ width:72px; border-left-color:var(--border); }
.sidebar-brand .brand-mark{ display:none; width:28px; height:28px; }
.sidebar.collapsed .sidebar-brand{ justify-content:center; padding:18px 8px; }
.sidebar.collapsed .sidebar-brand .brand-full{ display:none; }
.sidebar.collapsed .sidebar-brand .brand-mark{ display:block; }
.sidebar.collapsed .sidebar-brand .plat-name,
.sidebar.collapsed .sidebar-footer,
.sidebar.collapsed .nav-manage-footer,
.sidebar.collapsed .nav-children,
.sidebar.collapsed .nav-group-toggle .chev,
.sidebar.collapsed .badge-mini,
.sidebar.collapsed .nav-edit-controls{ display:none; }
.sidebar.collapsed .sidebar-nav{ padding:12px 8px 20px; }
.sidebar.collapsed .nav-item{ font-size:0; justify-content:center; padding:12px 0; gap:0; }
.sidebar.collapsed .nav-item i{ font-size:19px; }
.sidebar.collapsed .nav-item:hover{ transform:none; }
.sidebar.collapsed .nav-item.active::before{ display:none; }
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding: 18px 20px; border-bottom:1px solid var(--border);
  height: var(--topbar-h);
}
.sidebar-brand img{ height:20px; width:auto; }
.sidebar-brand .plat-name{ font-family: var(--font-display); font-weight:700; font-size:14px; line-height:1.3; }
.sidebar-brand .plat-name small{ display:block; font-weight:400; color: var(--text-faint); font-size:11px; }

.sidebar-nav{ flex:1; overflow-y:auto; padding: 12px 12px 20px; }

.sidebar-filter{
  display:flex; align-items:center; gap:8px;
  margin: 12px 12px 0; padding: 8px 10px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.sidebar-filter i:first-child{ color: var(--text-faint); font-size:15px; flex-shrink:0; }
.sidebar-filter input{
  flex:1; border:none; background:transparent; outline:none;
  font-size:12.5px; color: var(--text); font-family: inherit;
}
.sidebar-filter input::placeholder{ color: var(--text-faint); }
.sidebar-filter button{
  border:none; background:transparent; color: var(--text-faint); cursor:pointer;
  display:flex; align-items:center; padding:2px;
}
.sidebar-filter button:hover{ color: var(--danger); }
.sidebar.collapsed .sidebar-filter{ display:none; }

.nav-item{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  font-size:14px; font-weight:500; color: var(--text);
  margin-bottom:2px; cursor:pointer; position:relative;
  transition: background .18s var(--ease), color .18s var(--ease), padding-right .18s var(--ease), transform .12s var(--ease);
}
.nav-item i{ font-size:18px; color: var(--text-faint); flex-shrink:0; transition: color .18s var(--ease), transform .18s var(--ease); }
.nav-item:hover{ background: var(--surface-2); transform: translateX(-2px); }
.nav-item:hover i{ transform: scale(1.1); }
.nav-item.active{ background: var(--primary-light); color: var(--primary-dark); }
.nav-item.active i{ color: var(--primary); }
.nav-item.active::before{
  content:""; position:absolute; right:-12px; top:8px; bottom:8px; width:3px;
  background: var(--primary); border-radius:4px 0 0 4px;
  animation: nav-indicator-in .2s var(--ease);
}
@keyframes nav-indicator-in{ from{ transform: scaleY(0); opacity:0; } to{ transform: scaleY(1); opacity:1; } }
.nav-badge{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; margin-inline-start:7px; padding:2px 7px; min-height:18px; border-radius:999px; background:var(--primary-light); color:var(--primary-dark); border:1px solid rgba(16,118,78,.14); font-size:10px; line-height:1.2; font-weight:800; white-space:nowrap; }
.nav-group-toggle .nav-main-content{ min-width:0; }
.nav-group-toggle .nav-main-content .nav-label{ min-width:0; }
@media (max-width: 900px){ .nav-badge{ font-size:9px; padding:2px 6px; margin-inline-start:5px; } }

.nav-item .badge-mini{
  margin-inline-start:auto; background: var(--grad-amber); color:#fff;
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:20px;
}
.nav-group-toggle{ display:flex; align-items:center; justify-content:space-between; }
.nav-group-toggle .chev{ transition: transform .15s; font-size:15px; color: var(--text-faint); }

.nav-edit-controls{ display:flex; gap:4px; }
.nav-edit-controls button{
  width:22px; height:22px; border-radius:6px; border:1px solid var(--border-strong); background:#fff;
  color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:11px;
}
.nav-edit-controls button:disabled{ opacity:.3; }
.nav-edit-controls button.danger{ color:var(--danger); }
.nav-edit-controls button:not(:disabled):hover{ background:var(--leaf-light); }
.nav-item .nav-edit-controls{ margin-inline-start:auto; }

.nav-manage-footer{ padding:10px 4px 4px; display:flex; flex-direction:column; gap:6px; border-top:1px dashed var(--border); margin-top:10px; }
.nav-manage-footer .btn{ width:100%; justify-content:center; }
.nav-group-toggle.open .chev{ transform: rotate(180deg); }
.nav-children{ max-height:0; overflow:hidden; transition: max-height .2s ease; padding-inline-start:14px; }
.nav-children.open{ max-height:600px; }
.nav-children .nav-item{ font-size:13px; font-weight:400; padding:8px 12px; }
.nav-children .nav-item i{ font-size:14px; }
/* Restore meaningful icons for sidebar leaf items */
.nav-item.nav-leaf-depth-1, .nav-item.nav-leaf-depth-2{ gap:10px; }
.nav-item.nav-leaf-depth-1 > i, .nav-item.nav-leaf-depth-2 > i{
  width:20px; min-width:20px; text-align:center; font-size:17px; color:var(--text-faint);
}
.nav-item.nav-leaf-depth-2 > i{ font-size:15px; }
.nav-item.nav-leaf-depth-1:hover > i, .nav-item.nav-leaf-depth-2:hover > i{ color:var(--primary); }
.nav-item.nav-leaf-depth-1.active > i, .nav-item.nav-leaf-depth-2.active > i{ color:var(--primary); }
.nav-label{ min-width:0; }

.nav-child-add{ color: var(--primary); font-weight:600; }
.nav-child-add i{ color: var(--primary); }

.sidebar-footer{ padding:14px; border-top:1px solid var(--border); }
.role-switcher{ font-size:11px; color:var(--text-faint); margin-bottom:6px; }
.role-switcher select{
  width:100%; border:1px solid var(--border-strong); border-radius:8px;
  height:32px; font-size:12px; font-family:inherit; background:var(--surface-2); padding:0 8px;
  color:var(--text);
}
.role-switcher select option{ background:var(--surface); color:var(--text); }

/* ---- Topbar ---- */
.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  height: var(--topbar-h); border-bottom:1px solid var(--border);
  background: var(--surface); display:flex; align-items:center; gap:16px;
  padding: 0 24px; position:sticky; top:0; z-index:20;
}
.search-wrap{ position:relative; flex:1; max-width:520px; }
.search-wrap i.ti-search{ position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:17px; }
.search-wrap input{
  width:100%; height:40px; border-radius:999px; border:1px solid var(--border-strong);
  background: var(--surface-2); padding: 0 42px 0 42px; font-size:14px; font-family:inherit;
}
.search-wrap input:focus{ outline:none; border-color: var(--primary); background:var(--surface); }
#voiceSearchBtn{
  position:absolute; left:5px; top:50%; transform:translateY(-50%); width:30px; height:30px;
  border-radius:50%; border:none; background:transparent; color:var(--text-faint);
  display:flex; align-items:center; justify-content:center; font-size:15px; transition: color .15s var(--ease), background .15s var(--ease);
}
#voiceSearchBtn:hover{ background:var(--primary-light); color:var(--primary); }
#voiceSearchBtn.listening{ background:var(--danger); color:#fff; animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(214,90,68,.5);} 50%{ box-shadow:0 0 0 6px rgba(214,90,68,0);} }
.search-results{
  position:absolute; top:48px; right:0; left:0; background:var(--surface); border:1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); max-height:360px; overflow-y:auto;
  display:none; z-index:40;
}
.search-results.open{ display:block; animation: dropdown-pop .16s var(--ease); }
.search-results .sr-item{ padding:10px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); font-size:13px; }
.search-results .sr-item:last-child{ border-bottom:none; }
.search-results .sr-item:hover{ background: var(--surface-2); cursor:pointer; }
.search-results .sr-type{ font-size:11px; color:var(--primary); background:var(--primary-light); padding:2px 8px; border-radius:20px; flex-shrink:0; }
.search-results .sr-empty{ padding:20px; text-align:center; color:var(--text-faint); font-size:13px; }
.search-quick-open{ padding:14px 16px; background: var(--leaf-light); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.search-quick-open button{ background:var(--primary); color:#fff; border:none; border-radius:8px; padding:6px 14px; font-size:12px; font-weight:700; }

.topbar-actions{ display:flex; align-items:center; gap:10px; margin-inline-start:auto; }
.icon-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface-2); display:flex; align-items:center; justify-content:center;
  position:relative; font-size:18px; color: var(--text-muted);
  transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.icon-btn:hover{ background: var(--primary-light); color: var(--primary-dark); transform: translateY(-1px) scale(1.05); }
.icon-btn:active{ transform: scale(.94); }
.icon-btn .dot{ position:absolute; top:7px; left:8px; width:8px; height:8px; border-radius:50%; background: var(--danger); border:2px solid var(--surface); animation: dot-pulse 2s ease-in-out infinite; }
@keyframes dot-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(214,90,68,.5); } 50%{ box-shadow:0 0 0 4px rgba(214,90,68,0); } }

#notifBtn{ background: var(--amber-light); border-color: #F0D9A6; color: var(--amber); }
html[data-theme="dark"] #notifBtn{ border-color: #4A3B18; }
#notifBtn:hover{ background: #F5E3BD; }
#notifBtn svg{ width:20px; height:20px; }
#themeToggle svg{ width:19px; height:19px; }

.user-chip{ display:flex; align-items:center; gap:10px; padding:6px 8px 6px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); cursor:pointer; }
.avatar{ width:32px; height:32px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; font-family:var(--font-display); flex-shrink:0; }
.user-chip .avatar{ width:32px; height:32px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; font-family:var(--font-display); }
.user-chip .who{ font-size:13px; line-height:1.3; text-align:right; }
.user-chip .who b{ display:block; font-weight:700; }
.user-chip .who span{ color: var(--text-faint); font-size:11px; }

.logout-btn{
  display:flex; align-items:center; gap:6px; height:40px; padding:0 14px;
  border-radius:999px; border:1px solid var(--border); background: var(--surface-2);
  color: var(--danger); font-size:13px; font-weight:700; white-space:nowrap;
}
.logout-btn:hover{ background: var(--danger-light); border-color:#ecc9c1; }

.dropdown-panel{
  position:absolute; top:56px; left:24px; width:320px; background:var(--surface); border:1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); display:none; z-index:40; overflow:hidden;
}
.dropdown-panel.open{ display:block; animation: dropdown-pop .18s var(--ease); }
.dropdown-panel .dp-head{ padding:14px 16px; border-bottom:1px solid var(--border); font-weight:700; font-size:14px; display:flex; justify-content:space-between; align-items:center; }
.dropdown-panel .dp-head span{ font-size:12px; font-weight:400; color:var(--primary); cursor:pointer; }
.dropdown-panel .dp-list{ max-height:340px; overflow-y:auto; }
.notif-item{ padding:12px 16px; border-bottom:1px solid var(--border); display:flex; gap:10px; }
.notif-item:last-child{ border-bottom:none; }
.notif-item .n-icon{ width:34px; height:34px; border-radius:50%; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:15px; }
.notif-item.unread{ background: var(--surface-2); }
.notif-item .n-title{ font-size:13px; font-weight:700; margin-bottom:2px; }
.notif-item .n-body{ font-size:12px; color:var(--text-muted); margin-bottom:4px; }
.notif-item .n-time{ font-size:11px; color:var(--text-faint); font-family:var(--font-mono); }

/* =========================================================
   ASK ME — زرار "إسألني" بجانب الإشعارات
   ========================================================= */
.ask-me-compose{ padding:14px 16px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.ask-me-compose textarea{
  width:100%; resize:vertical; min-height:56px; border:1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding:8px 10px; font-family:inherit; font-size:13px; background:var(--surface-2); color:var(--text);
}
.ask-me-compose textarea:focus{ outline:none; border-color:var(--primary); background:var(--surface); }
.ask-me-compose .btn{ align-self:flex-end; }
.ask-me-list{ max-height:280px; }
.ask-item{ padding:12px 16px; border-bottom:1px solid var(--border); font-size:12.5px; }
.ask-item:last-child{ border-bottom:none; }
.ask-item-q{ font-weight:700; color:var(--text); margin-bottom:4px; }
.ask-item-a{ color:var(--text-muted); background:var(--surface-2); border-radius:8px; padding:6px 10px; margin-top:4px; line-height:1.7; }

/* ---- Content area ---- */
.content{ flex:1; padding: 28px 32px 80px; max-width:1180px; width:100%; margin:0 auto; }
.content.page-enter{ animation: page-fade-in .15s var(--ease); }
@keyframes page-fade-in{ from{ opacity:.92; } to{ opacity:1; } }
.page-head{ margin-bottom:24px; position:relative; }
.page-eyebrow{ font-size:12px; font-weight:700; color:var(--leaf); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.page-head h2{ font-size:24px; }
.page-head .desc{ color:var(--text-muted); font-size:14px; margin-top:6px; max-width:640px; }

.breadcrumb{ display:flex; align-items:center; gap:6px; font-size:12px; color: var(--text-faint); margin-bottom:10px; }

.page-hero{
  width:100%; aspect-ratio:3/1; border-radius: var(--radius-lg); margin-bottom:18px;
  background-size:cover; background-position:center; cursor:pointer; position:relative;
  box-shadow: var(--shadow-card); border:1px solid var(--border); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.page-hero:hover{ transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
@media (max-width:700px){ .page-hero{ aspect-ratio:4/3; } }
.breadcrumb i{ font-size:12px; }
.breadcrumb a:hover{ color: var(--primary); }

/* ---------- Grid / Cards ---------- */
.grid{ display:grid; gap:16px; }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }

.card{ background:var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:20px; box-shadow: var(--shadow-card); }

.stat-card{ background:var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:18px 20px; position:relative; overflow:hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.stat-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.stat-card .stat-icon{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:14px; transition: transform .25s var(--ease); }
.performer-photo{ width:56px; height:56px; border-radius:50%; object-fit:cover; margin-bottom:14px; border:2px solid var(--surface); box-shadow:0 2px 8px rgba(11,93,59,.18); cursor:pointer; }
.stat-card:hover .stat-icon{ transform: scale(1.1) rotate(-3deg); }
.stat-card .stat-value{ font-family: var(--font-mono); font-size:26px; font-weight:600; }
.stat-card .stat-label{ font-size:12px; color:var(--text-muted); margin-top:4px; }
.stat-card.tone-primary .stat-icon{ background:var(--grad-primary); color:#fff; }
.stat-card.tone-leaf .stat-icon{ background:var(--leaf-light); color:var(--leaf); }
.stat-card.tone-amber .stat-icon{ background:var(--grad-amber); color:#fff; }
.stat-card.tone-danger .stat-icon{ background:var(--danger-light); color:var(--danger); }

.mini-stat{ background:var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:14px 16px; display:flex; align-items:center; gap:12px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.mini-stat:hover{ transform: translateY(-2px); box-shadow: var(--shadow-card); }
.mini-stat-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.mini-stat-icon.tone-primary{ background:var(--primary-light); color:var(--primary); }
.mini-stat-icon.tone-leaf{ background:var(--leaf-light); color:var(--leaf); }
.mini-stat-icon.tone-amber{ background:var(--amber-light); color:var(--amber); }
.mini-stat-icon.tone-danger{ background:var(--danger-light); color:var(--danger); }
.mini-stat-value{ font-family:var(--font-mono); font-weight:600; font-size:18px; color:var(--text); }
.mini-stat-value.is-text{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--text); }
.mini-stat-label{ font-size:11px; color:var(--text-muted); margin-top:2px; }

/* =========================================================
   HOME BANNER — شريط الإعلانات المتحرك
   ========================================================= */
.home-banner{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; margin-bottom:24px;
  border:1px solid var(--border); box-shadow: var(--shadow-card);
  padding: 3px; background: linear-gradient(120deg, var(--primary), var(--leaf), var(--amber));
  background-size: 200% 200%; animation: banner-frame-shift 8s ease infinite;
}
@keyframes banner-frame-shift{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
.home-banner.empty{ background:var(--surface-2); padding:20px; text-align:center; border-radius: var(--radius-lg); animation:none; }

.banner-track{ position:relative; height:190px; border-radius:calc(var(--radius-lg) - 3px); overflow:hidden; background:var(--surface); }
.banner-slide{
  position:absolute; inset:0; display:flex; align-items:center; gap:18px; padding:0 30px;
  opacity:0; transform: translateX(24px); transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none; background-size:cover; background-position:center; cursor:pointer;
}
.banner-slide.has-image .banner-slide-title,
.banner-slide.has-image .banner-slide-subtitle{ color:#fff; }
.banner-slide.has-image .banner-slide-subtitle{ opacity:.9; }
.banner-slide.active{ opacity:1; transform: translateX(0); pointer-events:auto; }
.banner-slide.tone-primary{ background: linear-gradient(120deg, var(--primary-light), var(--surface) 70%); }
.banner-slide.tone-amber{ background: linear-gradient(120deg, var(--amber-light), var(--surface) 70%); }
.banner-slide.tone-leaf{ background: linear-gradient(120deg, var(--leaf-light), var(--surface) 70%); }
.banner-slide.tone-danger{ background: linear-gradient(120deg, var(--danger-light), var(--surface) 70%); }
.banner-slide.tone-violet{ background: linear-gradient(120deg, var(--violet-light), var(--surface) 70%); }
.banner-slide-icon{ font-size:42px; flex-shrink:0; filter: drop-shadow(0 4px 8px rgba(0,0,0,.1)); }
.banner-slide-title{ font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--text); }
.banner-slide-subtitle{ font-size:13px; color:var(--text-muted); margin-top:4px; max-width:640px; }

.banner-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.85); border:1px solid var(--border); color:var(--text); display:flex;
  align-items:center; justify-content:center; z-index:5; transition: background .15s var(--ease), transform .15s var(--ease);
}
html[data-theme="dark"] .banner-nav{ background:rgba(26,35,28,.85); }
.banner-nav:hover{ background:#fff; transform: translateY(-50%) scale(1.08); }
html[data-theme="dark"] .banner-nav:hover{ background:var(--surface-2); }
.banner-nav.prev{ right:12px; }
.banner-nav.next{ left:12px; }

.banner-dots{ position:absolute; bottom:10px; right:50%; transform:translateX(50%); display:flex; gap:6px; z-index:5; }
.banner-dot{ width:7px; height:7px; border-radius:50%; border:none; background:rgba(0,0,0,.18); padding:0; transition: background .2s var(--ease), width .2s var(--ease); }
html[data-theme="dark"] .banner-dot{ background:rgba(255,255,255,.25); }
.banner-dot.active{ background:var(--primary); width:20px; border-radius:5px; }

.banner-slide-admin{ position:absolute; top:10px; left:10px; display:flex; gap:6px; z-index:6; }
.banner-slide-imgcount{ position:absolute; top:10px; right:10px; background:rgba(0,0,0,.55); color:#fff; font-size:11px; padding:3px 8px; border-radius:20px; display:flex; align-items:center; gap:4px; z-index:5; }
.banner-slide-admin button{ width:26px; height:26px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:12px; }
.banner-slide-admin button.danger{ color:var(--danger); }
.banner-slide-admin button:hover{ background:var(--leaf-light); }
.banner-add-btn{ position:absolute; bottom:8px; left:8px; z-index:6; background:var(--surface); }

.section-title{ display:flex; align-items:center; justify-content:space-between; margin: 30px 0 14px; }
.section-title h3{ font-size:16px; }
.section-title a{ font-size:12px; color:var(--primary); font-weight:700; }

.list-card{ background:var(--surface); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; }
.list-row{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); font-size:13px; }
.list-row:last-child{ border-bottom:none; }
.list-row:hover{ background:var(--surface-2); }
.list-row .lr-title{ font-weight:700; flex:1; }
.list-row .lr-meta{ color:var(--text-faint); font-size:12px; font-family:var(--font-mono); }

.tile-card{ background:var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:18px; cursor:pointer; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); overflow:hidden; }
.tile-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--leaf); }
.tile-card .tile-icon{ font-size:28px; margin-bottom:10px; display:block; transition: transform .25s var(--ease); }
.tile-card:hover .tile-icon{ transform: scale(1.12) rotate(-4deg); }
.tile-card h4{ font-size:14px; margin-bottom:4px; }
.tile-card p{ font-size:12px; color:var(--text-muted); line-height:1.6; }
.tile-card .tile-star{ position:absolute; top:12px; left:12px; z-index:6; color: var(--text-faint); font-size:16px; background:rgba(255,255,255,.85); border-radius:50%; width:26px; height:26px; display:flex; align-items:center; justify-content:center; transition: color .15s var(--ease), transform .15s var(--ease); }
.tile-card .tile-star:hover{ transform: scale(1.25); }
.tile-card .tile-star.active{ color: var(--amber); }

.grid > .tile-card:nth-child(1){ animation-delay:.02s; } .grid > .tile-card:nth-child(2){ animation-delay:.06s; }
.grid > .tile-card:nth-child(3){ animation-delay:.10s; } .grid > .tile-card:nth-child(4){ animation-delay:.14s; }
.grid > .tile-card:nth-child(5){ animation-delay:.18s; } .grid > .tile-card:nth-child(6){ animation-delay:.22s; }
.grid > .tile-card:nth-child(n+7){ animation-delay:.26s; }
.grid > .stat-card:nth-child(1){ animation-delay:.02s; } .grid > .stat-card:nth-child(2){ animation-delay:.07s; }
.grid > .stat-card:nth-child(3){ animation-delay:.12s; } .grid > .stat-card:nth-child(4){ animation-delay:.17s; }

.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; }
.badge.tone-primary{ background:var(--primary-light); color:var(--primary-dark); }
.badge.tone-leaf{ background:var(--leaf-light); color:var(--badge-leaf-text); }
.badge.tone-amber{ background:var(--amber-light); color:var(--badge-amber-text); }
.badge.tone-danger{ background:var(--danger-light); color:var(--danger); }
.badge.tone-gray{ background:var(--tone-gray-bg); color:var(--text-muted); }

.rating-widget-holder{ margin-top:14px; }
.rating-widget{ display:inline-flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:6px 14px; }
.rating-stars{ display:flex; gap:2px; direction:ltr; }
.rating-stars i{ font-size:17px; color:var(--border-strong); cursor:pointer; transition:color .1s, transform .1s; }
.rating-stars i.ti-star-filled{ color:var(--amber); }
.rating-stars i:hover{ transform:scale(1.15); }
.rating-meta{ font-size:11px; color:var(--text-faint); font-family:var(--font-mono); }

.accordion-item{ border-bottom:1px solid var(--border); }
.accordion-item:last-child{ border-bottom:none; }
.accordion-q{ display:flex; align-items:center; justify-content:space-between; padding:14px 4px; cursor:pointer; font-weight:700; font-size:14px; }
.accordion-q i{ transition: transform .15s; color:var(--text-faint); }
.accordion-item.open .accordion-q i{ transform: rotate(45deg); }
.accordion-q .cms-item-controls i{ transform:none !important; color:inherit; transition:none; }
.accordion-a{ max-height:0; overflow:hidden; transition: max-height .2s ease; font-size:13px; color:var(--text-muted); line-height:1.8; }
.accordion-item.open .accordion-a{ max-height:300px; padding-bottom:14px; }

.timeline-item{ display:flex; gap:12px; padding:10px 0; border-bottom:1px dashed var(--border); font-size:13px; }
.timeline-item:last-child{ border-bottom:none; }
.timeline-item i{ color:var(--primary); font-size:16px; margin-top:2px; }
.timeline-item .tl-time{ color:var(--text-faint); font-size:11px; font-family:var(--font-mono); margin-inline-start:auto; white-space:nowrap; }

.progress-bar{ height:8px; border-radius:20px; background:var(--border); overflow:hidden; }
.progress-bar span{ display:block; height:100%; background: var(--primary); border-radius:20px; }

.empty-state{ text-align:center; padding:60px 20px; color:var(--text-faint); }
.empty-state i{ font-size:34px; margin-bottom:10px; display:block; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 16px; border-radius:10px; font-size:13px; font-weight:700; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); transition: background .16s var(--ease), border-color .16s var(--ease), transform .1s var(--ease), box-shadow .16s var(--ease); }
.btn:hover{ background: var(--surface-2); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(11,93,59,.08); }
.btn:active{ transform: translateY(0) scale(.97); }
.btn.btn-solid{ background:var(--grad-primary); border-color:var(--primary); color:#fff; }
.btn.btn-solid:hover{ filter:brightness(1.06); box-shadow: 0 6px 16px rgba(11,93,59,.28); }
.btn.btn-sm{ height:32px; padding:0 12px; font-size:12px; }

/* =========================================================
   FAHMAN — floating assistant
   ========================================================= */
.fahman-fab{
  position:fixed; bottom:26px; left:26px; z-index:60;
  width:64px; height:64px; border-radius:50%;
  background: var(--surface); border:1px solid var(--border);
  box-shadow: var(--shadow-pop);
  display:flex; align-items:center; justify-content:center;
  animation: fahman-bob 3.2s ease-in-out infinite;
}
.fahman-fab img{ width:44px; }
@keyframes fahman-bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }
.fahman-fab .fab-dot{ position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%; background:var(--leaf); border:2px solid #fff; }

.fahman-greet{
  position:fixed; bottom:100px; left:26px; z-index:59;
  background:var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); padding:12px 16px; font-size:13px; max-width:230px;
}
.fahman-greet b{ display:block; margin-bottom:2px; }

.fahman-panel{
  position:fixed; bottom:26px; left:26px; z-index:70;
  width:360px; height:520px; background:var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 12px 12px; box-shadow: var(--shadow-pop);
  display:none; flex-direction:column; overflow:hidden;
}
.fahman-panel.open{ display:flex; animation: fahman-pop .28s var(--ease); }
@keyframes dropdown-pop{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform: translateY(0); } }
@keyframes fahman-pop{ from{ opacity:0; transform: translateY(16px) scale(.96); } to{ opacity:1; transform: translateY(0) scale(1); } }
.fahman-head{ background: var(--primary); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px; }
.fahman-head img{ width:34px; }
.fahman-head .fh-title{ font-weight:700; font-size:14px; }
.fahman-head .fh-sub{ font-size:11px; opacity:.85; }
.fahman-head .fh-close{ margin-inline-start:auto; background:rgba(255,255,255,.15); border:none; color:#fff; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0; font-size:13px; }
.fahman-head .fh-voice-toggle{ background:rgba(255,255,255,.15); border:none; color:#fff; width:26px; height:26px; border-radius:50%; font-size:13px; display:flex; align-items:center; justify-content:center; }
.fahman-head .fh-voice-toggle.active{ background:#fff; color:var(--primary); }
.fahman-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background: var(--surface-2); }
.chat-msg{ max-width:80%; padding:10px 14px; border-radius: 14px; font-size:13px; line-height:1.7; }
.chat-msg.from-fahman{ background:var(--surface); border:1px solid var(--border); align-self:flex-start; border-bottom-right-radius:4px; }
.chat-msg.from-fahman.typing{ display:flex; gap:4px; padding:14px 16px; align-items:center; }
.chat-msg.typing span{ width:6px; height:6px; border-radius:50%; background:var(--text-faint); animation: typing-bounce 1.2s infinite ease-in-out; }
.chat-msg.typing span:nth-child(2){ animation-delay:.15s; }
.chat-msg.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typing-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }
.chat-msg.from-user{ background: var(--primary); color:#fff; align-self:flex-end; border-bottom-left-radius:4px; }
.chat-msg.confirm{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.chat-msg.confirm button{ border:none; border-radius:8px; padding:6px 12px; font-size:12px; font-weight:700; }
.chat-msg.confirm .yes{ background: var(--primary); color:#fff; }
.chat-msg.confirm .no{ background: var(--border); color: var(--text-muted); }
.fahman-suggest{ display:flex; flex-wrap:wrap; gap:6px; padding: 0 16px 12px; }
.fahman-suggest button{ font-size:11px; border:1px solid var(--border-strong); background:var(--surface); border-radius:20px; padding:5px 12px; }
.fahman-input{ display:flex; padding:14px 16px; border-top:1px solid var(--border); background:var(--surface); box-sizing:border-box; }
.fahman-input-bar{
  flex:1; display:flex; align-items:center; gap:4px; min-width:0;
  background:var(--surface-2); border:1px solid var(--border-strong); border-radius:999px;
  padding:5px; box-sizing:border-box;
}
.fahman-input-bar input{ flex:1; min-width:0; width:0; border:none; background:transparent; height:32px; padding:0 6px; font-family:inherit; font-size:13px; color:var(--text); }
.fahman-input-bar input:focus{ outline:none; }
.fahman-input-bar:focus-within{ border-color:var(--primary); background:var(--surface); }
.fahman-input-bar button{ flex-shrink:0; border:none; display:flex; align-items:center; justify-content:center; padding:0; line-height:1; }
#fahmanMicBtn{ width:30px; height:30px; border-radius:50%; background:transparent; color:var(--text-muted); font-size:14px; }
#fahmanMicBtn:hover{ background:var(--surface); color:var(--primary); }
#fahmanMicBtn.listening{ background:var(--danger); color:#fff; animation: mic-pulse 1.2s ease-in-out infinite; }
#fahmanSend{ width:34px; height:34px; border-radius:50%; background:var(--primary); color:#fff; font-size:15px; }
#fahmanSend i{ font-size:15px; line-height:1; }

/* =========================================================
   Utilities / Responsive
   ========================================================= */
.flex{ display:flex; align-items:center; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }
.text-muted{ color: var(--text-muted); }
.hidden{ display:none !important; }

@media (max-width: 900px){
  .sidebar{ position:fixed; right:0; top:0; z-index:80; transform: translateX(100%); transition: transform .2s; }
  .sidebar.open{ transform: translateX(0); }
  .search-wrap{ max-width:none; }
  .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr; }
  .login-shell{ grid-template-columns:1fr; }
  .login-visual{ display:none; }
}

/* =========================================================
   EDIT MODE — freeform contenteditable (Admin)
   ========================================================= */
#editModeBtn{ background: var(--leaf-light); border-color:#CFE7BC; color:#3E6B27; }
#editModeBtn.active{ background: var(--primary); border-color: var(--primary); color:#fff; }

.content.edit-mode{
  outline: 2px dashed var(--leaf);
  outline-offset: 10px;
  border-radius: var(--radius);
}
.content.edit-mode [contenteditable="true"]{ cursor: text; }
.content.edit-mode .tile-card,
.content.edit-mode .accordion-q,
.content.edit-mode .list-row,
.content.edit-mode [onclick]{ pointer-events: none; }
.content.edit-mode .cms-item-controls,
.content.edit-mode .btn,
.content.edit-mode button{ pointer-events: none; opacity:.5; }
.content.edit-mode [contenteditable="true"]:hover{ background: var(--leaf-light); outline: 1px dashed var(--leaf); }

.edit-toolbar{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:65; background: var(--surface); border:1px solid var(--border);
  border-radius: 999px; box-shadow: var(--shadow-pop);
  display:none; align-items:center; gap:10px; padding:8px 10px 8px 16px;
}
.edit-toolbar.open{ display:flex; }
.edit-toolbar span{ font-size:12px; color: var(--text-muted); font-weight:700; }
.edit-toolbar button{ border:none; border-radius:999px; padding:8px 16px; font-size:13px; font-weight:700; }
.edit-toolbar .save-btn{ background: var(--primary); color:#fff; }
.edit-toolbar .discard-btn{ background: var(--border); color: var(--text-muted); }

/* =========================================================
   ADMIN CONTROLS — universal add/edit/delete affordances
   ========================================================= */
.cms-add-btn{ margin: 4px 0 16px; }

.cms-item-controls{
  position:absolute; top:10px; right:10px; z-index:5;
  display:flex; gap:6px;
}
.cms-item-controls button{
  width:28px; height:28px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:13px;
}
.cms-item-controls button:hover{ background:var(--leaf-light); color:var(--primary-dark); }
.cms-item-controls button.danger{ color:var(--danger); }
.cms-item-controls button.danger:hover{ background:var(--danger-light); }
.cms-item-controls button.hidden-active{ color:var(--amber); background:var(--amber-light); }
.cms-item-controls button.hidden-active:hover{ background:var(--amber-light); }
.tile-card{ position:relative; }
.list-row{ position:relative; }
.list-row .cms-item-controls{ position:static; margin-inline-start:auto; }
.accordion-q .cms-item-controls{ position:static; }

.reorder-btns{ display:flex; gap:4px; }
.reorder-btns button{
  width:24px; height:24px; border-radius:6px; border:1px solid var(--border);
  background:var(--surface); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:12px;
}
.reorder-btns button:disabled{ opacity:.3; cursor:not-allowed; }
.reorder-btns button:not(:disabled):hover{ background:var(--leaf-light); }
.list-row .reorder-btns{ margin-inline-start:8px; }
.tile-card .reorder-btns{ margin-top:10px; }

.tile-cover{
  width:calc(100% + 36px); aspect-ratio:4/3; margin:-18px -18px 14px -18px;
  background-size:cover; background-position:center; overflow:hidden;
  transition: transform .3s var(--ease);
}
.tile-card:hover .tile-cover{ transform: scale(1.04); }

/* Modal (GenericForm) */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,20,14,.5); z-index:90;
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation: overlay-fade .18s var(--ease);
}
.modal-box{ background:var(--surface); border-radius: var(--radius-lg); width:100%; max-width:440px; box-shadow: var(--shadow-pop); max-height:88vh; display:flex; flex-direction:column; overflow:hidden; animation: modal-pop .22s var(--ease); }
@keyframes overlay-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modal-pop{ from{ opacity:0; transform: scale(.94) translateY(6px); } to{ opacity:1; transform: scale(1) translateY(0); } }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.modal-head h3{ font-size:16px; }
.modal-close{ width:28px; height:28px; border-radius:50%; border:none; background:var(--surface-2); color:var(--text-muted); transition: background .15s var(--ease), transform .15s var(--ease); }
.modal-close:hover{ background:var(--danger-light); color:var(--danger); transform: rotate(90deg); }
.modal-body{ padding:16px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.modal-body .field label{ font-size:12px; }
.modal-body select{ width:100%; height:40px; border:1px solid var(--border-strong); border-radius: var(--radius-sm); padding:0 10px; font-family:inherit; background:var(--surface-2); }
.modal-foot{ padding:14px 20px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }

/* Lightbox */
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(5,15,10,.82); z-index:95;
  display:flex; align-items:center; justify-content:center; padding:24px;
  animation: overlay-fade .2s var(--ease);
}
.lightbox-box{ position:relative; max-width:min(880px,92vw); max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:14px; animation: modal-pop .25s var(--ease); }
.lightbox-box img{ max-width:100%; max-height:72vh; border-radius: var(--radius); box-shadow: var(--shadow-pop); object-fit:contain; }
.lightbox-close{ position:absolute; top:-14px; left:-14px; width:36px; height:36px; border-radius:50%; background:#fff; border:none; color:#17241B; font-size:16px; transition: transform .15s var(--ease); }
.lightbox-close:hover{ transform: rotate(90deg) scale(1.08); }
.lightbox-actions a{ text-decoration:none; }
.cms-image{ cursor:pointer; }
.cms-image-hint{
  position:absolute; inset:auto 0 0 0; background:rgba(11,40,25,.68); color:#fff;
  font-size:11px; text-align:center; padding:5px 0; opacity:0; transition:opacity .12s;
}
.cms-image:hover .cms-image-hint{ opacity:1; }

.cms-video{ position:relative; background:var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-sm); overflow:hidden; }
.cms-video video{ width:100%; display:block; max-height:220px; background:#000; }
.cms-video-caption{ padding:6px 10px; font-size:11px; color:var(--text-muted); }
.cms-video .cms-delete{ top:8px; left:8px; width:26px; height:26px; }

.cms-audio-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.cms-audio-item{ position:relative; background:var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-sm); padding:12px; }
.cms-audio-caption{ font-size:12px; color:var(--text-muted); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.cms-audio-item audio{ width:100%; height:36px; }
.cms-audio-item .cms-delete{ top:8px; left:8px; width:26px; height:26px; }

.content-composer-trigger{ margin-bottom:16px; }

/* ✨ AI Summary */
.ai-summary-card{
  border-radius: var(--radius); margin-bottom:18px; overflow:hidden;
  border:1px solid var(--violet); background: var(--violet-light);
}
.ai-summary-head{
  display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
  cursor:pointer; font-weight:700; font-size:13px; color:var(--violet);
}
.ai-summary-head i.ti-sparkles{ margin-inline-end:4px; }
.ai-summary-chevron{ transition: transform .2s var(--ease); }
.ai-summary-card.open .ai-summary-chevron{ transform: rotate(180deg); }
.ai-summary-body{ max-height:0; overflow:hidden; transition: max-height .25s var(--ease); padding:0 16px; }
.ai-summary-card.open .ai-summary-body{ max-height:260px; padding-bottom:14px; }
.ai-summary-body p{ font-size:13px; line-height:1.8; color:var(--text); }
.ai-summary-note{ font-size:10px; color:var(--text-faint); margin-top:8px; font-style:italic; }

/* Rich content rendering (from ContentComposer text sections) */
.rich-content ul{ list-style:disc; padding-inline-start:22px; margin:8px 0; }
.rich-content ol{ list-style:decimal; padding-inline-start:22px; margin:8px 0; }
.rich-content b, .rich-content strong{ font-weight:700; color:var(--text); }

/* ContentComposer modal */
.composer-type-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(85px,1fr)); gap:10px; margin-top:12px; }
.composer-type-btn{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 8px;
  border:1px solid var(--border-strong); border-radius: var(--radius); background:var(--surface-2);
  font-size:12px; font-weight:700; color:var(--text-muted);
}
.composer-type-btn i{ font-size:24px; color:var(--primary); }
.composer-type-btn:hover{ background:var(--leaf-light); border-color:var(--leaf); color:var(--primary-dark); }

.richtext-toolbar{
  display:flex; align-items:center; gap:4px; background:var(--surface-2);
  border:1px solid var(--border-strong); border-bottom:none; border-radius:8px 8px 0 0; padding:6px;
}
.richtext-toolbar button{
  width:30px; height:30px; border-radius:6px; border:none; background:transparent; color:var(--text-muted); font-size:14px;
}
.richtext-toolbar button:hover{ background:var(--surface); color:var(--primary-dark); }
.richtext-sep{ width:1px; height:18px; background:var(--border-strong); margin:0 4px; }
.richtext-box{
  min-height:120px; max-height:260px; overflow-y:auto; border:1px solid var(--border-strong);
  border-radius:0 0 8px 8px; padding:10px 12px; font-size:13px; line-height:1.8; background:var(--surface);
}
.richtext-box:focus{ outline:none; border-color:var(--primary); }
.richtext-box ul{ list-style:disc; padding-inline-start:22px; }
.richtext-box ol{ list-style:decimal; padding-inline-start:22px; }

/* Table builder (ContentComposer) */
.table-builder-scroll{ overflow-x:auto; border:1px solid var(--border-strong); border-radius:8px; padding:8px; }
.table-builder{ border-collapse:collapse; }
.table-builder td{ padding:3px; }
.table-builder input{ width:110px; height:32px; border:1px solid var(--border-strong); border-radius:6px; padding:0 8px; font-size:12px; background:var(--surface-2); color:var(--text); }

/* Rendered tables (inside pages) */
.cms-table-wrap{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:18px; margin-bottom:14px; }
.cms-table-scroll{ overflow-x:auto; }
.cms-table{ border-collapse:collapse; width:100%; font-size:13px; }
.cms-table th, .cms-table td{ border:1px solid var(--border); padding:8px 12px; text-align:right; }
.cms-table th{ background:var(--primary-light); color:var(--primary-dark); font-weight:700; }
.cms-table tr:nth-child(even):not(:first-child){ background:var(--surface-2); }
.edited-badge{ font-size:10px; background:var(--leaf-light); color:#3E6B27; padding:2px 8px; border-radius:20px; margin-inline-start:8px; }

.cms-block{ position:relative; margin-bottom:8px; }
.block-reorder{
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
  background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:10px; padding:6px 10px;
}
.block-reorder-label{ font-size:11px; color:var(--text-faint); font-weight:700; display:flex; align-items:center; gap:5px; }
.block-reorder button{
  width:26px; height:26px; border-radius:6px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-muted);
  margin-inline-start:auto; display:inline-flex; align-items:center; justify-content:center;
}
.block-reorder button:first-of-type{ margin-inline-start:auto; }
.block-reorder button:disabled{ opacity:.35; cursor:not-allowed; }
.block-reorder button:not(:disabled):hover{ background:var(--leaf-light); }
.block-reorder button.danger{ color:var(--danger); margin-inline-start:0; }
.block-reorder button.danger:hover{ background:var(--danger-light); }

.removed-blocks-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:16px 0; padding:10px 12px; background:var(--surface-2); border:1px dashed var(--border-strong); border-radius: var(--radius-sm); }

/* =========================================================
   PROGRAM CMS — custom sections & images per program
   ========================================================= */
.btn-dashed{ border:1.5px dashed var(--border-strong); background:var(--surface-2); color:var(--primary-dark); }
.btn-dashed:hover{ background:var(--leaf-light); border-color:var(--leaf); }

.cms-section{ position:relative; margin-bottom:12px; }
.cms-delete{
  position:absolute; top:12px; left:12px; width:28px; height:28px; border-radius:50%;
  background:var(--danger-light); color:var(--danger); border:none; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.cms-delete:hover{ background:#f3cfc7; }

.cms-add-row{ margin: 4px 0 16px; }
.cms-form{
  display:none; flex-direction:column; gap:10px; background:var(--surface-2);
  border:1px dashed var(--border-strong); border-radius: var(--radius); padding:16px; margin-bottom:16px;
}
.cms-form.open{ display:flex; }
.cms-form input, .cms-form textarea{
  width:100%; border:1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding:10px 12px; font-family:inherit; font-size:13px; background:var(--surface); color:var(--text); resize:vertical;
}
.cms-form input:focus, .cms-form textarea:focus{ outline:none; border-color:var(--primary); }

.cms-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:12px; margin-bottom:14px; }
.cms-image{ position:relative; border-radius: var(--radius-sm); overflow:hidden; border:1px solid var(--border); aspect-ratio:4/3; }
.cms-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.cms-image .cms-delete{ top:8px; left:8px; width:26px; height:26px; }

/* =========================================================
   MOBILE / RESPONSIVE — polish pass
   الهدف: نفس التجربة على الموبايل والتابلت من غير ما يتكسر أي عنصر
   ========================================================= */

/* ---- Global: never let content force horizontal scroll on the page ---- */
html, body{ overflow-x:hidden; max-width:100%; }
img{ max-width:100%; }
table{ max-width:100%; }

/* ---- Tablet & below (<=900px): drawer sidebar + backdrop ---- */
@media (max-width: 900px){
  .sidebar{
    width: min(82vw, 300px);
    box-shadow: var(--shadow-pop);
  }
  .sidebar-backdrop{
    display:none; position:fixed; inset:0; background:rgba(8,20,13,.45);
    z-index:75; animation: overlay-fade .18s var(--ease);
  }
  .sidebar-backdrop.open{ display:block; }

  .topbar{ padding: 0 16px; gap:10px; }
  .content{ padding: 20px 16px 90px; }
  .dropdown-panel{ left:16px; width: min(92vw, 340px); }

  .login-form-side{ padding:24px; }
}

/* ---- Phones (<=640px): topbar squeeze, cards, banner, fahman, modals ---- */
@media (max-width: 640px){
  .topbar{ gap:6px; padding:0 12px; }
  .search-wrap{ max-width:none; }
  .search-wrap input{ font-size:13px; padding: 0 40px 0 36px; }
  .search-wrap i.ti-search{ right:12px; font-size:15px; }
  #voiceSearchBtn{ width:26px; height:26px; font-size:13px; }

  .topbar-actions{ gap:6px; }
  .icon-btn{ width:36px; height:36px; font-size:16px; }

  .user-chip{ padding:4px; gap:0; border:none; background:transparent; }
  .user-chip .who{ display:none; }

  .logout-btn{ padding:0 10px; gap:0; font-size:0; }
  .logout-btn i{ font-size:16px; }

  #editModeBtn{ padding:0 10px; font-size:12px; }

  .page-head h2{ font-size:19px; }
  .page-head .desc{ font-size:12.5px; }
  .content{ padding:16px 12px 90px; }

  .grid{ gap:12px; }
  .stat-card, .card, .tile-card, .cms-table-wrap{ padding:14px; }
  .cms-gallery{ grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:8px; }

  .home-banner{ margin-bottom:16px; }
  .banner-track{ height:auto; min-height:220px; }
  .banner-slide{ flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; padding:18px 22px; text-align:right; }
  .banner-slide-icon{ font-size:28px; }
  .banner-slide-title{ font-size:15px; }
  .banner-slide-subtitle{ font-size:12px; }
  .banner-nav{ width:28px; height:28px; }

  .modal-box{ max-width:94vw; }
  .modal-body{ padding:14px 16px; }
  .dropdown-panel{ width: min(94vw, 320px); left:8px; top:60px; }

  /* Fahman: near full-width bottom sheet instead of a fixed 360px box */
  .fahman-fab{ bottom:16px; left:16px; width:54px; height:54px; }
  .fahman-fab img{ width:36px; }
  .fahman-greet{ left:12px; right:12px; bottom:80px; max-width:none; }
  .fahman-panel{ left:10px; right:10px; bottom:10px; width:auto; height:min(72vh, 560px); }
  .chat-msg{ max-width:88%; }

  .composer-type-grid{ grid-template-columns:repeat(auto-fit, minmax(72px,1fr)); }
  .table-builder input{ width:88px; }

  .login-visual{ padding:32px 24px; }
  .login-card h1{ font-size:23px; }
}

/* ---- Small phones (<=380px) ---- */
@media (max-width: 380px){
  .sidebar-brand .plat-name{ font-size:12px; }
  .stat-card .stat-value{ font-size:22px; }
  .btn{ padding:0 12px; font-size:12px; }
  .login-form-side{ padding:18px; }
  .login-card h1{ font-size:21px; }
  .fahman-panel{ height:min(78vh, 560px); }
}

/* =========================================================
   PHASE 1 — Command Center / Information Architecture
   ========================================================= */
.command-search-card{
  margin:20px 0 22px;
  padding:26px 28px;
  border:1px solid var(--border);
  border-radius:24px;
  background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 58%,var(--primary-light) 100%);
  box-shadow:var(--shadow-card);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  position:relative;overflow:hidden;
}
.command-search-card:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;background:rgba(95,168,61,.08);left:-65px;bottom:-105px;pointer-events:none}
.command-kicker{display:inline-flex;align-items:center;gap:7px;color:var(--primary);font-size:12px;font-weight:800;margin-bottom:8px}
.command-search-copy h3{font-size:25px;margin-bottom:5px}
.command-search-copy p{font-size:13px;color:var(--text-muted)}
.command-ai-btn{border:0;background:var(--grad-primary);color:#fff;border-radius:12px;padding:12px 18px;font-weight:800;display:flex;align-items:center;gap:8px;box-shadow:0 8px 18px rgba(11,93,59,.18);white-space:nowrap}
.command-ai-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-card-hover)}
.quick-actions{margin-bottom:22px}
.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.quick-card{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-card);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s}
.quick-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);border-color:var(--border-strong)}
.quick-card>span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:3px;flex:1}
.quick-card b{font-size:13px}.quick-card small{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quick-card>.ti-arrow-left{color:var(--text-faint);font-size:16px}
.quick-icon{width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center;font-size:19px}
.command-columns{margin-top:0}.command-panel{padding:18px}.section-title.compact{margin-bottom:12px}.section-title.compact span{font-size:11px}
.command-list{display:flex;flex-direction:column;gap:4px}.command-list>a,.command-list>div{display:flex;align-items:center;gap:11px;padding:11px 8px;border-radius:12px;transition:background .16s}.command-list>a:hover{background:var(--surface-2)}
.command-list-icon{width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:var(--primary-light);color:var(--primary);display:grid;place-items:center}.command-list span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}.command-list b{font-size:12px}.command-list small{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.command-list>.ti-chevron-left,.command-list>a>.ti-chevron-left{color:var(--text-faint)}
.empty-inline{min-height:100px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--text-muted);font-size:12px;text-align:center}
@media (max-width:900px){.command-search-card{align-items:flex-start;flex-direction:column}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.quick-grid{grid-template-columns:1fr}.command-search-copy h3{font-size:21px}.command-search-card{padding:20px}.command-ai-btn{width:100%;justify-content:center}}

/* =========================================================
   PHASE 2 — Premium UX / Related Knowledge / Recent Views
   ========================================================= */
.related-section,.recent-section{margin-top:28px}
.related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.related-card,.recent-card{display:flex;align-items:center;gap:11px;min-width:0;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:16px;text-decoration:none;color:var(--text);box-shadow:var(--shadow-card);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s}
.related-card:hover,.recent-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);border-color:var(--border-strong)}
.related-icon,.recent-icon{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:var(--primary-light);color:var(--primary);display:grid;place-items:center;font-size:18px}
.related-card>span:nth-child(2),.recent-card>span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:3px;flex:1}
.related-card b,.recent-card b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.related-card small,.recent-card small{font-size:10.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.related-arrow{color:var(--text-faint);font-size:15px}
.recent-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.recent-card{padding:12px;border-radius:14px;box-shadow:none;background:var(--surface-2)}
.recent-card .recent-icon{width:34px;height:34px;flex-basis:34px;font-size:16px}
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:14px;font-size:11.5px;color:var(--text-faint)}
.breadcrumb a{color:var(--text-muted);text-decoration:none;transition:color .15s}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb a:first-child{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--surface-2);color:var(--primary)}

@media (max-width:1000px){
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recent-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .related-grid{grid-template-columns:1fr}
  .recent-strip{display:flex;overflow-x:auto;padding-bottom:5px;scroll-snap-type:x proximity}
  .recent-card{min-width:220px;scroll-snap-align:start}
  .related-section,.recent-section{margin-top:22px}
}

/* ================= PHASE 3 — Smart Search + Context AI ================= */
.search-results{ max-height:min(72vh,620px); overflow-y:auto; padding:0; }
.search-smart-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:11px;color:var(--text-muted);position:sticky;top:0;z-index:2;backdrop-filter:blur(10px)}
.search-smart-head span{font-weight:800;color:var(--primary);display:flex;align-items:center;gap:6px}.search-smart-head small{font-size:10px}
.search-context{margin:10px;border:1px solid var(--border);background:linear-gradient(135deg,var(--surface),var(--surface-2));border-radius:14px;padding:10px;display:flex;align-items:center;gap:9px}.search-context-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--primary-light);color:var(--primary);font-size:16px}.search-context span:nth-child(2){display:flex;flex-direction:column;min-width:0}.search-context small{font-size:9px;color:var(--text-faint)}.search-context b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-context button{margin-inline-start:auto;border:1px solid var(--border-strong);background:var(--surface);color:var(--primary);border-radius:9px;padding:7px 9px;font-family:inherit;font-size:10px;cursor:pointer;white-space:nowrap}.search-context button:hover{background:var(--primary-light)}
.search-group{padding:4px 0}.search-group-title{display:flex;align-items:center;gap:6px;padding:7px 14px 4px;font-size:10px;font-weight:800;color:var(--text-muted)}.search-group-title span{font-size:9px;min-width:18px;height:18px;display:grid;place-items:center;border-radius:20px;background:var(--surface-2);color:var(--text-faint)}
.search-results .sr-item{padding:9px 14px;gap:9px}.search-results .sr-main{display:flex;flex-direction:column;min-width:0;flex:1}.search-results .sr-main b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-results .sr-main small{font-size:10px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.search-results .sr-arrow{color:var(--text-faint);font-size:14px}.search-results .sr-type{font-size:9px;padding:3px 7px}
.search-ask-fahman{width:calc(100% - 20px);margin:10px;border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border));background:var(--primary-light);border-radius:14px;padding:10px;display:flex;align-items:center;gap:9px;color:var(--primary);font-family:inherit;text-align:right;cursor:pointer}.search-ask-fahman>i:first-child{font-size:19px}.search-ask-fahman span{display:flex;flex-direction:column;flex:1}.search-ask-fahman b{font-size:11px}.search-ask-fahman small{font-size:9px;color:var(--text-muted);margin-top:2px}.search-ask-fahman:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.search-results .sr-empty{display:flex;flex-direction:column;align-items:center;gap:5px;padding:24px 18px}.search-results .sr-empty>i{font-size:28px;color:var(--text-faint)}.search-results .sr-empty b{font-size:12px;color:var(--text)}.search-results .sr-empty span{font-size:10px;color:var(--text-faint)}.search-results .sr-empty button{margin-top:8px;border:1px solid var(--border-strong);background:var(--primary);color:#fff;border-radius:9px;padding:7px 11px;font-family:inherit;font-size:10px;cursor:pointer}
@media(max-width:700px){.search-context button{font-size:9px;padding:6px 7px}.search-context{margin:8px}.search-results{max-height:65vh}}


/* =========================================================
   Phase 4 — Professional CMS / Knowledge Governance
   ========================================================= */
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.08em;font-weight:800;color:var(--primary);margin-bottom:5px}
.cms-health-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;margin:18px 0;background:linear-gradient(135deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-sm)}
.cms-health-hero>div:first-child{display:flex;flex-direction:column}.cms-health-hero small{font-size:11px;color:var(--text-muted);font-weight:700}.cms-health-hero strong{font-size:42px;line-height:1.1;margin:2px 0}.cms-health-hero span{font-size:12px;color:var(--text-muted)}
.health-ring{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--primary) var(--p),var(--border) 0);position:relative}.health-ring:after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface)}.health-ring b{position:relative;z-index:1;font-size:16px}
.cms-stats{margin-bottom:16px}.cms-stat-card{display:flex;align-items:center;gap:13px}.cms-stat-card small{display:block;color:var(--text-muted);font-size:11px}.cms-stat-card strong{display:block;font-size:24px;margin-top:2px}.cms-stat-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:19px;background:var(--surface-2)}.cms-stat-icon.tone-leaf{color:var(--leaf)}.cms-stat-icon.tone-amber{color:#c58b18}.cms-stat-icon.tone-danger{color:#d64b4b}.cms-stat-icon.tone-primary{color:var(--primary)}
.cms-mini-row{margin-bottom:24px}.cms-mini-row .card{display:flex;align-items:center;gap:12px}.cms-mini-icon{width:38px;height:38px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;color:var(--primary)}.cms-mini-row b{display:block;font-size:20px}.cms-mini-row span{display:block;color:var(--text-muted);font-size:11px}
.cms-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.cms-table{width:100%;border-collapse:collapse;min-width:900px}.cms-table th,.cms-table td{padding:13px 14px;text-align:right;border-bottom:1px solid var(--border);font-size:12px;vertical-align:middle}.cms-table th{background:var(--surface-2);font-size:11px;color:var(--text-muted);font-weight:800}.cms-table tr:last-child td{border-bottom:0}.cms-table td b{display:block}.cms-table td small{display:block;color:var(--text-muted);font-size:9px;margin-top:3px}.cms-status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800}.cms-status.published{background:rgba(50,150,80,.12);color:var(--leaf)}.cms-status.draft{background:rgba(197,139,24,.12);color:#a16d00}.cms-status.expired{background:rgba(214,75,75,.12);color:#c53e3e}.cms-status.archived{background:var(--surface-2);color:var(--text-muted)}.cms-table .overdue{color:#c53e3e;font-weight:800}
.cms-editor-modal{max-width:820px}.cms-editor-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:22px}.cms-version-panel{border-inline-start:1px solid var(--border);padding-inline-start:20px}.version-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}.version-row:last-child{border-bottom:0}.version-row b{display:block;font-size:12px}.version-row small{display:block;color:var(--text-muted);font-size:10px;margin-top:3px}.empty-state.compact{padding:25px;font-size:12px}
@media(max-width:800px){.cms-health-hero{align-items:flex-start}.cms-editor-grid{grid-template-columns:1fr}.cms-version-panel{border-inline-start:0;border-top:1px solid var(--border);padding-inline-start:0;padding-top:16px}.cms-health-hero strong{font-size:34px}}


/* =========================================================
   PHASE 5 — KNOWLEDGE INTELLIGENCE
   ========================================================= */
.analytics-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.analytics-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}
.analytics-kpi{display:flex;align-items:center;gap:14px;padding:18px}.analytics-kpi-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:21px}.analytics-kpi small{display:block;color:var(--text-muted);font-size:12px}.analytics-kpi strong{display:block;font-family:var(--font-display);font-size:27px;line-height:1.2;margin:3px 0}.analytics-kpi em{font-style:normal;color:var(--text-faint);font-size:11px}.analytics-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.analytics-panel{padding:20px;margin-bottom:16px}.analytics-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}.analytics-row:last-child{border-bottom:0}.analytics-rank{width:24px;height:24px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;color:var(--text-muted);font-size:11px;font-weight:700}.analytics-row-main{flex:1;min-width:0}.analytics-row-main b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.analytics-bar{height:5px;background:var(--border);border-radius:99px;margin-top:7px;overflow:hidden}.analytics-bar i{display:block;height:100%;background:var(--grad-primary);border-radius:99px}.analytics-row>strong{font-family:var(--font-mono);font-size:12px;color:var(--primary)}.analytics-alert-panel .analytics-bar i{background:var(--grad-amber)}.analytics-empty{padding:24px 8px;text-align:center;color:var(--text-faint);font-size:13px}.fahman-analytics-list{display:grid;gap:0}.fahman-analytics-item{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}.fahman-analytics-item:last-child{border-bottom:0}.analytics-ai-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:var(--primary-light);color:var(--primary);display:grid;place-items:center}.fahman-analytics-item b{display:block;font-size:13px}.fahman-analytics-item small{display:block;color:var(--text-faint);font-size:11px;margin-top:4px}.analytics-insight{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;margin-bottom:20px;border:1px solid var(--border);background:linear-gradient(135deg,var(--surface),var(--surface-2));border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.analytics-insight>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--amber-light);color:var(--amber);font-size:19px}.analytics-insight b{font-family:var(--font-display)}.analytics-insight p{color:var(--text-muted);font-size:13px;line-height:1.8;margin-top:3px}
@media(max-width:900px){.analytics-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-grid-2{grid-template-columns:1fr}.analytics-head{align-items:flex-start;flex-direction:column}.analytics-head .btn{width:100%}}
@media(max-width:520px){.analytics-kpis{grid-template-columns:1fr}.analytics-panel{padding:15px}.analytics-kpi strong{font-size:23px}}

/* Nested knowledge navigation: Programs are grouped inside Knowledge */
.nav-group-wrap .nav-group-wrap { margin-inline-start: 4px; }
.nav-children-depth-0 { padding-inline-start: 14px; }
.nav-children-depth-1 { padding-inline-start: 18px; }
.nav-depth-1 > .nav-group-toggle {
  font-size: 13px;
  background: color-mix(in srgb, var(--primary-light) 55%, transparent);
  border-radius: 10px;
  margin: 2px 0;
}
.nav-depth-1 > .nav-group-toggle .chev { font-size: 13px; }
.nav-leaf-depth-2 { padding-inline-start: 18px !important; font-size: 12.5px !important; }

/* =========================================================
   PHASE 9-10 — Training Center / Quiz / Audit Log / Leaderboard
   (كلاسات موحّدة بدل الـ inline styles، بنفس نظام التصميم الأساسي)
   ========================================================= */
.course-card{ position:relative; cursor:pointer; }
.course-progress-track{ height:6px; background:var(--border); border-radius:4px; overflow:hidden; margin-top:10px; }
.course-progress-fill{ height:100%; background:var(--leaf); border-radius:4px; transition:width .3s var(--ease); }
.course-progress-label{ font-size:11px; color:var(--text-muted); margin-top:4px; }
.course-empty-note{ font-size:11px; color:var(--text-muted); margin-top:8px; }
.course-title{ margin-bottom:6px; }
.course-meta{ font-size:12px; color:var(--text-muted); }

.lesson-toggle-btn{ width:32px; height:32px; padding:0; border-radius:50%; flex:0 0 32px; }
.lesson-title{ font-size:13px; font-weight:700; }
.lesson-title.done{ text-decoration:line-through; opacity:.6; }
.lesson-body-text{ font-size:13px; margin-top:4px; white-space:pre-wrap; color:var(--text-muted); }
.lesson-link{ font-size:12px; color:var(--text-muted); }

.quiz-card{ padding:22px; }
.quiz-question{ margin-top:18px; }
.quiz-question p{ font-weight:700; margin-bottom:6px; font-size:13.5px; }
.quiz-option{ display:flex; align-items:center; gap:8px; margin-top:7px; cursor:pointer; font-size:13px; color:var(--text-muted); }
.quiz-option:hover{ color:var(--text); }

.leaderboard-rank{ width:30px; height:30px; font-size:12px; flex:0 0 30px; }

.audit-icon{ width:34px; height:34px; font-size:14px; flex:0 0 34px; }

@media(max-width:640px){
  .quiz-card{ padding:16px; }
  .lesson-toggle-btn{ width:28px; height:28px; flex:0 0 28px; }
}

/* تمييز بصري بين مجموعات القائمة الجانبية الرئيسية — بيتحدد فعليًا من app.js
   (data-group-color) مش بترتيب CSS، عشان يفضل صح حتى لو الأدمن رتّب القائمة */
.nav-group-wrap[data-group-color="0"] > .nav-group-toggle i:first-child{ color:var(--primary); }
.nav-group-wrap[data-group-color="1"] > .nav-group-toggle i:first-child{ color:var(--leaf); }
.nav-group-wrap[data-group-color="2"] > .nav-group-toggle i:first-child{ color:var(--violet); }
.nav-group-wrap[data-group-color="3"] > .nav-group-toggle i:first-child{ color:var(--amber); }
.nav-group-wrap[data-group-color="4"] > .nav-group-toggle i:first-child{ color:var(--teal); }
.nav-group-wrap[data-group-color="5"] > .nav-group-toggle i:first-child{ color:var(--danger); }

/* =========================================================
   PHASE — Loading Screen (شاشة التحميل الأولى)
   ========================================================= */
.app-loading-screen{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background: var(--bg);
  transition: opacity .5s var(--ease), visibility .5s;
}
.app-loading-screen.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.app-loading-logo{ width:150px; height:auto; }
.app-loading-ring{ position:relative; width:104px; height:104px; }
.app-loading-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.app-loading-ring .ring-track{ fill:none; stroke:var(--border); stroke-width:7; }
.app-loading-ring .ring-fill{
  fill:none; stroke:var(--leaf); stroke-width:7; stroke-linecap:round;
  stroke-dasharray: 326.7; stroke-dashoffset: 326.7;
  transition: stroke-dashoffset .35s var(--ease);
}
.app-loading-percent{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:18px; color:var(--text);
}
.app-loading-text{ font-size:13.5px; color:var(--text-muted); }
@media(max-width:480px){
  .app-loading-logo{ width:110px; }
  .app-loading-ring{ width:84px; height:84px; }
  .app-loading-percent{ font-size:15px; }
}