/* Narwallagram CRT Hacker Theme for Dispatcharr */
/* ===== THEME COLORS ===== */
:root { --nw-primary: #ff66aa; --nw-primary-dim: #883366; --nw-primary-glow: rgba(255,102,170,0.18); --nw-bg: #0a0008; --nw-bg-surface: #150010; --nw-panel: rgba(18,0,14,0.92); --nw-text: #cc6699; --nw-text-dim: #774466; --nw-border: #663355; --nw-scanline: rgba(255,102,170,0.03); --nw-highlight-bg: #ff66aa; --nw-highlight-text: #0a0008; --nw-text-glow: 0 0 4px rgba(255,102,170,0.3); --nw-danger: #ff4466; --nw-success: #44ff88; --nw-warning: #ffaa44; --nw-input-bg: rgba(15,0,10,0.6); --nw-card-bg: rgba(20,2,14,0.94); --nw-hover-bg: rgba(255,102,170,0.08); --nw-active-bg: rgba(255,102,170,0.15); }
:root, [data-nw-theme="pink"] {
  --nw-primary: #ff66aa; --nw-primary-dim: #883366; --nw-primary-glow: rgba(255,102,170,0.18);
  --nw-bg: #0a0008; --nw-bg-surface: #150010; --nw-panel: rgba(18,0,14,0.92);
  --nw-text: #cc6699; --nw-text-dim: #774466; --nw-border: #663355;
  --nw-scanline: rgba(255,102,170,0.03); --nw-highlight-bg: #ff66aa; --nw-highlight-text: #0a0008;
  --nw-text-glow: 0 0 4px rgba(255,102,170,0.3);
  --nw-danger: #ff4466; --nw-success: #44ff88; --nw-warning: #ffaa44;
  --nw-input-bg: rgba(15,0,10,0.6); --nw-card-bg: rgba(20,2,14,0.94);
  --nw-hover-bg: rgba(255,102,170,0.08); --nw-active-bg: rgba(255,102,170,0.15);
}
[data-nw-theme="amber"] {
  --nw-primary: #ffaa00; --nw-primary-dim: #885500; --nw-primary-glow: rgba(255,170,0,0.15);
  --nw-bg: #0a0800; --nw-bg-surface: #151000; --nw-panel: rgba(15,12,0,0.92);
  --nw-text: #cc8800; --nw-text-dim: #775500; --nw-border: #664400;
  --nw-scanline: rgba(255,170,0,0.03); --nw-highlight-bg: #ffaa00; --nw-highlight-text: #0a0800;
  --nw-text-glow: 0 0 4px rgba(255,170,0,0.3);
  --nw-danger: #ff4466; --nw-success: #44ff88; --nw-warning: #ffaa44;
  --nw-input-bg: rgba(12,8,0,0.6); --nw-card-bg: rgba(18,10,0,0.94);
  --nw-hover-bg: rgba(255,170,0,0.08); --nw-active-bg: rgba(255,170,0,0.15);
}
[data-nw-theme="green"] {
  --nw-primary: #33ff00; --nw-primary-dim: #1a8800; --nw-primary-glow: rgba(51,255,0,0.15);
  --nw-bg: #000a00; --nw-bg-surface: #001500; --nw-panel: rgba(0,15,0,0.92);
  --nw-text: #22bb00; --nw-text-dim: #117700; --nw-border: #116600;
  --nw-scanline: rgba(51,255,0,0.03); --nw-highlight-bg: #33ff00; --nw-highlight-text: #000a00;
  --nw-text-glow: 0 0 4px rgba(51,255,0,0.3);
  --nw-danger: #ff4466; --nw-success: #44ff88; --nw-warning: #ffaa44;
  --nw-input-bg: rgba(0,10,0,0.6); --nw-card-bg: rgba(0,18,0,0.94);
  --nw-hover-bg: rgba(51,255,0,0.08); --nw-active-bg: rgba(51,255,0,0.15);
}
[data-nw-theme="blue"] {
  --nw-primary: #00aaff; --nw-primary-dim: #005588; --nw-primary-glow: rgba(0,170,255,0.15);
  --nw-bg: #00080a; --nw-bg-surface: #001015; --nw-panel: rgba(0,10,15,0.92);
  --nw-text: #0088cc; --nw-text-dim: #005577; --nw-border: #004466;
  --nw-scanline: rgba(0,170,255,0.03); --nw-highlight-bg: #00aaff; --nw-highlight-text: #00080a;
  --nw-text-glow: 0 0 4px rgba(0,170,255,0.3);
  --nw-danger: #ff4466; --nw-success: #44ff88; --nw-warning: #ffaa44;
  --nw-input-bg: rgba(0,8,10,0.6); --nw-card-bg: rgba(0,14,18,0.94);
  --nw-hover-bg: rgba(0,170,255,0.08); --nw-active-bg: rgba(0,170,255,0.15);
}
[data-nw-theme="red"] {
  --nw-primary: #ff0a0a; --nw-primary-dim: #990000; --nw-primary-glow: rgba(255,10,10,0.15);
  --nw-bg: #0a0000; --nw-bg-surface: #150000; --nw-panel: rgba(15,0,0,0.92);
  --nw-text: #cc0000; --nw-text-dim: #880000; --nw-border: #660000;
  --nw-scanline: rgba(255,10,10,0.03); --nw-highlight-bg: #ff0a0a; --nw-highlight-text: #0a0000;
  --nw-text-glow: 0 0 4px rgba(255,10,10,0.3);
  --nw-danger: #ff4466; --nw-success: #44ff88; --nw-warning: #ffaa44;
  --nw-input-bg: rgba(10,0,0,0.6); --nw-card-bg: rgba(18,0,0,0.94);
  --nw-hover-bg: rgba(255,10,10,0.08); --nw-active-bg: rgba(255,10,10,0.15);
}

/* ===== FONT & BASE ===== */
@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400;500;600;700&display=swap');

* { scrollbar-width: thin !important; scrollbar-color: var(--nw-primary-dim) transparent !important; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--nw-primary-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--nw-primary); }

body, #root {
  font-family: "Kode Mono", monospace !important;
  background: var(--nw-bg) !important;
  color: var(--nw-text) !important;
}

/* ===== CRT SCANLINE OVERLAY ===== */
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(0deg, var(--nw-scanline), var(--nw-scanline) 2px, transparent 2px, transparent 4px);
  pointer-events: none; z-index: 99999; opacity: 0.5;
}

/* ===== MANINE OVERRIDES - Background & Core ===== */
.mantine-AppShell-root, .mantine-AppShell-main,
.mantine-AppShell-header, .mantine-AppShell-navbar,
body > div:first-child {
  background: var(--nw-bg) !important;
}
.mantine-AppShell-main {
  background: var(--nw-bg) !important;
}

/* Navbar */
.mantine-AppShell-navbar {
  background: var(--nw-bg-surface) !important;
  border-right: 1px solid var(--nw-border) !important;
}

/* Header */
.mantine-AppShell-header, .mantine-Group-root > header,
header.mantine-Group-root, .mantine-Header-root {
  background: var(--nw-panel) !important;
  border-bottom: 1px solid var(--nw-border) !important;
  backdrop-filter: blur(8px);
}

/* ===== BUTTONS ===== */
.mantine-Button-root, button.mantine-UnstyledButton-root[class*="Button"],
.mantine-ActionIcon-root {
  font-family: "Kode Mono", monospace !important;
  background: var(--nw-input-bg) !important;
  color: var(--nw-text) !important;
  border: 1px solid var(--nw-border) !important;
  border-radius: 3px !important;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
}
.mantine-Button-root:hover, .mantine-ActionIcon-root:hover {
  background: var(--nw-hover-bg) !important;
  border-color: var(--nw-primary) !important;
  color: var(--nw-primary) !important;
  text-shadow: var(--nw-text-glow);
}
.mantine-Button-root[data-variant="filled"],
.mantine-Button-root.mantine-Button-filled {
  background: var(--nw-primary-dim) !important;
  border-color: var(--nw-primary) !important;
  color: #000 !important;
}
.mantine-Button-root[data-variant="filled"]:hover {
  background: var(--nw-primary) !important;
}
.mantine-Button-root[data-variant="light"] {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--nw-primary) !important;
}
.mantine-Button-root[data-variant="light"]:hover {
  background: var(--nw-hover-bg) !important;
}

/* ===== INPUTS & SELECTS ===== */
.mantine-TextInput-input, .mantine-Textarea-input,
.mantine-Select-input, .mantine-MultiSelect-input,
.mantine-PasswordInput-input, .mantine-NumberInput-input,
.mantine-DatePickerInput-input, .mantine-TimeInput-input,
input[type="text"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], textarea, select {
  font-family: "Kode Mono", monospace !important;
  background: var(--nw-input-bg) !important;
  color: var(--nw-text) !important;
  border: 1px solid var(--nw-border) !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  caret-color: var(--nw-primary) !important;
}
.mantine-TextInput-input:focus, .mantine-Textarea-input:focus,
.mantine-Select-input:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--nw-primary) !important;
  box-shadow: 0 0 6px var(--nw-primary-glow) !important;
  outline: none !important;
}
.mantine-TextInput-input::placeholder, textarea::placeholder {
  color: var(--nw-text-dim) !important;
}
.mantine-InputWrapper-label, .mantine-Select-label {
  color: var(--nw-text) !important;
  font-family: "Kode Mono", monospace !important;
  font-size: 11px !important;
  text-transform: uppercase;
}
.mantine-Select-dropdown, .mantine-MultiSelect-dropdown,
.mantine-Popover-dropdown {
  background: var(--nw-panel) !important;
  border: 1px solid var(--nw-border) !important;
  backdrop-filter: blur(12px);
}
.mantine-Select-option, .mantine-MultiSelect-option {
  color: var(--nw-text) !important;
  font-family: "Kode Mono", monospace !important;
}
.mantine-Select-option:hover, .mantine-MultiSelect-option:hover {
  background: var(--nw-hover-bg) !important;
}
.mantine-Select-option[data-selected="true"] {
  background: var(--nw-active-bg) !important;
  color: var(--nw-primary) !important;
}

/* ===== NAVIGATION LINKS ===== */
.navlink, .mantine-NavLink-root {
  font-family: "Kode Mono", monospace !important;
  color: var(--nw-text-dim) !important;
  border-radius: 3px !important;
  transition: all 0.15s ease;
  border: 1px solid transparent !important;
  background: transparent !important;
}
.navlink:hover, .mantine-NavLink-root:hover {
  background: var(--nw-hover-bg) !important;
  color: var(--nw-text) !important;
  border-color: var(--nw-border) !important;
}
.navlink.navlink-active, .mantine-NavLink-root[data-active="true"] {
  background: var(--nw-active-bg) !important;
  color: var(--nw-primary) !important;
  border-color: var(--nw-primary) !important;
  text-shadow: var(--nw-text-glow);
}
.navlink.navlink-active:hover {
  background: var(--nw-hover-bg) !important;
}
.navgroup-open:before {
  background: var(--nw-primary) !important;
}
.navlink .mantine-NavLink-label {
  font-family: "Kode Mono", monospace !important;
}

/* ===== TABLES ===== */
.divTable, table, .mantine-Table-root {
  background: transparent !important;
  font-family: "Kode Mono", monospace !important;
}
.tr, .mantine-Table-root tr {
  border-bottom: 1px solid var(--nw-border) !important;
}
.th, .mantine-Table-root th {
  font-family: "Kode Mono", monospace !important;
  color: var(--nw-primary) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px !important;
  border-bottom: 2px solid var(--nw-border) !important;
  background: var(--nw-bg-surface) !important;
}
.td, .mantine-Table-root td {
  font-family: "Kode Mono", monospace !important;
  color: var(--nw-text) !important;
  border-bottom: 1px solid var(--nw-border) !important;
  font-size: 12px !important;
}
.table-striped .tbody .tr-odd { background: var(--nw-input-bg) !important; }
.table-striped .tbody .tr-even { background: transparent !important; }
.table-striped .tbody .tr:hover, .mantine-Table-root tbody tr:hover {
  background: var(--nw-hover-bg) !important;
}
.no-streams-row, .stale-stream-row {
  background: rgba(255,68,100,0.15) !important;
  box-shadow: inset 0 0 0 1px var(--nw-danger) !important;
}

/* ===== CARDS & PANELS ===== */
.mantine-Card-root, .mantine-Paper-root,
.mantine-Modal-content, .mantine-Drawer-content {
  background: var(--nw-card-bg) !important;
  border: 1px solid var(--nw-border) !important;
  border-radius: 4px !important;
  color: var(--nw-text) !important;
}
.mantine-Modal-header, .mantine-Drawer-header {
  background: var(--nw-bg-surface) !important;
  border-bottom: 1px solid var(--nw-border) !important;
}
.mantine-Modal-title, .mantine-Drawer-title {
  color: var(--nw-primary) !important;
  font-family: "Kode Mono", monospace !important;
  font-size: 14px !important;
  text-transform: uppercase;
}
.mantine-Modal-overlay, .mantine-Drawer-overlay {
  background: rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(3px);
}
.mantine-Card-root .mantine-Text-root {
  color: var(--nw-text) !important;
}

/* ===== TABS ===== */
.mantine-Tabs-tab, .mantine-Tabs-list {
  font-family: "Kode Mono", monospace !important;
  border-bottom: 2px solid transparent !important;
}
.mantine-Tabs-tab {
  color: var(--nw-text-dim) !important;
  transition: all 0.15s ease;
  text-transform: uppercase;
  font-size: 12px;
}
.mantine-Tabs-tab:hover {
  color: var(--nw-text) !important;
  background: var(--nw-hover-bg) !important;
}
.mantine-Tabs-tab[data-active="true"] {
  color: var(--nw-primary) !important;
  border-bottom-color: var(--nw-primary) !important;
  text-shadow: var(--nw-text-glow);
}
.mantine-Tabs-list:before {
  border-color: var(--nw-border) !important;
}

/* ===== BADGES & TAGS ===== */
.mantine-Badge-root {
  font-family: "Kode Mono", monospace !important;
  background: var(--nw-active-bg) !important;
  color: var(--nw-primary) !important;
  border: 1px solid var(--nw-primary-dim) !important;
  text-transform: uppercase;
  font-size: 10px !important;
}
.mantine-Badge-root[data-variant="outline"] {
  background: transparent !important;
}

/* ===== TOOLTIPS & POPOVERS ===== */
.mantine-Tooltip-tooltip, .mantine-HoverCard-dropdown {
  background: var(--nw-panel) !important;
  border: 1px solid var(--nw-border) !important;
  color: var(--nw-text) !important;
  font-family: "Kode Mono", monospace !important;
  font-size: 11px;
  backdrop-filter: blur(12px);
}

/* ===== MENUS ===== */
.mantine-Menu-dropdown, .mantine-Menu-item {
  background: var(--nw-panel) !important;
  border: 1px solid var(--nw-border) !important;
  color: var(--nw-text) !important;
  font-family: "Kode Mono", monospace !important;
}
.mantine-Menu-item:hover {
  background: var(--nw-hover-bg) !important;
  color: var(--nw-primary) !important;
}
.mantine-Menu-divider {
  border-color: var(--nw-border) !important;
}

/* ===== CHECKBOXES & SWITCHES ===== */
.mantine-Checkbox-input:checked, .mantine-Switch-input:checked {
  background: var(--nw-primary) !important;
  border-color: var(--nw-primary) !important;
}
.mantine-Checkbox-input, .mantine-Switch-input {
  border-color: var(--nw-border) !important;
  background: var(--nw-input-bg) !important;
}
.mantine-Checkbox-label, .mantine-Switch-label {
  color: var(--nw-text) !important;
  font-family: "Kode Mono", monospace !important;
}

/* ===== LOADING & SKELETONS ===== */
.mantine-Loader-root { color: var(--nw-primary) !important; }
.mantine-Skeleton-root { background: var(--nw-bg-surface) !important; }
.mantine-Skeleton-root:after {
  background: linear-gradient(90deg, transparent, var(--nw-hover-bg), transparent) !important;
}

/* ===== PROGRESS BARS ===== */
.mantine-Progress-root { background: var(--nw-input-bg) !important; }
.mantine-Progress-bar { background: var(--nw-primary) !important; }

/* ===== ALERTS & NOTIFICATIONS ===== */
.mantine-Alert-root, .mantine-Notification-root {
  background: var(--nw-panel) !important;
  border: 1px solid var(--nw-border) !important;
  color: var(--nw-text) !important;
  font-family: "Kode Mono", monospace !important;
  backdrop-filter: blur(12px);
}
.mantine-Alert-message, .mantine-Notification-message {
  font-family: "Kode Mono", monospace !important;
}

/* ===== ACCORDION ===== */
.mantine-Accordion-item {
  border-color: var(--nw-border) !important;
  background: transparent !important;
}
.mantine-Accordion-control {
  font-family: "Kode Mono", monospace !important;
  color: var(--nw-text) !important;
}
.mantine-Accordion-control:hover {
  background: var(--nw-hover-bg) !important;
}
.mantine-Accordion-panel {
  color: var(--nw-text-dim) !important;
}

/* ===== PAGINATION ===== */
.mantine-Pagination-control {
  font-family: "Kode Mono", monospace !important;
  background: var(--nw-input-bg) !important;
  border-color: var(--nw-border) !important;
  color: var(--nw-text) !important;
}
.mantine-Pagination-control:hover {
  background: var(--nw-hover-bg) !important;
  border-color: var(--nw-primary) !important;
}
.mantine-Pagination-control[data-active="true"] {
  background: var(--nw-active-bg) !important;
  border-color: var(--nw-primary) !important;
  color: var(--nw-primary) !important;
}

/* ===== SEGMENTED CONTROL ===== */
.mantine-SegmentedControl-root {
  background: var(--nw-input-bg) !important;
  border: 1px solid var(--nw-border) !important;
  border-radius: 3px !important;
}
.mantine-SegmentedControl-label {
  font-family: "Kode Mono", monospace !important;
  color: var(--nw-text-dim) !important;
}
.mantine-SegmentedControl-label[data-active="true"] {
  color: var(--nw-highlight-text) !important;
}
.mantine-SegmentedControl-indicator {
  background: var(--nw-primary) !important;
}

/* ===== TITLES & HEADINGS ===== */
.mantine-Title-root, h1, h2, h3, h4 {
  font-family: "Kode Mono", monospace !important;
  color: var(--nw-primary) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.mantine-Text-root, p, span, div, label, a, li {
  font-family: "Kode Mono", monospace !important;
  color: var(--nw-text) !important;
}
a { color: var(--nw-primary) !important; }
a:hover { text-shadow: var(--nw-text-glow); }

/* ===== CODE BLOCKS & PRE ===== */
code, pre, .mantine-Code-root {
  font-family: "Kode Mono", monospace !important;
  background: var(--nw-input-bg) !important;
  color: var(--nw-primary) !important;
  border: 1px solid var(--nw-border);
  border-radius: 3px;
}

/* ===== DIVIDERS ===== */
.mantine-Divider-root { border-color: var(--nw-border) !important; }
hr { border-color: var(--nw-border) !important; }

/* ===== RING PROGRESS ===== */
.mantine-RingProgress-root svg circle:first-child { stroke: var(--nw-input-bg) !important; }
.mantine-RingProgress-root svg circle:last-child { stroke: var(--nw-primary) !important; }

/* ===== CHARTS / BLOCKS ===== */
.mantine-DonutChart-root path { fill: var(--nw-primary) !important; }

/* ===== GROUP & STACK ===== */
.mantine-Group-root, .mantine-Stack-root { color: var(--nw-text) !important; }

/* ===== THEME SWITCHER BAR ===== */
#nw-themebar {
  position: fixed;
  bottom: 10px;
  right: 12px;
  display: flex;
  gap: 8px;
  padding: 6px 12px;
  background: var(--nw-panel);
  border: 1px solid var(--nw-border);
  border-radius: 20px;
  z-index: 100000;
  backdrop-filter: blur(8px);
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
#nw-themebar:hover { opacity: 1; }
.nw-theme-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  opacity: 0.6;
}
.nw-theme-dot:hover, .nw-theme-dot.active { opacity: 1; border-color: #fff; transform: scale(1.2); }
.nw-dot-pink  { background: #ff66aa; }
.nw-dot-amber { background: #ffaa00; }
.nw-dot-green { background: #33ff00; }
.nw-dot-blue  { background: #00aaff; }
.nw-dot-red   { background: #ff0a0a; }

/* ===== LOGIN PAGE OVERRIDES ===== */
.mantine-TextInput-root input, .mantine-PasswordInput-root input {
  font-size: 14px !important;
  letter-spacing: 1px;
}