/* ═══════════════════════════════════════════════════════════════════════
   ARTTOP — Premium Ministerial Theme (v0.37.9.298)
   ───────────────────────────────────────────────────────────────────────
   Navy + Gold ministerial color palette.
   Loaded AFTER styles.css to override the base palette.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Navy ministerial primary */
  --primary:        #0c4a6e;
  --primary-dark:   #082f49;
  --primary-light:  #075985;
  /* Royal gold accent */
  --accent:         #b45309;
  --accent-dark:    #92400e;
  --accent-soft:    #fbbf24;
  /* Refined surface tokens */
  --bg:             #f5f7fa;
  --bg-card:        #ffffff;
  --text:           #0f172a;
  --text-muted:     #64748b;
  --border:         #e2e8f0;
  --border-gold:    #f59e0b;
  /* Premium gradients (used by gradient-bg rule) */
  --sidebar-bg:     linear-gradient(180deg, #0c4a6e 0%, #082f49 60%, #03192a 100%);
  --hero-grad:      linear-gradient(135deg, #0c4a6e 0%, #075985 50%, #0c4a6e 100%);
  --gold-stripe:    linear-gradient(90deg, transparent, #b45309 20%, #fbbf24 50%, #b45309 80%, transparent);
  /* Premium shadows */
  --shadow-sm:      0 1px 3px rgba(12,74,110,0.06);
  --shadow:         0 4px 16px rgba(12,74,110,0.10);
  --shadow-lg:      0 16px 40px rgba(12,74,110,0.14);
  --shadow-gold:    0 4px 14px rgba(180,83,9,0.20);
  /* Radius */
  --radius:         10px;
  --radius-pro:     12px;
}

/* Premium fonts */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800;900&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

body, .modal, .sidebar, .screen-content, .ms-screen {
  font-family: 'Tajawal','IBM Plex Sans Arabic','Segoe UI',Arial,sans-serif;
}

/* Monospace for numeric data */
.gold-num, .gold-mono, [dir="ltr"].numeric, .qr-code, .gps,
td.num, th.num, .docno, .code-pill, .ms-num {
  font-family: 'JetBrains Mono','Roboto Mono',monospace;
  font-feature-settings: 'tnum';
}

/* Subtle ministerial accents */
.screen-header, .modal-header {
  background: var(--hero-grad) !important;
  border-bottom: 2px solid transparent;
  border-image: var(--gold-stripe) 1;
}

/* Gold separators */
.sidebar-section { position: relative; }
.sidebar-section + .sidebar-group {
  border-top: 1px solid rgba(245,158,11,0.18);
}

/* Premium card style */
.ms-card {
  background: #fff;
  border-radius: var(--radius-pro);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.ms-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold-stripe);
}

/* Ministerial premium scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(12,74,110,0.04); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#0c4a6e,#075985); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#082f49,#0c4a6e); }

/* v0.37.9.299 — Hide redundant ☰ hamburger button on desktop (only useful on mobile).
   Keep the existing #sidebarRailBtn (golden arrow) as the sole desktop collapse trigger. */
@media (min-width: 1025px) {
  #sidebarToggle { display: none !important; }
}

/* v0.37.9.305 — When the sidebar is collapsed, fully hide it (width 0).
   The original mini-icon mode left a sliver showing which looked broken.
   Only the floating golden handle stays visible at the edge. */
body.sidebar-collapsed { --sidebar-w: 0px !important; }
body.sidebar-collapsed #sidebar {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}
body.sidebar-collapsed #sidebar * { visibility: hidden !important; }

/* v0.37.9.301 — Use the new golden floating handle as the SOLE collapse button.
   Hide the original #sidebarRailBtn so we don't have two competing toggles. */
#sidebarRailBtn { display: none !important; }

/* Reserve bottom space for the status bar so content doesn't sit under it */
body { padding-bottom: 32px; }
#mwcTray { bottom: 38px !important; }

/* ───── v0.37.9.317 — CRITICAL FIX: last sidebar group "Reports & Settings" ─────
   The fixed bottom status bar was covering the last sidebar group, stealing its
   clicks. The status bar now starts AFTER the sidebar (see premium_screen_pro.js),
   AND we reserve scrolling room here so even on tablets/mobile the bottom items
   never sit under the bar. The sidebar gets its own scroll if it overflows. */
#sidebar nav, #sidebar .sidebar-nav {
  padding-bottom: 48px !important;
  overflow-y: auto;
}
/* Make sure sidebar's own stacking context sits ABOVE the status bar so clicks
   on its bottom items aren't intercepted, but the bar itself stays visible. */
#sidebar { z-index: 81 !important; }