/* KoreaSmart CRM — Data-UI стандарт (Attio/Linear-дух). Токены ДО кода. */
:root{
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#fbfcfd; --surface-3:#f1f3f6;
  --border:#e6e8ec; --border-strong:#d4d8df;
  --text:#1b2030; --muted:#707888; --faint:#9aa1ad;
  --accent:#4f6ae0; --accent-bg:#eef1fc;
  --success:#1f9d5b; --success-bg:#e7f5ee;
  --warning:#b9790a; --warning-bg:#fbf1de;
  --danger:#d6443c; --danger-bg:#fbe9e8;
  --info:#2f7fd1; --info-bg:#e8f1fb;
  --radius:8px;
  --font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}
.tnum{font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── Layout ── */
.layout{display:flex;min-height:100vh}
.sidebar{width:200px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:14px 10px}
.brand{font-weight:600;font-size:15px;padding:6px 10px 14px;letter-spacing:-.01em}
.sidebar nav{display:flex;flex-direction:column;gap:2px}
.sidebar nav a{padding:8px 10px;border-radius:var(--radius);color:var(--muted);font-size:13px;font-weight:500}
.sidebar nav a:hover{background:var(--surface-3);color:var(--text)}
.sidebar nav a.active{background:var(--accent-bg);color:var(--accent)}
.sidebar-foot{margin-top:auto;padding:10px;border-top:1px solid var(--border);font-size:12px}
.sidebar-foot .who{color:var(--text);font-weight:500}
.sidebar-foot .logout{color:var(--muted)}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:10px;padding:14px 22px;border-bottom:1px solid var(--border);background:var(--surface)}
.topbar h1{font-size:17px;font-weight:600;margin:0}
.burger{display:none;font-size:18px;cursor:pointer}
.page{padding:18px 22px;max-width:1100px}

/* ── Saved views (чипы) ── */
.views{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.views a{font-size:12px;padding:5px 11px;border-radius:var(--radius);border:1px solid var(--border-strong);color:var(--muted);font-weight:500}
.views a:hover{background:var(--surface-3)}
.views a.on{background:var(--text);color:#fff;border-color:var(--text)}
.views a.warn{color:var(--warning)}

/* ── Дашборд: метрик-карточки ── */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}
.card-label{font-size:12px;color:var(--muted)}
.card-value{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:3px}
.card.accent{border-color:var(--accent)}
.card.accent .card-value{color:var(--accent)}

/* ── Мини-таблицы (статусы / топ-сервисов) ── */
table.mini{width:100%;border-collapse:collapse;font-size:13px}
table.mini thead th{text-align:left;font-weight:400;font-size:11px;color:var(--muted);padding:5px 0;border-bottom:1px solid var(--border)}
table.mini th.num,table.mini td.num{text-align:right;font-variant-numeric:tabular-nums}
table.mini td{padding:7px 0;border-top:1px solid var(--border)}
table.mini tbody tr:first-child td{border-top:0}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.panel-head h2{margin:0}
.panel .table-wrap{border:0;border-radius:0}
.link{color:var(--accent);font-size:13px}

/* ── Метрики (заказы) ── */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 13px}
.metric .lbl{font-size:12px;color:var(--muted)}
.metric .val{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.metric .val.warn{color:var(--warning)}

/* ── Toolbar / search ── */
/* wrap: на узком экране поиск занимает строку целиком, селект и кнопка уходят вниз.
   Без этого кнопка «+ Заказ» уезжает за правый край и тянет горизонтальный скролл. */
.toolbar{display:flex;gap:8px;margin-bottom:12px;align-items:center;flex-wrap:wrap}
.search{flex:1;min-width:180px;height:34px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--radius);font:inherit;font-size:13px;background:var(--surface);outline:none}
.toolbar .btn{margin-left:auto}
@media(max-width:760px){.toolbar .search{flex:1 1 100%}.toolbar .btn{margin-left:0}}
.search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
select{height:34px;padding:0 8px;border:1px solid var(--border-strong);border-radius:var(--radius);font:inherit;font-size:13px;background:var(--surface);color:var(--text)}

/* ── Таблица (плотная) ── */
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow-x:auto}
table.data{min-width:680px}
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data thead th{text-align:left;font-weight:400;font-size:11px;color:var(--muted);padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--border)}
table.data th.num,table.data td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.data tbody td{padding:8px 12px;border-top:1px solid var(--border)}
table.data tbody tr{cursor:pointer}
table.data tbody tr:hover{background:var(--surface-2)}
table.data tbody tr.terminal{color:var(--muted)}
table.data tfoot td{padding:8px 12px;border-top:1px solid var(--border-strong);background:var(--surface-2);font-size:12px;color:var(--muted)}
table.data tfoot td.num{color:var(--text);font-weight:600}
.nowrap{white-space:nowrap}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:middle;background:var(--faint)}

/* ── Статус-бейджи (цветом, не серым) ── */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;padding:2px 9px;border-radius:var(--radius);white-space:nowrap}
.badge.big{font-size:13px;padding:4px 12px}
.badge-pending{background:var(--warning-bg);color:var(--warning)}
.badge-paid{background:var(--info-bg);color:var(--info)}
.badge-activated{background:var(--success-bg);color:var(--success)}
.badge-expired{background:var(--danger-bg);color:var(--danger)}
.badge-completed{background:var(--surface-3);color:var(--muted)}
.badge-cancelled{background:var(--surface-3);color:var(--muted)}

/* ── Относительные даты ── */
.rel-ok{color:var(--muted)} .rel-warn{color:var(--warning)} .rel-danger{color:var(--danger);font-weight:500} .rel-none{color:var(--faint)}

/* ── Bulk-панель ── */
.bulkbar{display:none;align-items:center;gap:8px;padding:7px 12px;background:var(--accent-bg);border-bottom:1px solid var(--border);font-size:12px;color:var(--accent)}
.bulkbar .acts{opacity:.85}
input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent);cursor:pointer}

/* ── Карточка заказа: вкладки + highlights ── */
.link.back{display:inline-block;color:var(--muted);font-size:13px;margin-bottom:12px}
.highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:16px}
.hl{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px}
.hl .lbl{font-size:11px;color:var(--muted)}
.hl .val{font-size:14px;font-weight:500;margin-top:2px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:14px}
.tabs label{padding:8px 12px;font-size:13px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
input.tabnav{display:none}
.tab-pane{display:none}
#tab-overview:checked~.tabs label[for=tab-overview],
#tab-history:checked~.tabs label[for=tab-history],
#tab-emails:checked~.tabs label[for=tab-emails]{color:var(--accent);border-bottom-color:var(--accent);font-weight:500}
#tab-overview:checked~#pane-overview,
#tab-history:checked~#pane-history,
#tab-emails:checked~#pane-emails{display:block}

/* ── Панели / форма / kv ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.panel h2{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 10px}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13px}
dl.kv dt{color:var(--muted)} dl.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.status-control{display:flex;align-items:center;gap:12px}
.muted{color:var(--muted)} .center{text-align:center}
.reviews{list-style:none;padding:0;margin:0;font-size:13px} .reviews li{padding:8px 0;border-top:1px solid var(--border)}
button,.btn{height:32px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
button:hover,.btn:hover{background:var(--surface-3)}
button.primary,.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
button.primary:hover,.btn.primary:hover{background:#4459c9}
.btn{white-space:nowrap}
input[type=text],input[type=email],textarea,.field input{width:100%;padding:7px 10px;border:1px solid var(--border-strong);border-radius:var(--radius);font:inherit;font-size:13px;background:var(--surface);color:var(--text);outline:none}
input:focus,textarea:focus,.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.field input:disabled{background:var(--surface-3);color:var(--muted);cursor:not-allowed}

/* ── Формы заказа/клиента (партиалы) ── */
.fields-form{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:11px;color:var(--muted)}
.field.full{grid-column:1 / -1}
.field.actions{flex-direction:row;align-items:center;gap:12px;margin-top:2px}
.field.actions .link{color:var(--accent);font-size:13px}
.saved-ok{color:var(--success);font-size:12px;font-weight:500}
.err-msg{color:var(--danger);font-size:12px}
.status-control select{min-width:150px}
@media(max-width:760px){.fields-form{grid-template-columns:1fr}}

/* ── Формы создания (клиент / заказ) ── */
.form-panel{max-width:720px}
.field select{width:100%}
select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);outline:none}
.hint{font-size:11px;color:var(--faint);line-height:1.35}
.hint .link{font-size:11px}
.page>.alert{margin-bottom:14px}

/* ── Логин ── */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);padding:20px;font-family:var(--font)}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:28px 26px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:14px}
.brand-lg{font-size:18px;font-weight:600;text-align:center;letter-spacing:-.01em}
.login-card label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}
.login-card input{padding:9px 11px;border:1px solid var(--border-strong);border-radius:var(--radius);font:inherit;font-size:14px;background:var(--surface);color:var(--text);outline:none}
.login-card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.login-card button{justify-content:center;height:38px;font-size:14px;background:var(--accent);color:#fff;border-color:var(--accent);margin-top:4px}
.alert{background:var(--danger-bg);color:var(--danger);font-size:13px;padding:8px 12px;border-radius:var(--radius)}

/* ── Адаптив ── */
@media(max-width:760px){
  .sidebar{position:fixed;left:-210px;top:0;bottom:0;z-index:20;transition:left .2s}
  #nav-toggle:checked~.layout .sidebar{left:0}
  .burger{display:block}
  .grid-2{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .page{padding:14px}
}