/* =====================================================
   SFP PHASE 4 — SDSS CUSTOM BILINGUAL WIREFRAME SYSTEM
   Unified stylesheet supporting both English LTR and Arabic RTL.
   Grayscale only · Minimal/clean design
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Cairo:wght@400;500;600;700&family=IBM+Plex+Arabic:wght@400;500;600&display=swap');

:root {
  --w-bg:      #fafafa; /* Light background */
  --w-surface: #ffffff; /* White cards and panels */
  --w-border:  #e2e2e2; /* Light borders */
  --w-line:    #cccccc; 
  --w-fill:    #f5f5f5; /* Light grey sections */
  --w-fill2:   #e8e8e8;
  --w-dark:    #4a4a4a;
  --w-darker:  #1a1a1a;
  --w-label:   #555555;
  --w-note:    #666666;
  --radius: 8px; /* Slightly rounded corners */
  --font: 'Inter', sans-serif;
  --font-mono: 'Courier New', Courier, monospace;
}

/* RTL Global Font Override */
html[dir="rtl"] {
  --font: 'Cairo', 'IBM Plex Arabic', sans-serif;
  --font-mono: 'Cairo', 'IBM Plex Arabic', sans-serif;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .page-title,
html[dir="rtl"] .box-title,
html[dir="rtl"] .brand-name,
html[dir="rtl"] .wf-table th,
html[dir="rtl"] .kpi-value {
  font-family: var(--font);
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

button, input, select, textarea, option {
  font-family: inherit;
}

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

.skip-link {
  position: absolute; top: -100%; left: 8px; z-index: 9999;
  padding: 6px 12px; background: var(--w-darker); color: #fff;
  border-radius: 0 0 var(--radius) var(--radius); font-size: 12px; font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* FOCUS STYLES — visible for keyboard users, suppressed for mouse */
:focus-visible {
  outline: 2px solid var(--w-darker);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

body {
  background: var(--w-bg);
  color: var(--w-darker);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
}

html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
  font-size: 13.5px;
  line-height: 1.6;
}

/* Typography Overrides */
h1, h2, h3, h4, h5, h6, 
.page-title, .box-title, .brand-name, .mono, .font-mono, .wf-table th, .kpi-value {
  font-family: var(--font-mono);
}

/* ── TOPBAR ── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 60px;
  background: var(--w-surface);
  border-bottom: 1px solid var(--w-border);
  display: flex; align-items: center; padding: 0 24px; gap: 16px;
  z-index: 100;
}

.brand-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}

/* Full icon+text lockup (future-foresight-logo.png) — the brandmark already
   carries "Future Foresight" as part of the image, so there's no separate
   .brand-name/.brand-sub text span to style alongside it. */
.brand-logo-full {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.search-box {
  flex: 1; max-width: 320px;
  height: 34px;
  border: 1px solid var(--w-border);
  border-radius: 6px;
  display: flex; align-items: center; padding: 0 12px; gap: 8px;
  color: var(--w-note); font-size: 12px;
  background: var(--w-fill);
}

.search-box input {
  border: none; outline: none; background: none;
  font-size: 12px; color: var(--w-darker); width: 100%; font-family: var(--font);
}

html[dir="rtl"] .search-box input {
  direction: rtl;
  text-align: right;
}

.topbar-actions {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
}

html[dir="rtl"] .topbar-actions {
  margin-left: 0;
  margin-right: auto;
}

.globe-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.globe-btn:hover { opacity: 1; }
.globe-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  display: inline-block;
  vertical-align: middle;
}

.user-profile-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  margin-inline-start: 8px;
}

html[dir="rtl"] .user-profile-btn {
  text-align: right;
}

.user-avatar {
  width: 32px;
  height: 32px;
  background: var(--w-fill2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: var(--w-darker);
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--w-darker);
  line-height: 1.2;
}

.user-role {
  font-size: 9px;
  color: var(--w-note);
}

/* ── LAYOUT ── */
.layout { display: flex; padding-top: 60px; min-height: 100vh; }

/* ── SIDEBAR ── */
.sidebar {
  width: 240px; height: calc(100vh - 60px);
  background: var(--w-surface);
  border-right: 1px solid var(--w-border);
  padding: 16px 8px 40px;
  position: fixed; top: 60px; left: 0;
  overflow-y: auto; z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: width 0.2s, left 0.2s, right 0.2s;
}

html[dir="rtl"] .sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--w-border);
}

.sidebar.collapsed {
  width: 60px;
  padding: 16px 4px;
}
.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .nav-group-title,
.sidebar.collapsed .nav-text {
  display: none !important;
}

.sidebar-toggle {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--w-dark); padding: 4px 12px;
  display: flex; align-items: center;
}

.sidebar-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--w-note); padding: 8px 12px 2px; font-weight: 600;
}

.nav-group { margin-bottom: 6px; }
.nav-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-group li {
  margin: 0;
  padding: 0;
}

.nav-group-title {
  font-size: 9px; font-weight: 700; color: var(--w-note);
  padding: 6px 12px 2px; text-transform: uppercase; letter-spacing: 0.5px;
}

/* ── COLLAPSIBLE NAV GROUPS ── */
.nav-group > .nav-group-title {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  user-select: none;
  border-radius: 4px;
}
.nav-group > .nav-group-title:hover { color: var(--w-dark); }
.nav-group > .nav-group-title:focus-visible { outline: 2px solid var(--w-darker); outline-offset: 2px; }
.nav-group-chevron {
  font-size: 9px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.nav-group.nav-group-closed > .nav-group-title .nav-group-chevron { transform: rotate(-90deg); }
.nav-group.nav-group-closed > ul { display: none; }
/* icon-only collapsed sidebar always shows items, regardless of per-group state */
.sidebar.collapsed .nav-group > ul { display: flex !important; flex-direction: column; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 12px; color: var(--w-dark);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  border-radius: 6px;
  margin-bottom: 2px;
}

.sidebar.collapsed .nav-item {
  padding: 10px 0;
  justify-content: center;
}

.nav-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item:hover {
  background: var(--w-fill);
  color: var(--w-darker);
}

.nav-item.active {
  background: #333333;
  color: #ffffff;
  font-weight: 600;
}

/* ── MAIN ── */
.main-content {
  margin-left: 240px; flex: 1; min-width: 0;
  padding: 32px; min-height: calc(100vh - 60px);
  background: #fafafa;
  transition: margin-left 0.2s, margin-right 0.2s;
}

.main-content.full { margin-left: 60px; }

html[dir="rtl"] .main-content {
  margin-left: 0;
  margin-right: 240px;
}

html[dir="rtl"] .main-content.full {
  margin-right: 60px;
}

/* ── PAGE STRUCTURE ── */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px; gap: 12px; flex-wrap: wrap;
}
.page-title { font-size: 22px; font-weight: 700; color: var(--w-darker); }
.page-sub { font-size: 11px; color: var(--w-note); margin-top: 4px; }
.breadcrumb { font-size: 10px; color: var(--w-note); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.breadcrumb b { color: var(--w-dark); }
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── GRID HELPERS ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }

/* ── BOX / CARD ── */
.box {
  background: var(--w-surface);
  border: 1px solid var(--w-border);
  border-radius: var(--radius);
  padding: 20px;
}
.box-sm { padding: 12px 16px; }

.box-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--w-darker); margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.box-title span { font-weight: 400; color: var(--w-note); text-transform: none; letter-spacing: 0; font-size: 10px; }

/* ── PLACEHOLDER ── */
.ph {
  background: var(--w-fill);
  border: 1px dashed var(--w-border);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--w-note); font-size: 12px;
  text-align: center; gap: 4px;
}

/* ── BAR CHART PLACEHOLDER ── */
.ph-bars {
  display: flex; align-items: flex-end; gap: 4px;
  padding: 8px 4px 0; width: 100%;
}
.ph-bar {
  flex: 1; background: var(--w-fill2);
  border: 1px solid var(--w-border);
  border-radius: 2px 2px 0 0; min-width: 8px;
}

/* ── BUTTONS ── */
.wf-btn {
  height: 32px; padding: 0 14px;
  border: 1px solid var(--w-border);
  border-radius: 6px;
  background: var(--w-surface);
  font-size: 11px; font-weight: 500; color: var(--w-darker);
  cursor: pointer; font-family: var(--font);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.wf-btn:hover { background: var(--w-fill); }

.wf-btn.primary {
  background: #333333;
  color: #ffffff;
  border-color: #333333;
}
.wf-btn.primary:hover {
  background: #111111;
  border-color: #111111;
}

/* Executive Dashboard's All/Threat/Challenge/Opportunity toggle row — a
   lighter bordered-emphasis active state instead of .primary's solid fill,
   which reads as visually heavier/larger next to its light-bordered siblings
   even at identical box dimensions. */
.wf-btn.dash-module-active {
  background: var(--w-fill2);
  color: var(--w-darker);
  border-color: var(--w-darker);
  font-weight: 700;
}
.wf-btn.dash-module-active:hover { background: var(--w-fill2); }

/* ── KPI METRIC BOX (SDSS style) ── */
.kpi {
  background: var(--w-surface);
  border: 1px solid var(--w-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.kpi-content {
  display: flex;
  flex-direction: column;
}
.kpi-label { font-size: 10px; color: var(--w-note); font-weight: 500; margin-bottom: 4px; }
.kpi-value { font-size: 24px; font-weight: 700; color: var(--w-darker); line-height: 1.2; }
.kpi-sub { font-size: 9px; color: var(--w-note); margin-top: 4px; }
.kpi-delta { font-size: 9px; color: var(--w-label); margin-top: 2px; }

.kpi-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: var(--w-fill);
  border: 1px solid var(--w-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--w-dark);
}
.kpi-svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── STATUS BADGES (SDSS Color Schemes) ── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 500;
  border: 1px solid var(--w-border);
  background: var(--w-fill); color: var(--w-dark);
  white-space: nowrap;
}

.badge.status-new, .badge.new {
  background: #f0f0f0;
  color: #555555;
  border-color: #e2e2e2;
}

.badge.status-active, .badge.active {
  background: #e6f0fa;
  color: #0d47a1;
  border-color: #bbdefb;
}

.badge.status-voting, .badge.voting {
  background: #fef3d6;
  color: #7f5600;
  border-color: #ffe0b2;
}

.badge.status-completed, .badge.completed {
  background: #e2f9eb;
  color: #1b5e20;
  border-color: #c8e6c9;
}

.badge.filled {
  background: var(--w-darker);
  color: #fff;
  border-color: var(--w-darker);
}

.badge.status-failed, .badge.failed {
  background: #fdecea;
  color: #b71c1c;
  border-color: #f5c6cb;
}

.badge.status-cancelled, .badge.cancelled {
  background: #f0f0f0;
  color: #757575;
  border-color: #e0e0e0;
}

.tag {
  display: inline-block; padding: 2px 8px;
  border: 1px solid var(--w-border); border-radius: 4px;
  font-size: 10px; color: var(--w-label); background: var(--w-fill);
  margin: 2px;
}

/* ── INLINE ALERT BANNERS (persistent, distinct from showToast()) ── */
.banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid; font-size: 12px; line-height: 1.5;
  margin-bottom: 12px;
}
.banner-icon { flex-shrink: 0; margin-top: 1px; }
.banner-msg { flex: 1; }
.banner-dismiss {
  flex-shrink: 0; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; font-size: 15px; line-height: 1;
  padding: 0; color: inherit; opacity: .6;
}
.banner-dismiss:hover { opacity: 1; }

.banner-info { background: var(--w-fill); color: var(--w-dark); border-color: var(--w-border); }
.banner-success { background: var(--w-fill); color: var(--w-darker); border-color: var(--w-line); }
.banner-warning { background: var(--w-fill2); color: var(--w-darker); border-style: dashed; border-color: var(--w-line); }
.banner-error { background: var(--w-fill2); color: var(--w-darker); border-width: 2px; border-color: var(--w-darker); }

/* ── PROGRESS BAR ── */
.progress { background: var(--w-fill); border: 1px solid var(--w-border); border-radius: 4px; height: 8px; overflow: hidden; }
.progress-fill { height: 100%; background: #333333; }
.progress-fill.status-active { background: #0d47a1; }
.progress-fill.status-completed { background: #1b5e20; }
.progress-fill.status-voting { background: #b78103; }
.progress-fill.status-failed { background: #b71c1c; }
.progress-fill.status-cancelled { background: #9e9e9e; }
.progress-fill.full { background: #1b5e20; }

/* ── SEVERITY ── */
.sev-critical { border-left: 4px solid var(--w-darker); }
.sev-high     { border-left: 4px dashed var(--w-fill2); }
.sev-medium   { border-left: 2px solid var(--w-border); }

html[dir="rtl"] .sev-critical { border-left: none; border-right: 4px solid var(--w-darker); }
html[dir="rtl"] .sev-high     { border-left: none; border-right: 4px dashed var(--w-fill2); }
html[dir="rtl"] .sev-medium   { border-left: none; border-right: 2px solid var(--w-border); }

/* ── PIPELINE ── */
.pipeline { display: flex; align-items: stretch; margin: 12px 0; }
.pipe-step {
  flex: 1; text-align: center; padding: 8px 4px;
  border: 1px solid var(--w-border);
  font-size: 11px; font-weight: 600; color: var(--w-label);
  background: var(--w-surface);
}
.pipe-step:not(:last-child) { border-right: none; }

html[dir="rtl"] .pipe-step:not(:last-child) {
  border-right: 1px solid var(--w-border);
  border-left: none;
}

.pipe-step:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.pipe-step:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }

html[dir="rtl"] .pipe-step:first-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}
html[dir="rtl"] .pipe-step:last-child {
  border-radius: var(--radius) 0 0 var(--radius);
}

.pipe-step.done   { background: var(--w-fill); color: var(--w-dark); }
.pipe-step.active { background: var(--w-darker); color: #fff; font-weight: 700; }

/* ── TABLE ── */
.wf-table { width: 100%; border-collapse: collapse; }
.wf-table th {
  text-align: left; padding: 10px 16px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--w-label); font-weight: 700;
  border-bottom: 1.5px solid var(--w-darker);
  background: var(--w-fill);
}
.wf-table td {
  padding: 12px 16px; border-bottom: 1px solid var(--w-border);
  font-size: 12px; vertical-align: middle;
}

html[dir="rtl"] .wf-table th {
  text-align: right;
}
html[dir="rtl"] .wf-table td {
  text-align: right;
}

.wf-table tr:hover td { background: var(--w-fill); }
.wf-table .mono { font-family: var(--font-mono); font-size: 11px; font-weight: bold; }

/* ── WIZARD PROGRESS / STEPPER ── */
.wizard-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
  gap: 8px;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 120px;
}

.wizard-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--w-surface);
  border: 2px solid var(--w-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--w-note);
  transition: all 0.2s ease;
}

.wizard-step.active .wizard-circle {
  background: #333333;
  border-color: #333333;
  color: #ffffff;
}

.wizard-step.completed .wizard-circle {
  background: var(--w-fill2);
  border-color: var(--w-dark);
  color: var(--w-darker);
}

.wizard-step-label {
  font-size: 9px;
  color: var(--w-note);
  margin-top: 6px;
  text-align: center;
  font-weight: 500;
}
.wizard-step.active .wizard-step-label {
  color: var(--w-darker);
  font-weight: 700;
}

.wizard-line-connector {
  position: absolute;
  top: 16px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--w-line);
  z-index: 1;
}

/* ── FORM ── */
.form-grid { display: grid; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 11px; font-weight: 600; color: var(--w-darker); }
.field-input, .field-select, .field-textarea {
  border: 1px solid var(--w-border); border-radius: 6px;
  padding: 8px 12px; font-size: 12px; font-family: var(--font);
  color: var(--w-darker); background: var(--w-surface); outline: none;
  width: 100%;
}

html[dir="rtl"] .field-input, html[dir="rtl"] .field-select, html[dir="rtl"] .field-textarea {
  text-align: right;
  direction: rtl;
}

.field-input:focus, .field-select:focus, .field-textarea:focus {
  border-color: var(--w-darker);
}
.field-textarea { resize: vertical; min-height: 80px; }

/* Rich text editor (report-editor's Summary/Features/Negatives/Advantages/
   Sources/Key Information fields, per Screenshots.docx) — a toolbar row
   above a contenteditable div styled like .field-textarea. */
.rte-toolbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  border: 1px solid var(--w-border); border-bottom: none;
  border-radius: 6px 6px 0 0; padding: 4px 6px; background: var(--w-fill);
}
.rte-toolbar select {
  height: 22px; font-size: 9px; border: 1px solid var(--w-border);
  border-radius: 3px; background: var(--w-surface); color: var(--w-darker);
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23777777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; background-size: 8px 5px;
  padding: 0 18px 0 6px;
}
html[dir="rtl"] .rte-toolbar select {
  background-position: left 6px center;
  padding: 0 6px 0 18px;
}
.rte-btn {
  height: 22px; min-width: 22px; padding: 0 5px; font-size: 10px;
  border: 1px solid var(--w-border); border-radius: 3px;
  background: var(--w-surface); color: var(--w-darker); cursor: pointer;
}
.rte-btn:hover { background: var(--w-fill2); }
.rte-editor {
  border-top: none; border-radius: 0 0 6px 6px;
  overflow-y: auto; cursor: text; resize: none;
}
.rte-editor:empty:before {
  content: attr(data-placeholder);
  color: var(--w-note);
}
.field-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23777777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px;
  padding-right: 32px;
  height: 36px;
}

html[dir="rtl"] .field-select {
  background-position: left 12px center;
  padding-right: 12px;
  padding-left: 32px;
}

/* Grayscale range slider — overrides the browser-default blue accent so
   sliders match the rest of the wireframe's colorless philosophy (see
   badge()/priorityIndicator()). Use instead of a bare <input type="range">. */
.wf-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px;
  background: var(--w-border); outline: none;
  accent-color: var(--w-darker);
  cursor: pointer;
}
.wf-slider::-webkit-slider-runnable-track { background: var(--w-border); height: 4px; border-radius: 2px; }
.wf-slider::-moz-range-track { background: var(--w-border); height: 4px; border-radius: 2px; border: none; }
.wf-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -5px;
  border-radius: 50%; background: var(--w-darker);
  border: 2px solid var(--w-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  cursor: pointer;
}
.wf-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%; background: var(--w-darker);
  border: 2px solid var(--w-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  cursor: pointer;
}

/* ── TABS ── */
.tabs { display: flex; border-bottom: 1px solid var(--w-border); margin-bottom: 20px; }
.tab {
  padding: 8px 20px; font-size: 12px; font-weight: 500;
  color: var(--w-note); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab.active { color: var(--w-darker); border-bottom-color: var(--w-darker); font-weight: 700; }

/* ── VERTICAL MENU (Knowledge Base's Learning Library module list) ── */
/* Mirrors .nav-item/.nav-item.active's look-and-feel so the Knowledge
   Base's manual table-of-contents reads as "the same kind of menu" as the
   main sidebar, just scoped to that screen's left TOC column. */
.kb-menu { display: flex; flex-direction: column; gap: 2px; }
.kb-menu-item {
  display: flex; align-items: center;
  padding: 9px 12px; font-size: 12px; font-weight: 500;
  color: var(--w-dark); cursor: pointer;
  border-radius: 6px;
}
.kb-menu-item:hover { background: var(--w-fill); color: var(--w-darker); }
.kb-menu-item.active { background: #333333; color: #ffffff; font-weight: 600; }
.kb-toc-chapter {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--w-note); padding: 14px 12px 4px;
}
.kb-toc-chapter:first-child { padding-top: 4px; }

/* ── FILTER BAR ── */
.filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px; align-items: center;
}
.filter-bar select, .filter-bar input {
  border: 1px solid var(--w-border); border-radius: 6px;
  padding: 6px 12px; font-size: 11px; font-family: var(--font);
  background: var(--w-surface); color: var(--w-darker); outline: none;
  height: 36px; box-sizing: border-box;
}

html[dir="rtl"] .filter-bar select, html[dir="rtl"] .filter-bar input {
  text-align: right;
  direction: rtl;
}

.filter-bar select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23777777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px;
  padding-right: 28px;
}

html[dir="rtl"] .filter-bar select {
  background-position: left 10px center;
  padding-right: 12px;
  padding-left: 28px;
}

input.filter-search {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%23777777' stroke-width='2'/%3E%3Cline x1='16.2' y1='16.2' x2='21' y2='21' stroke='%23777777' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 13px 13px;
  padding-right: 30px;
}

html[dir="rtl"] input.filter-search {
  background-position: left 10px center;
  padding-right: 12px;
  padding-left: 30px;
}

/* Clear ("x") button that overlays a .filter-search input's magnifying-glass
   background-icon once the field has text (see window._searchToggleClear) —
   sits at the same trailing spot so it visually swaps the icon rather than
   adding a second one. */
.search-clear-btn {
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: var(--w-surface); cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--w-note); padding: 0;
}
.search-clear-btn:hover { color: var(--w-darker); }
html[dir="rtl"] .search-clear-btn { right: auto; left: 8px; }

/* Action Centre (SCREENS['notifications']) row highlight on "View" —
   see window._acSetRowSelected / window.closeMapAlertDetail. */
.ac-row.selected {
  border-color: var(--w-darker) !important;
  background: var(--w-fill) !important;
  box-shadow: 0 0 0 1.5px var(--w-darker) inset;
}

/* ── DIVIDER ── */
.divider { height: 1px; background: var(--w-border); margin: 16px 0; }

/* ── ANNOTATION ── */
.annotation {
  border: 1px solid var(--w-border);
  border-radius: 6px;
  background: var(--w-fill);
  padding: 8px 12px;
  font-size: 10px; color: var(--w-label);
  position: relative;
  margin-bottom: 16px;
}
.annotation::before {
  content: '📝 Note: '; font-weight: 700; color: var(--w-darker);
}

html[dir="rtl"] .annotation::before {
  content: '📝 ملاحظة: ';
}

/* ── INFO ICON (replaces .annotation for passive UI notes) ── */
.info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--w-border); background: var(--w-fill);
  color: var(--w-note); font-size: 10px; font-weight: 700; font-style: italic;
  font-family: Georgia, serif; line-height: 1; cursor: help;
  flex-shrink: 0; margin-inline-start: 6px; vertical-align: middle;
}
.info-icon:hover, .info-icon:focus-visible {
  color: var(--w-darker); border-color: var(--w-darker);
  outline: none;
}

/* ── PRIORITY INDICATOR ── */
.priority-indicator { display: inline-flex; align-items: center; gap: 5px; }
.priority-seg {
  width: 5px; height: 12px; border-radius: 1px;
  background: var(--w-fill); border: 1px solid var(--w-border);
}
.priority-seg.filled { background: var(--w-darker); border-color: var(--w-darker); }
.priority-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; margin-inline-start: 2px; }

/* ── EMPTY / LOADING / ERROR STATE PANELS ── */
.state-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 48px 20px; text-align: center;
  color: var(--w-note); border: 1px dashed var(--w-border); border-radius: var(--radius);
}
.state-panel p { margin: 0; font-size: 12px; max-width: 40ch; }
.state-panel-error { color: #a23b3b; border-color: #e0bcbc; border-style: solid; }
.state-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--w-border); border-top-color: var(--w-darker);
  animation: state-spin 0.8s linear infinite;
}
@keyframes state-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .state-spinner { animation-duration: 2.4s; }
}

/* ── APPROVAL DRAWER (first modal/overlay pattern in this codebase — see
   Design System Guidance audit; used only from the UI Kit reference page
   today, built generically for any screen that wants a slide-in action panel
   instead of an inline page section) ── */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(20,20,20,.4);
  z-index: 1200; opacity: 0; visibility: hidden;
  transition: opacity .2s ease;
}
.drawer-overlay.open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 90vw;
  background: var(--w-surface); border-left: 1px solid var(--w-border);
  box-shadow: -8px 0 24px rgba(0,0,0,.12);
  z-index: 1201; display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
}
.drawer.open { transform: translateX(0); }

html[dir="rtl"] .drawer {
  right: auto; left: 0;
  border-left: none; border-right: 1px solid var(--w-border);
  box-shadow: 8px 0 24px rgba(0,0,0,.12);
  transform: translateX(-100%);
}
html[dir="rtl"] .drawer.open { transform: translateX(0); }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--w-border);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
.drawer-close {
  background: none; border: none; cursor: pointer; color: var(--w-note);
  padding: 4px; line-height: 1;
}
.drawer-close:hover, .drawer-close:focus-visible { color: var(--w-darker); }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px; }
.drawer-footer {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px; border-top: 1px solid var(--w-border);
}

/* ── SECTION TITLE ── */
.section-title {
  font-size: 12px; font-weight: 700; color: var(--w-dark);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.section-title .ref { font-size: 10px; color: var(--w-note); font-weight: 400; }

/* ── GIS EMBED AREA ── */
.gis-ph {
  background: #f0f0f0;
  border: 1px solid var(--w-border);
  border-radius: var(--radius);
  position: relative; overflow: hidden;
}
.gis-ph .gis-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--w-line) 1px, transparent 1px), linear-gradient(90deg, var(--w-line) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .3;
}
.gis-ph .gis-label {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; font-size: 12px; color: var(--w-note);
}
.pin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #ffffff; background: #555; position: absolute; transform: translate(-50%,-50%); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.pin.dark { background: #333333; }
.pin.filled { background: #b78103; }
.pin.green { background: #1b5e20; }

.gis-legend-row { display: flex; align-items: center; gap: 8px; font-size: 9px; color: var(--w-darker); margin-bottom: 4px; }
.legend-pin { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legend-pin.dark { background: #333333; }
.legend-pin.filled { background: #b78103; }
.legend-pin.green { background: #1b5e20; }

/* Map overlay — Legend (bottom-left) sitting directly on the GIS map,
   alongside the top-left layer toggle and top-right priority filter
   controls. The Date Range control (.gis-daterange-overlay, below) used to
   sit here too but was moved into the filter-bar next to the "Jump to
   event" select, so it's no longer positioned relative to the map. */
.gis-legend-overlay {
  position: absolute;
  bottom: 10px; left: 10px;
  z-index: 1000;
  background: var(--w-surface);
  padding: 6px 8px;
  border: 1.5px solid var(--w-border);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.gis-legend-overlay .gis-legend-row { margin-bottom: 2px; font-size: 9px; gap: 6px; }
.gis-legend-overlay .gis-legend-row:last-child { margin-bottom: 0; }
html[dir="rtl"] .gis-legend-overlay { left: auto; right: 10px; }
.gis-legend-group-title { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--w-note); margin-bottom: 3px; }
.gis-legend-glyph { display: inline-flex; align-items: center; justify-content: center; width: 12px; font-size: 10px; flex-shrink: 0; }

/* GIS map markers (L.divIcon) — glyph carries record type, fill color carries
   recency within the selected timeline range (see GIS_RECENCY_COLORS). */
.gis-marker-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: #ffffff;
  cursor: pointer;
}

/* Inline now (moved out of the map overlay into the filter-bar, next to the
   "Jump to event" select) — no more absolute positioning/z-index/shadow. */
.gis-daterange-overlay {
  background: var(--w-surface);
  padding: 6px 10px;
  border: 1.5px solid var(--w-border);
  border-radius: var(--radius);
  width: 280px;
}

/* GIS map's own zoom + layers controls, styled to exactly match the Executive Dashboard mini-map's (#dashboardGisMap) sizing/layout, so both screens present the same layer-control UI */
#gisMap .leaflet-top.leaflet-left { top: 14px; left: 14px; }
#gisMap .leaflet-top.leaflet-right { top: 14px; right: 14px; }
#gisMap .leaflet-bottom.leaflet-right { bottom: 14px; right: 14px; }
#gisMap .leaflet-control { margin-top: 0; margin-bottom: 8px; }
#gisMap .leaflet-control-zoom a { width: 30px; height: 30px; line-height: 30px; font-size: 16px; color: #1a1a1a; background-color: #fff; border-radius: 4px; }
#gisMap .leaflet-control-layers {
  font-size: 11px;
  color: #1a1a1a;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
#gisMap .leaflet-control-layers-toggle {
  width: 30px;
  height: 30px;
  background-size: 18px 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.25);
  border-radius: 4px;
}

/* Expand the layer options cleanly to the right of the toggle icon with ample spacing and drop shadow */
#gisMap .leaflet-control-layers-expanded {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 0 !important;
  direction: ltr !important;
}
#gisMap .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  display: block !important;
}
#gisMap .leaflet-control-layers-expanded .leaflet-control-layers-list {
  display: block !important;
  background: #fff !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
  white-space: nowrap;
}
#gisMap .leaflet-control-layers-list label { display: block; margin-bottom: 4px; color: #1a1a1a; font-weight: 600; cursor: pointer; }

/* Compact Leaflet zoom + layers controls, both stacked on the left, for small snapshot maps */
#dashboardGisMap .leaflet-top.leaflet-left { top: 6px; left: 6px; }
#dashboardGisMap .leaflet-control { margin-top: 0; margin-bottom: 4px; }
#dashboardGisMap .leaflet-control-zoom a { width: 28px; height: 28px; line-height: 28px; font-size: 16px; color: #1a1a1a; background-color: #fff; }
#dashboardGisMap .leaflet-control-layers {
  font-size: 10px;
  color: #1a1a1a;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
#dashboardGisMap .leaflet-control-layers-toggle {
  width: 28px;
  height: 28px;
  background-size: 18px 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  border-radius: 4px;
}
#dashboardGisMap .leaflet-control-layers-expanded {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 0 !important;
  direction: ltr !important;
}
#dashboardGisMap .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  display: block !important;
}
#dashboardGisMap .leaflet-control-layers-expanded .leaflet-control-layers-list {
  display: block !important;
  background: #fff !important;
  padding: 6px 8px !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 5px rgba(0,0,0,0.4) !important;
  white-space: nowrap;
}
#dashboardGisMap .leaflet-control-layers-list label { margin-bottom: 2px; color: #1a1a1a; }

/* P1-P4 priority filter control, top-right of the Executive Dashboard mini-map */
#dashboardGisMap .leaflet-top.leaflet-right { top: 6px; right: 6px; }
.dash-priority-filter {
  display: flex;
  gap: 3px;
  background: #fff;
  border-radius: 4px;
  padding: 3px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  direction: ltr;
}
a.dash-priority-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 7px;
  border: 1px solid var(--w-border);
  border-radius: 3px;
  background: #fff;
  color: #1a1a1a;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
a.dash-priority-btn:hover, a.dash-priority-btn:visited { background: var(--w-fill); color: #1a1a1a; }
a.dash-priority-btn.active, a.dash-priority-btn.active:visited { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.dash-priority-btn.dash-priority-reset { font-weight: 500; }

/* ── DUAL-HANDLE RANGE SLIDER (GIS Date Range) ── */
/* Two transparent range inputs stacked on one rail; only their thumbs are
   interactive (pointer-events scoped to the thumb pseudo-element) so both
   handles stay independently draggable without z-index fighting. */
.gis-range-track {
  position: relative;
  height: 20px;
  direction: ltr;
}
.gis-range-rail {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  margin-top: -2px;
  background: var(--w-border);
  border-radius: 2px;
}
.gis-range-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  background: #1a1a1a;
  border-radius: 2px;
}
.gis-range-track input[type="range"] {
  position: absolute;
  left: 0; right: 0; top: 0;
  width: 100%; height: 20px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.gis-range-track input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 20px; }
.gis-range-track input[type="range"]::-moz-range-track { background: transparent; height: 20px; border: none; }
.gis-range-track input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 12px; height: 12px;
  margin-top: 0;
  border-radius: 50%;
  background: #1a1a1a;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  cursor: pointer;
}
.gis-range-track input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  cursor: pointer;
}

/* ── TIMELINE ── */
.timeline { padding-left: 24px; border-left: 1.5px solid var(--w-line); position: relative; }

html[dir="rtl"] .timeline {
  padding-left: 0;
  padding-right: 24px;
  border-left: none;
  border-right: 1.5px solid var(--w-line);
}

.tl-item { position: relative; margin-bottom: 20px; padding-left: 8px; }
.tl-item[role="link"]:hover .tl-label, .tl-item[role="link"]:focus-visible .tl-label { text-decoration: underline; }

html[dir="rtl"] .tl-item {
  padding-left: 0;
  padding-right: 8px;
}

.tl-dot { position: absolute; left: -29px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--w-surface); border: 2px solid var(--w-dark); }

html[dir="rtl"] .tl-dot {
  left: auto;
  right: -29px;
}

.tl-dot.filled { background: var(--w-darker); border-color: var(--w-darker); }
.tl-dot.completed { background: #e2f9eb; border-color: #1b5e20; }
.tl-time { font-size: 9px; color: var(--w-note); }
.tl-label { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.tl-desc  { font-size: 11px; color: var(--w-label); }

/* ── CHAT ── */
.chat-wrap { display: flex; flex-direction: column; border: 1px solid var(--w-border); border-radius: var(--radius); overflow: hidden; background: var(--w-surface); }
.chat-header { background: var(--w-fill); border-bottom: 1px solid var(--w-border); padding: 12px 16px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.chat-messages { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 240px; }
.chat-msg { max-width: 75%; padding: 10px 14px; border: 1px solid var(--w-border); border-radius: var(--radius); font-size: 12px; line-height: 1.6; }

.chat-msg.user { align-self: flex-end; background: #333333; color: #ffffff; border-color: #333333; }
.chat-msg.ai { align-self: flex-start; background: var(--w-fill); }

html[dir="rtl"] .chat-msg.user {
  align-self: flex-start;
}
html[dir="rtl"] .chat-msg.ai {
  align-self: flex-end;
}

.chat-msg .cite { display: inline-block; padding: 1px 4px; border: 1px solid var(--w-border); border-radius: 4px; font-size: 9px; background: var(--w-surface); color: var(--w-darker); font-family: var(--font-mono); margin: 0 2px; }
.chat-input { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--w-border); background: var(--w-fill); }
.chat-input input { flex: 1; border: 1px solid var(--w-border); border-radius: 6px; padding: 8px 12px; font-size: 12px; font-family: var(--font); }

html[dir="rtl"] .chat-input input {
  text-align: right;
  direction: rtl;
}

/* ── COLLABORATIVE markups ── */
.comment { border-left: 3px solid var(--w-dark); padding: 8px 12px; margin: 10px 0; font-size: 12px; background: var(--w-fill); border-radius: 0 var(--radius) var(--radius) 0; }

html[dir="rtl"] .comment {
  border-left: none;
  border-right: 3px solid var(--w-dark);
  border-radius: var(--radius) 0 0 var(--radius);
}

.comment-meta { font-size: 9px; color: var(--w-note); margin-bottom: 4px; font-family: var(--font-mono); font-weight: bold; }

/* ── BREAKING BANNER ── */
.breaking {
  background: var(--w-fill2);
  color: var(--w-darker);
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1.5px solid var(--w-darker);
  border-radius: var(--radius);
  width: 100%;
  overflow: hidden;
  margin-top: -12px;
  margin-bottom: 16px;
}

.breaking-label { background: var(--w-darker); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: .5px; flex-shrink: 0; }
.ticker-container {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  display: flex;
  align-items: center;
}
.ticker-text {
  display: inline-block;
  padding-left: 100%;
  animation: ticker-anim 25s linear infinite;
}
.ticker-item { cursor: pointer; }
.ticker-item:hover, .ticker-item:focus-visible { text-decoration: underline; }

.hidden { display: none !important; }

/* ── NOTIFICATION PANEL ── */
.notif-wrap { position: relative; }
#notifBtn { border: none; background: none; padding: 4px; height: auto; }
#notifBtn:hover { background: none; }
.notif-icon-wrapper {
  position: relative;
  display: inline-flex;
}
#notifBtnCount, .notif-badge-ui {
  position: absolute;
  top: -4px;
  right: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--w-darker);
  color: var(--w-surface);
  font-size: 8px;
  font-weight: 700;
  min-width: 13px;
  height: 13px;
  border-radius: 50%;
  padding: 0;
  line-height: 1;
}
.btn-icon-svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.notif-panel { position: absolute; right: 0; top: calc(100% + 12px); width: 320px; background: var(--w-surface); border: 1px solid var(--w-border); border-radius: var(--radius); box-shadow: 0 4px 24px rgba(0,0,0,.08); z-index: 200; overflow: hidden; }

html[dir="rtl"] .notif-panel {
  right: auto;
  left: 0;
}

.notif-header { padding: 12px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--w-border); display: flex; align-items: center; justify-content: space-between; }
.notif-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--w-fill); font-size: 11px; cursor: pointer; transition: background 0.15s ease; }
.notif-item:hover { background: var(--w-fill); }
.notif-dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--w-border); flex-shrink: 0; margin-top: 4px; }
.notif-dot.filled { background: var(--w-darker); border-color: var(--w-darker); }
.notif-view-all-btn { display: block; width: 100%; padding: 10px 16px; background: none; border: none; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--w-darker); text-align: center; }
.notif-view-all-btn:hover, .notif-view-all-btn:focus-visible { background: var(--w-fill); }

/* Search-and-select dropdown (Virtual Teams' team picker — see
   window._teamsComboToggle/_teamsComboOpenPanel/_teamsComboSelect). Closed
   state (.combo-trigger) reuses .field-select's own border/height/chevron
   styling so it looks like any other <select> in this codebase until
   opened — only then does .combo-panel appear, reusing .notif-panel's
   floating-panel treatment (border/shadow/z-index) and .kb-menu-item's
   hover/active look for its search input + option list. This is
   deliberately different from a permanently-visible search box: the field
   only looks like search once you've actually opened it. */
.combo-trigger { display: flex; align-items: center; cursor: pointer; }
.combo-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.combo-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--w-surface); border: 1px solid var(--w-border); border-radius: var(--radius); box-shadow: 0 4px 24px rgba(0,0,0,.08); z-index: 200; padding: 8px; }
.combo-panel .field-input { margin-bottom: 6px; }
.combo-list { max-height: 200px; overflow-y: auto; }
.combo-option { padding: 9px 12px; font-size: 12px; cursor: pointer; border-radius: 4px; }
.combo-option:hover, .combo-option.active { background: var(--w-fill); color: var(--w-darker); }
.combo-empty { padding: 9px 12px; font-size: 11px; color: var(--w-note); }

/* System Analytics employee filter */
.fore-employee-filter {
  width: 260px;
  max-width: 100%;
  flex: 0 1 260px;
}
.fore-employee-filter .fore-employee-trigger {
  height: 36px;
  padding-left: 28px !important;
  padding-right: 32px;
  min-width: 0;
}
.fore-employee-filter .fore-employee-panel {
  min-width: 260px;
}
.fore-employee-filter .combo-option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[dir="rtl"] .fore-employee-filter .fore-employee-trigger {
  padding-left: 32px !important;
  padding-right: 28px !important;
}

/* ── CARDS GRID ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.report-card, .challenge-card {
  background: var(--w-surface);
  border: 1px solid var(--w-border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--w-darker);
  margin-bottom: 8px;
}

.card-subtitle {
  font-size: 11px;
  color: var(--w-note);
  margin-bottom: 12px;
}

.card-description {
  font-size: 11px;
  color: var(--w-label);
  line-height: 1.5;
  margin-bottom: 16px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-actions-row {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--w-border);
  padding-top: 14px;
}

.card-actions-row .wf-btn {
  flex: 1;
}

/* Only External Reports has three card actions. Other cards retain their original spacing. */
#repListCol .rep-impact-actions .wf-btn { padding-inline: 8px; }

/* ── TRANSLATION SPLIT VIEW ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.split-pane { background: var(--w-fill); border: 1px solid var(--w-border); border-radius: var(--radius); padding: 16px; position: relative; }
.pane-label { font-size: 10px; font-weight: 700; color: var(--w-note); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--w-border); display: flex; justify-content: space-between; align-items: center; }
.trans-queue-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--w-border); margin-bottom: 6px; cursor: pointer; background: var(--w-surface); }
.trans-queue-item.active { border-color: var(--w-darker); background: var(--w-fill); }
.trans-queue-item .tq-id { font-family: var(--font-mono); font-size: 10px; color: var(--w-note); flex-shrink: 0; }
.trans-queue-item .tq-title { font-size: 11px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── VISIBLE SCROLLBAR (default OS overlay scrollbars auto-hide until hover/scroll) ── */
.wf-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--w-note) transparent;
}
.wf-scroll::-webkit-scrollbar { width: 6px; }
.wf-scroll::-webkit-scrollbar-track { background: transparent; }
.wf-scroll::-webkit-scrollbar-thumb { background: var(--w-note); border-radius: 3px; }

/* ── PRE-AUTH (login screen only — no app chrome until login) ── */
body.pre-auth .topbar,
body.pre-auth .sidebar,
body.pre-auth .sidebar-toggle {
  display: none !important;
}
body.pre-auth .layout { padding-top: 0; }
body.pre-auth .main-content,
body.pre-auth .main-content.full {
  margin-left: 0 !important;
  margin-right: 0 !important;
  min-height: 100vh;
}
html[dir="rtl"] body.pre-auth .main-content,
html[dir="rtl"] body.pre-auth .main-content.full {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── ANIMATIONS ── */
@keyframes ticker-anim {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

/* ── RESPONSIVE ── */
@media(max-width: 992px) {
  .sidebar { width: 0; padding: 0; overflow: hidden; border: none; }
  .main-content { margin-left: 0; padding: 20px; }
  html[dir="rtl"] .main-content { margin-right: 0; }
  .grid-5, .grid-4, .grid-3, .card-grid { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  /* Report Library's inline preview split stacks below its full-width tabs. */
  #repGrid { grid-template-columns: 1fr !important; }
  .user-details { display: none !important; }
}
@media(max-width: 600px) {
  .grid-5, .grid-4, .grid-3, .card-grid { grid-template-columns: 1fr; }
  .search-box { display: none !important; }
  .fore-employee-filter { width: 100%; flex-basis: 100%; }
  .fore-employee-filter .fore-employee-panel { min-width: 100%; }
}

/* ── FILTER ICONS ── */
.filter-select-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.filter-select-wrapper .filter-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  pointer-events: none;
  font-size: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
}
.filter-select-wrapper select.field-select {
  padding-left: 28px !important;
}
.filter-svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--w-note);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.filter-select-wrapper:hover .filter-svg {
  stroke: var(--w-darker);
}

/* RTL overrides */
html[dir="rtl"] .filter-select-wrapper .filter-icon {
  left: auto;
  right: 10px;
}
html[dir="rtl"] .filter-select-wrapper select.field-select {
  padding-left: 32px !important;
  padding-right: 28px !important;
}

/* ── LEAFLET TOOLTIP STYLING OVERRIDES ── */
.leaflet-tooltip {
  background: var(--w-surface) !important;
  color: var(--w-text) !important;
  border: 1px solid var(--w-border) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.leaflet-tooltip-top:before { border-top-color: var(--w-border) !important; }
.leaflet-tooltip-bottom:before { border-bottom-color: var(--w-border) !important; }
.leaflet-tooltip-left:before { border-left-color: var(--w-border) !important; }
.leaflet-tooltip-right:before { border-right-color: var(--w-border) !important; }

/* ── ALERT DETAIL PANEL STYLES ── */
.detail-section-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--w-note);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--w-border);
  padding-bottom: 3px;
}
.detail-comment-item {
  background: var(--w-fill);
  padding: 8px;
  border-radius: var(--radius);
  border: 1px solid var(--w-border);
}
.detail-comment-header {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 700;
  color: var(--w-darker);
  margin-bottom: 4px;
}
.detail-comment-time {
  color: var(--w-note);
  font-weight: 400;
}
.detail-comment-text {
  font-size: 9px;
  color: var(--w-label);
  line-height: 1.4;
}

/* ── REPORT EDITOR CHEVRON STEP BAR ── */
/* Arrow/chevron-shaped wizard steps (requested reference: a horizontal
   sequence of pointed segments, each tucking its tip into the next
   segment's notch) instead of the old flat bordered boxes. Colors stay
   grayscale per this project's design rule — the reference image's bright
   green "active" segment became var(--w-darker) (matching every other
   "active/selected" treatment in this codebase) rather than introducing a
   one-off color. clip-path coordinates are physical (not logical), so the
   arrow direction needs an explicit mirrored override for RTL — it can't
   be done with inline-start/end alone. */
.report-step-bar {
  display: flex;
  margin-bottom: 16px;
}
.report-step {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 9px 18px;
  text-align: center;
  background: var(--w-fill);
  color: var(--w-note);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
}
.report-step:first-child {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  padding-inline-start: 14px;
}
.report-step:not(:first-child) {
  margin-inline-start: -16px;
}
.report-step.upcoming { background: var(--w-fill); color: var(--w-note); }
.report-step.done { background: var(--w-fill2); color: var(--w-darker); z-index: 2; }
.report-step.active { background: var(--w-darker); color: #ffffff; font-weight: 700; z-index: 3; }
.report-step[role="button"] { cursor: pointer; }
.report-step:not([role="button"]) { cursor: default; }
.report-step-num {
  font-size: 8px; opacity: 0.75; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.report-step-label { font-weight: 700; font-size: 10px; }

html[dir="rtl"] .report-step {
  clip-path: polygon(100% 0, 16px 0, 0 50%, 16px 100%, 100% 100%, calc(100% - 16px) 50%);
}
html[dir="rtl"] .report-step:first-child {
  clip-path: polygon(100% 0, 16px 0, 0 50%, 16px 100%, 100% 100%);
  padding-inline-start: 14px;
}

/* ── MANAGEMENT PANEL · SIGNAL SETUP ── */
/* Full-width cell inside a .form-grid.grid-2. Spans "1 / -1" rather than
   "span 2" so it still fits when .grid-2 collapses to one column at 992px
   (span 2 would force a phantom second column there). */
.field-wide { grid-column: 1 / -1; }

/* Removable tag (.tag + a small "x") — selected Sub-Domains / Linked Keywords */
.tag-removable { display: inline-flex; align-items: center; gap: 4px; }
.tag-remove {
  border: none; background: none; cursor: pointer; padding: 0;
  font-size: 13px; line-height: 1; color: var(--w-note);
}
.tag-remove:hover, .tag-remove:focus-visible { color: var(--w-darker); }

/* Tap-to-add suggestion — a .tag that behaves as a button */
.tag-suggest { cursor: pointer; border-style: dashed; font-family: inherit; }
.tag-suggest:hover, .tag-suggest:focus-visible { background: var(--w-fill2); color: var(--w-darker); border-color: var(--w-darker); }

/* Checkbox row inside a .combo-option (multi-select dropdown) */
.combo-option-multi { display: flex; align-items: center; gap: 8px; }
/* ── SIGNAL EXPLORER ── */
/* Clickable Signal Type summary card: a <button> wrapping the standard .kpi
   (so the five cards look exactly like the Action Centre's kpi() cards).
   Active state reuses the .ac-row.selected recipe (darker border + inset ring). */
.kpi-filter {
  display: block; width: 100%; padding: 0; margin: 0;
  background: none; border: none; font: inherit; color: inherit;
  text-align: start; cursor: pointer; border-radius: var(--radius);
}
.kpi-filter .kpi { height: 100%; box-sizing: border-box; transition: background .15s ease, border-color .15s ease; }
.kpi-filter:hover .kpi { background: var(--w-fill); }
.kpi-filter:focus-visible { outline: 2px solid var(--w-darker); outline-offset: 2px; }
.kpi-filter.selected .kpi {
  border-color: var(--w-darker);
  background: var(--w-fill);
  box-shadow: 0 0 0 1.5px var(--w-darker) inset;
}

/* Signal records: Action-Centre-style .ac-row cards; the whole card toggles
   the related-alerts accordion (the View button has its own action). */
.sx-row:focus-visible { outline: 2px solid var(--w-darker); outline-offset: 2px; }
.sx-row.expanded { background: var(--w-fill) !important; }
.sx-chev { display: inline-block; width: 12px; margin-inline-end: 6px; color: var(--w-note); font-size: 10px; }
.sx-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 10px; font-weight: 400; color: var(--w-note); }
.sx-alerts-row { background: var(--w-fill2); border: 1px solid var(--w-border); border-radius: var(--radius); padding: 10px; }
.sx-alerts-row .box { margin: 0; }
.sx-alerts-empty { padding: 14px 16px; font-size: 11px; color: var(--w-note); text-align: center; }

/* Main area below the KPI cards — same 67 / 33 split as the Action Centre
   (list left; chart OR Signal Details in one shared right-hand slot). The
   right slot sticks while the list scrolls; stacks under the list on narrow
   screens. */
.sx-main-grid { display: grid; grid-template-columns: minmax(0, 67fr) minmax(0, 33fr); gap: 16px; }
.sx-right-sticky { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; }
#sxDetailPanel, #txDetailPanel { flex-direction: column; min-height: 440px; max-height: calc(100vh - 40px); }
@media (max-width: 992px) {
  .sx-main-grid { grid-template-columns: minmax(0, 1fr); }
  .sx-right-sticky { position: static; }
  #sxDetailPanel, #txDetailPanel { max-height: none; }
}
.sx-meta-row { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; padding: 4px 0; border-bottom: 1px dashed var(--w-border); }
.sx-meta-row:last-child { border-bottom: none; }
.sx-meta-row span:first-child { color: var(--w-note); }
.sx-meta-row span:last-child { color: var(--w-darker); font-weight: 600; text-align: end; }
.sx-assessment {
  font-size: 10px; line-height: 1.5; color: var(--w-darker);
  background: var(--w-fill); border: 1px solid var(--w-border);
  border-inline-start: 3px solid var(--w-darker);
  border-radius: var(--radius); padding: 8px 10px;
}

/* ── TREND EXPLORER (reuses the Signal Explorer card / accordion / panel styles above) ── */
/* No chart: the list takes the full width until a panel opens */
.sx-main-grid.tx-single { grid-template-columns: minmax(0, 1fr); }
.sx-main-grid.tx-single #txRightCol { display: none; }
/* Two-line summary preview */
.tx-summary {
  font-size: 11px; line-height: 1.45; color: var(--w-label); margin-top: 2px;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* One-line "Primary Signal: …" / "Supporting Signals: …" (full list in title + Trend Details) */
.tx-sigline {
  margin-top: 4px; font-size: 10px; color: var(--w-note);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tx-siglabel { font-weight: 600; }
/* Clickable signal name inside a record */
.tx-link {
  background: none; border: none; padding: 0; margin: 0; font: inherit;
  color: var(--w-darker); text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 2px; cursor: pointer;
}
.tx-link:hover, .tx-link:focus-visible { text-decoration-style: solid; }