/* Panelario — shared web COMPONENTS. Load AFTER tokens.css on every page.
   Single source of truth for reusable UI primitives. Live demos + canonical
   markup: UI/UI_web.html (studio). Don't redefine these per-page — use the classes. */

/* All colors come from tokens.css :root. No literal hex/rgba below —
   tints use color-mix() over the base tokens. Red is unified to --red. */

/* ── Text utilities (replace inline style="color:var(--text-…)") ── */
.text-primary{color:var(--text-primary)}
.text-secondary{color:var(--text-secondary)}
.text-muted{color:var(--text-muted)}
.text-accent{color:var(--accent-active)}
.text-green{color:var(--green)}
.text-red{color:var(--red)}
.text-info{color:var(--info)}
.num{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}

/* ── Section label (gold uppercase header) ── */
.section-label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-active);font-weight:600;margin-bottom:8px;margin-top:18px}
.section-label:first-child{margin-top:0}

/* ── Card — canonical surface (bg-secondary panel) ── */
.card{background:var(--bg-card);border:none;border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:14px}
.card-row{display:flex;justify-content:space-between;align-items:center}

/* ── Stat card — centered metric (big value on top, label, optional size) ── */
.stat-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.stat-card{flex:1;min-width:90px;background:var(--bg-card);border:none;border-radius:var(--radius-sm);padding:8px 14px;text-align:center}
.stat-value{font-size:18px;font-weight:700;color:var(--accent);line-height:1.2;font-variant-numeric:tabular-nums}
.stat-label{font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin-top:2px}
.stat-size{font-size:9px;color:var(--text-muted);font-variant-numeric:tabular-nums;margin-top:1px}

/* ── Chip — neutral pill (tags, options, filters). Gold only for .active ── */
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;background:var(--bg-control);border:none;border-radius:var(--radius-sm);font-size:10px;color:var(--text-secondary)}
.chip-btn{cursor:pointer;transition:all .12s;user-select:none}
.chip-btn:hover{background:var(--bg-card-hover);color:var(--text-primary)}
.chip.active{background:var(--accent-dim);color:var(--accent-active)}
.chip-list{display:flex;flex-wrap:wrap;gap:5px}

/* ── Badge — status pill ── */
.badge{display:inline-block;padding:3px 10px;font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;border-radius:var(--radius-sm);text-align:center}
.badge-gold{background:color-mix(in srgb,var(--accent-active) 20%,transparent);color:var(--accent-active)}
.badge-neutral{background:var(--accent-dim);color:var(--text-secondary)}
.badge-green{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
.badge-red{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}

/* ── Data table → `data-table.css` ──
   ⛔ Tady byla KOPIE bez linek a bez `.gold`, kterou nikdo neshipoval (components.css
   nelinkuje ŽÁDNÁ stránka, jen showcase) — a showcase díky ní kreslila jinou tabulku,
   než jakou vidí uživatel v adminu. Jediný zdroj je od 2026-08-20 `css/data-table.css`. */

/* ── Capacity bar — usage meter (storage/quota) ── */
/* ⛔ **`.cap-bar` / `.cap-bar-fill` PŘESTĚHOVÁNY do `css/admin-kit.css`** (2026-09-05).
   ⚠️ Zdejší deklarace byla MRTVÁ: změřeno, že tu třídu nepoužívala ani jedna stránka
   `APP_WEB` — jediný, kdo ji kreslil, byl admin, a ten `components.css` NENAČÍTÁ, takže
   si pruh psal inline a jinak (`--bg-app`, bez stínu). Dokumentovaný a shipovaný tvar
   se tím rozešly. ⛔ Nevracet sem: jedna definice, a leží tam, kde ji konzument uvidí. */

/* ── Form field — label + input/select/textarea ── */
.field{margin-bottom:14px}
.field label{display:flex;align-items:center;gap:6px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);font-weight:600;margin-bottom:4px}
.field input:not([type="checkbox"]):not([type="file"]),.field select,.field textarea{width:100%;background:var(--bg-well);box-shadow:var(--well-shadow);border:none;border-radius:var(--radius-sm);padding:9px 12px;color:var(--text-muted);font-size:12px;outline:none;font-family:inherit;box-sizing:border-box}
.field input:focus,.field select:focus,.field textarea:focus{background:var(--bg-card-hover);color:var(--text-primary)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-muted);opacity:1}
.field textarea{resize:vertical;min-height:60px}
.field .hint{font-size:10px;color:var(--text-muted);margin-top:3px}

/* ── Checkbox — black box (--bg-app), gold SVG check, neutral border. ──
   Gold lives ONLY in the checkmark, NEVER on the box border (even when checked).
   (a) Static markup: <label class="check"><input type="checkbox"><span class="check-box">
       <svg viewBox="0 0 12 12" fill="none"><path d="M2.5 6.5L5 9L9.5 3.5" stroke="#d2ac5c"
       stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Label</label> */
/* ⛔ **`.check*` PŘESTĚHOVÁNY do `css/check-list.css`** (2026-09-05). Důvod tam. */

/* ── Collapsible folder (storage groups) ── */
.folder{margin-bottom:8px;background:var(--bg-card);border:none;border-radius:var(--radius-sm);overflow:hidden}
.folder>summary{padding:8px 10px;cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none;list-style:none}
.folder>summary::-webkit-details-marker{display:none}

/* ── Showroom catalog = e-shop layout (owner 2026-09-04 „jako kdyby to byl eshop.. vlevo filtry atd") ──
   Three primitives, consumer APP_WEB/showroom.html, canonical markup UI/app_UI.html #web-catalog:
   .facet  = one filter block in the left column (title + rows). A row is either the kit `.check`
             (well box + gold svg) with a count, or a link row for categories — selected = FILL
             (--accent-dim + gold text, same as .filter-chip.active / .csel-opt.active), never an outline.
   .pcard  = product card: head bar (name only) → photo 3:4 (renders are 9:16, the card crops — the item
             page shows it whole) → foot bar (icon actions). Both bars carry panel sizes. No "3D" badge: every showroom item has a model (owner 2026-09-04), so it
             would mark nothing — a missing model shows up on the AR / download actions instead.
   .pager  = page numbers as filled squares, current = --accent-dim fill; arrows inherit currentColor.
   DEPTH BY TONE, not by outline (owner 2026-09-04 „je to všechno moc tmavé! využij barevnost vrstev"):
   the page is --bg-app, panels and cards RISE on --bg-card, a hovered row/card climbs one more step to
   --bg-card-hover, the photo well of a card sits on --bg-card-hover above its card, and the check-box
   well drops back to --bg-app — the same ladder as UI kit §1 Surfaces (the well does not copy the ladder). */
/* ⛔ **`.facet-*` PŘESTĚHOVÁNY do `css/check-list.css`** (2026-09-05) — spolu se
   zaškrtávátkem, které řádek nese. Jedna definice, čtou ji i stránky bez `components.css`
   (admin). ⛔ Nevracet sem. */
/* ⛔ **`.pcard*` PŘESTĚHOVÁNY do `css/pcard.css`** (2026-09-05) — kreslí je i admin,
   který `components.css` nelinkuje. Jedna definice, dva konzumenti. ⛔ Nevracet sem. */
.pager{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 8px;border-radius:var(--radius-sm);background:var(--bg-control);color:var(--text-secondary);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;text-decoration:none;box-shadow:var(--btn-shadow);transition:background .15s,color .15s}
.pager a:hover{background:var(--bg-card-hover);color:var(--text-primary);box-shadow:none}
.pager .on{background:var(--accent-dim);color:var(--accent-active);box-shadow:none}
.pager .gap,.pager .off{background:none;box-shadow:none;color:var(--text-muted)}
.pager svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}