/* app.css — раскладка админки billing-asut (ЕСБ) поверх дизайн-системы ASUTLab.
   Каркас — порт из ai-billing app.css. Ниже — «мост»: бренд-стили для голой
   разметки существующих шаблонов billing-asut (без переписывания шаблонов). */

*{ 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:600; font-size:15px;
  color:var(--fg-primary); 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:rgba(0,0,0,.4); }
.nav-sidebar__spacer{ flex:1; }
.nav-sidebar__foot{ padding:var(--space-3); border-top:var(--bw-1) solid rgba(0,0,0,.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:rgba(0,0,0,.5); word-break:break-all; }

.nav-item--logout{ background:transparent; border:0; width:100%; text-align:left;
  font-family:inherit; font-size:inherit; cursor:pointer; padding-left:0; margin-top:var(--space-2); }

.app-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ position:sticky; top:0; z-index:5; justify-content:space-between; box-shadow:var(--elev-nav); }
.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__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%; }

/* ---------- 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; }

/* ============================================================
   МОСТ: бренд-стили для существующей (не переписанной) разметки
   шаблонов billing-asut — голые table/form.stack/button/ошибки.
============================================================ */

/* ---------- Таблицы (голые <table>, без .tbl/.table-wrap в разметке) ---------- */
table{
  width:100%; border-collapse:collapse; font-size:var(--t-body);
  background:var(--bg-surface); border:var(--bw-1) solid var(--border-subtle);
  border-radius:var(--r-lg); overflow:hidden; margin-bottom:var(--space-6);
}
th{
  text-align:left; font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-mono);
  text-transform:uppercase; font-weight:400; color:var(--fg-secondary);
  padding:var(--space-3) var(--space-4); border-bottom:var(--bw-1) solid var(--border-subtle);
  white-space:nowrap;
}
td{
  padding:var(--space-3) var(--space-4);
  border-bottom:var(--bw-1) solid var(--border-subtle);
  color:var(--fg-primary); vertical-align:middle;
}
tbody tr:hover td{ background:var(--bg-sunken); }
tr:last-child td{ border-bottom:0; }

.num{ font-variant-numeric:tabular-nums; text-align:right; font-family:var(--font-mono); }
tr.warn td{ background:var(--status-warn-bg); }
tr.danger td{ background:var(--status-bad-bg); }

/* ---------- Формы (class="stack" + голые label/input/select/textarea) ---------- */
form.stack{ display:flex; flex-direction:column; gap:var(--space-4); max-width:22rem; }
form.stack label{
  display:block; margin:var(--space-3) 0 var(--space-1);
  font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-mono);
  text-transform:uppercase; color:var(--fg-secondary);
}
form.stack input, form.stack select, form.stack textarea{
  display:block; width:22rem; max-width:100%; height:36px;
  font-family:var(--font-text); font-size:var(--t-body); color:var(--fg-primary);
  background:var(--bg-surface); border:var(--bw-1) solid var(--border-default);
  border-radius:var(--r-md); padding:0 var(--space-3);
}
form.stack textarea{ height:auto; min-height:96px; padding:var(--space-3); resize:vertical; }
form.stack input:focus, form.stack select:focus, form.stack textarea:focus{
  outline:none; border-color:var(--c-signal-500); box-shadow:0 0 0 2px var(--c-signal-100);
}
form.stack input[type="checkbox"], form.stack input[type="radio"]{ width:auto; height:auto; display:inline-block; }

/* ---------- Ошибки ---------- */
.error-text, .error{ color:var(--c-bad-500); }

/* ---------- Кнопки (голый <button>, без .btn в разметке) ----------
   Нейтральная (secondary/ghost) заливка: голых <button> в шаблонах
   часто несколько на странице (список подписок, переключатели статуса
   и т.п.), поэтому единственную синюю заливку (#0075de) им не дают —
   она зарезервирована под .btn.is-primary/.is-accent. */
button{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  height:36px; padding:0 var(--space-4);
  font-family:var(--font-text); font-weight:500; font-size:var(--t-body);
  border:var(--bw-1) solid var(--border-default); border-radius:var(--r-md);
  background:var(--bg-surface); color:var(--fg-primary); cursor:pointer;
  transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
button:hover{ background:rgba(0,0,0,.04); border-color:var(--border-strong); }
button:active{ background:rgba(0,0,0,.08); }
button:disabled{ opacity:.4; cursor:not-allowed; }

/* ---------- Спойлер page_help ---------- */
.page-help{ margin-bottom:var(--space-5); border:var(--bw-1) solid var(--border-subtle);
  border-radius:var(--r-md); background:var(--bg-sunken); }
.page-help summary{ cursor:pointer; padding:var(--space-3) var(--space-4); color:var(--fg-secondary);
  font-size:var(--t-caption); list-style:none; }
.page-help summary::-webkit-details-marker{ display:none; }
.page-help[open] summary{ border-bottom:var(--bw-1) solid var(--border-subtle); }
.page-help-body{ padding:var(--space-4); color:var(--fg-secondary); font-size:var(--t-body); }
.page-help-body :first-child{ margin-top:0; }
.page-help-body :last-child{ margin-bottom:0; }

/* ---------- Адаптив ---------- */
@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); }
}