/* ============================================================
   MultiRoller — Dark theme overlay
   Подключать ПОСЛЕ оригинального styles.css.
   Все правила работают только при data-theme="dark".
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root[data-theme="dark"] {
  /* surfaces */
  --bg:         oklch(0.155 0.012 250);
  --sidebar:    oklch(0.185 0.014 250);
  --panel:      oklch(0.205 0.015 250);
  --soft:       oklch(0.235 0.016 250);
  --line:       oklch(0.28  0.015 250);

  /* text */
  --text:       oklch(0.965 0.005 250);
  --muted:      oklch(0.60  0.014 250);

  /* accent — циан-голубой */
  --accent-h:   230;
  --blue:       oklch(0.74 0.16 var(--accent-h));
  --blue-soft:  oklch(0.32 0.08 var(--accent-h) / .35);

  /* status */
  --green:      oklch(0.78 0.16 155);
  --green-soft: oklch(0.40 0.10 155 / .25);
  --red:        oklch(0.72 0.20 25);
  --orange:     oklch(0.80 0.16 75);
  --new:        oklch(0.82 0.15 80);

  --shadow:        0 1px 0 0 oklch(1 0 0 / .04) inset, 0 24px 60px -28px oklch(0 0 0 / .8);
  --shadow-strong: 0 30px 80px -20px oklch(0 0 0 / .85), 0 1px 0 0 oklch(1 0 0 / .06) inset;
}

/* шрифты + фон только в dark */
:root[data-theme="dark"] body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(900px 600px at 8% -10%, oklch(0.74 0.16 var(--accent-h) / .18) 0%, transparent 55%),
    radial-gradient(700px 500px at 105% 0%, oklch(0.45 0.18 280 / .14) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* моноширинный для IP, времени, ID */
:root[data-theme="dark"] .strip-item strong,
:root[data-theme="dark"] #clock,
:root[data-theme="dark"] .event-time,
:root[data-theme="dark"] .found-card strong,
:root[data-theme="dark"] td.id-cell,
:root[data-theme="dark"] .machine-card strong,
:root[data-theme="dark"] .log-text,
:root[data-theme="dark"] .events-table .event-ts {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* ── sidebar ── */
:root[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, oklch(0.20 0.018 250) 0%, oklch(0.16 0.012 250) 100%);
  border-right-color: oklch(0.235 0.014 250);
}
:root[data-theme="dark"] .brand-mark {
  border-radius: 10px;
  background: radial-gradient(120% 120% at 30% 20%, oklch(0.82 0.18 var(--accent-h)) 0%, var(--blue) 55%, oklch(0.58 0.16 var(--accent-h)) 100%);
  box-shadow: 0 0 0 1px oklch(1 0 0 / .12) inset, 0 8px 24px -6px oklch(0.74 0.16 var(--accent-h) / .35);
}
:root[data-theme="dark"] .nav-title {
  letter-spacing: 0.14em;
  color: oklch(0.46 0.012 250);
  font-size: 10.5px;
  font-weight: 600;
}
:root[data-theme="dark"] .service-button:hover,
:root[data-theme="dark"] .nav-item:hover {
  background: oklch(1 0 0 / .04);
  color: var(--text);
}
:root[data-theme="dark"] .nav-item.active {
  background: linear-gradient(90deg, var(--blue-soft) 0%, transparent 100%);
  color: var(--text);
  position: relative;
}
:root[data-theme="dark"] .nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px;
  background: var(--blue);
  box-shadow: 0 0 8px oklch(0.74 0.16 var(--accent-h) / .5);
}
:root[data-theme="dark"] .nav-item.active span:first-child { color: var(--blue); }
:root[data-theme="dark"] .nav-item.active span,
:root[data-theme="dark"] .nav-item.active { color: var(--text); }

:root[data-theme="dark"] .admin-card {
  background: oklch(1 0 0 / .025);
  border: 1px solid oklch(0.235 0.014 250);
  border-radius: 10px;
  padding: 10px;
}
:root[data-theme="dark"] .avatar {
  background: radial-gradient(at 30% 30%, oklch(0.55 0.14 var(--accent-h)), oklch(0.35 0.10 var(--accent-h)));
  box-shadow: 0 0 0 1px oklch(1 0 0 / .1) inset;
}

/* ── topbar / metrics ── */
:root[data-theme="dark"] .top-title p {
  letter-spacing: 0.14em;
  color: oklch(0.46 0.012 250);
  font-weight: 600;
}
:root[data-theme="dark"] .topbar h2 { letter-spacing: -0.02em; }

:root[data-theme="dark"] .telegram-widget,
:root[data-theme="dark"] .metric-strip,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .quick-card {
  background: linear-gradient(180deg, oklch(0.21 0.016 250 / .9), oklch(0.18 0.014 250 / .9));
  border-color: oklch(0.235 0.014 250);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
}
:root[data-theme="dark"] .quick-card { overflow: hidden; }
:root[data-theme="dark"] .strip-item strong { letter-spacing: -0.01em; }
:root[data-theme="dark"] .strip-item b {
  color: var(--green);
  text-shadow: 0 0 12px oklch(0.78 0.16 155 / .35);
}

/* ── quick cards ── */
:root[data-theme="dark"] .quick-card > span {
  background: oklch(1 0 0 / .04);
  color: var(--blue);
  border: 1px solid oklch(0.235 0.014 250);
  border-radius: 9px;
}
:root[data-theme="dark"] .quick-run {
  background:
    radial-gradient(120% 140% at 0% 0%, var(--blue-soft) 0%, transparent 60%),
    linear-gradient(180deg, oklch(0.23 0.024 var(--accent-h) / .85), oklch(0.18 0.018 250 / .9));
  border-color: oklch(0.4 0.10 var(--accent-h) / .45);
}
:root[data-theme="dark"] .quick-run > span {
  background: oklch(0.32 0.08 var(--accent-h) / .55);
  color: oklch(0.85 0.18 var(--accent-h));
  border-color: oklch(0.5 0.14 var(--accent-h) / .4);
}
:root[data-theme="dark"] .quick-card:hover {
  border-color: oklch(0.5 0.14 var(--accent-h) / .55);
  transform: translateY(-1px);
}

/* ── panels ── */
:root[data-theme="dark"] .panel-head {
  border-bottom-color: oklch(0.235 0.014 250);
}
:root[data-theme="dark"] .head-title span {
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid oklch(0.4 0.10 155 / .35);
}

/* ── inputs & buttons ── */
:root[data-theme="dark"] select,
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea {
  background: oklch(0.18 0.012 250);
  border-color: oklch(0.28 0.015 250);
}
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus {
  border-color: oklch(0.5 0.14 var(--accent-h) / .55);
  box-shadow: 0 0 0 3px oklch(0.32 0.08 var(--accent-h) / .35);
}

:root[data-theme="dark"] .primary {
  background: linear-gradient(180deg, oklch(0.78 0.15 var(--accent-h)), oklch(0.62 0.16 var(--accent-h)));
  border-color: oklch(0.85 0.18 var(--accent-h));
  color: oklch(0.12 0.01 250);
  box-shadow: 0 0 0 1px oklch(1 0 0 / .1) inset, 0 8px 24px -8px oklch(0.74 0.16 var(--accent-h) / .35);
  font-weight: 700;
}
:root[data-theme="dark"] .primary:hover {
  background: linear-gradient(180deg, oklch(0.82 0.16 var(--accent-h)), oklch(0.66 0.17 var(--accent-h)));
}
:root[data-theme="dark"] .secondary,
:root[data-theme="dark"] .icon-button {
  background: oklch(0.205 0.015 250);
  border-color: oklch(0.28 0.015 250);
  color: var(--text);
}
:root[data-theme="dark"] .secondary:hover,
:root[data-theme="dark"] .icon-button:hover {
  background: oklch(0.24 0.016 250);
  border-color: oklch(0.34 0.016 250);
}

/* ── table ── */
:root[data-theme="dark"] th {
  color: oklch(0.46 0.012 250);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  background: oklch(0.18 0.014 250);
}
:root[data-theme="dark"] th, :root[data-theme="dark"] td {
  border-bottom-color: oklch(0.235 0.014 250);
}
:root[data-theme="dark"] tbody tr:hover td { background: oklch(1 0 0 / .025); }

/* статус → таблетки */
:root[data-theme="dark"] .status-cell {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid transparent;
}
:root[data-theme="dark"] .status-cell .status-dot { width: 6px; height: 6px; }
:root[data-theme="dark"] .status-running {
  background: var(--green-soft); color: var(--green); border-color: oklch(0.4 0.10 155 / .35);
}
:root[data-theme="dark"] .status-running .status-dot {
  background: var(--green);
  box-shadow: 0 0 6px oklch(0.78 0.16 155 / .55);
  animation: mr-pulse 1.6s ease-out infinite;
}
:root[data-theme="dark"] .status-error {
  background: oklch(0.40 0.14 25 / .28); color: var(--red); border-color: oklch(0.4 0.14 25 / .35);
}
:root[data-theme="dark"] .status-error .status-dot { background: var(--red); }
:root[data-theme="dark"] .status-stopped,
:root[data-theme="dark"] .status-starting,
:root[data-theme="dark"] .status-stopping {
  background: oklch(0.42 0.10 75 / .25); color: var(--orange); border-color: oklch(0.42 0.10 75 / .35);
}
:root[data-theme="dark"] .status-stopped .status-dot,
:root[data-theme="dark"] .status-starting .status-dot,
:root[data-theme="dark"] .status-stopping .status-dot { background: var(--orange); }
:root[data-theme="dark"] .status-cell .status-label { color: inherit; }

:root[data-theme="dark"] .status-disabled {
  background: oklch(0.22 0.012 250 / .5);
  color: var(--muted);
  border-color: oklch(0.28 0.015 250 / .6);
}
:root[data-theme="dark"] .status-disabled .status-dot { background: var(--muted); }

@keyframes mr-pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

:root[data-theme="dark"] .row-action {
  background: transparent;
  border-color: transparent;
  color: oklch(0.60 0.014 250);
  border-radius: 6px;
  width: 30px; height: 30px;
  min-height: 30px;
}
:root[data-theme="dark"] .row-action:hover {
  background: oklch(1 0 0 / .04);
  border-color: oklch(0.28 0.015 250);
  color: var(--text);
}
:root[data-theme="dark"] .row-action-del:hover {
  background: oklch(0.40 0.14 25 / .28);
  border-color: oklch(0.4 0.14 25 / .35);
  color: var(--red);
}
:root[data-theme="dark"] .row-action:disabled { opacity: .3; cursor: not-allowed; }

/* копирование ip */
:root[data-theme="dark"] .copy-btn { color: oklch(0.60 0.014 250); }
:root[data-theme="dark"] .copy-btn:hover { color: var(--blue); }

/* ── activity ── */
:root[data-theme="dark"] .event-item .event-time { color: oklch(0.46 0.012 250); }
:root[data-theme="dark"] .event-card { color: oklch(0.65 0.014 250); }
:root[data-theme="dark"] .event-card::before {
  background: var(--green);
  box-shadow: 0 0 6px oklch(0.78 0.16 155 / .5);
}
:root[data-theme="dark"] .event-card.error::before   { background: var(--red); box-shadow: none; }
:root[data-theme="dark"] .event-card.warning::before { background: var(--orange); box-shadow: none; }

/* ── found IPs (янтарь) ── */
:root[data-theme="dark"] .found-card {
  background: linear-gradient(180deg, oklch(0.27 0.04 85 / .25), oklch(0.20 0.018 250 / .6));
  border-color: oklch(0.40 0.10 80 / .35);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
:root[data-theme="dark"] .found-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(140% 80% at 100% 0%, oklch(0.82 0.15 80 / .35) 0%, transparent 50%);
  opacity: .35; pointer-events: none;
}
:root[data-theme="dark"] .found-card .badge {
  background: oklch(0.42 0.10 80 / .28);
  color: var(--new);
  border-color: oklch(0.42 0.10 80 / .4);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
}
:root[data-theme="dark"] .found-card strong {
  font-size: 22px;
  letter-spacing: -0.01em;
  position: relative;
}
:root[data-theme="dark"] .found-card span { position: relative; }
:root[data-theme="dark"] .found-actions button {
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}
:root[data-theme="dark"] .found-actions button:hover {
  background: oklch(1 0 0 / .04);
  color: var(--text);
}

/* ── modal ── */
:root[data-theme="dark"] .modal-backdrop {
  background: oklch(0.10 0.01 250 / .65);
  backdrop-filter: blur(6px);
}
:root[data-theme="dark"] .modal {
  background: linear-gradient(180deg, oklch(0.22 0.018 250), oklch(0.18 0.014 250));
  border-color: oklch(0.28 0.015 250);
  border-radius: 18px;
  box-shadow: var(--shadow-strong);
}
:root[data-theme="dark"] .modal-head { border-bottom-color: oklch(0.235 0.014 250); }
:root[data-theme="dark"] .settings-section {
  background: oklch(1 0 0 / .025);
  border-color: oklch(0.235 0.014 250);
  border-radius: 12px;
}

/* ── форма аккаунта ── */
:root[data-theme="dark"] .account-service-pane {
  background: oklch(0.15 0.012 250);
  border-right-color: oklch(0.235 0.014 250);
}
:root[data-theme="dark"] .service-choice,
:root[data-theme="dark"] .provider-hint,
:root[data-theme="dark"] .field-section,
:root[data-theme="dark"] .account-enabled-line {
  background: oklch(1 0 0 / .025);
  border-color: oklch(0.235 0.014 250);
}
:root[data-theme="dark"] .service-choice.active {
  background: linear-gradient(90deg, var(--blue-soft), oklch(1 0 0 / .02));
  border-color: oklch(0.50 0.14 var(--accent-h) / .55);
}
:root[data-theme="dark"] .field-section-head,
:root[data-theme="dark"] .account-form .modal-actions {
  border-color: oklch(0.235 0.014 250);
}

/* ── events view ── */
:root[data-theme="dark"] .events-toolbar-bar,
:root[data-theme="dark"] .log-toolbar {
  background: oklch(1 0 0 / .02);
  border-bottom-color: oklch(0.235 0.014 250);
}
:root[data-theme="dark"] .tab-btn.active {
  background: var(--blue);
  color: oklch(0.12 0.01 250);
}
:root[data-theme="dark"] .level-badge.level-error   { background: oklch(0.40 0.14 25 / .28); color: var(--red); }
:root[data-theme="dark"] .level-badge.level-warning { background: oklch(0.42 0.10 75 / .25); color: var(--orange); }
:root[data-theme="dark"] .level-badge.level-info    { background: var(--blue-soft); color: var(--blue); }
:root[data-theme="dark"] .level-badge.level-success { background: var(--green-soft); color: var(--green); }

/* регионы / чипы */
:root[data-theme="dark"] .region-btn {
  background: oklch(1 0 0 / .03);
  border-color: oklch(0.28 0.015 250);
  color: oklch(0.65 0.014 250);
}
:root[data-theme="dark"] .region-btn:hover {
  border-color: oklch(0.5 0.14 var(--accent-h) / .55);
  color: var(--blue);
  background: var(--blue-soft);
}
:root[data-theme="dark"] .region-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: oklch(0.12 0.01 250);
}

/* ── login / setup pages ── */
:root[data-theme="dark"] .login-page {
  background:
    radial-gradient(800px 600px at 50% -10%, oklch(0.74 0.16 var(--accent-h) / .22) 0%, transparent 55%),
    linear-gradient(180deg, oklch(0.16 0.012 250), oklch(0.13 0.010 250));
}
:root[data-theme="dark"] .login-panel {
  background: linear-gradient(180deg, oklch(0.22 0.018 250), oklch(0.18 0.014 250));
  border-color: oklch(0.28 0.015 250);
  border-radius: 18px;
  box-shadow: var(--shadow-strong);
}

/* ── scrollbar ── */
:root[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: oklch(0.28 0.015 250);
  border-radius: 5px;
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: oklch(0.34 0.015 250); }
:root[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

/* единое скругление 14px на больших панелях */
:root[data-theme="dark"] .quick-card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .telegram-widget,
:root[data-theme="dark"] .metric-strip,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .found-card { border-radius: 14px; }

:root[data-theme="dark"] .primary,
:root[data-theme="dark"] .secondary,
:root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] select,
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .row-action,
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .tab-btn,
:root[data-theme="dark"] .events-tab-bar { border-radius: 8px; }