/* app.css — раскладка админки ai-billing поверх дизайн-системы ASUTLab.
   Только каркас и специфика биллинга; компоненты берём из components.css. */

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-text); font-size:var(--t-body); line-height:var(--lh-normal);
  color:var(--fg-primary); background:var(--bg-canvas);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--fg-accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- Каркас: сайдбар + основная колонка ---------- */
.app{ display:flex; min-height:100vh; }
.nav-sidebar{ position:sticky; top:0; height:100vh; flex:none; overflow-y:auto; }
.nav-sidebar__brand-name{ font-family:var(--font-display); font-weight:700; font-size:15px;
  color:var(--c-paper-100); line-height:1.1; letter-spacing:var(--tracking-tight); }
.nav-sidebar__brand-sub{ font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-mono);
  text-transform:uppercase; color:var(--c-mist-400); }
.nav-sidebar__spacer{ flex:1; }
.nav-sidebar__foot{ padding:var(--space-3); border-top:var(--bw-1) solid rgba(255,255,255,.08); margin-top:var(--space-4); }
.nav-sidebar__foot .nav-sidebar__caption{ padding-left:0; }
.nav-sidebar__foot-val{ font-size:var(--t-caption); color:var(--c-mist-300); word-break:break-all; }
/* Переключатель аккаунта в топбаре (справа-вверху) */
.topbar__switch{ display:flex; align-items:center; gap:var(--space-2); margin:0; }
.topbar__switch-label{ font-family:var(--font-mono); font-size:10px;
  letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--fg-muted); }
.topbar__select{
  height:32px; padding:0 30px 0 10px; font-size:var(--t-caption);
  background-repeat:no-repeat; background-position:right 10px center; background-size:12px;
}

.app-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ position:sticky; top:0; z-index:5; justify-content:space-between; }
.topbar__title{ font-family:var(--font-display); font-weight:600; font-size:var(--t-h3);
  letter-spacing:var(--tracking-tight); margin:0; }
.topbar__right{ display:flex; align-items:center; gap:var(--space-4); }
.topbar__user{ font-size:var(--t-caption); color:var(--fg-secondary); }
.topbar__role{ font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-mono);
  text-transform:uppercase; color:var(--fg-muted); }

.app-content{ padding:var(--space-6) var(--space-8); max-width:var(--layout-max); width:100%; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4);
  margin-bottom:var(--space-6); }
.page-head__actions{ display:flex; gap:var(--space-3); align-items:center; }

/* ---------- Сетка карточек ---------- */
.kpi-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--grid-gap); }
.cols-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--grid-gap); }

/* ---------- Панель фильтров ---------- */
.filters{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-3);
  margin-bottom:var(--space-5); }
.filters .field{ margin:0; }

/* ---------- Таблица в карточке ---------- */
.table-wrap{ background:var(--bg-surface); border:var(--bw-1) solid var(--border-subtle);
  border-radius:var(--r-md); overflow:hidden; }
.table-wrap .tbl th:first-child, .table-wrap .tbl td:first-child{ padding-left:var(--space-5); }
.table-wrap .tbl th:last-child, .table-wrap .tbl td:last-child{ padding-right:var(--space-5); }
.table-scroll{ overflow-x:auto; }

/* ---------- Flash-баннер ---------- */
.app-flash{ display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4); border-radius:var(--r-md);
  border:var(--bw-1) solid var(--border-subtle); background:var(--bg-surface);
  margin-bottom:var(--space-5); font-size:var(--t-body); }
.app-flash.is-error{ background:var(--status-bad-bg); border-color:var(--c-bad-500); color:var(--c-bad-600); }
.app-flash.is-warning{ background:var(--status-warn-bg); border-color:var(--c-warn-500); color:var(--c-warn-600); }
.app-flash.is-info{ background:var(--status-info-bg); border-color:var(--c-info-500); color:var(--c-info-500); }

/* ---------- Логин ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg-canvas); padding:var(--space-4); }
.login-card{ width:340px; background:var(--bg-surface); border:var(--bw-1) solid var(--border-subtle);
  border-radius:var(--r-lg); box-shadow:var(--elev-2); padding:var(--space-8); }
.login-card__brand{ display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-6); }

/* ---------- Утилиты ---------- */
.num{ font-variant-numeric:tabular-nums; text-align:right; font-family:var(--font-mono); }
.muted{ color:var(--fg-muted); }
.foot-note{ margin-top:var(--space-8); color:var(--fg-muted); font-size:var(--t-caption); }
.stack{ display:flex; flex-direction:column; gap:var(--space-5); }
.row-gap{ display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap; }
.secret-box{ font-family:var(--font-mono); font-size:var(--t-body); user-select:all;
  background:var(--bg-sunken); border:var(--bw-1) solid var(--border-default);
  border-radius:var(--r-sm); padding:var(--space-3) var(--space-4); word-break:break-all; }

/* ---------- Адаптив ---------- */
@media (max-width:860px){
  .app{ flex-direction:column; }
  .nav-sidebar{ width:100%; height:auto; position:static; flex-direction:row; flex-wrap:wrap;
    align-items:center; gap:var(--space-2); }
  .nav-sidebar__group{ margin-top:0; display:flex; gap:var(--space-1); }
  .nav-sidebar__caption, .nav-sidebar__spacer, .nav-sidebar__foot{ display:none; }
  .app-content{ padding:var(--space-4); }
}