/* Компоненты дизайн-системы: AppShell, кнопки, поля, карточки, таблицы, бейджи,
   combobox, drawer, dialog, toast, auth-card. */

/* ---------- App Shell ---------- */
.app-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--color-sidebar); color: var(--color-sidebar-text);
  display: flex; flex-direction: column; padding: var(--space-4) var(--space-3);
  gap: var(--space-1); position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand { display:flex; align-items:center; gap:10px; color:#fff; font-weight:700;
  font-size:16px; padding: var(--space-2) var(--space-2) var(--space-4); }
.sidebar .brand .dot { width:10px; height:10px; border-radius:3px; background: var(--color-danger); }
.sidebar .nav-label { font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--color-text-tertiary); margin: var(--space-4) var(--space-2) var(--space-1); }
.sidebar a.nav-item, .sidebar button.nav-item {
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius: var(--radius-md);
  color: var(--color-sidebar-text); background:none; border:none; width:100%; cursor:pointer;
  font-size: var(--font-size-body); text-align:left; text-decoration:none; position:relative;
}
.sidebar a.nav-item:hover, .sidebar button.nav-item:hover { background: var(--color-sidebar-hover); color:#fff; text-decoration:none; }
.sidebar a.nav-item.active { background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); font-weight:600; }
.sidebar a.nav-item.active::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:2px; background: var(--color-accent); }
.sidebar .nav-icon { width:18px; height:18px; flex:0 0 18px; stroke: currentColor; fill:none; stroke-width:1.8; }
.sidebar .spacer { flex:1; }

.main { display:flex; flex-direction:column; min-width:0; }
.topbar { height:60px; background: var(--color-surface); border-bottom:1px solid var(--color-border);
  display:flex; align-items:center; gap: var(--space-4); padding:0 var(--space-6); position:sticky; top:0; z-index:5; }
.topbar .crumbs { color: var(--color-text-secondary); font-size:13px; display:flex; gap:8px; align-items:center; }
.topbar .spacer { flex:1; }
.workarea { padding: var(--space-6); display:flex; flex-direction:column; gap: var(--space-5); }

/* ---------- Cards ---------- */
.card { background: var(--color-surface); border:1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.card h3 { font-size: var(--font-size-section); }
.kpi-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: var(--space-4); }
.kpi { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); }
.kpi .kpi-label { font-size: var(--font-size-caption); color: var(--color-text-secondary); }
.kpi .kpi-value { font-size: var(--font-size-kpi); font-weight:700; margin-top:6px; color: var(--color-text-primary);
  font-variant-numeric: tabular-nums; }
.kpi .kpi-sub { font-size:12px; color: var(--color-text-tertiary); margin-top:4px; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font: inherit; font-weight:500; padding:9px 14px; border-radius: var(--radius-md);
  border:1px solid var(--color-border-strong); background: var(--color-surface);
  color: var(--color-text-primary); cursor:pointer; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--color-surface-secondary); }
.btn:disabled { background: var(--color-disabled-bg); color: var(--color-disabled-text); cursor:not-allowed; border-color: var(--color-border); }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color:#fff; }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-primary:active { background: var(--color-accent-active); }
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); color:#fff; }
.btn-danger:hover { filter: brightness(.95); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--color-surface-secondary); }
.btn-sm { padding:6px 10px; font-size:13px; }
.btn-block { width:100%; }

/* ---------- Inputs ---------- */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom: var(--space-4); }
.field label { font-size:13px; font-weight:500; color: var(--color-text-primary); }
.input, select.input, textarea.input {
  width:100%; font: inherit; padding:9px 11px; border:1px solid var(--color-border-strong);
  border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-primary); }
.input:focus { border-color: var(--color-accent); outline:none; box-shadow:0 0 0 3px var(--color-accent-soft); }
.input:disabled { background: var(--color-disabled-bg); color: var(--color-disabled-text); }
.field .hint { font-size:12px; color: var(--color-text-secondary); }
.field .err { font-size:12px; color: var(--color-danger); }

/* ---------- Badges / Alerts ---------- */
.badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500;
  padding:2px 9px; border-radius:999px; background: var(--color-surface-sunken); color: var(--color-text-secondary); }
/* На светлом soft-фоне текст — тёмные варианты цвета (читаемость, WCAG AA) */
.badge-success { background: var(--color-success-soft); color: var(--color-success-strong); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning-strong); }
.badge-danger { background: var(--color-danger-soft); color: var(--color-danger-strong); }
.badge-info { background: var(--color-information-soft); color: var(--color-accent-active); }
.badge-dot::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; }

.alert { border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  display:flex; gap:10px; align-items:flex-start; }
.alert-info { background: var(--color-information-soft); border-color: #B8E6FF; }
.alert-warning { background: var(--color-warning-soft); border-color: #FFE9A3; }
.alert-danger { background: var(--color-danger-soft); border-color: #FFC9BC; }
.alert-success { background: var(--color-success-soft); border-color: #CBEBB3; }

/* Фирменная 4-цветная полоса — редкий акцент (hero/auth/разделитель) */
.brand-stripe { height:4px; border-radius:2px; background: var(--brand-stripe); }

/* ---------- Tables ---------- */
.table-wrap { border:1px solid var(--color-border); border-radius: var(--radius-lg); overflow:hidden; background: var(--color-surface); }
.table-scroll { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; font-size: var(--font-size-body); }
table.data thead th { position:sticky; top:0; background: var(--color-surface-secondary);
  text-align:left; font-weight:600; color: var(--color-text-secondary); font-size:13px;
  padding:12px 14px; border-bottom:1px solid var(--color-border); white-space:nowrap; }
table.data tbody td { padding:11px 14px; border-bottom:1px solid var(--color-border); height:44px; }
table.data tbody tr:nth-child(even) { background: var(--color-surface-secondary); }
table.data tbody tr:hover { background: var(--color-accent-soft); }
table.data tbody tr.selected { background: var(--color-accent-soft); }

/* ---------- Project cards ---------- */
.project-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: var(--space-4); }
.project-card { display:flex; flex-direction:column; gap:8px; background: var(--color-surface);
  border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm);
  transition: box-shadow .12s, border-color .12s; }
.project-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.project-card .pc-head { display:flex; align-items:center; gap:10px; }
.project-card .pc-icon { width:36px; height:36px; border-radius: var(--radius-md); background: var(--color-accent-soft);
  color: var(--color-accent); display:flex; align-items:center; justify-content:center; font-weight:700; }
.project-card .pc-name { font-weight:600; }
.project-card .pc-desc { color: var(--color-text-secondary); font-size:13px; min-height:36px; }
.project-card .pc-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }

/* ---------- Auth ---------- */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding: var(--space-6);
  background: var(--brand-glow), var(--color-background); }
.auth-card { position:relative; width:100%; max-width:400px; background: var(--color-surface); border:1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-8); overflow:hidden; }
/* Фирменная полоса по верхнему краю карточки входа */
.auth-card::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background: var(--brand-stripe); }
.auth-card .brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; margin-bottom: var(--space-2); }
.auth-card .brand .dot { width:10px; height:10px; border-radius:3px; background: var(--color-danger); }
.auth-card .subtitle { color: var(--color-text-secondary); margin-bottom: var(--space-6); }
.auth-card .links { margin-top: var(--space-4); display:flex; justify-content:space-between; font-size:13px; }
.pw-reqs { font-size:12px; color: var(--color-text-secondary); margin-top:-8px; margin-bottom: var(--space-4); }

/* ---------- Searchable combobox ---------- */
.combobox { position:relative; }
.combobox .cb-input { width:100%; }
.combobox .cb-list { position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px);
  background: var(--color-surface); border:1px solid var(--color-border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); max-height:260px; overflow-y:auto; display:none; }
.combobox.open .cb-list { display:block; }
.combobox .cb-opt { padding:8px 11px; cursor:pointer; white-space:normal; word-break:break-word; }
.combobox .cb-opt:hover, .combobox .cb-opt.active { background: var(--color-accent-soft); }
.combobox .cb-empty { padding:10px 11px; color: var(--color-text-tertiary); }

/* ---------- Drawer / Dialog / Toast ---------- */
.drawer-back { position:fixed; inset:0; background: rgba(17,46,88,.32); opacity:0; pointer-events:none; transition:opacity .15s; z-index:40; }
.drawer-back.open { opacity:1; pointer-events:auto; }
.drawer { position:fixed; top:0; right:0; height:100vh; width:min(560px,92vw); background: var(--color-surface);
  box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .18s; z-index:41; overflow-y:auto; padding: var(--space-6); }
.drawer.open { transform:translateX(0); }
.toasts { position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:60; }
.toast { background: var(--color-text-primary); color:#fff; padding:10px 14px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); font-size:13px; max-width:360px; }
.toast.err { background: var(--color-danger); }

/* ---------- States ---------- */
.state { text-align:center; padding: var(--space-8); color: var(--color-text-secondary); }
.spinner { width:18px; height:18px; border:2px solid var(--color-border-strong); border-top-color: var(--color-accent);
  border-radius:50%; animation: spin .7s linear infinite; display:inline-block; vertical-align:-3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position:fixed; z-index:50; width:248px; transform:translateX(-100%); transition:transform .18s; }
  .sidebar.open { transform:translateX(0); }
}