/* ================== Design Tokens ================== */
:root {
  --colors-neutral-50:  #f9fafb;
  --colors-neutral-100: #f3f4f6;
  --colors-neutral-200: #e5e7eb;
  --colors-neutral-300: #d1d5db;
  --colors-neutral-400: #9ca3af;
  --colors-neutral-500: #6b7280;
  --colors-neutral-600: #4b5563;
  --colors-neutral-700: #374151;
  --colors-neutral-800: #1f2937;
  --colors-neutral-900: #111827;

  --colors-primary-50:  #f0fdf4;
  --colors-primary-100: #dcfce7;
  --colors-primary-200: #bbf7d0;
  --colors-primary-600: #16a34a;
  --colors-primary-700: #15803d;
  --colors-primary-800: #166534;

  --colors-red-50:  #fef2f2;
  --colors-red-100: #fee2e2;
  --colors-red-200: #fecaca;
  --colors-red-600: #dc2626;
  --colors-red-700: #b91c1c;
  --colors-red-800: #991b1b;

  --colors-yellow-50:  #fefce8;
  --colors-yellow-100: #fef3c7;
  --colors-yellow-200: #fde047;
  --colors-yellow-600: #ca8a04;
  --colors-yellow-700: #a16207;
  --colors-yellow-800: #854d0e;

  --colors-blue-50:  #eff6ff;
  --colors-blue-100: #dbeafe;
  --colors-blue-200: #bfdbfe;
  --colors-blue-600: #2563eb;
  --colors-blue-700: #1d4ed8;
  --colors-blue-800: #1e40af;

  /* Semantic success green — theme-independent, so "success / OK" reads as
     green in ALL themes (incl. MIM, where the brand primary is purple). */
  --colors-green-50:  #f0fdf4;
  --colors-green-100: #dcfce7;
  --colors-green-200: #bbf7d0;
  --colors-green-600: #16a34a;
  --colors-green-700: #15803d;
  --colors-green-800: #166534;

  --border-neutral: #d1d5db;
  --border-strong:  #6b7280;
  --border-primary: #3b82f6;
  --border-error:   #dc2626;

  --footer-grad-start: #065f46;
  --footer-grad-end:   #047857;

  /* Brand accents (used by the SPGA theme; default = primary/neutral so the
     base theme is unaffected). */
  --brand-green: #16a34a;
  --brand-tan:   #c8a791;
  --brand-gray:  #636569;
  --brand-brown: #82654a;

  /* Dashboard chrome that isn't primary-derived (heat-map scale + selected
     region outline). Default = the original blue; SPGA overrides below. */
  --dash-scale-rgb:     37, 99, 235;
  --dash-region-stroke: #1e40af;
  /* Dashboard decorative accent (single-series bars + chips). Default = the
     original blue; SPGA turns it brand so no blue leaks into that theme. */
  --dash-accent:        var(--colors-blue-600);
  --dash-accent-bg:     var(--colors-blue-50);
  --dash-accent-border: var(--colors-blue-200);
  --dash-accent-text:   var(--colors-blue-700);

  /* Primary color as raw "r, g, b" for rgba() shadows that must follow the
     theme (box-shadow can't take a hex token + alpha directly). */
  --primary-shadow-rgb: 22, 163, 74;

  /* ---- Accent (interactive highlight). Base = blue so the default/spga
     themes are unchanged; the MIM theme swaps these to the brand teal.
     CONTRAST RULE: -700/-800 for text/links, -400/-500/-600 for
     fills/borders/rings/large accents only. */
  --accent-50:  #eff6ff;
  --accent-100: #dbeafe;
  --accent-200: #bfdbfe;
  --accent-400: #60a5fa;
  --accent-500: #3b82f6;
  --accent-600: #2563eb;
  --accent-700: #1d4ed8;
  --accent-800: #1e40af;

  /* ---- Spacing scale (4px rhythm) — use for padding / margin / gap. ---- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */

  /* ---- Radius scale ---- */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-pill: 9999px;

  /* ---- Elevation scale (neutral, theme-independent) ---- */
  --shadow-sm: 0 1px 2px rgba(18, 13, 14, 0.06), 0 1px 3px rgba(18, 13, 14, 0.08);
  --shadow-md: 0 4px 12px -2px rgba(18, 13, 14, 0.10), 0 2px 6px -2px rgba(18, 13, 14, 0.08);
  --shadow-lg: 0 12px 28px -6px rgba(18, 13, 14, 0.16), 0 6px 12px -6px rgba(18, 13, 14, 0.10);

  /* ---- Type scale ---- */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.8125rem;  /* 13 */
  --text-base: 0.9375rem;  /* 15 */
  --text-md:   1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.25rem;    /* 20 */
  --text-2xl:  1.5rem;     /* 24 */
  --text-3xl:  1.875rem;   /* 30 */

  /* Modal chrome padding — referenced by .modal-body AND the .tabs-bar bleed
     so the two stay in sync (removes the old magic-number coupling). */
  --modal-pad-x: 1.4rem;
  --modal-pad-y: 1.1rem;
}

/* ================== SPGA theme (corporate identity) ==================
   Olive green primary + tan / slate gray / brown accents. Only the brand
   tokens change; neutrals/red/yellow/blue stay for contrast & status clarity.
   Applied project-wide via <html data-theme="spga">. */
:root[data-theme="spga"] {
  --colors-primary-50:  #eef3ea;
  --colors-primary-100: #dde7d7;
  --colors-primary-200: #b9cdad;
  --colors-primary-600: #47763b;
  --colors-primary-700: #3a6130;
  --colors-primary-800: #2e4d26;

  --border-primary: #47763b;
  --footer-grad-start: #2e4d26;
  --footer-grad-end:   #47763b;

  --brand-green: #47763b;
  --brand-tan:   #c8a791;
  --brand-gray:  #636569;
  --brand-brown: #82654a;

  --dash-scale-rgb:     71, 118, 59;
  --dash-region-stroke: #82654a;
  --dash-accent:        var(--colors-primary-600);
  --dash-accent-bg:     var(--colors-primary-50);
  --dash-accent-border: var(--colors-primary-200);
  --dash-accent-text:   var(--colors-primary-700);
  --primary-shadow-rgb: 71, 118, 59;
}

/* ================== MIM theme (Ministry of Industry & Mineral Resources) ==========
   Official identity: dark-purple primary (#413258), bright-teal accent
   (#1CD7C5 / #14B8B8), metallic-gray neutrals, pink secondary (#BD9F9D).
   This is the DEFAULT theme (api/lib_themes.php · themes_default() = 'mim'),
   applied project-wide via <html data-theme="mim">.
   CONTRAST RULE: bright teal (--accent-400/-500/-600) is for fills / borders /
   focus rings / large accents ONLY — never body text (≈1.4:1 on white). Use
   --accent-700/-800 for interactive text and links. */
:root[data-theme="mim"] {
  /* Metallic neutral ramp (raw minerals) */
  --colors-neutral-50:  #fcfcfc;
  --colors-neutral-100: #f3f3f3;
  --colors-neutral-200: #e8e8e8;
  --colors-neutral-300: #babcbe;
  --colors-neutral-400: #8a8c8e;
  --colors-neutral-500: #666666;
  --colors-neutral-600: #4a4a4c;
  --colors-neutral-700: #2e2b2c;
  --colors-neutral-800: #1a1a1a;
  --colors-neutral-900: #120d0e;

  /* Dark-purple primary (hero = #413258 at -600) */
  --colors-primary-50:  #f5f3ff;
  --colors-primary-100: #ede1f6;
  --colors-primary-200: #dac5ee;
  --colors-primary-600: #413258;
  --colors-primary-700: #32244b;
  --colors-primary-800: #25193f;

  /* Bright-teal accent (see CONTRAST RULE above) */
  --accent-50:  #e8fff4;
  --accent-100: #d0fde8;
  --accent-200: #a3fbda;
  --accent-400: #50e7ca;
  --accent-500: #1cd7c5;
  --accent-600: #14b8b8;
  --accent-700: #0e8e9a;
  --accent-800: #08687c;

  --border-neutral: #dcdcdc;
  --border-strong:  #8a8c8e;
  --border-primary: #413258;
  --border-error:   #dc2626;

  --footer-grad-start: #25193f;
  --footer-grad-end:   #413258;

  /* Brand accents (charts/exports mirror these in assets/theme.js) */
  --brand-green: #413258;
  --brand-tan:   #bd9f9d;
  --brand-gray:  #757575;
  --brand-brown: #666666;

  --dash-scale-rgb:     20, 184, 184;
  --dash-region-stroke: #413258;
  --dash-accent:        var(--accent-600);
  --dash-accent-bg:     var(--accent-50);
  --dash-accent-border: var(--accent-200);
  --dash-accent-text:   var(--accent-800);

  --primary-shadow-rgb: 65, 50, 88;
}

/* ================== Base ================== */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  /* --app-font is set per-page from the admin's "system font" setting
     (see api/lib_fonts.php · fonts_head_html); falls back to the bundled default. */
  font-family: var(--app-font, 'IBM Plex Sans Arabic', sans-serif);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--colors-neutral-50);
  color: var(--colors-neutral-900);
  direction: rtl; text-align: right;
}
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--accent-800); text-decoration: none; }
a:hover { color: var(--accent-700); text-decoration: underline; }
button { font-family: inherit; }

/* ================== Layout utilities & shared components (design system) ======
   Encode the spacing scale so modules stop hand-rolling inline margins/gaps.
   Prefer these over inline style="" for spacing and grouping. */

/* Vertical rhythm: space stacked children with gap (no margin-collapse). */
.stack     { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm  { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-lg  { display: flex; flex-direction: column; gap: var(--space-5); }

/* Horizontal groups with a consistent gap (buttons, chips, inline meta). */
.action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.action-bar.end     { justify-content: flex-end; }
.action-bar.between { justify-content: space-between; width: 100%; }
.cluster    { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cluster-sm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }

/* A simple card that pads its own direct content (no separate header/body).
   Do NOT combine with .card-body (would double-pad). */
.card.pad    { padding: var(--space-5); }
.card.pad-sm { padding: var(--space-4); }

/* Section heading inside a card / panel. */
.section-title    { font-size: var(--text-lg); font-weight: 700; color: var(--colors-neutral-900); margin: 0 0 var(--space-3); line-height: 1.3; }
.section-title.sm { font-size: var(--text-md); }
.section-subtitle { font-size: var(--text-sm); color: var(--colors-neutral-500); margin: 0 0 var(--space-3); }

/* Label:value pairs (definition list). Replaces the ad-hoc kvRow / mini-chip
   idioms. Two-column grid; collapses to stacked on narrow screens. */
.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--space-2) var(--space-4); align-items: baseline; margin: 0; }
.kv > dt { color: var(--colors-neutral-500); font-size: var(--text-sm); font-weight: 500; }
.kv > dd { margin: 0; color: var(--colors-neutral-900); font-size: var(--text-base); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .kv { grid-template-columns: 1fr; gap: var(--space-1) 0; }
  .kv > dt { margin-top: var(--space-2); }
}

/* A horizontal, wrapping row of form fields (compact inline forms — upload
   rows, filter rows) with a consistent gap. Fields flex to share the width. */
.form-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.form-row > .form-field { flex: 1 1 12rem; min-width: 0; }
.form-row > .form-field.grow2 { flex-grow: 2; }

/* Form-field helpers: inline hint + field-level error slot (not just a toast). */
.form-hint  { font-size: var(--text-xs); color: var(--colors-neutral-500); }
.form-error { font-size: var(--text-xs); color: var(--colors-red-700); display: flex; align-items: center; gap: var(--space-1); }
.form-field.has-error .text-input,
.form-field.has-error .select-input,
.form-field.has-error .textarea-input { border-color: var(--border-error); }

/* Horizontal divider on the spacing scale. */
.divider { height: 1px; background: var(--border-neutral); border: 0; margin: var(--space-4) 0; }

/* Tabular figures for inline numbers (data-table cells handle their own). */
.tnum { font-variant-numeric: tabular-nums; }

/* Horizontal tab strip (e.g. the request-file detail tabs). */
.tabbar { display: flex; gap: var(--space-1); overflow-x: auto; background: #fff; border: 1px solid var(--border-neutral); border-radius: var(--radius-md); padding: var(--space-1) var(--space-2); }
.tabbar::-webkit-scrollbar { height: 6px; }
.tabbar::-webkit-scrollbar-thumb { background: var(--colors-neutral-300); border-radius: var(--radius-pill); }

/* Record identifier heading (e.g. the platform_no on a request-file header). */
.detail-id { font-size: var(--text-lg); font-weight: 700; color: var(--colors-neutral-900); line-height: 1.2; }

/* A wrapping row of "fact" items (small label above a value) — record headers,
   summaries, KPI-ish inline stats. Replaces ad-hoc inline mini-chips. */
.factbar { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.factbar .fact { min-width: 8rem; }

/* The request header's descriptive facts — DENSE by design. A dozen facts as tiles
   or grid cells made the header a wall the reader had to scroll past before reaching
   the work. As inline «label value» pairs they take two or three lines total. */
.reqmeta { display:flex; flex-wrap:wrap; gap:0.25rem 1.1rem; margin-top:var(--space-2); font-size:0.78rem; line-height:1.7; }
.reqmeta-item { white-space:nowrap; }
.reqmeta-k { color:var(--colors-neutral-500); margin-inline-end:0.3rem; }
.reqmeta-v { font-weight:600; color:var(--colors-neutral-800); }
.fact-label { font-size: var(--text-xs); color: var(--colors-neutral-500); margin-bottom: 2px; }
.fact-value { font-weight: 600; color: var(--colors-neutral-900); }

/* A persistent panel anchor collapses when its module renders no content
   (e.g. the إحالة/transfer banner when no transfer applies) so the parent
   .stack gap does not leave a phantom gap. */
:empty.collapse-empty { display: none; }

/* ================== Accessibility ================== */
/* Visible keyboard focus for all interactive elements (bright teal reads on
   both white surfaces and the purple header). Mouse focus is unaffected. */
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
.nav-link:focus-visible,
.nav-dropdown-toggle:focus-visible,
.tab-btn:focus-visible,
.btn-icon-only-header:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

/* Respect users who prefer reduced motion. */
@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;
  }
}

/* ================== Top Header + Nav ================== */
.app-header {
  background: linear-gradient(135deg, var(--colors-primary-800) 0%, var(--colors-primary-600) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow-md);
}
.header-row {
  max-width: 1500px; margin: 0 auto;
  padding: 0.75rem 2rem;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
}
.header-logo {
  display: flex; align-items: center; gap: 0.75rem;
  font-weight: 700; font-size: 1.05rem; color: #fff;
}
.header-logo-img { height: 2.15rem; width: auto; display: block; }
.header-logo-sep { width: 1px; height: 1.6rem; background: rgba(255, 255, 255, 0.28); flex-shrink: 0; }
.header-logo-icon {
  width: 2.25rem; height: 2.25rem;
  background: linear-gradient(135deg, var(--colors-primary-600) 0%, var(--colors-primary-700) 100%);
  border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.header-right { display: flex; align-items: center; gap: 0.6rem; }
.employee-chip {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.4rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8125rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: 0.4rem;
}

.nav-row {
  max-width: 1500px; margin: 0 auto;
  padding: 0 2rem;
  /* WRAP, never hide: every page is a visible button in this bar (the «خدمات أخرى»
     dropdown was removed because a hidden menu made pages undiscoverable). On a narrow
     screen the row grows a second line rather than scrolling items out of sight. */
  display: flex; gap: 0.25rem; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.nav-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1rem;
  font-size: 0.9rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  background: none; border: none;
  border-radius: 0.5rem;
  margin: 0.35rem 0;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
/* A POSTPONED feature (الاعتماد داخل النظام): the tab stays visible but inert, so it
   reads as «coming» rather than as something that silently disappeared. */
.nav-link.nav-disabled { color: rgba(255,255,255,0.38); cursor: not-allowed; }
.nav-link.nav-disabled:hover { color: rgba(255,255,255,0.38); background: none; }
.nav-soon {
  font-size: 0.62rem; font-weight: 600; line-height: 1;
  padding: 0.16rem 0.4rem; border-radius: 99px;
  background: rgba(255,255,255,0.16); color: rgba(255,255,255,0.72);
}
.nav-soon.hidden { display: none; }
.nav-link.active {
  color: var(--colors-primary-800);
  background: #fff;
  font-weight: 600;
}
.nav-link svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.nav-link.cta {
  background: var(--accent-500);
  color: var(--colors-neutral-900);
  margin: 0.35rem 0.25rem;
}
.nav-link.cta:hover { background: var(--accent-400); color: var(--colors-neutral-900); }
.nav-spacer { flex: 1; }

.btn-icon-only-header {
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.10);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  transition: all 0.15s ease;
}
.btn-icon-only-header:hover { background: rgba(255, 255, 255, 0.20); color: #fff; }

/* ================== Layout ================== */
.app-shell {
  flex: 1;
  max-width: 1500px; width: 100%;
  margin: 0 auto;
  padding: 1.5rem 2rem;
}

/* ================== Page Header ================== */
.page-header {
  background: linear-gradient(135deg, var(--colors-primary-600) 0%, var(--colors-primary-700) 100%);
  color: #fff;
  padding: 1.5rem 1.75rem;
  border-radius: 0.75rem;
  margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
}
.page-header::before {
  content: ''; position: absolute;
  top: -50%; left: -20%; width: 60%; height: 200%;
  background: rgba(255,255,255,0.05);
  transform: rotate(25deg); pointer-events: none;
}
.page-header-content { position: relative; z-index: 1; }
.page-header-title { font-size: 1.625rem; font-weight: 700; margin: 0 0 0.4rem; line-height: 1.2; }
.page-header-description { font-size: 0.95rem; opacity: 0.92; margin: 0; line-height: 1.5; }
@media (max-width: 768px) {
  .page-header { padding: 1.25rem 1.25rem; }
  .page-header-title { font-size: 1.375rem; }
}

/* ================== Buttons ================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  font-size: 0.875rem; font-weight: 500;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
/* Standalone (non-button) inline icon — keeps a bare iconSvg() from ballooning
   when it sits directly in a flex/card row with no parent sizing rule. */
.inline-icon { display: inline-flex; align-items: center; flex-shrink: 0; }
.inline-icon svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.btn-primary { background: var(--colors-primary-600); color: #fff; border-color: var(--colors-primary-600); }
.btn-primary:hover:not(:disabled) { background: var(--colors-primary-700); border-color: var(--colors-primary-700); }
.btn-secondary { background: #fff; color: var(--colors-neutral-700); border-color: var(--border-neutral); }
.btn-secondary:hover:not(:disabled) { background: var(--colors-neutral-50); border-color: var(--colors-neutral-400); color: var(--colors-neutral-900); }
.btn-danger { background: var(--colors-red-600); color: #fff; border-color: var(--colors-red-600); }
.btn-danger:hover:not(:disabled) { background: var(--colors-red-700); border-color: var(--colors-red-700); }
.btn-ghost { background: transparent; color: var(--colors-neutral-700); border-color: transparent; }
.btn-ghost:hover { background: var(--colors-neutral-100); color: var(--colors-neutral-900); }
.btn-sm { padding: 0.35rem 0.625rem; font-size: 0.8125rem; }
.btn-icon-only { padding: 0.45rem; width: 2.1rem; height: 2.1rem; }
.btn-icon-only svg { width: 1rem; height: 1rem; }

/* ================== Cards ================== */
.card { background: #fff; border: 1px solid var(--border-neutral); border-radius: 0.5rem; overflow: hidden; }
.card-header {
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border-neutral);
  background: var(--colors-neutral-50);
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.card-title { font-size: 0.95rem; font-weight: 600; color: var(--colors-neutral-900); margin: 0; }
.card-body { padding: 1.25rem; }

.stat-card {
  background: #fff; border: 1px solid var(--border-neutral);
  border-radius: 0.5rem; padding: 1rem;
  display: flex; align-items: center; gap: 0.9rem;
  transition: all 0.2s ease;
}
.stat-card:hover { border-color: var(--colors-primary-200); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.stat-icon {
  width: 2.75rem; height: 2.75rem; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.stat-icon svg { width: 1.375rem; height: 1.375rem; }
.stat-icon.green { background: var(--colors-green-50); color: var(--colors-green-700); }
.stat-icon.blue { background: var(--colors-blue-50); color: var(--colors-blue-700); }
.stat-icon.yellow { background: var(--colors-yellow-50); color: var(--colors-yellow-700); }
.stat-icon.red { background: var(--colors-red-50); color: var(--colors-red-700); }
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--colors-neutral-900); line-height: 1; }
.stat-label { font-size: 0.8125rem; color: var(--colors-neutral-600); margin-top: 0.3rem; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; margin-bottom: 1.25rem; }
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } }

.dashboard-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 900px) { .dashboard-row { grid-template-columns: 1fr; } }

.bar-row { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; padding: 0.35rem 0; }
.bar-label { width: 9rem; color: var(--colors-neutral-700); flex-shrink: 0; }
.bar-track { flex: 1; height: 0.5rem; background: var(--colors-neutral-100); border-radius: 9999px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--colors-primary-600), var(--colors-primary-700)); border-radius: inherit; }
.bar-value { width: 2.5rem; text-align: left; color: var(--colors-neutral-700); font-variant-numeric: tabular-nums; font-weight: 500; }

.status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem; }
.status-grid .status-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--colors-neutral-50);
  border-radius: 0.375rem; border: 1px solid var(--border-neutral);
  font-size: 0.8125rem;
}
.status-grid .status-row .count { font-weight: 700; color: var(--colors-primary-700); }

/* ================== Toolbar ================== */
.toolbar {
  background: #fff; border: 1px solid var(--border-neutral);
  border-radius: 0.5rem; padding: 1rem;
  margin-bottom: 1rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end;
}
.toolbar-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 150px; flex: 1; }
.toolbar-field.search { flex: 2 1 250px; }
.toolbar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-inline-start: auto; }

/* ================== Form Elements ================== */
.form-label { font-size: 0.8125rem; font-weight: 500; color: var(--colors-neutral-800); }
.form-label.required::before { content: "* "; color: var(--colors-red-600); }

.text-input, .select-input, .textarea-input {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-neutral);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  background: #fff; color: var(--colors-neutral-900);
  font-family: inherit; width: 100%;
  transition: all 0.15s ease;
}
.text-input:focus, .select-input:focus, .textarea-input:focus {
  outline: none; border-color: var(--colors-primary-600);
  box-shadow: 0 0 0 3px var(--colors-primary-100);
}
.text-input.error, .select-input.error, .textarea-input.error { border-color: var(--border-error); }
.text-input.error:focus, .select-input.error:focus, .textarea-input.error:focus { box-shadow: 0 0 0 3px var(--colors-red-100); }
.text-input:disabled, .select-input:disabled { background: var(--colors-neutral-100); color: var(--colors-neutral-500); cursor: not-allowed; }
.textarea-input { resize: vertical; min-height: 80px; }

.help-text { font-size: 0.75rem; color: var(--colors-neutral-500); margin-top: 0.25rem; }
.help-text.error { color: var(--colors-red-600); }

.input-with-icon { position: relative; }
.input-with-icon .input-icon {
  position: absolute; right: 0.75rem; top: 50%;
  transform: translateY(-50%);
  width: 1.125rem; height: 1.125rem;
  color: var(--colors-neutral-400); pointer-events: none;
}
.input-with-icon .text-input { padding-right: 2.5rem; }
.input-with-icon button.input-icon-btn {
  pointer-events: auto;
  background: none; border: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--colors-neutral-500);
  border-radius: 0.25rem;
  transition: color 0.15s, background-color 0.15s;
}
.input-with-icon button.input-icon-btn:hover {
  color: var(--colors-primary-700);
  background: var(--colors-primary-50);
}
.input-with-icon button.input-icon-btn svg { width: 1.125rem; height: 1.125rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.radio-group { display: flex; gap: 0.5rem; padding: 0.3rem 0; flex-wrap: wrap; }
.radio-option { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.875rem; user-select: none; }
.radio-option input { accent-color: var(--colors-primary-600); }

.radio-option:has(input[type="radio"]) {
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border: 1.5px solid var(--colors-neutral-300);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--colors-neutral-700);
  transition: border-color 0.15s, background-color 0.15s, color 0.15s, box-shadow 0.15s;
  position: relative;
  min-width: 5rem;
  justify-content: center;
  font-weight: 500;
  font-size: 0.9rem;
}
.radio-option:has(input[type="radio"]):hover {
  border-color: var(--colors-primary-600);
  color: var(--colors-primary-800);
  background: var(--colors-primary-50);
}
.radio-option:has(input[type="radio"]) input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.radio-option:has(input[type="radio"]:checked) {
  border-color: var(--colors-primary-600);
  background: var(--colors-primary-600);
  color: #fff;
  box-shadow: 0 2px 6px rgba(var(--primary-shadow-rgb), 0.22);
}
.radio-option:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--colors-primary-200);
  outline-offset: 2px;
}

/* ================== Tables ================== */
.table-container { background: #fff; border: 1px solid var(--border-neutral); border-radius: 0.5rem; overflow: hidden; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; background: #fff; }
.data-table th {
  background: var(--colors-neutral-50);
  color: var(--colors-neutral-800);
  font-weight: 600; text-align: right;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--border-neutral);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 3;
  user-select: none;
}
.data-table th.sortable { cursor: pointer; }
.data-table th.sortable:hover { background: var(--colors-neutral-100); }
.data-table th .sort-indicator { display: inline-block; margin-inline-start: 0.4rem; opacity: 0.4; font-size: 0.75rem; }
.data-table th.sorted .sort-indicator { opacity: 1; color: var(--colors-primary-700); }

/* Clickable header: opens the sort + filter menu */
.data-table th.th-menu-trigger { cursor: pointer; }
.data-table th.th-menu-trigger:hover { background: var(--colors-neutral-100); }
.data-table th.th-menu-trigger .th-label { display: inline-block; }
.data-table th.th-menu-trigger .th-meta { display: inline-flex; align-items: center; gap: 0.25rem; margin-inline-start: 0.4rem; vertical-align: middle; }
.data-table th.th-menu-trigger .th-funnel { width: 0.8rem; height: 0.8rem; opacity: 0; color: var(--colors-neutral-400); transition: opacity 0.15s ease; }
.data-table th.th-menu-trigger:hover .th-funnel { opacity: 0.55; }
.data-table th.th-menu-trigger.filtered { background: var(--colors-primary-50); color: var(--colors-primary-800); }
.data-table th.th-menu-trigger.filtered .th-funnel { opacity: 1; color: var(--colors-primary-700); }

/* Column header sort + filter menu (floats over the table header) */
.col-menu {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-neutral);
  border-radius: 0.5rem;
  box-shadow: 0 10px 24px -6px rgba(0,0,0,0.18), 0 4px 8px -3px rgba(0,0,0,0.08);
  width: 280px; max-width: calc(100vw - 24px);
  overflow: hidden;
  animation: comboFade 0.12s ease-out;
}
.col-menu .cm-head {
  padding: 0.6rem 0.8rem;
  font-weight: 700; font-size: 0.9rem;
  color: var(--colors-neutral-900);
  background: var(--colors-neutral-50);
  border-bottom: 1px solid var(--colors-neutral-100);
}
.col-menu .cm-sort { display: flex; gap: 0.4rem; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--colors-neutral-100); }
.col-menu .cm-sort-btn {
  flex: 1; padding: 0.4rem 0.5rem;
  background: var(--colors-neutral-50);
  border: 1px solid var(--colors-neutral-200);
  border-radius: 0.375rem;
  font-family: inherit; font-size: 0.8rem; color: var(--colors-neutral-700);
  cursor: pointer; transition: all 0.15s ease;
}
.col-menu .cm-sort-btn:hover { border-color: var(--colors-primary-600); color: var(--colors-primary-700); }
.col-menu .cm-sort-btn.active { background: var(--colors-primary-100); border-color: var(--colors-primary-600); color: var(--colors-primary-800); font-weight: 600; }
.col-menu .cm-search-wrap { padding: 0.5rem 0.6rem 0.4rem; border-bottom: 1px solid var(--colors-neutral-100); }
.col-menu .cm-search {
  width: 100%; padding: 0.45rem 0.6rem;
  border: 1px solid var(--colors-neutral-200); border-radius: 0.375rem;
  font-family: inherit; font-size: 0.85rem; background: var(--colors-neutral-50);
}
.col-menu .cm-search:focus { outline: none; border-color: var(--colors-primary-600); background: #fff; box-shadow: 0 0 0 2px var(--colors-primary-100); }
.col-menu .cm-list { max-height: 15rem; overflow-y: auto; padding: 0.25rem; }
.col-menu .cm-option {
  width: 100%; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  background: none; border: none; text-align: right;
  font-family: inherit; font-size: 0.85rem; color: var(--colors-neutral-800);
  border-radius: 0.375rem; cursor: pointer;
}
.col-menu .cm-option:hover { background: var(--colors-primary-50); }
.col-menu .cm-option.selected { background: var(--colors-primary-100); color: var(--colors-primary-800); font-weight: 600; }
.col-menu .cm-option .cm-check { width: 1rem; height: 1rem; opacity: 0; flex-shrink: 0; color: var(--colors-primary-700); }
.col-menu .cm-option.selected .cm-check { opacity: 1; }
.col-menu .cm-option .cm-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-menu .cm-note { padding: 0.4rem 0.7rem; font-size: 0.72rem; color: var(--colors-neutral-500); background: var(--colors-yellow-50); border-bottom: 1px solid var(--colors-neutral-100); line-height: 1.5; }
.col-menu .cm-empty, .col-menu .cm-empty-filtered { padding: 0.9rem; text-align: center; color: var(--colors-neutral-400); font-size: 0.82rem; }
.col-menu .cm-empty-filtered.hidden { display: none; }
.col-menu .cm-foot { padding: 0.45rem 0.6rem; border-top: 1px solid var(--colors-neutral-100); }
.col-menu .cm-clear {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  background: var(--colors-neutral-50); border: 1px solid var(--colors-neutral-200);
  border-radius: 0.375rem; font-family: inherit; font-size: 0.8rem; color: var(--colors-neutral-700);
  cursor: pointer; transition: all 0.15s ease;
}
.col-menu .cm-clear:hover { background: var(--colors-red-50); border-color: var(--border-error); color: var(--border-error); }
.col-menu .cm-clear svg { width: 0.85rem; height: 0.85rem; }
.data-table td {
  padding: 0.65rem 0.95rem;
  border-bottom: 1px solid var(--colors-neutral-100);
  color: var(--colors-neutral-800);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--colors-primary-50); }
.data-table td.numeric, .data-table th.numeric { text-align: left; font-variant-numeric: tabular-nums; }
.data-table td.actions { white-space: nowrap; display: flex; gap: 0.2rem; }

/* Orders table ONLY: pin the actions column to the row's trailing (left, in
   RTL) edge so the kebab button stays visible no matter how many columns are
   shown. Scoped to #orders-table so every other .data-table action cell keeps
   its normal multi-button flex layout. */
#orders-table td.actions {
  justify-content: center;
  position: sticky; left: 0; z-index: 2;
  background: #fff;
  box-shadow: 4px 0 6px -4px rgba(0,0,0,0.10);
}
#orders-table tr:hover td.actions { background: var(--colors-primary-50); }
#orders-table tbody tr.row-incomplete td.actions { background: var(--colors-red-50); }
#orders-table tbody tr.row-incomplete:hover td.actions { background: var(--colors-red-100); }
#orders-table th.actions { position: sticky; left: 0; top: 0; z-index: 4; }

/* Row actions kebab menu (floats over the table; appended to <body>) */
.row-actions-menu {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-neutral);
  border-radius: 0.5rem;
  box-shadow: 0 10px 24px -6px rgba(0,0,0,0.18), 0 4px 8px -3px rgba(0,0,0,0.08);
  min-width: 12rem; max-width: calc(100vw - 24px);
  padding: 0.25rem;
  overflow: hidden;
  animation: comboFade 0.12s ease-out;
}
.row-actions-menu .ram-option {
  width: 100%; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  background: none; border: none; text-align: right;
  font-family: inherit; font-size: 0.85rem; color: var(--colors-neutral-800);
  border-radius: 0.375rem; cursor: pointer;
}
.row-actions-menu .ram-option:hover { background: var(--colors-primary-50); }
.row-actions-menu .ram-option svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--colors-neutral-500); }
.row-actions-menu .ram-option.danger { color: var(--colors-red-600); }
.row-actions-menu .ram-option.danger svg { color: var(--colors-red-600); }
.row-actions-menu .ram-option.danger:hover { background: var(--colors-red-50); }

/* ---- البحث الشامل (header omni-search) ----
   Panel z-index sits just above .notif-panel (1200) and well under .modal-overlay
   (1000 is below, .ui-stack 4000 above) — results must clear the sticky .app-header
   (z 50) and the page, but never cover an open dialog. */
.omni-wrap { position:relative; display:flex; align-items:center; }
.omni-wrap.hidden { display:none; }
.omni-icon { position:absolute; inset-inline-start:0.6rem; color:rgba(255,255,255,0.75); pointer-events:none; }
.omni-input { width:min(20rem, 34vw); padding:0.4rem 0.7rem 0.4rem 2rem; padding-inline-start:2rem; padding-inline-end:0.7rem;
  border:1px solid rgba(255,255,255,0.28); border-radius:0.5rem; background:rgba(255,255,255,0.12);
  color:#fff; font-size:0.82rem; font-family:inherit; outline:none; transition:background .15s, border-color .15s, width .15s; }
.omni-input::placeholder { color:rgba(255,255,255,0.7); }
.omni-input:focus { background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.55); width:min(26rem, 42vw); }
.omni-input::-webkit-search-cancel-button { filter:invert(1) opacity(0.7); }
.omni-panel { position:absolute; top:calc(100% + 6px); inset-inline-start:0; width:min(30rem, 92vw);
  max-height:66vh; overflow:auto; background:var(--bg-surface,#fff); border:1px solid var(--colors-neutral-200);
  border-radius:0.6rem; box-shadow:0 10px 30px rgba(0,0,0,0.18); z-index:1250; color:var(--text-body,#111); }
.omni-panel.hidden { display:none; }
.omni-note { padding:0.7rem 0.85rem; color:var(--colors-neutral-500); font-size:0.82rem; }
.omni-item { display:block; width:100%; text-align:inherit; border:0; background:none; font:inherit; cursor:pointer;
  padding:0.55rem 0.85rem; border-bottom:1px solid var(--colors-neutral-100); line-height:1.55; }
.omni-item:hover, .omni-item.active { background:var(--colors-primary-50,#eff6ff); }
.omni-item:last-child { border-bottom:0; }
.omni-top { display:flex; align-items:center; gap:0.45rem; flex-wrap:wrap; }
.omni-no { font-weight:700; font-size:0.86rem; font-variant-numeric:tabular-nums; }
.omni-why { font-size:0.68rem; color:var(--colors-primary-700,#1d4ed8); background:var(--colors-primary-50,#eff6ff);
  border-radius:99px; padding:0.1rem 0.45rem; white-space:nowrap; }
.omni-sub { font-size:0.76rem; color:var(--colors-neutral-600); margin-top:0.15rem; }
.omni-snippet { font-size:0.74rem; color:var(--colors-neutral-500); margin-top:0.15rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ================== استعراض الطلب (merged request page) ==================
   One scroll instead of thirteen tabs. Each section keeps its module's own markup;
   these rules only give the stack a readable rhythm — a clear title, generous space
   between sections, and a light rule so the eye knows where one story ends. */
.rqd-overview { display:flex; flex-direction:column; gap:var(--space-4); }
.rqd-section { scroll-margin-top:5rem; }
.rqd-section-title {
  margin:0 0 var(--space-2); padding-bottom:0.4rem;
  font-size:1rem; font-weight:700; color:var(--colors-primary-700);
  border-bottom:2px solid var(--colors-primary-100);
}
/* On one page the card chrome multiplies: a section that only says «لا توجد …» was
   costing a full bordered box with padding, so the eye had to travel past four empty
   frames to reach the work. Inside the overview a section's cards lose their frame
   and keep only their content — each module's own card HEADER is the section title. */
.rqd-overview .rqd-section > .card {
  border:none; border-radius:0; background:transparent; overflow:visible;
}
.rqd-overview .rqd-section > .card > .card-header {
  background:transparent; padding-inline:0;
  border-bottom:2px solid var(--colors-primary-100);
}
.rqd-overview .rqd-section > .card > .card-header .card-title {
  font-size:1rem; font-weight:700; color:var(--colors-primary-700);
}
.rqd-overview .rqd-section > .card > .card-body { padding-inline:0; }
.rqd-overview .rqd-section .empty-state { padding:0.75rem 0; }
/* the eligibility panel now lives inside the header card — strip its own frame so the
   two read as one block rather than a box inside a box */
#rqd-header #rqd-transfer > .card {
  border:none; border-radius:0; background:transparent; padding:0;
  margin-top:var(--space-3); padding-top:var(--space-3);
  border-top:1px solid var(--border-neutral);
}

/* ================== لوحة المؤشرات (KPI dashboard) ==================
   Mark specs from the dataviz method: thin marks, 4px rounded data-ends anchored
   to the baseline, a 2px surface gap between adjacent fills, recessive grid/axes,
   and text in ink tokens (never the series color) so identity is never color-alone. */
/* ONE row for the tabs AND the period filter — they were two stacked bars that ate
   the first screen before a single number was visible. The tabs keep their own
   pill styling; the period controls sit at the end of the same line and drop to a
   second line only when the window is genuinely too narrow. */
.kpi-bar {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-2) var(--space-3); flex-wrap:wrap;
  margin-bottom:var(--space-3);
}
.kpi-bar-tabs { margin-bottom:0; flex:0 1 auto; }
.kpi-bar-period {
  display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap;
  flex:0 0 auto; margin-inline-start:auto;
}
.kpi-tiles {
  display:grid; gap:var(--space-2); margin-bottom:var(--space-3);
  grid-template-columns:repeat(auto-fit, minmax(9.5rem, 1fr));
}
.kpi-tile {
  background:var(--bg-surface,#fff); border:1px solid var(--border-neutral);
  border-radius:0.6rem; padding:0.85rem 1rem; text-align:center;
}
/* the number is the hero; the label must not compete with it */
.kpi-tile-value { font-size:1.75rem; font-weight:700; line-height:1.15; color:var(--colors-neutral-900); }
.kpi-tile-label { font-size:0.78rem; color:var(--colors-neutral-600); margin-top:0.15rem; }
.kpi-tile-hint  { font-size:0.66rem; color:var(--colors-neutral-500); margin-top:0.2rem; line-height:1.4; }

.kpi-row { display:grid; gap:var(--space-3); margin-bottom:var(--space-3);
  grid-template-columns:repeat(auto-fit, minmax(19rem, 1fr)); align-items:start; }
.kpi-card {
  background:var(--bg-surface,#fff); border:1px solid var(--border-neutral);
  border-radius:0.6rem; padding:1rem 1.1rem; margin-bottom:var(--space-3);
}
.kpi-card-title { margin:0 0 0.75rem; font-size:0.9rem; font-weight:700; color:var(--colors-neutral-800); }

/* Horizontal bars — chosen over vertical because every category label here is
   Arabic prose; rotated vertical labels would be unreadable. */
.kpi-bars { display:flex; flex-direction:column; gap:2px; }   /* 2px surface gap */
.kpi-bar-row { display:grid; grid-template-columns:minmax(6rem,11rem) 1fr auto; align-items:center; gap:0.6rem; padding:2px 0; }
.kpi-bar-label { font-size:0.78rem; color:var(--colors-neutral-700); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kpi-bar-track { background:var(--colors-neutral-100); border-radius:4px; height:0.7rem; overflow:hidden; }
.kpi-bar-fill  { height:100%; border-radius:4px; }            /* 4px rounded data-end */
.kpi-bar-value { font-size:0.78rem; font-weight:600; color:var(--colors-neutral-800); min-width:2.2rem; text-align:start; }

.kpi-progress { background:var(--colors-neutral-200); border-radius:4px; height:0.85rem; overflow:hidden; }
.kpi-progress.sm { height:0.5rem; }
.kpi-progress-fill { height:100%; border-radius:4px; background:#15803d; }
.kpi-progress-legend {
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  margin-top:0.5rem; font-size:0.76rem; color:var(--colors-neutral-600);
}
.kpi-dot { display:inline-block; width:0.6rem; height:0.6rem; border-radius:99px; margin-inline-end:0.3rem; vertical-align:middle; }

/* ---- مصفوفة الجهات: request × agency grid ----
   Wide by nature (21+ agency columns), so the FIRST column is pinned and the grid
   scrolls under it — the request number must stay readable at column 20. Agency
   headers are rotated because the labels are long ministry names and a horizontal
   header would make every column as wide as its title. */
.kpi-mx-scroll { overflow:auto; max-height:70vh; margin-top:var(--space-2); border:1px solid var(--border-neutral); border-radius:0.5rem; }
/* width:max-content is the whole fix for the huge gaps: a normal table stretches to
   its container and dumps ALL the leftover width on the few columns that have no
   fixed size — here «رقم الطلب» and «نسبة الإنجاز», which is why they were metres
   wide while the agency columns stayed thin. Sized to content, every column is as
   wide as it needs and no wider. */
.kpi-mx {
  border-collapse:separate; border-spacing:0; font-size:0.72rem;
  /* max-content alone left a gap at the end of the window; 100% alone dumped ALL the
     leftover on the two unconstrained columns. Together: never narrower than the
     window (so the spare width is shared across the columns to the very end) and free
     to grow past it when 21 agencies need more. */
  width:max-content; min-width:100%;
}
/* only the pinned columns refuse to wrap — an agency cell wraps its Arabic label
   instead of stretching its column to the width of the sentence.
   width:1% is the shrink-to-content idiom in auto table layout: «رقم الطلب» and
   «نسبة الإنجاز» claim exactly what their content needs, so the leftover width the
   min-width:100% creates is handed to the agency columns instead of being dumped on
   these two (which is why they were metres wide). */
.kpi-mx .kpi-mx-sticky, .kpi-mx .kpi-mx-lead { white-space:nowrap; width:1%; }
.kpi-mx .kpi-mx-lead { text-align:center; }
.kpi-mx thead th { position:sticky; top:0; z-index:2; background:var(--colors-primary-700); color:#fff; }
.kpi-mx .kpi-mx-vert { height:11rem; padding:0.3rem 0; width:2.1rem; min-width:2.1rem; }
.kpi-mx .kpi-mx-vert > span {
  display:block; writing-mode:vertical-rl; transform:rotate(180deg);
  white-space:nowrap; font-weight:600; font-size:0.7rem; margin:0 auto;
}
.kpi-mx .kpi-mx-sticky {
  position:sticky; inset-inline-start:0; z-index:3;
  background:var(--bg-surface,#fff); white-space:nowrap;
  padding:0.3rem 0.6rem;
  border-inline-end:1px solid var(--border-neutral);
}
.kpi-mx thead .kpi-mx-sticky { z-index:4; background:var(--colors-primary-700); }
/* the search box sits in the «رقم الطلب» header cell — the header is already tall
   because the agency labels are rotated, so it costs no extra height. */
.kpi-mx .kpi-mx-head { margin-bottom:0.4rem; }
/* solid white in BOTH states, with the ink token the rest of the app's inputs use
   (--colors-neutral-900). A translucent variant is what broke it: `thead th` sets
   color:#fff, so the moment a colour declaration on the input is dropped the text
   inherits white — invisible on a white focus background. One state, no inheritance
   to fall back to. */
.kpi-mx .kpi-mx-q {
  width:100%; min-width:7rem; height:1.9rem; padding:0 0.5rem;
  font-size:0.72rem; font-weight:400; border-radius:0.35rem;
  border:1px solid rgba(255,255,255,0.45);
  background:#fff; color:var(--colors-neutral-900);
}
.kpi-mx .kpi-mx-q::placeholder { color:var(--colors-neutral-500); opacity:1; }
.kpi-mx .kpi-mx-q:focus {
  outline:none; border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,0.28);
}
.kpi-mx .kpi-mx-cell {
  text-align:center; padding:0.3rem 0.4rem; line-height:1.35;
  border-bottom:1px solid var(--colors-neutral-100);
  /* no max-width: these are the columns that must ABSORB the spare width, so the
     table fills the window without the pinned two ballooning. */
  white-space:normal; min-width:5.5rem;
}
.kpi-mx tbody tr:hover .kpi-mx-sticky { background:var(--colors-primary-50); }

/* ---- in-app notifications (header bell) ---- */
.notif-count { position:absolute; top:-5px; inset-inline-start:-5px; background:var(--colors-red-600,#dc2626);
  color:#fff; border-radius:99px; font-size:0.62rem; line-height:1; padding:0.16rem 0.34rem; min-width:1rem;
  text-align:center; font-variant-numeric:tabular-nums; pointer-events:none; }
.notif-panel { position:absolute; top:calc(100% + 6px); inset-inline-start:0; width:min(360px, 92vw);
  max-height:60vh; overflow:auto; background:var(--bg-surface,#fff); border:1px solid var(--colors-neutral-200);
  border-radius:0.6rem; box-shadow:0 10px 30px rgba(0,0,0,0.14); z-index:1200; }
.notif-panel.hidden { display:none; }
.notif-head { display:flex; justify-content:space-between; align-items:center; padding:0.55rem 0.8rem;
  border-bottom:1px solid var(--colors-neutral-100); font-weight:700; font-size:0.85rem; position:sticky; top:0; background:inherit; }
.notif-item { padding:0.6rem 0.8rem; border-bottom:1px solid var(--colors-neutral-100); cursor:pointer; font-size:0.85rem; line-height:1.5; }
.notif-item:hover { background:var(--colors-neutral-50,#f8fafc); }
.notif-item.unread { background:var(--colors-primary-50,#eff6ff); }
.notif-when { font-size:0.72rem; color:var(--colors-neutral-500); margin-top:0.2rem; }
.notif-actions { display:flex; gap:0.4rem; margin-top:0.45rem; }
.notif-empty { padding:1rem; text-align:center; color:var(--colors-neutral-500); font-size:0.85rem; }
.data-table .empty-row td { text-align: center; padding: 3rem 1rem; color: var(--colors-neutral-500); }

/* ================== Badges ================== */
.badge {
  display: inline-flex; align-items: center;
  padding: 0.2rem 0.65rem;
  font-size: 0.7rem; font-weight: 500;
  border-radius: 9999px;
  white-space: nowrap; line-height: 1.5;
}
.badge-success { background: var(--colors-green-100); color: var(--colors-green-800); }
.badge-warning { background: var(--colors-yellow-100); color: var(--colors-yellow-800); }
.badge-error,
.badge-danger  { background: var(--colors-red-100); color: var(--colors-red-800); }
.badge-info    { background: var(--colors-blue-100); color: var(--colors-blue-800); }
.badge-neutral { background: var(--colors-neutral-100); color: var(--colors-neutral-800); }

/* Incomplete order (assigned to an employee for completion) shown in the main
   orders table: a subtle red row tint + a red alert icon in the serial cell, so
   the assignee can immediately spot the rows that still need their data. */
.data-table tbody tr.row-incomplete { background: var(--colors-red-50); }
.data-table tbody tr.row-incomplete:hover { background: var(--colors-red-100); }
.inc-dot { display: inline-flex; vertical-align: middle; color: var(--colors-red-600); margin-inline-start: 0.3rem; }
.inc-dot svg { width: 1rem; height: 1rem; }

/* Administrative-boundary labels on the aerial editor map — readable over
   satellite imagery (no box, bold text with a dark halo). */
.ae-admin-label { background: transparent; border: none; box-shadow: none; color: #fff;
  font-weight: 700; font-size: 0.78rem; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 2px #000; }
.ae-admin-label::before { display: none; }

/* ================== Pagination ================== */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-neutral);
  background: var(--colors-neutral-50);
  font-size: 0.8125rem;
  flex-wrap: wrap; gap: 0.75rem;
}
.pagination-info { color: var(--colors-neutral-600); }
.pagination-controls { display: flex; gap: 0.25rem; align-items: center; }
.page-btn {
  min-width: 2rem; height: 2rem; padding: 0 0.5rem;
  border: 1px solid var(--border-neutral);
  background: #fff; border-radius: 0.375rem;
  font-size: 0.8125rem; cursor: pointer;
  color: var(--colors-neutral-700);
}
.page-btn:hover:not(:disabled) { background: var(--colors-neutral-100); }
.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.page-btn.active { background: var(--colors-primary-600); color: #fff; border-color: var(--colors-primary-600); }

/* ================== Modal ================== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: none; justify-content: center; align-items: center;
  z-index: 1000;
  backdrop-filter: blur(3px);
  padding: 1rem;
}
.modal-overlay.active { display: flex; animation: fadeIn 0.25s ease-out; }
.modal {
  background: #fff; border-radius: 0.75rem;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.18), 0 10px 10px -5px rgba(0,0,0,0.05);
  width: 100%; max-width: 520px; max-height: 94vh;
  display: flex; flex-direction: column; overflow: hidden;
  animation: slideUp 0.25s ease-out;
}
.modal.large { max-width: min(1280px, 96vw); }
.modal-header {
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--border-neutral);
  background: var(--colors-neutral-50);
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.modal-title { font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--colors-neutral-900); }
.modal-close {
  background: none; border: none;
  width: 2rem; height: 2rem;
  border-radius: 0.375rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--colors-neutral-500);
}
.modal-close:hover { background: var(--colors-neutral-100); color: var(--colors-neutral-900); }
.modal-body {
  padding: var(--modal-pad-y) var(--modal-pad-x);
  overflow-y: auto;
  flex: 1;
  min-height: 22rem;
}
.modal.large .modal-body { padding: 1.5rem 1.75rem; }
.modal-footer {
  padding: 0.85rem 1.4rem;
  border-top: 1px solid var(--border-neutral);
  background: var(--colors-neutral-50);
  display: flex; gap: 0.5rem;
  justify-content: flex-start; flex-wrap: wrap;
  align-items: center;
}
.modal-footer .spacer { flex: 1; }

/* ===== Small confirm / choice dialog (uiConfirm) ===== */
.modal.modal-sm { max-width: 440px; }
.modal.modal-sm .modal-body { min-height: 0; padding: 1.3rem 1.4rem; line-height: 1.7; }
.ui-confirm-footer { justify-content: flex-end; }
.ui-confirm-footer.stack { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.ui-confirm-footer.stack .btn { width: 100%; justify-content: center; margin: 0; }
/* Self-contained confirm/prompt dialogs (uiConfirm/uiPrompt) mount their own
   overlay on <body> so they STACK above whatever window is already open —
   form modals (z 1000) and map modals (z 3000). Keep them on top. */
.modal-overlay.ui-stack { z-index: 4000; }
.confirm-icon {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.9rem;
}
.confirm-icon svg { width: 1.5rem; height: 1.5rem; }
.confirm-icon-neutral { background: var(--colors-neutral-100); color: var(--colors-neutral-700); }
.confirm-icon-danger  { background: var(--colors-red-50);      color: var(--colors-red-600); }

/* Checkbox grid (departments / page-access pickers in the user dialog) */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.3rem 0.75rem;
  border: 1px solid var(--colors-neutral-200);
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: none; } }

/* silent feedback when clicking outside a form modal: the window pulses
   briefly to show it only closes from its buttons */
@keyframes modalPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.018); }
  100% { transform: scale(1); }
}
.modal.modal-pulse { animation: modalPulse 0.22s ease-out; }

/* ================== Tabs (modal) ================== */
.tabs-bar {
  display: flex;
  border-bottom: 1px solid var(--border-neutral);
  background: var(--colors-neutral-50);
  margin: calc(-1 * var(--modal-pad-y)) calc(-1 * var(--modal-pad-x)) var(--space-4);
  padding: 0 var(--modal-pad-x);
  gap: 0.25rem; overflow-x: auto;
}
.tab-btn {
  padding: 0.5rem 1rem; background: none; border: none;
  font-size: 0.875rem; font-weight: 500; color: var(--colors-neutral-600);
  cursor: pointer; border-radius: 0.375rem;
  margin: 0.45rem 0;
  transition: all 0.2s ease; white-space: nowrap;
}
.tab-btn:hover { color: var(--colors-neutral-900); background: var(--colors-neutral-100); }
.tab-btn.active { color: var(--colors-primary-800); background: var(--colors-primary-100); font-weight: 600; }
.tab-panel { display: none; animation: fadeIn 0.2s ease-out; }
.tab-panel.active { display: block; }

/* ================== Wizard ================== */
.wizard-stepper {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0;
  padding: 0.5rem 0 1.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--colors-neutral-100);
}
.wizard-step {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.8125rem;
}
.wizard-step-num {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--colors-neutral-300);
  background: #fff; color: var(--colors-neutral-500);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.8125rem;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.wizard-step-label { color: var(--colors-neutral-600); font-weight: 500; }
.wizard-step.completed .wizard-step-num { background: var(--colors-primary-600); border-color: var(--colors-primary-600); color: #fff; }
.wizard-step.current .wizard-step-num { border-color: var(--colors-primary-600); color: var(--colors-primary-700); background: var(--colors-primary-50); }
.wizard-step.current .wizard-step-label { color: var(--colors-primary-700); font-weight: 600; }
.wizard-connector {
  width: 2.5rem; height: 2px;
  background: var(--colors-neutral-300);
  margin: 0 0.5rem;
}
.wizard-connector.completed { background: var(--colors-primary-600); }
.wizard-group-title {
  font-size: 0.95rem; font-weight: 600; color: var(--colors-neutral-800);
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem; border-bottom: 1px dashed var(--colors-neutral-200);
}
@media (max-width: 768px) {
  .wizard-step-label { display: none; }
  .wizard-connector { width: 1rem; margin: 0 0.25rem; }
}

/* ================== Toast ================== */
.toast-container {
  position: fixed; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 0.5rem;
  /* Above every overlay (modal-overlay 1000, map-overlay 3000, ui-stack 4000,
     auth-screen 5000) so a toast is never hidden behind a dialog. pointer-events
     stays none so it doesn't block the dialog underneath it. */
  z-index: 6000; pointer-events: none;
}
.toast {
  background: #fff; border: 1px solid var(--border-neutral);
  padding: 0.7rem 1rem; border-radius: 0.5rem;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  font-size: 0.875rem; color: var(--colors-neutral-800);
  /* none: the toast sits above dialogs (z-index 6000) but auto-dismisses and has
     no click action, so it must never intercept clicks meant for the dialog. */
  min-width: 240px; pointer-events: none;
  animation: slideUp 0.25s ease-out;
}
.toast.success { background: var(--colors-primary-50); border-color: var(--colors-primary-200); color: var(--colors-primary-800); }
.toast.error   { background: var(--colors-red-50); border-color: var(--colors-red-200); color: var(--colors-red-800); }
.toast.warning { background: var(--colors-yellow-50); border-color: var(--colors-yellow-200); color: var(--colors-yellow-800); }
.toast.info    { background: var(--colors-blue-50); border-color: var(--colors-blue-200); color: var(--colors-blue-800); }

/* ================== Empty state ================== */
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--colors-neutral-500); }
.empty-state svg { width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; color: var(--colors-neutral-300); }
.empty-state h3 { color: var(--colors-neutral-700); margin: 0 0 0.5rem; font-weight: 600; }

/* ================== Footer ================== */
.app-footer {
  background: linear-gradient(135deg, var(--footer-grad-start) 0%, var(--footer-grad-end) 100%);
  color: rgba(255,255,255,0.85);
  padding: 1.25rem 2rem;
  margin-top: 2rem;
  text-align: center; font-size: 0.8125rem;
}
.app-footer strong { color: #fff; }

/* ================== View detail (read-only) ================== */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; }
.detail-item { display: flex; flex-direction: column; padding: 0.5rem 0; border-bottom: 1px dashed var(--colors-neutral-200); }
.detail-item.full { grid-column: 1 / -1; }
.detail-label { font-size: 0.75rem; color: var(--colors-neutral-500); margin-bottom: 0.2rem; }
.detail-label svg { width: 0.85rem; height: 0.85rem; vertical-align: -2px; flex-shrink: 0; }

/* Linked aerial/decision chips in the order links tab (preview + open) */
.link-chip { display: inline-flex; align-items: stretch; max-width: 100%; border: 1px solid var(--colors-neutral-200); border-radius: 0.5rem; overflow: hidden; background: #fff; }
.link-chip-main { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; padding: 0.35rem 0.6rem; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 0.8rem; color: var(--colors-neutral-800); }
.link-chip-main:hover { background: var(--colors-primary-50); }
.link-chip-main svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; color: var(--colors-primary-700); }
.link-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-chip-open { display: inline-flex; align-items: center; padding: 0 0.5rem; background: var(--colors-neutral-50); border: none; border-inline-start: 1px solid var(--colors-neutral-200); cursor: pointer; color: var(--colors-neutral-500); }
.link-chip-open:hover { background: var(--colors-primary-50); color: var(--colors-primary-700); }
.link-chip-open svg { width: 0.85rem; height: 0.85rem; }

/* Decision read-only preview card (opened from the order links tab) */
.dprev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.25rem; }
.dprev-row { display: flex; flex-direction: column; padding: 0.4rem 0; border-bottom: 1px dashed var(--colors-neutral-200); }
.dprev-k { font-size: 0.72rem; color: var(--colors-neutral-500); margin-bottom: 0.15rem; }
.dprev-v { font-size: 0.9rem; color: var(--colors-neutral-900); word-wrap: break-word; }
.dprev-sect { margin-top: 1rem; }
.dprev-sect-t { font-size: 0.8rem; font-weight: 600; color: var(--colors-primary-800); margin-bottom: 0.35rem; }
.dprev-text { font-size: 0.88rem; color: var(--colors-neutral-800); white-space: pre-wrap; line-height: 1.6; }
.dprev-conds { margin: 0; padding-inline-start: 1.25rem; font-size: 0.88rem; color: var(--colors-neutral-800); line-height: 1.7; }
@media (max-width: 600px) { .dprev-grid { grid-template-columns: 1fr; } }
.detail-value { font-size: 0.9rem; color: var(--colors-neutral-900); word-wrap: break-word; }
.detail-value.empty { color: var(--colors-neutral-400); font-style: italic; }
@media (max-width: 600px) { .detail-grid { grid-template-columns: 1fr; } }

/* ================== Settings ================== */
.settings-section {
  background: #fff; border: 1px solid var(--border-neutral);
  border-radius: 0.5rem; padding: 1.25rem;
  margin-bottom: 0.85rem;
}
.settings-section h3 { margin: 0 0 0.6rem; font-size: 1rem; font-weight: 600; color: var(--colors-neutral-900); }
.settings-section p { color: var(--colors-neutral-600); font-size: 0.875rem; margin: 0 0 0.9rem; line-height: 1.6; }
.settings-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ================== List Editor ================== */
.chip-list {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  padding: 0.75rem;
  background: var(--colors-neutral-50);
  border: 1px solid var(--colors-neutral-200);
  border-radius: 0.5rem;
  min-height: 3rem;
  max-height: 18rem;
  overflow-y: auto;
}
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  background: #fff;
  border: 1px solid var(--border-neutral);
  border-radius: 9999px;
  font-size: 0.8125rem;
  color: var(--colors-neutral-800);
}
.chip button {
  background: none; border: none;
  color: var(--colors-neutral-400); cursor: pointer;
  padding: 0; width: 1rem; height: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.chip button:hover { background: var(--colors-red-50); color: var(--colors-red-600); }
.chip button svg { width: 0.8rem; height: 0.8rem; }
/* Read-only "system/locked" chip (fixed departments) — visually distinct from an
   editable chip: muted surface, a lock glyph, and NO clickable affordance. */
.chip.chip-locked { background: var(--colors-neutral-50, #f8fafc); border-color: var(--colors-neutral-200, #e2e8f0); color: var(--colors-neutral-600); cursor: default; }
.chip.chip-locked svg { width: 0.8rem; height: 0.8rem; color: var(--colors-neutral-400); flex-shrink: 0; }
.chip.chip-locked .chip-locked-name { cursor: default; }   /* no hover underline/pointer */
.chip-empty { color: var(--colors-neutral-400); font-style: italic; font-size: 0.875rem; padding: 0.5rem; }

.list-add-row { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.list-add-row input { flex: 1; }

.list-editor-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1rem;
}

/* ===== Regions & cities (national-address) settings section ===== */
.area-grid { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 760px) { .area-grid { grid-template-columns: 1fr; } }
.area-regions {
  display: flex; flex-direction: column; gap: 0.2rem;
  background: var(--colors-neutral-50); border: 1px solid var(--colors-neutral-200);
  border-radius: 0.5rem; padding: 0.4rem; max-height: 26rem; overflow-y: auto;
}
.area-region {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  background: transparent; border: 0; border-radius: 0.4rem; cursor: pointer;
  padding: 0.5rem 0.6rem; font: inherit; font-size: 0.85rem; color: var(--colors-neutral-700); text-align: start;
}
.area-region:hover { background: var(--colors-neutral-100); color: var(--colors-neutral-900); }
.area-region.active { background: var(--colors-primary-600); color: #fff; font-weight: 600; }
.area-region .count {
  background: var(--colors-neutral-200); color: var(--colors-neutral-700);
  border-radius: 999px; padding: 0.05rem 0.45rem; font-size: 0.72rem; font-variant-numeric: tabular-nums;
}
.area-region.active .count { background: rgba(255,255,255,0.25); color: #fff; }
.area-cities-wrap { border: 1px solid var(--colors-neutral-200); border-radius: 0.5rem; overflow: hidden; }
.area-cities-head {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--colors-neutral-200); background: var(--colors-neutral-50);
}
.area-cities-head strong { color: var(--colors-neutral-900); }
.area-cities-head .text-input { margin-inline-start: auto; width: auto; min-width: 200px; flex: 1; max-width: 320px; }
.area-cities {
  display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.75rem; max-height: 22rem; overflow-y: auto;
}
.area-city {
  background: var(--colors-neutral-100); border: 1px solid var(--colors-neutral-200);
  border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.8rem; color: var(--colors-neutral-800);
}
.area-more { width: 100%; padding: 0.3rem; font-size: 0.78rem; color: var(--colors-neutral-500); }

/* ===== Decision site picker + aerial preview ===== */
.dec-site {
  margin-top: 0.5rem; border: 1px dashed var(--colors-primary-200);
  background: var(--colors-primary-50); border-radius: 0.5rem; padding: 0.55rem 0.65rem;
}
.dec-site-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dec-site-status { margin-top: 0.4rem; font-size: 0.82rem; color: var(--colors-neutral-700); }
.dec-site-preview { margin-top: 0.5rem; }
.dec-site-preview img { display: block; }
.site-row:hover { border-color: var(--colors-primary-600) !important; background: var(--colors-primary-50) !important; }
.site-row svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--colors-neutral-400); }
.list-tabs {
  display: flex; flex-direction: column; gap: 0.2rem;
  background: var(--colors-neutral-50);
  border: 1px solid var(--colors-neutral-200);
  border-radius: 0.5rem;
  padding: 0.4rem;
  max-height: 28rem;
  overflow-y: auto;
}
.list-tab {
  padding: 0.55rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  cursor: pointer;
  background: none; border: none;
  text-align: right;
  color: var(--colors-neutral-700);
  display: flex; justify-content: space-between; align-items: center;
}
.list-tab:hover { background: var(--colors-neutral-100); }
.list-tab.active { background: var(--colors-primary-600); color: #fff; font-weight: 600; }
.list-tab .count { font-size: 0.7rem; opacity: 0.7; }
.list-tab.active .count { opacity: 1; }

@media (max-width: 768px) {
  .list-editor-grid { grid-template-columns: 1fr; }
  .list-tabs { flex-direction: row; flex-wrap: wrap; max-height: none; }
}

/* ================== Responsive ================== */
@media (max-width: 768px) {
  .app-shell { padding: 1rem; }
  .header-row { padding: 0.75rem 1rem; }
  .nav-row { padding: 0 1rem; }
}

/* ================== Print ================== */
@media print {
  body { background: #fff; }
  .app-header, .app-footer, .toolbar, .pagination,
  .modal-overlay, .page-header, .toast-container { display: none !important; }
  .app-shell { display: block; padding: 0; max-width: 100%; }
  /* Printing a BUILT document (window.printDocument in widgets.js sets the flag):
     the sheet owns the paper — the SPA view must not be emitted beside it. */
  body.printing-doc .app-shell { display: none !important; }
  .print-card { display: block !important; padding: 1rem; font-size: 12pt; color: #000; }
  .print-card h1 { text-align: center; font-size: 18pt; border-bottom: 1px solid var(--colors-primary-600); padding-bottom: 0.5rem; margin-bottom: 1rem; }
  .print-card .detail-item { break-inside: avoid; border-bottom: 1px solid #ccc; }
  @page { size: A4; margin: 1.5cm; }
}
.print-card { display: none; }

/* ============================================================
   نموذج إجابة الجهات الحكومية — the OFFICIAL print/PDF sheet (.af-doc)
   ------------------------------------------------------------
   A self-contained document style so the form is professional WITHOUT an admin
   having to upload a DOCX template (that path still wins when a template exists —
   see assets/alloc_desk.js generateAnswerForm). Black-on-white, A4, a repeating
   table header on every page, and rows/blocks that never split across pages.
   Screen rules mirror print so «معاينة» looks exactly like the paper.
   ============================================================ */
.af-doc { color: #000; background: #fff; font-size: 11pt; line-height: 1.6; }
.af-doc .af-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 2.5pt solid #000; padding-bottom: 8px; margin-bottom: 4px; }
.af-doc .af-head img { height: 58px; width: auto; }
.af-doc .af-org { text-align: center; flex: 1; }
.af-doc .af-org .af-org1 { font-size: 13pt; font-weight: 700; }
.af-doc .af-org .af-org2 { font-size: 10.5pt; }
.af-doc .af-org .af-org3 { font-size: 9.5pt; color: #333; }
.af-doc .af-title { text-align: center; font-size: 15pt; font-weight: 700; margin: 12px 0 4px;
  border: 1.2pt solid #000; padding: 6px 10px; }
.af-doc .af-meta { display: flex; justify-content: space-between; font-size: 9.5pt; color: #222; margin-bottom: 10px; }
/* identity block — a 2-column key/value grid that never splits a pair */
.af-doc .af-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-bottom: 12px; }
.af-doc .af-kv > div { display: flex; gap: 6px; padding: 3.5px 0; border-bottom: 0.6pt dotted #999; break-inside: avoid; }
.af-doc .af-kv .k { min-width: 8.5rem; font-weight: 700; }
.af-doc .af-kv .v { flex: 1; }
.af-doc .af-sec { font-size: 12pt; font-weight: 700; margin: 14px 0 6px; padding: 4px 8px;
  background: #eee; border-inline-start: 3pt solid #000; break-after: avoid; }
.af-doc table.af-t { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.af-doc table.af-t th, .af-doc table.af-t td { border: 0.8pt solid #000; padding: 4px 5px; vertical-align: top; text-align: start; }
.af-doc table.af-t thead th { background: #e8e8e8; font-weight: 700; text-align: center; }
.af-doc table.af-t thead { display: table-header-group; }   /* repeat the header on every page */
.af-doc table.af-t tr { break-inside: avoid; page-break-inside: avoid; }
.af-doc table.af-t td.num { text-align: center; width: 2.2rem; }
.af-doc .af-pre { white-space: pre-wrap; }
.af-doc .af-cond { margin: 0; padding-inline-start: 1.1rem; }
.af-doc .af-cond li { margin-bottom: 2px; break-inside: avoid; }
.af-doc .af-muted { color: #555; }
/* signature block — three columns, kept together at the end */
.af-doc .af-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; break-inside: avoid; }
.af-doc .af-sign > div { text-align: center; font-size: 10pt; }
.af-doc .af-sign .line { margin-top: 34px; border-top: 0.8pt solid #000; padding-top: 3px; }
.af-doc .af-foot { margin-top: 14px; border-top: 0.6pt solid #666; padding-top: 4px;
  font-size: 8.5pt; color: #444; display: flex; justify-content: space-between; }
@media print {
  /* the sheet owns the page while printing: no app chrome, no shadows/rounding */
  .print-card .af-doc { font-size: 10.5pt; }
  .print-card .af-doc .af-head img { height: 52px; }
  @page { size: A4 portrait; margin: 1.2cm; }
}

/* ================== Auth Screen ================== */
.auth-screen {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, var(--footer-grad-start) 0%, var(--colors-primary-600) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; z-index: 5000;
}
.auth-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  width: 100%; max-width: 420px;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
}
.auth-header {
  padding: 1.5rem 1.75rem 1rem;
  text-align: center;
}
.auth-logo {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.1rem;
}
.auth-logo-img { height: 3rem; width: auto; display: block; }
.auth-logo svg { width: 2.25rem; height: 2.25rem; }
.auth-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.35rem; color: var(--colors-neutral-900); }
.auth-subtitle { font-size: 0.875rem; color: var(--colors-neutral-600); margin: 0; line-height: 1.5; }
.auth-body { padding: 0.5rem 1.75rem 1.75rem; }
.auth-body .form-field { margin-bottom: 0.85rem; }
.auth-body .btn { width: 100%; padding: 0.7rem; margin-top: 0.5rem; font-size: 0.95rem; }
.auth-footer-text {
  font-size: 0.75rem; color: var(--colors-neutral-500);
  text-align: center;
  padding: 0.85rem;
  background: var(--colors-neutral-50);
  border-top: 1px solid var(--colors-neutral-100);
}

/* ===== Two-factor authentication (TOTP) screen ===== */
.twofa-card { max-width: 540px; }
.twofa-card .auth-body { max-height: calc(100vh - 9rem); overflow-y: auto; }
.twofa-steps { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem; }
.twofa-step {
  border: 1px solid var(--colors-neutral-200);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--colors-neutral-50);
}
.twofa-step-head {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.9rem; color: var(--colors-neutral-800);
  margin-bottom: 0.75rem; line-height: 1.45;
}
.twofa-step-num {
  flex: 0 0 auto;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--colors-primary-600); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700;
}
.twofa-apps { display: flex; flex-direction: column; gap: 0.75rem; }
.twofa-app {
  border: 1px solid var(--colors-neutral-200);
  border-radius: 0.6rem; padding: 0.75rem; background: #fff;
}
.twofa-app-name { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.6rem; color: var(--colors-neutral-800); text-align: center; }
.twofa-stores { display: flex; gap: 0.75rem; }
.twofa-store { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; }
.twofa-store-label { font-size: 0.7rem; color: var(--colors-neutral-500); }
.twofa-store .btn { width: 100%; padding: 0.35rem; font-size: 0.75rem; margin: 0; }
.twofa-qr {
  background: #fff; border: 1px solid var(--colors-neutral-200);
  border-radius: 0.5rem; padding: 0.4rem; line-height: 0;
}
.twofa-qr img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.twofa-qr-sm { width: 104px; }
.twofa-qr-lg { width: 196px; margin: 0 auto; padding: 0.6rem; }
.twofa-qr-fail { font-size: 0.72rem; color: var(--colors-red-600); line-height: 1.4; padding: 0.5rem; }
.twofa-enroll { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.twofa-manual { text-align: center; width: 100%; }
.twofa-manual-label { font-size: 0.75rem; color: var(--colors-neutral-500); margin-bottom: 0.4rem; }
.twofa-secret {
  display: block;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.95rem; letter-spacing: 0.12em; font-weight: 600;
  background: var(--colors-neutral-100); color: var(--colors-neutral-900);
  border-radius: 0.5rem; padding: 0.55rem 0.5rem; margin-bottom: 0.5rem;
  word-break: break-all;
}
.twofa-code-row { display: flex; gap: 0.5rem; align-items: stretch; }
.twofa-code-input {
  flex: 1; text-align: center; font-size: 1.35rem;
  letter-spacing: 0.45em; font-weight: 700;
  font-family: ui-monospace, Menlo, Consolas, monospace; padding: 0.5rem;
}
.twofa-code-row .btn { margin: 0; flex: 0 0 auto; width: auto; padding: 0.5rem 1.25rem; }
.twofa-recovery-toggle { text-align: center; margin-top: 0.85rem; font-size: 0.8rem; }
.twofa-recovery-toggle a { color: var(--colors-primary-700); text-decoration: underline; cursor: pointer; }
.twofa-recovery { margin-top: 0.85rem; }
.twofa-actions { text-align: center; margin-top: 1rem; }
.twofa-actions .btn { width: auto; margin: 0; }
.twofa-codes {
  list-style: none; padding: 0; margin: 0.85rem 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem;
}
.twofa-codes li {
  background: var(--colors-neutral-50);
  border: 1px solid var(--colors-neutral-200);
  border-radius: 0.4rem; padding: 0.45rem; text-align: center;
}
.twofa-codes code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9rem; letter-spacing: 0.05em; }
.twofa-codes-actions { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 0.75rem; }
.twofa-codes-actions .btn { width: auto; margin: 0; }
.twofa-ack { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--colors-neutral-700); justify-content: center; margin: 0.5rem 0; cursor: pointer; }
@media (max-width: 480px) {
  .twofa-stores { flex-direction: column; align-items: center; }
  .twofa-qr-sm { width: 128px; }
  .twofa-codes { grid-template-columns: 1fr; }
}

/* ================== ComboBox ================== */
.combo { position: relative; }
.combo-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: #fff;
  border: 1px solid var(--border-neutral);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--colors-neutral-900);
  cursor: pointer;
  text-align: right;
  transition: all 0.15s ease;
}
.combo-trigger:hover { border-color: var(--colors-neutral-400); }
.combo-trigger.open,
.combo-trigger:focus {
  outline: none;
  border-color: var(--colors-primary-600);
  box-shadow: 0 0 0 3px var(--colors-primary-100);
}
.combo-display {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.combo-display.placeholder { color: var(--colors-neutral-400); }
.combo-chevron {
  width: 1rem; height: 1rem;
  color: var(--colors-neutral-400);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.combo-trigger.open .combo-chevron { transform: rotate(180deg); }
.combo-panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  left: 0;
  background: #fff;
  border: 1px solid var(--border-neutral);
  border-radius: 0.5rem;
  box-shadow: 0 10px 20px -5px rgba(0,0,0,0.15), 0 4px 6px -2px rgba(0,0,0,0.05);
  z-index: 100;
  overflow: hidden;
  animation: comboFade 0.12s ease-out;
}
.combo-panel.open { display: flex; flex-direction: column; }
@keyframes comboFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.combo-search-wrap {
  position: relative;
  padding: 0.5rem 0.5rem 0.4rem;
  border-bottom: 1px solid var(--colors-neutral-100);
}
.combo-search {
  width: 100%;
  padding: 0.4rem 2rem 0.4rem 0.6rem;
  border: 1px solid var(--colors-neutral-200);
  border-radius: 0.375rem;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--colors-neutral-50);
}
.combo-search:focus {
  outline: none;
  border-color: var(--colors-primary-600);
  background: #fff;
  box-shadow: 0 0 0 2px var(--colors-primary-100);
}
.combo-search-icon {
  position: absolute;
  right: 1rem; top: 50%; transform: translateY(-50%);
  width: 0.9rem; height: 0.9rem;
  color: var(--colors-neutral-400);
  pointer-events: none;
}
.combo-list {
  max-height: 14rem;
  overflow-y: auto;
  padding: 0.25rem;
}
.combo-option {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: none; border: none;
  text-align: right;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--colors-neutral-800);
  border-radius: 0.375rem;
  cursor: pointer;
}
.combo-option:hover,
.combo-option.highlighted { background: var(--colors-primary-50); color: var(--colors-primary-800); }
.combo-option.selected {
  background: var(--colors-primary-100);
  color: var(--colors-primary-800);
  font-weight: 600;
}
.combo-option .check { width: 1rem; height: 1rem; opacity: 0; flex-shrink: 0; }
.combo-option.selected .check { opacity: 1; color: var(--colors-primary-700); }
.combo-empty {
  padding: 1rem;
  text-align: center;
  color: var(--colors-neutral-400);
  font-size: 0.85rem;
}

.combo.combo-error .combo-trigger { border-color: var(--border-error); }

.combo.combo-compact .combo-search-wrap { display: none; }
.combo.combo-compact .combo-list { padding-top: 0.4rem; }

/* ----- Multi-select combo ----- */
.combo.combo-multi.has-value .combo-trigger {
  border-color: var(--colors-primary-600);
  background: var(--colors-primary-50);
}
.combo.combo-multi.has-value .combo-display { color: var(--colors-primary-800); font-weight: 600; }
.combo-multi-footer {
  display: flex; justify-content: flex-start;
  padding: 0.4rem 0.5rem;
  border-top: 1px solid var(--colors-neutral-100);
}
.combo-clear-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  background: var(--colors-neutral-50);
  border: 1px solid var(--colors-neutral-200);
  border-radius: 0.375rem;
  font-family: inherit; font-size: 0.8rem;
  color: var(--colors-neutral-700);
  cursor: pointer;
  transition: all 0.15s ease;
}
.combo-clear-btn:hover { background: var(--colors-red-50); border-color: var(--border-error); color: var(--border-error); }
.combo-clear-btn.hidden { display: none; }

/* ----- Orders table: column show/hide + drag-to-reorder panel ----- */
.cols-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.6rem;
}
.cols-sortable {
  list-style: none; margin: 0; padding: 0.15rem;
  display: flex; flex-direction: column; gap: 0.35rem;
  max-height: 22rem; overflow-y: auto;
}
.cols-sortable .col-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  background: #fff;
  border: 1px solid var(--border-neutral);
  border-radius: 0.4rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.cols-sortable .col-item:hover { border-color: var(--colors-primary-200); }
.cols-sortable .col-item.dragging { opacity: 0.5; border-style: dashed; border-color: var(--colors-primary-600); }
.cols-sortable .col-item.drop-target { box-shadow: 0 0 0 2px var(--colors-primary-200); }
.col-drag-handle {
  display: inline-flex; align-items: center;
  color: var(--colors-neutral-400);
  cursor: grab; flex-shrink: 0;
}
.col-drag-handle:active { cursor: grabbing; }
.col-drag-handle svg { width: 1rem; height: 1rem; }
.cols-sortable .col-check {
  display: flex; align-items: center; gap: 0.45rem;
  flex: 1; cursor: pointer; font-size: 0.85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cols-sortable .col-check input { flex-shrink: 0; }

/* ================== Date Picker ================== */
.datepicker { position: relative; }
.datepicker-trigger {
  width: 100%;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: #fff;
  border: 1px solid var(--border-neutral);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--colors-neutral-900);
  cursor: pointer;
  text-align: right;
  transition: all 0.15s ease;
}
.datepicker-trigger:hover { border-color: var(--colors-neutral-400); }
.datepicker-trigger.open,
.datepicker-trigger:focus {
  outline: none;
  border-color: var(--colors-primary-600);
  box-shadow: 0 0 0 3px var(--colors-primary-100);
}
.datepicker-icon { width: 1rem; height: 1rem; color: var(--colors-neutral-500); flex-shrink: 0; }
.datepicker-display { flex: 1; }
.datepicker-display.placeholder { color: var(--colors-neutral-400); }

.datepicker-panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  background: #fff;
  border: 1px solid var(--border-neutral);
  border-radius: 0.75rem;
  box-shadow: 0 16px 32px -8px rgba(0,0,0,0.18), 0 6px 12px -4px rgba(0,0,0,0.08);
  z-index: 110;
  overflow: hidden;
  width: 22rem;
  animation: comboFade 0.15s ease-out;
}
.datepicker-panel.open { display: block; }
.datepicker-nav-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 0.85rem 0.4rem;
}
.datepicker-month-stack {
  display: flex; flex-direction: column;
  align-items: center; gap: 0.1rem;
  flex: 1;
}
.datepicker-month-stack .greg {
  font-size: 0.95rem; font-weight: 700;
  color: var(--colors-neutral-900);
  background: transparent; border: none;
  font-family: inherit; cursor: pointer;
  padding: 0.15rem 0.5rem; border-radius: 0.375rem;
}
.datepicker-month-stack .greg:hover { background: var(--colors-neutral-100); }
.datepicker-month-stack .hij {
  font-size: 0.72rem; font-weight: 500;
  color: var(--colors-primary-700);
  letter-spacing: 0.1px;
}
.datepicker-nav-btn {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--colors-neutral-600);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.datepicker-nav-btn:hover:not(:disabled) { background: var(--colors-neutral-100); color: var(--colors-neutral-900); }
.datepicker-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.datepicker-nav-btn svg { width: 1.1rem; height: 1.1rem; }
.datepicker-month-label {
  background: transparent; border: none;
  font-family: inherit;
  font-size: 0.95rem; font-weight: 600;
  color: var(--colors-neutral-900);
  cursor: pointer;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
}
.datepicker-month-label:hover { background: var(--colors-neutral-100); }

.datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
  padding: 0.25rem 0.75rem 0.5rem;
}
.datepicker-weekday {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--colors-neutral-400);
  padding: 0.4rem 0;
}
.datepicker-day {
  min-height: 2.85rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.1rem;
  background: transparent; border: 1.5px solid transparent;
  border-radius: 0.5rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s ease;
  font-variant-numeric: tabular-nums;
  padding: 0.25rem 0;
}
.datepicker-day .greg-num {
  font-size: 0.95rem; font-weight: 600;
  color: var(--colors-neutral-800); line-height: 1;
}
.datepicker-day .hij-num {
  font-size: 0.7rem; font-weight: 500;
  color: var(--colors-primary-600); line-height: 1;
}
.datepicker-day:hover:not(:disabled):not(.selected) {
  background: var(--colors-primary-50);
}
.datepicker-day:hover:not(:disabled):not(.selected) .greg-num { color: var(--colors-primary-800); }
.datepicker-day.muted .greg-num { color: var(--colors-neutral-300); }
.datepicker-day.muted .hij-num { color: var(--colors-neutral-200); }
.datepicker-day.today {
  border-color: var(--colors-primary-600);
  background: var(--colors-primary-50);
}
.datepicker-day.today .greg-num { color: var(--colors-primary-700); font-weight: 700; }
.datepicker-day.selected {
  background: var(--colors-primary-600);
  border-color: var(--colors-primary-600);
  box-shadow: 0 2px 6px rgba(var(--primary-shadow-rgb), 0.35);
}
.datepicker-day.selected .greg-num { color: #fff; font-weight: 700; }
.datepicker-day.selected .hij-num { color: rgba(255,255,255,0.85); }
.datepicker-day:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.datepicker-day:disabled .greg-num { color: var(--colors-neutral-300); text-decoration: line-through; text-decoration-color: var(--colors-neutral-200); }
.datepicker-day:disabled .hij-num { color: var(--colors-neutral-200); }

.datepicker-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--colors-neutral-100);
  background: var(--colors-neutral-50);
  gap: 0.5rem;
}
.datepicker-footer button {
  padding: 0.4rem 0.75rem;
  background: transparent; border: 1px solid var(--colors-neutral-200);
  border-radius: 0.375rem;
  font-family: inherit;
  font-size: 0.8rem; font-weight: 500;
  color: var(--colors-neutral-700);
  cursor: pointer;
  transition: all 0.15s ease;
}
.datepicker-footer button:hover { background: #fff; border-color: var(--colors-neutral-400); }

/* ================== Year/Month Pickers (drill-down) ================== */
.datepicker-yearmonth {
  display: none;
  padding: 0.75rem;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  max-height: 16rem;
  overflow-y: auto;
}
.datepicker-yearmonth.open { display: grid; }
.datepicker-yearmonth button {
  padding: 0.55rem;
  background: transparent; border: 1px solid var(--colors-neutral-200);
  border-radius: 0.4rem;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--colors-neutral-800);
  cursor: pointer;
  transition: all 0.12s ease;
}
.datepicker-yearmonth button:hover:not(:disabled) { background: var(--colors-primary-50); border-color: var(--colors-primary-200); color: var(--colors-primary-800); }
.datepicker-yearmonth button.current { background: var(--colors-primary-600); color: #fff; border-color: var(--colors-primary-600); font-weight: 600; }
.datepicker-yearmonth button:disabled { opacity: 0.3; cursor: not-allowed; }

/* ================== Datetime Display (readonly) ================== */
.datetime-display {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: var(--colors-neutral-50);
  border: 1px dashed var(--colors-neutral-300);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: var(--colors-neutral-700);
  font-variant-numeric: tabular-nums;
  width: 100%;
}
.datetime-display svg { width: 1rem; height: 1rem; color: var(--colors-neutral-400); }

/* ================== Alerts banner (Dashboard) ================== */
.alerts-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 900px) { .alerts-banner { grid-template-columns: 1fr; } }
.alert-card {
  background: var(--colors-yellow-50);
  border: 1px solid var(--colors-yellow-200);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  display: flex; align-items: center; gap: 0.85rem;
  cursor: pointer;
  transition: all 0.18s ease;
}
.alert-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-1px); }
.alert-card.alert-tk { background: var(--colors-blue-50); border-color: var(--colors-blue-200); }
.alert-icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.5rem;
  background: #fff;
  border: 1px solid var(--colors-yellow-200);
  color: var(--colors-yellow-700);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.alert-icon svg { width: 1.25rem; height: 1.25rem; }
.alert-card.alert-tk .alert-icon { background: #fff; border-color: var(--colors-blue-200); color: var(--colors-blue-700); }
.alert-body { flex: 1; }
.alert-title { font-weight: 600; color: var(--colors-neutral-900); font-size: 0.9rem; margin-bottom: 0.2rem; }
.alert-sub { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.alert-chip {
  font-size: 0.72rem;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  font-weight: 500;
}
.alert-chip.overdue { background: var(--colors-red-100); color: var(--colors-red-800); }
.alert-chip.today { background: var(--colors-yellow-100); color: var(--colors-yellow-800); }
.alert-cta { font-size: 0.8rem; color: var(--colors-primary-700); font-weight: 600; }

/* ================== Followups / Tasks Cards ================== */
.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.85rem;
}
.fu-card {
  background: #fff;
  border: 1px solid var(--border-neutral);
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: all 0.15s ease;
  position: relative;
}
.fu-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.fu-card.overdue { border-color: var(--colors-red-200); background: var(--colors-red-50); }
.fu-card.today { border-color: var(--colors-yellow-200); background: var(--colors-yellow-50); }
.fu-card.upcoming { border-color: var(--colors-primary-200); }
.fu-card.completed { border-color: var(--colors-neutral-200); background: var(--colors-neutral-50); opacity: 0.75; }
.fu-card.completed .fu-title { text-decoration: line-through; color: var(--colors-neutral-500); }
.fu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.fu-title { font-weight: 600; font-size: 0.95rem; color: var(--colors-neutral-900); line-height: 1.3; }
.fu-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  font-size: 0.78rem; color: var(--colors-neutral-600);
}
.fu-meta svg { width: 0.85rem; height: 0.85rem; }
.fu-desc { color: var(--colors-neutral-700); font-size: 0.85rem; line-height: 1.5; }
.fu-link-ref {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; color: var(--colors-primary-700);
  background: var(--colors-primary-50);
  padding: 0.15rem 0.5rem; border-radius: 9999px;
  font-weight: 500;
}
.fu-actions { display: flex; gap: 0.3rem; margin-top: 0.4rem; }

.fu-tabs {
  display: flex; gap: 0.25rem;
  background: var(--colors-neutral-100);
  padding: 0.25rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  width: fit-content;
}
.fu-tab {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem; font-weight: 500;
  background: transparent; border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  color: var(--colors-neutral-700);
}
.fu-tab.active { background: #fff; color: var(--colors-primary-700); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.fu-tab .count { margin-inline-start: 0.4rem; font-size: 0.7rem; opacity: 0.7; }

/* Small utilities */
.flex-row { display: flex; align-items: center; gap: 0.5rem; }
.text-muted { color: var(--colors-neutral-500); }
.mt-1 { margin-top: 1rem; }
.mb-1 { margin-bottom: 1rem; }
.hidden { display: none !important; }

/* ================== Role badges (new) ================== */
.role-badge { display:inline-flex; align-items:center; gap:0.3rem; padding:0.2rem 0.6rem; border-radius:9999px; font-size:0.72rem; font-weight:600; }
.role-admin      { background: var(--colors-red-100);     color: var(--colors-red-800); }
.role-supervisor { background: var(--colors-blue-100);    color: var(--colors-blue-800); }
.role-employee   { background: var(--colors-neutral-100); color: var(--colors-neutral-700); }

/* Inactive row (disabled user) */
.row-inactive td { opacity: 0.55; }

/* Permission status banner at the top of the view/edit form */
.perm-banner {
  display:flex; align-items:center; gap:0.5rem;
  padding:0.6rem 0.85rem; border-radius:0.5rem;
  font-size:0.82rem; margin-bottom:0.9rem; border:1px solid;
}
.perm-banner svg { width:1rem; height:1rem; flex-shrink:0; }
.perm-banner.readonly { background: var(--colors-yellow-50); color: var(--colors-yellow-800); border-color: var(--colors-yellow-200); }
.perm-banner.owner    { background: var(--colors-primary-50); color: var(--colors-primary-800); border-color: var(--colors-primary-200); }

/* Toggle switch for permissions */
.toggle-row {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.85rem 0; border-bottom:1px dashed var(--colors-neutral-200);
}
.toggle-row:last-child { border-bottom:none; }
.toggle-row .toggle-text { flex:1; }
.toggle-row .toggle-text strong { display:block; font-size:0.9rem; color:var(--colors-neutral-900); margin-bottom:0.15rem; }
.toggle-row .toggle-text span { font-size:0.8rem; color:var(--colors-neutral-600); }
.switch { position:relative; display:inline-block; width:3rem; height:1.6rem; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.switch .slider {
  position:absolute; cursor:pointer; inset:0;
  background: var(--colors-neutral-300); border-radius:9999px; transition:0.2s;
}
.switch .slider::before {
  content:''; position:absolute; height:1.2rem; width:1.2rem;
  right:0.2rem; bottom:0.2rem; background:#fff; border-radius:50%; transition:0.2s;
}
.switch input:checked + .slider { background: var(--colors-primary-600); }
.switch input:checked + .slider::before { transform: translateX(-1.4rem); }
.switch input:disabled + .slider { opacity:0.5; cursor:not-allowed; }

/* ================== Editable list chips (Settings) ================== */
.chip-text { cursor: pointer; }
.chip-text:hover { text-decoration: underline; color: var(--colors-primary-700); }
.chip.chip-editing { background: var(--colors-primary-50); border-color: var(--colors-primary-200); gap: 0.25rem; }
.chip[draggable="true"] { cursor: grab; }
.chip[draggable="true"]:active { cursor: grabbing; }
.chip.dragging { opacity: 0.5; border-style: dashed; border-color: var(--colors-primary-600); }
.chip-grip { display: inline-flex; align-items: center; color: var(--colors-neutral-300); flex-shrink: 0; }
.chip-grip svg { width: 0.85rem; height: 0.85rem; }
.chip:hover .chip-grip { color: var(--colors-neutral-400); }
.chip-edit-input {
  /* the primary ramp has no 300 step (50/100/200/600/700/800), so the old
     var(--colors-primary-300) was invalid and this input rendered with NO border. */
  border: 1px solid var(--colors-primary-200);
  border-radius: 0.25rem;
  padding: 0.15rem 0.4rem;
  font-family: inherit;
  font-size: 0.8125rem;
  width: 12rem; max-width: 55vw;
}
.chip-edit-input:focus { outline: none; border-color: var(--colors-primary-600); box-shadow: 0 0 0 2px var(--colors-primary-100); }
.chip button.chip-save:hover { background: var(--colors-primary-50); color: var(--colors-primary-700); }

/* ================== Change history (order modal) ================== */
.history-list { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.25rem; }
.history-item { border: 1px solid var(--border-neutral); border-radius: 0.5rem; padding: 0.6rem 0.8rem; background: var(--colors-neutral-50); }
.history-meta { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--colors-neutral-600); margin-bottom: 0.4rem; }
.history-meta svg { width: 0.85rem; height: 0.85rem; }
.history-changes { margin: 0; padding-right: 1.1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.history-changes li { font-size: 0.82rem; color: var(--colors-neutral-800); line-height: 1.7; }
.hist-old { color: var(--colors-red-700); text-decoration: line-through; text-decoration-color: var(--colors-red-200); }
.hist-new { color: var(--colors-primary-700); font-weight: 600; }
.hist-arrow { color: var(--colors-neutral-400); margin: 0 0.2rem; }

/* ================== Order tracking timeline ================== */
.track-summary { background: var(--colors-primary-50); border: 1px solid var(--colors-primary-200); color: var(--colors-primary-800); padding: 0.6rem 0.85rem; border-radius: 0.5rem; font-size: 0.85rem; margin-bottom: 0.85rem; }
.track-list { display: flex; flex-direction: column; gap: 0.6rem; }
.track-step { border: 1px solid var(--colors-primary-200); border-radius: 0.5rem; padding: 0.6rem 0.85rem; background: #fff; }
.track-step.ongoing { border-color: var(--colors-yellow-200); background: var(--colors-yellow-50); }
.track-step.editing { box-shadow: 0 0 0 2px var(--colors-primary-200); }
.track-step-head { display: flex; align-items: center; gap: 0.5rem; }
.track-num { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--colors-primary-600); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.track-dept { font-weight: 600; color: var(--colors-neutral-900); flex: 1; }
.track-step-actions { display: flex; gap: 0.2rem; }
.track-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.8rem; color: var(--colors-neutral-600); margin-top: 0.4rem; font-variant-numeric: tabular-nums; }
.track-note { font-size: 0.82rem; color: var(--colors-neutral-700); margin-top: 0.35rem; background: var(--colors-neutral-50); padding: 0.3rem 0.5rem; border-radius: 0.375rem; }
.track-form { margin-top: 1rem; border-top: 1px dashed var(--colors-neutral-200); padding-top: 0.85rem; }

/* ================== Members editor (committees) ================== */
.members-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.55rem; }
.member-chip { display: inline-flex; align-items: center; gap: 0.45rem; background: #fff; border: 1px solid var(--border-neutral); border-radius: 9999px; padding: 0.3rem 0.7rem; font-size: 0.82rem; }
.member-chip button { background: none; border: none; color: var(--colors-neutral-400); cursor: pointer; display: inline-flex; padding: 0; }
.member-chip button:hover { color: var(--colors-red-600); }
.member-chip button svg { width: 0.85rem; height: 0.85rem; }
.member-add-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.member-add-row input#member-name { flex: 1; min-width: 140px; }
.member-add-row .combo[data-name="member-entity"] { flex: 1; min-width: 160px; }

/* ================== Map picker ================== */
.map-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.map-modal { background: #fff; border-radius: 0.75rem; width: 100%; max-width: 920px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.25); }
.map-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--border-neutral); background: var(--colors-neutral-50); }
.map-modal-head .modal-close { background: none; border: none; cursor: pointer; color: var(--colors-neutral-500); width: 2rem; height: 2rem; border-radius: 0.375rem; }
.map-modal-foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--border-neutral); background: var(--colors-neutral-50); font-size: 0.85rem; }
#map-canvas, #na-map-canvas { width: 100%; min-height: 55vh; flex: 1; }

/* ===== Order form: section headings + location picker ===== */
.form-section-title {
  grid-column: 1 / -1;
  font-size: 0.9rem; font-weight: 700; color: var(--colors-primary-800);
  margin: 0.25rem 0 0.15rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--colors-primary-100);
  display: flex; align-items: center; gap: 0.4rem;
}
.form-section-title:not(:first-child) { margin-top: 0.9rem; }
.form-field.location-picker { gap: 0.45rem; }
.location-picker-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.location-picker-actions .btn { flex: 0 1 auto; }

/* ===== Pick-from-portfolio modal (reuses .map-overlay) ===== */
.map-modal.pf-picker { max-width: 560px; max-height: 80vh; }
.pf-search-wrap { padding: 0.75rem 1rem 0.5rem; border-bottom: 1px solid var(--colors-neutral-100); }
.pf-loc-list { overflow-y: auto; padding: 0.5rem; flex: 1; min-height: 12rem; }
.pf-loc-row {
  width: 100%; display: block; text-align: right;
  background: #fff; border: 1px solid var(--border-neutral); border-radius: 0.5rem;
  padding: 0.6rem 0.8rem; margin-bottom: 0.4rem; cursor: pointer;
  font-family: inherit; transition: all 0.12s ease;
}
.pf-loc-row:hover { border-color: var(--colors-primary-600); background: var(--colors-primary-50); }
.pf-loc-name { font-weight: 600; font-size: 0.9rem; color: var(--colors-neutral-900); }
.pf-loc-meta { font-size: 0.78rem; color: var(--colors-neutral-500); margin-top: 0.2rem; display: flex; justify-content: space-between; gap: 0.5rem; }
.pf-loc-layer { color: var(--colors-primary-700); }
.pf-empty { padding: 2rem; text-align: center; color: var(--colors-neutral-400); }
.pf-empty.hidden { display: none; }

/* ================== Nav link rendered as an anchor (dashboards page) ================== */
a.nav-link { text-decoration: none; }
a.nav-link:hover { text-decoration: none; color: var(--colors-neutral-900); }

/* ================== Map sections (Portfolio + KMZ lab) ================== */
.map-shell {
  position: relative;
  height: min(72vh, 760px);
  min-height: 440px;
  border: 1px solid var(--border-neutral);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--colors-neutral-100);
}
.map-canvas-full { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.map-canvas-full.drag-over { outline: 3px dashed var(--colors-primary-600); outline-offset: -6px; }
.leaflet-container { font-family: var(--app-font, 'IBM Plex Sans Arabic', sans-serif); }
/* A rounded, overflow:hidden .map-shell (the map's direct positioned parent) can
   make the browser DROP the GPU-composited raster tile layer the instant Leaflet
   creates its first SVG vector overlay — i.e. the moment you draw the first
   location vertex — blanking the whole map to the shell's gray background
   (reproduced with both the streets and satellite basemaps). Promoting the clip
   container AND the tile pane to their own compositing layers keeps the tiles
   painted through that overlay repaint. translateZ(0) is safe here: Leaflet never
   transforms .leaflet-tile-pane itself, and all .map-overlay modals are fixed and
   appended to <body>, so they are unaffected by the new containing block. */
.map-shell { transform: translateZ(0); }
.map-canvas-full .leaflet-tile-pane { transform: translateZ(0); }

/* Aerial-imagery draw editor (request detail → المصوّر الجوي tab, in a modal).
   Same translateZ(0) tile-drop guard as .map-shell above. */
.aerial-draw-map {
  position: relative; height: 52vh; min-height: 340px;
  border: 1px solid var(--border-neutral); border-radius: var(--radius-md);
  overflow: hidden; background: var(--colors-neutral-100); transform: translateZ(0);
}
.aerial-draw-map .leaflet-tile-pane { transform: translateZ(0); }
/* Multi-site list in the aerial editor (name + colour + type + metric per site) */
.aerial-site-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 22vh; overflow-y: auto; }
.aerial-site {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem;
  border: 1px solid var(--border-neutral); border-radius: var(--radius-md);
  background: var(--colors-neutral-50); cursor: pointer;
}
.aerial-site.active { border-color: var(--colors-primary-600); box-shadow: 0 0 0 2px var(--colors-primary-100); background: #fff; }
.aerial-site input[type="color"] {
  width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--border-neutral);
  border-radius: var(--radius-sm); background: none; cursor: pointer; flex-shrink: 0;
}
.aerial-site-main { flex: 1; min-width: 0; }
.aerial-site-main .text-input { width: 100%; height: 1.9rem; padding: 0.15rem 0.45rem; }
.aerial-site-rad { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; color: var(--colors-neutral-600); }
.aerial-site-rad input { width: 4.5rem; height: 1.6rem; padding: 0.1rem 0.3rem; border: 1px solid var(--border-neutral); border-radius: var(--radius-sm); }
.rq-aerial-lic {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.55rem 0.65rem; border: 1px solid var(--border-neutral);
  border-radius: var(--radius-md); background: var(--colors-neutral-50);
}
.rq-aerial-lic + .rq-aerial-lic { margin-top: 0.4rem; }
.rq-aerial-lic-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.rq-aerial-lic-info .text-muted { font-size: 0.8rem; }

/* Bulk letter export modal (الجهات والإفادات → تنزيل الخطابات) */
.ag-exp-list { max-height: 42vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.1rem; }
.ag-exp-row { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.5rem 0.4rem; border-radius: var(--radius-sm); cursor: pointer; }
.ag-exp-row:hover { background: var(--colors-neutral-50); }
.ag-exp-all-row { border-bottom: 1px solid var(--border-neutral); border-radius: 0; }
.ag-exp-row input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--colors-primary-600); }
.ag-exp-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ag-exp-info .text-muted { font-size: 0.8rem; }
.ag-exp-fmt { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }

/* Floating layers panel (visual top-right; zoom control stays top-left) */
.map-layers-panel {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 500;
  width: 274px; max-width: calc(100% - 1.5rem);
  background: #fff; border: 1px solid var(--border-neutral);
  border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  display: flex; flex-direction: column; overflow: hidden;
}
.mlp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border-neutral);
  background: var(--colors-neutral-50); font-size: 0.9rem;
}
.mlp-head strong { color: var(--colors-neutral-900); }
.mlp-collapse {
  background: none; border: none; cursor: pointer; color: var(--colors-neutral-500);
  display: inline-flex; padding: 0.2rem; border-radius: 0.35rem; transition: transform 0.2s, background 0.15s;
}
.mlp-collapse:hover { background: var(--colors-neutral-100); color: var(--colors-neutral-900); }
.map-layers-panel.collapsed .mlp-collapse { transform: rotate(180deg); }
.map-layers-panel.collapsed .mlp-body,
.map-layers-panel.collapsed .mlp-foot { display: none; }

.mlp-body { max-height: 46vh; overflow-y: auto; padding: 0.35rem; }
.mlp-loading { padding: 1rem 0.85rem; color: var(--colors-neutral-500); font-size: 0.85rem; text-align: center; }
.mlp-item {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.45rem; border-radius: 0.375rem;
}
.mlp-item:hover { background: var(--colors-neutral-50); }
.mlp-item + .mlp-item { margin-top: 0.15rem; }
.mlp-toggle { width: 1rem; height: 1rem; flex-shrink: 0; cursor: pointer; accent-color: var(--colors-primary-600); }
.mlp-swatch { width: 0.85rem; height: 0.85rem; border-radius: 0.25rem; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.15); }
.mlp-swatch[role="button"] { cursor: pointer; }
.mlp-name {
  flex: 1; min-width: 0; font-size: 0.85rem; color: var(--colors-neutral-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mlp-count {
  flex-shrink: 0; font-size: 0.7rem; font-weight: 600; color: var(--colors-neutral-600);
  background: var(--colors-neutral-100); border-radius: 9999px; padding: 0.05rem 0.45rem;
}
.mlp-btn {
  background: none; border: none; cursor: pointer; color: var(--colors-neutral-500);
  display: inline-flex; padding: 0.25rem; border-radius: 0.3rem; flex-shrink: 0;
}
.mlp-btn svg { width: 0.95rem; height: 0.95rem; }
.mlp-btn:hover { background: var(--colors-neutral-100); color: var(--colors-neutral-900); }
.mlp-btn.mlp-del:hover { background: var(--colors-red-50); color: var(--colors-red-600); }
.mlp-foot { padding: 0.6rem 0.7rem; border-top: 1px solid var(--border-neutral); background: var(--colors-neutral-50); }
.mlp-hint { font-size: 0.7rem; color: var(--colors-neutral-500); margin-top: 0.45rem; line-height: 1.5; }

/* Leaflet popups — RTL property cards */
.map-popup { direction: rtl; text-align: right; min-width: 180px; }
.map-popup .mp-title { font-weight: 700; color: var(--colors-neutral-900); margin-bottom: 0.3rem; font-size: 0.92rem; }
.map-popup .mp-desc { color: var(--colors-neutral-700); font-size: 0.82rem; margin-bottom: 0.4rem; line-height: 1.6; white-space: pre-wrap; }
.map-popup .mp-grid { display: flex; flex-direction: column; gap: 0.2rem; }
.map-popup .mp-row { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.8rem; }
.map-popup .mp-k { color: var(--colors-neutral-500); }
.map-popup .mp-v { color: var(--colors-neutral-900); font-weight: 500; text-align: left; }
.leaflet-popup-content { margin: 0.7rem 0.85rem; }

@media (max-width: 640px) {
  .map-shell { height: 70vh; }
  .map-layers-panel { left: 0.75rem; right: 0.75rem; width: auto; }
  .mlp-body { max-height: 32vh; }
}

/* ================== "خدمات أخرى" nav dropdown ================== */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown-toggle .nav-caret { width: 0.85rem; height: 0.85rem; transition: transform 0.2s; opacity: 0.75; }
.nav-dropdown.open .nav-dropdown-toggle .nav-caret { transform: rotate(180deg); }
.nav-dropdown-toggle.active { color: var(--colors-primary-700); background: var(--colors-primary-50); font-weight: 600; }
.nav-dropdown-menu {
  position: fixed; z-index: 100;
  min-width: 230px;
  background: #fff; border: 1px solid var(--border-neutral);
  border-radius: 0.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.16);
  padding: 0.35rem; display: none;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-item {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; padding: 0.6rem 0.7rem;
  font: inherit; font-size: 0.9rem; font-weight: 500; text-align: right;
  color: var(--colors-neutral-700);
  background: none; border: none; border-radius: 0.375rem; cursor: pointer;
  white-space: nowrap;
}
.nav-dropdown-item:hover { background: var(--colors-neutral-100); color: var(--colors-neutral-900); }
.nav-dropdown-item.active { background: var(--colors-primary-50); color: var(--colors-primary-700); font-weight: 600; }
.nav-dropdown-item svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.nav-dropdown-item + .nav-dropdown-item { margin-top: 0.1rem; }
.nav-dropdown-label {
  padding: 0.4rem 0.75rem 0.25rem; font-size: 0.68rem; font-weight: 700;
  color: var(--colors-neutral-500); letter-spacing: 0.02em;
}
.nav-dropdown-divider { height: 1px; margin: 0.35rem 0.5rem; background: var(--colors-neutral-200); }

/* Maps layers panel — footer actions + inline hint icon */
.mlp-foot-actions { display: flex; gap: 0.4rem; }
.mlp-foot-actions .btn { flex: 1; }
.mlp-hint svg { width: 0.85rem; height: 0.85rem; vertical-align: -2px; opacity: 0.8; }

/* ================== Maps: draw location toolbar + form ================== */
.map-canvas-full.drawing { cursor: crosshair; }
.map-canvas-full.drawing .leaflet-interactive { cursor: crosshair; }

/* National-address pick mode: clicks fall through every feature/marker to the
   map click handler so ANY click resolves the national address (never a feature
   popup). Draw/geometry-edit are mutually exclusive with pick mode, so their
   markers are never present while this class is set. */
.map-canvas-full.na-pick-active .leaflet-overlay-pane .leaflet-interactive,
.map-canvas-full.na-pick-active .leaflet-marker-pane > * {
  pointer-events: none;
}
.map-canvas-full.na-pick-active { cursor: crosshair; }
.draw-toolbar {
  position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%);
  z-index: 600; display: flex; align-items: center; gap: 0.5rem;
  background: #fff; border: 1px solid var(--border-neutral);
  border-radius: 0.5rem; box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  padding: 0.4rem 0.6rem; max-width: calc(100% - 1.5rem);
}
.draw-toolbar .draw-info { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--colors-neutral-700); }
.draw-toolbar .draw-info svg { width: 1rem; height: 1rem; color: var(--colors-red-600); }
.draw-toolbar .draw-info strong { color: var(--colors-neutral-900); font-variant-numeric: tabular-nums; }

/* Location form modal (reuses .map-overlay / .map-modal) */
.loc-modal { max-width: 560px; }
.loc-body {
  padding: 1rem 1.25rem; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem;
}
.loc-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.loc-field.full { grid-column: 1 / -1; }
.loc-field .text-input, .loc-field select.text-input { width: 100%; }
.loc-geo-head {
  grid-column: 1 / -1; margin-top: 0.35rem; padding-top: 0.6rem;
  border-top: 1px solid var(--colors-neutral-200);
  font-weight: 600; font-size: 0.9rem; color: var(--colors-neutral-800);
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.loc-geo-head .text-muted { font-weight: 400; font-size: 0.8rem; }
@media (max-width: 560px) { .loc-body { grid-template-columns: 1fr; } }

/* ================== Maps layers: search + feature tree ================== */
.mlp-search { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border-neutral); background: var(--colors-neutral-50); }
.mlp-search-box { position: relative; display: flex; align-items: center; }
.mlp-search-box > svg { position: absolute; right: 0.55rem; width: 0.9rem; height: 0.9rem; color: var(--colors-neutral-400); pointer-events: none; }
.mlp-search-box input {
  width: 100%; font-family: inherit; font-size: 0.82rem;
  padding: 0.45rem 1.9rem 0.45rem 1.9rem;
  border: 1px solid var(--border-neutral); border-radius: 0.4rem; background: #fff; color: var(--colors-neutral-900);
}
.mlp-search-box input:focus { outline: none; border-color: var(--border-primary); box-shadow: 0 0 0 2px var(--colors-blue-100); }
.mlp-search-box #pf-search-clear { position: absolute; left: 0.35rem; background: none; border: none; cursor: pointer; color: var(--colors-neutral-400); display: inline-flex; padding: 0.2rem; border-radius: 0.3rem; }
.mlp-search-box #pf-search-clear:hover { color: var(--colors-neutral-700); background: var(--colors-neutral-100); }
.mlp-search-box #pf-search-clear svg { width: 0.85rem; height: 0.85rem; }
.mlp-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
.mlp-chips .chip {
  font-family: inherit; font-size: 0.72rem; cursor: pointer;
  padding: 0.2rem 0.55rem; border-radius: 9999px;
  border: 1px solid var(--border-neutral); background: #fff; color: var(--colors-neutral-600);
}
.mlp-chips .chip:hover { border-color: var(--colors-neutral-400); color: var(--colors-neutral-900); }
.mlp-chips .chip.active { background: var(--colors-primary-600); border-color: var(--colors-primary-600); color: #fff; font-weight: 600; }
.mlp-search-count { font-size: 0.72rem; color: var(--colors-neutral-500); margin-top: 0.4rem; min-height: 0.9rem; }

.mlp-group { margin-bottom: 0.1rem; }
.mlp-item.dimmed { opacity: 0.5; }
.mlp-caret {
  background: none; border: none; cursor: pointer; color: var(--colors-neutral-500);
  display: inline-flex; padding: 0.1rem; border-radius: 0.3rem; flex-shrink: 0; transition: transform 0.18s;
}
.mlp-caret:hover { background: var(--colors-neutral-100); color: var(--colors-neutral-900); }
.mlp-caret.open { transform: rotate(180deg); }
.mlp-caret svg { width: 0.9rem; height: 0.9rem; }
.mlp-caret-spacer { width: 1.1rem; flex-shrink: 0; display: inline-block; }

.mlp-features { margin: 0.1rem 0.2rem 0.35rem 0.2rem; padding-right: 1.4rem; border-right: 1px solid var(--colors-neutral-200); display: flex; flex-direction: column; gap: 0.1rem; }
.mlp-feat { display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.45rem; border-radius: 0.35rem; cursor: pointer; }
.mlp-feat:hover { background: var(--colors-primary-50); }
.mlp-feat-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.15); }
.mlp-feat-name { font-size: 0.82rem; color: var(--colors-neutral-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; max-width: 45%; }
.mlp-feat-sub { font-size: 0.7rem; color: var(--colors-neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: left; }
.mlp-feat-empty { font-size: 0.78rem; color: var(--colors-neutral-400); padding: 0.3rem 0.5rem; }

/* ================== Maps: footer links, feature edit, trash, perms ================== */
.mlp-foot-links { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.mlp-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: none; border: none; cursor: pointer; font: inherit; font-size: 0.78rem;
  color: var(--colors-neutral-600); padding: 0.25rem 0.4rem; border-radius: 0.35rem;
}
.mlp-link:hover { background: var(--colors-neutral-100); color: var(--colors-neutral-900); }
.mlp-link svg { width: 0.9rem; height: 0.9rem; }
.mlp-feat-edit {
  background: none; border: none; cursor: pointer; color: var(--colors-neutral-400);
  display: inline-flex; padding: 0.2rem; border-radius: 0.3rem; flex-shrink: 0;
}
.mlp-feat-edit svg { width: 0.85rem; height: 0.85rem; }
.mlp-feat:hover .mlp-feat-edit { color: var(--colors-neutral-600); }
.mlp-feat-edit:hover { background: var(--colors-blue-100); color: var(--colors-blue-700); }

.tr-list { display: flex; flex-direction: column; gap: 0.4rem; }
.tr-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border-neutral); border-radius: 0.45rem; background: #fff; }
.tr-item .tr-name { flex: 1; min-width: 0; font-size: 0.88rem; color: var(--colors-neutral-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-item .btn-sm { flex-shrink: 0; }

.perm-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--colors-neutral-100); cursor: pointer; }
.perm-row:last-child { border-bottom: none; }
.perm-row .perm-text { flex: 1; }
.perm-row .perm-text strong { display: block; font-size: 0.9rem; color: var(--colors-neutral-900); margin-bottom: 0.15rem; }
.perm-row .perm-text span { font-size: 0.8rem; color: var(--colors-neutral-600); line-height: 1.5; }
.perm-row .perm-toggle { width: 1.15rem; height: 1.15rem; flex-shrink: 0; cursor: pointer; accent-color: var(--colors-primary-600); }

/* ================== Maps: per-layer settings (visibility + delete) ================== */
.mlp-btn.active { color: var(--colors-primary-600); background: var(--colors-blue-50); }
.ls-section-title { font-size: 0.8rem; font-weight: 700; color: var(--colors-neutral-700); margin: 0.3rem 0 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--colors-neutral-100); }
.ls-section-title:not(:first-child) { margin-top: 0.9rem; }
.vis-modes { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.85rem; }
.vis-mode { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.55rem 0.65rem; border: 1px solid var(--border-neutral); border-radius: 0.5rem; cursor: pointer; }
.vis-mode:hover { background: var(--colors-neutral-50); }
.vis-mode input { margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--colors-primary-600); }
.vis-mode span { display: flex; flex-direction: column; }
.vis-mode strong { font-size: 0.88rem; color: var(--colors-neutral-900); }
.vis-mode span span { font-size: 0.78rem; color: var(--colors-neutral-600); line-height: 1.5; }
.vis-users-wrap { border: 1px solid var(--border-neutral); border-radius: 0.5rem; overflow: hidden; }
.vis-users-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; background: var(--colors-neutral-50); border-bottom: 1px solid var(--border-neutral); }
.vis-users-head > span { font-size: 0.8rem; font-weight: 600; color: var(--colors-neutral-700); flex-shrink: 0; }
.vis-users-head input { flex: 1; min-width: 0; border: 1px solid var(--border-neutral); border-radius: 0.4rem; padding: 0.3rem 0.5rem; font: inherit; font-size: 0.82rem; }
.vis-users { max-height: 260px; overflow-y: auto; padding: 0.25rem; }
.vis-user { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: 0.4rem; cursor: pointer; }
.vis-user:hover { background: var(--colors-neutral-50); }
.vis-user input { flex-shrink: 0; accent-color: var(--colors-primary-600); }
.vis-user-name { font-size: 0.85rem; color: var(--colors-neutral-900); flex: 1; }
.vis-user-meta { font-size: 0.75rem; color: var(--colors-neutral-500); flex-shrink: 0; }

/* ================== Maps: geometry editor / audit / palette / feature actions ================== */
.geom-vertex { background: #fff; border: 2px solid #dc2626; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.4); cursor: move; }
.geom-mid { background: rgba(220,38,38,0.55); border: 1px solid #fff; border-radius: 50%; cursor: copy; }
.geom-mid:hover { background: #dc2626; }

/* feature row: imported tag + action cluster */
.mlp-feat-tag { display: inline-flex; flex-shrink: 0; color: var(--colors-yellow-700); }
.mlp-feat-tag svg { width: 0.8rem; height: 0.8rem; }
.mlp-feat-actions { display: inline-flex; align-items: center; gap: 0.1rem; flex-shrink: 0; margin-inline-start: auto; }
.mlp-feat-btn { background: none; border: none; cursor: pointer; color: var(--colors-neutral-400); display: inline-flex; padding: 0.2rem; border-radius: 0.3rem; }
.mlp-feat-btn svg { width: 0.85rem; height: 0.85rem; }
.mlp-feat:hover .mlp-feat-btn { color: var(--colors-neutral-600); }
.mlp-feat-btn:hover { background: var(--colors-blue-100); color: var(--colors-blue-700); }

/* colour palette modal */
.color-modal { max-width: 360px; }
.cp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; padding: 1.1rem 1.25rem; }
.cp-swatch { width: 100%; aspect-ratio: 1 / 1; min-height: 2rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 0.4rem; cursor: pointer; padding: 0; transition: transform 0.1s; }
.cp-swatch:hover { transform: scale(1.12); }
.cp-swatch.sel { outline: 3px solid var(--colors-neutral-900); outline-offset: 1px; }

/* audit log modal */
.au-list { display: flex; flex-direction: column; gap: 0.6rem; }
.au-item { border: 1px solid var(--border-neutral); border-radius: 0.5rem; padding: 0.6rem 0.75rem; background: #fff; }
.au-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.au-act { font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 9999px; }
.au-act.au-add, .au-act.au-import { background: var(--colors-primary-100); color: var(--colors-primary-800); }
.au-act.au-edit { background: var(--colors-blue-100); color: var(--colors-blue-800); }
.au-act.au-delete { background: var(--colors-red-100); color: var(--colors-red-800); }
.au-actor { font-weight: 600; color: var(--colors-neutral-800); font-size: 0.85rem; }
.au-at { color: var(--colors-neutral-500); font-size: 0.75rem; margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.au-changes { margin: 0; padding-inline-start: 1rem; font-size: 0.82rem; color: var(--colors-neutral-700); line-height: 1.7; }
.au-changes li { margin: 0.1rem 0; }
.au-from { color: var(--colors-red-700); text-decoration: line-through; }
.au-to { color: var(--colors-primary-700); font-weight: 600; }

/* audit: reason note + point-level boundary diff */
.au-reason { margin-top: 0.4rem; font-size: 0.82rem; color: var(--colors-neutral-800); background: var(--colors-yellow-50); border: 1px solid var(--colors-yellow-200); border-radius: 0.4rem; padding: 0.4rem 0.6rem; }
.au-points { margin: 0.25rem 0 0; padding-inline-start: 1rem; font-size: 0.76rem; color: var(--colors-neutral-600); }
.au-points li { margin: 0.1rem 0; font-variant-numeric: tabular-nums; }

/* ================== Portfolio analysis dashboard ================== */
.pa-modal { max-width: 1080px; width: 100%; }
.pa-body { padding: 1.25rem; overflow-y: auto; }
.pa-section { margin-bottom: 1.25rem; }
.pa-card { padding-bottom: 0.85rem; }
.dashboard-row.pa-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.pa-donut-wrap { display: flex; align-items: center; justify-content: center; padding: 0.85rem; }
.pa-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: 0.8rem; color: var(--colors-neutral-700); padding: 0 0.85rem 0.4rem; justify-content: center; }
.pa-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 9999px; margin-inline-start: 0.35rem; vertical-align: middle; }
.pa-bars { padding: 0.6rem 0.85rem; }
.stat-sub { display: block; font-size: 0.7rem; color: var(--colors-neutral-500); margin-top: 0.15rem; }
.bar-fill.solid { background: var(--bar-c, var(--colors-primary-600)) !important; }
.pa-insights { display: flex; flex-direction: column; gap: 0.5rem; }
.pa-insight { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.75rem; border-radius: 0.5rem; font-size: 0.85rem; border: 1px solid var(--border-neutral); background: #fff; }
.pa-insight svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.pa-insight.pa-info { border-color: var(--colors-blue-200); background: var(--colors-blue-50); color: var(--colors-blue-800); }
.pa-insight.pa-warn { border-color: var(--colors-yellow-200); background: var(--colors-yellow-50); color: var(--colors-yellow-800); }
.pa-insight.pa-danger { border-color: var(--colors-red-200); background: var(--colors-red-50); color: var(--colors-red-800); }
@media (max-width: 760px) { .dashboard-row.pa-row3 { grid-template-columns: 1fr; } }

/* ================== National Address (العنوان الوطني) ================== */
@keyframes naSpin { to { transform: rotate(360deg); } }
.na-spin {
  display: inline-block; width: 0.85rem; height: 0.85rem; vertical-align: -1px;
  border: 2px solid var(--colors-neutral-400); border-top-color: transparent;
  border-radius: 50%; animation: naSpin 0.8s linear infinite;
}

/* ---- Portfolio map tools control (basemap · national address · boundaries) ---- */
.pf-maptools {
  display: flex; flex-direction: column; gap: 0.35rem;
  background: transparent; border: 0; box-shadow: none;
}
.pf-maptools .pf-tool {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #fff; border: 1px solid var(--border-neutral); color: var(--colors-neutral-700);
  border-radius: 0.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  padding: 0.4rem 0.6rem; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pf-maptools .pf-tool:hover { border-color: var(--colors-primary-600); color: var(--colors-neutral-900); }
.pf-maptools .pf-tool svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.pf-maptools .pf-tool.is-on {
  background: var(--colors-primary-600); border-color: var(--colors-primary-600); color: #fff;
}
.pf-bnd-pop {
  background: #fff; border: 1px solid var(--border-neutral); border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12); padding: 0.45rem 0.6rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.pf-bnd-pop[hidden] { display: none; }
.pf-bnd-row { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--colors-neutral-700); cursor: pointer; }
.pf-bnd-row input { accent-color: var(--colors-primary-600); }
.pf-bnd-sw { width: 0.85rem; height: 0.2rem; border-radius: 2px; flex-shrink: 0; }

/* IBM Plex Sans Arabic served locally (font.php) so boundary labels always use
   it regardless of the admin's chosen UI font. */
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 400; font-display: swap; src: url('../font.php?f=IBMPlexSansArabic-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 500; font-display: swap; src: url('../font.php?f=IBMPlexSansArabic-Medium.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 600; font-display: swap; src: url('../font.php?f=IBMPlexSansArabic-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 700; font-display: swap; src: url('../font.php?f=IBMPlexSansArabic-Bold.ttf') format('truetype'); }

/* Leaflet hard-codes its own font on .leaflet-container, so map popups/controls
   ignore the app font — force IBM Plex Sans Arabic (then the app font) on all
   map UI so popups match the rest of the system. */
.leaflet-container,
.leaflet-popup-content,
.leaflet-control,
.map-popup { font-family: 'IBM Plex Sans Arabic', sans-serif; }

/* Boundary name labels (الحي/المدينة/المنطقة/المحافظة) — rendered as divIcon
   markers anchored at the polygon's interior pole; the span is centred on that
   point via transform. IBM Plex Sans Arabic with a white halo for legibility
   over satellite imagery. */
.na-bnd-mk { background: transparent; border: 0; width: 0; height: 0; }
.na-bnd-label {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 700; white-space: nowrap; pointer-events: none; text-align: center;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 1px 2px rgba(255,255,255,0.9);
}
.na-bnd-regions      { color: #1d4ed8; font-size: 0.85rem; letter-spacing: 0.3px; }
.na-bnd-governorates { color: #0e7490; font-size: 0.78rem; }
.na-bnd-cities       { color: #7e22ce; font-size: 0.78rem; }
.na-bnd-districts    { color: #c2410c; font-size: 0.7rem; }

/* ---- Floating national-address result card on the portfolio map ---- */
.pf-na-card {
  /* physical left so it never sits under the right-side layers panel */
  position: absolute; bottom: 0.85rem; left: 0.85rem; right: auto; z-index: 1200;
  width: 300px; max-width: calc(100% - 1.7rem); max-height: calc(100% - 5rem); overflow: auto;
  background: #fff; border: 1px solid var(--border-neutral); border-radius: 0.65rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
}
.pf-na-head {
  display: flex; align-items: center; gap: 0.45rem; padding: 0.6rem 0.75rem; color: #fff;
  background: linear-gradient(90deg, var(--footer-grad-start), var(--footer-grad-end));
  border-radius: 0.65rem 0.65rem 0 0;
}
.pf-na-head strong { font-size: 0.9rem; flex: 1; }
.pf-na-head svg { width: 1rem; height: 1rem; }
.pf-na-x { background: rgba(255,255,255,0.2); border: 0; color: #fff; cursor: pointer; border-radius: 0.4rem; padding: 0.2rem; display: inline-flex; }
.pf-na-x svg { width: 0.9rem; height: 0.9rem; }
.pf-na-body { padding: 0.7rem 0.8rem; }
.pf-na-loading { display: flex; align-items: center; gap: 0.5rem; color: var(--colors-neutral-600); font-size: 0.85rem; padding: 0.4rem 0; }
.pf-na-sa { font-size: 1.15rem; font-weight: 800; color: var(--colors-primary-700); letter-spacing: 0.5px; direction: ltr; text-align: center; }
.pf-na-fmt { text-align: center; font-size: 0.82rem; color: var(--colors-neutral-700); margin: 0.2rem 0 0.5rem; line-height: 1.6; }
.pf-na-table { width: 100%; font-size: 0.8rem; border-collapse: collapse; }
.pf-na-table td { padding: 0.28rem 0.3rem; border-top: 1px solid var(--colors-neutral-200); vertical-align: top; }
.pf-na-table td:first-child { color: var(--colors-neutral-500); white-space: nowrap; width: 6.5rem; }
.pf-na-en { color: var(--colors-neutral-400); font-size: 0.72rem; }
.pf-na-nf { display: flex; align-items: flex-start; gap: 0.4rem; color: var(--colors-yellow-800); background: var(--colors-yellow-50); border: 1px solid var(--colors-yellow-200); border-radius: 0.4rem; padding: 0.45rem 0.55rem; font-size: 0.82rem; }
.pf-na-nf svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.pf-na-err { display: flex; align-items: flex-start; gap: 0.4rem; color: var(--colors-red-700); font-size: 0.85rem; padding: 0.3rem 0; }
.pf-na-err svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.pf-na-actions { display: flex; gap: 0.45rem; margin-top: 0.7rem; }
.pf-na-actions .btn { flex: 1; }

/* ---- National-address summary block inside the location form ---- */
.loc-na-summary {
  background: var(--colors-primary-50); border: 1px solid var(--colors-primary-200);
  border-radius: 0.5rem; padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.2rem;
}
.loc-na-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; color: var(--colors-primary-700); }
.loc-na-badge svg { width: 0.9rem; height: 0.9rem; }
.loc-na-short { background: var(--colors-primary-50); border: 1px solid var(--colors-primary-200);
  border-radius: 0.5rem; padding: 0.45rem 0.6rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.loc-na-short strong { direction: ltr; }

/* ---- Save-as-location geometry chooser ---- */
.ns-geo { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ns-geo-opt {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; flex: 1; min-width: 9rem;
  border: 1px solid var(--border-neutral); border-radius: 0.5rem; padding: 0.5rem 0.6rem; font-size: 0.85rem;
}
.ns-geo-opt span { display: inline-flex; align-items: center; gap: 0.35rem; }
.ns-geo-opt svg { width: 1rem; height: 1rem; color: var(--colors-primary-700); }
.ns-geo-opt input { accent-color: var(--colors-primary-600); }
.ns-geo-opt:has(input:checked) { border-color: var(--colors-primary-600); background: var(--colors-primary-50); }

/* ---- Order-form national-address picker (note + map modal) ---- */
.na-order-note {
  margin-top: 0.5rem; background: var(--colors-primary-50); border: 1px solid var(--colors-primary-200);
  border-radius: 0.5rem; padding: 0.55rem 0.7rem;
}
.na-order-note[hidden] { display: none; }
.na-order-note-head { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.82rem; color: var(--colors-primary-700); }
.na-order-note-head svg { width: 0.95rem; height: 0.95rem; }
.na-order-sa { margin-inline-start: auto; font-weight: 800; direction: ltr; letter-spacing: 0.5px; }
.na-order-note-body { margin-top: 0.25rem; font-size: 0.82rem; color: var(--colors-neutral-700); line-height: 1.6; }
.na-base-toggle {
  position: absolute; top: 0.6rem; inset-inline-start: 0.6rem; z-index: 600;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #fff; border: 1px solid var(--border-neutral); color: var(--colors-neutral-700);
  border-radius: 0.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: 0.4rem 0.6rem; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.na-base-toggle svg { width: 1rem; height: 1rem; }
.na-base-toggle.is-on { background: var(--colors-primary-600); border-color: var(--colors-primary-600); color: #fff; }
.na-pick-card {
  position: absolute; bottom: 0.6rem; inset-inline-start: 0.6rem; z-index: 600;
  width: 280px; max-width: calc(100% - 1.2rem); max-height: 60%; overflow: auto;
  background: #fff; border: 1px solid var(--border-neutral); border-radius: 0.6rem;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25); padding: 0.7rem 0.8rem;
}
.na-pick-card[hidden] { display: none; }

/* ============================================================
   المصوّرات الجوية — Aerial-imagery reports section
   ============================================================ */
.page-header:has(.page-header-actions) { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.page-header-content { flex: 1; min-width: 0; }
.page-header-actions { position: relative; z-index: 1; flex-shrink: 0; }

/* ---- list cards ---- */
.aerial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.aerial-card { border: 1px solid var(--border-neutral); border-radius: 0.75rem; background: #fff; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.aerial-card-title { font-weight: 700; font-size: 1rem; color: var(--colors-neutral-900); }
.aerial-card-loc { font-size: 0.82rem; color: var(--colors-neutral-500); margin-top: 0.15rem; }
.aerial-card-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ae-chip { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--colors-neutral-100); color: var(--colors-neutral-700); border-radius: 1rem; padding: 0.2rem 0.55rem; font-size: 0.75rem; }
.ae-chip svg { width: 0.85rem; height: 0.85rem; }
.aerial-card-sw { display: flex; gap: 0.3rem; min-height: 0.6rem; }
.ae-sw { width: 1.4rem; height: 0.5rem; border-radius: 0.2rem; display: inline-block; border: 1px solid rgba(0,0,0,0.12); }
.ae-cell-bounds { display: inline-flex; align-items: center; gap: 0.25rem; }
.ae-cell-bounds > span:last-child { color: var(--colors-neutral-600, #4b5563); font-variant-numeric: tabular-nums; }
.aerial-card-foot { display: flex; align-items: center; gap: 0.4rem; border-top: 1px solid var(--colors-neutral-100); padding-top: 0.6rem; }
.aerial-card-foot .spacer { flex: 1; }
.aerial-card-owner { font-size: 0.78rem; color: var(--colors-neutral-500); }

/* ---- editor overlay ---- */
.aerial-editor { background: #fff; border-radius: 0.75rem; width: min(1500px, 98vw); height: 94vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.aerial-ed-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border-neutral); background: var(--colors-neutral-50); }
.aerial-ed-head strong { font-size: 1rem; }
.aerial-ed-head .spacer { flex: 1; }
.aerial-ed-head .modal-close { background: none; border: none; cursor: pointer; color: var(--colors-neutral-500); width: 2.1rem; height: 2.1rem; border-radius: 0.375rem; }
.aerial-ed-head .modal-close:hover { background: var(--colors-neutral-100); color: var(--colors-neutral-900); }
.aerial-ed-body { flex: 1; display: flex; min-height: 0; }
.aerial-ed-map { position: relative; flex: 1; min-width: 0; background: #0b1f17; }
#aerial-map { position: absolute; inset: 0; }
.aerial-map-tools { position: absolute; top: 0.6rem; inset-inline-start: 0.6rem; z-index: 1000; display: flex; gap: 0.4rem; }
.aerial-draw-hint { position: absolute; top: 0.6rem; left: 50%; transform: translateX(-50%); z-index: 1000; background: rgba(17,24,39,0.92); color: #fff; padding: 0.45rem 0.7rem; border-radius: 0.5rem; font-size: 0.82rem; display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 6px 18px rgba(0,0,0,0.3); }
.aerial-map-fail { color: #fff; padding: 2rem; text-align: center; font-size: 0.9rem; line-height: 1.8; }

.aerial-ed-form { width: 420px; max-width: 42vw; overflow-y: auto; padding: 1rem; background: #fff; border-inline-start: 1px solid var(--border-neutral); }
.ae-sec { margin-bottom: 1.1rem; }
.ae-sec-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.6rem; color: var(--colors-neutral-900); padding-bottom: 0.35rem; border-bottom: 2px solid var(--colors-neutral-200); }
.ae-field { margin-bottom: 0.6rem; }
.ae-field .form-label { display: block; margin-bottom: 0.25rem; font-size: 0.82rem; color: var(--colors-neutral-700); }
.ae-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.ae-grid2 .ae-field { margin-bottom: 0; }
.aerial-ed-form textarea.text-input { resize: vertical; font-family: inherit; line-height: 1.6; }
.ae-details { margin-top: 0.4rem; border: 1px solid var(--border-neutral); border-radius: 0.5rem; padding: 0.4rem 0.6rem; }
.ae-details summary { cursor: pointer; font-size: 0.85rem; color: var(--colors-neutral-700); user-select: none; }
.ae-details[open] summary { margin-bottom: 0.5rem; }

.ae-bound-tools { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.ae-paste { margin-bottom: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ae-bound-list { display: flex; flex-direction: column; gap: 0.6rem; }
.ae-bound { border: 1px solid var(--border-neutral); border-radius: 0.6rem; padding: 0.55rem; background: var(--colors-neutral-50); }
.ae-bound-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.45rem; }
.ae-bound-color { width: 2.1rem; height: 2.1rem; padding: 0; border: 1px solid var(--border-neutral); border-radius: 0.4rem; background: none; cursor: pointer; flex-shrink: 0; }
.ae-bound-name { flex: 1; min-width: 0; }
.ae-bound-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.ae-bound-empty { color: var(--colors-neutral-500); font-size: 0.85rem; padding: 0.7rem; border: 1px dashed var(--border-neutral); border-radius: 0.5rem; text-align: center; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-neutral); background: #fff; border-radius: 0.4rem; cursor: pointer; color: var(--colors-neutral-700); flex-shrink: 0; }
.btn-icon:hover { background: var(--colors-neutral-100); }
.btn-icon svg { width: 1rem; height: 1rem; }
.ae-bound-del:hover { color: var(--colors-red-700); border-color: var(--colors-red-200); background: var(--colors-red-50); }

/* ---- preview overlay ---- */
.aerial-pv { background: #fff; border-radius: 0.75rem; width: min(1200px, 96vw); max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.aerial-pv-body { flex: 1; overflow: auto; padding: 1rem; background: var(--colors-neutral-100); display: flex; align-items: flex-start; justify-content: center; min-height: 220px; }
.aerial-pv-img { max-width: 100%; height: auto; box-shadow: 0 4px 16px rgba(0,0,0,0.2); background: #fff; }
.aerial-pv-loading { padding: 3rem; color: var(--colors-neutral-500); }
.aerial-pv-foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--border-neutral); background: var(--colors-neutral-50); }
.aerial-pv-foot .spacer { flex: 1; }

.ae-geo-btn { width: 100%; justify-content: center; margin-bottom: 0.6rem; }
.ae-hijri { margin-top: 0.25rem; }
.btn-icon.is-on { background: var(--colors-primary-600); border-color: var(--colors-primary-600); color: #fff; }
.ae-bound.editing { border-color: var(--colors-primary-600); box-shadow: 0 0 0 2px var(--colors-primary-100); }
.ae-bound-hint { font-size: 0.74rem; color: var(--colors-neutral-600, #4b5563); background: var(--colors-primary-50); border: 1px solid var(--colors-primary-200); border-radius: 0.4rem; padding: 0.3rem 0.5rem; margin-bottom: 0.45rem; }

/* editable vertex handles on the map (Leaflet divIcons) */
.ae-vtx-main { background: var(--colors-primary-600); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.45); cursor: move; }
.ae-vtx-mid { background: rgba(255,255,255,0.9); border: 2px dashed var(--colors-primary-600); border-radius: 50%; cursor: copy; }

/* header-settings dialog: logo row */
.ae-logo-row { display: flex; align-items: center; gap: 0.75rem; }
.ae-logo-prev { width: 84px; height: 84px; flex-shrink: 0; border: 1px solid var(--border-neutral); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; background: var(--colors-neutral-50); overflow: hidden; }
.ae-logo-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ae-logo-prev span { font-size: 0.72rem; color: var(--colors-neutral-500); text-align: center; }
.ae-logo-btns { display: flex; flex-direction: column; gap: 0.4rem; }

@media (max-width: 860px) {
  .aerial-ed-body { flex-direction: column; }
  .aerial-ed-form { width: 100%; max-width: none; border-inline-start: none; border-top: 1px solid var(--border-neutral); max-height: 46vh; }
  .aerial-ed-map { min-height: 46vh; }
}

/* ============================================================
   External-department referrals (الإحالة لإدارة خارجية)
   ============================================================ */
.ext-error {
  background: var(--colors-red-50, #fef2f2);
  border: 1px solid var(--colors-red-200, #fecaca);
  color: var(--colors-red-700, #b91c1c);
  border-radius: 0.6rem; padding: 0.75rem 0.9rem; margin: 0.5rem 0;
}
.ext-turn {
  display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 600;
  color: var(--colors-neutral-500); padding: 0.05rem 0.5rem; border-radius: 999px;
  background: var(--colors-neutral-100); border: 1px solid var(--colors-neutral-200);
}
.ext-turn-you { color: var(--colors-primary-700); background: var(--colors-primary-50, #f0fdf4); border-color: var(--colors-primary-200, #bbf7d0); }

/* ---- representative portal (restricted inbox) ---- */
body.rep-mode .nav-row { display: none !important; }
.ext-portal { max-width: 980px; margin: 0 auto; }
.ext-portal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.1rem; flex-wrap: wrap;
}
.ext-portal-title { margin: 0; font-size: 1.25rem; color: var(--colors-neutral-900); }
.ext-inbox-list { display: grid; gap: 0.75rem; }
.ext-inbox-card {
  display: block; width: 100%; text-align: start; cursor: pointer;
  background: #fff; border: 1px solid var(--colors-neutral-200); border-radius: 0.8rem;
  padding: 0.9rem 1rem; transition: box-shadow .15s, border-color .15s, transform .1s;
}
.ext-inbox-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.07); border-color: var(--colors-primary-400, #4ade80); transform: translateY(-1px); }
.ext-inbox-card.is-closed { opacity: 0.7; }
.ext-inbox-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.ext-inbox-txn { font-weight: 700; color: var(--colors-neutral-900); }
.ext-inbox-subject { color: var(--colors-neutral-700); font-size: 0.92rem; margin-bottom: 0.4rem; }
.ext-inbox-meta { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--colors-neutral-500); font-size: 0.78rem; }

/* ---- staff referrals list (per order) ---- */
.ext-ref-list { display: grid; gap: 0.6rem; }
.ext-ref-card {
  display: block; width: 100%; text-align: start; cursor: pointer;
  background: var(--colors-neutral-50); border: 1px solid var(--colors-neutral-200);
  border-radius: 0.7rem; padding: 0.7rem 0.85rem; transition: border-color .15s, box-shadow .15s;
}
.ext-ref-card:hover { border-color: var(--colors-primary-400, #4ade80); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.ext-ref-card-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.ext-ref-dept { font-weight: 700; color: var(--colors-neutral-900); }
.ext-ref-card-sub { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.ext-ref-meta { color: var(--colors-neutral-500); font-size: 0.76rem; white-space: nowrap; }

/* ---- thread (conversation) ---- */
.ext-thread-top { margin-bottom: 0.75rem; }
.ext-thread-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.ext-subject { color: var(--colors-neutral-700); font-weight: 600; }
.ext-summary { width: 100%; border-collapse: collapse; background: var(--colors-neutral-50); border-radius: 0.6rem; overflow: hidden; }
.ext-summary th, .ext-summary td { text-align: start; padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--colors-neutral-200); font-size: 0.85rem; }
.ext-summary th { width: 38%; color: var(--colors-neutral-600); font-weight: 600; background: var(--colors-neutral-100); }
.ext-summary tr:last-child th, .ext-summary tr:last-child td { border-bottom: none; }

.ext-thread { display: flex; flex-direction: column; gap: 0.6rem; max-height: 42vh; overflow-y: auto; padding: 0.25rem; }
.ext-msg { max-width: 82%; border-radius: 0.8rem; padding: 0.55rem 0.75rem; border: 1px solid var(--colors-neutral-200); }
.ext-msg-mine { align-self: flex-end; background: var(--colors-primary-50, #f0fdf4); border-color: var(--colors-primary-200, #bbf7d0); }
.ext-msg-other { align-self: flex-start; background: #fff; }
.ext-msg-head { display: flex; align-items: baseline; gap: 0.6rem; justify-content: space-between; margin-bottom: 0.25rem; }
.ext-msg-head strong { font-size: 0.82rem; color: var(--colors-neutral-800); }
.ext-msg-time { font-size: 0.68rem; color: var(--colors-neutral-500); white-space: nowrap; }
.ext-msg-text { white-space: pre-wrap; word-break: break-word; color: var(--colors-neutral-800); font-size: 0.9rem; line-height: 1.6; }
.ext-msg-files { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
/* (attachment chip styles consolidated below, near the inline-viewer rules) */

.ext-reply { margin-top: 0.85rem; border-top: 1px solid var(--colors-neutral-200); padding-top: 0.75rem; }
.ext-reply-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.ext-reply-files-list { font-size: 0.76rem; }
.ext-attach-btn { cursor: pointer; }

/* ---- admin: external departments ---- */
.ext-admin-toolbar { margin: 0.5rem 0 0.75rem; }
.ext-dept-grid { display: grid; gap: 0.6rem; }
.ext-dept-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--colors-neutral-50); border: 1px solid var(--colors-neutral-200);
  border-radius: 0.7rem; padding: 0.6rem 0.85rem;
}
.ext-dept-info { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ext-dept-name { font-weight: 700; color: var(--colors-neutral-900); }
.ext-dept-contact { font-size: 0.8rem; }
.ext-dept-counts { font-size: 0.76rem; }
.ext-dept-actions { display: flex; gap: 0.25rem; flex-shrink: 0; }

@media (max-width: 620px) {
  .ext-msg { max-width: 92%; }
  .ext-dept-row { flex-direction: column; align-items: stretch; }
  .ext-dept-actions { justify-content: flex-end; }
}

/* external dept editor — representatives panel */
.ext-info-note {
  background: var(--colors-blue-50, #eff6ff); border: 1px solid var(--colors-blue-200, #bfdbfe);
  color: var(--colors-blue-700, #1d4ed8); border-radius: 0.6rem; padding: 0.7rem 0.9rem; font-size: 0.85rem;
}
.ext-rep-sub { margin: 0.2rem 0 0.55rem; font-size: 0.85rem; color: var(--colors-neutral-700); font-weight: 600; }
.ext-rep-add, .ext-rep-assign { margin-top: 0.9rem; padding-top: 0.85rem; border-top: 1px dashed var(--colors-neutral-200); }

/* external — representative table tabs + decision record */
.ext-tabs { display: inline-flex; gap: 0.25rem; background: var(--colors-neutral-100); border-radius: 0.6rem; padding: 0.2rem; }
.ext-tab {
  border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 0.85rem;
  color: var(--colors-neutral-600); padding: 0.4rem 0.85rem; border-radius: 0.45rem; display: inline-flex; align-items: center; gap: 0.4rem;
}
.ext-tab.active { background: #fff; color: var(--colors-neutral-900); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.ext-tab-count { font-size: 0.72rem; background: var(--colors-neutral-200); color: var(--colors-neutral-700); border-radius: 999px; padding: 0.02rem 0.45rem; }
.ext-tab.active .ext-tab-count { background: var(--colors-primary-100); color: var(--colors-primary-800); }
body.rep-mode .data-table tbody tr[data-ref] { cursor: pointer; }
body.rep-mode .data-table tbody tr[data-ref]:hover { background: var(--colors-neutral-50); }

.ext-record { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.25rem 0 0.2rem; }
.ext-entry { border: 1px solid var(--colors-neutral-200); border-radius: 0.7rem; padding: 0.6rem 0.8rem; background: #fff; }
.ext-entry-request { background: var(--colors-neutral-50); border-color: var(--colors-neutral-200); }
.ext-entry-decision { background: var(--colors-primary-50, #f0fdf4); border-color: var(--colors-primary-200, #bbf7d0); }
.ext-entry-decision .ext-entry-head strong { color: var(--colors-primary-800); }
.ext-entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.3rem; }
.ext-entry-head strong { font-size: 0.82rem; color: var(--colors-neutral-800); }
.ext-entry-text { white-space: pre-wrap; word-break: break-word; color: var(--colors-neutral-800); font-size: 0.9rem; line-height: 1.6; }

/* external-referral marker on the orders list actions */
.ext-flag-btn { position: relative; }
.ext-flag-btn .ext-flag-count {
  position: absolute; top: -2px; inset-inline-end: -2px;
  min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px;
  background: var(--colors-neutral-400); color: #fff; font-size: 0.6rem; line-height: 14px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.ext-flag-btn.has-answer { color: var(--colors-primary-600); }
.ext-flag-btn.has-answer .ext-flag-count { background: var(--colors-primary-600); }

/* external attachment chip (preview + download) and inline viewer */
.ext-file { display: inline-flex; align-items: stretch; border: 1px solid var(--colors-neutral-300); border-radius: 0.5rem; overflow: hidden; background: #fff; }
.ext-file-main, .ext-file-dl {
  display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; background: transparent;
  border: none; padding: 0.25rem 0.5rem; font-size: 0.76rem; color: var(--colors-blue-700, #1d4ed8); font-family: inherit;
}
.ext-file-main:hover, .ext-file-dl:hover { background: var(--colors-blue-50, #eff6ff); }
.ext-file-dl { border-inline-start: 1px solid var(--colors-neutral-200); color: var(--colors-neutral-600); }
.ext-file-main svg, .ext-file-dl svg { width: 0.95rem; height: 0.95rem; flex-shrink: 0; }
.ext-file-size { color: var(--colors-neutral-500); }

.ext-preview-modal { width: min(960px, 96vw); }
.ext-preview-body { background: var(--colors-neutral-100); display: flex; align-items: center; justify-content: center; min-height: 50vh; max-height: 76vh; overflow: auto; padding: 0.5rem; }
.ext-preview-img { max-width: 100%; max-height: 72vh; object-fit: contain; border-radius: 0.4rem; }
.ext-preview-frame { width: 100%; height: 74vh; border: none; background: #fff; }

/* ============================================================
   RBAC administration UI (Settings → الأدوار والصلاحيات)
   ============================================================ */
.rbac-matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; }
.rbac-res-block { border: 1px solid var(--colors-neutral-200); border-radius: 0.6rem; padding: 0.6rem 0.7rem; background: var(--colors-neutral-50); }
.rbac-res-title { font-weight: 700; font-size: 0.82rem; margin-bottom: 0.4rem; color: var(--colors-neutral-700); }
.rbac-perm { display: flex; align-items: flex-start; gap: 0.45rem; padding: 0.2rem 0; font-size: 0.82rem; cursor: pointer; }
.rbac-perm input { margin-top: 0.18rem; flex-shrink: 0; }
.rbac-perm code { font-size: 0.68rem; }
.rbac-ov-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0; border-bottom: 1px dashed var(--colors-neutral-200); font-size: 0.8rem; }
.rbac-ov-row:last-child { border-bottom: none; }
.rbac-ov-label { flex: 1; min-width: 0; }
.rbac-ov-ctl { display: flex; gap: 0.6rem; flex-shrink: 0; }
.rbac-ov-ctl label { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.74rem; color: var(--colors-neutral-600); cursor: pointer; }

/* ============================================================
   Request-detail files tab — drag-and-drop multi-file uploader
   (RTL-safe via logical props; theme via CSS vars only). Reuses the
   shared .bar-track / .bar-fill progress bar defined above.
   ============================================================ */
.rqd-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  border: 2px dashed var(--border-neutral);
  border-radius: var(--radius-md);
  background: var(--colors-neutral-50);
  color: var(--colors-neutral-600);
  text-align: center; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.rqd-dropzone:hover { border-color: var(--accent-500); background: var(--accent-50); color: var(--colors-neutral-700); }
.rqd-dropzone.dragover { border-color: var(--colors-primary-600); background: var(--accent-50); color: var(--colors-primary-700); }
.rqd-dz-icon { display: inline-flex; }
.rqd-dz-icon svg { width: 1.75rem; height: 1.75rem; }
.rqd-dz-text { font-size: var(--text-sm); font-weight: 600; }
.rqd-dz-hint { font-size: var(--text-xs); color: var(--colors-neutral-500); }

.rqd-upform { margin-block-start: var(--space-3); align-items: flex-end; }

.rqd-upq:not(:empty) { margin-block-start: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.rqd-up-error { padding: var(--space-1) 0; }

.rqd-upload-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-md);
  background: var(--colors-neutral-50);
}
.rqd-thumb {
  flex-shrink: 0;
  inline-size: 2.5rem; block-size: 2.5rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--colors-neutral-100); color: var(--colors-neutral-500);
}
.rqd-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.rqd-thumb-doc svg { width: 1.25rem; height: 1.25rem; }
.rqd-up-main { flex: 1; min-inline-size: 0; }
.rqd-up-top { display: flex; align-items: baseline; gap: var(--space-2); margin-block-end: var(--space-1); }
.rqd-up-name { flex: 1; min-inline-size: 0; font-size: var(--text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rqd-up-size { flex-shrink: 0; font-size: var(--text-xs); color: var(--colors-neutral-500); font-variant-numeric: tabular-nums; }
.rqd-up-item-err { margin-block-start: var(--space-1); font-size: var(--text-xs); color: var(--colors-red-700); }

/* Indeterminate ("reading…") state — animated sweep on the shared bar-track. */
.bar-track.rqd-indeterminate { position: relative; }
.bar-track.rqd-indeterminate .bar-fill { width: 40% !important; animation: rqd-indet 1s ease-in-out infinite; }
@keyframes rqd-indet {
  0%   { margin-inline-start: -40%; }
  100% { margin-inline-start: 100%; }
}

.rqd-pill {
  flex-shrink: 0;
  font-size: var(--text-xs); font-weight: 600;
  padding: 0.1rem 0.5rem; border-radius: 9999px;
  border: 1px solid transparent; white-space: nowrap;
}
.rqd-pill-wait { background: var(--colors-neutral-100); color: var(--colors-neutral-600); border-color: var(--border-neutral); }
.rqd-pill-run  { background: var(--accent-50); color: var(--accent-700); border-color: var(--accent-200); }
.rqd-pill-ok   { background: var(--colors-green-50); color: var(--colors-green-700); border-color: var(--colors-green-200); }
.rqd-pill-err  { background: var(--colors-red-50); color: var(--colors-red-700); border-color: var(--colors-red-200); }
.rqd-up-del { flex-shrink: 0; }