/*
  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:#080a11; --bg2:#080a11; --bg3:#080a11;
  --card-bg:#0f1320; --card-border:rgba(255,255,255,.07);
  --card-shadow: 0 1px 2px rgba(0,0,0,.3);
  --card-shadow-hover: 0 10px 26px -12px rgba(0,0,0,.55);
  --text:#f1f5f9; --text-muted:#94a3b8; --text-soft:#64748b;

  --sb-bg: rgba(15,18,28,.6);
  --sb-border: rgba(255,255,255,.07);
  --sb-shadow: 0 20px 45px -20px rgba(0,0,0,.6);
  --sb-text:#cbd5e1; --sb-text-muted:#64748b;
  --sb-active-bg: linear-gradient(135deg,#7c3aed,#06b6d4);
  --sb-active-text:#ffffff;
  --sb-hover-bg: rgba(255,255,255,.05);

  --topbar-bg: rgba(8,10,17,.6);
  --accent:#8b5cf6; --accent2:#06b6d4;
  --input-bg:rgba(255,255,255,.04); --input-border:rgba(255,255,255,.08);
  --tint-blue:rgba(37,99,235,.1); --tint-green:rgba(22,163,74,.1); --tint-purple:rgba(124,58,237,.12); --tint-amber:rgba(217,119,6,.1);

  --glass-bg: rgba(15,18,28,.6);
  --glass-bg-strong: rgba(15,18,28,.85);
  --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;
}