/*
 * Fasanella Store private portal styles.
 * Components (design system, spec 2026-10-22-enterprise-portal-ui-design.md section 4.3):
 *   .page-header, .toolbar / .filter-bar (+ .filter-toggle), .data-table (.num, .cell-primary, .is-wide, .table-scroll),
 *   .badge (-success -warning -error -info -neutral), .kpi-grid / .kpi, .card (.card-header, .card-body),
 *   .form-grid (.cols-2, .cols-3), .form-actions (sticky), .tabs, .description-list, .empty-state, .alert, .icon.
 * Shell: .workspace > .sidebar (dark sidebar, tablet icon rail) + .shell-main (.topbar, .workarea) + .tabbar (phone),
 *   public pages use .public-shell > .auth-card. Density: --control-h / --row-h are 36px with a fine pointer, 44px otherwise.
 * Legacy classes (.panel, .route-panel, .summary-strip, .route-list, catalog and route editor rules) stay until their
 *   screens are migrated.
 */

/* ---------- Tokens and base ---------- */
:root {
  --ink:#20211e; --muted:#60625c; --primary:#f5d447; --primary-hover:#ebc42a;
  --background:#f5f5f0; --surface:#ffffff; --surface-2:#fafaf7; --border:#dedfd8; --field-border:#85877e;
  --highlight:#f8e995; --focus:#2763b9; --success:#22603d; --warning:#795000; --error:#a32929;
  --info:#2763b9; --info-bg:#eaf0fa; --success-bg:#eaf4ec; --warning-bg:#fff3ce; --error-bg:#fceeed;
  --row-hover:#f6f6f1;
  --sidebar:#20211e; --sidebar-ink:#f2f2ec; --sidebar-muted:#b4b6ad; --sidebar-heading:#8f9189;
  --radius:6px; --radius-lg:8px; --shadow:0 1px 2px #20211e14;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:28px; --s8:32px;
  --control-h:44px; --row-h:44px; --font-body:16px;
  --topbar-h:56px; --tabbar-h:60px; --safe-bottom:env(safe-area-inset-bottom,0px);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:var(--font-body); color:var(--ink); background:var(--background); color-scheme:light;
}
/* Compact density for precise pointers; touch and unknown pointers keep the 44px targets. */
@media (pointer:fine) { :root { --control-h:36px; --row-h:36px; --font-body:15px; } }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; line-height:1.5; }
a { color:inherit; text-underline-offset:.18em; }
a:hover { text-decoration-thickness:2px; }
button,input,select,textarea { font:inherit; color:inherit; }
button,input,select { min-height:var(--control-h); }
button { cursor:pointer; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.skip-link { position:fixed; z-index:100; top:8px; left:8px; padding:12px; background:var(--surface); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.icon { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Private session gate ---------- */
[data-private-content] { display:none; }
[data-private-content][data-session-check="ok"] { display:block; }
main[hidden] { display:none !important; }
#session-message { margin:2rem; }
#session-message:empty { margin:0; }
#session-help { display:none; margin:1rem; }
html[data-session-check="failed"] #session-help, html[data-session-check="invalid"] #session-help { display:block; }
#session-retry { display:none; margin:2rem; }
html[data-session-check="failed"] #session-retry { display:inline-block; }

/* ---------- Layout: sidebar + top bar + work area ---------- */
.workspace { min-height:100vh; display:grid; grid-template-columns:232px minmax(0,1fr); align-content:start; }
/* The aside stretches over the whole page height; its content stays pinned to the viewport. */
.sidebar { min-width:0; background:var(--sidebar); color:var(--sidebar-ink); }
.sidebar-inner { position:sticky; top:0; height:100vh; height:100dvh; overflow-y:auto; overscroll-behavior:contain; padding:16px 12px 20px; display:flex; flex-direction:column; gap:16px; }
.sidebar-brand { display:block; background:var(--surface); border-radius:var(--radius); padding:6px 10px; }
.sidebar .brand-logo { width:100%; max-width:180px; margin:0 auto; }
.brand-logo { display:block; width:180px; height:auto; max-width:100%; }
.sidebar-nav { min-width:0; }
.nav-group { display:grid; gap:2px; margin:0 0 14px; }
.nav-heading { margin:0; padding:6px 12px 4px; font-size:11.5px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; color:var(--sidebar-heading); }
.sidebar-nav a { display:flex; align-items:center; gap:10px; min-height:var(--control-h); padding:0 12px; border-radius:var(--radius); text-decoration:none; color:var(--sidebar-muted); font-weight:500; min-width:0; }
.sidebar-nav a span { min-width:0; overflow-wrap:anywhere; }
.sidebar-nav a:hover { background:#ffffff14; color:#fff; }
.sidebar-nav a.is-active { background:#ffffff1f; color:#fff; font-weight:650; box-shadow:inset 3px 0 0 var(--primary); }
.sidebar :focus-visible { outline-color:#fff; outline-offset:-2px; }
.shell-main { min-width:0; display:flex; flex-direction:column; min-height:100vh; }
.workarea { min-width:0; max-width:1280px; padding:32px clamp(20px,4vw,56px) 48px; }
.shell-main .workarea { width:100%; flex:1; padding-top:var(--s6); }

/* Top bar */
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:var(--s3); min-height:var(--topbar-h); padding:6px clamp(16px,3vw,32px); background:var(--surface); border-bottom:1px solid var(--border); }
.topbar-brand,.rail-toggle { display:none; }
.topbar-brand .brand-logo { width:132px; }
.topbar-context { flex:1; min-width:0; }
.topbar-tools { display:flex; align-items:center; gap:var(--s3); margin-left:auto; min-width:0; }
.rail-toggle { align-items:center; justify-content:center; width:var(--control-h); padding:0; }
.account-menu { position:relative; }
.account-menu summary { display:flex; align-items:center; gap:var(--s2); min-height:var(--control-h); padding:0 var(--s3); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; list-style:none; background:var(--surface); }
.account-menu summary::-webkit-details-marker { display:none; }
.account-menu summary:hover { border-color:var(--field-border); }
.account-name { font-weight:600; max-width:16ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-menu[open] .icon-chevron { transform:rotate(180deg); }
.account-panel { position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:230px; padding:var(--s1); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 8px 24px #20211e29; }
.account-panel a,.account-panel button { display:flex; align-items:center; justify-content:flex-start; gap:10px; width:100%; min-height:var(--control-h); padding:0 var(--s3); border:0; border-radius:var(--radius); background:none; color:var(--ink); font-weight:500; text-decoration:none; text-align:left; }
.account-panel a:hover,.account-panel button:hover { background:var(--background); }
.account-panel form { margin:0; padding:0; border:0; border-top:1px solid var(--border); border-radius:0; margin-top:var(--s1); padding-top:var(--s1); box-shadow:none; background:none; }

/* Phone bottom tab bar and «Altro» sheet */
.tabbar { display:none; }
.tabbar > a,.tabbar summary { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; flex:1 1 0; min-width:0; min-height:56px; padding:6px 2px; font-size:12px; font-weight:600; color:var(--muted); text-decoration:none; list-style:none; cursor:pointer; border-top:3px solid transparent; }
.tabbar summary::-webkit-details-marker { display:none; }
.tabbar > a span,.tabbar summary span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tabbar > a.is-active,.tabbar details[open] > summary { color:var(--ink); border-top-color:var(--primary); font-weight:700; }
.tabbar > a.is-active .icon { stroke-width:2.5; }
.more-sheet { display:flex; flex:1 1 0; min-width:0; }
.more-sheet summary { width:100%; }
.sheet-panel { position:fixed; left:0; right:0; top:0; bottom:calc(var(--tabbar-h) + var(--safe-bottom)); z-index:25; overflow-y:auto; overscroll-behavior:contain; background:var(--background); padding:var(--s4) var(--s4) var(--s6); }
.sheet-nav .nav-group { margin-bottom:var(--s5); }
.sheet-nav .nav-heading { padding-inline:var(--s1); color:var(--muted); }
.sheet-nav a { display:flex; align-items:center; gap:var(--s3); min-height:52px; padding:0 var(--s4); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); text-decoration:none; font-weight:600; }
.sheet-nav a.is-active { background:var(--highlight); border-color:var(--ink); }

/* PWA update banner: a toast, above the tab bar on phones */
#pwa-update { position:fixed; z-index:60; right:var(--s4); bottom:var(--s4); display:flex; align-items:center; gap:var(--s3); max-width:min(440px,calc(100vw - 32px)); padding:var(--s3) var(--s4); background:var(--ink); color:#fff; border-radius:var(--radius-lg); box-shadow:0 8px 24px #20211e47; }
#pwa-update p { margin:0; }
#pwa-update button { background:var(--primary); border-color:var(--primary); color:var(--ink); }

/* Public pages: centred card with the logo */
.public-page { background:var(--background); }
.public-shell { min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:var(--s4) var(--s4) var(--s8); }
.public-tools { align-self:flex-end; }
.auth-card { width:100%; max-width:30rem; margin-block:auto; padding:var(--s7) var(--s7) var(--s8); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 8px 28px #20211e1a; }
.auth-card .page-heading,.auth-card .page-header { display:grid; justify-content:stretch; justify-items:center; gap:var(--s4); text-align:center; margin-bottom:var(--s4); }
.auth-card .page-heading h1,.auth-card .page-header h1 { font-size:22px; }
.auth-card .brand-logo { width:200px; margin-inline:auto; }
.auth-card form { border:0; box-shadow:none; padding:0; margin:var(--s3) 0 0; background:none; }
.auth-card input:not([type=checkbox]):not([type=radio]),.auth-card select,.auth-card textarea { max-width:none; }
.auth-card button[type=submit],.auth-card form > button:last-child { width:100%; margin-top:var(--s2); }
.auth-card .eyebrow { text-align:center; }
.auth-card code { overflow-wrap:anywhere; }
.auth-card img.intake-qr { display:block; margin-inline:auto; max-width:100%; height:auto; }

/* ---------- Typography ---------- */
h1 { margin:0; font-size:24px; line-height:1.25; letter-spacing:-.03em; }
h2 { margin:28px 0 12px; font-size:21px; line-height:1.3; letter-spacing:-.02em; }
h3 { margin:0; font-size:17px; }
p { margin:12px 0; }
.small,.muted,small { color:var(--muted); }
.eyebrow { margin:0 0 6px; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.eyebrow a { color:inherit; }
.page-header,.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin-bottom:24px; }
.page-header > div > p:last-child,.page-heading > div > p:last-child { margin-bottom:0; }
.page-header > div > .muted,.page-heading > div > .muted,.page-header .subtitle { margin:6px 0 0; color:var(--muted); }
.page-header-actions { display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }
.heading-actions,.button-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.heading-actions { margin:0; }

/* ---------- Panels and forms ---------- */
.panel, form { background:var(--surface); }
.panel,form { border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; margin:16px 0; box-shadow:var(--shadow); }
.panel > h2:first-child { margin-top:0; }
/* A form inside a panel, or a form with no visible fields (a lone action button), must not draw a box. */
.panel form,.route-panel form,.card form,form.plain-form,form:not(:has(label,fieldset,textarea,select,input:not([type=hidden]))) { border:0; padding:0; margin:12px 0 0; background:none; box-shadow:none; }
.panel form + form { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); border-radius:0; }
.panel-footnote { margin:12px 0 0; font-size:15px; }
label { display:block; margin:12px 0; }
input:not([type=checkbox]):not([type=radio]),select,textarea { display:block; width:100%; max-width:46rem; margin-top:5px; padding:6px 11px; border:1px solid var(--field-border); border-radius:4px; background:var(--surface); }
input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover { border-color:var(--ink); }
::placeholder { color:#7a7c75; opacity:1; }
select { -webkit-appearance:none; appearance:none; height:var(--control-h); line-height:24px; padding:6px 34px 6px 11px; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 17px) calc(50% - 2px),calc(100% - 12px) calc(50% - 2px); background-size:5px 5px; background-repeat:no-repeat; }
/* Checkbox/radio: 24px control; the whole label (control height) is the touch target. */
input[type=checkbox],input[type=radio] { width:24px; height:24px; min-width:24px; min-height:24px; margin:0 10px 0 0; vertical-align:middle; accent-color:var(--ink); cursor:pointer; }
label:has(input[type=checkbox]),label:has(input[type=radio]) { display:flex; align-items:center; gap:0; min-height:var(--control-h); cursor:pointer; }
fieldset { border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; margin:16px 0; }
legend { padding:0 6px; font-weight:650; }

/* ---------- Buttons ---------- */
button,.button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:var(--control-h); padding:6px 16px; border:1px solid var(--field-border); border-radius:var(--radius); background:var(--surface); font-weight:650; line-height:1.2; text-decoration:none; text-align:center; }
button:hover,.button:hover { background:var(--background); border-color:var(--ink); }
button[type=submit],.button.primary { background:var(--primary); border-color:var(--primary); }
button[type=submit]:hover,.button.primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); }
button.button-secondary { background:var(--surface); border-color:var(--field-border); }
button.button-secondary:hover { background:var(--background); border-color:var(--ink); }
button:disabled { opacity:.65; cursor:wait; }
button.danger,.button.danger { background:var(--surface); border-color:var(--error); color:var(--error); }
button.danger:hover,.button.danger:hover { background:var(--error-bg); border-color:var(--error); }

/* ---------- Feedback ---------- */
[role=alert] { padding:12px 16px; color:var(--error); background:#fceeed; border-left:4px solid var(--error); border-radius:4px; }
[role=status] { color:var(--muted); }
.status-success { color:var(--success); background:#eaf4ec; }
.status-warning { color:var(--warning); background:#fff3ce; }
.status-error { color:var(--error); background:#fceeed; }
.empty-panel { text-align:center; padding:32px 20px; }
.empty-panel .button-row { justify-content:center; }

/* ---------- Tables ---------- */
table { border-collapse:collapse; }
th,td { text-align:left; vertical-align:top; padding:8px 10px; }
thead th { font-size:14px; color:var(--muted); font-weight:600; border-bottom:2px solid var(--border); }
tbody th,tbody td { border-top:1px solid var(--border); }
.catalog-comparison-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; }
.catalog-comparison-scroll:focus-visible { outline-offset:2px; }
.catalog-comparison-scroll table { min-width:920px; }
.spec-table { width:100%; margin:0 0 16px; }
.spec-table:last-child { margin-bottom:0; }
.spec-table caption { text-align:left; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:4px 0 6px; }
.spec-table th { width:45%; font-weight:600; }
.spec-table tbody tr:nth-child(even) { background:var(--background); }
.spec-more { margin:0 0 16px; }
.spec-more summary { cursor:pointer; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:4px 0 6px; }
.spec-more .spec-table { margin-top:6px; }
.spec-table .unit { color:var(--muted); font-size:.9em; }
.spec-list { display:grid; grid-template-columns:max-content 1fr; gap:8px 16px; margin:0; }
.spec-list dt { color:var(--muted); }
.spec-list dd { margin:0; overflow-wrap:anywhere; }

/* ---------- Chips ---------- */
.chip { display:inline-block; padding:2px 10px; border-radius:999px; background:var(--highlight); font-size:13px; font-weight:600; line-height:1.5; }
.chip-muted { background:var(--border); }
.chip-row { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; }
.chip-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.chip-link { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:4px 14px; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--border); overflow-wrap:anywhere; }
.chip-link:hover { border-color:var(--ink); }
.chip-link.is-active { background:var(--highlight); border-color:var(--ink); }
.chip-count { color:var(--muted); font-weight:400; }

/* ---------- Catalog list ---------- */
.catalog-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:0 0 20px; align-items:stretch; }
.catalog-panel { min-width:0; margin:0; }
.panel-title { margin:0 0 10px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.catalog-panel .panel-title { margin-bottom:0; }
.catalog-search { display:flex; flex-wrap:wrap; align-items:end; gap:8px 12px; }
.catalog-search label { margin:0; flex:1 1 260px; }
.catalog-search label:has(input[type=checkbox]) { flex:0 0 auto; }
.catalog-categories,.catalog-recent { margin:20px 0; }
.price-links { display:flex; flex-wrap:wrap; gap:8px; }
.product-grid { list-style:none; margin:20px 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.product-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); transition:box-shadow .15s,transform .15s,border-color .15s; }
.product-card:hover,.product-card:focus-within { border-color:var(--field-border); box-shadow:0 6px 18px #20211e1f; transform:translateY(-2px); }
.product-card > a { display:flex; flex-direction:column; height:100%; text-decoration:none; }
.product-card > a:focus-visible { outline-offset:-3px; }
.product-card.is-archived { opacity:.65; }
.product-thumb { display:block; aspect-ratio:4/3; background:var(--background); }
.product-thumb:has(.product-noimg) { aspect-ratio:auto; height:96px; }
.product-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.product-noimg { display:grid; place-items:center; height:100%; font-size:36px; font-weight:700; color:var(--muted); text-transform:uppercase; }
.product-body { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px 16px 16px; flex:1; }
.product-body .chip-row { margin:0 0 4px; }
.product-title { font-size:17px; line-height:1.3; letter-spacing:-.01em; }
.product-meta { align-self:stretch; margin-top:auto; padding-top:12px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px; border-top:1px solid var(--border); }
.product-body > .muted { margin-bottom:8px; }
.product-price { font-weight:700; font-size:18px; white-space:nowrap; }
.product-price.is-missing { font-size:14px; font-weight:600; color:var(--warning); }

/* ---------- Catalog detail ---------- */
.product-layout { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:20px; align-items:start; margin:0 0 20px; }
.product-side,.product-main { display:flex; flex-direction:column; gap:16px; min-width:0; }
.product-hero { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); }
.product-hero img { display:block; width:100%; height:auto; }
.product-layout .panel { margin:0; }
.source-item { padding:12px 0; border-top:1px solid var(--border); }
.source-item:first-of-type { border-top:0; padding-top:0; }
.source-item p { margin:4px 0; }
.panel details { border-top:1px solid var(--border); padding:4px 0; }
.panel summary { min-height:var(--control-h); display:flex; align-items:center; cursor:pointer; font-weight:600; }

/* ---------- Components (section 4.3) ---------- */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); margin:0 0 var(--s4); }
.card-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--s2) var(--s4); padding:var(--s3) var(--s5); border-bottom:1px solid var(--border); }
.card-header h2,.card-header h3 { margin:0; font-size:17px; }
.card-body { padding:var(--s5); }
.card-body > :first-child { margin-top:0; }
.card-body > :last-child { margin-bottom:0; }

.toolbar,.filter-bar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s3); margin:0 0 var(--s4); padding:var(--s3) var(--s4); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.toolbar { align-items:center; }
.toolbar-spacer { flex:1 1 auto; }
.filter-bar .filter-fields { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s3); flex:1 1 auto; min-width:0; }
.filter-bar label { flex:1 1 160px; max-width:260px; margin:0; font-size:13px; font-weight:600; color:var(--muted); }
.filter-bar label:has(input[type=checkbox]) { flex:0 0 auto; font-size:inherit; color:inherit; font-weight:500; }
.filter-bar input:not([type=checkbox]):not([type=radio]),.filter-bar select { max-width:none; font-weight:400; color:var(--ink); }
.filter-bar .filter-actions { display:flex; gap:var(--s2); align-items:center; }
.filter-toggle { display:none; width:100%; justify-content:space-between; }

.data-table { width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); font-variant-numeric:tabular-nums; margin:0 0 var(--s4); }
.data-table th,.data-table td { height:var(--row-h); padding:var(--s2) var(--s3); text-align:left; vertical-align:middle; border-top:0; border-bottom:1px solid var(--border); }
.data-table thead th { background:var(--surface-2); color:var(--muted); font-size:13px; font-weight:650; white-space:nowrap; border-bottom:1px solid var(--border); }
.data-table thead th:first-child { border-top-left-radius:calc(var(--radius-lg) - 1px); }
.data-table thead th:last-child { border-top-right-radius:calc(var(--radius-lg) - 1px); }
.data-table tbody tr:last-child > * { border-bottom:0; }
.data-table tbody tr:hover { background:var(--row-hover); }
.data-table .num,.data-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
.data-table .cell-primary { font-weight:650; }
.data-table .cell-primary a { text-decoration:none; }
.data-table .cell-primary a:hover { text-decoration:underline; }
.data-table .cell-actions { text-align:right; white-space:nowrap; }
.table-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; margin:0 0 var(--s4); }
.table-scroll .data-table { margin:0; min-width:640px; }

.badge { display:inline-flex; align-items:center; gap:6px; padding:1px 10px; border:1px solid var(--border); border-radius:999px; background:#efefe9; color:var(--ink); font-size:13px; font-weight:600; line-height:1.6; white-space:nowrap; }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.badge-success { color:var(--success); background:var(--success-bg); border-color:#bcd9c4; }
.badge-warning { color:var(--warning); background:var(--warning-bg); border-color:#ecd391; }
.badge-error { color:var(--error); background:var(--error-bg); border-color:#efc3c0; }
.badge-info { color:var(--info); background:var(--info-bg); border-color:#bdd0ee; }
.badge-neutral { color:var(--ink); background:#efefe9; border-color:var(--border); }
.role-chip { text-transform:none; }

.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s4); margin:0 0 var(--s6); }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s4); box-shadow:var(--shadow); min-width:0; }
.kpi-label { margin:0; font-size:13px; font-weight:650; color:var(--muted); }
.kpi-value { margin:var(--s1) 0 0; font-size:28px; font-weight:700; line-height:1.2; letter-spacing:-.02em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.kpi-note { margin:var(--s1) 0 0; font-size:13px; color:var(--muted); }

.form-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:0 var(--s5); }
.form-grid label { margin:var(--s2) 0; min-width:0; }
.form-grid input:not([type=checkbox]):not([type=radio]),.form-grid select,.form-grid textarea { max-width:none; }
.form-grid .span-all { grid-column:1 / -1; }
.form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); margin-top:var(--s5); padding:var(--s3) 0; background:var(--surface); border-top:1px solid var(--border); position:sticky; bottom:0; z-index:5; }

.tabs { display:flex; gap:var(--s1); margin:0 0 var(--s5); border-bottom:2px solid var(--border); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tabs a { display:inline-flex; align-items:center; min-height:var(--control-h); padding:0 var(--s4); margin-bottom:-2px; border-bottom:3px solid transparent; color:var(--muted); font-weight:600; text-decoration:none; white-space:nowrap; }
.tabs a:hover { color:var(--ink); }
.tabs a[aria-current],.tabs a.is-active { color:var(--ink); font-weight:700; border-bottom-color:var(--primary); }

.description-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s4) var(--s6); margin:0 0 var(--s4); }
.description-list > div { min-width:0; }
.description-list dt { font-size:13px; font-weight:650; color:var(--muted); }
.description-list dd { margin:2px 0 0; overflow-wrap:anywhere; }

.empty-state { display:grid; justify-items:center; gap:var(--s2); padding:var(--s8) var(--s5); margin:var(--s4) 0; text-align:center; color:var(--muted); background:var(--surface); border:1px dashed var(--field-border); border-radius:var(--radius-lg); }
.empty-state .icon { width:32px; height:32px; }
.empty-state p { margin:0; }

.alert { display:flex; align-items:flex-start; gap:var(--s3); margin:var(--s3) 0; padding:var(--s3) var(--s4); color:var(--ink); background:var(--info-bg); border:1px solid #bdd0ee; border-left:4px solid var(--info); border-radius:var(--radius); }
.alert > .icon { margin-top:2px; }
.alert p { margin:0; }
.alert-success { background:var(--success-bg); border-color:#bcd9c4; border-left-color:var(--success); }
.alert-warning { background:var(--warning-bg); border-color:#ecd391; border-left-color:var(--warning); }
.alert-error { background:var(--error-bg); border-color:#efc3c0; border-left-color:var(--error); color:var(--error); }

/* ---------- Language switcher ---------- */
form.language-switcher, div.language-switcher { display:flex; flex-wrap:wrap; align-items:center; gap:6px; justify-content:flex-end; margin:0; padding:8px 16px; border:0; border-radius:0; background:none; box-shadow:none; }
.language-switcher label { margin:0; color:var(--muted); font-size:14px; }
.language-switcher select { width:auto; min-width:4.5rem; margin:0; }
.language-switcher button { padding:0 12px; }
.topbar form.language-switcher,.topbar div.language-switcher,.public-tools form.language-switcher,.public-tools div.language-switcher { padding:0; }

/* ---------- Responsive ---------- */
/* Tablet: icon rail (72px); the toggle expands it to the full sidebar. */
@media (min-width:768px) and (max-width:1199px) {
  .workspace { grid-template-columns:84px minmax(0,1fr); }
  .workspace:has(.sidebar.is-expanded) { grid-template-columns:232px minmax(0,1fr); }
  .rail-toggle { display:inline-flex; }
  .sidebar-inner { padding:12px 6px; gap:12px; }
  .sidebar-brand { width:44px; height:44px; padding:0; overflow:hidden; margin-inline:auto; background:none; }
  .sidebar-brand .brand-logo { width:auto; max-width:none; height:44px; margin:0; }
  .nav-heading { display:none; }
  .nav-group { margin:0 0 8px; padding-bottom:8px; border-bottom:1px solid #ffffff1f; }
  .nav-group:last-child { border-bottom:0; }
  .sidebar-nav a { flex-direction:column; justify-content:center; gap:2px; padding:6px 2px; min-height:56px; font-size:10px; line-height:1.2; letter-spacing:-.01em; text-align:center; }
  .sidebar-nav a.is-active { box-shadow:inset 0 -3px 0 var(--primary); }
  .sidebar.is-expanded .sidebar-inner { padding:16px 12px 20px; }
  .sidebar.is-expanded .sidebar-brand { width:auto; height:auto; padding:6px 10px; overflow:visible; background:var(--surface); }
  .sidebar.is-expanded .sidebar-brand .brand-logo { width:100%; max-width:180px; height:auto; margin:0 auto; }
  .sidebar.is-expanded .nav-heading { display:block; }
  .sidebar.is-expanded .nav-group { padding-bottom:0; border-bottom:0; margin-bottom:14px; }
  .sidebar.is-expanded .sidebar-nav a { flex-direction:row; justify-content:flex-start; gap:10px; padding:0 12px; min-height:var(--control-h); font-size:inherit; text-align:left; }
  .sidebar.is-expanded .sidebar-nav a.is-active { box-shadow:inset 3px 0 0 var(--primary); }
  .form-grid.cols-3,.form-grid.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1200px) {
  .form-grid.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .form-grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1199px) { .workarea { padding:28px clamp(16px,3vw,32px) 40px; } }

@media (max-width:900px) {
  .catalog-panels,.product-layout { grid-template-columns:1fr; }
}

/* Phone */
@media (max-width:767px) {
  .workspace { grid-template-columns:minmax(0,1fr); }
  .sidebar { display:none; }
  .topbar-brand { display:block; }
  .topbar-brand .brand-logo { width:104px; }
  .account-menu summary { padding:0 var(--s2); gap:6px; }
  .account-menu .icon-chevron { display:none; }
  .topbar-context { display:none; }
  .topbar { gap:var(--s2); padding-inline:var(--s4); }
  .shell-main .workarea,.workarea { padding:var(--s5) var(--s4) calc(var(--tabbar-h) + var(--safe-bottom) + var(--s8)); }
  .tabbar { position:fixed; z-index:30; left:0; right:0; bottom:0; display:flex; height:calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom:var(--safe-bottom); background:var(--surface); border-top:1px solid var(--border); box-shadow:0 -2px 8px #20211e12; }
  #pwa-update { left:var(--s4); right:var(--s4); max-width:none; bottom:calc(var(--tabbar-h) + var(--safe-bottom) + var(--s3)); }
  h1 { font-size:22px; }
  .page-header,.page-heading { flex-direction:column; align-items:stretch; }
  .page-header-actions .button,.heading-actions .button { flex:1 1 auto; }
  .page-header-actions .sticky-action { position:fixed; z-index:20; left:var(--s4); right:var(--s4); bottom:calc(var(--tabbar-h) + var(--safe-bottom) + var(--s3)); box-shadow:0 6px 18px #20211e40; }
  .filter-bar.is-collapsible .filter-toggle { display:inline-flex; }
  .filter-bar.is-collapsible.is-collapsed .filter-fields,.filter-bar.is-collapsible.is-collapsed .filter-actions { display:none; }
  .filter-bar label { flex:1 1 100%; max-width:none; }
  .filter-bar .filter-actions { width:100%; }
  .filter-bar .filter-actions > * { flex:1 1 auto; }
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); }
  .kpi-value { font-size:24px; }
  .form-actions { bottom:calc(var(--tabbar-h) + var(--safe-bottom)); }
  .tabbar-spacer { height:var(--tabbar-h); }

  /* Data table card mode: each row becomes a card labelled through data-label. */
  .data-table:not(.is-wide) { display:block; border:0; background:none; border-radius:0; }
  .data-table:not(.is-wide) thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .data-table:not(.is-wide) tbody,.data-table:not(.is-wide) tr,.data-table:not(.is-wide) td { display:block; }
  .data-table:not(.is-wide) tr { margin:0 0 var(--s3); padding:var(--s1) 0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
  .data-table:not(.is-wide) tbody tr:hover { background:var(--surface); }
  .data-table:not(.is-wide) td { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s4); height:auto; min-height:0; padding:6px var(--s4); border:0; text-align:right; overflow-wrap:anywhere; }
  .data-table:not(.is-wide) td::before { content:attr(data-label); flex:none; max-width:45%; color:var(--muted); font-size:13px; font-weight:650; text-align:left; }
  .data-table:not(.is-wide) td:not([data-label])::before { content:none; }
  .data-table:not(.is-wide) td.cell-primary { display:block; text-align:left; font-size:16px; padding-top:var(--s3); }
  .data-table:not(.is-wide) td.cell-primary::before { content:none; }
  .data-table:not(.is-wide) td.cell-actions { justify-content:flex-end; }
  .data-table.is-wide { min-width:640px; }
}
@media (max-width:560px) {
  .account-name { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .auth-card { padding:var(--s5) var(--s4) var(--s6); }
  form,.panel,.card-body { padding:var(--s4); }
  .catalog-search button { flex:1 1 auto; }
  .product-grid { grid-template-columns:1fr; gap:12px; }
  .product-thumb { aspect-ratio:16/9; }
  .spec-list { grid-template-columns:1fr; gap:0; }
  .spec-list dd { margin-bottom:8px; }
  .spec-table th { width:50%; }
  table:not(.spec-table):not(.data-table) { display:block; overflow-x:auto; }
}