/* ================================================================
   RASD TACTICAL DESIGN SYSTEM — Metal Edition
   Load AFTER tailwind.min.css
   ================================================================ */

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

/* ── Metal Silver & Red Palette Variables ─────────────────────── */
:root {
  --tac-bg:       #40404e;   /* brushed metal base */
  --tac-surface:  #4c4c5c;   /* steel plate */
  --tac-surface2: #565664;   /* elevated plate */
  --tac-border:   #70707e;   /* steel edge */
  --tac-text:     #eceff8;   /* silver white */
  --tac-muted:    #b2b4c0;   /* muted steel */
  --tac-accent:   #cc2222;   /* tactical red */
  --tac-accent-d: #991818;   /* deep red */
  --tac-green:    #4a9a5c;   /* operational green */
  --tac-red:      #e03030;   /* alert red */
  --tac-blue:     #7ab4c4;   /* pale sky */
  --sb-height:    36px;
  --sidebar-w:    220px;
}

/* ── Status Bar ────────────────────────────────────────────────── */
#mirsal-status-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--sb-height);
  background: linear-gradient(90deg, #28283a 0%, #323244 30%, #28283a 100%);
  border-bottom: 1px solid #70707e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 9500;
  font-family: 'JetBrains Mono', 'IBM Plex Arabic', monospace;
  font-size: 0.72rem;
  color: #b2b4c0;
  user-select: none;
  letter-spacing: 0.04em;
}
#mirsal-status-bar .sb-left  { display: flex; align-items: center; gap: 0.85rem; }
#mirsal-status-bar .sb-right { display: flex; align-items: center; gap: 0.85rem; }
/* RTL: flip side order */
html[dir="rtl"] #mirsal-status-bar { flex-direction: row-reverse; }
html[dir="rtl"] #mirsal-status-bar .sb-left  { flex-direction: row-reverse; }
html[dir="rtl"] #mirsal-status-bar .sb-right { flex-direction: row-reverse; }
.sb-system-label { color: var(--tac-accent); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.sb-clock { color: var(--tac-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-sep { color: #70707e; }
.sb-badge {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 2px;
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.sb-badge-green  { background: rgba(74,154,92,0.15);   color: #4a9a5c; border: 1px solid rgba(74,154,92,0.35); }
.sb-badge-amber  { background: rgba(204,34,34,0.15);   color: #cc2222; border: 1px solid rgba(204,34,34,0.35); }
.sb-badge-red    { background: rgba(224,48,48,0.15);   color: #e03030; border: 1px solid rgba(224,48,48,0.35); }
.sb-badge-grey   { background: rgba(148,150,166,0.12); color: #9496a6; border: 1px solid rgba(148,150,166,0.25); }

/* Push content below fixed status bar */
body { padding-top: var(--sb-height) !important; }

/* Sticky navbar sticks at bottom edge of status bar */
nav.sticky,
nav[class*="sticky top-0"] { top: var(--sb-height) !important; }

/* ── Global Dark Base ──────────────────────────────────────────── */
body {
  background:
    repeating-linear-gradient(
      90deg,
      transparent            0px,
      rgba(255,255,255,0.028) 1px,
      transparent            2px,
      rgba(0,0,0,0.022)      3px,
      transparent            5px,
      rgba(255,255,255,0.014) 6px,
      transparent            8px
    ),
    linear-gradient(180deg, #464656 0%, #3c3c4c 45%, #424252 75%, #464656 100%) !important;
  color: var(--tac-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 15px;
  line-height: 1.55;
  scrollbar-width: thin;
  scrollbar-color: #70707e #40404e;
}

/* Inputs readable for typing */
input, textarea, select, optgroup {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
  font-size: 0.9rem !important;
}

/* Tactical UI chrome stays monospace */
#mirsal-status-bar, #mirsal-status-bar *,
#rasd-sidebar, #rasd-sidebar *,
nav, nav *,
table thead th,
.tac-mono, .tac-callsign, .tac-id,
code, pre { font-family: 'JetBrains Mono', 'Courier New', monospace !important; }
body::-webkit-scrollbar       { width: 6px; }
body::-webkit-scrollbar-track { background: #40404e; }
body::-webkit-scrollbar-thumb { background: #70707e; border-radius: 3px; }
body::-webkit-scrollbar-thumb:hover { background: #888898; }
* { scrollbar-width: thin; scrollbar-color: #70707e #40404e; }
*::-webkit-scrollbar       { width: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #70707e; border-radius: 3px; }

/* Navbar */
nav { background: rgba(60,60,72,0.97) !important; border-bottom: 1px solid #70707e; }

/* ── Cards — Angular Metal Frame ──────────────────────────────── */
.card {
  background-color: var(--tac-surface) !important;
  border: 1px solid var(--tac-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 14px;
  border-top: 2px solid var(--tac-accent);
  border-left: 2px solid var(--tac-accent);
  border-radius: 5px 0 0 0;
  pointer-events: none;
  z-index: 1;
}
.card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 14px; height: 14px;
  border-bottom: 2px solid rgba(204,34,34,0.28);
  border-right: 2px solid rgba(204,34,34,0.28);
  border-radius: 0 0 5px 0;
  pointer-events: none;
}

/* ── Typography ────────────────────────────────────────────────── */
.tac-mono, .tac-callsign, .tac-id {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
}
.tac-callsign {
  color: var(--tac-accent);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.tac-id { color: var(--tac-muted); font-size: 0.8em; }

.op-item .text-white,
.op-item .font-semibold { font-family: 'JetBrains Mono', monospace; }

/* ── Accent — Tactical Red ─────────────────────────────────────── */
.roster-filter-btn.active {
  background: rgba(204,34,34,0.18) !important;
  border: 1px solid rgba(204,34,34,0.45) !important;
  color: #cc2222 !important;
  box-shadow: none !important;
}
.op-filter-btn.active {
  background: rgba(204,34,34,0.18) !important;
  border: 1px solid rgba(204,34,34,0.45) !important;
  color: #cc2222 !important;
  box-shadow: none !important;
}

/* Focus rings */
input:focus, select:focus, textarea:focus {
  border-color: rgba(204,34,34,0.55) !important;
  box-shadow: 0 0 0 2px rgba(204,34,34,0.12) !important;
  outline: none !important;
}

/* ── Table Density ─────────────────────────────────────────────── */
table { border-collapse: collapse; }
table thead th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tac-muted);
  background: var(--tac-bg) !important;
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}
table tbody tr { transition: background 0.1s; }
table tbody tr td {
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
  border-bottom: 1px solid var(--tac-surface2) !important;
  font-size: 0.83rem;
  color: var(--tac-text);
}
table tbody tr:hover td { background: rgba(204,34,34,0.05) !important; }

/* ── Skeleton Loaders ──────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #484858 25%, #70707e 50%, #484858 75%);
  background-size: 200% 100%;
  animation: skel-wave 1.4s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes skel-wave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-row  { height: 2.6rem; margin-bottom: 0.4rem; }
.skeleton-text { height: 0.7rem; margin-bottom: 0.35rem; }
.skeleton-text.wide  { width: 80%; }
.skeleton-text.med   { width: 55%; }
.skeleton-text.short { width: 30%; }

/* ── Toast Notifications ───────────────────────────────────────── */
#mirsal-toast-container {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 99999;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.45rem;
  pointer-events: none;
}
.mirsal-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 280px;
  max-width: 400px;
  background: #484858;
  border: 1px solid #70707e;
  border-radius: 5px;
  padding: 0.7rem 0.9rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(204,34,34,0.06);
  pointer-events: all;
  cursor: pointer;
  transform: translateX(calc(100% + 1.5rem));
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.2), opacity 0.3s ease;
  position: relative;
  overflow: hidden;
}
.mirsal-toast.toast-in  { transform: translateX(0); opacity: 1; }
.mirsal-toast.toast-out { transform: translateX(calc(100% + 1.5rem)); opacity: 0; }
.toast-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; line-height: 1.4; }
.toast-body { flex: 1; min-width: 0; }
.toast-title {
  font-weight: 700; font-size: 0.72rem; color: var(--tac-text);
  margin-bottom: 2px; text-transform: uppercase;
  letter-spacing: 0.07em; font-family: 'JetBrains Mono', monospace;
}
.toast-msg { font-size: 0.78rem; color: var(--tac-muted); line-height: 1.4; }
.toast-bar {
  position: absolute; bottom: 0; left: 0;
  height: 2px; animation: toast-bar-anim linear forwards;
}
@keyframes toast-bar-anim { from { width: 100%; } to { width: 0; } }

.mirsal-toast-success { border-left: 3px solid #4a9a5c; }
.mirsal-toast-success .toast-title { color: #4a9a5c; }
.mirsal-toast-success .toast-bar   { background: #4a9a5c; }

.mirsal-toast-warning { border-left: 3px solid #cc2222; }
.mirsal-toast-warning .toast-title { color: #cc2222; }
.mirsal-toast-warning .toast-bar   { background: #cc2222; }

.mirsal-toast-alert { border-left: 3px solid #e03030; }
.mirsal-toast-alert .toast-title { color: #e03030; }
.mirsal-toast-alert .toast-bar   { background: #e03030; }

.mirsal-toast-info { border-left: 3px solid #7ab4c4; }
.mirsal-toast-info .toast-title { color: #7ab4c4; }
.mirsal-toast-info .toast-bar   { background: #7ab4c4; }

/* ── Confirm Dialog ────────────────────────────────────────────── */
#mirsal-confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 99998;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
#mirsal-confirm-overlay.conf-show { opacity: 1; pointer-events: all; }
#mirsal-confirm-box {
  background: #484858;
  border: 1px solid #70707e;
  border-radius: 8px;
  padding: 1.75rem;
  width: 100%; max-width: 360px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.8);
  transform: scale(0.92) translateY(12px);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
  position: relative;
}
#mirsal-confirm-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-top: 2px solid var(--tac-accent);
  border-left: 2px solid var(--tac-accent);
  border-radius: 7px 0 0 0;
}
#mirsal-confirm-overlay.conf-show #mirsal-confirm-box { transform: scale(1) translateY(0); }
#mirsal-confirm-icon  { font-size: 2.2rem; margin-bottom: 0.6rem; }
#mirsal-confirm-title { color: var(--tac-text); font-size: 1rem; font-weight: 700; margin-bottom: 0.35rem; }
#mirsal-confirm-msg   { color: var(--tac-muted); font-size: 0.83rem; line-height: 1.5; margin-bottom: 1.4rem; }
.mirsal-confirm-btns  { display: flex; gap: 0.65rem; }
#mirsal-confirm-ok {
  flex: 1; padding: 0.6rem; border-radius: 4px;
  font-weight: 700; font-size: 0.82rem; cursor: pointer;
  background: #cc2222; color: #fff; border: none;
  transition: background 0.15s, transform 0.1s;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
}
#mirsal-confirm-ok:hover { background: #aa1818; transform: translateY(-1px); }
#mirsal-confirm-cancel {
  flex: 1; padding: 0.6rem; border-radius: 4px;
  font-weight: 700; font-size: 0.82rem; cursor: pointer;
  background: #565664; color: var(--tac-text); border: 1px solid #70707e;
  transition: background 0.15s;
  font-family: 'JetBrains Mono', monospace;
}
#mirsal-confirm-cancel:hover { background: #70707e; }

/* ── Login Page ────────────────────────────────────────────────── */
body.login-page {
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, #3a1818 0%, transparent 60%),
    radial-gradient(ellipse 100% 40% at 50% 0%, #30304a 0%, transparent 70%),
    #40404e !important;
  padding-top: 0 !important;
}
.rasd-login-card {
  background: #484858;
  border: 1px solid #70707e;
  border-radius: 8px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 60px rgba(204,34,34,0.05);
  position: relative;
  overflow: hidden;
}
.rasd-login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 20px; height: 20px;
  border-top: 2px solid var(--tac-accent);
  border-left: 2px solid var(--tac-accent);
  border-radius: 7px 0 0 0;
}
.rasd-login-card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 20px; height: 20px;
  border-bottom: 2px solid rgba(204,34,34,0.28);
  border-right: 2px solid rgba(204,34,34,0.28);
  border-radius: 0 0 7px 0;
}
.mirsal-login-card {
  background: #484858;
  border: 1px solid #70707e;
  border-radius: 8px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
}
.mirsal-login-input, .rasd-login-input {
  background: #38383e !important;
  border: 1px solid #70707e !important;
  color: var(--tac-text) !important;
  border-radius: 4px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.mirsal-login-input:focus, .rasd-login-input:focus {
  border-color: rgba(204,34,34,0.6) !important;
  box-shadow: 0 0 0 3px rgba(204,34,34,0.12) !important;
}
.mirsal-login-input::placeholder, .rasd-login-input::placeholder { color: #848498 !important; }
.mirsal-login-btn, .rasd-login-btn {
  background: var(--tac-accent) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: background 0.15s, transform 0.1s !important;
  border: none;
  font-family: 'JetBrains Mono', monospace !important;
}
.mirsal-login-btn:hover:not(:disabled), .rasd-login-btn:hover:not(:disabled) {
  background: var(--tac-accent-d) !important;
  transform: translateY(-1px);
}
.mirsal-login-btn:active, .rasd-login-btn:active { transform: translateY(0) !important; }
.mirsal-login-btn:disabled, .rasd-login-btn:disabled { opacity: 0.6 !important; }
.login-divider { height: 1px; background: linear-gradient(90deg, transparent, #70707e, transparent); margin: 0.5rem 0; }

/* ── Hide legacy popup-notification ───────────────────────────── */
.popup-notification { display: none !important; }
#popup-container    { display: none !important; }

/* ── Misc Polish ───────────────────────────────────────────────── */
.modal-overlay, [id*="modal"] > .fixed { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

.notification-dot { animation: none !important; background: var(--tac-accent) !important; }

#shift-timer, [id*="timer"] { font-family: 'JetBrains Mono', monospace !important; }

#map-btn { background: #565664 !important; color: #cc2222 !important; border: 1px solid #70707e !important; }
#map-btn:hover { background: rgba(204,34,34,0.12) !important; }

/* ── Tailwind bg/text overrides ────────────────────────────────── */
.bg-gray-900, .bg-slate-900 { background-color: var(--tac-bg) !important; }
.bg-gray-800, .bg-slate-800 { background-color: var(--tac-surface) !important; }
.bg-gray-700, .bg-slate-700 { background-color: var(--tac-surface2) !important; }
.text-white { color: var(--tac-text) !important; }
.text-gray-300, .text-slate-300 { color: #c4c8d8 !important; }
.text-gray-400, .text-slate-400 { color: var(--tac-muted) !important; }
.border-gray-700, .border-slate-700 { border-color: var(--tac-border) !important; }

/* ================================================================
   LIGHT MODE — Cool Silver / Steel
   Activated via <html data-theme="light">
   ================================================================ */

[data-theme="light"] { color-scheme: light; }

[data-theme="light"] body {
  background-color: #b8bcc8 !important;
  color: #1a1a2e !important;
  scrollbar-color: #8a8e9a #b8bcc8;
}
[data-theme="light"] *::-webkit-scrollbar-track { background: #b8bcc8; }
[data-theme="light"] *::-webkit-scrollbar-thumb { background: #8a8e9a; }

/* Status bar */
[data-theme="light"] #mirsal-status-bar {
  background: #f4f5f8;
  border-bottom-color: #9095a8;
}
[data-theme="light"] .sb-system-label { color: #991818; }
[data-theme="light"] .sb-clock        { color: #1a1a2e; }
[data-theme="light"] .sb-sep          { color: #9095a8; }
[data-theme="light"] .sb-badge-green  { background: rgba(44,140,72,0.1);   color: #2a7a48; border-color: rgba(44,140,72,0.3);   }
[data-theme="light"] .sb-badge-amber  { background: rgba(153,24,24,0.1);   color: #991818; border-color: rgba(153,24,24,0.3);   }
[data-theme="light"] .sb-badge-red    { background: rgba(192,24,24,0.1);   color: #c01818; border-color: rgba(192,24,24,0.3);   }
[data-theme="light"] .sb-badge-grey   { background: rgba(122,125,138,0.1); color: #5a5e70; border-color: rgba(122,125,138,0.2); }

/* Navbar */
[data-theme="light"] nav,
[data-theme="light"] nav.sticky { background: rgba(244,245,248,0.96) !important; border-bottom-color: #9095a8 !important; }
[data-theme="light"] nav .text-white { color: #1a1a2e !important; }
[data-theme="light"] nav .text-gray-300 { color: #5a5e70 !important; }

/* Cards */
[data-theme="light"] .card {
  background-color: #f8f9fc !important;
  border-color: #9095a8 !important;
  box-shadow: 0 2px 10px rgba(20,20,40,0.16), 0 1px 4px rgba(0,0,0,0.08);
}
[data-theme="light"] .card::before { border-color: #991818; }
[data-theme="light"] .card::after  { border-color: rgba(153,24,24,0.2); }

/* Tailwind overrides */
[data-theme="light"] .bg-gray-900, [data-theme="light"] .bg-slate-900 { background-color: #b8bcc8 !important; }
[data-theme="light"] .bg-gray-800, [data-theme="light"] .bg-slate-800 { background-color: #f8f9fc !important; }
[data-theme="light"] .bg-gray-700, [data-theme="light"] .bg-slate-700 { background-color: #e8eaf0 !important; }
[data-theme="light"] .bg-gray-600, [data-theme="light"] .bg-slate-600 { background-color: #dcdee8 !important; }

[data-theme="light"] .text-white           { color: #1a1a2e !important; }
[data-theme="light"] button.text-white,
[data-theme="light"] a.text-white          { color: #ffffff !important; }
[data-theme="light"] .text-gray-100        { color: #1a1a2e !important; }
[data-theme="light"] .text-gray-200        { color: #252538 !important; }
[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-slate-300       { color: #363650 !important; }
[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-slate-400       { color: #5a5e70 !important; }
[data-theme="light"] .text-gray-500,
[data-theme="light"] .text-slate-500       { color: #7a7d8a !important; }

[data-theme="light"] .border-gray-700,
[data-theme="light"] .border-slate-700     { border-color: #9095a8 !important; }
[data-theme="light"] .border-gray-600,
[data-theme="light"] .border-slate-600     { border-color: #b0b4c0 !important; }

/* Inputs */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background-color: #f4f5f8 !important;
  border-color: #9095a8 !important;
  color: #1a1a2e !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: #7a7d8a !important; }
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: rgba(153,24,24,0.6) !important;
  box-shadow: 0 0 0 2px rgba(153,24,24,0.1) !important;
}

/* Tables */
[data-theme="light"] table thead th { background: #dcdee8 !important; color: #5a5e70 !important; }
[data-theme="light"] table tbody tr td { border-bottom-color: #c8cad8 !important; color: #1a1a2e; }
[data-theme="light"] table tbody tr:hover td { background: rgba(153,24,24,0.05) !important; }

/* op-item */
[data-theme="light"] .op-item { background-color: #e8eaf0 !important; }

/* Chat tabs */
[data-theme="light"] .chat-tab         { background: #eef0f5 !important; border-color: #9095a8 !important; color: #1a1a2e !important; }
[data-theme="light"] .chat-tab.active  { background: #f4f5f8 !important; }
[data-theme="light"] .chat-tab-chip    { background: #eef0f5 !important; color: #1a1a2e !important; }
[data-theme="light"] .chat-tab-chip.active { background: rgba(153,24,24,0.12) !important; color: #991818 !important; }

/* Toast */
[data-theme="light"] .mirsal-toast {
  background: #f8f9fc;
  border-color: #9095a8;
  box-shadow: 0 4px 20px rgba(20,20,40,0.18);
}
[data-theme="light"] .toast-msg { color: #5a5e70; }

/* Confirm dialog */
[data-theme="light"] #mirsal-confirm-box    { background: #f8f9fc; border-color: #9095a8; }
[data-theme="light"] #mirsal-confirm-box::before { border-color: #991818; }
[data-theme="light"] #mirsal-confirm-title  { color: #1a1a2e; }
[data-theme="light"] #mirsal-confirm-msg    { color: #5a5e70; }
[data-theme="light"] #mirsal-confirm-cancel { background: #e8eaf0; color: #1a1a2e; border-color: #9095a8; }

/* Notification dropdown */
[data-theme="light"] .notification-dropdown { background: #f8f9fc; border-color: #9095a8; }
[data-theme="light"] .notification-item      { border-bottom-color: #c8cad8; }
[data-theme="light"] .notification-item:hover { background: #e8eaf0; }
[data-theme="light"] .notification-item-content { color: #1a1a2e; }
[data-theme="light"] .notification-dropdown-header { border-bottom-color: #c8cad8; }
[data-theme="light"] .notification-dropdown-header h3 { color: #1a1a2e; }

/* Login (light) */
[data-theme="light"] body.login-page {
  background: radial-gradient(ellipse at 50% 100%, #9095a8 0%, #b8bcc8 70%) !important;
}
[data-theme="light"] .rasd-login-card,
[data-theme="light"] .mirsal-login-card  { background: #f8f9fc; border-color: #9095a8; }
[data-theme="light"] .rasd-login-card::before  { border-color: #991818; }
[data-theme="light"] .rasd-login-card::after   { border-color: rgba(153,24,24,0.2); }
[data-theme="light"] .mirsal-login-input,
[data-theme="light"] .rasd-login-input  { background: #eef0f5 !important; border-color: #9095a8 !important; color: #1a1a2e !important; }
[data-theme="light"] .mirsal-login-input::placeholder,
[data-theme="light"] .rasd-login-input::placeholder { color: #7a7d8a !important; }
[data-theme="light"] .login-divider { background: linear-gradient(90deg, transparent, #9095a8, transparent); }
[data-theme="light"] .rasd-login-card p,
[data-theme="light"] .mirsal-login-card p,
[data-theme="light"] .rasd-login-card h1,
[data-theme="light"] .mirsal-login-card h1 { color: #1a1a2e !important; }
[data-theme="light"] .rasd-login-card label,
[data-theme="light"] .mirsal-login-card label { color: #5a5e70 !important; }

/* ── Theme Toggle ──────────────────────────────────────────────── */
#sb-theme-toggle {
  background: none; border: 1px solid #70707e; color: #b2b4c0;
  border-radius: 3px; padding: 0 6px; font-size: 0.75rem; cursor: pointer;
  line-height: 1.6; transition: all 0.15s; font-family: inherit;
}
#sb-theme-toggle:hover { border-color: #cc2222; color: #cc2222; }
[data-theme="light"] #sb-theme-toggle { border-color: #9095a8; color: #5a5e70; }
[data-theme="light"] #sb-theme-toggle:hover { border-color: #991818; color: #991818; }

/* Map buttons */
[data-theme="light"] #map-btn { background: #e8eaf0 !important; border-color: #9095a8 !important; color: #991818 !important; }
[data-theme="light"] #map-btn:hover { background: rgba(153,24,24,0.1) !important; }

/* ── Colored text — remap light/pastel shades to dark equivalents ── */
[data-theme="light"] .text-blue-100,
[data-theme="light"] .text-blue-200,
[data-theme="light"] .text-blue-300  { color: #1a5c96 !important; }
[data-theme="light"] .text-blue-400  { color: #1a4f82 !important; }
[data-theme="light"] .text-blue-500  { color: #154272 !important; }
[data-theme="light"] .text-sky-300,
[data-theme="light"] .text-sky-400   { color: #0e5a7a !important; }
[data-theme="light"] .text-cyan-300,
[data-theme="light"] .text-cyan-400  { color: #0a5870 !important; }
[data-theme="light"] .text-teal-300,
[data-theme="light"] .text-teal-400  { color: #0f5e50 !important; }
[data-theme="light"] .text-green-100,
[data-theme="light"] .text-green-200,
[data-theme="light"] .text-green-300,
[data-theme="light"] .text-green-400 { color: #2a6b25 !important; }
[data-theme="light"] .text-green-500 { color: #235a1e !important; }
[data-theme="light"] .text-emerald-300,
[data-theme="light"] .text-emerald-400 { color: #1a6040 !important; }
[data-theme="light"] .text-lime-300,
[data-theme="light"] .text-lime-400  { color: #445a08 !important; }
[data-theme="light"] .text-red-300,
[data-theme="light"] .text-red-400   { color: #9e1a1a !important; }
[data-theme="light"] .text-red-500   { color: #8a1010 !important; }
[data-theme="light"] .text-rose-300,
[data-theme="light"] .text-rose-400  { color: #9a1535 !important; }
[data-theme="light"] .text-orange-300,
[data-theme="light"] .text-orange-400 { color: #8a3e00 !important; }
[data-theme="light"] .text-amber-300,
[data-theme="light"] .text-amber-400 { color: #7a5200 !important; }
[data-theme="light"] .text-yellow-300,
[data-theme="light"] .text-yellow-400 { color: #6e5000 !important; }
[data-theme="light"] .text-purple-300,
[data-theme="light"] .text-purple-400 { color: #581e82 !important; }
[data-theme="light"] .text-violet-300,
[data-theme="light"] .text-violet-400 { color: #4a1a7a !important; }
[data-theme="light"] .text-indigo-300,
[data-theme="light"] .text-indigo-400 { color: #2a3490 !important; }
[data-theme="light"] .text-pink-300,
[data-theme="light"] .text-pink-400  { color: #8a1a52 !important; }
[data-theme="light"] .text-fuchsia-300,
[data-theme="light"] .text-fuchsia-400 { color: #7a1070 !important; }

[data-theme="light"] .font-mono { color: #1a2a3a !important; }
[data-theme="light"] .sidebar-link { color: #5a5e70 !important; }

/* ── Chat Panel — Expandable Right Drawer ──────────────────────── */
.chat-expand-btn {
  background: none;
  border: 1px solid #70707e;
  color: #b2b4c0;
  border-radius: 4px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0.8rem;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0; line-height: 1;
}
.chat-expand-btn:hover { border-color: #cc2222; color: #cc2222; }
[data-theme="light"] .chat-expand-btn { border-color: #9095a8; color: #5a5e70; }
[data-theme="light"] .chat-expand-btn:hover { border-color: #991818; color: #991818; }

.chat-card-expanded {
  position: fixed !important;
  right: 0 !important;
  top: var(--sb-height, 36px) !important;
  bottom: 0 !important;
  width: min(480px, 100vw) !important;
  height: calc(100vh - var(--sb-height, 36px)) !important;
  z-index: 850 !important;
  border-radius: 8px 0 0 8px !important;
  border-left: 2px solid var(--tac-accent) !important;
  border-top: 1px solid #70707e !important;
  border-right: none !important;
  border-bottom: none !important;
  margin: 0 !important;
  box-shadow: -12px 0 48px rgba(0,0,0,0.6) !important;
  background: #484858 !important;
  display: flex; flex-direction: column;
  transition: none !important;
  animation: chat-slide-in 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
}
[data-theme="light"] .chat-card-expanded {
  background: #f8f9fc !important;
  border-left-color: #991818 !important;
  box-shadow: -12px 0 40px rgba(0,0,0,0.15) !important;
}
@keyframes chat-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

#chat-expand-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 849;
  cursor: pointer;
}

/* ================================================================
   RASD LEFT SIDEBAR — Metal Tactical Navigation
   ================================================================ */

#rasd-sidebar {
  position: fixed;
  left: 0;
  top: var(--sb-height, 36px);
  bottom: 0;
  width: var(--sidebar-w, 220px);
  background:
    repeating-linear-gradient(
      90deg,
      transparent            0px,
      rgba(255,255,255,0.02) 1px,
      transparent            2px,
      rgba(0,0,0,0.025)      4px,
      transparent            5px
    ),
    linear-gradient(180deg, #303040 0%, #282836 50%, #303040 100%);
  border-right: 1px solid #70707e;
  display: flex;
  flex-direction: column;
  z-index: 900;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  overflow: hidden;
  transition: width 0.2s ease;
}

.sidebar-brand {
  padding: 1.2rem 1rem 1rem;
  border-bottom: 1px solid #70707e;
  flex-shrink: 0;
}
.sidebar-wordmark {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: #cc2222;
  letter-spacing: 0.18em;
  line-height: 1;
}
.sidebar-role {
  display: block;
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  color: #848498;
  text-transform: uppercase;
  margin-top: 6px;
  line-height: 1.3;
}

.sidebar-nav {
  flex: 1;
  padding: 0.5rem 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 1rem;
  color: #9898b0;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.3;
  transition: color 0.12s, background 0.12s;
  border: none;
  background: none;
  width: 100%;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  font-family: 'JetBrains Mono', 'IBM Plex Arabic', monospace;
}
.sidebar-link:hover {
  color: #e6eaf6;
  background: rgba(204,34,34,0.07);
}
.sidebar-link.active {
  color: #cc2222;
  background: rgba(204,34,34,0.12);
}
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: #cc2222;
  border-radius: 0 2px 2px 0;
}
/* RTL: flip indicator and sidebar border to right side */
html[dir="rtl"] .sidebar-link.active::before {
  left: auto; right: 0;
  border-radius: 2px 0 0 2px;
}
html[dir="rtl"] #mirsal-sidebar {
  border-right: none;
  border-left: 1px solid #70707e;
}

.sidebar-icon {
  font-size: 1.1rem;
  width: 1.3rem;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.9;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif !important;
}
.sidebar-link:hover .sidebar-icon,
.sidebar-link.active .sidebar-icon { opacity: 1; }

.sidebar-badge {
  margin-left: auto;
  background: #cc2222;
  color: #fff;
  font-size: 0.52rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  flex-shrink: 0;
}

.sidebar-bottom {
  border-top: 1px solid #70707e;
  padding: 0.4rem 0;
  flex-shrink: 0;
}
.sidebar-logout-btn {
  color: rgba(224,48,48,0.65) !important;
}
.sidebar-logout-btn:hover {
  color: #e03030 !important;
  background: rgba(224,48,48,0.09) !important;
}
.sidebar-logout-btn .sidebar-icon { opacity: 1; }

.sidebar-divider {
  height: 1px;
  background: #70707e;
  margin: 0.3rem 0.8rem;
  opacity: 0.6;
}

body.has-sidebar > nav.sticky,
body.has-sidebar > nav[class*="sticky"] {
  display: none !important;
}

body.has-sidebar {
  padding-left: var(--sidebar-w, 220px) !important;
}

#sidebar-mobile-toggle {
  display: none;
  position: fixed;
  bottom: 1.1rem;
  left: 1rem;
  z-index: 9400;
  background: #484858;
  border: 1px solid #70707e;
  color: #cc2222;
  border-radius: 4px;
  width: 38px; height: 38px;
  font-size: 1rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
}

@media (max-width: 1024px) {
  :root { --sidebar-w: 52px; }
  .sidebar-label, .sidebar-role { display: none; }
  .sidebar-wordmark { font-size: 0.75rem; letter-spacing: 0.1em; }
  .sidebar-brand { padding: 0.75rem; text-align: center; }
  .sidebar-link { padding: 0.65rem; justify-content: center; gap: 0; }
  .sidebar-link.active::before { top: 6px; bottom: 6px; }
  .sidebar-icon { width: auto; font-size: 1rem; }
  .sidebar-badge { position: absolute; top: 5px; right: 5px; min-width: 12px; height: 12px; font-size: 0.45rem; }
}

@media (max-width: 640px) {
  #rasd-sidebar {
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
    width: 220px !important;
  }
  #rasd-sidebar.sidebar-open { transform: translateX(0); }
  #rasd-sidebar.sidebar-open .sidebar-label,
  #rasd-sidebar.sidebar-open .sidebar-role { display: block; }
  body.has-sidebar { padding-left: 0 !important; }
  #sidebar-mobile-toggle { display: flex; }
}

[data-theme="light"] #rasd-sidebar {
  background: #f8f9fc;
  border-right-color: #9095a8;
}
[data-theme="light"] .sidebar-wordmark { color: #991818; }
[data-theme="light"] .sidebar-role { color: #9095a8; }
[data-theme="light"] .sidebar-link { color: #7a7d8a; }
[data-theme="light"] .sidebar-link:hover { color: #1a1a2e; background: rgba(153,24,24,0.07); }
[data-theme="light"] .sidebar-link.active { color: #991818; background: rgba(153,24,24,0.1); }
[data-theme="light"] .sidebar-link.active::before { background: #991818; }
[data-theme="light"] .sidebar-bottom { border-top-color: #9095a8; }
[data-theme="light"] .sidebar-divider { background: #9095a8; }
[data-theme="light"] .sidebar-logout-btn { color: rgba(192,24,24,0.6) !important; }
[data-theme="light"] .sidebar-logout-btn:hover { color: #c01818 !important; background: rgba(192,24,24,0.07) !important; }
[data-theme="light"] #sidebar-mobile-toggle { background: #f4f5f8; border-color: #9095a8; color: #991818; }

/* ================================================================
   RASD SIGNATURE EFFECTS
   ================================================================ */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 501;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.008) 3px,
    rgba(0,0,0,0.008) 4px
  );
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, transparent 42%, rgba(0,0,0,0.3) 100%);
}

[data-theme="light"] body::after { opacity: 0.4; }
[data-theme="light"] body::before {
  background: radial-gradient(ellipse at 50% 38%, transparent 40%, rgba(0,0,0,0.07) 100%);
}

#mirsal-status-bar {
  box-shadow: 0 0 28px rgba(204,34,34,0.08), inset 0 -1px 0 rgba(204,34,34,0.2);
}

.sidebar-wordmark {
  animation: rasd-glitch 12s infinite;
}
@keyframes rasd-glitch {
  0%, 88%, 100% { text-shadow: none; transform: none; clip-path: none; }
  89% {
    text-shadow: 2px 0 rgba(224,48,48,0.75), -2px 0 rgba(122,180,196,0.75);
    transform: skewX(-1.5deg) translateX(2px);
  }
  90% {
    clip-path: polygon(0 20%, 100% 20%, 100% 55%, 0 55%);
    text-shadow: -3px 0 rgba(224,48,48,0.6);
    transform: skewX(1deg) translateX(-2px);
  }
  91% { clip-path: none; text-shadow: none; transform: none; }
  92% {
    text-shadow: 1px 0 rgba(122,180,196,0.5);
    transform: translateX(1px);
  }
  93% { text-shadow: none; transform: none; }
}

.sidebar-link.active::before {
  animation: sidebar-pulse 2.8s ease-in-out infinite;
}
@keyframes sidebar-pulse {
  0%, 100% { opacity: 1; box-shadow: none; }
  50%       { opacity: 0.35; }
}

#rasd-boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  background: #202030;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  transition: opacity 0.46s ease;
}
.boot-corner {
  position: absolute;
  width: 22px; height: 22px;
  border-color: rgba(204,34,34,0.35);
  border-style: solid;
}
.boot-tl { top: 1.4rem; left: 1.4rem;   border-width: 1px 0 0 1px; }
.boot-tr { top: 1.4rem; right: 1.4rem;  border-width: 1px 1px 0 0; }
.boot-bl { bottom: 1.4rem; left: 1.4rem;  border-width: 0 0 1px 1px; }
.boot-br { bottom: 1.4rem; right: 1.4rem; border-width: 0 1px 1px 0; }
.boot-meta {
  position: absolute;
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  color: rgba(204,34,34,0.22);
  text-transform: uppercase;
}
.boot-meta-tl { top: 1.55rem; left: 3.8rem; }
.boot-meta-tr { top: 1.55rem; right: 3.8rem; }
.boot-content { text-align: center; width: 100%; max-width: 400px; padding: 2rem; }
.boot-wordmark {
  font-size: 4.2rem;
  font-weight: 700;
  color: #cc2222;
  letter-spacing: 0.3em;
  line-height: 1;
  animation: boot-glow 1.6s ease-in-out infinite alternate;
}
@keyframes boot-glow {
  from { text-shadow: 0 0 10px rgba(204,34,34,0.2); }
  to   { text-shadow: 0 0 45px rgba(204,34,34,0.6), 0 0 90px rgba(204,34,34,0.12); }
}
.boot-arabic {
  font-family: 'IBM Plex Arabic', 'Noto Naskh Arabic', Arial, sans-serif;
  font-size: 1.4rem;
  color: rgba(204,34,34,0.35);
  letter-spacing: 0;
  margin-bottom: 2rem;
  direction: rtl;
}
.boot-lines {
  text-align: left;
  min-height: 128px;
  max-height: 128px;
  overflow: hidden;
  margin-bottom: 1.1rem;
}
.boot-line {
  font-size: 0.67rem;
  letter-spacing: 0.06em;
  color: #4a9a5c;
  margin-bottom: 0.26rem;
  opacity: 0;
  transform: translateX(-8px);
  animation: boot-line-in 0.14s ease forwards;
}
@keyframes boot-line-in { to { opacity: 1; transform: translateX(0); } }
.boot-progress-wrap {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.boot-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #991818, #cc2222, #ff4444);
  transition: width 0.18s ease;
}
.boot-footer {
  font-size: 0.55rem;
  letter-spacing: 0.32em;
  color: rgba(148,150,166,0.5);
  text-transform: uppercase;
  transition: color 0.3s;
}

.login-reticle {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reticle-outer {
  position: absolute;
  width: min(78vw, 78vh);
  height: min(78vw, 78vh);
  opacity: 0.07;
  animation: reticle-spin 90s linear infinite;
}
.reticle-inner {
  position: absolute;
  width: min(38vw, 38vh);
  height: min(38vw, 38vh);
  opacity: 0.05;
  animation: reticle-spin 35s linear infinite reverse;
}
@keyframes reticle-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
[data-theme="light"] .reticle-outer { opacity: 0.032; }
[data-theme="light"] .reticle-inner { opacity: 0.022; }

/* ================================================================
   HQ DASHBOARD — Tactical Panel Components
   ================================================================ */

/* ── HQ Page Header ─────────────────────────────────────────────── */
.hq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0 0.6rem;
  border-bottom: 1px solid var(--tac-border);
  margin-bottom: 0.75rem;
}
.hq-header-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--tac-text);
}
.hq-header-dt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--tac-muted);
  letter-spacing: 0.03em;
}

/* ── Full-width Status Strip ────────────────────────────────────── */
.hq-strip {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--tac-border);
  border-top: 2px solid var(--tac-accent);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(0,0,0,0.28);
}
/* Readiness + CBRN blocks reuse hq-status-display but in strip context */
.hq-strip .hq-status-display {
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  flex: 1.5;
  padding: 0.8rem 1.2rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.hq-strip .hq-status-value.hq-strip-val {
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}
.hq-strip-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.8rem 1.2rem;
  flex: 1;
  gap: 4px;
}
.hq-strip-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
}
.hq-strip .hq-status-display .hq-strip-lbl {
  color: rgba(255,255,255,0.6);
}
.hq-strip-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--tac-text);
}
.hq-strip-timer {
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: var(--tac-text);
}
.hq-strip-role {
  font-weight: 400;
  color: var(--tac-muted);
  font-size: 0.82rem;
}
.hq-strip-sep {
  width: 1px;
  background: var(--tac-border);
  flex-shrink: 0;
  align-self: stretch;
}

/* ── Panel wrapper ──────────────────────────────────────────────── */
.hq-panel {
  border-left: 3px solid var(--tac-accent) !important;
  padding: 0 !important;
  overflow: hidden;
}
/* Suppress the global card corner decorators on hq-panels */
.hq-panel::before, .hq-panel::after { display: none !important; }

/* ── Panel header ───────────────────────────────────────────────── */
.hq-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1rem;
  background: rgba(0,0,0,0.22);
  border-bottom: 1px solid var(--tac-border);
}
.hq-panel-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--tac-text);
  text-transform: uppercase;
}
.hq-panel-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  color: var(--tac-muted);
  text-transform: uppercase;
}

/* ── Large status display (used inside strip blocks) ─────────────── */
.hq-status-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hq-status-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  opacity: 0.75;
  text-transform: uppercase;
  color: #fff;
}
.hq-status-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
}

/* Status color variants */
.hq-status-green  { background: linear-gradient(135deg, #0f6b38 0%, #1a8f4a 100%); }
.hq-status-yellow { background: linear-gradient(135deg, #7a5208 0%, #9a6a10 100%); }
.hq-status-orange { background: linear-gradient(135deg, #7a3008 0%, #9a4212 100%); }
.hq-status-red    { background: linear-gradient(135deg, #7a0e0e 0%, #9a1818 100%); }
.hq-status-grey   { background: linear-gradient(135deg, #383848 0%, #484860 100%); }
.hq-status-blue   { background: linear-gradient(135deg, #1a3478 0%, #2040a0 100%); }
.hq-status-purple { background: linear-gradient(135deg, #4a1878 0%, #5e2298 100%); }
.hq-status-black  { background: linear-gradient(135deg, #0a0a14 0%, #14141e 100%); }

/* ── Vertical selector (side-by-side panels) ─────────────────────── */
.hq-selector-col {
  display: flex;
  flex-direction: column;
  margin: 0.7rem 0.8rem 0.8rem;
  border: 1px solid var(--tac-border);
  border-radius: 3px;
  overflow: hidden;
}

.hq-sel-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--tac-border);
  background: rgba(0,0,0,0.15);
  color: #9098b8;
  transition: background 0.15s, color 0.15s, border-left 0.1s;
  position: relative;
  border-left: 3px solid transparent;
  width: 100%;
}
.hq-sel-btn:last-child { border-bottom: none; }

/* Hover: show color */
.hq-sel-green:hover  { background: rgba(16,185,129,0.15);  color: #6edcaa; border-left-color: rgba(16,185,129,0.5); }
.hq-sel-yellow:hover { background: rgba(245,158,11,0.15);  color: #f8c84a; border-left-color: rgba(245,158,11,0.5); }
.hq-sel-orange:hover { background: rgba(249,115,22,0.15);  color: #fc9350; border-left-color: rgba(249,115,22,0.5); }
.hq-sel-red:hover    { background: rgba(239,68,68,0.15);   color: #f87878; border-left-color: rgba(239,68,68,0.5); }
.hq-sel-grey:hover   { background: rgba(120,128,160,0.15); color: #d0d4e8; border-left-color: rgba(120,128,160,0.5); }
.hq-sel-blue:hover   { background: rgba(60,130,220,0.15);  color: #80b0f0; border-left-color: rgba(60,130,220,0.5); }
.hq-sel-purple:hover { background: rgba(140,60,220,0.15);  color: #c090f0; border-left-color: rgba(140,60,220,0.5); }
.hq-sel-black:hover  { background: rgba(60,60,80,0.35);    color: #b0b4c8; border-left-color: rgba(100,100,130,0.5); }

/* Active: solid accent fill */
.hq-sel-green.hq-sel-active  { background: rgba(16,185,129,0.22);  color: #5cd4a0; border-left-color: #10b981; }
.hq-sel-yellow.hq-sel-active { background: rgba(245,158,11,0.22);  color: #f5c030; border-left-color: #f59e0b; }
.hq-sel-orange.hq-sel-active { background: rgba(249,115,22,0.22);  color: #f99050; border-left-color: #f97316; }
.hq-sel-red.hq-sel-active    { background: rgba(239,68,68,0.22);   color: #f06868; border-left-color: #ef4444; }
.hq-sel-grey.hq-sel-active   { background: rgba(120,128,160,0.2);  color: #d0d8f0; border-left-color: #9ca3af; }
.hq-sel-blue.hq-sel-active   { background: rgba(60,130,220,0.22);  color: #78aef0; border-left-color: #6090e0; }
.hq-sel-purple.hq-sel-active { background: rgba(140,60,220,0.22);  color: #b880f0; border-left-color: #a060e0; }
.hq-sel-black.hq-sel-active  { background: rgba(40,40,60,0.55);    color: #a8a8c8; border-left-color: #707090; }

/* Color pip */
.hq-sel-pip {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hq-sel-green  .hq-sel-pip { background: #10b981; }
.hq-sel-yellow .hq-sel-pip { background: #f59e0b; }
.hq-sel-orange .hq-sel-pip { background: #f97316; }
.hq-sel-red    .hq-sel-pip { background: #ef4444; }
.hq-sel-grey   .hq-sel-pip { background: #9ca3af; }
.hq-sel-blue   .hq-sel-pip { background: #6090e0; }
.hq-sel-purple .hq-sel-pip { background: #a060e0; }
.hq-sel-black  .hq-sel-pip { background: #505060; border: 1px solid #8080a0; }

/* ── Action list (Operations) ───────────────────────────────────── */
.hq-action-list {
  padding: 0.5rem 0.8rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.hq-action-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.72rem 0.9rem;
  background: rgba(0,0,0,0.12);
  border: 1px solid var(--tac-border);
  border-left: 3px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.12s, border-left-color 0.12s;
  width: 100%;
  text-align: left;
  color: var(--tac-text);
}
.hq-action-row:hover {
  background: rgba(204,34,34,0.09);
  border-left-color: var(--tac-accent);
}
.hq-action-icon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--tac-accent);
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.hq-action-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  flex: 1;
}
.hq-action-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--tac-muted);
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--tac-border);
  padding: 2px 7px;
  border-radius: 2px;
}

/* ── Observation Points list ────────────────────────────────────── */
.hq-op-list {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.8rem 0.8rem;
  gap: 0.3rem;
}
.op-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  background: rgba(0,0,0,0.15);
  border: 1px solid var(--tac-border);
  border-left: 3px solid rgba(90,140,210,0.5);
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
}
.op-item-icon {
  font-size: 0.65rem;
  color: #6090d0;
  width: 12px;
  flex-shrink: 0;
}
.op-item-name {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tac-text);
  flex: 1;
}
.op-item-badge {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 2px;
  background: rgba(58,138,76,0.2);
  color: #4a9a5c;
  border: 1px solid rgba(58,138,76,0.3);
}

/* ── Weather row ────────────────────────────────────────────────── */
.hq-wx-row {
  display: flex;
  align-items: center;
  padding: 0.6rem 0.8rem 0.75rem;
}
.hq-wx-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.hq-wx-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--tac-muted);
  text-transform: uppercase;
}
.hq-wx-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--tac-text);
}
.hq-wx-divider {
  width: 1px;
  height: 28px;
  background: var(--tac-border);
  flex-shrink: 0;
}

/* ── Light mode ─────────────────────────────────────────────────── */
[data-theme="light"] .hq-strip          { background: rgba(0,0,0,0.04); border-top-color: #991818; }
[data-theme="light"] .hq-strip-lbl      { color: rgba(0,0,0,0.4); }
[data-theme="light"] .hq-strip-val      { color: #1a1a2e; }
[data-theme="light"] .hq-strip-timer    { color: #1a1a2e; }
[data-theme="light"] .hq-header-title   { color: #1a1a2e; }
[data-theme="light"] .hq-header-dt      { color: #6a6c80; }
[data-theme="light"] .hq-panel-header   { background: rgba(0,0,0,0.04); }
[data-theme="light"] .hq-panel-title    { color: #1a1a2e; }
[data-theme="light"] .hq-panel-meta     { color: #6a6c80; }
[data-theme="light"] .hq-sel-btn        { background: rgba(0,0,0,0.04); color: #606280; border-color: #c0c2cc; }
[data-theme="light"] .hq-action-row     { background: rgba(0,0,0,0.03); border-color: #c0c2cc; color: #1a1a2e; }
[data-theme="light"] .hq-action-type    { color: #8080a0; border-color: #c0c2cc; background: rgba(0,0,0,0.04); }
[data-theme="light"] .op-item           { background: #f4f5f8; border-color: #c8cad6; }
[data-theme="light"] .op-item-name      { color: #1a1a2e; }
/* ================================================================
   GLOBAL TACTICAL OVERRIDE — Applies to all pages via mirsal-theme.css
   ================================================================ */

/* ── Force JetBrains Mono everywhere (IBM Plex Arabic fills Arabic glyphs) ── */
body, button, input, select, textarea, table, th, td,
h1, h2, h3, h4, h5, h6 {
  font-family: 'JetBrains Mono', 'IBM Plex Arabic', monospace !important;
}

/* ── Arabic mode (html[dir="rtl"]) — full UI override ────────────── */
html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] table,
html[dir="rtl"] th,
html[dir="rtl"] td,
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"] .sidebar-link,
html[dir="rtl"] .sidebar-role,
html[dir="rtl"] .sidebar-wordmark,
html[dir="rtl"] #mirsal-status-bar {
  font-family: 'IBM Plex Arabic', 'Noto Naskh Arabic', Arial, sans-serif !important;
  letter-spacing: 0 !important;
}
html[dir="rtl"] .sidebar-link {
  font-size: 0.95rem !important;
  line-height: 1.5;
}
html[dir="rtl"] .sidebar-role {
  font-size: 0.72rem !important;
  text-align: right;
}
html[dir="rtl"] #mirsal-status-bar {
  font-size: 0.8rem !important;
}

/* Inline .arabic-text class — for table cells, labels etc. */
.arabic-text,
:lang(ar) {
  font-family: 'IBM Plex Arabic', 'Noto Naskh Arabic', Arial, sans-serif !important;
  direction: rtl;
  text-align: right;
  line-height: 1.6;
  letter-spacing: 0 !important;
}

/* ── Sharp corners globally ─────────────────────────────────────── */
.rounded-xl, .rounded-lg, .rounded-md { border-radius: 3px !important; }
.rounded-full { border-radius: 3px !important; }

/* ── Card override — beats inline <style> .card only when needed ── */
/* Tactical surface, left accent, sharp corners */
html body .card:not(.hq-panel):not(.glass-card) {
  background: #181920 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-left: 3px solid var(--tac-accent) !important;
  border-radius: 3px !important;
}
[data-theme="light"] html body .card:not(.hq-panel) {
  background: #f4f5f8 !important;
  border-color: #d0d2da !important;
  border-left-color: #991818 !important;
}

/* ── Button global base ─────────────────────────────────────────── */
html body .btn {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
}

/* ── Neutralize "bounce" hover on buttons ───────────────────────── */
html body .btn:hover:not(:disabled),
html body .unit-badge:hover,
html body .inventory-card:hover {
  transform: none !important;
}

/* ── Blue Tailwind button colors → tactical accent ──────────────── */
.bg-blue-600  { background-color: rgba(180,28,28,0.75) !important; }
.bg-blue-700  { background-color: rgba(180,28,28,0.9) !important; }
.bg-indigo-600 { background-color: rgba(140,28,28,0.75) !important; }
.bg-indigo-700 { background-color: rgba(140,28,28,0.9) !important; }
.hover\:bg-blue-700:hover   { background-color: rgba(180,28,28,0.9) !important; }
.hover\:bg-indigo-700:hover { background-color: rgba(140,28,28,0.9) !important; }
.bg-green-600  { background-color: rgba(15,110,60,0.8) !important; }
.hover\:bg-green-700:hover { background-color: rgba(12,90,50,0.9) !important; }
.bg-purple-600 { background-color: rgba(90,30,120,0.8) !important; }
.hover\:bg-purple-700:hover { background-color: rgba(70,20,100,0.9) !important; }
.bg-cyan-600   { background-color: rgba(10,90,110,0.8) !important; }
.hover\:bg-cyan-700:hover  { background-color: rgba(8,75,95,0.9) !important; }

/* ── Text color refinements ─────────────────────────────────────── */
.text-4xl { font-size: 1.2rem !important; letter-spacing: 0.1em !important; }
.text-3xl { font-size: 1.05rem !important; }
.text-2xl { font-size: 0.95rem !important; }
.text-xl  { font-size: 0.88rem !important; }
.text-gray-400 { color: rgba(160,165,185,0.8) !important; }
.text-gray-300 { color: rgba(180,185,205,0.9) !important; }

/* ── Form inputs ────────────────────────────────────────────────── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select {
  font-family: 'JetBrains Mono', monospace !important;
  background: rgba(0,0,0,0.25) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 2px !important;
  color: #e0e4f0 !important;
  font-size: 0.8rem !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: rgba(204,34,34,0.5) !important;
  box-shadow: 0 0 0 1px rgba(204,34,34,0.2) !important;
  ring: none !important;
}
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="password"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: rgba(255,255,255,0.8) !important;
  border-color: #d0d2da !important;
  color: #1a1a2e !important;
}

/* ── Tables ────────────────────────────────────────────────────── */
table {
  border-collapse: collapse;
  width: 100%;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.78rem !important;
}
thead th {
  background: rgba(0,0,0,0.3) !important;
  color: rgba(160,165,185,0.9) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.55rem 0.75rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
tbody tr:hover {
  background: rgba(255,255,255,0.03) !important;
}
tbody td {
  padding: 0.55rem 0.75rem !important;
  color: #c8cce0 !important;
  vertical-align: middle !important;
}

/* ── Scrollbars ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.15); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ── Modals ────────────────────────────────────────────────────── */
.modal-content, [class*="modal"] > div {
  border-radius: 3px !important;
}

/* ── Navigation links ───────────────────────────────────────────── */
nav a, nav button {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.05em !important;
}

/* ── Remove glassmorphism ───────────────────────────────────────── */
.glass-card, [class*="glass"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #161820 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-left: 3px solid rgba(204,34,34,0.4) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

/* ── Page-level header pattern ──────────────────────────────────── */
body > div h1.text-4xl,
body > div > div h1.text-4xl,
main h1.text-4xl {
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* ── Light mode adjustments ─────────────────────────────────────── */
[data-theme="light"] thead th { background: rgba(0,0,0,0.06) !important; color: #5a5c70 !important; }
[data-theme="light"] tbody td { color: #2a2c3a !important; }
[data-theme="light"] tbody tr:hover { background: rgba(0,0,0,0.03) !important; }