/* Панель «Вайс-бот» — токены из БРЕНД_и_UI_токены.md */
:root {
  --bg: #FFFFFF; --surface: #F6F8FA; --border: #DCE2E8;
  --text: #202C38; --text-muted: #5B6B7B;
  --accent: #2A6DBC; --accent-hover: #215694;
  --brand-teal: #25BEAC;
  --gradient: linear-gradient(135deg, #2A6DBC, #5998E3);
  --ok: #2E7D32; --warn: #B45309; --risk: #C62828; --info: #2A6DBC;
}
:root[data-theme="dark"] {
  --bg: #14191F; --surface: #1F262E; --border: #333D47;
  --text: #E7EBEF; --text-muted: #9EA8B3;
  --accent: #5998E3; --accent-hover: #7FB0EC;
  --ok: #6FBF73; --warn: #E0A24A; --risk: #EF7B7B; --info: #5998E3;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 Lato, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
h1, h2, h3 { font-family: Montserrat, "Segoe UI", Roboto, sans-serif; font-weight: 600; }
h1 { font-size: 22px; margin: 6px 0 14px; }
h2 { font-size: 16px; margin: 22px 0 8px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: Consolas, Menlo, monospace; font-size: 13px; }
.muted { color: var(--text-muted); font-size: 13px; }
.spacer { flex: 1; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  background: var(--gradient); color: #fff; padding: 10px 18px;
}
.topbar-title { font-family: Montserrat, sans-serif; font-weight: 600; font-size: 15px; }
.topbar .muted { color: rgba(255,255,255,.85); }
.logo { height: 30px; }
.logo-dark { display: none; }
.btn-ghost {
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 13px;
}
.btn-ghost:hover { background: rgba(255,255,255,.22); text-decoration: none; }

.layout { display: flex; min-height: calc(100vh - 52px); }
.sidebar {
  width: 190px; background: var(--surface); border-right: 1px solid var(--border);
  padding: 14px 0; flex-shrink: 0;
}
.sidebar a { display: block; padding: 9px 20px; color: var(--text); }
.sidebar a:hover { background: var(--border); text-decoration: none; }
.sidebar a.active {
  color: var(--accent); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand-teal);
}
.content { flex: 1; padding: 20px 26px; min-width: 0; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th {
  background: var(--surface); text-align: left; padding: 9px 12px;
  font-family: Montserrat, sans-serif; font-size: 12.5px; white-space: nowrap;
}
td { padding: 8px 12px; border-top: 1px solid var(--border); vertical-align: top; }
.row-service td { opacity: .65; }
.cell-text { max-width: 360px; word-break: break-word; }

.btn {
  background: var(--accent); color: #fff; border: 0; border-radius: 6px;
  padding: 8px 16px; cursor: pointer; font-size: 14px;
}
.btn:hover { background: var(--accent-hover); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-danger { background: transparent; color: var(--risk); border: 1px solid var(--risk);
  border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 13px; }
.pill { border: 0; border-radius: 12px; padding: 4px 12px; cursor: pointer; font-size: 12.5px; }
.pill-on { background: var(--brand-teal); color: #202C38; }
.pill-off { background: var(--border); color: var(--text-muted); }

input, select, textarea {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 7px 10px; font: inherit; max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.w-narrow { width: 90px; }
.inline-form { display: inline; }
.row-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.actions { white-space: nowrap; }
.settings-form { max-width: 640px; }
.settings-form label { display: block; margin: 10px 0; }
.settings-form input, .settings-form textarea { display: block; width: 100%; margin-top: 4px; }
.settings-form .w-narrow { width: 120px; }

.status { border-radius: 12px; padding: 3px 10px; font-size: 12.5px; white-space: nowrap; }
.status-pending_b24 { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.status-in_progress { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info); }
.status-closed { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.error { color: var(--risk); }

.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--gradient);
}
.login-card {
  background: var(--bg); border-radius: 10px; padding: 34px 38px;
  width: 340px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.login-card h1 { font-size: 18px; margin: 14px 0 6px; }
.login-logo { height: 44px; }
.logo-for-dark { display: none; }
:root[data-theme="dark"] .logo-for-light { display: none; }
:root[data-theme="dark"] .logo-for-dark { display: inline; }
.login-card label { display: block; margin: 12px 0; }
.login-card input { display: block; width: 100%; margin-top: 4px; }
.login-card .btn { width: 100%; margin-top: 14px; }

@media (max-width: 760px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; display: flex; overflow-x: auto; padding: 0; }
  .sidebar a { white-space: nowrap; }
  .sidebar a.active { box-shadow: inset 0 -3px 0 var(--brand-teal); }
  .content { padding: 14px; }
}