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

:root {
  /* v0.37.9.597 — "Emerald Ledger" identity (unified with the marketing site):
     deep teal-green #014034 + emerald #10b981, replacing the old navy+gold. */
  --primary:        #014034;
  --primary-dark:   #013229;
  --primary-light:  #047857;
  /* Emerald accent (replaces royal gold) */
  --accent:         #047857;
  --accent-dark:    #065f46;
  --accent-soft:    #10b981;
  /* Refined surface tokens */
  --bg:             #f5f8f6;
  --bg-card:        #ffffff;
  --text:           #0b1f1a;
  --text-muted:     #5c6f68;
  --border:         #e4ede9;
  --border-gold:    #10b981;   /* legacy name — now emerald */
  /* Premium gradients (used by gradient-bg rule) */
  --sidebar-bg:     linear-gradient(180deg, #014034 0%, #013229 60%, #06231d 100%);
  --hero-grad:      linear-gradient(135deg, #014034 0%, #047857 50%, #014034 100%);
  --gold-stripe:    linear-gradient(90deg, transparent, #047857 20%, #10b981 50%, #047857 80%, transparent);
  /* Premium shadows (teal-tinted) */
  --shadow-sm:      0 1px 3px rgba(1,64,52,0.06);
  --shadow:         0 4px 16px rgba(1,64,52,0.10);
  --shadow-lg:      0 16px 40px rgba(1,64,52,0.14);
  --shadow-gold:    0 4px 14px rgba(4,120,87,0.22);
  /* 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; }

/* v0.37.9.574 — Admin-only accounts (platform teammates, no company space): the
   sidebar shows ONLY the owner panel; every customer screen/group is hidden. */
body.admin-only #sidebarNav .sidebar-item:not(#ownerPanelNavItem),
body.admin-only #sidebarNav .sidebar-section,
body.admin-only #sidebarNav .sidebar-group { display: none !important; }
body.admin-only #ownerPanelNavItem { display: flex !important; }
body.admin-only #acHeaderCompany { 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; }