/* =========================================================
   AUDIT INTELLIGENCE PLATFORM - DESIGN SYSTEM
   Version: 3.0.0 (Bilingual AR/EN Together)
   File: css/style.css
   ========================================================= */

/* ---------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   --------------------------------------------------------- */
:root {
  --primary-h: 220; --primary-s: 85%; --primary-l: 31%;
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-light: hsl(var(--primary-h), var(--primary-s), 42%);
  --primary-dark: hsl(var(--primary-h), var(--primary-s), 22%);
  --secondary: #0f766e;
  --accent: #d97706;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --success: #16a34a;
  --success-bg: #f0fdf4;
  --warning: #ea580c;
  --warning-bg: #fff7ed;
  --info: #2563eb;
  --info-bg: #eff6ff;

  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-hover: #f1f5f9;
  --border: #e2e8f0;
  --border-focus: #94a3b8;
  --text: #0f172a;
  /* Readability standard (WCAG 2.2 — 1.4.3 contrast, 1.4.4 resize): explicit colours, no transparency.
     Secondary ≥ 7:1 on every light surface (#334155: 10.3 white, 9.5 #f1f5f9, 8.4 #dfe8f7). */
  --text-secondary: #334155;
  --text-muted: var(--text-secondary);
  --text-inverse: #ffffff;
  /* Text on the dark sidebar gradient (#0c3992 → #0a2e6e): primary 10.4:1, secondary 8.4:1 */
  --text-on-dark: #ffffff;
  --text-on-dark-secondary: #e2e8f0;
  /* Status text on its tinted background (badges): all ≥ 7.6:1 */
  --success-text: #14532d;
  --danger-text: #991b1b;
  --warning-text: #7c2d12;
  --info-text: #1e40af;
  /* Bilingual type scale: Arabic body 16px; English secondary ≥ 14px at weight 500.
     Weights in use are only those of the self-hosted Tajawal: 400 / 500 / 700 / 800. */
  --fs-ar-base: 1rem;
  --fs-en-min: 0.875rem;
  /* Arabic in a bilingual pair is never smaller than its English partner. Tajawal's Arabic glyphs
     read smaller than its Latin ones at the same px, so the Arabic floor sits one step above the
     English floor (16px vs 14px ≈ 1.14×). */
  --fs-ar-pair-min: 1rem;
  --fw-en: 500;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --font-sans: 'Tajawal', system-ui, 'Segoe UI', Tahoma, Arial, sans-serif;
  --text-xs: 0.875rem;   /* 14px — smallest size in the platform */
  --text-sm: 0.9375rem;  /* 15px */
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.3125rem;
  --text-2xl: 1.5625rem;
  --text-3xl: 1.9375rem;
   
  --sidebar-width: 16rem;
  --header-height: 4rem;
  --radius-sm: 0.375rem;
  --radius: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1rem;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ---------------------------------------------------------
   2. RESET & BASE (Mobile First)
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
}

/* Form controls do not inherit the page font by default (browsers use the system font,
   e.g. Arial/Segoe UI): every button, field and list uses the platform font. */
button, input, select, textarea, optgroup { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------
   3. UTILITY CLASSES
   --------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--text-inverse);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  font-weight: 700;
  z-index: 9999;
  transition: top var(--transition-fast);
}

.skip-link:focus { top: var(--space-4); }

/* ---------------------------------------------------------
   4. LAYOUT (Mobile First)
   --------------------------------------------------------- */
.app {
  display: flex;
  min-height: 100dvh;
}

/* Mobile Header */
.mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: var(--text-inverse);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  min-height: var(--header-height);
}

.menu-toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: var(--radius);
  color: inherit;
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.menu-toggle:hover, .menu-toggle:focus-visible { background: rgba(255,255,255,0.2); }

.mobile-brand {
  font-weight: 700;
  font-size: var(--text-sm);
  text-align: center;
  line-height: 1.25;
}

.mobile-spacer { width: 2.5rem; flex-shrink: 0; }

/* Sidebar - hidden by default on mobile */
.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(85vw, 18rem);
  background: linear-gradient(180deg, var(--primary) 0%, #0a2e6e 100%);
  color: var(--text-inverse);
  display: flex;
  flex-direction: column;
  z-index: var(--z-modal);
  margin-right: min(-85vw, -18rem);
  transition: margin-right var(--transition-slow);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sidebar.open {
  margin-right: 0;
}
.sidebar.open { transform: translateX(0); }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  z-index: 399;
}

.sidebar-backdrop.active { display: block; }

/* Sidebar Header */
.sidebar-header {
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.brand-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.brand-icon img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

.brand-text h1 {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brand-text span {
  font-size: var(--text-xs);
  color: var(--text-on-dark-secondary);
  display: block;
  margin-top: 0.125rem;
}

/* Sidebar Navigation */
.sidebar-nav {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

/* ---------------------------------------------------------
   READABLE LONG-FORM TEXT (Charter, Policies, future docs)
   Reusable across any page with dense prose content.
   Applies uniformly on mobile and desktop — no media query
   needed since it's a fixed reading-optimized scale, not a
   breakpoint-dependent one.
   --------------------------------------------------------- */
.prose-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-3);
}
.prose-ar {
  font-size: var(--text-lg);
  font-weight: 400; /* body text in a regular weight; bold is for headings (.prose-title) only */
  color: var(--text);
  line-height: 1.9;
  margin-bottom: var(--space-3);
  white-space: pre-line; /* line breaks in the text (e.g. one commitment per line) are kept */
}
.prose-en {
  font-size: var(--text-base);
  font-weight: var(--fw-en);
  color: var(--text-secondary);
  line-height: 1.7;
  white-space: pre-line;
}

/* ---------------------------------------------------------
   ENGLISH/ARABIC VISUAL EQUALITY OVERRIDE
   Opt-in per page via <body class="equalize-bi">. Does NOT
   touch the global .bi-en rule — other pages remain unaffected
   until explicitly opted in, one page at a time.
   --------------------------------------------------------- */
body.equalize-bi .bi-en {
  color: var(--text);
  font-size: max(var(--fs-en-min), 0.88em); /* Arabic is never smaller than its English pair (Tajawal Arabic reads smaller at the same px) */
  font-weight: 700;
}
body.equalize-bi .prose-en {
  color: var(--text);
  font-weight: var(--fw-en); /* regular body text, not bold */
  opacity: 1;
}

/* equalize-bi applies to page content only — sidebar & mobile
   header keep their light secondary color on dark backgrounds */
body.equalize-bi .sidebar .bi-en,
body.equalize-bi .mobile-header .bi-en {
  color: var(--text-on-dark-secondary);
  font-size: max(var(--fs-en-min), 0.82em);
  font-weight: var(--fw-en);
}
body.equalize-bi .mobile-header .bi-en { color: var(--text-on-dark); } /* blue→teal header: white, as elsewhere */

body.equalize-bi .user-info {
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------
   TITLE SPLIT: Arabic right, English left (opt-in, safe wrap)
   --------------------------------------------------------- */
.prose-title-split {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.prose-title-split .bi-sep {
  display: none;
}

/* Stacked topbar layout: title row on top, actions row below.
   Opt-in via <header class="topbar topbar-stacked">. Avoids
   absolute positioning entirely — no overlap possible by design. */
.topbar.topbar-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}
.topbar.topbar-stacked .topbar-actions {
  justify-content: center;
}

.nav-group { margin-bottom: var(--space-4); }

.nav-group ul { list-style: none; }

.nav-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-on-dark-secondary);
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
  font-weight: 700;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--text-on-dark-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all var(--transition-fast);
  border: none;
  background: none;
  width: 100%;
  cursor: pointer;
  text-align: right;
}

.nav-item:hover, .nav-item:focus-visible {
  background: rgba(255,255,255,0.08);
  color: var(--text-inverse);
}

.nav-item.active {
  background: rgba(255,255,255,0.12);
  color: var(--text-inverse);
  font-weight: 700;
}

.nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  opacity: 0.8;
  display: grid;
  place-items: center;
}

.nav-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.nav-item.active .nav-icon { opacity: 1; }

/* Sidebar Footer */
.sidebar-footer {
  padding: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.user-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius);
}

.logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(220,38,38,0.12);
  border: 1px solid rgba(220,38,38,0.3);
  border-radius: var(--radius);
  color: rgba(255,255,255,0.85);
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.logout-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.logout-btn:hover {
  background: rgba(220,38,38,0.25);
  border-color: rgba(220,38,38,0.4);
  color: #fff;
}

.sidebar.collapsed .logout-btn .bi-inline {
  display: none;
}
.user-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--secondary), #115e59); /* white letter ≥ 5.4:1 (was 2.5:1 on #14b8a6) */
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.user-info .name {
  font-size: var(--text-sm);
  font-weight: 700;
}

.user-info .role {
  font-size: var(--text-xs);
  color: var(--text-on-dark-secondary);
}

/* User card name and role — improved readability (v1.3.0) */
.sidebar-footer .name,
.sidebar-footer .role {
  font-weight: 700;
  line-height: 1.4;
  font-size: var(--text-xs);
}

/* على الموبايل */
@media (max-width: 768px) {
  .sidebar-footer .name,
  .sidebar-footer .role {
    font-weight: 700;
    font-size: var(--text-xs);
  }
}

/* Main Content */
.main {
  flex: 1;
  padding: var(--space-4);
  min-width: 0;
}

/* ---------------------------------------------------------
   5. TOPBAR
   --------------------------------------------------------- */
.topbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.page-title h2 {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}

/* Root cause of the drifting English title: .bi is a flex column whose items stretch to
   full width, and .bi-en is direction:ltr, so its text started from the LEFT edge of the
   stretched box. Shrink-wrap the lines to the reading-start edge (right in RTL) instead. */
.page-title .bi { align-items: flex-start; }

.page-title p {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  margin-top: var(--space-1);
}

.topbar-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------
   6. BUTTONS (Reusable Component)
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
  min-height: 2.5rem;
}

.btn img {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: var(--text-inverse);
  box-shadow: 0 2px 8px rgba(11, 61, 145, 0.25);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(11, 61, 145, 0.35);
}

.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: var(--surface);
  color: var(--text-secondary);
  border-color: var(--border);
}

.btn-ghost:hover {
  background: var(--surface-hover);
  border-color: var(--border-focus);
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  min-height: 2rem;
}

/* ---------------------------------------------------------
   7. KPI CARDS (Reusable Component)
   --------------------------------------------------------- */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.kpi-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.kpi-card.reports::before { background: var(--primary); }
.kpi-card.risks::before { background: var(--danger); }
.kpi-card.pending::before { background: var(--warning); }
.kpi-card.closed::before { background: var(--success); }

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-3);
}

.kpi-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kpi-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.kpi-icon img {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.kpi-card.reports .kpi-icon { background: var(--info-bg); }
.kpi-card.risks .kpi-icon { background: var(--danger-bg); }
.kpi-card.pending .kpi-icon { background: var(--warning-bg); }
.kpi-card.closed .kpi-icon { background: var(--success-bg); }

.kpi-value {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.kpi-trend {
  font-size: var(--text-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--danger); }

/* ---------------------------------------------------------
   8. TOOLBAR & SEARCH
   --------------------------------------------------------- */
.toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.search-box {
  position: relative;
  width: 100%;
}

.search-box input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  padding-inline-start: 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--text-sm);
  background: var(--surface);
  color: var(--text);
  transition: all var(--transition-fast);
  min-height: 2.75rem;
}

.search-box input:hover { border-color: var(--border-focus); }

.search-box input:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(11, 61, 145, 0.1);
}

.search-icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  width: 1.125rem;
  height: 1.125rem;
}

.filter-group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.filter-chip {
  padding: var(--space-2) var(--space-4);
  border-radius: 9999px;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  transition: all var(--transition-fast);
}

.filter-chip:hover {
  border-color: var(--border-focus);
  color: var(--text-secondary);
}

.filter-chip.active {
  background: var(--primary);
  color: var(--text-inverse);
  border-color: var(--primary);
}

/* ---------------------------------------------------------
   9. REPORTS LIST
   --------------------------------------------------------- */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.section-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
}

.section-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--surface);
  padding: var(--space-1) var(--space-3);
  border-radius: 9999px;
  border: 1px solid var(--border);
}

.reports-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.report-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  border-inline-end-width: 4px;
  border-inline-end-color: var(--primary);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.report-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(-2px);
}

.report-card.critical { border-inline-end-color: var(--danger); }
.report-card.high { border-inline-end-color: var(--warning); }
.report-card.medium { border-inline-end-color: var(--accent); }
.report-card.low { border-inline-end-color: var(--success); }

.report-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.report-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.4;
}

.report-badges {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: 9999px;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.4;
}

.badge-status {
  background: var(--info-bg);
  color: var(--info-text);
}

.badge-status.closed { background: var(--success-bg); color: var(--success-text); }
.badge-status.open { background: var(--danger-bg); color: var(--danger-text); }
.badge-status.progress { background: var(--warning-bg); color: var(--warning-text); }

.badge-risk { background: var(--danger-bg); color: var(--danger-text); }
.badge-risk.medium { background: #fffbeb; color: var(--warning-text); }
.badge-risk.low { background: var(--success-bg); color: var(--success-text); }

.report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.report-meta span.meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.report-meta img {
  width: 0.875rem;
  height: 0.875rem;
  object-fit: contain;
  opacity: 0.6;
}

.report-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-muted);
  transition: all var(--transition-fast);
}

.action-btn:hover, .action-btn:focus-visible {
  background: var(--bg);
  color: var(--primary);
}

.action-btn img {
  width: 0.875rem;
  height: 0.875rem;
  object-fit: contain;
  opacity: 0.7;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--text-muted);
}

.empty-state-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto var(--space-4);
  opacity: 0.4;
}

.empty-state h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  color: var(--text);
}

.empty-state p { font-size: var(--text-sm); }

/* ---------------------------------------------------------
   10. MODAL
   --------------------------------------------------------- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal-backdrop);
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  overflow-y: auto;
}

.modal-overlay.active { display: flex; }

.modal {
  background: var(--surface);
  border-radius: var(--radius-xl);

  width: min(80vw, 1400px);
  max-width: 1400px;

  max-height: 90dvh;

  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  animation: modalIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}

.modal-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
}

.modal-close {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.modal-close:hover, .modal-close:focus-visible {
  background: var(--danger-bg);
  color: var(--danger);
}

.modal-close img {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.modal-body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  background: var(--surface);
  z-index: 1;
  flex-wrap: wrap;
}

/* Steps */
.steps {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.step {
  flex: 1;
  text-align: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--bg);
  color: var(--text-muted);
  white-space: nowrap;
  min-width: fit-content;
}

.step.active {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: var(--text-inverse);
}

.step.completed {
  background: var(--success-bg);
  color: var(--success);
}

/* Form Grid */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-group.full { grid-column: 1 / -1; }

.form-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-input,
.form-select,
.form-textarea {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--text-sm);
  background: var(--bg);
  color: var(--text);
  transition: all var(--transition-fast);
  width: 100%;
  min-height: 2.75rem;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover { border-color: var(--border-focus); }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(11, 61, 145, 0.1);
  background: var(--surface);
}

.form-textarea {
  resize: vertical;
  min-height: 5rem;
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.75rem center;
  padding-inline-start: var(--space-4);
  padding-inline-end: 2.5rem;
}

/* ---------------------------------------------------------
   11. TABLET (640px+)
   --------------------------------------------------------- */
@media (min-width: 40rem) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }

  .report-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .toolbar {
    flex-direction: row;
    align-items: center;
  }

  .search-box { max-width: 20rem; }
}

/* ---------------------------------------------------------
   12. LAPTOP (1024px+)
   --------------------------------------------------------- */
@media (min-width: 64rem) {
  .mobile-header { display: none; }
  .sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    transform: none;
    width: var(--sidebar-width);
    z-index: var(--z-sticky);
    margin-right: 0;
  }
   
  .sidebar-backdrop { display: none !important; }

  .main {
    margin-inline-end: 0;
    padding: var(--space-6) var(--space-8);
  }

  .topbar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .kpi-grid { grid-template-columns: repeat(4, 1fr); }

    .form-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------
   12b. SIDEBAR COLLAPSE (Desktop only, 1024px+)
   --------------------------------------------------------- */
@media (min-width: 64rem) {
    .sidebar-collapse-toggle {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-inverse);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast);
    margin-inline-start: auto;
  }
   
  .sidebar-collapse-toggle:hover { background: rgba(255,255,255,0.2); }

    .sidebar {
    transition: width var(--transition-slow);
  }

  .sidebar.collapsed {
    width: 4.5rem;
  }

  .sidebar.collapsed .brand-text,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-item .bi-inline,
  .sidebar.collapsed .user-info {
    display: none;
  }

  .sidebar.collapsed .nav-item {
    justify-content: center;
  }

  .sidebar.collapsed .sidebar-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }

  .sidebar.collapsed .user-card {
    justify-content: center;
    padding: var(--space-2);
  }
  }

/* ---------------------------------------------------------
   13. DESKTOP (1280px+)
   --------------------------------------------------------- */
@media (min-width: 80rem) {
  .main {
    max-width: 80rem;
    margin-inline: auto;
    padding: var(--space-8) var(--space-10);
  }
}

/* Data pages (plan, dashboard, risk register, universe) opt in with
   <body class="page-wide">: fluid up to ~1600px. Reading pages keep 80rem. */
@media (min-width: 80rem) {
  body.page-wide .main { max-width: 100rem; }
}

/* ---------------------------------------------------------
   14. 4K / ULTRAWIDE (1920px+)
   --------------------------------------------------------- */
@media (min-width: 120rem) {
  :root {
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
  }

  .main { max-width: 90rem; }
  .kpi-grid { gap: var(--space-4); }
}

/* ---------------------------------------------------------
   15. PRINT
   --------------------------------------------------------- */
@media print {
  .sidebar,
  .mobile-header,
  .topbar-actions,
  .toolbar,
  .modal-overlay,
  .report-actions {
    display: none !important;
  }

  .main {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  .report-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  body {
    background: white;
    color: black;
  }

  /* Screen readability minimums do not apply on paper: previous sizes, proportional English */
  :root {
    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --fs-en-min: 0.5rem;   /* so max(min, 0.82em) resolves to the proportional size on paper */
    --fs-ar-pair-min: 0px; /* Arabic keeps its own (inherited) size on paper */
  }
  .bi-en,
  .bi-inline .bi-en { font-size: 0.82em; }
}

/* ---------------------------------------------------------
   16. HIGH CONTRAST
   --------------------------------------------------------- */
@media (prefers-contrast: high) {
  :root {
    --border: #000;
    --text-muted: #000;
  }

  .btn-primary { border: 2px solid currentColor; }
}

/* ---------------------------------------------------------
   17. DARK MODE (Future Ready)
   --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --surface: #1e293b;
    --surface-hover: #334155;
    --border: #334155;
    --border-focus: #475569;
    --text: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
  }
}


/* ---------------------------------------------------------
   18. LTR SUPPORT (kept for potential full-LTR pages)
   --------------------------------------------------------- */
html[dir="ltr"] {
  text-align: left;
}

html[dir="ltr"] .sidebar {
  inset: 0 auto 0 0;
  transform: translateX(-100%);
}

html[dir="ltr"] .sidebar.open {
  transform: translateX(0);
}

html[dir="ltr"] .main {
  margin-inline-start: 0;
}

html[dir="ltr"] .nav-item {
  text-align: left;
}

html[dir="ltr"] .form-select {
  background-position: right 0.75rem center;
  padding-inline-start: var(--space-4);
  padding-inline-end: 2.5rem;
}

html[dir="ltr"] .search-icon {
  inset-inline-start: auto;
  inset-inline-end: var(--space-3);
}

html[dir="ltr"] .search-box input {
  padding-inline-start: var(--space-4);
  padding-inline-end: 2.75rem;
}

html[dir="ltr"] .report-card:hover {
  transform: translateX(2px);
}

html[dir="ltr"] .modal-footer,
html[dir="ltr"] .topbar-actions {
  flex-direction: row-reverse;
}

html[dir="ltr"] .section-header {
  flex-direction: row;
}

html[dir="ltr"] .kpi-header {
  flex-direction: row;
}

/* Laptop LTR */
@media (min-width: 64rem) {
  html[dir="ltr"] .sidebar {
    transform: none;
  }

  html[dir="ltr"] .main {
    margin-inline-start: 0;
    margin-inline-end: var(--sidebar-width);
  }
}

/* ---------------------------------------------------------
   19. BILINGUAL DISPLAY (Arabic + English Together)
   Two building blocks used everywhere text used to be
   swapped by language:
     .bi          -> stacked: Arabic on top (main), English
                     underneath (secondary) — used for
                     headings, titles, labels
     .bi-inline   -> side by side on one line, separated by
                     "/" — used for buttons, nav items,
                     badges, chips, short labels
   --------------------------------------------------------- */
.bi {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  line-height: 1.3;
}

.bi-ar {
  direction: rtl;
  unicode-bidi: isolate;
  font-size: max(var(--fs-ar-pair-min), 1em);
}

.bi-en {
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--text-secondary);                 /* explicit colour, no transparency */
  font-size: max(var(--fs-en-min), 0.82em);     /* never below 14px */
  font-weight: var(--fw-en);
}

.bi-inline {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.bi-inline .bi-en {
  font-size: max(var(--fs-en-min), 0.88em);
}

.bi-sep {
  color: var(--border-focus);
  opacity: 0.55;
  font-weight: 400;
}

/* Neutralize uppercase/letter-spacing meant for Latin labels
   so the Arabic half of a bilingual label stays readable */
.nav-label .bi-ar,
.kpi-label .bi-ar,
.section-title .bi-ar,
.form-label .bi-ar {
  letter-spacing: normal;
}

.kpi-label .bi-en,
.form-label .bi-en,
.nav-label .bi-en {
  text-transform: none;
}

/* Bilingual text sitting on colored / inverse backgrounds
   (sidebar, gradient header, primary buttons) needs a
   lighter secondary color instead of --text-muted */
.sidebar .bi-en,
.mobile-header .bi-en,
.step.active .bi-en,
.filter-chip.active .bi-en,
.badge .bi-en {
  color: var(--text-on-dark-secondary);
}

/* Primary buttons and the mobile header sit on the blue→teal gradient: English in the same white
   as the Arabic (white on the teal end is 5.5:1 — the most any light text can reach there). */
.btn-primary .bi-en,
.step.active .bi-en,
.mobile-header .bi-en { color: var(--text-on-dark); }
/* other solid-blue surfaces: light secondary (8.4:1 on --primary) */
.logout-btn:hover .bi-en,
.nav-item.active .bi-en { color: var(--text-on-dark-secondary); }

/* Draft badge built inline by app.js (golden — not edited): its #92400e on #fef3c7 is 6.4:1.
   CSS-only bridge to #78350f (≥ 7:1); inline styles can only be overridden with !important. */
.badge[style*="#92400e"] { color: #78350f !important; }

/* badges: the English half takes the badge's own (≥ 7:1) status colour */
.badge .bi-en { color: inherit; }

/* Tighter gap for compact contexts */
.badge .bi-inline,
.filter-chip .bi-inline,
.action-btn .bi-inline,
.nav-item .bi-inline,
.step .bi-inline,
.btn .bi-inline {
  gap: var(--space-1);
}

/* Mobile header brand needs to fit the fixed-height bar */
.mobile-brand .bi-inline {
  justify-content: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
}

.mobile-brand .bi-ar { font-weight: 700; font-size: max(var(--fs-ar-pair-min), var(--text-sm)); }

/* Report title stacks bilingual text like any other heading */
.report-title.bi { gap: 0.125rem; }
.report-title .bi-en { font-size: max(var(--fs-en-min), 0.78em); font-weight: 700; }

/* Report meta rows (dept / id / date / auditor) run inline */
.report-meta .meta-item .bi-inline { gap: var(--space-1); }

/* Descriptive bilingual paragraphs: stack Arabic over English
   and hide the "/" so it never dangles alone on its own line.
   Short KPI trend lines keep the inline layout. */
p.bi-inline,
.nav-item .bi-inline,
.user-info .bi-inline {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
}
p.bi-inline > .bi-sep,
.nav-item .bi-sep,
.user-info .bi-sep {
  display: none;
}