/* materiascope — WARSTWA KOMPONENTÓW.
   Wspólne klocki dla wszystkich ekranów. Zasada pracy: nowy ekran składa się
   STĄD i z prymitywów w tokens.css. Własny prefiks CSS (`.ap-*`, `.hist-*`)
   zakładamy dopiero wtedy, gdy klocka naprawdę nie da się tu uogólnić.
   Podgląd wszystkiego: /app/_ui

   Twarde zasady tego pliku: żadnego hexa (kolor wyłącznie z tokens.css),
   zero cieni, zero gradientów, zero bibliotek. */

/* ============================================================
   PRZEŁĄCZANIE MOTYWU
   Klasę zakłada i zdejmuje `msToggleTheme()` w base.html. Bez tego każda
   własność objęta `transition` zostaje po przełączeniu na barwie poprzedniego
   motywu aż do przeładowania strony.
   ============================================================ */
.ms-no-transition, .ms-no-transition *,
.ms-no-transition *::before, .ms-no-transition *::after {
  transition: none !important;
}

/* ============================================================
   RYTM — stos, wiersz, siatka.
   Istnieją po to, żeby przestać wklejać style="display:flex;gap:..." w szablony.
   ============================================================ */
.ms-stack        { display: flex; flex-direction: column; gap: var(--ms-4); }
.ms-stack--tight { gap: var(--ms-2); }
.ms-stack--loose { gap: var(--ms-6); }

.ms-row          { display: flex; align-items: center; gap: var(--ms-3); flex-wrap: wrap; }
.ms-row--between { justify-content: space-between; }
.ms-row--end     { justify-content: flex-end; }
.ms-row--baseline{ align-items: baseline; }

.ms-grid    { display: grid; gap: var(--ms-4); }
.ms-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ms-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .ms-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .ms-grid--2, .ms-grid--3, .ms-grid--4 { grid-template-columns: 1fr; } }

/* ============================================================
   PRZYCISKI — warianty jednej klasy `.ms-btn` (tokens.css).
   Nie zakładamy `.xy-btn` na kolejnym ekranie.
   ============================================================ */
.ms-btn--sm { padding: 7px 14px; font-size: 13px; }
.ms-btn--xs { padding: 5px 10px; font-size: 12px; border-radius: var(--ms-r-sm); }

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

.ms-btn--danger       { border-color: color-mix(in srgb, var(--ms-risk) 45%, transparent); color: var(--ms-risk); }
.ms-btn--danger:hover { background: color-mix(in srgb, var(--ms-risk) 10%, transparent); border-color: var(--ms-risk); }

.ms-btn[disabled], .ms-btn[aria-disabled="true"] {
  color: var(--ms-text-dis); border-color: var(--ms-line);
  background: transparent; cursor: not-allowed;
}
.ms-btn--primary[disabled] { background: var(--ms-surface-2); border-color: var(--ms-line); }

/* ============================================================
   PANEL — karta z wierszem nagłówka. Do list, wyników, sekcji z akcją.
   Bez nagłówka wystarcza `.ms-card` z tokens.css.
   ============================================================ */
.ms-panel {
  background: var(--ms-surface); border: 1px solid var(--ms-line);
  border-radius: var(--ms-r-lg);
}
.ms-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ms-3);
  padding: var(--ms-4) var(--ms-5); border-bottom: 1px solid var(--ms-line);
}
.ms-panel-body { padding: var(--ms-5); }
.ms-panel-body > * + * { margin-top: var(--ms-4); }

/* ============================================================
   KAFEL POMIARU — etykieta, liczba monospacem, jednostka, źródło.
   To jest komponent firmowy: reguła 2 mówi, że bez źródła liczby nie
   pokazujemy, więc źródło jest tu częścią klocka, nie ozdobą.
   ============================================================ */
.ms-tile {
  background: var(--ms-surface); border: 1px solid var(--ms-line);
  border-radius: var(--ms-r-lg); padding: var(--ms-4) var(--ms-5);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--ms-2);
  transition: border-color var(--ms-base) var(--ms-ease);
}
.ms-tile:hover              { border-color: var(--ms-line-2); }
.ms-tile[data-selected]     { border-color: var(--ms-ember); }
.ms-tile .ms-tile-value     { display: flex; align-items: baseline; color: var(--ms-text); }
/* Wartość przewidziana przez model — 60 % krycia, jak `predicted` na wykresie. */
.ms-tile[data-confidence="predicted"] .ms-tile-value { opacity: .6; }

/* ============================================================
   TABELA DANYCH — kolumny liczbowe przez `data-num`.
   Liczby idą monospacem, tabularnie i do prawej, żeby rząd wielkości
   dało się czytać pionowo, bez porównywania cyfra po cyfrze.
   ============================================================ */
.ms-table-wrap {
  overflow-x: auto; border: 1px solid var(--ms-line);
  border-radius: var(--ms-r-lg); background: var(--ms-surface);
}
.ms-table { width: 100%; border-collapse: collapse; font: 400 13.5px/1.5 var(--ms-font); }
.ms-table th {
  text-align: left; padding: var(--ms-3) var(--ms-4); white-space: nowrap;
  border-bottom: 1px solid var(--ms-line);
  font: 500 11px/1 var(--ms-font); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ms-text-3);
}
.ms-table td { padding: var(--ms-3) var(--ms-4); border-bottom: 1px solid var(--ms-line); color: var(--ms-text-2); }
.ms-table tbody tr:last-child td { border-bottom: 0; }
.ms-table tbody tr:hover { background: var(--ms-surface-2); }
.ms-table td[data-num] {
  text-align: right; color: var(--ms-text);
  font-family: var(--ms-mono); font-variant-numeric: tabular-nums;
}
.ms-table th[data-num] { text-align: right; }

/* ============================================================
   NOTKA — jeden komponent na wszystkie cztery znaczenia semantyczne.
   Zastępuje `.error-box` (== [data-kind="risk"]) i `.notice-box`.
   ============================================================ */
.ms-note {
  border: 1px solid var(--ms-line); background: var(--ms-surface);
  border-radius: var(--ms-r-md); padding: var(--ms-3) var(--ms-4);
  font: 400 13.5px/1.55 var(--ms-font); color: var(--ms-text-2);
}
.ms-note[data-kind="info"] { border-color: color-mix(in srgb, var(--ms-info) 40%, transparent); background: color-mix(in srgb, var(--ms-info) 8%, transparent); }
.ms-note[data-kind="ok"]   { border-color: color-mix(in srgb, var(--ms-ok)   40%, transparent); background: color-mix(in srgb, var(--ms-ok)   8%, transparent); }
.ms-note[data-kind="warn"] { border-color: color-mix(in srgb, var(--ms-warn) 40%, transparent); background: color-mix(in srgb, var(--ms-warn) 8%, transparent); }
.ms-note[data-kind="risk"] { border-color: color-mix(in srgb, var(--ms-risk) 40%, transparent); background: color-mix(in srgb, var(--ms-risk) 8%, transparent); }
.ms-note strong { color: var(--ms-text); font-weight: 600; }

/* ============================================================
   STAN PUSTY — jeden na cały produkt.
   Dziś to samo robią osobno `.chat-empty`, `.ap-empty`, `.hist-empty`.
   ============================================================ */
.ms-empty {
  border: 1px dashed var(--ms-line-2); border-radius: var(--ms-r-lg);
  padding: var(--ms-7) var(--ms-5); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--ms-3);
}
.ms-empty--inline { padding: var(--ms-5) var(--ms-4); }

/* ============================================================
   POLE FORMULARZA — podpowiedź i błąd w komplecie.
   `input/label` stylizuje global.css; tu jest tylko obudowa.
   ============================================================ */
.ms-field { margin-bottom: var(--ms-4); }
.ms-field .ms-field-hint { margin-top: var(--ms-1); font: 400 12px/1.5 var(--ms-font); color: var(--ms-text-3); }
.ms-field .ms-field-err  { margin-top: var(--ms-1); font: 400 12px/1.5 var(--ms-font); color: var(--ms-risk); }
.ms-field[data-invalid] input,
.ms-field[data-invalid] select,
.ms-field[data-invalid] textarea { border-color: var(--ms-risk); }
.ms-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ms-3); }
.ms-label-row .ms-optional { font: 400 12px/1 var(--ms-mono); color: var(--ms-text-4); }

/* ============================================================
   PRZEŁĄCZNIK SEGMENTOWY — tryby czatu, filtry statusu, zakresy.
   Aktywny segment jedzie Emberem (reguła 1: Ember prowadzi akcję).
   ============================================================ */
.ms-seg {
  display: inline-flex; background: var(--ms-surface);
  border: 1px solid var(--ms-line); border-radius: var(--ms-r-md); overflow: hidden;
}
.ms-seg > button {
  background: none; border: 0; cursor: pointer;
  padding: 8px 14px; font: 500 13px/1 var(--ms-font); color: var(--ms-text-3);
  border-right: 1px solid var(--ms-line);
  transition: color var(--ms-fast) var(--ms-ease), background var(--ms-fast) var(--ms-ease);
}
.ms-seg > button:last-child { border-right: 0; }
.ms-seg > button:hover { color: var(--ms-text); background: var(--ms-surface-2); }
.ms-seg > button[aria-pressed="true"] { background: var(--ms-ember-08); color: var(--ms-ember); }

/* ============================================================
   STAN ZAJĘTOŚCI — ruch firmowy „focus”, nigdy kręcące się kółko.
   ============================================================ */
.ms-busy { display: inline-flex; align-items: center; gap: var(--ms-2); color: var(--ms-text-3); }
.ms-busy .ms-busy-label { font: 400 12px/1 var(--ms-mono); letter-spacing: .04em; }

/* ============================================================
   DROBIAZGI
   ============================================================ */
/* Nazwa klasy / tokenu w tekście — wzornik i dokumentacja. */
.ms-code {
  font: 400 12px/1.5 var(--ms-mono); color: var(--ms-text-2);
  background: var(--ms-surface-2); border: 1px solid var(--ms-line);
  border-radius: var(--ms-r-sm); padding: 2px 6px;
}
/* Para etykieta–wartość w wierszu (metadane pod nagłówkiem). */
.ms-meta { display: flex; flex-wrap: wrap; gap: var(--ms-2) var(--ms-5); }
.ms-meta > div { display: flex; align-items: baseline; gap: var(--ms-2); }
.ms-meta dt { font: 400 12px/1.5 var(--ms-font); color: var(--ms-text-3); margin: 0; }
.ms-meta dd { margin: 0; font: 400 13px/1.5 var(--ms-mono); font-variant-numeric: tabular-nums; color: var(--ms-text); }