/* =====================================================================
   Service-V — дизайн-система (порт из прототипа claude.ai/design).
   Светлый SaaS, синий акцент, IBM Plex. Подключается на экранах
   сервис-деска (пульт /sd/ и клиентский ЛК /lk/).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&subset=cyrillic&display=swap');

:root {
  --sv-accent: oklch(0.56 0.17 256);
  --sv-accent-strong: oklch(0.48 0.17 256);
  --sv-accent-soft: oklch(0.95 0.025 256);
  --sv-accent-softer: oklch(0.975 0.012 256);
  --sv-bg: oklch(0.972 0.005 250);
  --sv-surface: #ffffff;
  --sv-border: oklch(0.915 0.008 250);
  --sv-border-soft: oklch(0.945 0.006 250);
  --sv-text: oklch(0.26 0.02 258);
  --sv-text-2: oklch(0.45 0.018 256);
  --sv-muted: oklch(0.58 0.015 254);
  --sv-faint: oklch(0.70 0.012 252);
  --sv-ok: oklch(0.60 0.13 155);   --sv-ok-soft: oklch(0.95 0.04 155);
  --sv-warn: oklch(0.66 0.13 70);  --sv-warn-soft: oklch(0.96 0.045 85);
  --sv-crit: oklch(0.56 0.18 25);  --sv-crit-soft: oklch(0.95 0.025 25);
  --sv-info: oklch(0.55 0.13 250); --sv-info-soft: oklch(0.95 0.025 250);
  --sv-purple: oklch(0.5 0.13 300); --sv-purple-soft: oklch(0.955 0.025 300);
  --sv-grey-soft: oklch(0.96 0.004 250);
  --sv-radius: 10px;  --sv-radius-sm: 7px;
  --sv-shadow: 0 1px 2px oklch(0.3 0.02 255 / 0.05), 0 4px 16px oklch(0.3 0.02 255 / 0.05);
  --sv-shadow-lift: 0 2px 6px oklch(0.3 0.02 255 / 0.07), 0 12px 32px oklch(0.3 0.02 255 / 0.09);
  --sv-font: "IBM Plex Sans", "Helvetica Neue", sans-serif;
  --sv-mono: "IBM Plex Mono", monospace;
  --sv-pad: 16px;  --sv-row-pad: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body.sv-body {
  font-family: var(--sv-font); background: var(--sv-bg); color: var(--sv-text);
  font-size: 13.5px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: oklch(0.85 0.06 250); }
.sv-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.sv-scroll::-webkit-scrollbar-thumb { background: oklch(0.85 0.01 250); border-radius: 6px; border: 3px solid var(--sv-bg); }
.sv-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---- generic ---- */
.sv-card { background: var(--sv-surface); border: 1px solid var(--sv-border); border-radius: var(--sv-radius); box-shadow: var(--sv-shadow); padding: var(--sv-pad); }
.sv-card.flush { padding: 0; }
.sv-h-row { display: flex; align-items: center; gap: 8px; }
.sv-mono { font-family: var(--sv-mono); }
.sv-link { color: var(--sv-accent); cursor: pointer; text-decoration: none; }
.sv-link:hover { text-decoration: underline; }
.sv-muted { color: var(--sv-muted); }
.sv-card-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 13px; font-weight: 600; }

.sv-btn { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-border); background: var(--sv-surface); color: var(--sv-text); font-size: 13px; font-weight: 500; padding: 7px 13px; cursor: pointer; transition: background .12s, border-color .12s; white-space: nowrap; text-decoration: none; }
.sv-btn:hover { background: var(--sv-accent-softer); border-color: oklch(0.86 0.02 250); }
.sv-btn.primary { background: var(--sv-accent); border-color: var(--sv-accent); color: #fff; }
.sv-btn.primary:hover { background: var(--sv-accent-strong); }
.sv-btn.ghost { border-color: transparent; background: transparent; color: var(--sv-text-2); }
.sv-btn.ghost:hover { background: var(--sv-accent-softer); color: var(--sv-text); }
.sv-btn.sm { padding: 4px 9px; font-size: 12px; gap: 5px; }
.sv-btn.danger-soft { color: var(--sv-crit); }
.sv-btn:disabled { opacity: .55; cursor: default; }

.sv-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; line-height: 1.5; }
.sv-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }

/* приоритеты */
.sv-pri-P1 { color: #fff; background: var(--sv-crit); }
.sv-pri-P2 { color: var(--sv-crit); background: var(--sv-crit-soft); }
.sv-pri-P3 { color: var(--sv-warn); background: var(--sv-warn-soft); }
.sv-pri-P4 { color: var(--sv-muted); background: var(--sv-grey-soft); }
/* статусы */
.sv-st-new        { color: var(--sv-info); background: var(--sv-info-soft); }
.sv-st-assigned   { color: var(--sv-purple); background: var(--sv-purple-soft); }
.sv-st-in_progress{ color: var(--sv-warn); background: var(--sv-warn-soft); }
.sv-st-pending    { color: var(--sv-muted); background: var(--sv-grey-soft); }
.sv-st-resolved   { color: var(--sv-ok); background: var(--sv-ok-soft); }
.sv-st-closed     { color: #fff; background: oklch(0.45 0.02 260); }
.sv-st-cancelled  { color: var(--sv-muted); background: var(--sv-grey-soft); }
.sv-st-reopened   { color: var(--sv-crit); background: var(--sv-crit-soft); }
/* SLA */
.sv-sla-ok   { color: var(--sv-ok); background: var(--sv-ok-soft); }
.sv-sla-warn { color: var(--sv-warn); background: var(--sv-warn-soft); }
.sv-sla-crit { color: var(--sv-crit); background: var(--sv-crit-soft); }
.sv-sla-pause{ color: var(--sv-muted); background: var(--sv-grey-soft); }

/* avatar */
.sv-avatar { border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; letter-spacing: .02em; background: oklch(0.92 0.04 256); color: oklch(0.42 0.12 256); width: 28px; height: 28px; font-size: 11px; }

/* tables */
.sv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sv-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--sv-muted); padding: var(--sv-row-pad) 12px; border-bottom: 1px solid var(--sv-border); background: oklch(0.978 0.004 250); }
.sv-table td { padding: var(--sv-row-pad) 12px; border-bottom: 1px solid var(--sv-border-soft); vertical-align: middle; }
.sv-table tbody tr { transition: background .1s; }
.sv-table tbody tr.clk { cursor: pointer; }
.sv-table tbody tr.clk:hover { background: var(--sv-accent-softer); }
.sv-table tbody tr.selected { background: var(--sv-accent-soft); }

/* sidebar nav */
.sv-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--sv-radius-sm); color: var(--sv-text-2); font-size: 13px; font-weight: 500; cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; text-decoration: none; transition: background .12s, color .12s; }
.sv-nav-item:hover { background: oklch(0.955 0.008 250); color: var(--sv-text); }
.sv-nav-item.active { background: var(--sv-accent-soft); color: var(--sv-accent-strong); }

/* inputs */
.sv-input, .sv-select, .sv-textarea { font-family: inherit; font-size: 13px; border: 1px solid var(--sv-border); border-radius: var(--sv-radius-sm); padding: 7px 11px; background: var(--sv-surface); color: var(--sv-text); outline: none; transition: border-color .12s, box-shadow .12s; width: 100%; }
.sv-input:focus, .sv-select:focus, .sv-textarea:focus { border-color: var(--sv-accent); box-shadow: 0 0 0 3px oklch(0.55 0.16 250 / 0.15); }
.sv-textarea { resize: vertical; min-height: 70px; }
.sv-label { font-size: 12px; font-weight: 600; color: var(--sv-text-2); display: block; margin-bottom: 5px; }

.sv-kpi-num { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.sv-fade-in { animation: svFade .25s ease; }
@keyframes svFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sv-fade-in { animation: none; } }

/* ---- app shell (пульт сотрудника) ---- */
.sv-shell { display: flex; min-height: 100vh; }
.sv-sidebar { width: 216px; flex: none; background: var(--sv-surface); border-right: 1px solid var(--sv-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sv-sidebar .brand { padding: 16px 16px 12px; border-bottom: 1px solid var(--sv-border-soft); font-weight: 700; font-size: 15px; color: var(--sv-accent-strong); letter-spacing: -0.01em; }
.sv-sidebar nav { padding: 10px; display: grid; gap: 2px; }
.sv-sidebar .who { margin-top: auto; padding: 12px; border-top: 1px solid var(--sv-border-soft); }
.sv-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sv-topbar { height: 52px; flex: none; background: var(--sv-surface); border-bottom: 1px solid var(--sv-border); display: flex; align-items: center; gap: 14px; padding: 0 18px; position: sticky; top: 0; z-index: 5; }
.sv-main { flex: 1; padding: 18px; }
.sv-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.sv-page-head h1 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.sv-page-head .sub { color: var(--sv-muted); font-size: 12.5px; margin-top: 3px; }

.sv-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.sv-cols { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.sv-meter { background: oklch(0.94 0.005 250); border-radius: 99px; height: 6px; overflow: hidden; width: 100%; }
.sv-meter > i { display: block; height: 100%; background: var(--sv-accent); border-radius: 99px; }

/* ---- клиентский ЛК (центрированный контент) ---- */
.sv-lk-wrap { max-width: 920px; margin: 0 auto; padding: 20px; }
.sv-auth-wrap { max-width: 400px; margin: 7vh auto; padding: 0 16px; }

/* ---- адаптивность пульта (off-canvas сайдбар на узких экранах) ---- */
.sv-hamburger { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--sv-border); border-radius: var(--sv-radius-sm); background: var(--sv-surface); cursor: pointer; color: var(--sv-text); }
.sv-backdrop { display: none; }
@media (max-width: 880px) {
  .sv-sidebar { position: fixed; left: 0; top: 0; height: 100vh; z-index: 40; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--sv-shadow-lift); }
  .sv-shell.nav-open .sv-sidebar { transform: none; }
  .sv-shell.nav-open .sv-backdrop { display: block; position: fixed; inset: 0; background: oklch(0.3 0.02 255 / 0.4); z-index: 35; }
  .sv-hamburger { display: inline-flex; }
  .sv-topsearch { display: none; }            /* поиск прячем на узком, чтобы освободить место */
  .sv-main { padding: 12px; }
  .sv-page-head h1 { font-size: 17px; }
}
@media (max-width: 560px) {
  .sv-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .sv-table th, .sv-table td { padding: 8px 8px; }
}
.sv-btn:focus-visible, .sv-nav-item:focus-visible, .sv-input:focus-visible, .sv-link:focus-visible { outline: 2px solid var(--sv-accent); outline-offset: 1px; }

/* ---- тёмная NOC-тема (экран мониторинга на настенном дисплее) ---- */
body.sv-noc {
  --sv-bg: oklch(0.20 0.02 260); --sv-surface: oklch(0.25 0.02 260);
  --sv-border: oklch(0.34 0.02 260); --sv-border-soft: oklch(0.30 0.02 260);
  --sv-text: oklch(0.93 0.01 250); --sv-text-2: oklch(0.80 0.01 250);
  --sv-muted: oklch(0.66 0.012 252); --sv-faint: oklch(0.52 0.012 252);
  --sv-accent-soft: oklch(0.30 0.04 256); --sv-accent-softer: oklch(0.27 0.02 256);
}
body.sv-noc .sv-table th { background: oklch(0.23 0.02 260); }
body.sv-noc .sv-table tbody tr.clk:hover { background: oklch(0.29 0.03 256); }

/* timeline переписки */
.sv-msg { border-left: 3px solid var(--sv-border); padding: 6px 0 6px 12px; margin-bottom: 12px; }
.sv-msg.agent { border-color: var(--sv-accent); }
.sv-msg.system { border-color: var(--sv-faint); color: var(--sv-muted); font-size: 13px; }
.sv-msg.internal { background: var(--sv-warn-soft); border-color: var(--sv-warn); padding-right: 10px; border-radius: 0 8px 8px 0; }
.sv-msg .meta { font-size: 11.5px; color: var(--sv-muted); margin-bottom: 2px; }