/* Purify admin panel theme for Remnawave (panel.purify.surf) v4 */

:root,
[data-mantine-color-scheme="dark"] {
  --purify-accent: #ff6a00;
  --purify-accent-hover: #e55f00;
  --purify-accent-soft: rgba(255, 106, 0, 0.14);
  --purify-accent-glow: rgba(255, 106, 0, 0.35);
  --purify-bg: #0a0a0a;
  --purify-bg-elevated: #111111;
  --purify-bg-card: #141414;
  --purify-border: rgba(255, 106, 0, 0.22);
  --purify-text: #f2f2f2;
  --purify-text-muted: #9ca3af;
  --purify-radius: 12px;

  --mantine-primary-color-filled: var(--purify-accent);
  --mantine-primary-color-filled-hover: var(--purify-accent-hover);
  --mantine-primary-color-light: var(--purify-accent-soft);
  --mantine-primary-color-light-hover: rgba(255, 106, 0, 0.2);
  --mantine-primary-color-light-color: #ff8a33;
  --mantine-primary-color-dark: #cc5500;
  --mantine-primary-color-dark-color: var(--purify-accent);
  --mantine-primary-color-contrast: #1a0a00;

  --mantine-radius-default: var(--purify-radius);

  --mantine-color-body: var(--purify-bg);
  --mantine-color-text: var(--purify-text);
  --mantine-color-bright: var(--purify-text);
  --mantine-color-dimmed: var(--purify-text-muted);
  --mantine-color-anchor: var(--purify-accent);

  --mantine-color-dark-0: #f2f2f2;
  --mantine-color-dark-1: #e5e5e5;
  --mantine-color-dark-2: #cccccc;
  --mantine-color-dark-3: #b3b3b3;
  --mantine-color-dark-4: #666666;
  --mantine-color-dark-5: #333333;
  --mantine-color-dark-6: #1a1a1a;
  --mantine-color-dark-7: var(--purify-bg-card);
  --mantine-color-dark-8: var(--purify-bg-elevated);
  --mantine-color-dark-9: var(--purify-bg);

  /* Remnawave primary = blue → Purify orange */
  --mantine-color-blue-0: #fff4eb;
  --mantine-color-blue-1: #ffe0cc;
  --mantine-color-blue-2: #ffc299;
  --mantine-color-blue-3: rgba(255, 106, 0, 0.35);
  --mantine-color-blue-4: rgba(255, 106, 0, 0.45);
  --mantine-color-blue-5: rgba(255, 106, 0, 0.55);
  --mantine-color-blue-6: var(--purify-accent);
  --mantine-color-blue-7: var(--purify-accent-hover);
  --mantine-color-blue-8: #cc5500;
  --mantine-color-blue-9: #993f00;
  --mantine-color-blue-filled: var(--purify-accent);
  --mantine-color-blue-filled-hover: var(--purify-accent-hover);
  --mantine-color-blue-light: var(--purify-accent-soft);
  --mantine-color-blue-light-hover: rgba(255, 106, 0, 0.2);
  --mantine-color-blue-light-color: #ff8a33;

  /* Teal/cyan → Purify orange */
  --mantine-color-cyan-0: #fff4eb;
  --mantine-color-cyan-1: #ffe0cc;
  --mantine-color-cyan-2: #ffc299;
  --mantine-color-cyan-3: #ffa366;
  --mantine-color-cyan-4: #ff8533;
  --mantine-color-cyan-5: #ff6a00;
  --mantine-color-cyan-6: var(--purify-accent);
  --mantine-color-cyan-7: var(--purify-accent-hover);
  --mantine-color-cyan-8: #cc5500;
  --mantine-color-cyan-9: #993f00;
  --mantine-color-cyan-filled: var(--purify-accent);
  --mantine-color-cyan-filled-hover: var(--purify-accent-hover);
  --mantine-color-cyan-light: var(--purify-accent-soft);
  --mantine-color-cyan-light-hover: rgba(255, 106, 0, 0.2);
  --mantine-color-cyan-light-color: #ff8a33;
  --mantine-color-cyan-outline: var(--purify-accent);
  --mantine-color-cyan-outline-hover: rgba(255, 106, 0, 0.08);

  --mantine-color-teal-0: #fff4eb;
  --mantine-color-teal-1: #ffe0cc;
  --mantine-color-teal-2: #ffc299;
  --mantine-color-teal-3: #ffa366;
  --mantine-color-teal-4: #ff8533;
  --mantine-color-teal-5: var(--purify-accent);
  --mantine-color-teal-6: var(--purify-accent);
  --mantine-color-teal-7: var(--purify-accent-hover);
  --mantine-color-teal-8: #cc5500;
  --mantine-color-teal-9: #993f00;
  --mantine-color-teal-filled: var(--purify-accent);
  --mantine-color-teal-filled-hover: var(--purify-accent-hover);
  --mantine-color-teal-light: var(--purify-accent-soft);
  --mantine-color-teal-light-hover: rgba(255, 106, 0, 0.2);
  --mantine-color-teal-light-color: #ff8a33;

  --mantine-color-green-filled: var(--purify-accent);
  --mantine-color-green-light: var(--purify-accent-soft);
  --mantine-color-green-light-color: #ff8a33;

  --ch-background: var(--purify-bg);
  --mantine-color-gray-2: rgba(255, 106, 0, 0.12);
  --mantine-color-gray-3: rgba(255, 106, 0, 0.18);
  --mantine-color-gray-4: rgba(255, 106, 0, 0.24);
}

html {
  color-scheme: dark;
}

html,
body,
#root {
  background-color: var(--purify-bg) !important;
  color: var(--purify-text) !important;
}

body {
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -15%, rgba(255, 106, 0, 0.12), transparent 55%),
    radial-gradient(ellipse 50% 35% at 100% 10%, rgba(255, 106, 0, 0.07), transparent 50%),
    radial-gradient(ellipse 40% 30% at 0% 80%, rgba(255, 106, 0, 0.05), transparent 45%),
    linear-gradient(180deg, #0a0a0a 0%, #0f0a08 100%) !important;
  background-attachment: fixed;
}

::selection {
  background: rgba(255, 106, 0, 0.35);
  color: #fff;
}

/* ── Remnawave waveform logo (remm) — hide everywhere ── */
svg[viewBox="0 0 16 16"]:has(path[d*="M8 1a.75"]) {
  display: none !important;
}

.mantine-AppShell-navbar img[alt="logo"] {
  border-radius: 10px;
  filter: drop-shadow(0 0 12px var(--purify-accent-glow));
  object-fit: contain;
}

/* Brand title */
[class*="logoTitle"] {
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

[class*="logoTitle"] span {
  color: var(--purify-text) !important;
}

/* ── App shell ── */
.mantine-AppShell-navbar,
.mantine-AppShell-main,
.mantine-AppShell-header {
  background-color: transparent !important;
}

.mantine-AppShell-navbar {
  background: rgba(10, 10, 10, 0.94) !important;
  border-right: 1px solid var(--purify-border) !important;
  backdrop-filter: blur(18px);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
}

.mantine-AppShell-header {
  background: rgba(10, 10, 10, 0.9) !important;
  border-bottom: 1px solid rgba(255, 106, 0, 0.12) !important;
  backdrop-filter: blur(18px);
}

.mantine-AppShell-main {
  background: transparent !important;
}

.mantine-AppShell-navbar .mantine-Text-root[data-size="xs"] {
  color: var(--purify-text-muted) !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Node cards (servers list) ── */
[class*="_nodeRow_"] {
  background: linear-gradient(135deg, rgba(20, 20, 20, 0.98) 0%, rgba(10, 10, 10, 0.99) 100%) !important;
  border: 1px solid rgba(255, 106, 0, 0.16) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
  border-radius: var(--purify-radius) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

[class*="_nodeRow_"]:hover {
  border-color: rgba(255, 106, 0, 0.38) !important;
  box-shadow: 0 4px 24px rgba(255, 106, 0, 0.08), 0 2px 16px rgba(0, 0, 0, 0.4) !important;
}

[class*="_nodeRowDragging_"],
[class*="_nodeRow_"][data-dnd-overlay="true"] {
  border-color: rgba(255, 106, 0, 0.5) !important;
  box-shadow: 0 8px 32px rgba(255, 106, 0, 0.12) !important;
}

[class*="_nodeRow_"] .mantine-ThemeIcon-root {
  background: var(--purify-accent-soft) !important;
  color: var(--purify-accent) !important;
  border: 1px solid rgba(255, 106, 0, 0.28) !important;
}

[class*="_nodeRow_"] .mantine-ThemeIcon-root svg {
  color: var(--purify-accent) !important;
}

[class*="_nodeRow_"] .mantine-Badge-root[data-color="teal"],
[class*="_nodeRow_"] .mantine-Badge-root[data-color="gray"] {
  background: rgba(255, 106, 0, 0.06) !important;
  border-color: rgba(255, 106, 0, 0.28) !important;
  color: var(--purify-accent) !important;
}

[class*="_nodeRow_"] .mantine-Text-root[c="teal"],
[class*="_nodeRow_"] [class*="mantine-Text-root"][style*="teal"] {
  color: var(--purify-accent) !important;
}

[class*="_nodeName_"] {
  color: var(--purify-text) !important;
}

[class*="_addressText_"] {
  color: var(--purify-text-muted) !important;
}

[class*="_addressText_"]:hover {
  color: var(--purify-accent) !important;
}

[class*="_icon_"] {
  color: var(--purify-accent) !important;
  opacity: 0.75;
}

[class*="_dragHandle_"] {
  color: var(--purify-text-muted) !important;
}

[class*="_dragHandle_"]:hover,
[class*="_dragHandleActive_"] {
  color: var(--purify-accent) !important;
}

/* ── Cards & papers ── */
.mantine-Paper-root,
.mantine-Card-root {
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.96), rgba(14, 14, 14, 0.98)) !important;
  border: 1px solid rgba(255, 106, 0, 0.12) !important;
  border-radius: var(--purify-radius) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
}

.mantine-Paper-root:hover,
.mantine-Card-root:hover {
  border-color: rgba(255, 106, 0, 0.22) !important;
}

.mantine-SimpleGrid-root .mantine-Paper-root,
.mantine-Grid-root .mantine-Paper-root {
  background: linear-gradient(145deg, rgba(18, 18, 18, 0.98), rgba(12, 12, 12, 0.99)) !important;
}

/* Remnawave custom cards with hardcoded teal */
[class*="_updateCard_"],
[class*="_statCard_"],
[class*="_metricCard_"] {
  background: rgba(20, 20, 20, 0.95) !important;
  border-color: rgba(255, 106, 0, 0.15) !important;
}

/* ── Navigation ── */
.mantine-NavLink-root {
  border-radius: 10px !important;
  margin: 2px 8px !important;
  transition: background 0.15s ease, color 0.15s ease;
}

.mantine-NavLink-root[data-active],
.mantine-NavLink-root[data-active="true"],
.mantine-NavLink-root[aria-current="page"] {
  background: var(--purify-accent-soft) !important;
  color: var(--purify-accent) !important;
  border-left: 3px solid var(--purify-accent) !important;
  box-shadow: inset 0 0 20px rgba(255, 106, 0, 0.06);
}

.mantine-NavLink-root:hover {
  background: rgba(255, 106, 0, 0.08) !important;
}

.mantine-NavLink-section[data-position="left"] .mantine-ThemeIcon-root {
  color: var(--purify-accent) !important;
}

/* ── Buttons ── */
.mantine-Button-root[data-variant="filled"]:not([data-color="red"]):not([data-color="gray"]) {
  background: linear-gradient(135deg, #ff6a00 0%, #e55f00 100%) !important;
  color: #1a0a00 !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px var(--purify-accent-glow);
  font-weight: 600;
}

.mantine-Button-root[data-variant="filled"]:not([data-color="red"]):not([data-color="gray"]):hover {
  background: linear-gradient(135deg, #ff7a1a 0%, #ff6a00 100%) !important;
}

.mantine-Button-root[data-variant="light"],
.mantine-Button-root[data-variant="default"] {
  background: var(--purify-accent-soft) !important;
  color: var(--purify-accent) !important;
  border: 1px solid rgba(255, 106, 0, 0.2) !important;
}

.mantine-ActionIcon-root[data-variant="light"] {
  background: var(--purify-accent-soft) !important;
  color: var(--purify-accent) !important;
}

/* ── Badges ── */
.mantine-Badge-root[data-variant="light"]:not([data-color="red"]):not([data-color="yellow"]):not([data-color="gray"]) {
  background: var(--purify-accent-soft) !important;
  color: #ff8a33 !important;
  border: 1px solid rgba(255, 106, 0, 0.25) !important;
  font-weight: 600;
}

.mantine-Badge-root[data-variant="outline"][data-color="teal"],
.mantine-Badge-root[data-color="teal"] {
  background: rgba(255, 106, 0, 0.06) !important;
  border-color: rgba(255, 106, 0, 0.3) !important;
  color: var(--purify-accent) !important;
}

.mantine-Badge-root[data-variant="filled"]:not([data-color="red"]):not([data-color="yellow"]):not([data-color="gray"]) {
  background: var(--purify-accent) !important;
  color: #1a0a00 !important;
}

/* ── Progress & rings ── */
.mantine-Progress-section {
  background: linear-gradient(90deg, #ff6a00, #ff8a33) !important;
}

.mantine-Progress-root {
  background: rgba(255, 106, 0, 0.12) !important;
}

.mantine-RingProgress-curve {
  stroke: var(--purify-accent) !important;
}

/* ── Theme icons ── */
.mantine-ThemeIcon-root[data-variant="light"]:not([data-color="red"]):not([data-color="yellow"]):not([data-color="gray"]) {
  background: var(--purify-accent-soft) !important;
  color: var(--purify-accent) !important;
}

.mantine-ThemeIcon-root[data-variant="filled"]:not([data-color="red"]):not([data-color="yellow"]):not([data-color="gray"]) {
  background: var(--purify-accent) !important;
  color: #1a0a00 !important;
}

/* ── Inputs ── */
.mantine-Input-input,
.mantine-TextInput-input,
.mantine-Select-input,
.mantine-Textarea-input,
.mantine-NumberInput-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 106, 0, 0.15) !important;
  border-radius: 10px !important;
}

.mantine-Input-input:focus,
.mantine-TextInput-input:focus,
.mantine-Select-input:focus,
.mantine-Textarea-input:focus {
  border-color: var(--purify-accent) !important;
  box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.35) !important;
}

.mantine-InputWrapper-label,
.mantine-TextInput-label {
  color: var(--purify-text-muted) !important;
  font-weight: 500;
}

/* ── Tables ── */
.mantine-Table-table thead {
  background: rgba(255, 106, 0, 0.06) !important;
}

.mantine-Table-table thead th {
  color: var(--purify-text-muted) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.mantine-Table-table tbody tr:hover {
  background: rgba(255, 106, 0, 0.05) !important;
}

[class*="MRT_TopToolbar"],
[class*="TopToolbar"] {
  background: var(--purify-bg-elevated) !important;
  border-bottom: 1px solid rgba(255, 106, 0, 0.1) !important;
}

/* ── Tabs ── */
.mantine-Tabs-tab[data-active] {
  border-color: var(--purify-accent) !important;
  color: var(--purify-accent) !important;
}

.mantine-Tabs-tab:hover {
  background: rgba(255, 106, 0, 0.06) !important;
}

.mantine-Tabs-list {
  border-color: rgba(255, 106, 0, 0.12) !important;
}

/* ── Modals & drawers ── */
.mantine-Modal-content,
.mantine-Drawer-content {
  background: linear-gradient(180deg, #141414, #0f0f0f) !important;
  border: 1px solid rgba(255, 106, 0, 0.15) !important;
}

.mantine-Modal-header,
.mantine-Drawer-header {
  border-bottom: 1px solid rgba(255, 106, 0, 0.1) !important;
}

/* ── Dropdowns & menus ── */
.mantine-Menu-dropdown,
.mantine-Popover-dropdown {
  background: #141414 !important;
  border: 1px solid rgba(255, 106, 0, 0.15) !important;
  backdrop-filter: blur(12px);
}

.mantine-Menu-item:hover,
.mantine-Select-option:hover,
.mantine-Select-option[data-combobox-selected] {
  background: rgba(255, 106, 0, 0.1) !important;
}

/* ── Switches & checkboxes ── */
.mantine-Switch-track[data-checked] {
  background: var(--purify-accent) !important;
  border-color: var(--purify-accent) !important;
}

.mantine-Checkbox-input:checked {
  background: var(--purify-accent) !important;
  border-color: var(--purify-accent) !important;
}

/* ── Pagination ── */
.mantine-Pagination-control[data-active] {
  background: var(--purify-accent) !important;
  color: #1a0a00 !important;
  border-color: var(--purify-accent) !important;
}

/* ── Links & teal text ── */
a {
  color: var(--purify-accent);
}

a:hover {
  color: #ff8a33;
}

.mantine-Text-root[c="teal"],
.mantine-Text-root[c="cyan"],
[style*="color: var(--mantine-color-teal"],
[style*="color:var(--mantine-color-teal"] {
  color: var(--purify-accent) !important;
}

/* ── Charts ── */
.recharts-cartesian-grid line,
.recharts-cartesian-grid path {
  stroke: rgba(255, 106, 0, 0.12) !important;
}

.recharts-line-curve,
.recharts-area-curve {
  stroke: var(--purify-accent) !important;
}

.recharts-area-area {
  fill: rgba(255, 106, 0, 0.15) !important;
}

/* ── Login page ── */
[class*="login"] .mantine-Paper-root,
[class*="Login"] .mantine-Paper-root {
  background: rgba(14, 14, 14, 0.95) !important;
  border: 1px solid rgba(255, 106, 0, 0.2) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 106, 0, 0.08) !important;
}

/* ── Scrollbar (override Remnawave teal gradient) ── */
* {
  scrollbar-color: rgba(255, 106, 0, 0.35) rgba(255, 255, 255, 0.06);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff6a00, #ff8a33) !important;
  border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff7a1a, #ff6a00) !important;
}

*::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

/* ── Tooltips ── */
.mantine-Tooltip-tooltip {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 106, 0, 0.2) !important;
  color: var(--purify-text) !important;
}

/* ── Notifications ── */
.mantine-Notification-root {
  background: #141414 !important;
  border: 1px solid rgba(255, 106, 0, 0.15) !important;
}

.mantine-Divider-root {
  border-color: rgba(255, 106, 0, 0.1) !important;
}

.mantine-Skeleton-root::after {
  background: linear-gradient(90deg, transparent, rgba(255, 106, 0, 0.08), transparent) !important;
}

/* ── Spotlight / command palette ── */
.mantine-Spotlight-action:hover,
.mantine-Spotlight-action[data-selected] {
  background: rgba(255, 106, 0, 0.1) !important;
}

/* ── SegmentedControl ── */
.mantine-SegmentedControl-indicator {
  background: var(--purify-accent) !important;
}

.mantine-SegmentedControl-label[data-active] {
  color: #1a0a00 !important;
}

/* ── Anchor / dimmed text readability ── */
.mantine-Text-root[c="dimmed"] {
  color: var(--purify-text-muted) !important;
}