/*
 * Resin Dark Theme — "Midnight Signal"
 * Base: #151619 · Neutral dark, no blue tint
 * Design: layered surfaces with depth, not flat inversion
 */

:root {
  /* ── Surface system: 4-tier depth hierarchy ── */
  --bg: #151619;
  --bg-soft: #1a1b1f;
  --surface: rgba(26, 27, 31, 0.94);
  --surface-strong: #202127;
  --surface-sunken: rgba(255, 255, 255, 0.04);

  /* ── Text: high contrast primary, warm muted ── */
  --text: #e8ebf0;
  --text-muted: #8a93a6;

  /* ── Accent: electric blue with teal undertone ── */
  --primary: #5ba8f5;
  --primary-strong: #82bfff;
  --primary-soft: rgba(91, 168, 245, 0.13);

  /* ── Semantic: vivid but not neon ── */
  --success: #34d399;
  --danger: #f472b6;
  --warning: #fbbf24;

  /* ── Atmosphere ── */
  --border: rgba(140, 145, 160, 0.13);
  --shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.2);
  --radius: 18px;

  /* ── Glow (used sparingly for interactive feedback) ── */
  --glow-primary: 0 0 20px rgba(91, 168, 245, 0.12);
  --glow-success: 0 0 16px rgba(52, 211, 153, 0.1);
}

/* ── Global ── */
body {
  color: var(--text) !important;
  background:
    radial-gradient(ellipse 80% 60% at 10% 15%, rgba(91, 168, 245, 0.08), transparent),
    radial-gradient(ellipse 60% 50% at 90% 5%, rgba(244, 114, 182, 0.05), transparent),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(52, 211, 153, 0.04), transparent),
    #151619 !important;
}

/* ── Sidebar: deeper layer, subtle glass ── */
.sidebar {
  background:
    linear-gradient(180deg, rgba(21, 22, 25, 0.97), rgba(18, 19, 22, 0.99)) !important;
  border-right-color: var(--border) !important;
  backdrop-filter: blur(12px) !important;
}

.brand-logo {
  background: linear-gradient(135deg, #202127, #1f222b) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.brand-version { color: rgba(124, 132, 148, 0.7) !important; }
.brand-title { color: var(--text) !important; }

.nav-item { color: #aab3c4 !important; transition: all 0.2s ease !important; }
.nav-item:hover {
  background: rgba(91, 168, 245, 0.07) !important;
  border-color: rgba(91, 168, 245, 0.1) !important;
  color: #c8d0e0 !important;
}
.nav-item-active {
  background: rgba(91, 168, 245, 0.1) !important;
  border-color: rgba(91, 168, 245, 0.22) !important;
  color: var(--primary) !important;
  box-shadow: inset 0 0 0 1px rgba(91, 168, 245, 0.06), var(--glow-primary) !important;
}

/* ── Locale switcher ── */
.locale-switch {
  border-color: var(--border) !important;
  background: rgba(26, 27, 31, 0.8) !important;
}
.locale-switch-btn { color: var(--text-muted) !important; }
.locale-switch-btn:hover { color: var(--text) !important; }
.locale-switch-btn-active {
  color: var(--primary) !important;
  background: var(--primary-soft) !important;
}
.locale-switch-compact {
  border-color: var(--border) !important;
  background: rgba(26, 27, 31, 0.82) !important;
  color: var(--text-muted) !important;
}
.locale-switch-compact:hover {
  color: var(--text) !important;
  border-color: rgba(91, 168, 245, 0.2) !important;
  background: rgba(91, 168, 245, 0.06) !important;
}

/* ── Top bar ── */
.eyebrow { color: #8a93a6 !important; }
.page-title { color: var(--text) !important; }
.topbar-pill {
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.2) !important;
  background: rgba(52, 211, 153, 0.07) !important;
}

/* ── Buttons ── */
.btn-primary {
  background: linear-gradient(135deg, #4a9ae8, #3b7fd4) !important;
  box-shadow: 0 6px 20px rgba(74, 154, 232, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
.btn-primary:hover:enabled {
  box-shadow: 0 10px 28px rgba(74, 154, 232, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
.btn-secondary {
  background: rgba(26, 29, 36, 0.9) !important;
  border-color: var(--border) !important;
  color: #b8c0d0 !important;
}
.btn-secondary:hover:enabled,
.btn-ghost:hover:enabled {
  border-color: rgba(91, 168, 245, 0.22) !important;
  background: rgba(91, 168, 245, 0.08) !important;
  color: var(--primary) !important;
}
.btn-ghost {
  background: rgba(26, 29, 36, 0.6) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
.btn-danger {
  background: linear-gradient(135deg, #e8508a, #d43b6f) !important;
  box-shadow: 0 6px 20px rgba(232, 80, 138, 0.2) !important;
}

/* ── Badges: subtle glow tints ── */
.badge-neutral {
  color: #b8c0d0 !important;
  background: rgba(140, 145, 160, 0.1) !important;
}
.badge-success {
  color: #34d399 !important;
  background: rgba(52, 211, 153, 0.12) !important;
}
.badge-warning {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.1) !important;
}
.badge-danger {
  color: #f472b6 !important;
  background: rgba(244, 114, 182, 0.1) !important;
}
.badge-info {
  color: #5ba8f5 !important;
  background: rgba(91, 168, 245, 0.1) !important;
}
.badge-accent {
  color: #c084fc !important;
  background: rgba(192, 132, 252, 0.1) !important;
}
.badge-muted {
  color: #939cb0 !important;
  background: rgba(140, 145, 160, 0.07) !important;
}

/* ── Log badges ── */
.request-logs-proxy-badge-forward {
  color: #5ba8f5 !important;
  background: rgba(91, 168, 245, 0.1) !important;
}
.request-logs-proxy-badge-reverse {
  color: #c084fc !important;
  background: rgba(192, 132, 252, 0.1) !important;
}
.request-logs-proxy-badge-socks {
  color: #e8ebf0 !important;
  background: rgba(91, 168, 245, 0.2) !important;
}

/* ── Callouts ── */
.callout-success {
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.25) !important;
  background: rgba(52, 211, 153, 0.06) !important;
}
.callout-error {
  color: #f472b6 !important;
  border-color: rgba(244, 114, 182, 0.25) !important;
  background: rgba(244, 114, 182, 0.06) !important;
}
.callout-warning {
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
  background: rgba(251, 191, 36, 0.06) !important;
}

/* ── Cards: layered glass surfaces ── */
.card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}

.platform-directory-card,
.platform-cards-container {
  background:
    radial-gradient(ellipse 70% 50% at 8% 5%, rgba(91, 168, 245, 0.05), transparent),
    radial-gradient(ellipse 50% 40% at 92% 95%, rgba(52, 211, 153, 0.03), transparent),
    var(--surface) !important;
}

/* ── Platform list ── */
.platform-row {
  background: rgba(26, 27, 31, 0.7) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.platform-row:hover {
  border-color: rgba(91, 168, 245, 0.25) !important;
  box-shadow: var(--glow-primary) !important;
}
.platform-row-active {
  border-color: rgba(91, 168, 245, 0.35) !important;
  background: rgba(91, 168, 245, 0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(91, 168, 245, 0.08), var(--glow-primary) !important;
}
.platform-row-main p { color: var(--text) !important; }

/* ── Platform tiles ── */
.platform-tile {
  background: rgba(26, 27, 31, 0.8) !important;
  border-color: var(--border) !important;
}
.platform-tile:hover {
  border-color: rgba(91, 168, 245, 0.3) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), var(--glow-primary) !important;
}
.platform-tile-active {
  border-color: rgba(91, 168, 245, 0.4) !important;
  background: rgba(91, 168, 245, 0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(91, 168, 245, 0.1), var(--glow-primary) !important;
}
.platform-tile-head p { color: var(--text) !important; }

.platform-fact {
  border-color: rgba(140, 145, 160, 0.1) !important;
  background: rgba(21, 22, 25, 0.6) !important;
  color: #939cb0 !important;
}
.platform-fact strong { color: #82bfff !important; }

.platform-tile-foot {
  border-top-color: rgba(140, 145, 160, 0.08) !important;
}

/* ── Tabs ── */
.platform-detail-tabs,
.logs-payload-tabs {
  background: rgba(140, 145, 160, 0.05) !important;
}
.platform-detail-tab,
.payload-tab { color: #8a93a6 !important; }
.platform-detail-tab:hover:not(.platform-detail-tab-active),
.payload-tab:hover:not(.payload-tab-active) {
  color: #b8c0d0 !important;
  background: rgba(140, 145, 160, 0.06) !important;
}
.platform-detail-tab-active,
.payload-tab-active {
  color: #e8ebf0 !important;
  background: #202127 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* ── Forms ── */
.input, .select, .textarea {
  background: rgba(21, 22, 25, 0.6) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: rgba(91, 168, 245, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(91, 168, 245, 0.1) !important;
}
.input:disabled, .select:disabled, .textarea:disabled,
.input:read-only, .textarea:read-only {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--text-muted) !important;
}

.syscfg-section {
  border-color: var(--border) !important;
  background: rgba(26, 27, 31, 0.6) !important;
}
.syscfg-section h4 { color: var(--text) !important; }
.syscfg-preview {
  background: #151619 !important;
  border-color: var(--border) !important;
  color: #aab3c4 !important;
}

.empty-box {
  border-color: rgba(140, 145, 160, 0.14) !important;
  background: rgba(26, 27, 31, 0.4) !important;
  color: var(--text-muted) !important;
}

.field-label { color: #b8c0d0 !important; }
.field-error { color: #f472b6 !important; }

/* ── Tables: subtle row depth ── */
.nodes-table-wrap,
.logs-table-wrap,
.rules-table-wrap,
.geoip-table-wrap,
.data-table-wrap {
  background: rgba(26, 27, 31, 0.6) !important;
  border-color: var(--border) !important;
}

.nodes-table th,
.logs-table th,
.rules-table th,
.geoip-table th,
.data-table th {
  background: rgba(19, 20, 23, 0.95) !important;
  color: #939cb0 !important;
  backdrop-filter: blur(6px) !important;
}

.nodes-table th, .nodes-table td,
.logs-table th, .logs-table td,
.rules-table th, .rules-table td,
.geoip-table th, .geoip-table td,
.data-table th, .data-table td {
  border-bottom-color: rgba(140, 145, 160, 0.06) !important;
  color: var(--text) !important;
}

.nodes-table tbody tr:hover,
.logs-table tbody tr:hover,
.rules-table tbody tr:hover,
.geoip-table tbody tr:hover,
.data-table tbody tr:hover {
  background: rgba(91, 168, 245, 0.05) !important;
}

.data-table-row-selected,
.nodes-row-selected {
  background: rgba(91, 168, 245, 0.1) !important;
}

.nodes-cell-hash { color: #8a93a6 !important; }
.table-sort-btn > span { color: #8a93a6 !important; }
.subscriptions-name-cell { color: var(--text) !important; }

/* ── Charts: atmosphere ── */
.trend-svg,
.histogram-chart {
  background:
    linear-gradient(180deg, rgba(26, 27, 31, 0.8), rgba(19, 20, 23, 0.95)),
    repeating-linear-gradient(90deg, transparent, transparent 42px, rgba(140, 145, 160, 0.03) 42px, rgba(140, 145, 160, 0.03) 43px) !important;
  border-color: rgba(140, 145, 160, 0.08) !important;
}

.trend-footer { color: #8a93a6 !important; }

.trend-tooltip {
  border-color: rgba(140, 145, 160, 0.18) !important;
  background: rgba(21, 22, 25, 0.97) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}
.trend-tooltip-time { color: #8a93a6 !important; }
.trend-tooltip-row { color: #939cb0 !important; }
.trend-tooltip-row b { color: #e8ebf0 !important; }

.histogram-tooltip {
  border-color: rgba(140, 145, 160, 0.18) !important;
  background: rgba(21, 22, 25, 0.97) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
.histogram-tooltip-title { color: #8a93a6 !important; }
.histogram-tooltip-value { color: #e8ebf0 !important; }

/* ── Dashboard ── */
.dashboard-summary-inline { color: #8a93a6 !important; }
.dashboard-hist-title { color: #8a93a6 !important; }
.dashboard-legend { color: #8a93a6 !important; }
.dashboard-control > span { color: #8a93a6 !important; }
.dashboard-kpi-value { color: var(--text) !important; }
.dashboard-kpi-card { color: var(--text) !important; }

.dashboard-kpi-icon.waves {
  color: #5ba8f5 !important;
  border-color: rgba(91, 168, 245, 0.2) !important;
  background: rgba(91, 168, 245, 0.08) !important;
}
.dashboard-kpi-icon.gauge {
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.2) !important;
  background: rgba(251, 191, 36, 0.08) !important;
}
.dashboard-kpi-icon.shield {
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.2) !important;
  background: rgba(52, 211, 153, 0.08) !important;
}
.dashboard-kpi-icon.lease {
  color: #c084fc !important;
  border-color: rgba(192, 132, 252, 0.2) !important;
  background: rgba(192, 132, 252, 0.08) !important;
}

.dashboard-snapshot-list > div {
  border-color: var(--border) !important;
  background: rgba(26, 27, 31, 0.6) !important;
}
.dashboard-snapshot-list p { color: var(--text) !important; }

/* ── Stats / GeoIP / Tags ── */
.stats-grid > div {
  border-color: var(--border) !important;
  background: rgba(26, 27, 31, 0.6) !important;
}
.stats-grid p { color: var(--text) !important; }

.geoip-kv {
  border-color: var(--border) !important;
  background: rgba(26, 27, 31, 0.65) !important;
}
.geoip-kv p { color: var(--text) !important; }
.geoip-result {
  border-color: var(--border) !important;
  background: rgba(26, 27, 31, 0.65) !important;
}
.geoip-result p { color: var(--text) !important; }

.tag-item {
  border-color: var(--border) !important;
  background: rgba(26, 27, 31, 0.6) !important;
}
.tag-item p { color: var(--text) !important; }
.tag-item code { color: #8a93a6 !important; }

/* ── Subscriptions ── */
.subscription-switch-item {
  border-color: var(--border) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}
.subscription-switch-label { color: #b8c0d0 !important; }
.subscription-inline-filter > span { color: #b8c0d0 !important; }

/* ── Modal / Drawer ── */
.modal-overlay {
  background: rgba(5, 6, 8, 0.6) !important;
  backdrop-filter: blur(4px) !important;
}
.modal-card {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.drawer-panel {
  border-left-color: var(--border) !important;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3) !important;
}
.drawer-header h3 { color: var(--text) !important; }

.platform-drawer-section {
  border-color: var(--border) !important;
  background: rgba(26, 27, 31, 0.6) !important;
}
.platform-drawer-section-head h4 { color: var(--text) !important; }

/* ── Platform monitor ── */
.platform-monitor-section {
  border-color: rgba(140, 145, 160, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(26, 27, 31, 0.8), rgba(19, 20, 23, 0.95)),
    radial-gradient(ellipse 60% 40% at 5% 10%, rgba(91, 168, 245, 0.05), transparent) !important;
}

.platform-monitor-kpi-value { color: #e8ebf0 !important; }
.platform-monitor-kpi-sub { color: #8a93a6 !important; }

.platform-monitor-snapshot-list > div {
  border-color: rgba(140, 145, 160, 0.1) !important;
  background: rgba(26, 27, 31, 0.7) !important;
}
.platform-monitor-snapshot-list p { color: #e8ebf0 !important; }

.platform-op-item {
  border-color: rgba(140, 145, 160, 0.1) !important;
  background: rgba(26, 27, 31, 0.7) !important;
}
.platform-op-copy h5 { color: var(--text) !important; }

/* ── Detail blocks ── */
.resolve-result {
  border-color: var(--border) !important;
  background: rgba(26, 27, 31, 0.6) !important;
}

.logs-detail-block {
  border-color: var(--border) !important;
  background: rgba(26, 27, 31, 0.6) !important;
}
.logs-detail-block h4 { color: var(--text) !important; }
.logs-detail-block code { color: #8a93a6 !important; }

.logs-payload-box {
  background: #151619 !important;
  border-color: var(--border) !important;
  color: #aab3c4 !important;
}

/* ── Toasts: frosted glass ── */
.toast-item {
  backdrop-filter: blur(12px) !important;
}
.toast-success {
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.25) !important;
  background: rgba(14, 26, 22, 0.95) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), var(--glow-success) !important;
}
.toast-error {
  color: #f472b6 !important;
  border-color: rgba(244, 114, 182, 0.25) !important;
  background: rgba(28, 14, 22, 0.95) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
}

/* ── Login ── */
.login-card {
  background: var(--surface) !important;
  box-shadow: var(--shadow) !important;
}
.login-title { color: var(--text) !important; }

/* ── Catch-all: hardcoded dark text from original light theme ── */
.page-title,
.module-header h2,
.list-card-header h3,
.detail-header h3,
.modal-header h3,
.platform-detail-header-main h3,
.dashboard-panel-header h3,
.nodes-detail-card h3,
.logs-detail-card h3 {
  color: var(--text) !important;
}

.platform-detail-header-main p,
.platform-detail-header-meta,
.nodes-pagination-meta,
.nodes-page-size > span,
.nodes-page-jump > span,
.subscriptions-count,
.platform-op-hint,
.sidebar-hint,
.sidebar-warning-copy span,
.security-banner-copy span,
.logs-cell-stack > small,
.module-description,
.list-card-header p,
.detail-header p,
.login-description,
.placeholder-card p {
  color: var(--text-muted) !important;
}

.sidebar-warning-copy strong,
.security-banner-copy strong {
  color: var(--text) !important;
}

/* ── Scrollbar ── */
* {
  scrollbar-color: rgba(140, 145, 160, 0.15) transparent;
}
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(140, 145, 160, 0.18);
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(140, 145, 160, 0.3);
}