/* hud_theme.css - Neon HUD theme */

@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Cairo:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;
  --hud-font: "Cairo","Rajdhani","Segoe UI",Tahoma,Arial,sans-serif;
  --hud-font-display: "Rajdhani","Cairo","Segoe UI",Tahoma,Arial,sans-serif;

  --hud-bg-0: #040a16;
  --hud-bg-1: #061227;
  --hud-bg-2: #0b1f3d;
  --hud-panel: rgba(6, 16, 34, 0.86);
  --hud-panel-strong: rgba(6, 16, 34, 0.94);
  --hud-panel-soft: rgba(6, 16, 34, 0.72);
  --hud-grid: rgba(120, 200, 255, 0.07);
  --hud-line: rgba(120, 200, 255, 0.24);
  --hud-line-strong: rgba(140, 225, 255, 0.55);
  --hud-cyan: #4fd1ff;
  --hud-blue: #2aa7ff;
  --hud-ink: rgba(214, 237, 255, 0.96);
  --hud-muted: rgba(120, 170, 205, 0.78);
  --hud-glow-soft: 0 0 12px rgba(79, 209, 255, 0.18);
  --hud-glow: 0 0 20px rgba(79, 209, 255, 0.28);
  --hud-glow-strong: 0 0 34px rgba(79, 209, 255, 0.45);
  --hud-radius-sm: 2px;
  --hud-radius: 3px;
  --hud-radius-lg: 6px;
  --hud-ring: 0 0 0 1px rgba(79, 209, 255, 0.22), 0 0 16px rgba(79, 209, 255, 0.18);

  --bg: var(--hud-bg-0);
  --bg-alt: var(--hud-bg-1);
  --bg-page: var(--hud-bg-0);
  --bg-2: var(--hud-bg-1);
  --bg1: var(--hud-bg-0);
  --bg2: var(--hud-bg-1);
  --panel: var(--hud-panel);
  --card: var(--hud-panel);
  --panel-soft: var(--hud-panel-soft);
  --text: var(--hud-ink);
  --ink: var(--hud-ink);
  --muted: var(--hud-muted);
  --accent: var(--hud-cyan);
  --accent2: var(--hud-blue);
  --accent-alt: var(--hud-blue);
  --neon: var(--hud-cyan);
  --glow: rgba(79, 209, 255, 0.55);
  --glass-stroke: var(--hud-line);
  --glass-alpha: 0.12;
  --glass-alpha-strong: 0.22;
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  --head-alpha: 0.16;
  --head-alpha-strong: 0.28;
  --hover-alpha: 0.12;
  --chip-alpha: 0.18;
  --scroll-thumb: rgba(79, 209, 255, 0.24);
  --scroll-thumb-hover: rgba(79, 209, 255, 0.38);

  --bg-card: var(--hud-panel);
  --bg-card-soft: var(--hud-panel-soft);
  --bg-row-hover: rgba(79, 209, 255, 0.035);
  --panel2: var(--hud-panel-soft);

  --ok: #3ae7c3;
  --warn: #f8d277;
  --danger: #ff6b8a;
  --green: #2ee7c5;
  --red: #ff6b8a;
  --purple: var(--hud-blue);
  --c1: var(--hud-blue);
  --c2: #45e5ff;
  --c3: #7dd3fc;
  --c4: #5aa9ff;

  --border: var(--hud-line);
  --border-subtle: rgba(77, 176, 255, 0.14);
  --card-border: var(--hud-line);
  --line: var(--hud-line);
  --line-2: var(--hud-line-strong);

  --radius-lg: var(--hud-radius-lg);
  --radius-md: var(--hud-radius);
  --radius-pill: var(--hud-radius-lg);
  --radius: var(--hud-radius);
  --radius-sm: var(--hud-radius-sm);
  --r-xs: var(--hud-radius-sm);
  --r-sm: var(--hud-radius);
  --r: var(--hud-radius);
  --r-lg: var(--hud-radius-lg);
  --r-xl: var(--hud-radius-lg);
  --r-2xl: var(--hud-radius-lg);
  --r-full: var(--hud-radius-lg);
}

html, body {
  margin: 0;
  font-family: var(--hud-font);
  color: var(--hud-ink);
  background-color: var(--hud-bg-0);
  background-image:
    repeating-linear-gradient(0deg, rgba(120, 200, 255, 0.05) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(90deg, rgba(120, 200, 255, 0.05) 0 1px, transparent 1px 58px),
    radial-gradient(1200px 520px at 50% -10%, rgba(40, 140, 255, 0.22), transparent 60%),
    radial-gradient(900px 420px at 15% 15%, rgba(70, 190, 255, 0.12), transparent 55%),
    linear-gradient(180deg, #06162f 0%, #061226 35%, #040a16 100%);
  background-attachment: fixed;
}

body {
  min-height: 100vh;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1400px 700px at 50% 0%, rgba(10, 30, 60, 0.12), transparent 60%),
    radial-gradient(1200px 800px at 50% 100%, rgba(0, 8, 20, 0.45), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.6;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
  opacity: 0.08;
  z-index: 0;
}

body > * {
  position: relative;
  z-index: 1;
}

::selection {
  background: rgba(79, 209, 255, 0.28);
  color: #f0f8ff;
}

a {
  color: var(--hud-cyan);
  text-decoration: none;
}
a:hover {
  color: #8ae7ff;
}

h1, h2, h3, h4,
.page-title,
.card-title,
.section-title,
.widget-title,
.title-block h1 {
  font-family: var(--hud-font-display);
  letter-spacing: 0.06em;
  color: rgba(210, 238, 255, 0.95) !important;
  text-shadow: 0 0 12px rgba(79, 209, 255, 0.35), 0 0 3px rgba(79, 209, 255, 0.2);
}

hr {
  border-color: var(--hud-line);
}

button,
.btn,
.btn-primary,
.btn-secondary,
.primary-btn,
.ghost {
  border-radius: var(--hud-radius);
  border: 1px solid rgba(120, 200, 255, 0.32);
  background: linear-gradient(180deg, rgba(8, 20, 42, 0.85), rgba(5, 12, 26, 0.85));
  color: var(--hud-ink);
  box-shadow: 0 0 18px rgba(79, 209, 255, 0.12);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
button:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.primary-btn:hover,
.ghost:hover {
  border-color: var(--hud-line-strong);
  box-shadow: var(--hud-glow);
  transform: translateY(-1px);
}
button:focus-visible,
.btn:focus-visible,
.primary-btn:focus-visible,
.ghost:focus-visible {
  outline: none;
  box-shadow: var(--hud-ring);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  border-radius: var(--hud-radius);
  border: 1px solid rgba(120, 200, 255, 0.28);
  background: rgba(4, 12, 26, 0.82);
  color: var(--hud-ink);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
  border-color: var(--hud-line-strong);
  box-shadow: var(--hud-ring);
  outline: none;
}

.card,
.panel,
.box,
.kpi,
.stat-card,
.info-card,
.section-card,
.table-wrap,
.widget,
[class*="card-"],
[class*="-card"],
[class*="panel-"] {
  border-radius: var(--hud-radius);
  border-color: rgba(120, 200, 255, 0.26);
  background: linear-gradient(180deg, rgba(6, 16, 34, 0.88), rgba(4, 10, 22, 0.92));
  box-shadow: 0 0 24px rgba(79, 209, 255, 0.1), 0 12px 30px rgba(0,0,0,0.5);
}

table thead th,
thead tr th,
.dt-column-title,
table > thead > tr > th {
  background: rgba(4, 12, 28, 0.98) !important;
  border-bottom: 1px solid rgba(140, 225, 255, 0.5) !important;
  color: rgba(202, 235, 255, 0.95) !important;
  text-shadow: 0 0 10px rgba(79, 209, 255, 0.28);
}
td,
th {
  border-color: var(--hud-line) !important;
}
tbody tr:hover > td {
  background: rgba(79, 209, 255, 0.05) !important;
}

.page-header,
.page-toolbar,
.topbar {
  background: rgba(4, 12, 26, 0.92);
  border-color: rgba(120, 200, 255, 0.28);
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

/* Shell overrides */
body.app-shell {
  background-color: var(--hud-bg-0);
  color: var(--hud-ink);
  font-family: var(--hud-font);
}
body.app-shell .shell-header {
  background: rgba(4, 12, 26, 0.92);
  border-bottom: 1px solid rgba(120, 200, 255, 0.28);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
body.app-shell .shell-boot {
  background:
    radial-gradient(900px 380px at 15% 5%, rgba(46, 161, 255, 0.22), transparent 55%),
    radial-gradient(700px 320px at 85% 20%, rgba(79, 209, 255, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,0.96), rgba(2,6,23,0.98));
}
body.app-shell .shell-boot-card,
body.app-shell .shell-modal-content {
  background: var(--hud-panel-strong);
  border: 1px solid var(--hud-line);
  box-shadow: var(--hud-glow-soft), 0 30px 90px rgba(0,0,0,0.6);
  border-radius: var(--hud-radius-lg);
}

/* ===== Window HUD (match image style) ===== */
body.app-shell .app-window {
  border-radius: 6px;
  border: 1px solid rgba(120, 200, 255, 0.24);
  background: linear-gradient(180deg, rgba(6, 16, 34, 0.9), rgba(4, 10, 22, 0.96));
  box-shadow:
    0 0 26px rgba(79, 209, 255, 0.12),
    0 12px 30px rgba(0,0,0,0.55);
}
body.app-shell .app-window::after {
  box-shadow: inset 0 0 0 1px rgba(120, 200, 255, 0.08);
}
body.app-shell .app-window::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  opacity: 0.65;
  background:
    linear-gradient(90deg, rgba(120, 200, 255, 0.5) 0 20px, transparent 20px) top left,
    linear-gradient(180deg, rgba(120, 200, 255, 0.5) 0 20px, transparent 20px) top left,
    linear-gradient(90deg, rgba(120, 200, 255, 0.5) 0 20px, transparent 20px) top right,
    linear-gradient(180deg, rgba(120, 200, 255, 0.5) 0 20px, transparent 20px) top right,
    linear-gradient(90deg, rgba(120, 200, 255, 0.5) 0 20px, transparent 20px) bottom left,
    linear-gradient(180deg, rgba(120, 200, 255, 0.5) 0 20px, transparent 20px) bottom left,
    linear-gradient(90deg, rgba(120, 200, 255, 0.5) 0 20px, transparent 20px) bottom right,
    linear-gradient(180deg, rgba(120, 200, 255, 0.5) 0 20px, transparent 20px) bottom right;
  background-repeat: no-repeat;
  background-size: 20px 1px, 1px 20px, 20px 1px, 1px 20px, 20px 1px, 1px 20px, 20px 1px, 1px 20px;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
  mix-blend-mode: screen;
}

body.app-shell .app-window-header {
  border-bottom: 1px solid rgba(120, 200, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(8, 20, 44, 0.95), rgba(6, 16, 34, 0.85));
  box-shadow:
    inset 0 1px 0 rgba(120, 200, 255, 0.2),
    inset 0 -1px 0 rgba(120, 200, 255, 0.08);
}
body.app-shell .app-window-title {
  letter-spacing: 0.06em;
  color: rgba(210, 238, 255, 0.95);
  text-shadow: 0 0 10px rgba(79, 209, 255, 0.35);
}
body.app-shell .app-window-body {
  background: linear-gradient(180deg, rgba(6, 14, 30, 0.94), rgba(3, 8, 18, 0.98));
}

body.app-shell .ui-window-frame {
  opacity: 0.6;
  mix-blend-mode: screen;
}
body.app-shell .ui-window-frame-rect {
  stroke: rgba(120, 200, 255, 0.42);
  stroke-width: 1;
  filter: drop-shadow(0 0 6px rgba(79, 209, 255, 0.25));
}
body.app-shell .shell-main-frame-rect {
  stroke: rgba(120, 200, 255, 0.32);
}

body.app-shell .app-window-actions .win-btn {
  border-radius: 6px;
  border: 1px solid rgba(120, 200, 255, 0.25);
  background: rgba(6, 16, 34, 0.55);
  color: rgba(193, 230, 255, 0.9);
  box-shadow: 0 0 12px rgba(79, 209, 255, 0.12);
}
body.app-shell .app-window-actions .win-btn:hover {
  border-color: rgba(120, 200, 255, 0.45);
  background: rgba(8, 20, 44, 0.75);
  box-shadow: 0 0 16px rgba(79, 209, 255, 0.2);
}

body.app-shell .ui-iframe-loader {
  background:
    radial-gradient(circle at 30% 20%, rgba(120, 200, 255, 0.14), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(46, 161, 255, 0.12), transparent 55%),
    rgba(3, 8, 18, 0.45);
}
body.app-shell .shell-topup-btn,
body.app-shell .shell-icon-btn,
body.app-shell .shell-topup-primary,
body.app-shell .shell-logout-btn,
body.app-shell .shell-settings-btn,
body.app-shell .shell-voice-btn,
body.app-shell .shell-stop-btn,
body.app-shell .shell-model-btn {
  border: 1px solid var(--hud-line);
  background: rgba(8, 24, 50, 0.8);
  color: var(--hud-ink);
  box-shadow: var(--hud-glow-soft);
}
body.app-shell .shell-topup-btn:hover,
body.app-shell .shell-icon-btn:hover,
body.app-shell .shell-topup-primary:hover,
body.app-shell .shell-logout-btn:hover,
body.app-shell .shell-settings-btn:hover,
body.app-shell .shell-voice-btn:hover,
body.app-shell .shell-stop-btn:hover,
body.app-shell .shell-model-btn:hover {
  border-color: var(--hud-line-strong);
  box-shadow: var(--hud-glow);
}
body.app-shell .shell-main {
  background: rgba(4, 12, 26, 0.9);
  border: 1px solid rgba(120, 200, 255, 0.22);
  box-shadow: inset 0 0 20px rgba(79, 209, 255, 0.06);
  border-radius: 6px;
}
body.app-shell .shell-main::before {
  background:
    repeating-linear-gradient(90deg, rgba(79, 209, 255, 0.08) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(79, 209, 255, 0.07) 0 1px, transparent 1px 120px),
    radial-gradient(800px 320px at 50% 0%, rgba(46, 161, 255, 0.18), transparent 60%);
  opacity: 0.7;
}
body.app-shell .app-window,
body.app-shell .app-window-header,
body.app-shell .app-window-body {
  border-color: rgba(120, 200, 255, 0.22);
}
body.app-shell .app-window {
  background: linear-gradient(180deg, rgba(6, 16, 34, 0.92), rgba(4, 10, 22, 0.96));
  box-shadow: 0 0 24px rgba(79, 209, 255, 0.12), 0 12px 30px rgba(0,0,0,0.55);
}
body.app-shell .app-window-header {
  background: linear-gradient(180deg, rgba(8, 20, 44, 0.95), rgba(6, 16, 34, 0.85));
}
body.app-shell .app-window-title {
  text-shadow: 0 0 12px rgba(79, 209, 255, 0.35);
}
body.app-shell .shell-balance-chip {
  border: 1px solid rgba(120, 200, 255, 0.28);
  background: rgba(7, 20, 42, 0.72);
  box-shadow: 0 0 16px rgba(79, 209, 255, 0.14);
}

/* =====================================================================
   Classic HUD Glass Pass (apply the same transparency + palette everywhere)
===================================================================== */
:root {
  --hud-bg-0: #030b1a;
  --hud-bg-1: #061426;
  --hud-bg-2: #0b1f39;
  --hud-panel: rgba(6, 18, 38, 0.78);
  --hud-panel-strong: rgba(6, 18, 38, 0.92);
  --hud-panel-soft: rgba(6, 18, 38, 0.58);
  --hud-grid: rgba(122, 200, 255, 0.08);
  --hud-line: rgba(122, 200, 255, 0.26);
  --hud-line-strong: rgba(170, 235, 255, 0.55);
  --hud-cyan: #5ad1ff;
  --hud-blue: #3aa0ff;
  --hud-ink: rgba(230, 245, 255, 0.96);
  --hud-muted: rgba(140, 190, 230, 0.82);
  --hud-glass: rgba(6, 18, 38, 0.55);
  --hud-glass-strong: rgba(6, 18, 38, 0.82);
  --hud-glass-soft: rgba(6, 18, 38, 0.38);
  --hud-glass-border: rgba(122, 200, 255, 0.35);
  --hud-glass-blur: 10px;
  --hud-glass-sat: 140%;
  --ring: 0 0 0 3px rgba(90, 209, 255, 0.35);

  --bg: var(--hud-bg-0);
  --bg-alt: var(--hud-bg-1);
  --bg-page: var(--hud-bg-0);
  --bg-2: var(--hud-bg-1);
  --bg1: var(--hud-bg-0);
  --bg2: var(--hud-bg-1);
  --panel: var(--hud-panel);
  --panel-soft: var(--hud-panel-soft);
  --card: var(--hud-panel);
  --text: var(--hud-ink);
  --ink: var(--hud-ink);
  --muted: var(--hud-muted);
  --accent: var(--hud-cyan);
  --accent2: var(--hud-blue);
  --accent-alt: var(--hud-blue);
  --neon: var(--hud-cyan);
  --glow: rgba(90, 209, 255, 0.55);
  --glass-stroke: var(--hud-glass-border);
  --glass-alpha: 0.12;
  --glass-alpha-strong: 0.22;
  --glass-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
  --head-alpha: 0.18;
  --head-alpha-strong: 0.28;
  --hover-alpha: 0.12;
  --chip-alpha: 0.18;
  --scroll-thumb: rgba(90, 209, 255, 0.26);
  --scroll-thumb-hover: rgba(90, 209, 255, 0.42);
}

html, body {
  color: var(--hud-ink);
  background-color: var(--hud-bg-0);
  background-image:
    repeating-linear-gradient(0deg, rgba(122, 200, 255, 0.05) 0 1px, transparent 1px 70px),
    repeating-linear-gradient(90deg, rgba(122, 200, 255, 0.05) 0 1px, transparent 1px 70px),
    radial-gradient(1200px 520px at 50% -10%, rgba(40, 150, 255, 0.18), transparent 60%),
    radial-gradient(900px 420px at 15% 15%, rgba(70, 190, 255, 0.12), transparent 55%),
    linear-gradient(180deg, var(--hud-bg-1) 0%, var(--hud-bg-0) 100%);
  background-attachment: fixed;
}

body {
  font-family: var(--hud-font);
  text-rendering: optimizeLegibility;
}

.hud-glass,
.card,
.panel,
.side-card,
.section-card,
.stat-card,
.info-card,
.widget,
.table-wrap,
.page-header,
.page-toolbar,
.topbar,
.site-popover,
.inline-site-pop,
.modal,
.popover,
.dropdown-menu,
.toast,
.inline-site-bar,
.ai-toolbar,
.geo-map-card,
.shell {
  background: var(--hud-panel);
  border: 1px solid var(--hud-line);
  box-shadow: var(--hud-glow-soft), 0 16px 35px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(var(--hud-glass-blur)) saturate(var(--hud-glass-sat));
  -webkit-backdrop-filter: blur(var(--hud-glass-blur)) saturate(var(--hud-glass-sat));
}

table,
.mini-table,
.dataTable,
.dataTables_scrollBody {
  color: var(--hud-ink);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--hud-line);
  background: rgba(6, 18, 38, 0.7);
  color: var(--hud-ink);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid var(--hud-line);
  background: rgba(6, 18, 38, 0.55);
  color: var(--hud-ink) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: var(--hud-line-strong);
  box-shadow: var(--hud-glow-soft);
}

/* Index (analytics) specific patches */
#ranking-table-frame {
  background: rgba(6, 18, 38, 0.65) !important;
  border-color: var(--hud-line) !important;
  box-shadow: var(--hud-glow-soft), 0 12px 30px rgba(0, 0, 0, 0.55) !important;
}

#inactiveBanner {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: rgba(254, 243, 199, 0.98) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.15);
}

/* App shell input strip (match HUD glass) */
body.app-shell .mic-controls-group .shell-chat-zone {
  background: rgba(6, 18, 38, 0.75);
  border: 1px solid rgba(122, 200, 255, 0.28);
  color: var(--hud-ink);
  box-shadow: var(--hud-glow-soft);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
body.app-shell .mic-controls-group .shell-chat-input {
  color: var(--hud-ink);
}
body.app-shell .mic-controls-group .shell-chat-input::placeholder {
  color: rgba(159, 178, 207, 0.85);
}

/* Site posts (WordPress-style preview) */
.post-body .wp-article,
.post-body .wp-section {
  background: rgba(6, 18, 38, 0.75) !important;
  border-color: var(--hud-line) !important;
  box-shadow: var(--hud-glow-soft), 0 10px 24px rgba(0, 0, 0, 0.45) !important;
}
.post-body .wp-hero {
  border-bottom-color: rgba(122, 200, 255, 0.2) !important;
}
.post-body .wp-hero h1,
.post-body .wp-section-title,
.post-body .wp-section-group h2,
.post-body .wp-section-body p,
.post-body .wp-list,
.post-body .wp-section-body ul,
.post-body .wp-section-body ol,
.post-body .wp-table,
.post-body table {
  color: var(--hud-ink) !important;
}
.post-body .wp-meta {
  color: var(--hud-muted) !important;
}
.post-body .wp-quote {
  background: rgba(8, 22, 44, 0.6) !important;
  border-right-color: var(--hud-cyan) !important;
  color: var(--hud-ink) !important;
}