/* ═══════════════════════════════════════════════════════
   SRCA Operational Control Platform — Shared Stylesheet
   النسخة المنظفة الموحدة — 2026
   ═══════════════════════════════════════════════════════ */

/* ── متغيرات الهوية البصرية ── */
:root {
  /* ألوان SRCA الرسمية */
  --srca-navy:    #10233d;
  --srca-navy-2:  #173759;
  --srca-red:     #e30613;
  --srca-red-2:   #c1121f;
  --srca-orange:  #ff7a18;
  --srca-green:   #00843d;
  --srca-blue:    #0f4c81;

  /* ألوان الواجهة (وضع نهاري) */
  --ops-bg:     #f8f5ee;
  --ops-panel:  #fffdf8;
  --ops-line:   #e3d8c6;
  --ops-text:   #10233d;
  --ops-muted:  #6f665c;
  --ops-red:    #e30613;
  --ops-navy:   #0b2a45;

  /* إرث للمتوافقية */
  --primary:    #0b2a45;
  --secondary:  #e30613;
  --bg:         #f8f5ee;
  --text:       #10233d;
  --white:      #ffffff;
  --border:     #e3d8c6;
  --topbar-bg:  #071b2f;
  --danger-bg:     #fef2f2;
  --danger-border: #fecaca;

  /* أبعاد سائلة */
  --fluid-radius: clamp(10px, 0.8vw, 16px);
  --fluid-gap:    clamp(10px, 1vw, 16px);
  --fluid-pad:    clamp(12px, 1.2vw, 22px);
}

/* ── وضع ليلي ── */
html[data-theme="dark"] {
  color-scheme: dark;
  --ops-bg:    #0b1626;
  --ops-panel: #12243a;
  --ops-line:  #24415f;
  --ops-text:  #f8fafc;
  --ops-muted: #94a3b8;
  --primary:   #93c5fd;
  --secondary: #fb7185;
  --bg:        #0b1626;
  --text:      #f8fafc;
  --white:     #111827;
  --border:    #334155;
  --danger-bg:     #451a24;
  --danger-border: #7f1d1d;
}

/* ── إعادة الضبط الأساسي ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Sakkal Majalla', 'Segoe UI', Tahoma, Arial, sans-serif;
  background: var(--ops-bg);
  color: var(--ops-text);
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ── غلاف التطبيق ── */
.app-shell {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  min-height: 100dvh;
}

/* ═══════════════════════════════
   القائمة الجانبية
═══════════════════════════════ */
.ops-sidebar {
  width: clamp(260px, 20vw, 360px);
  flex: 0 0 clamp(260px, 20vw, 360px);
  background: linear-gradient(180deg, #05182a 0%, #0a2945 58%, #061827 100%);
  color: #fff;
  min-height: 100dvh;
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(6px, 0.7vh, 10px) clamp(10px, 0.9vw, 14px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.ops-sidebar::-webkit-scrollbar { display: none; }

/* ساعة المساجد في الشريط الجانبي */
.sidebar-clock-brand {
  background: linear-gradient(180deg, #fffdf8 0%, #f3eadb 100%);
  border: 1px solid #d8c9b6;
  border-radius: 12px;
  padding: clamp(5px, 0.6vh, 9px) clamp(8px, 0.7vw, 12px);
  margin-bottom: clamp(4px, 0.5vh, 8px);
  flex: 0 0 auto;
}

html[data-theme="dark"] .sidebar-clock-brand {
  background: linear-gradient(180deg, #071b2f, #061827);
  border-color: rgba(255,255,255,0.16);
}

.mosque-clock-widget {
  width: 100%;
  display: block;
  color: #101827;
  font-family: 'Sakkal Majalla', 'Segoe UI', Tahoma, Arial, sans-serif;
}

html[data-theme="dark"] .mosque-clock-widget,
html[data-theme="dark"] .mosque-city,
html[data-theme="dark"] .mosque-date-row,
html[data-theme="dark"] .prayer-name {
  color: #f8fafc;
}

html[data-theme="dark"] .mosque-zone,
html[data-theme="dark"] .mosque-hijri {
  color: #cbd5e1;
}

.mosque-city {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: clamp(16px, 1.03vw, 19px);
  font-weight: 900;
  color: #25364a;
  margin-bottom: 3px;
}

.mosque-zone {
  font-size: clamp(12px, 0.86vw, 14px);
  font-weight: 800;
  color: #6b5b4a;
  text-align: center;
  margin-bottom: clamp(5px, 0.6vh, 8px);
}

.mosque-digital {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: clamp(34px, 4.5vh, 46px);
  border-radius: 10px;
  background: linear-gradient(180deg, #fffaf1, #efe2cc);
  border: 1px solid #ccb99f;
  color: #4b382d;
  font-family: 'Courier New', Consolas, monospace;
  font-size: clamp(24px, 1.84vw, 34px);
  font-weight: 900;
  letter-spacing: 1px;
  margin: clamp(4px, 0.5vh, 7px) 0;
}

html[data-theme="dark"] .mosque-digital {
  background: linear-gradient(180deg, #050706, #111827);
  border: 2px solid #2b2f32;
  color: #22c55e;
  text-shadow: 0 0 8px rgba(34,197,94,.75), 0 0 16px rgba(34,197,94,.35);
}

.mosque-ampm {
  font-size: clamp(12px, 0.92vw, 16px);
  font-weight: 900;
  color: #4b382d;
  align-self: flex-end;
  margin-bottom: 9px;
}

html[data-theme="dark"] .mosque-ampm { color: #4ade80; }

.mosque-date-row {
  font-size: clamp(13px, 0.92vw, 16px);
  font-weight: 900;
  color: #172033;
  text-align: center;
  line-height: 1.5;
  margin: 3px 0;
}

.mosque-hijri {
  font-size: clamp(12px, 0.86vw, 14px);
  font-weight: 800;
  color: #4b5563;
  text-align: center;
  line-height: 1.4;
  margin-bottom: clamp(6px, 0.7vh, 10px);
}

.prayer-panel {
  border-top: 1px solid rgba(120,113,108,.25);
  margin-top: clamp(4px, 0.4vh, 6px);
  padding-top: clamp(4px, 0.4vh, 6px);
}

.prayer-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  color: #7f1d1d;
  font-weight: 900;
  font-size: clamp(14px, 0.98vw, 18px);
  margin-bottom: 3px;
}

html[data-theme="dark"] .prayer-title { color: #fca5a5; }

.prayer-grid {
  display: grid;
  gap: 0;
}

.prayer-row {
  display: grid;
  grid-template-columns: 60px 1fr 22px;
  align-items: center;
  gap: 4px;
  font-size: clamp(13px, 0.94vw, 16px);
  font-weight: 900;
  color: #102033;
  padding: 1px 5px;
  border-radius: 4px;
}

.prayer-row:nth-child(odd) { background: rgba(255,255,255,.35); }
html[data-theme="dark"] .prayer-row:nth-child(odd) { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .prayer-row { color: #f8fafc; }

.prayer-time {
  direction: ltr;
  text-align: left;
  color: #059669;
  font-family: Consolas, 'Courier New', monospace;
  font-weight: 900;
  font-size: clamp(13px, 0.94vw, 16px);
}

.prayer-name { text-align: right; }
.prayer-ico  { font-size: clamp(14px, 0.98vw, 17px); text-align: center; color: #059669; }

/* التنقل الجانبي */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.4vh, 6px);
  flex: 0 0 auto;
  width: 100%;
  margin-bottom: clamp(4px, 0.5vh, 8px);
}

.nav-btn {
  width: 100%;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, #fffdf8, #f3eee5);
  color: var(--ops-text);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: clamp(7px, 0.75vh, 10px) clamp(8px, 0.7vw, 13px);
  border-radius: 10px;
  font-size: clamp(16px, 0.98vw, 18px);
  font-weight: 800;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
  font-family: inherit;
  text-align: right;
  white-space: nowrap;
}

.nav-btn:hover,
.nav-btn.active {
  border-right: 4px solid var(--srca-orange);
  background: linear-gradient(180deg, #fff7ed, #f7ead8);
}

html[data-theme="dark"] .nav-btn {
  background: #12243a;
  color: #f8fafc;
  border-color: #24415f;
}

html[data-theme="dark"] .nav-btn:hover,
html[data-theme="dark"] .nav-btn.active {
  background: #173759;
  border-right-color: var(--srca-orange);
}

.nav-btn .ico {
  font-size: clamp(20px, 1.26vw, 24px);
  width: 26px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-spacer { flex: 0 0 auto; min-height: 2px; }

.sidebar-foot {
  flex: 0 0 auto;
  font-size: clamp(12px, 0.86vw, 14px);
  color: #b6c4d6;
  line-height: 1.7;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: clamp(8px, 0.9vh, 12px);
}

/* ═══════════════════════════════
   المنطقة الرئيسية
═══════════════════════════════ */
.main-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  overflow: auto;
  background: var(--ops-bg);
}

/* هيدر العمليات */
.ops-header {
  flex: 0 0 auto;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ops-line);
  padding: clamp(12px, 1.4vh, 20px) clamp(18px, 1.8vw, 32px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(10px, 1vw, 20px);
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 30;
}

html[data-theme="dark"] .ops-header {
  background: rgba(7,23,42,.92);
  border-color: var(--ops-line);
}

.brand-title { text-align: center; }

.brand-title h1 {
  font-size: clamp(29px, 2.53vw, 43px);
  color: #102033;
  font-weight: 900;
  margin: 0;
  line-height: 1.2;
}

html[data-theme="dark"] .brand-title h1 { color: #f8fafc; }

.authority {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.8vw, 14px);
}

.authority div {
  font-weight: 900;
  font-size: clamp(19px, 1.26vw, 26px);
  color: var(--ops-text);
}

.authority span {
  display: block;
  font-size: clamp(13px, 0.86vw, 17px);
  color: var(--ops-muted);
  letter-spacing: .4px;
  margin-top: 2px;
}


.mini-box {
  background: #fff8ec;
  border: 1px solid var(--ops-line);
  border-radius: 12px;
  padding: clamp(8px, 0.8vh, 12px) clamp(10px, 0.9vw, 16px);
  min-width: clamp(120px, 8vw, 165px);
}

html[data-theme="dark"] .mini-box {
  background: #10223a;
  border-color: var(--ops-line);
  color: #fff;
}

.mini-box .label {
  font-size: clamp(13px, 0.86vw, 16px);
  color: var(--ops-muted);
  font-weight: 800;
}

.mini-box .value {
  font-size: clamp(17px, 1.03vw, 20px);
  color: var(--ops-text);
  font-weight: 900;
}

html[data-theme="dark"] .mini-box .value,
html[data-theme="dark"] .mini-box .label { color: #fff; }

.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: #16a34a;
  border-radius: 50%;
  margin-left: 6px;
}

/* ═══════════════════════════════
   حاوية المحتوى
═══════════════════════════════ */
.container.ops-content,
.container {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  padding: var(--fluid-pad);
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  margin: 0;
}

.page-view { display: none; }

.page-view.active {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ═══════════════════════════════
   كروت KPI الرئيسية
═══════════════════════════════ */
.kpi-grid.final-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-content: center;
  gap: clamp(10px, 1.2vw, 20px);
  margin-bottom: clamp(14px, 1.6vh, 22px);
}

.kpi-card {
  width: 100%;
  height: clamp(150px, 14vw, 200px);
  min-width: 0;
  max-width: none;
  min-height: 150px;
  max-height: 200px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ops-panel);
  border: 1px solid var(--ops-line);
  border-radius: var(--fluid-radius);
  box-shadow: 0 8px 22px rgba(15,23,42,.07);
}

html[data-theme="dark"] .kpi-card {
  background: var(--ops-panel);
  border-color: var(--ops-line);
}

.kpi-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 31px;
  background: var(--accent, #e30613);
  margin-bottom: 12px;
  flex-shrink: 0;
}

.kpi-num {
  font-size: clamp(38px, 2.53vw, 53px);
  font-weight: 900;
  color: #111827;
  direction: ltr;
  text-align: center;
  line-height: 1;
  margin: 4px 0;
}

html[data-theme="dark"] .kpi-num { color: #f8fafc; }

.kpi-change {
  font-size: clamp(18px, 1.03vw, 22px);
  font-weight: 900;
  color: var(--ops-text);
  line-height: 1.25;
  margin-top: 6px;
}

html[data-theme="dark"] .kpi-change { color: #f8fafc; }
.kpi-change.blue  { color: #2563eb; }
.kpi-change.green { color: #059669; }

/* ═══════════════════════════════
   لوحة تشغيل سريع
═══════════════════════════════ */
.dashboard-grid.clean-panels {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: var(--fluid-gap);
  align-items: start;
}

.ops-panel {
  background: var(--ops-panel);
  border: 1px solid var(--ops-line);
  border-radius: var(--fluid-radius);
  padding: clamp(14px, 1.4vh, 20px);
  box-shadow: 0 8px 22px rgba(60,44,21,.07);
}

html[data-theme="dark"] .ops-panel {
  background: var(--ops-panel);
  border-color: var(--ops-line);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(10px, 1.2vh, 16px);
}

.panel-head h2 {
  font-size: clamp(19px, 1.26vw, 24px);
  color: var(--ops-text);
  font-weight: 900;
  margin: 0;
}

html[data-theme="dark"] .panel-head h2 { color: #f8fafc; }
.panel-head span { font-size: 14px; color: var(--ops-muted); font-weight: 800; }

html[data-theme="dark"] html[data-theme="dark"] /* ═══════════════════════════════
   كروت القطاعات والملخصات
═══════════════════════════════ */
.cards-sectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 14vw, 220px), 1fr));
  gap: var(--fluid-gap);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--fluid-gap);
}

.sector-card,
.dash-card {
  background: linear-gradient(180deg, var(--ops-panel) 0%, #f7f0e6 100%);
  border: 1px solid var(--ops-line);
  border-radius: var(--fluid-radius);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(60,44,21,.07);
  display: flex;
  flex-direction: column;
  transition: transform .18s, box-shadow .18s;
}

.sector-card:hover,
.dash-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(60,44,21,.12);
}

html[data-theme="dark"] .sector-card,
html[data-theme="dark"] .dash-card {
  background: linear-gradient(180deg, #152b45, #10223a);
  border-color: var(--ops-line);
}

.sector-card-header,
.dash-card-header {
  background: #f3eadc;
  color: var(--ops-text);
  border-bottom: 1px solid var(--ops-line);
  padding: clamp(10px, 1.1vh, 14px) clamp(12px, 1vw, 16px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dash-card-header {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

html[data-theme="dark"] .sector-card-header,
html[data-theme="dark"] .dash-card-header {
  background: #183553;
  color: #f8fafc;
  border-color: var(--ops-line);
}

.sector-card.unclassified .sector-card-header {
  background: linear-gradient(135deg, #b91c1c, #ef4444);
  color: #fff;
}

.sector-name {
  font-size: clamp(17px, 1.06vw, 20px);
  font-weight: 900;
  color: var(--ops-text);
  line-height: 1.3;
}

html[data-theme="dark"] .sector-name { color: #f8fafc; }

.sector-count {
  font-size: clamp(26px, 1.84vw, 36px);
  font-weight: 900;
  color: var(--srca-blue);
  line-height: 1;
}

html[data-theme="dark"] .sector-count { color: #60a5fa; }

.sector-count-label {
  font-size: 14px;
  color: var(--ops-muted);
  font-weight: 800;
}

.sector-card-body {
  padding: clamp(8px, 0.9vh, 12px);
  background: var(--ops-panel);
  max-height: 180px;
  overflow-y: auto;
}

html[data-theme="dark"] .sector-card-body { background: #10223a; }

.unclassified-item {
  background: var(--danger-bg);
  color: #991b1b;
  border: 1px solid var(--danger-border);
  border-radius: 6px;
  padding: 5px 7px;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
  direction: ltr;
  text-align: left;
  word-break: break-word;
}

/* كروت الملخص */
.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 9vw, 150px), 1fr));
  gap: var(--fluid-gap);
  margin-bottom: clamp(12px, 1.4vh, 18px);
}

.summary-card {
  background: linear-gradient(180deg, var(--ops-panel), #f7f0e6);
  border: 1px solid var(--ops-line);
  border-top: 3px solid var(--srca-blue);
  border-radius: var(--fluid-radius);
  min-height: clamp(72px, 8vh, 100px);
  padding: clamp(8px, 0.9vh, 12px);
  text-align: center;
}

html[data-theme="dark"] .summary-card {
  background: linear-gradient(180deg, #152b45, #10223a);
  border-color: var(--ops-line);
  border-top-color: var(--srca-blue);
}

.summary-card.total-card {
  border-top-color: var(--srca-red);
  background: #fff1f2;
}

html[data-theme="dark"] .summary-card.total-card { background: #2a0a0a; }

.summary-card .label {
  font-size: clamp(14px, 0.92vw, 17px);
  color: var(--ops-muted);
  font-weight: 800;
  line-height: 1.2;
}

html[data-theme="dark"] .summary-card .label { color: #f8fafc; }

.summary-card .num,
.summary-card .count {
  font-size: clamp(24px, 1.72vw, 34px);
  font-weight: 900;
  color: var(--srca-blue);
  margin-top: 4px;
}

html[data-theme="dark"] .summary-card .num,
html[data-theme="dark"] .summary-card .count { color: #60a5fa; }

.summary-card.total-card .count { color: var(--srca-red); }

/* ═══════════════════════════════
   كروت أسباب السحب
═══════════════════════════════ */
.shab-reasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 9vw, 145px), 1fr));
  gap: var(--fluid-gap);
  margin-bottom: clamp(12px, 1.4vh, 18px);
}

.shab-reason-card {
  background: linear-gradient(180deg, var(--ops-panel), #f7f0e6);
  border: 1px solid var(--ops-line);
  border-radius: var(--fluid-radius);
  min-height: clamp(72px, 8vh, 96px);
  padding: clamp(8px, 0.9vh, 12px) clamp(6px, 0.6vw, 10px);
  text-align: center;
  transition: transform .18s, box-shadow .18s;
}

.shab-reason-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(60,44,21,.10);
}

html[data-theme="dark"] .shab-reason-card {
  background: linear-gradient(180deg, #152b45, #10223a);
  border-color: var(--ops-line);
}

.shab-reason-card .reason-label {
  font-size: clamp(13px, 0.9vw, 16px);
  color: var(--ops-text);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  line-height: 1.2;
}

html[data-theme="dark"] .shab-reason-card .reason-label { color: #f8fafc; }

.shab-reason-card .reason-count {
  font-size: clamp(24px, 1.61vw, 34px);
  font-weight: 900;
  color: var(--srca-blue);
  margin-top: 4px;
  display: block;
}

html[data-theme="dark"] .shab-reason-card .reason-count { color: #60a5fa; }

/* ═══════════════════════════════
   قسم رفع الملفات
═══════════════════════════════ */
.upload-section {
  border: 2px dashed var(--ops-line);
  padding: clamp(10px, 1.2vh, 14px) clamp(12px, 1.1vw, 16px);
  border-radius: var(--fluid-radius);
  min-height: clamp(78px, 9.5vh, 100px);
  text-align: center;
  background: var(--ops-panel);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  margin: clamp(10px, 1.2vh, 16px) auto;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(15,23,42,.05);
}

.upload-section:hover {
  border-color: var(--srca-orange);
  background: #fff7ed;
}

html[data-theme="dark"] .upload-section {
  background: var(--ops-panel);
  border-color: var(--ops-line);
}

.upload-section input[type="file"] { display: none; }

.ambulance-icon {
  width: clamp(24px, 2.5vh, 30px);
  height: clamp(24px, 2.5vh, 30px);
  fill: var(--srca-red);
  margin-bottom: 4px;
}

.upload-text {
  font-size: clamp(16px, 1.01vw, 19px);
  font-weight: 700;
  color: var(--ops-text);
  line-height: 1.3;
}

html[data-theme="dark"] .upload-text { color: #f8fafc; }

.upload-btn {
  background: var(--srca-navy);
  color: #fff;
  padding: 5px 14px;
  border-radius: 6px;
  font-weight: bold;
  display: inline-block;
  margin-top: 8px;
  font-size: 16px;
}

/* ═══════════════════════════════
   شريط الإجراءات والأزرار
═══════════════════════════════ */
.actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 12px;
}

.btn {
  padding: 8px 20px;
  font-size: 18px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  transition: background .18s;
}

.btn-success { background: #10b981; color: #fff; }
.btn-success:hover { background: #059669; }
.btn-disabled { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; }

.status-badge {
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 17px;
  font-weight: 700;
  background: #e0f2fe;
  color: #0369a1;
}

/* ═══════════════════════════════
   الجداول
═══════════════════════════════ */
.table-container {
  max-height: clamp(240px, 38vh, 420px);
  overflow: auto;
  border: 1px solid var(--ops-line);
  border-radius: var(--fluid-radius);
  margin-top: 10px;
  background: var(--ops-panel);
}

html[data-theme="dark"] .table-container {
  background: var(--ops-panel);
  border-color: var(--ops-line);
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  font-size: clamp(14px, 0.98vw, 18px);
  table-layout: fixed;
}

th {
  background: #f1e7d7;
  color: var(--ops-text);
  padding: clamp(8px, 1vh, 12px) clamp(8px, 0.8vw, 14px);
  position: sticky;
  top: 0;
  z-index: 10;
  font-weight: 900;
  white-space: normal;
  word-break: normal;
}

html[data-theme="dark"] th {
  background: #183553;
  color: #f8fafc;
}

td {
  padding: clamp(7px, 0.9vh, 10px) clamp(8px, 0.8vw, 12px);
  border-bottom: 1px solid var(--ops-line);
  color: var(--ops-text);
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}

html[data-theme="dark"] td {
  color: #f8fafc;
  border-color: var(--ops-line);
}

tr:nth-child(even) td { background: rgba(243,234,220,.35); }
tr:hover td { background: rgba(255,122,24,.07); }

html[data-theme="dark"] tr:nth-child(even) td { background: rgba(255,255,255,.03); }
html[data-theme="dark"] tr:hover td { background: rgba(255,255,255,.06); }

/* ═══════════════════════════════
   أدوات الفلترة
═══════════════════════════════ */
.filter-tools {
  background: var(--ops-panel);
  border: 1px solid var(--ops-line);
  border-radius: var(--fluid-radius);
  padding: clamp(10px, 1.2vh, 16px);
  margin-bottom: clamp(12px, 1.4vh, 18px);
  flex: 0 0 auto;
}

html[data-theme="dark"] .filter-tools {
  background: var(--ops-panel);
  border-color: var(--ops-line);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 16vw, 260px), 1fr));
  gap: 12px;
}

.filter-group { display: flex; flex-direction: column; gap: 5px; }

.filter-label {
  font-size: 16px;
  font-weight: 800;
  color: var(--ops-muted);
}

.select-box,
.search-box {
  width: 100%;
  padding: 8px 12px;
  font-size: 17px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  min-height: 42px;
  outline: none;
  background: var(--ops-panel);
  color: var(--ops-text);
  font-family: inherit;
}

.select-box:focus, .search-box:focus { border-color: var(--srca-orange); }

html[data-theme="dark"] .select-box,
html[data-theme="dark"] .search-box {
  background: #0f172a;
  color: #f8fafc;
  border-color: var(--ops-line);
}

/* ═══════════════════════════════
   شبكة الإحصاءات
═══════════════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--fluid-gap);
  margin-bottom: clamp(12px, 1.4vh, 18px);
  min-height: 0;
}

.section-title {
  color: var(--ops-text);
  font-size: clamp(19px, 1.26vw, 24px);
  font-weight: 900;
  margin: clamp(12px, 1.4vh, 18px) 0 clamp(8px, 1vh, 12px);
  position: relative;
  padding-right: 14px;
}

.section-title::before {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 4px;
  background: var(--srca-orange);
  border-radius: 2px;
}

html[data-theme="dark"] .section-title { color: #f8fafc; }

/* شارات */
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  background: #e0f2fe;
  color: #0369a1;
}

.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-count  { background: var(--srca-navy); color: #fff; font-size: 16px; font-weight: 900; padding: 4px 12px; border-radius: 5px; }
.badge-reason-count { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; font-size: 16px; font-weight: 900; padding: 4px 10px; border-radius: 5px; }

/* إشعار النسخ */
.notification {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  box-shadow: 0 10px 25px rgba(0,0,0,.2);
  font-size: 19px;
  display: none;
  z-index: 1000;
}

/* تنسيق صفحة القطاعات جانبي */
#shabView .stats-grid {
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--fluid-gap);
  align-items: start;
}

#shabView .table-container {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

#shabView .stats-grid .table-container {
  max-height: 300px;
  overflow-y: auto;
}

#shabView table {
  min-width: clamp(520px, 60vw, 780px);
  font-size: clamp(14px, 0.94vw, 18px);
}

#shabView th,
#shabView td {
  text-align: center;
  vertical-align: middle;
}

#shabView td:nth-child(2),
#shabView td:nth-child(6) { text-align: right; }

/* إشعار الرفع */
.srca-upload-toast {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15,23,42,.18);
  backdrop-filter: blur(3px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}

.srca-upload-toast.show { opacity: 1; }

.srca-upload-toast-card {
  min-width: min(400px, 92vw);
  max-width: min(580px, 92vw);
  border-radius: 20px;
  padding: 26px 28px;
  text-align: center;
  font-family: 'Sakkal Majalla', Tahoma, Arial, sans-serif;
  box-shadow: 0 22px 60px rgba(16,35,61,.20);
  transform: translateY(10px) scale(.98);
  transition: transform .22s ease;
}

.srca-upload-toast.show .srca-upload-toast-card { transform: translateY(0) scale(1); }

.srca-upload-toast-card.success {
  background: linear-gradient(180deg, #ffffff, #fff7ed);
  border: 1px solid rgba(249,115,22,.35);
  color: #0f172a;
}

.srca-upload-toast-card.warning {
  background: linear-gradient(180deg, #fff7ed, #ffffff);
  border: 1px solid rgba(234,88,12,.45);
  color: #7c2d12;
}

html[data-theme="dark"] .srca-upload-toast-card.success {
  background: linear-gradient(180deg, #102033, #07111f);
  border-color: rgba(56,189,248,.28);
  color: #f8fafc;
}

html[data-theme="dark"] .srca-upload-toast-card.warning {
  background: linear-gradient(180deg, #2a1607, #07111f);
  border-color: rgba(251,146,60,.38);
  color: #fff7ed;
}

.srca-upload-toast-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  box-shadow: 0 10px 24px rgba(34,197,94,.25);
}

.srca-upload-toast-card.warning .srca-upload-toast-icon {
  background: linear-gradient(135deg, #f97316, #ea580c);
  box-shadow: 0 10px 24px rgba(249,115,22,.25);
}

.srca-upload-toast-title { font-size: 26px; font-weight: 900; margin-bottom: 8px; line-height: 1.3; }
.srca-upload-toast-text  { font-size: 18px; font-weight: 800; line-height: 1.75; opacity: .92; word-break: break-word; }
.srca-upload-toast-codes { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(249,115,22,.09); font-size: 17px; }

/* ═══════════════════════════════
   انتقال الثيم
═══════════════════════════════ */
body.theme-transition,
body.theme-transition * {
  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

/* ═══════════════════════════════
   تجاوبية الشاشات
═══════════════════════════════ */
@media (max-width: 1280px) {
  .kpi-grid.final-kpis {
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 10px;
  }
  .kpi-card {
    width: 100%;
    height: clamp(140px, 12vw, 190px);
    min-width: 0;
    max-width: none;
    max-height: 200px;
  }
}

@media (max-width: 1100px) {
  .dashboard-grid.clean-panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .kpi-grid.final-kpis {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .kpi-card {
    height: 170px;
    min-height: 170px;
    max-height: none;
  }
  #shabView .stats-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  html, body, .app-shell {
    height: auto;
    max-height: none;
    overflow: auto;
  }

  .app-shell { flex-direction: column; }

  .ops-sidebar {
    width: 100%;
    flex-basis: auto;
    min-height: auto;
    position: relative;
    top: 0;
    height: auto;
    overflow: visible;
  }

  .sidebar-clock-brand { display: block; }

  .sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
  }

  .nav-btn {
    white-space: nowrap;
    min-width: max-content;
    padding: 10px 14px;
    font-size: 18px;
  }

  .main-area {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .ops-header {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 12px;
    position: relative;
  }

  .authority { justify-content: center; }

  .container.ops-content,
  .container {
    padding: 12px;
  }

  .page-view.active { overflow: visible; display: block; }

  .kpi-grid.final-kpis {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
  }

  .kpi-card {
    width: 100%;
    height: 160px;
    min-height: 160px;
    max-height: none;
    max-width: none;
    min-width: 0;
  }

  .cards-grid { grid-template-columns: 1fr; }
  .cards-sectors-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .summary,
  .shab-reasons-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

  .filter-grid { grid-template-columns: 1fr; }
  .actions-bar { flex-direction: column; align-items: stretch; }
  .stats-grid { grid-template-columns: 1fr; }

  .upload-section { max-width: 320px; }
  .table-container { max-height: 45vh; }
}

@media (max-width: 480px) {
  .kpi-grid.final-kpis,
  .summary,
  .shab-reasons-grid { grid-template-columns: 1fr; }

  .kpi-card { height: 150px; min-height: 150px; }
  .cards-sectors-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .sector-card-header {
    padding: 10px 8px;
    gap: 6px;
  }
  .sector-name { font-size: 15px; }
  .sector-count { font-size: 24px; }
}

@media (max-width: 360px) {
  .cards-sectors-grid { grid-template-columns: 1fr; }
}


/* ── إخفاء صندوقي الوقت والتاريخ من الهيدر في جميع الصفحات ── */


/* ── جداول إحصائيات قسم السحب (مرحلين + أسباب) ── */
.shab-stats-table {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}

.shab-stats-table table {
  min-width: 0 !important;
  width: 100%;
  table-layout: fixed;
}

.shab-stats-table th,
.shab-stats-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 8px;
}

/* عمود # */
.shab-stats-table th:first-child,
.shab-stats-table td:first-child {
  width: 36px;
  min-width: 36px;
  text-align: center;
}

/* عمود الاسم/السبب — يأخذ المساحة المتبقية */
.shab-stats-table th:nth-child(2),
.shab-stats-table td:nth-child(2) {
  width: auto;
}

/* عمود العدد */
.shab-stats-table th:last-child,
.shab-stats-table td:last-child {
  width: 80px;
  min-width: 80px;
  text-align: center;
}


/* === Final review fixes: compact quick panel + clean shab stats === */
.dashboard-grid.clean-panels {
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr) !important;
}
.shab-stats-table table { table-layout: fixed !important; border-collapse: separate; border-spacing: 0; }
.shab-stats-table th, .shab-stats-table td { padding: 8px 10px !important; vertical-align: middle; }
.shab-stats-table th:nth-child(2), .shab-stats-table td:nth-child(2) {
  width: calc(100% - 132px) !important;
  text-align: right !important;
  padding-inline: 14px !important;
}
.shab-stats-table th:last-child, .shab-stats-table td:last-child {
  width: 84px !important; min-width:84px !important; text-align:center !important;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
  .dashboard-grid.clean-panels { grid-template-columns: 1fr !important; }
  }

/* === Final user fixes: withdrawn stats compact, dark-mode white numbers, clearer badges === */
html[data-theme="dark"] .kpi-num,
html[data-theme="dark"] .mini-box .value,
html[data-theme="dark"] .reason-count,
html[data-theme="dark"] .stat-number,
html[data-theme="dark"] .number,
html[data-theme="dark"] .count,
html[data-theme="dark"] .badge-count,
html[data-theme="dark"] .badge-reason-count,
html[data-theme="dark"] [id^="kpi"],
html[data-theme="dark"] [id*="Count"],
html[data-theme="dark"] [id*="count"],
html[data-theme="dark"] td span.badge {
  color: #ffffff !important;
}
html[data-theme="dark"] .badge-reason-count {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.22) !important;
}
html[data-theme="dark"] .badge-danger {
  color: #ffffff !important;
  background: rgba(239,68,68,.28) !important;
  border-color: rgba(248,113,113,.35) !important;
}
#shabView .stats-grid {
  grid-template-columns: repeat(2, minmax(360px, 520px)) !important;
  justify-content: center !important;
  align-items: start !important;
  gap: 16px !important;
}
#shabView .stats-grid .table-container {
  width: 100% !important;
  max-width: 520px !important;
  margin-inline: auto !important;
}
#shabView .shab-stats-table table {
  table-layout: auto !important;
  width: 100% !important;
}
#shabView .shab-stats-table th,
#shabView .shab-stats-table td {
  padding: 7px 8px !important;
  white-space: nowrap !important;
}
#shabView .shab-stats-table th:first-child,
#shabView .shab-stats-table td:first-child {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  text-align: center !important;
}
#shabView .shab-stats-table th:nth-child(2),
#shabView .shab-stats-table td:nth-child(2) {
  width: auto !important;
  max-width: 300px !important;
  text-align: right !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-inline-start: 6px !important;
  padding-inline-end: 6px !important;
}
#shabView .shab-stats-table th:last-child,
#shabView .shab-stats-table td:last-child {
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  text-align: center !important;
  padding-inline: 4px !important;
}
#shabView .shab-stats-table .badge,
#shabView .shab-stats-table .badge-count,
#shabView .shab-stats-table .badge-reason-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 64px !important;
  padding: 4px 8px !important;
  font-size: 14px !important;
}
@media (max-width: 1100px) {
  #shabView .stats-grid {
    grid-template-columns: 1fr !important;
  }
  #shabView .stats-grid .table-container {
    max-width: 100% !important;
  }
}


/* ===== Final operational fixes: dark white text, withdrawn cards, clock clarity ===== */
html[data-theme="dark"], html[data-theme="dark"] body, html[data-theme="dark"] body * { color: #ffffff !important; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] option { color:#ffffff !important; background-color:#10223a !important; }
html[data-theme="dark"] .badge, html[data-theme="dark"] .badge-count, html[data-theme="dark"] .badge-danger, html[data-theme="dark"] .badge-reason-count,
html[data-theme="dark"] .sector-count, html[data-theme="dark"] .summary-card .num, html[data-theme="dark"] .summary-card .count,
html[data-theme="dark"] .kpi-num, html[data-theme="dark"] .kpi-change, html[data-theme="dark"] .reason-count,
html[data-theme="dark"] td, html[data-theme="dark"] th { color:#ffffff !important; }

.sidebar-clock-brand .mosque-clock-widget { text-align:center; }
.mosque-digital { font-weight:900 !important; letter-spacing:1px; color:var(--srca-blue) !important; }
html[data-theme="dark"] .mosque-digital, html[data-theme="dark"] .mosque-ampm, html[data-theme="dark"] .mosque-city,
html[data-theme="dark"] .mosque-zone, html[data-theme="dark"] .mosque-date-row, html[data-theme="dark"] .mosque-hijri,
html[data-theme="dark"] .prayer-title, html[data-theme="dark"] .prayer-row, html[data-theme="dark"] .prayer-row * { color:#ffffff !important; }

#dynamicViewShab .stats-grid { align-items:stretch; }
#dynamicViewShab .shab-stats-table { max-height:none !important; overflow:visible !important; padding:8px !important; }
#dynamicViewShab .shab-stats-table table, #dynamicViewShab .shab-stats-table thead, #dynamicViewShab .shab-stats-table tbody,
#dynamicViewShab .shab-stats-table tr, #dynamicViewShab .shab-stats-table td { display:block; width:100% !important; }
#dynamicViewShab .shab-stats-table thead { display:none !important; }
#dynamicViewShab .shab-stats-table tbody { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; }
#dynamicViewShab .shab-stats-table tr { background:linear-gradient(180deg, var(--ops-panel), #f7f0e6); border:1px solid var(--ops-line); border-radius:14px; padding:10px 12px; min-height:78px; box-shadow:0 5px 14px rgba(15,23,42,.06); }
html[data-theme="dark"] #dynamicViewShab .shab-stats-table tr { background:linear-gradient(180deg,#152b45,#10223a) !important; border-color:rgba(255,255,255,.16) !important; }
#dynamicViewShab .shab-stats-table td:first-child { display:none !important; }
#dynamicViewShab .shab-stats-table td { padding:0 !important; border:0 !important; text-align:center !important; }
#dynamicViewShab .shab-stats-table td:nth-child(2) { min-height:28px; display:flex; align-items:center; justify-content:center; font-weight:900 !important; font-size: clamp(16px, 1.03vw, 19px) !important; line-height:1.25; color:var(--ops-text) !important; margin-bottom:8px; word-break:break-word; }
#dynamicViewShab .shab-stats-table td:nth-child(3) { display:flex; align-items:center; justify-content:center; }
#dynamicViewShab .shab-stats-table .badge, #dynamicViewShab .shab-stats-table .badge-count, #dynamicViewShab .shab-stats-table .badge-danger, #dynamicViewShab .shab-stats-table .badge-reason-count { display:inline-flex !important; align-items:center; justify-content:center; min-width:74px; height:30px; border-radius:999px; font-weight:900 !important; white-space:nowrap; text-align:center; }
html[data-theme="dark"] #dynamicViewShab .shab-stats-table td:nth-child(2), html[data-theme="dark"] #dynamicViewShab .shab-stats-table .badge, html[data-theme="dark"] #dynamicViewShab .shab-stats-table .badge-count, html[data-theme="dark"] #dynamicViewShab .shab-stats-table .badge-danger, html[data-theme="dark"] #dynamicViewShab .shab-stats-table .badge-reason-count { color:#ffffff !important; }

.kpi-card, .summary-card, .sector-card, .dash-card, .shab-reason-card, .kpi-card *, .summary-card *, .sector-card *, .dash-card *, .shab-reason-card * { text-align:center !important; }
td, th { vertical-align:middle !important; }


/* === Final polish: dark mode white text + withdrawn summary layout === */
html[data-theme="dark"] body,
html[data-theme="dark"] body *:not(.badge):not(.status-badge):not(.sector-icon):not(.quick-action-icon):not(.emoji) {
  color: #ffffff !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] option {
  color: #ffffff !important;
  background-color: rgba(8, 27, 48, 0.96) !important;
}

html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .sector-card,
html[data-theme="dark"] .ops-panel,
html[data-theme="dark"] .table-container,
html[data-theme="dark"] .withdraw-summary-card {
  color: #ffffff !important;
}

.withdraw-summary-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.withdraw-summary-card {
  border: 1px solid var(--ops-line);
  border-radius: 14px;
  background: var(--ops-panel);
  padding: 12px;
  overflow: visible !important;
}

.withdraw-summary-card .section-title {
  margin-bottom: 10px;
  text-align: center;
}

.withdraw-summary-list {
  display: grid;
  gap: 8px;
}

.withdraw-summary-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(37, 99, 235, 0.20);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.035);
}

html[data-theme="dark"] .withdraw-summary-item {
  background: rgba(255,255,255,0.06);
  border-color: rgba(147, 197, 253, 0.24);
}

.withdraw-summary-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  text-align: right;
  line-height: 1.3;
}


@media (max-width: 900px) {
  .withdraw-summary-wrap { grid-template-columns: 1fr; }
}


/* === User final fixes: remove operational tagline, centered subpage titles, dark-mode readability, withdrawn compact cards === */
.filter-chip:empty{display:none!important;}
.page-view > h1,
.container.ops-content > h1,
.main-area .container > h1{
  width:100% !important;
  text-align:center !important;
  justify-content:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.page-view > .divider{margin-left:auto!important;margin-right:auto!important;}

/* Dark mode: ensure no white panels remain behind white text */
html[data-theme="dark"] .ops-content,
html[data-theme="dark"] .page-view,
html[data-theme="dark"] .container,
html[data-theme="dark"] .dashboard-grid,
html[data-theme="dark"] .clean-panels,
html[data-theme="dark"] .upload-section,
html[data-theme="dark"] .table-container,
html[data-theme="dark"] .actions-bar,
html[data-theme="dark"] .filter-tools,
html[data-theme="dark"] .dynamic-view,
html[data-theme="dark"] .withdraw-summary-card,
html[data-theme="dark"] .withdraw-summary-list,
html[data-theme="dark"] .shab-reasons-grid,
html[data-theme="dark"] .summary,
html[data-theme="dark"] .cards-sectors-grid,
html[data-theme="dark"] .sector-card,
html[data-theme="dark"] .dash-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .shab-reason-card,
html[data-theme="dark"] .ops-panel,
html[data-theme="dark"] .kpi-card{
  background:#071a2e !important;
  color:#ffffff !important;
  border-color:rgba(56,189,248,.34) !important;
}
html[data-theme="dark"] .upload-section,
html[data-theme="dark"] .table-container,
html[data-theme="dark"] .withdraw-summary-card,
html[data-theme="dark"] .ops-panel,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .sector-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .shab-reason-card{
  box-shadow:0 12px 35px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] table,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] td{
  background:#071a2e !important;
  color:#ffffff !important;
}
html[data-theme="dark"] th{
  background:#0b83d8 !important;
  color:#ffffff !important;
}
html[data-theme="dark"] .sector-card-body,
html[data-theme="dark"] .dash-card-body,
html[data-theme="dark"] .reason-card-body,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .srca-upload-toast-card{
  background:#0b223a !important;
  color:#ffffff !important;
}
html[data-theme="dark"] *:not(.status-dot):not(.prayer-ico):not(.kpi-icon):not(.sector-icon):not(.ambulance-icon):not(svg):not(path){
  color:#ffffff !important;
}
html[data-theme="dark"] .badge,
html[data-theme="dark"] .status-badge,
html[data-theme="dark"] .badge-danger,
html[data-theme="dark"] .badge-count,
html[data-theme="dark"] .badge-reason-count{
  color:#ffffff !important;
}

/* Withdrawn summary: name and count inside same card, close and centered, no scroll */
.withdraw-summary-wrap{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  align-items:start !important;
}
.withdraw-summary-card{
  overflow:visible !important;
  max-height:none !important;
  height:auto !important;
  padding:14px !important;
}
.withdraw-summary-list{
  overflow:visible !important;
  max-height:none !important;
  height:auto !important;
  display:grid !important;
  gap:8px !important;
}
.withdraw-summary-item{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  min-height:42px !important;
  padding:8px 10px !important;
  border-radius:12px !important;
  background:rgba(14,118,190,.10) !important;
  border:1px solid rgba(14,118,190,.20) !important;
  overflow:hidden !important;
}
.withdraw-summary-name{
  text-align:right !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-weight:800 !important;
  line-height:1.4 !important;
}

html[data-theme="dark"] .withdraw-summary-item{
  background:#0d2b49 !important;
  border-color:rgba(56,189,248,.38) !important;
}
@media(max-width:900px){.withdraw-summary-wrap{grid-template-columns:1fr!important;}}

/* === Final requested alignment + dark backgrounds fix === */
/* توسيط النصوص والأرقام في جميع البطاقات والجداول والصفحات */
.kpi-card,
.kpi-card *,
.summary-card,
.summary-card *,
.sector-card,
.sector-card *,
.dash-card,
.dash-card *,
.shab-reason-card,
.shab-reason-card *,
.withdraw-summary-card,
.withdraw-summary-card *,
.table-container,
.table-container *,
th,
td,
.section-title,
.panel-head,
.panel-head *,
.page-title,
.page-title *,
.upload-section,
.upload-section *,
.filter-tools,
.filter-tools * {
  text-align: center !important;
}

.kpi-card,
.summary-card,
.sector-card,
.dash-card,
.shab-reason-card,
.withdraw-summary-card,
.withdraw-summary-item,
th,
td {
  vertical-align: middle !important;
  align-items: center !important;
  justify-content: center !important;
}

/* كرت المرحل/سبب السحب: الاسم والعدد قريبين داخل نفس الكرت وبدون سكرول */
.withdraw-summary-wrap,
#dynamicViewShab .withdraw-summary-wrap,
#shabView .withdraw-summary-wrap {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}

.withdraw-summary-card,
#dynamicViewShab .withdraw-summary-card,
#shabView .withdraw-summary-card {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

.withdraw-summary-list,
#dynamicViewShab .withdraw-summary-list,
#shabView .withdraw-summary-list {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
  display: grid !important;
  gap: 8px !important;
}

.withdraw-summary-item,
#dynamicViewShab .withdraw-summary-item,
#shabView .withdraw-summary-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.withdraw-summary-name,
#dynamicViewShab .withdraw-summary-name,
#shabView .withdraw-summary-name {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 56px) !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
}


/* إصلاح خلفية عمود الفرقة في الوضع الليلي حتى لا تكون بيضاء */
html[data-theme="dark"] .badge,
html[data-theme="dark"] td .badge,
html[data-theme="dark"] td:nth-child(4) span,
html[data-theme="dark"] .team-code,
html[data-theme="dark"] .team-badge {
  background: #142b52 !important;
  color: #ffffff !important;
  border: 1px solid rgba(96, 165, 250, .55) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .badge-danger {
  background: #7f1d1d !important;
  color: #ffffff !important;
  border-color: rgba(248,113,113,.55) !important;
}

html[data-theme="dark"] .badge-count,
html[data-theme="dark"] .badge-reason-count,

/* الوضع الليلي: إزالة أي خلفيات بيضاء أو فاتحة من الكروت والجداول */
html[data-theme="dark"] .ops-panel,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .sector-card,
html[data-theme="dark"] .dash-card,
html[data-theme="dark"] .shab-reason-card,
html[data-theme="dark"] .withdraw-summary-card,
html[data-theme="dark"] .withdraw-summary-item,
html[data-theme="dark"] .table-container,
html[data-theme="dark"] table,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] td {
  background: #071a2e !important;
  color: #ffffff !important;
  border-color: rgba(56, 189, 248, .30) !important;
}

html[data-theme="dark"] th {
  background: #0b4f86 !important;
  color: #ffffff !important;
  border-color: rgba(56, 189, 248, .38) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] option {
  background: #10223a !important;
  color: #ffffff !important;
  border-color: rgba(56, 189, 248, .38) !important;
  text-align: center !important;
}

html[data-theme="dark"] *,
html[data-theme="dark"] .kpi-num,
html[data-theme="dark"] .kpi-label,
html[data-theme="dark"] .sector-count,
html[data-theme="dark"] .sector-name,
html[data-theme="dark"] .summary-card .label,
html[data-theme="dark"] .summary-card .num,
html[data-theme="dark"] .summary-card .count,
html[data-theme="dark"] .reason-label,
html[data-theme="dark"] .reason-count,
html[data-theme="dark"] td,
html[data-theme="dark"] th {
  color: #ffffff !important;
}

@media (max-width: 900px) {
  .withdraw-summary-wrap,
  #dynamicViewShab .withdraw-summary-wrap,
  #shabView .withdraw-summary-wrap {
    grid-template-columns: 1fr !important;
  }
}


/* === Final requested cleanup: quick panel labels removed + withdrawn rows aligned === */
.withdraw-summary-wrap {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.withdraw-summary-card {
  overflow: visible !important;
}

.withdraw-summary-list {
  display: grid !important;
  gap: 8px !important;
  overflow: visible !important;
}

.withdraw-summary-count {
  min-width: 42px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 900;
  font-size: 18px;
  background: #d59b49;
  color: #ffffff;
  line-height: 1;
  flex: 0 0 auto;
  margin: 0;
}
html[data-theme="dark"] .withdraw-summary-count {
  background: rgba(255,122,24,0.35);
  color: #ffffff;
}

.withdraw-summary-item {
  direction: rtl !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  width: 100% !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  padding: 9px 12px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.withdraw-summary-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: right !important;
  justify-content: flex-start !important;
  align-items: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}


html[data-theme="dark"] .withdraw-summary-item {
  background: rgba(15, 35, 68, .92) !important;
  border-color: rgba(147, 197, 253, .28) !important;
}

html[data-theme="dark"] .withdraw-summary-name {
  color: #ffffff !important;
}

@media (max-width: 900px) {
  .withdraw-summary-wrap {
    grid-template-columns: 1fr !important;
  }
  .withdraw-summary-count {
    flex-basis: 66px !important;
    width: 66px !important;
    min-width: 66px !important;
  }
}

/* === User requested final alignment for withdrawn summaries ===
   إجمالي المرحلين / إجمالي أسباب السحب:
   الاسم أو السبب يمين، العدد يسار، مع محاذاة ثابتة بدون سكرول. */
#shabView .withdraw-summary-item,
#dynamicViewShab .withdraw-summary-item,
.withdraw-summary-item{
  display:flex !important;
  flex-direction:row !important;
  direction:rtl !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  width:100% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
#shabView .withdraw-summary-name,
#dynamicViewShab .withdraw-summary-name,
.withdraw-summary-name{
  flex:1 1 auto !important;
  min-width:0 !important;
  text-align:right !important;
  direction:rtl !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  margin:0 !important;
}

/* دعم أي عرض قديم داخل صفحة البلاغات المسحوبة يستخدم جدول بدل كروت */
#shabView .shab-stats-table,
#dynamicViewShab .shab-stats-table{
  overflow:visible !important;
  max-height:none !important;
}
#shabView .shab-stats-table tr,
#dynamicViewShab .shab-stats-table tr{
  display:flex !important;
  flex-direction:row !important;
  direction:rtl !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  width:100% !important;
  box-sizing:border-box !important;
}
#shabView .shab-stats-table td:first-child,
#dynamicViewShab .shab-stats-table td:first-child,
#shabView .shab-stats-table th:first-child,
#dynamicViewShab .shab-stats-table th:first-child{
  display:none !important;
}
#shabView .shab-stats-table td:nth-child(2),
#dynamicViewShab .shab-stats-table td:nth-child(2){
  flex:1 1 auto !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  text-align:right !important;
  direction:rtl !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  margin:0 !important;
}
#shabView .shab-stats-table td:nth-child(3),
#dynamicViewShab .shab-stats-table td:nth-child(3),
#shabView .shab-stats-table td:last-child,
#dynamicViewShab .shab-stats-table td:last-child{
  flex:0 0 70px !important;
  min-width:70px !important;
  max-width:70px !important;
  width:70px !important;
  text-align:center !important;
  direction:ltr !important;
  justify-content:center !important;
  margin:0 !important;
}
#shabView .shab-stats-table .badge,
#dynamicViewShab .shab-stats-table .badge,
#shabView .shab-stats-table .badge-count,
#dynamicViewShab .shab-stats-table .badge-count,
#shabView .shab-stats-table .badge-reason-count,
#dynamicViewShab .shab-stats-table .badge-reason-count{
  min-width:58px !important;
  max-width:58px !important;
  margin:0 !important;
}


/* === Final UX polish: KPI container, centered sidebar, unsupported files, responsive clarity === */
.kpi-grid.final-kpis{
  position:relative !important;
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.86)) !important;
  border:1px solid rgba(15,76,129,.14) !important;
  border-radius:22px !important;
  padding:clamp(12px,1.4vw,20px) !important;
  box-shadow:0 14px 38px rgba(15,23,42,.08) !important;
  overflow:visible !important;
}
html[data-theme="dark"] .kpi-grid.final-kpis{
  background:linear-gradient(135deg, #071a2e, #0b223a) !important;
  border-color:rgba(56,189,248,.30) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.35) !important;
}
.ops-sidebar .sidebar-nav,
.sidebar-nav{
  align-items:stretch !important;
}
.ops-sidebar .nav-btn,
.sidebar-nav .nav-btn{
  text-align:center !important;
  justify-content:center !important;
  align-items:center !important;
  gap:8px !important;
  white-space:nowrap !important;
}
.ops-sidebar .nav-btn .ico,
.sidebar-nav .nav-btn .ico{
  margin:0 !important;
  flex:0 0 auto !important;
}
/* Keep withdrawn summary rows neatly right/left aligned */
.withdraw-summary-item,
#dynamicViewShab .withdraw-summary-item,
#shabView .withdraw-summary-item{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 64px !important;
  align-items:center !important;
  justify-content:stretch !important;
  column-gap:18px !important;
}
.withdraw-summary-name,
#dynamicViewShab .withdraw-summary-name,
#shabView .withdraw-summary-name{
  text-align:right !important;
  justify-self:stretch !important;
  max-width:none !important;
  min-width:0 !important;
}
/* Unsupported-file / centered toast readability */
.srca-upload-toast-card,
.srca-toast,
.upload-toast{
  text-align:center !important;
}
@media(max-width:900px){
  .kpi-grid.final-kpis{padding:12px!important;border-radius:18px!important;}
  .withdraw-summary-item{grid-template-columns:minmax(0,1fr) 54px!important;column-gap:12px!important;}
}

/* ── زر الثيم داخل sidebar-foot ── */
.sidebar-theme-btn {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 7px 0;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
  transition: background 0.18s;
  letter-spacing: 2px;
}
.sidebar-theme-btn:hover {
  background: rgba(255,255,255,0.20);
}
html[data-theme="light"] .sidebar-theme-btn {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
}


/* ══════════════════════════════════════════════
   كلاسات الألوان المنقولة من inline styles
   ══════════════════════════════════════════════ */

/* كروت KPI */
.kpi-card.kpi-red   { --accent:#e30613; --spark:linear-gradient(90deg,transparent,#e30613,transparent); }
.kpi-card.kpi-blue  { --accent:#0f4c81; --spark:linear-gradient(90deg,transparent,#0f4c81,transparent); }
.kpi-card.kpi-green { --accent:#00843d; --spark:linear-gradient(90deg,transparent,#00843d,transparent); }
.kpi-card.kpi-orange{ --accent:#ff6b00; --spark:linear-gradient(90deg,transparent,#ff6b00,transparent); }

/* كرت إجمالي السحب */
.total-card-centered { max-width: 320px; margin: 0 auto; }

/* كروت أسباب السحب */
.shab-reason-card.reason-need       { border-top-color: #0284c7; }
.shab-reason-card.reason-geo        { border-top-color: #f59e0b; }
.shab-reason-card.reason-break      { border-top-color: #ef4444; }
.shab-reason-card.reason-wrong      { border-top-color: #ec4899; }
.shab-reason-card.reason-swap       { border-top-color: #10b981; }
.shab-reason-card.reason-notfound   { border-top-color: #8b5cf6; }
.shab-reason-card.reason-usercancel { border-top-color: #06b6d4; }
.shab-reason-card.reason-late       { border-top-color: transparent; }
.shab-reason-card.reason-traffic    { border-top-color: #a855f7; }
.shab-reason-card.reason-other      { border-top-color: #64748b; }

/* خلايا جدول السحب */
.th-num  { width: 60px; text-align: center; }
.td-num  { text-align: center; font-weight: bold; color: #64748b; }
.td-bold { font-weight: 700; }
.td-report { font-weight: bold; color: #0f172a; }
.td-reason { color: #475569; font-size: 17px; font-weight: 500; }

html[data-theme="dark"] .td-report { color: #f1f5f9; }
html[data-theme="dark"] .td-num    { color: #94a3b8; }
html[data-theme="dark"] .td-reason { color: #cbd5e1; }

/* ── Drag & Drop ── */
.upload-section {
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.upload-section.drag-over {
    border-color: var(--srca-red) !important;
    background: rgba(227,6,19,0.07) !important;
    transform: scale(1.012);
}
html[data-theme="dark"] .upload-section.drag-over {
    background: rgba(227,6,19,0.12) !important;
}
.upload-section.drag-over .upload-text::before {
    content: "↓ أفلت الملف هنا";
    display: block;
    font-weight: 700;
    color: var(--srca-red);
    margin-bottom: 4px;
}


/* ══════════════════════════════════════════════
   مدة البقاء في المستشفى
   ══════════════════════════════════════════════ */

/* KPI teal */
.kpi-card.kpi-teal { --accent:#0891b2; --spark:linear-gradient(90deg,transparent,#0891b2,transparent); }
.kpi-change.teal   { color: #0891b2; }
html[data-theme="dark"] .kpi-change.teal { color: #67e8f9; }

/* بادج مدة البقاء */
.hospital-duration-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 16px;
    background: rgba(8,145,178,0.12);
    color: #0e7490;
    border: 1px solid rgba(8,145,178,0.25);
    white-space: nowrap;
}
html[data-theme="dark"] .hospital-duration-badge {
    background: rgba(103,232,249,0.12);
    color: #67e8f9;
    border-color: rgba(103,232,249,0.25);
}

.hospital-duration-red {
    background: rgba(220,38,38,0.12) !important;
    color: #dc2626 !important;
    border-color: rgba(220,38,38,0.30) !important;
    font-weight: 900;
}
html[data-theme="dark"] .hospital-duration-red {
    background: rgba(248,113,113,0.18) !important;
    color: #f87171 !important;
    border-color: rgba(248,113,113,0.30) !important;
}
.th-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background 0.15s;
}
.th-sortable:hover {
    background: rgba(227,6,19,0.08);
}
html[data-theme="dark"] .th-sortable:hover {
    background: rgba(255,255,255,0.08);
}

/* ── زر الرفع الشامل في الداشبورد ── */
.dashboard-upload-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(12px, 1.5vh, 20px) 0;
    margin-bottom: clamp(12px, 1.5vh, 20px);
}
.unified-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: var(--srca-red);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: clamp(18px, 1.26vw, 22px);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
    box-shadow: 0 4px 16px rgba(227,6,19,0.25);
    font-family: inherit;
}
.unified-upload-btn:hover {
    background: var(--srca-red-2);
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(227,6,19,0.35);
}
.unified-upload-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(227,6,19,0.20);
}
.unified-upload-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.dashboard-upload-section.drag-over .unified-upload-btn {
    background: var(--srca-red-2);
    transform: scale(1.03);
}
html[data-theme="dark"] .unified-upload-btn {
    box-shadow: 0 4px 18px rgba(227,6,19,0.35);
}

/* قسم مدة البقاء - الجدول يسكرول داخلياً */
#hospitalView {
  overflow: hidden;
}
#dynamicViewHospital {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
#dynamicViewHospital .table-container {
  overflow-x: auto;
}

/* أيقونات SVG في كروت الداشبورد */
.kpi-svg-icon {
    width: 52px;
    height: 52px;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
@media (max-width: 1280px) {
    .kpi-svg-icon { width: 42px; height: 42px; }
}
@media (max-width: 900px) {
    .kpi-svg-icon { width: 36px; height: 36px; }
}

/* ══════════════════════════════════════
   @media print — طباعة نظيفة
   ══════════════════════════════════════ */
@media print {
    /* إخفاء عناصر التنقل والتحكم */
    .ops-sidebar,
    .unified-upload-btn,
    .filter-tools,
    .actions-bar,
    .upload-section,
.sidebar-theme-btn,
    button:not(.no-print),
    input[type="file"],
    select,
    #globalNotification,
    .srca-upload-toast {
        display: none !important;
    }

    /* المنطقة الرئيسية تأخذ العرض الكامل */
    .app-shell {
        display: block !important;
    }
    .main-area {
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;
    }
    .container.ops-content,
    .page-view.active {
        overflow: visible !important;
        height: auto !important;
    }

    /* الجداول تُطبع بشكل نظيف */
    table {
        border-collapse: collapse;
        width: 100%;
        font-size: 11px;
    }
    th, td {
        border: 1px solid #ccc;
        padding: 4px 6px;
    }
    thead { background: #f0f0f0 !important; color: #000 !important; }

    /* الكروت */
    .kpi-grid.final-kpis {
        grid-template-columns: repeat(5, 1fr) !important;
        break-inside: avoid;
    }
    .kpi-card {
        border: 1px solid #ccc !important;
        background: #fff !important;
        color: #000 !important;
        height: auto !important;
        padding: 8px !important;
    }
    .kpi-num { color: #000 !important; }

    /* إخفاء الخلفيات الداكنة */
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    .ops-header {
        border-bottom: 2px solid #000 !important;
        padding: 8px !important;
    }
}



/* === v704: restore sectors results layout === */
#sectorsView .cards-sectors-grid,
.cards-sectors-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: var(--fluid-gap) !important;
}
#sectorsView .sector-card-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
#sectorsView .sector-name {
  text-align: right !important;
}
#sectorsView .sector-count,
#sectorsView .sector-count-label {
  text-align: center !important;
}
@media (max-width: 820px) {
  #sectorsView .cards-sectors-grid,
  .cards-sectors-grid {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
  }
}
@media (max-width: 480px) {
  #sectorsView .cards-sectors-grid,
  .cards-sectors-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 360px) {
  #sectorsView .cards-sectors-grid,
  .cards-sectors-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =====================================================================
   v705 hotfix — withdrawn reports visibility and scrolling restoration
   الهدف: إظهار إجمالي المرحلين وأسباب السحب وإتاحة النزول لها بدون التأثير
   على تنسيق بلاغات القطاعات الذي تم إصلاحه في v704.
===================================================================== */
#shabView.page-view.active {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 36px !important;
}

#shabView #totalSectionShab,
#shabView #reasonsGridSectionShab,
#shabView #filterToolsSectionShab,
#shabView #dynamicViewShab {
  flex: 0 0 auto !important;
}

#shabView #dynamicViewShab {
  width: 100% !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  margin-top: 14px !important;
  padding-bottom: 28px !important;
}

#shabView .withdraw-summary-wrap,
#dynamicViewShab .withdraw-summary-wrap {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  overflow: visible !important;
}

#shabView .withdraw-summary-card,
#dynamicViewShab .withdraw-summary-card,
#shabView .withdraw-summary-list,
#dynamicViewShab .withdraw-summary-list {
  display: grid !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

#shabView .withdraw-summary-item,
#dynamicViewShab .withdraw-summary-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 54px !important;
  align-items: center !important;
  justify-content: stretch !important;
  column-gap: 12px !important;
  min-height: 42px !important;
}

#shabView .withdraw-summary-name,
#dynamicViewShab .withdraw-summary-name {
  text-align: right !important;
  justify-content: flex-start !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#shabView .withdraw-summary-count,
#dynamicViewShab .withdraw-summary-count {
  justify-self: end !important;
  min-width: 44px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#shabView .table-container {
  overflow: auto !important;
  max-height: none !important;
}

@media (max-width: 900px) {
  #shabView.page-view.active {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 42px !important;
  }

  #shabView .withdraw-summary-wrap,
  #dynamicViewShab .withdraw-summary-wrap {
    grid-template-columns: 1fr !important;
  }
}


/* =====================================================================
   v706 final responsive cleanup — no PWA splash + no horizontal scroll
   إصلاح نهائي: منع تمدد العناصر خارج الشاشة وإلغاء تمرير الأزرار الأفقي
===================================================================== */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body,
.app-shell,
.main-area,
.ops-content,
.container,
.page-view,
.ops-sidebar,
.sidebar-clock-brand,
.sidebar-nav,
.kpi-grid,
.stats-grid,
.cards-sectors-grid,
.withdraw-summary-wrap {
  max-width: 100% !important;
  min-width: 0 !important;
}

img,
svg,
canvas,
video {
  max-width: 100% !important;
  height: auto;
}

.ops-sidebar {
  overflow-x: hidden !important;
}

.sidebar-nav {
  width: 100% !important;
  overflow-x: hidden !important;
}

.ops-sidebar .nav-btn,
.sidebar-nav .nav-btn,
.nav-btn {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.25 !important;
}

.table-container,
.data-table-wrap,
.report-table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
}

@media (max-width: 820px) {
  .app-shell {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .ops-sidebar {
    width: 100% !important;
    max-width: 100vw !important;
    padding-inline: 10px !important;
  }

  .sidebar-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .sidebar-nav .nav-btn,
  .ops-sidebar .nav-btn,
  .nav-btn {
    min-width: 0 !important;
    width: 100% !important;
    padding: 10px 8px !important;
    font-size: clamp(14px, 3.6vw, 17px) !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .nav-btn .ico {
    width: auto !important;
    font-size: clamp(16px, 4.5vw, 20px) !important;
  }

  .main-area {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .container.ops-content,
  .container {
    width: 100% !important;
    padding-inline: 10px !important;
    overflow-x: hidden !important;
  }

  .mosque-clock-widget,
  .mosque-digital,
  .prayer-row {
    max-width: 100% !important;
  }
}

@media (max-width: 420px) {
  .sidebar-nav {
    grid-template-columns: 1fr !important;
  }
}