/* ============================================================
   TGether — Design System (Rozdział 03)
   Komponenty produktowe. Domyślny tryb: jasny.
   Zależny od brand.css (tokeny kolorów, typografia).
   ============================================================ */

:root{
  /* — Promienie — */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px;

  /* — Elewacja / cienie — */
  --e1:0 1px 2px rgba(20,22,26,.06), 0 1px 1px rgba(20,22,26,.04);
  --e2:0 4px 14px -3px rgba(20,22,26,.10), 0 2px 4px -2px rgba(20,22,26,.06);
  --e3:0 16px 38px -10px rgba(20,22,26,.18), 0 4px 10px -4px rgba(20,22,26,.08);
  --e4:0 40px 90px -34px rgba(0,0,0,.40);

  /* — Stany semantyczne (ziemiste, w palecie marki) — */
  --ok:#2C4A3E;     --ok-tint:#E2EAE5;
  --warn:#9C7A24;   --warn-tint:#F0E8CF;
  --danger:#9E3B2E; --danger-tint:#F1DDD7;
  --info:#1E2A3A;   --info-tint:#DEE3EA;

  --ring:0 0 0 3px color-mix(in srgb, var(--copper) 30%, transparent);
  --ring-danger:0 0 0 3px color-mix(in srgb, var(--danger) 26%, transparent);
}

/* ---------- Sekcja specyfikacji ---------- */
.ds-eyebrow-row{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.ds-block{ margin-top:clamp(40px,5vw,72px); }
.ds-block + .ds-block{ margin-top:clamp(56px,7vw,104px); }
.ds-h{ font-size:clamp(22px,2.4vw,30px); font-weight:600; letter-spacing:-.02em; }
.ds-sub{ font-size:15px; line-height:1.55; color:var(--steel); max-width:64ch; margin-top:10px; }

.ds-canvas{ background:var(--paper); border:1px solid var(--bone); border-radius:var(--r-lg); padding:clamp(26px,3.4vw,44px); margin-top:26px; box-shadow:var(--e1); }
.ds-canvas.tight{ padding:clamp(20px,2.4vw,30px); }
.ds-canvas.dark{ background:var(--ink); border-color:color-mix(in srgb,var(--ivory) 12%,transparent); }

.state-lab{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); }
.dark .state-lab{ color:var(--titanium); }

.matrix{ display:grid; gap:22px 18px; }
.mx-row{ display:grid; grid-template-columns:120px repeat(5,1fr); align-items:center; gap:14px; }
@media(max-width:860px){ .mx-row{ grid-template-columns:1fr 1fr; } }
.mx-rowlab{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink); }
.mx-cell{ display:flex; flex-direction:column; gap:9px; align-items:flex-start; }

.row-wrap{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.col-wrap{ display:flex; flex-direction:column; gap:14px; }

/* ============ BUTTONS ============ */
.ds-btn{
  --bg:var(--ink); --fg:var(--ivory); --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:500; font-size:14px; line-height:1;
  padding:0 18px; height:44px; border-radius:var(--r-md);
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  cursor:pointer; transition:transform .14s ease, background .18s, box-shadow .18s, border-color .18s, color .18s;
  white-space:nowrap; user-select:none;
}
.ds-btn svg{ width:17px; height:17px; }
.ds-btn:hover, .ds-btn.s-hover{ background:color-mix(in srgb,var(--bg) 86%, #000); transform:translateY(-1px); box-shadow:var(--e2); }
.ds-btn:focus-visible, .ds-btn.s-focus{ outline:none; box-shadow:var(--ring); }
.ds-btn:active, .ds-btn.s-active{ transform:translateY(0); box-shadow:none; background:color-mix(in srgb,var(--bg) 74%, #000); }
.ds-btn:disabled, .ds-btn.s-disabled{ opacity:.42; cursor:not-allowed; transform:none; box-shadow:none; }

.ds-btn.copper{ --bg:var(--copper); --fg:#1B130E; }
.ds-btn.copper:hover, .ds-btn.copper.s-hover{ background:var(--copper-hi); }
.ds-btn.copper:active, .ds-btn.copper.s-active{ background:var(--copper-lo); }
.ds-btn.copper:focus-visible, .ds-btn.copper.s-focus{ box-shadow:var(--ring); }

.ds-btn.ghost{ --bg:transparent; --fg:var(--ink); --bd:color-mix(in srgb,var(--ink) 22%,transparent); }
.ds-btn.ghost:hover, .ds-btn.ghost.s-hover{ background:color-mix(in srgb,var(--ink) 5%,transparent); border-color:var(--ink); box-shadow:none; }
.ds-btn.ghost:active, .ds-btn.ghost.s-active{ background:color-mix(in srgb,var(--ink) 9%,transparent); }

.ds-btn.subtle{ --bg:color-mix(in srgb,var(--copper) 12%, var(--paper)); --fg:var(--copper-lo); }
.ds-btn.subtle:hover, .ds-btn.subtle.s-hover{ background:color-mix(in srgb,var(--copper) 20%, var(--paper)); box-shadow:none; }
.ds-btn.subtle:active, .ds-btn.subtle.s-active{ background:color-mix(in srgb,var(--copper) 28%, var(--paper)); }

.ds-btn.danger{ --bg:var(--danger); --fg:#fff; }
.ds-btn.danger:hover, .ds-btn.danger.s-hover{ background:color-mix(in srgb,var(--danger) 86%, #000); }
.ds-btn.danger:focus-visible, .ds-btn.danger.s-focus{ box-shadow:var(--ring-danger); }

.ds-btn.sm{ height:36px; font-size:13px; padding:0 14px; border-radius:var(--r-sm); }
.ds-btn.lg{ height:52px; font-size:15px; padding:0 24px; }
.ds-btn.icon{ width:44px; padding:0; }
.ds-btn.icon.sm{ width:36px; }

/* ============ INPUTS ============ */
.ds-field{ display:flex; flex-direction:column; gap:8px; max-width:340px; }
.ds-label{ font-size:13px; font-weight:500; color:var(--slate); letter-spacing:-.005em; }
.ds-label .opt{ color:var(--steel); font-weight:400; }
.ds-inputwrap{ position:relative; display:flex; align-items:center; }
.ds-inputwrap svg{ position:absolute; left:13px; width:17px; height:17px; color:var(--steel); pointer-events:none; }
.ds-inputwrap.has-icon .ds-input{ padding-left:38px; }
.ds-input{
  width:100%; height:44px; padding:0 14px; font-family:var(--sans); font-size:15px; color:var(--ink);
  background:#fff; border:1px solid color-mix(in srgb,var(--ink) 18%,transparent); border-radius:var(--r-md);
  transition:border-color .16s, box-shadow .16s, background .16s;
}
.ds-input::placeholder{ color:var(--titanium); }
.ds-input:hover, .ds-input.s-hover{ border-color:color-mix(in srgb,var(--ink) 34%,transparent); }
.ds-input:focus, .ds-input.s-focus{ outline:none; border-color:var(--copper); box-shadow:var(--ring); }
.ds-input:disabled, .ds-input.s-disabled{ background:var(--ivory); color:var(--steel); cursor:not-allowed; border-color:var(--bone); }
.ds-field.error .ds-input{ border-color:var(--danger); }
.ds-field.error .ds-input.s-focus, .ds-field.error .ds-input:focus{ box-shadow:var(--ring-danger); }
.ds-field.ok .ds-input{ border-color:var(--ok); }
.ds-hint{ font-size:12.5px; line-height:1.4; color:var(--steel); }
.ds-field.error .ds-hint{ color:var(--danger); }
.ds-field.ok .ds-hint{ color:var(--ok); }
textarea.ds-input{ height:auto; padding:12px 14px; resize:vertical; min-height:92px; line-height:1.5; }

/* select */
.ds-select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:40px; }
.ds-selectwrap .chev{ position:absolute; right:13px; left:auto; }

/* checkbox / radio / toggle */
.ds-check{ display:inline-flex; align-items:center; gap:11px; font-size:14px; color:var(--slate); cursor:pointer; }
.ds-box{ width:20px; height:20px; border-radius:5px; border:1.5px solid color-mix(in srgb,var(--ink) 28%,transparent); display:grid; place-items:center; transition:.16s; background:#fff; }
.ds-box svg{ width:13px; height:13px; color:#fff; opacity:0; transform:scale(.6); transition:.16s; }
.ds-check.on .ds-box{ background:var(--copper); border-color:var(--copper); }
.ds-check.on .ds-box svg{ opacity:1; transform:scale(1); }
.ds-box.radio{ border-radius:50%; }
.ds-toggle{ width:42px; height:24px; border-radius:999px; background:color-mix(in srgb,var(--ink) 20%,transparent); position:relative; transition:.2s; flex-shrink:0; }
.ds-toggle::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--e1); transition:.2s; }
.ds-toggle.on{ background:var(--copper); }
.ds-toggle.on::after{ left:20px; }

/* ============ DROPDOWN MENU ============ */
.ds-menu{ width:248px; background:#fff; border:1px solid var(--bone); border-radius:var(--r-lg); box-shadow:var(--e3); padding:7px; }
.ds-menu .grp{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); padding:9px 11px 5px; }
.ds-mi{ display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:var(--r-sm); font-size:14px; color:var(--slate); cursor:pointer; transition:.12s; }
.ds-mi svg{ width:16px; height:16px; color:var(--steel); }
.ds-mi:hover, .ds-mi.s-hover{ background:var(--ivory); color:var(--ink); }
.ds-mi.sel{ color:var(--copper-lo); }
.ds-mi.sel svg{ color:var(--copper); }
.ds-mi.danger{ color:var(--danger); }
.ds-mi.danger svg{ color:var(--danger); }
.ds-mi .kbd{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--titanium); }
.ds-menu hr{ border:0; height:1px; background:var(--bone); margin:6px 4px; }

/* ============ TABLE ============ */
.ds-tablewrap{ border:1px solid var(--bone); border-radius:var(--r-lg); overflow:hidden; background:#fff; }
.ds-table{ width:100%; border-collapse:collapse; font-size:14px; }
.ds-table thead th{ text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); font-weight:500; padding:13px 18px; background:var(--ivory); border-bottom:1px solid var(--bone); white-space:nowrap; }
.ds-table tbody td{ padding:15px 18px; border-bottom:1px solid color-mix(in srgb,var(--bone) 70%,transparent); color:var(--slate); vertical-align:middle; }
.ds-table tbody tr:last-child td{ border-bottom:0; }
.ds-table tbody tr{ transition:background .14s; }
.ds-table tbody tr:hover, .ds-table tbody tr.s-hover{ background:color-mix(in srgb,var(--copper) 4%,transparent); }
.ds-table tbody tr.sel{ background:color-mix(in srgb,var(--copper) 7%,transparent); }
.ds-table .num{ text-align:right; font-variant-numeric:tabular-nums; font-family:var(--sans); color:var(--ink); font-style:normal; }
.ds-table .lead{ font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.ds-avatar{ width:30px; height:30px; border-radius:50%; background:var(--graphite); color:var(--ivory); display:inline-grid; place-items:center; font-size:11px; font-weight:600; flex-shrink:0; }
.ds-cellflex{ display:flex; align-items:center; gap:11px; }

/* ============ BADGES / TAGS ============ */
.ds-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; line-height:1; padding:5px 10px; border-radius:var(--r-pill); letter-spacing:.01em; white-space:nowrap; }
.ds-badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.b-ok{ color:var(--ok); background:var(--ok-tint); }
.b-warn{ color:var(--warn); background:var(--warn-tint); }
.b-danger{ color:var(--danger); background:var(--danger-tint); }
.b-info{ color:var(--info); background:var(--info-tint); }
.b-neutral{ color:var(--steel); background:color-mix(in srgb,var(--steel) 14%, var(--paper)); }
.ds-badge.solid.b-ok{ background:var(--ok); color:#fff; }
.ds-badge.solid.b-warn{ background:var(--warn); color:#fff; }
.ds-badge.solid.b-danger{ background:var(--danger); color:#fff; }
.ds-badge.solid.b-copper{ background:var(--copper); color:#1B130E; }

.ds-chip{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--slate); padding:7px 12px; border:1px solid color-mix(in srgb,var(--ink) 16%,transparent); border-radius:var(--r-pill); background:#fff; transition:.14s; cursor:pointer; }
.ds-chip:hover, .ds-chip.s-hover{ border-color:var(--copper); color:var(--ink); }
.ds-chip.on{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.ds-chip .x{ width:14px; height:14px; opacity:.5; }
.ds-chip .x:hover{ opacity:1; }

/* ============ CARDS ============ */
.ds-card{ background:#fff; border:1px solid var(--bone); border-radius:var(--r-lg); padding:24px; box-shadow:var(--e1); }
.ds-card.pad-lg{ padding:30px; }
.ds-card.interactive{ transition:.18s; cursor:pointer; }
.ds-card.interactive:hover, .ds-card.interactive.s-hover{ box-shadow:var(--e3); transform:translateY(-3px); border-color:color-mix(in srgb,var(--ink) 14%,transparent); }
.kpi-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); }
.kpi-num{ font-size:34px; font-weight:600; letter-spacing:-.03em; color:var(--ink); margin-top:8px; font-variant-numeric:tabular-nums; }
.kpi-delta{ display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:500; margin-top:10px; }
.kpi-delta.up{ color:var(--ok); }
.kpi-delta.down{ color:var(--danger); }

/* ============ NOTIFICATIONS / TOASTS ============ */
.ds-toast{ display:flex; gap:13px; align-items:flex-start; background:#fff; border:1px solid var(--bone); border-left:3px solid var(--steel); border-radius:var(--r-md); padding:15px 16px; box-shadow:var(--e2); max-width:400px; }
.ds-toast .ic{ width:20px; height:20px; flex-shrink:0; margin-top:1px; }
.ds-toast .tt{ font-size:14px; font-weight:600; color:var(--ink); }
.ds-toast .tx{ font-size:13px; line-height:1.5; color:var(--steel); margin-top:3px; }
.ds-toast .close{ margin-left:auto; width:16px; height:16px; color:var(--titanium); cursor:pointer; flex-shrink:0; }
.ds-toast.ok{ border-left-color:var(--ok); } .ds-toast.ok .ic{ color:var(--ok); }
.ds-toast.warn{ border-left-color:var(--warn); } .ds-toast.warn .ic{ color:var(--warn); }
.ds-toast.danger{ border-left-color:var(--danger); } .ds-toast.danger .ic{ color:var(--danger); }
.ds-toast.info{ border-left-color:var(--copper); } .ds-toast.info .ic{ color:var(--copper); }

/* ============ DIALOG ============ */
.ds-dialog-stage{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:color-mix(in srgb,var(--ink) 38%, var(--graphite)); padding:38px; display:grid; place-items:center; min-height:300px; }
.ds-dialog{ width:min(420px,100%); background:#fff; border-radius:var(--r-lg); box-shadow:var(--e4); padding:26px; }
.ds-dialog .dt{ font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.ds-dialog .dx{ font-size:14px; line-height:1.55; color:var(--steel); margin-top:10px; }
.ds-dialog .acts{ display:flex; gap:10px; justify-content:flex-end; margin-top:24px; }

/* ============ SIDEBAR / HEADER ============ */
.ds-side{ width:240px; background:var(--ink); color:var(--mist); border-radius:var(--r-lg); padding:18px 14px; display:flex; flex-direction:column; gap:3px; }
.ds-side .brand{ display:flex; align-items:center; gap:10px; padding:6px 10px 18px; }
.ds-side .brand svg{ width:26px; color:var(--copper); }
.ds-side .brand .wm{ font-weight:600; letter-spacing:-.02em; color:var(--ivory); font-size:16px; }
.ds-side .sgrp{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); padding:14px 12px 6px; }
.ds-si{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-sm); color:var(--titanium); font-size:14px; cursor:pointer; transition:.14s; }
.ds-si svg{ width:17px; height:17px; }
.ds-si:hover, .ds-si.s-hover{ background:color-mix(in srgb,var(--ivory) 7%,transparent); color:var(--ivory); }
.ds-si.on{ background:color-mix(in srgb,var(--ivory) 10%,transparent); color:var(--ivory); }
.ds-si.on svg{ color:var(--copper); }
.ds-si .badge{ margin-left:auto; font-size:11px; font-weight:600; background:var(--copper); color:#1B130E; border-radius:999px; padding:2px 7px; }

.ds-topbar{ display:flex; align-items:center; gap:18px; background:#fff; border:1px solid var(--bone); border-radius:var(--r-lg); padding:12px 18px; }
.ds-crumb{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--steel); }
.ds-crumb .now{ color:var(--ink); font-weight:500; }
.ds-crumb .sl{ opacity:.4; }
.ds-topbar .search{ margin-left:8px; flex:1; max-width:280px; }
.ds-topbar .right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.ds-iconbtn{ width:38px; height:38px; border-radius:var(--r-sm); border:1px solid transparent; display:grid; place-items:center; color:var(--steel); cursor:pointer; position:relative; transition:.14s; }
.ds-iconbtn:hover{ background:var(--ivory); color:var(--ink); }
.ds-iconbtn .dot{ position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--copper); border:1.5px solid #fff; }

/* ============ PAGINATION ============ */
.ds-pag{ display:flex; align-items:center; gap:6px; }
.ds-pag a{ min-width:38px; height:38px; padding:0 10px; display:inline-grid; place-items:center; border-radius:var(--r-sm); font-size:14px; color:var(--slate); border:1px solid transparent; cursor:pointer; transition:.14s; font-variant-numeric:tabular-nums; }
.ds-pag a:hover{ background:var(--ivory); color:var(--ink); }
.ds-pag a.on{ background:var(--ink); color:var(--ivory); }
.ds-pag a.dis{ color:var(--titanium); cursor:not-allowed; }
.ds-pag .gap{ color:var(--titanium); }

/* ============ CHARTS ============ */
.ds-bars{ display:flex; align-items:flex-end; gap:10px; height:150px; }
.ds-bars .bar{ flex:1; background:color-mix(in srgb,var(--copper) 22%, var(--ivory)); border-radius:4px 4px 0 0; position:relative; transition:.2s; }
.ds-bars .bar.hi{ background:linear-gradient(var(--copper),var(--copper-lo)); }
.ds-spark{ width:100%; height:60px; display:block; }
.ds-donut{ display:flex; align-items:center; gap:20px; }
.ds-legend{ display:flex; flex-direction:column; gap:9px; font-size:13px; color:var(--slate); }
.ds-legend span{ display:inline-flex; align-items:center; gap:9px; }
.ds-legend i{ width:11px; height:11px; border-radius:3px; }

/* ============ PROGRESS ============ */
.ds-prog{ height:8px; border-radius:999px; background:var(--bone); overflow:hidden; }
.ds-prog i{ display:block; height:100%; background:linear-gradient(90deg,var(--copper),var(--copper-lo)); border-radius:999px; }

/* ============ STATES: empty / loading / error / success ============ */
.ds-state{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:46px 30px; gap:6px; }
.ds-state .glyph{ width:56px; height:56px; border-radius:var(--r-lg); display:grid; place-items:center; margin-bottom:14px; }
.ds-state .glyph svg{ width:26px; height:26px; }
.ds-state .st-t{ font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.ds-state .st-x{ font-size:14px; line-height:1.55; color:var(--steel); max-width:38ch; margin-top:4px; }
.ds-state .acts{ margin-top:18px; display:flex; gap:10px; }
.g-empty{ background:var(--ivory); color:var(--steel); }
.g-error{ background:var(--danger-tint); color:var(--danger); }
.g-ok{ background:var(--ok-tint); color:var(--ok); }

/* skeleton / loading */
.sk{ background:linear-gradient(90deg, var(--bone) 25%, color-mix(in srgb,var(--bone) 50%, var(--paper)) 37%, var(--bone) 63%); background-size:400% 100%; border-radius:6px; animation:sk 1.4s ease infinite; }
@keyframes sk{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }
@media(prefers-reduced-motion:reduce){ .sk{ animation:none; } }
.ds-spinner{ width:26px; height:26px; border-radius:50%; border:2.5px solid var(--bone); border-top-color:var(--copper); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){ .ds-spinner{ animation:none; } }

/* ---------- spec note rows ---------- */
.ds-notes{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; }
@media(max-width:860px){ .ds-notes{ grid-template-columns:1fr; } }
.ds-note{ border-top:1px solid var(--bone); padding-top:14px; }
.ds-note .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--copper-lo); }
.ds-note p{ font-size:13.5px; line-height:1.5; color:var(--steel); margin-top:8px; }

/* ---------- token displays ---------- */
.tok-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
@media(max-width:860px){ .tok-grid{ grid-template-columns:repeat(2,1fr); } }
.tok{ display:flex; flex-direction:column; gap:10px; }
.tok .demo{ height:80px; border-radius:var(--r-md); background:#fff; border:1px solid var(--bone); display:grid; place-items:center; }
.tok .nm{ font-size:13px; font-weight:600; color:var(--ink); }
.tok .vl{ font-family:var(--mono); font-size:11px; color:var(--steel); }

.shadow-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:860px){ .shadow-grid{ grid-template-columns:1fr 1fr; } }
.shadow-cell{ height:96px; border-radius:var(--r-md); background:#fff; display:grid; place-items:flex-end; padding:12px; }
.space-bar{ background:color-mix(in srgb,var(--copper) 22%,var(--ivory)); height:18px; border-radius:3px; }