/* ============================================================
   Wycena Web — Component Layer
   Klasy używające tokenów z tokens.css. Framework-agnostic.
   Wystarczy <link rel="stylesheet" href="tokens.css">
              <link rel="stylesheet" href="components.css">
   ============================================================ */

/* ---------- TYPOGRAPHY ---------- */
.t-display  { font-size: var(--fs-44); font-weight: var(--fw-bold);    line-height: var(--lh-tight); letter-spacing: -.025em; }
.t-h1       { font-size: var(--fs-32); font-weight: var(--fw-bold);    line-height: var(--lh-tight); letter-spacing: -.02em; }
.t-h2       { font-size: var(--fs-24); font-weight: var(--fw-semibold);line-height: var(--lh-snug);  letter-spacing: -.015em; }
.t-h3       { font-size: var(--fs-20); font-weight: var(--fw-semibold);line-height: var(--lh-snug); }
.t-h4       { font-size: var(--fs-18); font-weight: var(--fw-semibold);line-height: var(--lh-snug); }
.t-body     { font-size: var(--fs-13); line-height: var(--lh-base); }
.t-body-lg  { font-size: var(--fs-15); line-height: var(--lh-base); }
.t-helper   { font-size: var(--fs-12); color: var(--c-text-muted); line-height: var(--lh-base); }
.t-caption  { font-size: var(--fs-11); color: var(--c-text-muted); letter-spacing: .06em; text-transform: uppercase; font-weight: var(--fw-semibold); }
.t-mono     { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-muted    { color: var(--c-text-muted); }
.t-subtle   { color: var(--c-text-subtle); }
.t-link     { color: var(--c-text-link); }
@media (max-width: 767px) {
  .t-display { font-size: var(--fs-32); }
  .t-h1      { font-size: var(--fs-24); }
  .t-h2      { font-size: var(--fs-20); }
}

/* ---------- BUTTON ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-ui); font-size: var(--fs-13); font-weight: var(--fw-medium);
  color: var(--c-text);
  background: var(--c-surface-1);
  border: 1px solid var(--c-surface-3);
  border-radius: var(--r-md);
  padding: 0 var(--s-4);
  height: var(--hit-desktop);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn:hover    { background: var(--c-surface-2); border-color: var(--c-surface-4); }
.btn:active   { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary {
  background: var(--grad-primary); border-color: var(--c-blue-500); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.btn--primary:hover  { background: var(--grad-primary-h); border-color: var(--c-blue-400); }
.btn--primary:active { background: var(--c-blue-600); }

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

.btn--danger  { color: var(--c-red-400); border-color: var(--c-surface-3); background: transparent; }
.btn--danger:hover { background: rgba(248,81,73,.1); border-color: var(--c-red-500); }

.btn--sm  { height: 30px; padding: 0 var(--s-3); font-size: var(--fs-12); }
.btn--lg  { height: 48px; padding: 0 var(--s-5); font-size: var(--fs-14); }
.btn--icon { padding: 0; width: var(--hit-desktop); }
.btn--icon.btn--lg { width: 48px; }
.btn--block { width: 100%; }

@media (hover: none) {
  .btn    { height: var(--hit-touch); }
  .btn--icon { width: var(--hit-touch); }
}

/* ---------- INPUT ---------- */
.input {
  display: block; width: 100%;
  font-family: var(--font-ui); font-size: var(--fs-13); color: var(--c-text);
  background: var(--c-surface-1);
  border: 1px solid var(--c-surface-3);
  border-radius: var(--r-md);
  padding: 0 var(--s-3);
  height: var(--hit-desktop);
  outline: none;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.input:hover { border-color: var(--c-surface-4); }
.input:focus { border-color: var(--c-blue-500); background: var(--c-surface-1); }
.input::placeholder { color: var(--c-text-subtle); }
.input--mono { font-family: var(--font-mono); }
.input--right { text-align: right; }

/* Group: input + unit */
.input-group {
  display: flex; align-items: center;
  background: var(--c-surface-1); border: 1px solid var(--c-surface-3); border-radius: var(--r-md);
  height: var(--hit-desktop); padding: 0 var(--s-3);
}
.input-group:focus-within { border-color: var(--c-blue-500); }
.input-group .input {
  background: transparent; border: none; padding: 0; height: 100%;
}
.input-group__unit { font-size: var(--fs-11); color: var(--c-text-muted); margin-left: var(--s-2); }

/* ---------- FIELD (label+input wrapper) ---------- */
.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field__label { font-size: var(--fs-11); color: var(--c-text-muted); letter-spacing: .04em; text-transform: uppercase; font-weight: var(--fw-semibold); }
.field__hint  { font-size: var(--fs-11); color: var(--c-text-subtle); }

/* ---------- CARD ---------- */
.card {
  background: var(--c-surface-1);
  border: 1px solid var(--c-surface-3);
  border-radius: var(--r-xl);
}
.card__head { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-surface-2);
              display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.card__title { font-size: var(--fs-11); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-muted); }
.card__body { padding: var(--s-4); }
.card--flat { background: transparent; border-color: var(--c-surface-3); }

/* ---------- SECTION (replaces GroupBox stack) ---------- */
.section { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5) 0; border-top: 1px solid var(--c-surface-2); }
.section:first-of-type { border-top: none; padding-top: 0; }
.section__title { font-size: var(--fs-11); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); }
.section__header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }

/* ---------- PILL / CHIP ---------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--fs-12); padding: 4px 10px; border-radius: var(--r-full);
  background: var(--c-surface-1); border: 1px solid var(--c-surface-3); color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.pill--accent  { background: rgba(31,111,235,.12); border-color: rgba(31,111,235,.35); color: var(--c-text-link-2); }
.pill--success { background: rgba(63,185,80,.12); border-color: rgba(63,185,80,.35); color: var(--c-green-400); }
.pill--warn    { background: rgba(210,153,34,.12); border-color: rgba(210,153,34,.35); color: var(--c-yellow-500); }
.pill--danger  { background: rgba(248,81,73,.12); border-color: rgba(248,81,73,.35); color: var(--c-red-400); }
.pill--dot::before { content:''; width: 6px; height: 6px; border-radius: 3px; background: currentColor; margin-right: 2px; }

/* ---------- SEGMENTED CONTROL ---------- */
.seg {
  display: inline-flex; background: var(--c-surface-0); border: 1px solid var(--c-surface-3);
  border-radius: var(--r-md); padding: 3px;
}
.seg__item {
  display: inline-flex; align-items: center; gap: var(--s-1);
  background: transparent; border: 1px solid transparent; color: var(--c-text-muted);
  font-size: var(--fs-12); font-weight: var(--fw-medium);
  padding: 6px var(--s-3); border-radius: var(--r-sm); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.seg__item:hover { color: var(--c-text); }
.seg__item[aria-selected="true"], .seg__item.is-active {
  background: var(--c-surface-2); border-color: var(--c-surface-3); color: var(--c-text);
}

/* ---------- TOGGLE ---------- */
.toggle { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; }
.toggle__track {
  width: 32px; height: 18px; border-radius: var(--r-full); background: var(--c-surface-3);
  position: relative; transition: background var(--dur-fast);
  flex-shrink: 0;
}
.toggle__thumb {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 7px;
  background: #fff; transition: left var(--dur-fast) var(--ease-out);
}
.toggle input { display: none; }
.toggle input:checked + .toggle__track { background: var(--c-blue-500); }
.toggle input:checked + .toggle__track .toggle__thumb { left: 16px; }

/* ---------- CHECKBOX / RADIO ---------- */
.check, .radio { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; font-size: var(--fs-13); }
.check__box {
  width: 18px; height: 18px; border: 1px solid var(--c-surface-3); border-radius: var(--r-xs);
  background: var(--c-surface-1); display: inline-flex; align-items: center; justify-content: center;
}
.check input { display:none; }
.check input:checked + .check__box { background: var(--c-blue-500); border-color: var(--c-blue-500); }
.check input:checked + .check__box::after {
  content: ''; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
}
.radio__box { width: 18px; height: 18px; border: 1px solid var(--c-surface-3); border-radius: 9px;
              background: var(--c-surface-1); display: inline-flex; align-items: center; justify-content: center; }
.radio input { display:none; }
.radio input:checked + .radio__box { background: var(--c-blue-500); border-color: var(--c-blue-500); }
.radio input:checked + .radio__box::after { content:''; width:6px; height:6px; border-radius:3px; background:#fff; }

/* ---------- CALLOUT ---------- */
.callout {
  display: flex; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: rgba(31,111,235,.08); border-left: 3px solid var(--c-blue-500);
  font-size: var(--fs-13); line-height: var(--lh-base);
}
.callout--warn { background: rgba(210,153,34,.08); border-left-color: var(--c-yellow-500); }
.callout--danger { background: rgba(248,81,73,.08); border-left-color: var(--c-red-500); }

/* ---------- DIVIDER ---------- */
.hr { border: none; height: 1px; background: var(--c-surface-2); margin: var(--s-4) 0; }

/* ---------- TABLE ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.table th {
  text-align: left; padding: var(--s-2) var(--s-3); color: var(--c-text-link);
  font-weight: var(--fw-semibold); border-bottom: 1px solid var(--c-surface-3);
  background: var(--c-surface-0);
}
.table td {
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--c-surface-2);
}
.table tr:nth-child(even) td { background: rgba(22,27,34,.4); }
.table .num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- LIST ITEM (file row, list option) ---------- */
.row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-md); cursor: pointer;
  border: 1px solid transparent; transition: background var(--dur-fast), border-color var(--dur-fast);
}
.row:hover { background: var(--c-surface-2); }
.row[aria-selected="true"], .row.is-selected {
  background: rgba(31,111,235,.15); border-color: rgba(31,111,235,.4);
}
.row__title { font-size: var(--fs-13); color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__meta  { font-size: var(--fs-11); color: var(--c-text-muted); margin-top: 2px; display: flex; gap: var(--s-2); }

/* ---------- TOOLBAR ---------- */
.toolbar {
  height: var(--layout-toolbar-h);
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-4);
  background: var(--c-surface-0);
  border-bottom: 1px solid var(--c-surface-2);
}
.toolbar__divider { width: 1px; height: 24px; background: var(--c-surface-3); }
.toolbar__spacer  { flex: 1; }

/* ---------- LAYOUT — App shell (desktop default) ---------- */
.shell {
  min-height: 100vh; display: grid; grid-template-rows: auto 1fr;
}
.shell__body {
  display: grid; grid-template-columns: var(--layout-sidebar) 1fr var(--layout-panel);
  min-height: 0;
}
.shell__sidebar  { background: var(--c-surface-0); border-right: 1px solid var(--c-surface-2); overflow-y: auto; }
.shell__main     { display: flex; flex-direction: column; min-width: 0; }
.shell__panel    { background: var(--c-surface-0); border-left: 1px solid var(--c-surface-2); overflow-y: auto; }

@media (max-width: 1279px) {
  .shell__body { grid-template-columns: 1fr; }
  .shell__sidebar,
  .shell__panel { display: none; }
  .shell__sidebar.is-open,
  .shell__panel.is-open {
    display: block;
    position: fixed; top: var(--layout-toolbar-h); bottom: 0; z-index: var(--z-overlay);
    width: min(340px, 90vw); box-shadow: var(--elev-pop);
  }
  .shell__sidebar.is-open { left: 0; }
  .shell__panel.is-open   { right: 0; }
}

/* ---------- SHEET (mobile bottom sheet) ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: var(--z-modal);
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-modal) + 1);
  background: var(--c-surface-0); border: 1px solid var(--c-surface-3);
  border-top-left-radius: var(--r-2xl); border-top-right-radius: var(--r-2xl);
  padding: var(--s-2) var(--s-4) var(--s-6);
  max-height: 85vh; overflow-y: auto;
  box-shadow: var(--elev-modal);
}
.sheet__grip { width: 36px; height: 4px; background: var(--c-surface-3); border-radius: 2px; margin: var(--s-2) auto var(--s-4); }

/* ---------- BRAND MARK ---------- */
.brand { display: inline-flex; align-items: center; gap: var(--s-3); }
.brand__mark {
  width: 32px; height: 32px; border-radius: var(--r-md);
  background: var(--grad-brand);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.brand__name { font-size: var(--fs-18); font-weight: var(--fw-bold); letter-spacing: -.01em; }

/* ---------- UTILITIES ---------- */
.stack       { display: flex; flex-direction: column; gap: var(--s-3); }
.stack--sm   { gap: var(--s-2); }
.stack--lg   { gap: var(--s-5); }
.row-flex    { display: flex; align-items: center; gap: var(--s-3); }
.spacer      { flex: 1; }
.grid-2      { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.grid-3      { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
@media (max-width: 767px) {
  .grid-3 { grid-template-columns: 1fr; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}