/* ============================================
   DESIGN SYSTEM — Stripe-inspired
   ============================================ */

:root {
  /* === ЦВЕТА: НЕЙТРАЛЬНАЯ БАЗА === */
  --color-bg:           #FAFAFA;
  --color-surface:      #FFFFFF;
  --color-surface-2:    #F5F5F4;
  --color-border:       #E7E5E4;
  --color-border-strong:#D6D3D1;

  /* === ТЕКСТ === */
  --color-text-1:       #0C0A09;
  --color-text-2:       #44403C;
  --color-text-3:       #78716C;
  --color-text-4:       #A8A29E;

  /* === АКЦЕНТ (тёмный, премиальный) === */
  --color-accent:       #0F172A;
  --color-accent-hover: #1E293B;
  --color-accent-fg:    #FFFFFF;

  /* === СЕМАНТИЧЕСКИЕ ЦВЕТА === */
  --color-danger:       #DC2626;
  --color-danger-bg:    #FEF2F2;
  --color-danger-fg:    #991B1B;

  --color-warning:      #D97706;
  --color-warning-bg:   #FFFBEB;
  --color-warning-fg:   #92400E;

  --color-success:      #059669;
  --color-success-bg:   #ECFDF5;
  --color-success-fg:   #065F46;

  --color-info:         #2563EB;
  --color-info-bg:      #EFF6FF;
  --color-info-fg:      #1E40AF;

  --color-muted:        #6B7280;
  --color-muted-bg:     #F3F4F6;
  --color-muted-fg:     #374151;

  /* === ОТСТУПЫ (кратные 4) === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* === ТИПОГРАФИКА === */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* === СКРУГЛЕНИЯ === */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius:      8px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* === ТЕНИ === */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:    0 4px 8px rgba(15, 23, 42, 0.04), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 16px rgba(15, 23, 42, 0.06), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 16px 32px rgba(15, 23, 42, 0.08), 0 8px 16px rgba(15, 23, 42, 0.04);

  /* === ПЕРЕХОДЫ === */
  --transition-fast: 100ms ease;
  --transition:      150ms ease;
  --transition-slow: 250ms ease;

  /* === Z-INDEX === */
  --z-dropdown: 1000;
  --z-modal:    2000;
  --z-tooltip:  3000;
}

/* === БАЗОВЫЕ СТИЛИ === */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-1);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === ШАПКА ПРИЛОЖЕНИЯ === */

.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 56px;
  padding: var(--space-2) var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.app-header__brand {
  display: flex;
  align-items: center;
  min-width: 220px;
}

.app-logo {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-accent-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.app-brand-text {
  margin-left: var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-1);
}

.app-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-4);
  margin-right: auto;
}

.app-nav--marketplaces .nav-link--mp.active {
  font-weight: var(--weight-semibold);
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: color var(--transition), background var(--transition);
}

.nav-link:hover {
  color: var(--color-text-1);
  background: var(--color-surface-2);
}

.nav-link.active {
  color: var(--color-text-1);
}

.nav-link.active::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: -9px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

.nav-link.disabled {
  color: var(--color-text-4);
  cursor: not-allowed;
}

.app-profile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.app-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.app-profile-name {
  font-size: var(--text-sm);
  color: var(--color-text-2);
}

.app-header__tools {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.header-refresh-form {
  margin: 0;
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  min-height: 32px;
}

/* Числа во всех таблицах — табличные цифры */
table, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* === ТИПОГРАФИЧЕСКИЕ КЛАССЫ === */

.h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--color-text-1);
  margin: 0;
}

.h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--color-text-1);
  margin: 0;
}

.h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text-1);
  margin: 0;
}

.text-body {
  font-size: var(--text-base);
  color: var(--color-text-2);
}

.text-muted {
  font-size: var(--text-sm);
  color: var(--color-text-3);
}

.text-caption {
  font-size: var(--text-xs);
  color: var(--color-text-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--weight-medium);
}

/* === КНОПКИ === */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  user-select: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  border-color: var(--color-accent);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-1);
  border-color: var(--color-border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-2);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--color-surface-2);
  color: var(--color-text-1);
}

.btn-danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}

.btn-danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.btn-lg {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-base);
}

/* === КАРТОЧКИ === */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.card-padded {
  padding: var(--space-6);
}

.card-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.card-body {
  padding: var(--space-6);
}

/* === KPI КАРТОЧКА === */

.kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.kpi-label {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--weight-medium);
}

.kpi-value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.kpi-delta {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.kpi-delta-up    { color: var(--color-success); }
.kpi-delta-down  { color: var(--color-danger); }
.kpi-delta-flat  { color: var(--color-text-3); }

/* === БЕЙДЖИ ЗОН === */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px 10px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-sm);
  line-height: 1.4;
  white-space: nowrap;
}

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.badge-critical {
  background: var(--color-danger-bg);
  color: var(--color-danger-fg);
}
.badge-critical::before { background: var(--color-danger); }

.badge-low {
  background: var(--color-warning-bg);
  color: var(--color-warning-fg);
}
.badge-low::before { background: var(--color-warning); }

.badge-normal {
  background: var(--color-success-bg);
  color: var(--color-success-fg);
}
.badge-normal::before { background: var(--color-success); }

.badge-excess {
  background: var(--color-info-bg);
  color: var(--color-info-fg);
}
.badge-excess::before { background: var(--color-info); }

.badge-info {
  background: var(--color-info-bg);
  color: var(--color-info-fg);
}
.badge-info::before { background: var(--color-info); }

.badge-muted {
  background: var(--color-muted-bg);
  color: var(--color-muted-fg);
}
.badge-muted::before { background: var(--color-muted); }

.internal-warning-banner {
  width: 100%;
  padding: var(--space-3) var(--space-6);
  background: var(--color-warning-bg);
  color: var(--color-warning-fg);
  font-size: var(--text-sm);
  border-bottom: 1px solid #FCD34D;
  text-align: left;
}

/* === PAGE LAYOUT === */

.page-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-6);
}

.page-title {
  margin: 0;
}

.toolbar-card {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
}

.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.refresh-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-2);
}

.refresh-meta__title {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  line-height: 1.2;
}

.refresh-meta__time {
  font-size: var(--text-sm);
  color: var(--color-text-2);
  line-height: 1.35;
}

.filters-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  width: 100%;
}

.filter-field {
  min-width: 150px;
}

.muted {
  color: var(--color-text-3);
  font-size: var(--text-sm);
}

.page-note {
  margin: 0;
}

.section-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.alert {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.alert.success {
  background: var(--color-success-bg);
  color: var(--color-success-fg);
  border-color: color-mix(in srgb, var(--color-success) 45%, white);
}

.alert.error {
  background: var(--color-danger-bg);
  color: var(--color-danger-fg);
  border-color: color-mix(in srgb, var(--color-danger) 45%, white);
}

/* === ТАБЛИЦА === */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  white-space: nowrap;
}

.table tbody td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-1);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background: var(--color-surface-2);
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

.table .sku {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-2);
  letter-spacing: -0.01em;
}

.table .col-primary {
  font-weight: var(--weight-semibold);
  font-size: 15px;
  color: var(--color-text-1);
}

.table .num-muted {
  color: var(--color-text-2);
}

/* Контейнер таблицы — карточка вокруг */
.table-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  min-width: 0;
}

.table-scroll {
  overflow-x: auto;
}

.table-title {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-1);
}

/* === ФОРМЫ === */

.input, .select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: all var(--transition);
}

.input:focus, .select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.input.is-error {
  border-color: var(--color-danger);
}

.input.is-error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.input-error-text {
  font-size: var(--text-xs);
  color: var(--color-danger-fg);
  margin-top: var(--space-1);
}

.input:disabled, .select:disabled {
  background: var(--color-surface-2);
  color: var(--color-text-4);
  cursor: not-allowed;
}

.input-search {
  padding-left: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2378716C' stroke-width='1.8'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M13 13L17 17' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: var(--space-3) center;
  background-size: 14px 14px;
}

.toggle {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-2);
  transition: all var(--transition);
  appearance: none;
  cursor: pointer;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition);
}

.toggle:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.toggle:checked::after {
  transform: translateX(16px);
}

input[type=checkbox],
input[type=radio] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
}

input[type=checkbox] {
  border-radius: var(--radius-xs);
}

.label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-2);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* === ВСПОМОГАТЕЛЬНЫЕ === */

.stack { display: flex; flex-direction: column; }
.stack-2 { gap: var(--space-2); }
.stack-4 { gap: var(--space-4); }
.stack-6 { gap: var(--space-6); }
.stack-8 { gap: var(--space-8); }

.row { display: flex; align-items: center; }
.row-2 { gap: var(--space-2); }
.row-4 { gap: var(--space-4); }
.row-6 { gap: var(--space-6); }

.grid-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
  margin: var(--space-6) 0;
}

/* === CALLOUT === */

.callout {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid;
}

.callout-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  font-size: var(--text-md);
  line-height: 1;
}

.callout-body {
  flex: 1;
}

.callout-title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.callout-text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.callout-info {
  background: var(--color-info-bg);
  border-color: var(--color-info);
  color: var(--color-info-fg);
}

.callout-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
  color: var(--color-warning-fg);
}

.callout-success {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success-fg);
}

/* === ДИАЛОГ ПОДТВЕРЖДЕНИЯ === */

.confirm-dialog {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  width: min(100vw - 2rem, 420px);
  box-shadow: var(--shadow-lg);
  background: var(--color-surface);
}

.confirm-dialog::backdrop {
  background: rgba(12, 10, 9, 0.45);
}

.confirm-dialog__inner {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.confirm-dialog__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-1);
}

.confirm-dialog__summary {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--color-text-1);
  line-height: var(--leading-normal);
}

.confirm-dialog__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-2);
  line-height: var(--leading-normal);
}

.confirm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* === EXISTING SALES BLOCKS (MIGRATED LOOK) === */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4);
}

.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
}

.kpi-hint {
  color: var(--color-text-3);
  font-size: var(--text-xs);
}

.section-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.section-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.chart-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-4);
}

.chart-hint {
  margin: 0;
}

.chart-subtitle {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.chart-legend-hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-3);
}

.chart-wrap {
  position: relative;
  height: 300px;
  width: 100%;
}

.chart-wrap--medium {
  height: 260px;
}

.row-highlight {
  background: color-mix(in srgb, var(--color-info-bg) 55%, white);
}

/* === DASHBOARD (Обзор) === */

.dashboard-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dashboard-header {
  margin: 0;
}

.dashboard-freshness {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}

.freshness-details {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

.freshness-details__summary {
  cursor: pointer;
  color: var(--color-info);
  user-select: none;
}

.freshness-details__list {
  margin: var(--space-2) 0 0;
  padding-left: 1.1rem;
  color: var(--color-text-2);
}

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--space-4);
  align-items: start;
}

.dashboard-section {
  margin: 0;
}

.dashboard-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.dashboard-section__head .section-title {
  margin: 0;
}

.kpi-row--dashboard,
.kpi-row--compact {
  margin: 0;
}

.kpi-card--stub {
  opacity: 0.72;
}

.kpi-value--stub {
  color: var(--color-text-4);
}

.alert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.alert-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.alert-list__item--warning {
  background: var(--color-warning-bg);
  border-color: color-mix(in srgb, var(--color-warning) 35%, white);
}

.alert-list__item--success {
  background: var(--color-success-bg);
  border-color: color-mix(in srgb, var(--color-success) 35%, white);
}

.dashboard-mini-callout {
  margin: 0;
}

.dashboard-actions-today .section-title {
  margin-bottom: var(--space-3);
}

.action-today-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.action-today-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

.action-today-list__text {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-text-1);
}

.dashboard-sidebar {
  position: sticky;
  top: var(--space-4);
}

.sidebar-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.sidebar-subtitle {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-2);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar-nav a {
  color: var(--color-info);
  text-decoration: none;
  font-size: var(--text-sm);
}

.sidebar-nav a:hover {
  text-decoration: underline;
}

.sidebar-nav__soon {
  font-size: var(--text-xs);
}

.sidebar-status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar-status-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--color-text-3);
}

.sidebar-status-list__time {
  color: var(--color-text-2);
  font-size: var(--text-xs);
}

.sidebar-hint {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
}

.dashboard-legacy__summary {
  cursor: pointer;
  font-weight: var(--weight-semibold);
  color: var(--color-text-2);
}

.chart-wrap--mini {
  height: 180px;
}

.header-refresh-hint {
  font-size: var(--text-xs);
  white-space: nowrap;
}

.period-switch {
  align-items: center;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 420px;
}

.table-compact th,
.table-compact td {
  padding: var(--space-2) var(--space-3);
}

/* === LOGIN === */

.login-page {
  min-height: 100vh;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.login-shell {
  width: 100%;
  max-width: 420px;
}

.login-card {
  margin: 0;
}

.login-brand {
  text-align: center;
  margin-bottom: var(--space-6);
}

.login-logo {
  margin: 0 auto var(--space-3);
  width: 56px;
  height: 56px;
  font-size: var(--text-xl);
  line-height: 56px;
}

.login-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.login-subtitle {
  margin: var(--space-2) 0 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-submit {
  width: 100%;
  margin-top: var(--space-2);
}

.header-logout-form {
  margin: 0;
}