/* ============================================================
   Signal Bot Admin — dark theme (v1 redesign)
   Single dark theme only. No print / light overrides.
   ============================================================ */

/* ---- Design tokens ---- */
:root {
  --bg:#0b0d12;
  --panel:#12151d;
  --panel2:#1a1f2a;
  --panel3:#222836;
  --txt:#e8eaf0;
  --muted:#8b94a3;
  --border:#262c38;
  --border2:#323a49;
  --accent:#4f8cff;
  --accent-dim:rgba(79,140,255,.14);
  --ok:#3fbf6f;
  --warn:#e0a93b;
  --danger:#e5564e;
  --cat-bot:#4f8cff;       /* синий  — Бот */
  --cat-ai:#a78bfa;        /* фиолет — AI-менеджер */
  --cat-channel:#34d399;   /* зелёный— Канал */
  --radius:10px;
  --radius-sm:7px;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}

/* ---- Reset / base ---- */
* { box-sizing:border-box; scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--txt);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

/* thin dark webkit scrollbars */
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:6px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:#3d4757; background-clip:padding-box; }

/* ---- Layout ---- */
.layout { display:flex; min-height:100vh; }

.sidebar {
  width:236px; flex:none;
  background:var(--panel);
  border-right:1px solid var(--border);
  padding:14px 0 24px;
  position:sticky; top:0;
  height:100vh; overflow-y:auto;
}
.brand {
  display:block;
  font-size:17px; font-weight:700; letter-spacing:.01em;
  color:var(--accent);
  padding:6px 18px 14px;
}
.brand:hover { text-decoration:none; filter:brightness(1.1); }

.sidebar nav { display:flex; flex-direction:column; }

.nav-sec { padding:6px 0; --cat:var(--accent); }
.nav-sec + .nav-sec { border-top:1px solid var(--border); margin-top:4px; padding-top:10px; }
.nav-sec-title {
  display:flex; align-items:center; gap:7px;
  padding:4px 18px 6px;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
}
.nav-sec.cat-bot { --cat:var(--cat-bot); }
.nav-sec.cat-ai { --cat:var(--cat-ai); }
.nav-sec.cat-channel { --cat:var(--cat-channel); }
.nav-sec.cat-bot .nav-sec-title,
.nav-sec.cat-ai .nav-sec-title,
.nav-sec.cat-channel .nav-sec-title { color:var(--cat); }
.nav-sec.cat-bot .nav-sec-title::before,
.nav-sec.cat-ai .nav-sec-title::before,
.nav-sec.cat-channel .nav-sec-title::before {
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--cat); flex:none; box-shadow:0 0 7px var(--cat);
}

.sidebar nav a {
  display:flex; align-items:center; gap:10px;
  padding:8px 18px;
  color:var(--txt); font-size:13.5px;
  border-left:3px solid transparent;
  transition:background .15s, border-color .15s, color .15s;
}
.sidebar nav a:hover { background:var(--panel2); text-decoration:none; }
.sidebar nav a.active {
  background:var(--panel3);
  border-left-color:var(--accent);
  color:var(--txt); font-weight:600;
}
.nav-sec.cat-bot a.active,
.nav-sec.cat-ai a.active,
.nav-sec.cat-channel a.active { border-left-color:var(--cat); }
.sidebar nav a .ic { width:18px; flex:none; text-align:center; font-size:14px; line-height:1; }

/* export details in sidebar */
.nav-export { border-left:3px solid transparent; }
.nav-export > summary {
  display:flex; align-items:center; gap:10px;
  padding:8px 18px;
  color:var(--txt); font-size:13.5px; cursor:pointer;
  list-style:none; user-select:none;
  transition:background .15s;
}
.nav-export > summary::-webkit-details-marker { display:none; }
.nav-export > summary::after {
  content:"▸"; margin-left:auto; color:var(--muted); font-size:11px;
  transition:transform .15s;
}
.nav-export[open] > summary::after { transform:rotate(90deg); }
.nav-export > summary:hover { background:var(--panel2); }
.nav-export .ic { width:18px; flex:none; text-align:center; font-size:14px; }
.nav-export-body { padding:2px 0 6px; }
.nav-export-body a {
  display:block;
  padding:6px 18px 6px 46px;
  font-size:12.5px; color:var(--muted);
  border-left:3px solid transparent;
}
.nav-export-body a:hover { background:var(--panel2); color:var(--txt); text-decoration:none; }
.nav-logout { color:var(--muted) !important; }

/* mobile off-canvas plumbing (checkbox-hack, no JS) */
.nav-toggle-cb { display:none; }
.hamburger {
  display:none;
  position:fixed; top:12px; left:12px; z-index:60;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  font-size:20px; line-height:1;
  background:var(--panel2); color:var(--txt);
  border:1px solid var(--border2); border-radius:var(--radius-sm);
  cursor:pointer; box-shadow:var(--shadow);
}
.nav-overlay { display:none; }

/* ---- Content ---- */
.content {
  flex:1; min-width:0;
  padding:24px 28px;
  max-width:1200px; width:100%;
}

/* ---- Typography ---- */
h2 { margin:0 0 18px; font-size:20px; font-weight:700; line-height:1.25; }
h3 { margin:24px 0 10px; font-size:16px; font-weight:600; color:var(--muted); }

.page-head { margin-bottom:18px; }
.page-head h2 { margin:0; }
.page-sub { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.45; }

/* Category divider on the full "Все настройки" editor (one per category block). */
.cat-header {
  margin:34px 0 14px; padding-top:22px; font-size:16px; font-weight:700;
  color:var(--txt); border-top:1px solid var(--border);
}
.cat-header:first-of-type { margin-top:6px; padding-top:0; border-top:none; }

/* ---- Cards ---- */
.card {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px; margin-bottom:20px;
}

/* ---- Tables ---- */
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
td { transition:background .12s; }
tr:hover td { background:var(--panel2); }

/* ---- Badges ---- */
.badge {
  display:inline-block; padding:2px 9px; border-radius:20px;
  font-size:12px; color:var(--txt);
  background:var(--panel2); border:1px solid var(--border);
}
.badge.ok { color:var(--ok); border-color:rgba(63,191,111,.5); background:rgba(63,191,111,.1); }
.badge.off { color:var(--muted); }

/* ---- Forms ---- */
label { display:block; color:var(--muted); font-size:12px; margin:10px 0 4px; }
input, select, textarea {
  width:100%;
  background:var(--panel2); color:var(--txt);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:8px 10px; font:inherit;
  transition:border-color .15s, box-shadow .15s;
}
input[type=checkbox], input[type=radio] { width:auto; }
input::placeholder, textarea::placeholder { color:#5f6875; }
input:hover, select:hover, textarea:hover { border-color:var(--border2); }
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
}
textarea { min-height:90px; resize:vertical; font-family:ui-monospace,Menlo,Consolas,monospace; line-height:1.5; }
textarea.tall { min-height:320px; }
select { cursor:pointer; }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--accent); color:#fff;
  border:1px solid transparent; border-radius:var(--radius-sm);
  padding:8px 15px; cursor:pointer;
  font:inherit; font-weight:500; line-height:1.2;
  transition:filter .15s, background .15s, border-color .15s;
}
.btn:hover { filter:brightness(1.08); text-decoration:none; }
.btn:active { filter:brightness(.95); }
.btn.sm { padding:4px 10px; font-size:12px; }
.btn.ghost { background:transparent; border-color:var(--border2); color:var(--txt); }
.btn.ghost:hover { background:var(--panel2); filter:none; }
.btn.danger { background:var(--danger); }
.btn.warn { background:var(--warn); color:#1a1a1a; }

/* ---- Layout helpers ---- */
.row { display:flex; gap:14px; flex-wrap:wrap; }
.row > * { flex:1; min-width:160px; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:16px; }
.toolbar .btn { white-space:nowrap; }
.muted { color:var(--muted); }
.inline { display:inline; }
.right { text-align:right; }
.nowrap { white-space:nowrap; }

/* ---- Flash ---- */
.flash {
  padding:10px 14px; border-radius:var(--radius-sm);
  margin-bottom:12px; border:1px solid; font-size:13.5px;
}
.flash.success { background:rgba(63,191,111,.12); border-color:var(--ok); color:var(--ok); }
.flash.info { background:rgba(79,140,255,.12); border-color:var(--accent); color:var(--accent); }
.flash.danger { background:rgba(229,86,78,.12); border-color:var(--danger); color:var(--danger); }
.flash.warn { background:rgba(224,169,59,.12); border-color:var(--warn); color:var(--warn); }

/* ---- Stats ---- */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.stat {
  background:var(--panel2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px;
  transition:border-color .15s;
}
.stat:hover { border-color:var(--border2); }
.stat .num { font-size:26px; font-weight:700; line-height:1.1; }
.stat .lbl { color:var(--muted); font-size:12px; margin-top:4px; }

/* ---- Preformatted ---- */
pre.mono {
  background:var(--panel2); border:1px solid var(--border);
  padding:10px 12px; border-radius:var(--radius-sm);
  overflow:auto; margin:0;
  font-size:12px; line-height:1.5;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}

/* ---- Login ---- */
.login-wrap { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.login-box { width:340px; max-width:100%; }

/* ============================================================
   Settings-page components (owner: agent B, consumer: agent A)
   Class contract fixed — do not rename.
   ============================================================ */

/* Tabs (segment control) */
.tabs {
  display:flex; flex-wrap:wrap; gap:4px;
  padding:4px;
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:16px;
}
.tab {
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:var(--radius-sm);
  color:var(--muted); font-size:13.5px; font-weight:500;
  transition:background .15s, color .15s;
}
.tab:hover { background:var(--panel2); color:var(--txt); text-decoration:none; }
.tab.active { background:var(--panel3); color:var(--txt); }
.tab.active::after {
  content:""; position:absolute; left:12px; right:12px; bottom:3px;
  height:2px; border-radius:2px; background:var(--accent);
}
.tab[data-cat=bot].active::after { background:var(--cat-bot); }
.tab[data-cat=ai].active::after { background:var(--cat-ai); }
.tab[data-cat=channel].active::after { background:var(--cat-channel); }

/* Search box */
.searchbox { position:relative; margin-bottom:18px; }
.searchbox::before {
  content:"🔍"; position:absolute; left:12px; top:50%;
  transform:translateY(-50%); font-size:13px; opacity:.7;
  pointer-events:none;
}
.searchbox input { padding-left:36px; }

/* Group card (composes .card) */
.group-card { padding:0; overflow:hidden; }
.group-head {
  padding:14px 18px;
  background:var(--panel2);
  border-bottom:1px solid var(--border);
}
.group-head h3 { margin:0; font-size:15px; font-weight:650; color:var(--txt); }
.group-desc { margin:4px 0 0; color:var(--muted); font-size:12.5px; line-height:1.45; }

/* Fields */
.fields { padding:2px 18px; }
.field {
  display:grid; grid-template-columns:280px 1fr; gap:18px;
  padding:14px 0 14px 14px;
  border-bottom:1px solid var(--border);
}
.fields .field:last-child { border-bottom:none; }
.field.changed { box-shadow:inset 3px 0 0 var(--accent); border-radius:2px; }
.field.hidden-by-search { display:none; }
.group-card.hidden-by-search { display:none; }

.field-info { min-width:0; }
.field-info label { display:block; margin:0; font-size:13.5px; font-weight:600; color:var(--txt); }
code.key {
  display:inline-block; margin-top:5px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px;
  color:var(--muted); background:var(--panel2);
  border:1px solid var(--border); border-radius:4px;
  padding:1px 6px; word-break:break-all;
}
.field-ctl { min-width:0; }
.hint { color:var(--muted); font-size:12px; margin-top:5px; line-height:1.45; }
.w-narrow { max-width:140px; }

/* Toggle switch */
.toggle {
  position:relative; display:inline-block;
  width:40px; height:22px; margin:0; flex:none;
  cursor:pointer; vertical-align:middle;
}
.toggle .toggle-cb {
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer;
}
.toggle .track {
  position:absolute; inset:0;
  background:var(--panel3); border:1px solid var(--border2);
  border-radius:999px;
  transition:background .15s, border-color .15s;
}
.toggle .track::before {
  content:""; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%;
  background:#cfd4de; transition:transform .15s, background .15s;
}
.toggle .toggle-cb:checked + .track { background:var(--accent); border-color:var(--accent); }
.toggle .toggle-cb:checked + .track::before { transform:translateX(18px); background:#fff; }
.toggle .toggle-cb:focus-visible + .track { outline:2px solid var(--accent); outline-offset:2px; }

/* Save bar (sticky bottom) */
.savebar {
  position:sticky; bottom:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:20px; padding:14px 18px;
  background:var(--panel);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
@supports (backdrop-filter:blur(8px)) {
  .savebar { background:rgba(18,21,29,.82); backdrop-filter:blur(10px) saturate(1.1); }
}
.savebar.dirty { border-color:var(--accent); box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 0 1px var(--accent-dim); }
.savebar-status { color:var(--muted); font-size:13px; }
.savebar.dirty .savebar-status { color:var(--accent); font-weight:600; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px) {
  .layout { display:block; }
  .hamburger { display:flex; }
  .sidebar {
    position:fixed; top:0; left:0; z-index:70;
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:var(--shadow);
  }
  #nav-toggle:checked ~ .layout .sidebar { transform:translateX(0); }
  #nav-toggle:checked ~ .nav-overlay {
    display:block; position:fixed; inset:0; z-index:65;
    background:rgba(0,0,0,.55);
  }
  .content { padding:60px 20px 24px; max-width:none; }
}

@media (max-width:760px) {
  .content { padding:58px 14px 20px; }
  .field { grid-template-columns:1fr; gap:8px; }
  .savebar { padding:12px 14px; }
}

/* ============================================================
   Bot commands page (owner: bot_commands.html)
   Expanded per-command forms; .bc-* fixes field alignment.
   Reuses shared .btn, .badge, .card, .flash, and design tokens.
   ============================================================ */

/* Utility margins for the Telegram-menu card (replace inline styles). */
.bc-mt-14 { margin-top:14px; }
.bc-mt-8  { margin-top:8px; }

/* One command per form, separated by a rule. */
.bc-item {
  border-bottom:1px solid var(--border);
  padding-bottom:14px; margin-bottom:14px;
}

/* Header row above each command's fields: #id /command + status badge.
   Pulling the badge out of the first label keeps all labels one line high,
   so the fields below no longer stagger vertically. */
.bc-head {
  display:flex; align-items:center; gap:8px;
  margin-bottom:2px; color:var(--muted); font-size:13px;
}
.bc-head code { color:var(--txt); }

/* Aligned field grid: command | description | action | position.
   align-items:end pins every input to one baseline (fixed widths replace
   the old ragged inline flex:0/min-width). */
.bc-fields {
  display:grid;
  grid-template-columns:170px minmax(0,1fr) 210px 90px;
  gap:12px; align-items:end;
}

/* Parameter textarea spans the full width below the grid. */
.bc-param { margin-top:10px; }

/* Reply-keyboard label row UNDER the .bc-fields grid (does NOT add a column to
   the grid — keeps the just-fixed alignment). 260px input + hint slack. */
.bc-kbrow {
  display:grid;
  grid-template-columns:260px auto 1fr;
  gap:12px; align-items:end; margin-top:10px;
}
.bc-kbrow input { width:100%; }

/* Mockup of the persistent bot keyboard (Telegram-menu card): chips of the
   active show_in_keyboard commands. */
.bc-kbmock { margin-top:14px; }
.bc-kbchips { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.bc-kbchip {
  display:inline-flex; align-items:center;
  padding:6px 12px; border-radius:var(--radius-sm);
  background:var(--panel3); border:1px solid var(--border2);
  color:var(--txt); font-size:13px;
}

/* Checkboxes on one row (replaces the   spacers). */
.bc-checks { display:flex; flex-wrap:wrap; gap:18px; margin-top:8px; }
.bc-checks label {
  display:inline-flex; align-items:center; gap:6px;
  margin:0; font-weight:normal;
}

/* Action buttons on one row. */
.bc-btns { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }

@media (max-width:760px) {
  .bc-fields { grid-template-columns:1fr; }
  .bc-kbrow  { grid-template-columns:1fr; }
}