/*
  glass-ui.css — نظام التصميم الموحّد (v2)
  مطابق بالكامل لملف معاينة التصميم dashboard-preview-v2.html
  سايدبار أبيض زجاجي عائم بانحناءات حديثة + بطاقات مسطحة بدون ظلال ثقيلة + وضع ليلي كامل.
  يُستخدم مركزياً في كل صفحات لوحة التحكم عبر partials/header.php
*/

:root{
  /* مهم: بدون هذا الإعلان الصريح، متصفح أندرويد/كروم أحياناً بيفعّل "الوضع
     الليلي التلقائي" الخاص به على عناصر الفورم الأصلية (select/option
     تحديداً) بشكل مستقل تماماً عن كلاس html.dark بتاع الموقع، وبمعايير/
     استدلال (heuristic) خاص به يختلف من عنصر لعنصر حسب الألوان المحيطة —
     وده بالظبط سبب ظهور بعض قوائم select (مثل "المدونة الهدف" في تمبلر/
     بلوجر) بخلفية ونص بنفس اللون تقريباً (نص مختفي) بينما قوائم تانية بنفس
     الكلاس (input-glass) بتظهر سليمة، رغم إن الكود والكلاسات متطابقة 100%.
     تحديد color-scheme صراحة يفرض على المتصفح احترام الثيم اللي الموقع
     فعلاً محدده (فاتح هنا، وغامق تحت html.dark) بدل تخمينه بنفسه. */
  color-scheme: light;

  --bg1:#f2f5fb; --bg2:#eef7f1; --bg3:#fbf3ea;
  --page-text:#1e293b;

  --card-bg:#ffffff; --card-border:#e7ecf3;
  --card-shadow: 0 1px 2px rgba(15,23,42,.04);
  --card-shadow-hover: 0 6px 18px -8px rgba(15,23,42,.10);
  --text:#1e293b; --text-muted:#64748b; --text-soft:#94a3b8;

  --sb-bg: rgba(255,255,255,.72);
  --sb-border: rgba(15,23,42,.06);
  --sb-shadow: 0 10px 34px -16px rgba(30,41,59,.18);
  --sb-text:#475569; --sb-text-muted:#94a3b8;
  --sb-active-bg: linear-gradient(135deg,#2563eb,#7c3aed);
  --sb-active-text:#ffffff;
  --sb-hover-bg: rgba(37,99,235,.06);

  --topbar-bg: rgba(255,255,255,.7);
  --accent:#2563eb; --accent2:#7c3aed;
  --orb-blue: linear-gradient(135deg,#60a5fa,#2563eb);
  --orb-green: linear-gradient(135deg,#4ade80,#16a34a);
  --orb-purple: linear-gradient(135deg,#a78bfa,#7c3aed);
  --orb-orange: linear-gradient(135deg,#fb923c,#ea580c);
  --orb-pink: linear-gradient(135deg,#f472b6,#db2777);
  --orb-cyan: linear-gradient(135deg,#22d3ee,#0891b2);
  --orb-amber: linear-gradient(135deg,#fbbf24,#d97706);
  --orb-indigo: linear-gradient(135deg,#818cf8,#4f46e5);
  --orb-teal: linear-gradient(135deg,#2dd4bf,#0f766e);
  --orb-red: linear-gradient(135deg,#f87171,#dc2626);
  --orb-slate: linear-gradient(135deg,#64748b,#334155);

  --input-bg:#ffffff; --input-border:#e2e8f0;
  --tint-blue:#eef4ff; --tint-green:#eefaf1; --tint-purple:#f4f0ff; --tint-amber:#fff8ec;

  --brand-1: var(--accent);
  --brand-2: var(--accent2);
  --brand-3: #06B6D4;
  --glass-bg: rgba(255,255,255,.72);
  --glass-bg-strong: rgba(255,255,255,.92);
  --glass-border: var(--card-border);
  --glass-dark-bg: rgba(15,18,28,.75);
  --glass-dark-bg-strong: rgba(15,18,28,.92);
  --glass-dark-border: rgba(255,255,255,.08);
}

html.dark{
  /* راجع تعليق color-scheme في :root أعلاه — نفس المنطق بالظبط لكن للوضع
     الليلي الفعلي للموقع (كلاس html.dark)، عشان عناصر select/option تاخد
     خلفية غامقة ونص فاتح متسقين دايماً بدل تخمين المتصفح. */
  color-scheme: dark;

  --bg1:#07090e; --bg2:#07090e; --bg3:#07090e;
  --card-bg:#0d111a; --card-border:rgba(255,255,255,.10);
  --card-shadow: 0 1px 3px rgba(0,0,0,.4);
  --card-shadow-hover: 0 10px 26px -12px rgba(0,0,0,.7);
  --text:#ffffff; --text-muted:#cbd5e1; --text-soft:#94a3b8;

  --sb-bg: rgba(13,17,26,.88);
  --sb-border: rgba(255,255,255,.10);
  --sb-shadow: 0 20px 45px -20px rgba(0,0,0,.75);
  --sb-text:#e2e8f0; --sb-text-muted:#94a3b8;
  --sb-active-bg: linear-gradient(135deg,#2563eb,#7c3aed);
  --sb-active-text:#ffffff;
  --sb-hover-bg: rgba(255,255,255,.08);

  --topbar-bg: rgba(7,9,14,.88);
  --accent:#3b82f6; --accent2:#8b5cf6;
  --input-bg:rgba(255,255,255,.06); --input-border:rgba(255,255,255,.15);
  --tint-blue:rgba(37,99,235,.2); --tint-green:rgba(22,163,74,.2); --tint-purple:rgba(124,58,237,.22); --tint-amber:rgba(217,119,6,.2);

  --glass-bg: rgba(13,17,26,.85);
  --glass-bg-strong: rgba(13,17,26,.96);
  --glass-border: var(--card-border);
}

.app-bg{
  position: relative;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(1000px 650px at 100% -10%, var(--bg3), transparent 55%),
    radial-gradient(900px 650px at 0% 110%, var(--bg2), transparent 55%),
    var(--bg1);
  background-attachment: fixed;
  transition: background .4s ease, color .4s ease;
}
html.dark .app-bg{
  background:
    radial-gradient(900px 600px at 15% 0%, rgba(124,58,237,.14), transparent 55%),
    radial-gradient(900px 600px at 100% 30%, rgba(6,182,212,.1), transparent 55%),
    var(--bg1);
  background-attachment: fixed;
}
.app-bg::before{ content:none; }

.shadow-deep, .shadow-deep-lg{ box-shadow: var(--card-shadow-hover); }
.shadow-deep-dark{ box-shadow: 0 10px 26px -12px rgba(0,0,0,.5); }
.shadow-glow-blue{ box-shadow: 0 20px 45px -20px rgba(37,99,235,.5); }
.shadow-glow-purple{ box-shadow: 0 20px 45px -20px rgba(124,58,237,.45); }

.glass, .glass-strong{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.glass-card{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
  isolation: isolate;
  color: var(--text);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .3s ease;
}
.glass-card::before{ content:none; }
.glass-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(37,99,235,.18);
}

.dropdown-panel{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow-hover);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--text);
}

.glass-dark{
  background: var(--sb-bg);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--sb-border);
  color: var(--text);
}

.app-sidebar{
  background: var(--sb-bg);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--sb-border);
  border-inline-end: 1px solid var(--sb-border);
  border-radius: 28px;
  box-shadow: var(--sb-shadow);
  margin: 18px;
  height: calc(100vh - 36px) !important;
  max-height: calc(100vh - 36px);
  padding: 6px;
  transition: background .4s ease, box-shadow .4s ease, width .3s ease;
}
@media (min-width:768px){
  .app-sidebar{ position: sticky; top: 18px; }
}
.app-sidebar .brand-badge{
  background: linear-gradient(135deg,#2563eb,#7c3aed);
  box-shadow: 0 10px 22px -8px rgba(37,99,235,.5);
}
.app-sidebar p, .app-sidebar span{ color: inherit; }
.nav-link{
  display:flex; align-items:center; gap:.7rem;
  padding:.65rem .8rem; border-radius:16px;
  color: var(--sb-text);
  font-weight: 700; font-size: .845rem;
  transition: all .18s ease;
  position: relative;
}
.nav-link i{ width:1.15rem; text-align:center; font-size:.92rem; }
.nav-link:hover{
  color: var(--text);
  background: var(--sb-hover-bg);
}
.nav-link.active{
  color: var(--sb-active-text);
  background: var(--sb-active-bg);
  box-shadow: 0 10px 22px -10px rgba(37,99,235,.55);
}
.nav-link.active::before{ content:none; }
.nav-section-label{
  font-size:.62rem; font-weight:800; letter-spacing:.07em;
  color: var(--sb-text-muted); text-transform:uppercase;
  padding: .6rem .8rem .35rem;
}
.nav-group{ margin-bottom:.15rem; }
.nav-group-toggle{
  display:flex; align-items:center; gap:.65rem;
  width:100%; cursor:pointer; background:transparent; border:none; margin:0;
  font-size:.82rem; font-weight:800; letter-spacing:.005em;
  color: var(--sb-text); text-transform:none;
  padding: .6rem .7rem; border-radius:14px;
  transition: background .18s ease, color .15s ease;
}
.nav-group-toggle:hover{ color: var(--text); background: var(--sb-hover-bg); }
.nav-group-toggle.is-open{ color: var(--text); }
.nav-group-toggle .nav-group-icon{
  width:1.55rem; height:1.55rem; flex-shrink:0; text-align:center;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; border-radius:9px;
  background: var(--sb-hover-bg); color: var(--accent);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-group-toggle.is-open .nav-group-icon{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff;
}
.nav-group-toggle .nav-group-label{ flex:1; text-align:right; min-width:0; }
.nav-group-toggle .nav-group-chevron{
  font-size:.68rem; color: var(--sb-text-muted);
  transition: transform .2s ease; flex-shrink:0;
}
.nav-group-toggle .nav-group-chevron.is-open{ transform: rotate(180deg); color: var(--accent); }
.nav-group-items{ position:relative; }
.nav-group-items.is-expanded{ margin: .15rem 0 .1rem; }
.nav-group-items.is-expanded::before{
  content:''; position:absolute;
  inset-inline-start: 1.45rem; top:-.1rem; bottom:.3rem;
  width:1px; background: var(--sb-border);
}
.nav-group-items.is-expanded li{ padding-inline-start: 1.4rem; }
.nav-group-items.is-expanded .nav-link{ padding-inline-start:.65rem; }
.nav-badge{
  margin-inline-start:auto;
  font-size:.62rem; font-weight:800; line-height:1;
  padding:.28rem .45rem; border-radius:999px; flex-shrink:0;
}
.nav-badge-blue{ background: var(--tint-blue); color: var(--accent); }
.nav-badge-amber{ background:#fbbf24; color:#78350f; }
.nav-badge-red{ background:#ef4444; color:#fff; }
.nav-logout{
  color: #ef4444;
  border-top: 1px solid var(--sb-border);
  margin-top:4px; padding-top: .75rem;
}
.nav-logout:hover{ background: rgba(239,68,68,.08); color:#ef4444; }

.app-topbar{
  background: var(--topbar-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--card-border);
  color: var(--text);
}
.app-topbar h2, .app-topbar span, .app-topbar p{ color: inherit; }

.theme-toggle{
  width:46px; height:26px; border-radius:999px; cursor:pointer; position:relative; flex-shrink:0;
  background: linear-gradient(135deg,#e2e8f0,#cbd5e1);
  border:1px solid var(--card-border);
  transition: background .3s ease;
}
html.dark .theme-toggle{ background: linear-gradient(135deg,#312e81,#0f172a); }
.theme-toggle .knob{
  position:absolute; top:2px; inset-inline-start:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; color:#f59e0b;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition: inset-inline-start .3s ease, transform .3s ease;
}
html.dark .theme-toggle .knob{ inset-inline-start:22px; color:#818cf8; }

.btn-glass-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff; font-weight:800; border-radius:14px;
  box-shadow: 0 14px 30px -12px rgba(37,99,235,.5);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  border: none;
}
.btn-glass-primary:hover{ transform: translateY(-2px); filter:brightness(1.06); box-shadow: 0 18px 36px -12px rgba(37,99,235,.6); }
.btn-glass-primary:active{ transform: translateY(0); }

.btn-glass{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  font-weight:700;
  color: var(--text-muted);
  transition: all .18s ease;
  box-shadow: var(--card-shadow);
}
.btn-glass:hover{ background: var(--sb-hover-bg); color: var(--accent); transform: translateY(-1px); }

.input-glass{
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 12px;
  color: var(--text);
  transition: all .18s ease;
}
.input-glass:focus{
  outline:none;
  border-color: var(--accent);
  background: var(--input-bg);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

.icon-orb{
  display:flex; align-items:center; justify-content:center;
  border-radius: 16px;
  width: 3rem; height: 3rem;
  font-size: 1.1rem;
  color:#fff; flex-shrink:0;
  box-shadow: 0 10px 20px -8px rgba(15,23,42,.28);
}
.orb-blue{ background: var(--orb-blue); }
.orb-purple{ background: var(--orb-purple); }
.orb-cyan{ background: var(--orb-cyan); }
.orb-orange{ background: var(--orb-orange); }
.orb-green{ background: var(--orb-green); }
.orb-pink{ background: var(--orb-pink); }
.orb-amber{ background: var(--orb-amber); }
.orb-indigo{ background: var(--orb-indigo); }
.orb-teal{ background: var(--orb-teal); }
.orb-red{ background: var(--orb-red); }

.service-card{ overflow:hidden; }
.service-card .service-glow{
  position:absolute; width:150px; height:150px; border-radius:9999px;
  filter: blur(46px); opacity:.16; top:-40px; inset-inline-end:-40px;
  transition: opacity .25s ease;
}
.service-card:hover .service-glow{ opacity:.3; }
.service-card:hover{ transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }

.badge-soft{
  font-size:.72rem; font-weight:800; padding:.25rem .6rem; border-radius:9999px;
  background: var(--tint-blue); color: var(--accent); border:1px solid rgba(37,99,235,.18);
}
.pill{ display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:800; padding:.3rem .65rem; border-radius:999px; }
.pill-green{ background:var(--tint-green); color:#16a34a; }
.pill-blue{ background:var(--tint-blue); color:#2563eb; }
.pill-amber{ background:var(--tint-amber); color:#d97706; }
.pill-red{ background:rgba(239,68,68,.1); color:#dc2626; }

.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
@media (max-width:1024px){ .kpis{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .kpis{ grid-template-columns:1fr;} }
.card.kpi{ display:flex; align-items:center; gap:14px; padding:18px; border:none; }
.card.kpi .lbl{ font-size:12px; font-weight:700; color:var(--text-muted); }
.card.kpi .val{ font-size:22px; font-weight:900; color:var(--text); }

.table-card{ padding:0; overflow:hidden; }
.table-card table{ width:100%; border-collapse:collapse; font-size:13px; }
.table-card thead th{ text-align:start; padding:14px 18px; font-weight:800; color:var(--text-muted); font-size:12px; border-bottom:1px solid var(--card-border); background:rgba(148,163,184,.06); }
.table-card tbody td{ padding:14px 18px; border-bottom:1px solid var(--card-border); font-weight:600; color:var(--text); }
.table-card tbody tr:last-child td{ border-bottom:none; }

.section-head{ display:flex; align-items:center; justify-content:space-between; margin:26px 0 14px; flex-wrap:wrap; gap:10px; }
.section-head h2{ font-size:18px; font-weight:900; margin:0; color:var(--text); }

.tabs{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.tabs button{ font-family:inherit; border:1px solid var(--card-border); background:var(--card-bg); color:var(--text-muted); cursor:pointer; padding:9px 16px; border-radius:12px; font-weight:800; font-size:12.5px; transition:.18s ease; }
.tabs button.active{ background: linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff; border-color:transparent; }

.scroll-thin::-webkit-scrollbar{ width:5px; height:5px; }
.scroll-thin::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.35); border-radius: 999px; }
.scroll-thin::-webkit-scrollbar-track{ background: transparent; }

.auth-bg{
  min-height:100vh;
  display:flex; align-items:center; align-items:safe center; justify-content:center;
  padding: 1.5rem;
  position: relative;
  overflow-x:hidden;
  overflow-y:auto;
  background:
    radial-gradient(1000px 700px at 15% 10%, rgba(37,99,235,.28), transparent 55%),
    radial-gradient(900px 700px at 85% 90%, rgba(124,58,237,.26), transparent 55%),
    linear-gradient(160deg, #0b1220, #111a2e 55%, #0b1220);
}
.auth-bg .blob{
  position:absolute; border-radius:9999px; filter: blur(70px); opacity:.5;
  animation: floatBlob 14s ease-in-out infinite;
}
@keyframes floatBlob{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(20px,-30px) scale(1.08); }
}

@keyframes fadeUp{ from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:none; } }
.animate-fade-up{ animation: fadeUp .5s ease both; }

.toast-stack{
  position: fixed; top: 1.1rem; left: 50%; transform: translateX(-50%); z-index: 9999;
  display: flex; flex-direction: column; gap: .65rem;
  width: min(400px, calc(100vw - 2rem)); pointer-events: none;
}
.toast-card{
  position: relative; display: flex; align-items: flex-start; gap: .75rem;
  padding: .9rem 1rem; border-radius: 18px;
  background: var(--card-bg); border:1px solid var(--card-border);
  box-shadow: var(--card-shadow-hover);
  overflow: hidden; pointer-events: auto;
  opacity: 0; transform: translateY(-16px) scale(.97);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.toast-card.toast-in{ opacity: 1; transform: translateY(0) scale(1); }
.toast-card.toast-out{ opacity: 0; transform: translateY(-10px) scale(.97); }
.toast-orb{
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem;
  box-shadow: 0 10px 20px -8px rgba(15,23,42,.35);
}
.toast-orb-success{ background: var(--orb-green); }
.toast-orb-error{ background: var(--orb-red); }
.toast-orb-warning{ background: var(--orb-amber); }
.toast-orb-quota{ background: var(--orb-orange); }
.toast-orb-info{ background: var(--orb-blue); }
.toast-body{ flex: 1; min-width: 0; }
.toast-title{ font-weight: 800; font-size: .875rem; color: var(--text); margin-bottom: .1rem; }
.toast-msg{ font-size: .8rem; font-weight: 600; color: var(--text-muted); line-height: 1.5; word-break: break-word; }
.toast-action{ display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; font-size: .75rem; font-weight: 800; color: var(--accent); }
.toast-action:hover{ text-decoration: underline; }
.toast-close{ flex: none; width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; border-radius: 8px; color:#94a3b8; font-size: .75rem; transition: background .15s ease, color .15s ease; }
.toast-close:hover{ background: rgba(148,163,184,.15); color: var(--text-muted); }
.toast-progress{ position: absolute; inset-inline-start:0; bottom:0; height: 3px; width: 100%; background: rgba(148,163,184,.2); }
.toast-progress-bar{ height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transform-origin: left; animation-name: toastShrink; animation-timing-function: linear; animation-fill-mode: forwards; }
[dir="rtl"] .toast-progress-bar{ transform-origin: right; }
@keyframes toastShrink{ from{ transform: scaleX(1);} to{ transform: scaleX(0);} }

.confirm-overlay{
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem; background: rgba(15,23,42,0); transition: background .25s ease;
}
.confirm-overlay.confirm-in{ background: rgba(15,23,42,.45); backdrop-filter: blur(2px); }
.confirm-card{
  width: min(380px, 100%); border-radius: 22px; padding: 1.5rem;
  background: var(--card-bg); border:1px solid var(--card-border);
  transform: translateY(10px) scale(.96); opacity: 0;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}
.confirm-overlay.confirm-in .confirm-card{ transform: translateY(0) scale(1); opacity: 1; }
.confirm-title{ font-weight: 900; font-size: 1.05rem; color: var(--text); margin-top: .9rem; }
.confirm-msg{ font-size: .875rem; font-weight: 600; color: var(--text-muted); margin-top: .4rem; line-height: 1.6; }
.confirm-actions{ display:flex; gap: .6rem; margin-top: 1.4rem; }
.confirm-actions button{ flex: 1; padding: .65rem 1rem; font-size: .875rem; }
.confirm-danger{ background: linear-gradient(135deg,#F87171,#DC2626); box-shadow: 0 14px 30px -10px rgba(220,38,38,.5); }

@media (max-width: 480px){
  .toast-stack{ top: .6rem; }
  .toast-card{ padding: .75rem .85rem; border-radius: 16px; }
}

/* الجوال: قوائم/لوحات أكثر صلابة، وسايدبار يملأ الشاشة عند الفتح */
@media (max-width: 768px){
  .app-sidebar{
    background: var(--card-bg) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    margin: 10px !important;
    height: calc(100vh - 20px) !important;
  }
  .glass-strong{ background: var(--card-bg) !important; }
  .dropdown-panel{ background: var(--card-bg) !important; }
  .app-topbar{ background: var(--topbar-bg) !important; }
}

/* ======================================================================
   الاستجابة الكاملة لكل الشاشات (Responsive) — يشمل التوب بار، السايدبار،
   المحتوى الرئيسي، الجداول والبطاقات على كل صفحات لوحة التحكم
   ====================================================================== */
html, body{ overflow-x: hidden; max-width: 100%; }
.table-card{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-card table{ min-width: 560px; }

/* التوب بار: يلتف بدل ما يفيض عند ضيق الشاشة */
@media (max-width: 1024px){
  .app-topbar{ flex-wrap: wrap; height: auto !important; min-height: 64px; padding-block: 10px; row-gap: 10px; }
}
@media (max-width: 640px){
  .app-topbar{ padding-inline: 14px !important; gap: 10px; }
  .app-topbar .flex.items-center.gap-5,
  .app-topbar .flex.items-center.gap-3{ gap: 8px; }
  .app-topbar h2{ display:none !important; }
}
@media (max-width: 420px){
  .theme-toggle{ width:40px; height:23px; }
  .theme-toggle .knob{ width:17px; height:17px; font-size:9px; }
  .icon-btn, .btn-glass{ font-size: 13px; }
  .app-topbar .rounded-2xl.btn-glass a{ padding-inline: .6rem !important; }
  .app-topbar .rounded-2xl.btn-glass span{ font-size: .8rem !important; }
}

/* السايدبار على الجوال والتابلت: لوحة عائمة كاملة الطول بدون هامش جانبي زائد */
@media (max-width: 1024px){
  .app-sidebar{ width: min(85vw, 300px) !important; }
}

/* المحتوى الرئيسي: تقليل الحشو تدريجياً مع صغر الشاشة */
@media (max-width: 768px){
  main .p-6{ padding: 1rem !important; }
  main .p-8{ padding: 1.35rem !important; }
  .topbar h1, .app-topbar ~ * h1{ font-size: 1.4rem !important; }
}
@media (max-width: 480px){
  main .p-6{ padding: .85rem !important; }
  .glass-card, .card{ border-radius: 16px !important; }
  .kpis, .services{ grid-template-columns: 1fr !important; }
  .grid.grid-cols-1.md\:grid-cols-4,
  .grid.sm\:grid-cols-2.lg\:grid-cols-3{ gap: .85rem !important; }
}

/* منع أي عنصر (صور/جداول/كود) من التسبب في سكرول أفقي للصفحة كلها */
img, video, table{ max-width: 100%; }
pre, code{ overflow-x: auto; }

body.app-bg{ font-family: 'Cairo', sans-serif; }
html.dark body.app-bg{ color: var(--text) !important; }
html.dark body.app-bg .text-gray-800,
html.dark body.app-bg .text-gray-700{ color: var(--text) !important; }
html.dark body.app-bg .text-gray-500,
html.dark body.app-bg .text-gray-600{ color: var(--text-muted) !important; }
html.dark body.app-bg .text-gray-400{ color: var(--text-soft) !important; }
html.dark body.app-bg .border-gray-100,
html.dark body.app-bg .border-gray-200{ border-color: var(--card-border) !important; }
html.dark body.app-bg .bg-white{ background-color: var(--card-bg) !important; }
html.dark body.app-bg .bg-gray-50{ background-color: rgba(255,255,255,.03) !important; }

/* إصلاح عام: أي حقل إدخال (input/select/textarea) في الصفحة بيرث لون النص
   الفاتح من body.app-bg في الوضع الليلي، لكن مفيش كل الحقول بتستخدم كلاس
   .input-glass اللي بيدّيها خلفية غامقة مناسبة — فبيفضل شكل الحقل بخلفيته
   الافتراضية البيضاء من المتصفح + نص أبيض فوقها = نص مختفي تماماً. القاعدة
   دي بتغطي أي حقل في الصفحة تلقائياً بغض النظر عن الكلاسات المستخدمة عليه،
   عشان محدث نضطر نعدّل كل صفحة/كلاس على حدة دلوقتي أو مستقبلاً. */
html.dark body.app-bg input:not([type="checkbox"]):not([type="radio"]),
html.dark body.app-bg select,
html.dark body.app-bg textarea{
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
}
html.dark body.app-bg input::placeholder,
html.dark body.app-bg textarea::placeholder{
  color: var(--text-soft) !important;
  opacity: 1;
}
html.dark body.app-bg select option{
  background-color: var(--card-bg);
  color: var(--text);
}
html.dark body.app-bg input:disabled,
html.dark body.app-bg select:disabled,
html.dark body.app-bg textarea:disabled{
  opacity: .5;
}

/* ==========================================================================
   Modern SaaS UI Components & Utilities
   ========================================================================== */

/* Shimmer Skeleton Loaders */
.skeleton-box {
  position: relative;
  overflow: hidden;
  background-color: rgba(148, 163, 184, 0.15);
  border-radius: 8px;
}
html.dark .skeleton-box {
  background-color: rgba(255, 255, 255, 0.06);
}
.skeleton-box::after {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0)
  );
  animation: shimmer 2s infinite;
  content: '';
}
html.dark .skeleton-box::after {
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.04) 20%,
    rgba(255, 255, 255, 0.08) 60%,
    rgba(255, 255, 255, 0)
  );
}
@keyframes shimmer {
  100% { transform: translateX(100%); }
}

/* Global Toast Notifications */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}
.toast-msg {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(16px);
  animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 0.3s ease;
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(1rem) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-msg.hiding {
  opacity: 0;
  transform: translateY(0.5rem) scale(0.95);
}
.toast-success { background: rgba(16, 185, 129, 0.92); color: #ffffff; border: 1px solid rgba(255,255,255,0.2); }
.toast-error   { background: rgba(239, 68, 68, 0.92); color: #ffffff; border: 1px solid rgba(255,255,255,0.2); }
.toast-info    { background: rgba(37, 99, 235, 0.92); color: #ffffff; border: 1px solid rgba(255,255,255,0.2); }

/* Command Palette (Ctrl+K) */
.cmd-backdrop {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
}
.cmd-modal {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}
html.dark .cmd-modal {
  background: rgba(15, 18, 28, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}
.cmd-item {
  transition: all 0.15s ease;
  border-radius: 0.75rem;
}
.cmd-item:hover, .cmd-item.selected {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(124, 58, 237, 0.08));
}
html.dark .cmd-item:hover, html.dark .cmd-item.selected {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(124, 58, 237, 0.2));
}

/* KPI Modern Cards & Glows */
.kpi-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.12);
}
html.dark .kpi-card:hover {
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5);
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.kpi-card:hover::before {
  opacity: 1;
}

/* Custom Scrollbar for App Panes */
.scroll-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.scroll-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scroll-thin::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 10px;
}
html.dark .scroll-thin::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}
.scroll-thin::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5);
}

/* ======================================================================
   علامة الشعار الموحّدة (Brand Badge Global Style)
   ====================================================================== */
.brand-badge {
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  box-shadow: 0 10px 22px -8px rgba(37,99,235,.5);
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-badge svg {
  color: #ffffff !important;
}

/* ======================================================================
   تحسين التباين والوضوح في الوضع الليلي (Dark Mode High Contrast Boost)
   ====================================================================== */
html.dark .text-gray-900,
html.dark .text-slate-900,
html.dark .text-gray-800,
html.dark .text-slate-800 {
  color: #ffffff !important;
}

html.dark .text-gray-700,
html.dark .text-slate-700 {
  color: #f1f5f9 !important;
}

html.dark .text-gray-600,
html.dark .text-slate-600 {
  color: #e2e8f0 !important;
}

html.dark .text-gray-500,
html.dark .text-slate-500 {
  color: #cbd5e1 !important;
}

html.dark .text-gray-400,
html.dark .text-slate-400 {
  color: #94a3b8 !important;
}

html.dark .bg-white {
  background-color: var(--card-bg) !important;
}

html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300 {
  border-color: rgba(255, 255, 255, 0.10) !important;
}

html.dark .card.kpi .val,
html.dark .kpi-card .val {
  color: #ffffff !important;
}

html.dark .card.kpi .lbl,
html.dark .kpi-card .lbl {
  color: #94a3b8 !important;
}

/* ==========================================================================
   شبكة أمان إضافية للوضع الليلي: تغطية درجات رمادي إضافية + بطاقات/شارات
   ملوّنة (أزرق/أخضر/برتقالي/أحمر/بنفسجي فاتحة) شائعة الاستخدام في صفحات
   الإدارة (مثل settings.php) لكنها مكتوبة بالكامل بألوان Tailwind الثابتة
   للوضع النهاري فقط بدون أي مقابل dark:. بدون هذه القاعدة، خلفية البطاقة
   تفضل فاتحة/بيضاء تقريباً بينما باقي عناصر الصفحة (والنص أحياناً) بيتحوّل
   للوضع الغامق، فيظهر تباين سيء أو نص يكاد يختفي (خصوصاً text-gray-300
   الفاتح جداً فوق خلفية بطاقة بقت غامقة). كل قيمة هنا مطابقة (exact token
   match عبر ~=) وليست جزئية، لتفادي تصادم أسماء كلاسات متشابهة
   (مثال: bg-blue-50 لا يجب أن يطابق bg-blue-500 بالغلط). */
html.dark body.app-bg [class~="bg-gray-100"] { background-color: rgba(255,255,255,.05) !important; }
html.dark body.app-bg [class~="bg-gray-200"] { background-color: rgba(255,255,255,.08) !important; }
html.dark body.app-bg [class~="bg-gray-300"] { background-color: rgba(255,255,255,.14) !important; }
html.dark body.app-bg [class~="text-gray-300"] { color: var(--text-soft) !important; }
html.dark body.app-bg [class~="border-gray-200/80"],
html.dark body.app-bg [class~="border-gray-100/80"] { border-color: var(--card-border) !important; }

/* شارات/بطاقات زرقاء */
html.dark body.app-bg [class~="bg-blue-50"],
html.dark body.app-bg [class~="bg-blue-100"] { background-color: var(--tint-blue) !important; }
html.dark body.app-bg [class~="border-blue-100"],
html.dark body.app-bg [class~="border-blue-200"] { border-color: rgba(59,130,246,.3) !important; }
html.dark body.app-bg [class~="text-blue-600"],
html.dark body.app-bg [class~="text-blue-700"],
html.dark body.app-bg [class~="text-blue-800"] { color: #60a5fa !important; }

/* شارات/بطاقات خضراء/زمردية */
html.dark body.app-bg [class~="bg-emerald-50"],
html.dark body.app-bg [class~="bg-emerald-100"],
html.dark body.app-bg [class~="bg-emerald-200"],
html.dark body.app-bg [class~="bg-green-50"],
html.dark body.app-bg [class~="bg-green-100"] { background-color: var(--tint-green) !important; }
html.dark body.app-bg [class~="border-emerald-100"],
html.dark body.app-bg [class~="border-emerald-200"],
html.dark body.app-bg [class~="border-emerald-300"],
html.dark body.app-bg [class~="border-green-200"],
html.dark body.app-bg [class~="border-green-300"] { border-color: rgba(16,185,129,.3) !important; }
html.dark body.app-bg [class~="text-emerald-600"],
html.dark body.app-bg [class~="text-emerald-700"],
html.dark body.app-bg [class~="text-emerald-800"],
html.dark body.app-bg [class~="text-green-600"],
html.dark body.app-bg [class~="text-green-700"],
html.dark body.app-bg [class~="text-green-800"] { color: #34d399 !important; }

/* شارات/بطاقات برتقالية/كهرمانية */
html.dark body.app-bg [class~="bg-orange-50"],
html.dark body.app-bg [class~="bg-orange-100"],
html.dark body.app-bg [class~="bg-orange-200"],
html.dark body.app-bg [class~="bg-amber-50"],
html.dark body.app-bg [class~="bg-amber-100"] { background-color: var(--tint-amber) !important; }
html.dark body.app-bg [class~="border-orange-200"],
html.dark body.app-bg [class~="border-orange-300"],
html.dark body.app-bg [class~="border-amber-200"] { border-color: rgba(217,119,6,.3) !important; }
html.dark body.app-bg [class~="text-orange-500"],
html.dark body.app-bg [class~="text-orange-600"],
html.dark body.app-bg [class~="text-orange-700"],
html.dark body.app-bg [class~="text-amber-600"] { color: #fb923c !important; }

/* شارات/بطاقات حمراء */
html.dark body.app-bg [class~="bg-red-50"],
html.dark body.app-bg [class~="bg-red-100"],
html.dark body.app-bg [class~="bg-red-200"] { background-color: rgba(239,68,68,.15) !important; }
html.dark body.app-bg [class~="border-red-200"],
html.dark body.app-bg [class~="border-red-300"] { border-color: rgba(239,68,68,.3) !important; }
html.dark body.app-bg [class~="text-red-500"],
html.dark body.app-bg [class~="text-red-600"],
html.dark body.app-bg [class~="text-red-700"],
html.dark body.app-bg [class~="text-red-800"] { color: #f87171 !important; }

/* شارات/بطاقات بنفسجية/نيلية */
html.dark body.app-bg [class~="bg-purple-50"],
html.dark body.app-bg [class~="bg-purple-100"],
html.dark body.app-bg [class~="bg-indigo-50"],
html.dark body.app-bg [class~="bg-indigo-100"] { background-color: var(--tint-purple) !important; }
html.dark body.app-bg [class~="border-purple-100"],
html.dark body.app-bg [class~="border-purple-200"],
html.dark body.app-bg [class~="border-indigo-100"],
html.dark body.app-bg [class~="border-indigo-200"] { border-color: rgba(124,58,237,.3) !important; }
html.dark body.app-bg [class~="text-purple-500"],
html.dark body.app-bg [class~="text-purple-600"],
html.dark body.app-bg [class~="text-purple-700"],
html.dark body.app-bg [class~="text-purple-900"],
html.dark body.app-bg [class~="text-indigo-600"],
html.dark body.app-bg [class~="text-indigo-700"],
html.dark body.app-bg [class~="text-indigo-900"] { color: #c084fc !important; }

/* شارات وردية/تركوازية متفرقة */
html.dark body.app-bg [class~="text-pink-500"],
html.dark body.app-bg [class~="text-pink-600"] { color: #f472b6 !important; }
html.dark body.app-bg [class~="text-teal-600"] { color: #2dd4bf !important; }

/* ==========================================================================
   Export Modal Dark Mode & Contrast Enhancements
   ========================================================================== */
html.dark [x-show="showExportModal"] .glass-strong {
  background: #0d131f !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9) !important;
  color: #f8fafc !important;
}

html.dark [x-show="showExportModal"] .md\:col-span-2 label {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

html.dark [x-show="showExportModal"] .md\:col-span-2 label:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html.dark [x-show="showExportModal"] .md\:col-span-2 label.border-blue-500,
html.dark [x-show="showExportModal"] .md\:col-span-2 label.border-blue-600,
html.dark [x-show="showExportModal"] .md\:col-span-2 label.border-blue-900,
html.dark [x-show="showExportModal"] .md\:col-span-2 label[class*="bg-blue-50"] {
  background-color: rgba(37, 99, 235, 0.2) !important;
  border-color: #3b82f6 !important;
}

html.dark [x-show="showExportModal"] .md\:col-span-2 label.border-red-500,
html.dark [x-show="showExportModal"] .md\:col-span-2 label[class*="bg-red-50"] {
  background-color: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
}

html.dark [x-show="showExportModal"] .md\:col-span-2 label.border-indigo-500,
html.dark [x-show="showExportModal"] .md\:col-span-2 label[class*="bg-indigo-50"] {
  background-color: rgba(99, 102, 241, 0.2) !important;
  border-color: #818cf8 !important;
}

html.dark [x-show="showExportModal"] .md\:col-span-2 label.border-orange-500,
html.dark [x-show="showExportModal"] .md\:col-span-2 label[class*="bg-orange-50"] {
  background-color: rgba(249, 115, 22, 0.2) !important;
  border-color: #f97316 !important;
}

html.dark [x-show="showExportModal"] .md\:col-span-2 label.border-green-500,
html.dark [x-show="showExportModal"] .md\:col-span-2 label.border-green-700,
html.dark [x-show="showExportModal"] .md\:col-span-2 label[class*="bg-green-50"] {
  background-color: rgba(34, 197, 94, 0.2) !important;
  border-color: #22c55e !important;
}

html.dark [x-show="showExportModal"] .md\:col-span-2 label.border-purple-500,
html.dark [x-show="showExportModal"] .md\:col-span-2 label[class*="bg-purple-50"] {
  background-color: rgba(168, 85, 247, 0.2) !important;
  border-color: #a855f7 !important;
}

html.dark [x-show="showExportModal"] .md\:col-span-2 label.border-slate-600,
html.dark [x-show="showExportModal"] .md\:col-span-2 label.border-gray-900,
html.dark [x-show="showExportModal"] .md\:col-span-2 label.border-gray-600,
html.dark [x-show="showExportModal"] .md\:col-span-2 label[class*="bg-slate-50"],
html.dark [x-show="showExportModal"] .md\:col-span-2 label[class*="bg-gray-50"] {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

html.dark [x-show="showExportModal"] .md\:col-span-2 span.text-gray-800 {
  color: #f8fafc !important;
}

html.dark [x-show="showExportModal"] .md\:col-span-2 span.text-gray-500 {
  color: #94a3b8 !important;
}

/* Settings Panels on the Right */
html.dark [x-show="showExportModal"] .md\:col-span-3 > div {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
}

html.dark [x-show="showExportModal"] .md\:col-span-3 h4 {
  color: #ffffff !important;
}

html.dark [x-show="showExportModal"] .md\:col-span-3 label {
  color: #e2e8f0 !important;
}

html.dark [x-show="showExportModal"] .md\:col-span-3 select.input-glass,
html.dark [x-show="showExportModal"] .md\:col-span-3 input.input-glass,
html.dark [x-show="showExportModal"] .md\:col-span-3 div.input-glass {
  background-color: #0b101b !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #f8fafc !important;
}

html.dark [x-show="showExportModal"] .md\:col-span-3 .max-h-40 {
  background-color: #0b101b !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

html.dark [x-show="showExportModal"] .md\:col-span-3 .max-h-40 label {
  color: #f8fafc !important;
}

html.dark [x-show="showExportModal"] .md\:col-span-3 .max-h-40 label:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

html.dark [x-show="showExportModal"] .md\:col-span-3 p.text-gray-500,
html.dark [x-show="showExportModal"] .md\:col-span-3 p.text-gray-400 {
  color: #94a3b8 !important;
}

/* Modal Footer */
html.dark [x-show="showExportModal"] .bg-gray-50\/80,
html.dark [x-show="showExportModal"] .border-t {
  background-color: #080c14 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark [x-show="showExportModal"] .btn-glass {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #e2e8f0 !important;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}