/* Product derivative of the neutral WEBFORGE_12P frontend template.
   UI31: shared foundations, semantic states, then component-specific rules. */

/* 1. Theme and design tokens. Garment tokens are used only by small markers. */
:root {
  color-scheme:light;
  --bg:#f3f6f8; --surface:#fff; --surface-alt:#f8fafb; --text:#142c40;
  --muted:#526776; --subtle:#617586; --line:#dce5eb;
  --brand:#076f69; --brand-hover:#055e59; --brand-soft:#e6f4f0;
  --action-bg:#087e78; --action-hover:#056a65; --action-text:#fff;
  --navy:#102c43; --teal:#5cddc1; --sun:#f9b452;
  --danger:#991b1b; --danger-soft:#fee2e2; --warning:#92400e; --warning-soft:#fef3c7;
  --info:#1d4ed8; --info-soft:#eff6ff;
  --state-normal-fg:#475569; --state-normal-bg:#f1f5f9;
  --state-reserved-fg:#4338ca; --state-reserved-bg:#eef2ff;
  --state-dispatched-fg:#1d4ed8; --state-dispatched-bg:#eff6ff;
  --state-delivered-fg:#075985; --state-delivered-bg:#e0f2fe;
  --state-confirmed-fg:#166534; --state-confirmed-bg:#dcfce7;
  --state-low-fg:#92400e; --state-low-bg:#fef3c7;
  --state-empty-fg:#991b1b; --state-empty-bg:#fee2e2;
  --garment-pantalon-fg:#4338ca; --garment-pantalon-bg:#eef2ff;
  --garment-superior-fg:#075985; --garment-superior-bg:#e0f2fe;
  --garment-sweater-fg:#6d28d9; --garment-sweater-bg:#f3e8ff;
  --garment-polar-fg:#0e7490; --garment-polar-bg:#cffafe;
  --garment-parka-fg:#334155; --garment-parka-bg:#e2e8f0;
  --garment-accesorio-fg:#86198f; --garment-accesorio-bg:#fae8ff;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --space-8:32px; --space-12:48px;
  --text-badge:11px; --text-caption:12px; --text-table:13px; --text-body:14px; --text-lead:16px;
  --shadow:0 5px 18px rgba(20,44,64,.055),0 1px 3px rgba(20,44,64,.035);
  --shadow-lg:0 20px 65px rgba(8,27,42,.22); --radius:8px;
  --font:Inter,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}
[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0d1b28; --surface:#162a3a; --surface-alt:#1b3041; --text:#edf4f7;
  --muted:#b1c2ce; --subtle:#a3b8c7; --line:#365064;
  --brand:#62dbc1; --brand-hover:#8ce7d2; --brand-soft:#163f3c;
  --action-bg:#62dbc1; --action-hover:#8ce7d2; --action-text:#0d292b;
  --danger:#fecaca; --danger-soft:#450a0a; --warning:#fde68a; --warning-soft:#451a03;
  --info:#bfdbfe; --info-soft:#172554;
  --state-normal-fg:#cbd5e1; --state-normal-bg:#1e293b;
  --state-reserved-fg:#c7d2fe; --state-reserved-bg:#1e1b4b;
  --state-dispatched-fg:#bfdbfe; --state-dispatched-bg:#172554;
  --state-delivered-fg:#7dd3fc; --state-delivered-bg:#082f49;
  --state-confirmed-fg:#bbf7d0; --state-confirmed-bg:#052e16;
  --state-low-fg:#fde68a; --state-low-bg:#451a03;
  --state-empty-fg:#fecaca; --state-empty-bg:#450a0a;
  --garment-pantalon-fg:#a5b4fc; --garment-pantalon-bg:#1e1b4b;
  --garment-superior-fg:#7dd3fc; --garment-superior-bg:#082f49;
  --garment-sweater-fg:#d8b4fe; --garment-sweater-bg:#3b0764;
  --garment-polar-fg:#67e8f9; --garment-polar-bg:#083344;
  --garment-parka-fg:#cbd5e1; --garment-parka-bg:#1e293b;
  --garment-accesorio-fg:#f0abfc; --garment-accesorio-bg:#4a044e;
  --shadow:0 5px 18px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.15);
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme]) {
    color-scheme:dark;
    --bg:#0d1b28; --surface:#162a3a; --surface-alt:#1b3041; --text:#edf4f7;
    --muted:#b1c2ce; --subtle:#a3b8c7; --line:#365064;
    --brand:#62dbc1; --brand-hover:#8ce7d2; --brand-soft:#163f3c;
    --action-bg:#62dbc1; --action-hover:#8ce7d2; --action-text:#0d292b;
    --danger:#fecaca; --danger-soft:#450a0a; --warning:#fde68a; --warning-soft:#451a03;
    --info:#bfdbfe; --info-soft:#172554;
    --state-normal-fg:#cbd5e1; --state-normal-bg:#1e293b;
    --state-reserved-fg:#c7d2fe; --state-reserved-bg:#1e1b4b;
    --state-dispatched-fg:#bfdbfe; --state-dispatched-bg:#172554;
    --state-delivered-fg:#7dd3fc; --state-delivered-bg:#082f49;
    --state-confirmed-fg:#bbf7d0; --state-confirmed-bg:#052e16;
    --state-low-fg:#fde68a; --state-low-bg:#451a03;
    --state-empty-fg:#fecaca; --state-empty-bg:#450a0a;
    --garment-pantalon-fg:#a5b4fc; --garment-pantalon-bg:#1e1b4b;
    --garment-superior-fg:#7dd3fc; --garment-superior-bg:#082f49;
    --garment-sweater-fg:#d8b4fe; --garment-sweater-bg:#3b0764;
    --garment-polar-fg:#67e8f9; --garment-polar-bg:#083344;
    --garment-parka-fg:#cbd5e1; --garment-parka-bg:#1e293b;
    --garment-accesorio-fg:#f0abfc; --garment-accesorio-bg:#4a044e;
    --shadow:0 5px 18px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.15);
  }
}

/* 2. Base typography, keyboard focus and shared primitives. */
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { min-width:0; }
body { margin:0; color:var(--text); background:var(--bg); font-family:var(--font); font-size:var(--text-body); line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:var(--brand); text-underline-offset:3px; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.52; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
button svg,a svg { pointer-events:none; }
h1,h2,h3,h4,p { margin-top:0; }
h1 { font-size:clamp(26px,2.4vw,34px); letter-spacing:-.8px; line-height:1.2; margin-bottom:var(--space-2); font-weight:720; overflow-wrap:anywhere; }
h2 { font-size:18px; letter-spacing:-.3px; line-height:1.35; margin-bottom:var(--space-2); overflow-wrap:anywhere; }
h3 { font-size:15px; line-height:1.4; margin-bottom:var(--space-2); overflow-wrap:anywhere; }
p { margin-bottom:var(--space-4); }
small,.small { font-size:var(--text-caption); }
.muted { color:var(--muted); }
.mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.95em; }
.eyebrow { display:block; color:var(--brand); font-size:11px; font-weight:750; letter-spacing:1.4px; margin-bottom:var(--space-3); }
.eyebrow.light { color:var(--teal); }
.icon { width:19px; height:19px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.skip-link { position:fixed; left:16px; top:-80px; z-index:100; padding:12px 24px; color:var(--text); background:var(--surface); box-shadow:var(--shadow-lg); }
.skip-link:focus { top:12px; }
.initial-loading { min-height:100svh; display:grid; align-content:center; justify-items:center; gap:var(--space-4); padding:24px; color:var(--muted); text-align:center; }
.loader { display:inline-block; width:26px; height:26px; border:3px solid var(--line); border-top-color:var(--brand); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.brand { display:flex; align-items:center; gap:var(--space-3); color:#fff; font-size:16px; font-weight:800; letter-spacing:2px; text-decoration:none; line-height:1.3; }
.brand small { display:block; margin-top:var(--space-1); color:#b2c5d3; font-size:10px; font-weight:550; letter-spacing:1px; }
.brand-symbol { width:38px; height:41px; flex-shrink:0; display:grid; place-items:center; color:var(--teal); border:1px solid #365365; border-radius:5px; background:rgba(255,255,255,.035); }
.brand-symbol svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:2; }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--teal); flex-shrink:0; }

/* 3. Sign-in. */
.login-screen { display:grid; min-height:100svh; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
.login-story { position:relative; overflow:hidden; padding:40px clamp(24px,5.3vw,88px); color:#fff; background:var(--navy); display:flex; flex-direction:column; justify-content:space-between; min-height:700px; }
.login-story:before { content:""; position:absolute; width:570px; height:570px; border:1px solid #24455b; border-radius:50%; right:-350px; top:-150px; box-shadow:0 0 0 70px rgba(57,97,120,.1),0 0 0 140px rgba(57,97,120,.05); pointer-events:none; }
.login-story:after { content:""; position:absolute; right:0; bottom:16%; width:4px; height:140px; background:var(--sun); }
.login-story-content { position:relative; max-width:500px; margin:72px 0; }
.login-story h1 { font-size:clamp(36px,3.7vw,58px); line-height:1.12; letter-spacing:-1.8px; margin-bottom:var(--space-6); }
.login-story p { font-size:16px; color:#b9cedc; line-height:1.8; }
.login-route { display:flex; align-items:flex-start; gap:var(--space-4); margin-top:var(--space-12); max-width:400px; }
.route-node { display:grid; justify-items:center; gap:var(--space-3); color:#c0d4e1; font-size:12px; }
.route-node svg { color:var(--teal); width:48px; height:48px; padding:12px; border:1px solid #3a5c70; border-radius:6px; fill:none; stroke:currentColor; stroke-width:1.5; }
.route-connector { height:1px; border-top:1px dashed #56788d; flex:1; margin-top:24px; }
.login-disclaimer { color:#b4c8d5; font-size:11px; font-weight:650; letter-spacing:.8px; display:flex; align-items:center; gap:var(--space-2); }
.login-panel { position:relative; min-width:0; padding:80px 32px 24px; display:flex; flex-direction:column; justify-content:center; align-items:center; background:var(--surface); }
.login-theme { position:absolute; top:24px; right:24px; }
.login-form { width:100%; max-width:380px; margin:auto; }
.login-form h2 { font-size:29px; letter-spacing:-.9px; margin-bottom:var(--space-2); }
.login-form>.muted { margin-bottom:var(--space-8); }
.login-form .form-field { margin-bottom:var(--space-4); }
.login-form input { height:48px; }
.login-submit { width:100%; justify-content:space-between!important; min-height:48px!important; margin-top:var(--space-1); }
.password-field { display:flex; position:relative; min-width:0; }
.password-field input { padding-right:52px; }
.password-field .icon-button { position:absolute; right:2px; top:2px; width:44px; height:44px; min-width:44px; }
.login-note { border-left:3px solid var(--sun); background:var(--surface-alt); margin-top:var(--space-6); padding:var(--space-4); font-size:12px; }
.login-note strong { display:block; margin-bottom:var(--space-1); font-size:13px; }
.login-note p { margin:0; color:var(--muted); }
.login-help { font-size:12px; color:var(--muted); margin-top:var(--space-6); }
.login-bottom { font-size:12px; color:var(--subtle); margin:40px 0 0; }

/* 4. Application shell and navigation. */
.shell { min-height:100svh; display:grid; grid-template-columns:248px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100svh; padding:var(--space-8) var(--space-4) var(--space-4); display:flex; flex-direction:column; background:var(--navy); color:#d6e3ec; z-index:30; overflow:auto; }
.sidebar .brand { margin:0 var(--space-2) var(--space-8); font-size:14px; }
.sidebar .brand small { font-size:9px; }
.sidebar .brand-symbol { width:34px; height:38px; }
.sidebar-caption { font-size:10px; font-weight:650; letter-spacing:1.2px; color:#a5bfce; padding:0 var(--space-3); margin-bottom:var(--space-3); }
.menu { display:grid; gap:var(--space-1); }
.menu a { display:flex; align-items:center; gap:var(--space-3); min-height:44px; padding:var(--space-3); color:#c3d5e1; text-decoration:none; border-radius:5px; font-size:13px; font-weight:550; border:1px solid transparent; transition:background .15s,color .15s; }
.menu a:hover { color:#fff; background:#1b3a51; }
.menu a[aria-current="page"] { color:#d8fff4; background:#1a494c; border-color:#397e76; }
.menu a[aria-current="page"] .icon { color:var(--teal); }
.sidebar a:focus-visible,.login-story a:focus-visible { outline-color:var(--teal); }
.menu a>span:not(.nav-count) { min-width:0; overflow-wrap:anywhere; }
.nav-count { margin-left:auto; background:#2f4c5e; color:#fff; font-size:11px; padding:0 6px; min-width:20px; text-align:center; border-radius:4px; }
.sidebar-bottom { margin-top:auto; padding-top:var(--space-8); }
.sidebar-campaign { margin:0 var(--space-2) var(--space-6); padding:var(--space-4) var(--space-3); border:1px solid #355165; border-radius:5px; position:relative; }
.sidebar-campaign:before { content:""; position:absolute; left:-1px; top:16px; width:3px; height:24px; background:var(--sun); }
.sidebar-campaign small { display:block; color:#b2c8d7; font-size:10px; margin-bottom:var(--space-1); }
.sidebar-campaign strong { font-size:14px; color:#f2f7fa; }
.sidebar-campaign p { color:#adc5d3; font-size:12px; margin:var(--space-1) 0 0; }
.sidebar-demo { padding:0 var(--space-3) var(--space-4); color:#b5cbd9; font-size:10px; font-weight:600; letter-spacing:.5px; }
.sidebar-demo .status-dot { margin-right:var(--space-1); }
.sidebar-demo small { display:block; color:#b5cbd9; font-size:11px; letter-spacing:0; margin:var(--space-1) 0 0 var(--space-3); font-weight:400; }
.sidebar-user { display:flex; gap:var(--space-2); align-items:center; padding:var(--space-4) var(--space-2) 0; border-top:1px solid #2a455a; }
.sidebar-user>div { min-width:0; }
.avatar { width:32px; height:32px; display:grid; place-items:center; background:#25475c; color:#cfebef; border-radius:6px; font-size:12px; font-weight:700; flex-shrink:0; }
.sidebar-user strong { display:block; color:#e2edf4; font-size:12px; overflow-wrap:anywhere; }
.sidebar-user small { font-size:11px; color:#b5cbd9; }
.workspace { display:flex; flex-direction:column; min-width:0; }
.topbar { min-height:72px; padding:var(--space-2) var(--space-8); background:var(--surface); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); min-width:0; }
.topbar-left,.topbar-actions { display:flex; align-items:center; gap:var(--space-2); }
.topbar-left { min-width:0; }
.topbar-actions { flex-shrink:0; }
.breadcrumb { font-size:12px; color:var(--muted); margin:0; min-width:0; overflow-wrap:anywhere; }
.breadcrumb span { margin:0 var(--space-2); color:var(--subtle); }
.breadcrumb strong { color:var(--text); font-weight:550; }
.demo-label { color:var(--muted); border:1px solid var(--line); font-size:10px; letter-spacing:.4px; font-weight:650; padding:var(--space-1) var(--space-2); border-radius:4px; margin-right:var(--space-2); }
.icon-button { background:transparent; border:1px solid transparent; color:var(--muted); min-width:40px; width:40px; height:40px; flex-shrink:0; display:inline-flex; justify-content:center; align-items:center; border-radius:6px; padding:var(--space-2); }
.icon-button:hover { color:var(--text); background:var(--surface-alt); }
.icon-button .icon { width:18px; height:18px; }
.mobile-menu { display:none; }
#main-content { padding:var(--space-8) var(--space-8) 40px; flex:1; min-width:0; outline:none; }
#page-content { max-width:1600px; margin:0 auto; min-width:0; animation:enter .25s ease-out; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-4); margin-bottom:var(--space-6); }
.page-heading>div { min-width:0; }
.page-heading .eyebrow { margin-bottom:var(--space-2); font-size:11px; letter-spacing:1.2px; }
.page-heading p { color:var(--muted); font-size:14px; margin:0; max-width:700px; }
.heading-actions,.actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); min-width:0; }
.heading-actions { flex-shrink:0; max-width:100%; }

/* 5. Buttons, containers and layout. */
.button { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); max-width:100%; min-height:40px; padding:var(--space-2) var(--space-4); border:1px solid var(--line); border-radius:5px; color:var(--text); background:var(--surface); text-decoration:none; text-align:center; font-weight:600; font-size:13px; line-height:1.45; overflow-wrap:anywhere; transition:background .15s,border-color .15s; }
.button:hover:not(:disabled) { background:var(--surface-alt); border-color:var(--muted); }
.button.primary { color:var(--action-text); background:var(--action-bg); border-color:var(--action-bg); }
.button.primary:hover:not(:disabled) { background:var(--action-hover); border-color:var(--action-hover); }
.button.danger { color:var(--danger); border-color:var(--danger); }
.button.danger:hover:not(:disabled) { background:var(--danger-soft); }
.button.quiet { border-color:transparent; color:var(--brand); background:transparent; }
.button.small { padding:6px var(--space-3); min-height:36px; font-size:12px; }
.button .icon { width:16px; height:16px; }
.text-link { border:0; padding:0; color:var(--brand); background:transparent; text-decoration:underline; text-underline-offset:3px; font-weight:650; font-size:inherit; text-align:left; overflow-wrap:anywhere; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); min-width:0; }
.card-padding { padding:var(--space-6); }
.card-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); padding:var(--space-4) var(--space-6); border-bottom:1px solid var(--line); }
.card-header>div { min-width:0; }
.card-header h2 { margin:0; font-size:16px; }
.card-header p { color:var(--muted); font-size:12px; margin:var(--space-1) 0 0; }
.card-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-2); padding:var(--space-3) var(--space-6); color:var(--muted); font-size:12px; border-top:1px solid var(--line); }
.card-footer>span { max-width:100%; overflow-wrap:anywhere; }
.grid { display:grid; gap:var(--space-6); min-width:0; }
.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.dashboard { grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); }
.stack { display:grid; gap:var(--space-6); align-content:start; min-width:0; }

/* 6. Operational dashboard. Brand decoration stays separate from stock meaning. */
.hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-6); position:relative; overflow:hidden; padding:var(--space-6) var(--space-8); background:var(--navy); color:#fff; border:0; margin-bottom:var(--space-6); }
.hero:after { content:""; position:absolute; height:180px; width:180px; border-radius:50%; border:1px solid #345568; right:-80px; top:-100px; box-shadow:0 0 0 35px rgba(70,110,134,.1); pointer-events:none; }
.hero h2 { font-size:24px; line-height:1.3; letter-spacing:-.6px; max-width:560px; margin-bottom:var(--space-3); }
.hero p { font-size:14px; color:#c5d8e5; max-width:520px; margin:0; }
.hero .eyebrow { font-size:11px; margin-bottom:var(--space-3); }
.campaign-stamp { display:flex; flex-direction:column; justify-content:center; padding-left:var(--space-6); border-left:1px solid #37586f; min-width:165px; }
.campaign-stamp strong { font-size:28px; font-weight:650; color:var(--sun); letter-spacing:-.5px; }
.campaign-stamp span { font-size:12px; color:#c5d8e5; }
.campaign-stamp .badge { margin-top:var(--space-2); align-self:flex-start; color:#d1eee7; background:#214f50; border-color:#386b65; }
.operations-banner { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--space-4); padding:var(--space-4) var(--space-6); margin-bottom:var(--space-6); background:var(--navy); color:#fff; border:1px solid #28465c; border-left:4px solid var(--teal); border-radius:var(--radius); min-width:0; }
.operations-banner>div { min-width:0; }
.operations-banner h2 { margin-bottom:var(--space-2); font-size:20px; }
.operations-banner p { margin:0; color:#c5d8e5; font-size:14px; }
.operations-summary { min-width:0; }
.operations-summary .eyebrow { margin-bottom:var(--space-2); }
.operations-summary strong { color:inherit; }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4); margin-bottom:var(--space-6); }
.stats:has(>.stat-transit) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.stat { padding:var(--space-4); position:relative; }
.stat-top { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--space-3); }
.stat-label { font-size:13px; color:var(--muted); font-weight:600; overflow-wrap:anywhere; }
.stat-icon { width:32px; height:32px; flex-shrink:0; background:var(--state-normal-bg); color:var(--state-normal-fg); display:grid; place-items:center; border-radius:6px; }
.stat-icon.amber { color:var(--state-low-fg); background:var(--state-low-bg); }
.stat-value { font-size:30px; font-weight:700; line-height:1.15; letter-spacing:-.7px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.stat-note { font-size:12px; color:var(--muted); margin:var(--space-2) 0 0; line-height:1.45; }
.stat-physical .stat-icon { color:var(--state-normal-fg); background:var(--state-normal-bg); }
.stat-reserved .stat-icon { color:var(--state-reserved-fg); background:var(--state-reserved-bg); }
.stat-available .stat-icon { color:var(--brand); background:var(--brand-soft); }
.stat-damaged .stat-icon { color:var(--state-low-fg); background:var(--state-low-bg); }
.stat-transit .stat-icon { color:var(--state-dispatched-fg); background:var(--state-dispatched-bg); }
.stat.is-zero .stat-icon,.stat.zero .stat-icon,.stat-icon.is-zero,.stat-icon.zero { color:var(--state-normal-fg); background:var(--state-normal-bg); }
.activity-list,.alert-list,.attention-list,.work-list { padding:0 var(--space-6); }
.activity-item,.alert-item { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-4) 0; border-bottom:1px solid var(--line); min-width:0; }
.activity-item:last-child,.alert-item:last-child { border:0; }
.activity-item>div,.alert-item>div { min-width:0; }
.activity-bullet { width:32px; height:32px; flex-shrink:0; display:grid; place-items:center; color:var(--brand); background:var(--brand-soft); border-radius:5px; }
.activity-bullet .icon { width:16px; height:16px; }
.activity-item strong,.alert-item strong { display:block; font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.activity-item p,.alert-item p { color:var(--muted); font-size:12px; margin:var(--space-1) 0 0; overflow-wrap:anywhere; }
.activity-item .sub { display:block; color:var(--muted); font-size:12px; font-weight:400; margin-top:var(--space-1); }
.activity-item time { margin-left:auto; color:var(--subtle); font-size:11px; white-space:nowrap; }
.alert-number { min-width:32px; min-height:32px; padding:var(--space-1); display:grid; place-items:center; border-radius:5px; background:var(--state-low-bg); color:var(--state-low-fg); font-weight:700; font-size:12px; flex-shrink:0; font-variant-numeric:tabular-nums; }
.work-list .alert-number,.alert-number.is-zero,.alert-number.zero { color:var(--state-normal-fg); background:var(--state-normal-bg); }
.attention-list .alert-number:not(.is-zero):not(.zero) { color:var(--state-low-fg); background:var(--state-low-bg); }
.quick-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); padding:var(--space-4); }
.quick-action { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); padding:var(--space-4) var(--space-3); background:var(--surface-alt); color:var(--text); border:1px solid var(--line); border-radius:5px; text-decoration:none; text-align:left; min-width:0; overflow-wrap:anywhere; }
.quick-action:hover { border-color:var(--brand); background:var(--brand-soft); }
.quick-action .icon { color:var(--brand); }
.quick-action strong { font-size:13px; font-weight:650; }
.quick-action small { font-size:12px; color:var(--muted); line-height:1.5; }
.progress-row { padding:var(--space-4) var(--space-6); }
.progress-label { display:flex; justify-content:space-between; gap:var(--space-3); font-size:13px; margin-bottom:var(--space-2); }
.progress-bar { height:6px; width:100%; border-radius:3px; background:var(--line); overflow:hidden; }
.progress-fill { height:100%; background:var(--brand); border-radius:inherit; }

/* 7. Status vocabulary: text and icons carry meaning in addition to color. */
.badge { display:inline-flex; align-items:center; gap:var(--space-1); max-width:100%; border:1px solid transparent; border-radius:4px; padding:var(--space-1) var(--space-2); font-size:var(--text-badge); font-weight:650; line-height:1.4; background:var(--state-normal-bg); color:var(--state-normal-fg); white-space:nowrap; }
.badge .icon { width:14px; height:14px; }
.badge.success { color:var(--state-confirmed-fg); background:var(--state-confirmed-bg); }
.badge.warning { color:var(--state-low-fg); background:var(--state-low-bg); }
.badge.danger { color:var(--state-empty-fg); background:var(--state-empty-bg); }
.badge.info { color:var(--state-dispatched-fg); background:var(--state-dispatched-bg); }
.badge.state-badge.state-etiquetada,.badge.state-badge.state-cancelada,.badge.stock-state.stock-normal { color:var(--state-normal-fg); background:var(--state-normal-bg); }
.badge.state-badge.state-apartada { color:var(--state-reserved-fg); background:var(--state-reserved-bg); }
.badge.state-badge.state-despachada { color:var(--state-dispatched-fg); background:var(--state-dispatched-bg); }
.badge.state-badge.state-entregada { color:var(--state-delivered-fg); background:var(--state-delivered-bg); }
.badge.state-badge.state-confirmada { color:var(--state-confirmed-fg); background:var(--state-confirmed-bg); }
.badge.stock-state.stock-low,.size-state.size-pending { color:var(--state-low-fg); background:var(--state-low-bg); }
.badge.stock-state.stock-empty { color:var(--state-empty-fg); background:var(--state-empty-bg); }
.badge.stock-state.is-zero { color:var(--state-normal-fg); background:var(--state-normal-bg); }
.size-state.size-declared { color:var(--state-delivered-fg); background:var(--state-delivered-bg); }
.size-state.size-reviewed { color:var(--state-normal-fg); background:var(--state-normal-bg); }

/* Garment identity never changes the row, card, quantity or garment-name color. */
.garment-label { display:inline-flex; align-items:center; gap:var(--space-2); min-width:0; max-width:100%; vertical-align:middle; }
.garment-name { min-width:0; color:var(--text); font-weight:650; white-space:normal; overflow-wrap:anywhere; }
/* Keep the explicit table scroller rather than squeeze names into vertical letters. */
td .garment-label { min-width:160px; }
.garment-marker { --garment-fg:var(--state-normal-fg); --garment-bg:var(--state-normal-bg); width:24px; height:24px; flex:0 0 24px; display:inline-grid; place-items:center; color:var(--garment-fg); background:var(--garment-bg); border-radius:5px; font-size:12px; font-weight:700; }
.garment-marker .icon { width:15px; height:15px; }
.garment-marker.garment-pantalon { --garment-fg:var(--garment-pantalon-fg); --garment-bg:var(--garment-pantalon-bg); }
.garment-marker.garment-superior { --garment-fg:var(--garment-superior-fg); --garment-bg:var(--garment-superior-bg); }
.garment-marker.garment-sweater { --garment-fg:var(--garment-sweater-fg); --garment-bg:var(--garment-sweater-bg); }
.garment-marker.garment-polar { --garment-fg:var(--garment-polar-fg); --garment-bg:var(--garment-polar-bg); }
.garment-marker.garment-parka { --garment-fg:var(--garment-parka-fg); --garment-bg:var(--garment-parka-bg); }
.garment-marker.garment-accesorio { --garment-fg:var(--garment-accesorio-fg); --garment-bg:var(--garment-accesorio-bg); }
.garment-marker.garment-other { --garment-fg:var(--state-normal-fg); --garment-bg:var(--state-normal-bg); }

/* 8. Filters and forms. Basic inventory filters remain visible outside details. */
.toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-3); padding:var(--space-4); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:var(--space-6); box-shadow:var(--shadow); min-width:0; }
.toolbar .form-field { min-width:0; flex:1 1 152px; max-width:240px; }
.toolbar .form-field.search { max-width:none; min-width:0; flex:2 1 240px; }
.toolbar input,.toolbar select { min-height:40px; font-size:13px; }
.toolbar label { font-size:12px; margin-bottom:var(--space-1); color:var(--muted); }
.toolbar .toolbar-end { margin-left:auto; align-self:center; font-size:12px; color:var(--muted); }
.inventory-controls { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-3); min-width:0; }
.inventory-controls .view-switch { margin-left:auto; }
.view-switch { display:inline-flex; align-items:center; flex-wrap:wrap; gap:var(--space-1); padding:var(--space-1); border:1px solid var(--line); border-radius:6px; background:var(--surface-alt); max-width:100%; }
.view-switch button { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-1); min-height:36px; padding:6px var(--space-3); border:1px solid transparent; border-radius:4px; background:transparent; color:var(--muted); font-size:12px; font-weight:600; line-height:1.4; }
.view-switch button:hover { color:var(--text); background:var(--surface); }
.view-switch button[aria-pressed="true"] { color:var(--brand); background:var(--surface); border-color:var(--brand); }
.view-switch .icon { width:16px; height:16px; }
.inventory-more-filters { flex-basis:100%; width:100%; min-width:0; border-top:1px solid var(--line); padding-top:var(--space-3); }
.inventory-more-filters>summary { display:flex; align-items:center; gap:var(--space-2); width:fit-content; max-width:100%; min-height:36px; padding:var(--space-1) 0; color:var(--brand); font-size:13px; font-weight:650; cursor:pointer; list-style:none; }
.inventory-more-filters>summary::-webkit-details-marker { display:none; }
.inventory-more-filters>summary:after { content:""; width:7px; height:7px; margin:0 var(--space-1); border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); flex-shrink:0; }
.inventory-more-filters[open]>summary:after { transform:rotate(225deg) translate(-2px,-1px); }
.advanced-filter-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); padding-top:var(--space-3); }
.toolbar .advanced-filter-grid .form-field { max-width:none; }
.active-filters { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); min-width:0; margin-bottom:var(--space-4); }
.active-filters:empty { display:none; }
.filter-chip { display:inline-flex; align-items:center; gap:var(--space-2); min-height:32px; max-width:100%; padding:var(--space-1) var(--space-2); color:var(--brand); background:var(--brand-soft); border:1px solid var(--line); border-radius:4px; font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
.filter-chip button { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0; padding:var(--space-1); color:inherit; background:transparent; border:0; border-radius:4px; }
.filter-chip button:hover { background:var(--surface); }
.filter-chip .icon { width:14px; height:14px; }
.form-field { display:flex; flex-direction:column; min-width:0; }
label,.field-label { display:block; margin-bottom:var(--space-2); font-size:13px; font-weight:600; color:var(--text); }
input,select,textarea { width:100%; min-width:0; min-height:44px; padding:var(--space-2) var(--space-3); color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:5px; }
input::placeholder,textarea::placeholder { color:var(--subtle); opacity:1; }
input:disabled,select:disabled,textarea:disabled { background:var(--surface-alt); color:var(--muted); }
input[type="checkbox"],input[type="radio"] { width:16px; height:16px; min-height:16px; margin:0; accent-color:#087e78; flex-shrink:0; }
input[type="file"] { font-size:12px; overflow:hidden; }
textarea { resize:vertical; min-height:96px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
.form-grid .full { grid-column:1/-1; }
.form-help { color:var(--muted); font-size:12px; margin-top:var(--space-1); display:block; overflow-wrap:anywhere; }
.required { color:var(--danger); }
.checkbox-label { display:flex; align-items:flex-start; gap:var(--space-2); font-weight:450; line-height:1.55; cursor:pointer; font-size:14px; }
.checkbox-label input { margin-top:3px; }
fieldset { margin:0; padding:var(--space-4); border:1px solid var(--line); border-radius:5px; min-width:0; }
legend { font-size:13px; font-weight:650; padding:0 var(--space-2); max-width:100%; }
.form-error,.error-box { padding:var(--space-3) var(--space-4); color:var(--danger); background:var(--danger-soft); border-left:3px solid var(--danger); border-radius:4px; font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.form-error { margin:var(--space-4) 0; }
.form-error:empty { display:none; }
.info-box,.warning-box { display:flex; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-radius:5px; color:var(--info); background:var(--info-soft); font-size:14px; line-height:1.6; margin-bottom:var(--space-4); min-width:0; overflow-wrap:anywhere; }
.warning-box { color:var(--warning); background:var(--warning-soft); }
.info-box>div,.warning-box>div { min-width:0; }
.info-box p,.warning-box p { margin:0; }
.info-box .icon,.warning-box .icon { margin-top:2px; width:18px; height:18px; }

/* 9. General tables. Only explicit .table-wrap regions scroll horizontally. */
.table-wrap { width:100%; max-width:100%; min-width:0; overflow:auto; border-radius:inherit; }
.table-wrap:focus-visible { outline:3px solid var(--brand); outline-offset:-3px; }
.table-scroll-hint { display:none; padding:var(--space-2) var(--space-6); margin:0; color:var(--muted); font-size:12px; }
table { width:100%; border-collapse:collapse; font-size:var(--text-table); line-height:1.45; text-align:left; white-space:normal; }
caption { text-align:left; padding:var(--space-4) var(--space-6); color:var(--muted); font-size:12px; }
th { padding:var(--space-3) var(--space-4); color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.3px; line-height:1.4; text-transform:uppercase; background:var(--surface-alt); border-bottom:1px solid var(--line); }
td { padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--line); vertical-align:middle; overflow-wrap:anywhere; }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--surface-alt); }
td strong { font-weight:650; }
td .sub { display:block; color:var(--muted); font-size:12px; margin-top:var(--space-1); }
td.wrap { white-space:normal; min-width:160px; max-width:350px; overflow-wrap:anywhere; }
.numeric { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.quantity { font-weight:700; font-size:14px; }
.quantity.low { color:var(--state-low-fg); }
.quantity.empty { color:var(--state-empty-fg); }
.quantity.is-zero,.quantity.zero { color:var(--state-normal-fg); }
.row-actions { display:flex; align-items:flex-start; flex-wrap:wrap; gap:var(--space-2); justify-content:flex-end; min-width:136px; }
/* In-flow disclosure expands the row, including the last row in a scroller. */
.row-more-actions { position:static; min-width:0; max-width:100%; text-align:left; }
.row-more-actions>summary { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:36px; max-width:100%; padding:6px var(--space-3); border:1px solid var(--line); border-radius:5px; color:var(--text); background:var(--surface); font-size:12px; font-weight:600; line-height:1.45; cursor:pointer; list-style:none; white-space:normal; }
.row-more-actions>summary::-webkit-details-marker { display:none; }
.row-more-actions>summary:after { content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); flex-shrink:0; }
.row-more-actions[open]>summary { background:var(--surface-alt); border-color:var(--muted); }
.row-more-actions[open]>summary:after { transform:rotate(225deg) translate(-2px,-1px); }
.more-actions { position:static; display:grid; gap:var(--space-2); padding:var(--space-2) 0 0; min-width:0; max-width:100%; white-space:normal; }
.more-actions .button { width:100%; justify-content:flex-start; text-align:left; }
.empty-state { text-align:center; padding:var(--space-12) var(--space-6); color:var(--muted); white-space:normal; }
.empty-state .empty-icon { color:var(--subtle); margin-bottom:var(--space-3); }
.empty-state .icon { width:32px; height:32px; }
.empty-state h3 { color:var(--text); margin-bottom:var(--space-1); }
.empty-state p { font-size:14px; margin:0 auto var(--space-4); max-width:430px; }

/* 10. Inventory: grouped sticky table and interchangeable responsive cards. */
.inventory-collection { min-width:0; }
.inventory-table-view { display:block; min-width:0; }
.inventory-table-wrap { max-height:min(64svh,640px); overflow:auto; overscroll-behavior:contain; scroll-padding-top:52px; isolation:isolate; }
.inventory-table { min-width:1000px; border-collapse:separate; border-spacing:0; }
.inventory-table thead th { position:sticky; top:0; z-index:3; background:var(--surface-alt); }
.inventory-table thead th:first-child { left:0; z-index:4; box-shadow:1px 0 0 var(--line); }
.inventory-table tbody tr:not(.inventory-group)>:first-child { position:sticky; left:0; z-index:2; min-width:216px; max-width:280px; background:var(--surface); box-shadow:1px 0 0 var(--line); }
.inventory-table tbody tr:not(.inventory-group):hover>:first-child { background:var(--surface-alt); }
.inventory-table .inventory-group>th[scope="rowgroup"] { position:static; inset:auto; z-index:auto; padding:var(--space-3) var(--space-4); background:var(--surface-alt); color:var(--text); font-size:12px; font-weight:700; letter-spacing:0; text-transform:none; white-space:normal; border-top:1px solid var(--line); box-shadow:none; }
.inventory-table .row-actions { min-width:160px; }
.inventory-table .stock-state { margin-top:var(--space-1); }
.inventory-cards { display:none; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--space-4); min-width:0; padding:var(--space-4); }
.inventory-cards>.inventory-group { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2) var(--space-3); min-width:0; padding:var(--space-2) 0; color:var(--text); font-size:13px; font-weight:650; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.inventory-cards>.inventory-group .badge { flex-shrink:0; }
.inventory-card { display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-4); color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); min-width:0; }
.inventory-card-heading { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2) var(--space-3); min-width:0; }
.inventory-card-heading>div { min-width:0; flex:1 1 160px; }
.inventory-card-heading h3 { margin:0 0 var(--space-1); font-size:14px; }
.inventory-card-heading p,.inventory-card-heading small,.inventory-card-heading .sub { display:block; margin:var(--space-1) 0 0; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.inventory-card-heading>.stock-state { flex-shrink:0; }
.inventory-card-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); margin:0; min-width:0; }
.inventory-card-metrics>div { min-width:0; }
.inventory-card-metrics dt { color:var(--muted); font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
.inventory-card-metrics dd { margin:var(--space-1) 0 0; font-size:18px; font-weight:650; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.inventory-card-actions { display:flex; align-items:flex-start; flex-wrap:wrap; gap:var(--space-2); padding-top:var(--space-3); margin-top:auto; border-top:1px solid var(--line); min-width:0; }
.inventory-card-actions .row-actions { justify-content:flex-start; min-width:0; }
.inventory-collection[data-inventory-view="cards"]>.inventory-table-view { display:none; }
.inventory-collection[data-inventory-view="cards"]>.inventory-cards { display:grid; }

/* 11. Tabs, composition rules, details, incidents and selection. */
.tabs { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-6); padding-bottom:var(--space-3); border-bottom:1px solid var(--line); }
.tab { border:1px solid transparent; background:transparent; color:var(--muted); min-height:40px; max-width:100%; padding:var(--space-2) var(--space-3); border-radius:5px; font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.tab[aria-selected="true"] { color:var(--brand); background:var(--brand-soft); border-color:var(--line); }
.rule-lines { display:grid; gap:var(--space-2); margin-top:var(--space-4); }
.rule-line { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-2) 0; border-bottom:1px solid var(--line); font-size:14px; min-width:0; }
.rule-line:last-child { border:0; }
.rule-line>span { min-width:0; overflow-wrap:anywhere; }
.rule-line>strong { flex-shrink:0; }
.rule-line .badge { margin-left:var(--space-2); }
.rule-editor-row { display:grid; grid-template-columns:minmax(120px,1fr) 88px 120px 40px; align-items:end; gap:var(--space-3); padding:var(--space-3) 0; }
.rule-editor-row label { font-size:12px; }
.detail-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr); gap:var(--space-6); align-items:start; min-width:0; }
.detail-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); margin:0; }
.detail-meta dt { color:var(--muted); font-size:12px; margin-bottom:var(--space-1); }
.detail-meta dd { margin:0; font-size:14px; font-weight:550; overflow-wrap:anywhere; }
.code-label { padding:var(--space-4); border:1px dashed var(--muted); background:var(--surface-alt); border-radius:5px; text-align:center; margin-bottom:var(--space-4); }
.code-label strong { display:block; font-size:22px; color:var(--text); letter-spacing:2px; overflow-wrap:anywhere; }
.code-label small { display:block; font-size:11px; margin-top:var(--space-2); color:var(--muted); }
.timeline { display:grid; gap:0; padding:0; margin:0; list-style:none; }
.timeline li { position:relative; padding:0 0 var(--space-6) var(--space-6); border-left:1px solid var(--line); margin-left:var(--space-1); }
.timeline li:last-child { padding-bottom:0; border-left:0; }
.timeline li:before { content:""; position:absolute; left:-5px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--line); border:2px solid var(--surface); }
.timeline li.done:before { background:var(--brand); }
.timeline strong { display:block; font-size:13px; }
.timeline small { display:block; font-size:12px; color:var(--muted); margin-top:var(--space-1); }
.incident { border-left:3px solid var(--state-normal-fg); padding:var(--space-3) var(--space-4); background:var(--surface-alt); border-radius:4px; margin-bottom:var(--space-3); }
.incident.incident-open { border-left-color:var(--state-low-fg); }
.incident.incident-resolved { border-left-color:var(--state-normal-fg); }
.incident p { font-size:14px; margin:var(--space-2) 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.incident small { color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.selection-bar { padding:var(--space-3) var(--space-4); background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); font-size:13px; border-bottom:1px solid var(--line); }
.worker-choice { max-height:280px; overflow:auto; display:grid; gap:0; border:1px solid var(--line); border-radius:5px; }
.worker-choice .checkbox-label { padding:var(--space-3); min-height:48px; margin:0; border-bottom:1px solid var(--line); font-size:13px; }
.worker-choice .checkbox-label:last-child { border:0; }
.worker-choice small { font-size:12px; display:block; color:var(--muted); }
.preview-result { margin-top:var(--space-6); }
.preview-result ul { padding-left:var(--space-6); font-size:14px; }
.preview-card { padding:var(--space-4); border:1px solid var(--line); border-radius:5px; margin-top:var(--space-3); }
.preview-card h3 { font-size:15px; }
.preview-card p { margin:var(--space-1) 0; font-size:14px; overflow-wrap:anywhere; }
.guide-step { display:flex; gap:var(--space-4); padding:var(--space-6); border-bottom:1px solid var(--line); }
.guide-step:last-child { border:0; }
.guide-step>div { min-width:0; }
.guide-step .number { width:32px; height:32px; color:var(--brand); background:var(--brand-soft); display:grid; place-items:center; font-size:13px; font-weight:700; border-radius:5px; flex-shrink:0; }
.guide-step p { color:var(--muted); font-size:14px; margin:0; overflow-wrap:anywhere; }
.guide-step h3 { margin-bottom:var(--space-1); }
.checklist { padding-left:var(--space-6); color:var(--muted); font-size:14px; }
.checklist li { margin:var(--space-3) 0; }

/* 12. Dialogs, notices and supporting content. */
.app-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2); padding:var(--space-4) var(--space-8); border-top:1px solid var(--line); color:var(--subtle); font-size:11px; }
.app-footer span { max-width:100%; overflow-wrap:anywhere; }
dialog { border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); padding:0; width:min(640px,calc(100% - 32px)); max-width:calc(100% - 32px); max-height:calc(100svh - 48px); box-shadow:var(--shadow-lg); overflow:auto; }
dialog.wide { width:min(900px,calc(100% - 32px)); }
dialog::backdrop { background:rgba(5,23,38,.65); backdrop-filter:blur(3px); }
.dialog-header { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-4); padding:var(--space-6) var(--space-6) var(--space-4); border-bottom:1px solid var(--line); }
.dialog-header>div { min-width:0; }
.dialog-header h2 { font-size:20px; margin:0; }
.dialog-header p { font-size:13px; color:var(--muted); margin:var(--space-2) 0 0; }
.dialog-body { padding:var(--space-6); min-width:0; }
.dialog-footer { display:flex; justify-content:flex-end; gap:var(--space-2); flex-wrap:wrap; border-top:1px solid var(--line); padding:var(--space-4) var(--space-6); background:var(--surface-alt); border-radius:0 0 10px 10px; }
.dialog-body>:last-child { margin-bottom:0; }
.dialog-footer .button { min-height:40px; }
/* Persistent feedback is in document flow: it must not cover the last row's actions. */
.toast-region { position:static; display:flex; flex-direction:column; gap:var(--space-3); width:100%; min-width:0; margin-bottom:var(--space-4); }
.toast-region:empty { display:none; }
.toast { display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-4); border:1px solid var(--line); border-left:4px solid var(--brand); background:var(--surface); color:var(--text); border-radius:6px; box-shadow:var(--shadow-lg); pointer-events:auto; font-size:14px; overflow-wrap:anywhere; animation:enter .2s ease-out; }
.toast .icon { color:var(--brand); }
.toast>span { flex:1; min-width:0; }
.toast .icon-button { width:36px; min-width:36px; height:36px; padding:var(--space-2); margin:-4px; }
.toast.error { border-left-color:var(--danger); }
.toast.error>.icon { color:var(--danger); }
.noscript { position:fixed; inset:0; padding:var(--space-12); background:var(--surface); font-size:20px; z-index:999; }
.inline-metrics { display:flex; flex-wrap:wrap; gap:var(--space-6); margin:var(--space-4) 0; }
.inline-metric strong { font-size:24px; display:block; line-height:1.2; font-variant-numeric:tabular-nums; }
.inline-metric small { color:var(--muted); font-size:12px; }
#global-error { margin-bottom:var(--space-6); }
.permission-note { font-size:13px; color:var(--muted); padding:var(--space-3) 0; }
.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; }
.export-link { white-space:normal; }
.result-json { white-space:pre-wrap; font-size:12px; background:var(--surface-alt); border:1px solid var(--line); padding:var(--space-4); border-radius:5px; overflow-wrap:anywhere; }
.import-columns { font-family:ui-monospace,Consolas,monospace; font-size:12px; overflow-wrap:anywhere; }

/* 13. Responsive layouts and touch sizes. Forced inventory views stay explicit. */
@media(min-width:1700px) {
  #main-content { padding:40px 48px; }
  .topbar { padding-left:48px; padding-right:48px; }
}
@media(max-width:1200px) {
  .shell { grid-template-columns:232px minmax(0,1fr); }
  .sidebar { padding-left:var(--space-3); padding-right:var(--space-3); }
  #main-content { padding:var(--space-6) var(--space-6) var(--space-8); }
  .topbar { padding-left:var(--space-6); padding-right:var(--space-6); }
  .grid.dashboard { grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr); }
  .quick-grid { gap:var(--space-2); padding:var(--space-4); }
  .quick-action { padding:var(--space-3); }
  .stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); }
  .stat-value { font-size:28px; }
}
@media(max-width:1020px) {
  .grid.dashboard,.detail-layout { grid-template-columns:1fr; }
  .grid.dashboard>.stack { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .demo-label { display:none; }
  .page-heading { align-items:flex-start; flex-wrap:wrap; }
  .heading-actions { justify-content:flex-end; }
  .hero { padding:var(--space-6); }
  .campaign-stamp { min-width:140px; padding-left:var(--space-4); }
  .hero h2 { font-size:22px; }
  .stats,.stats:has(>.stat-transit) { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:800px) {
  .shell { grid-template-columns:minmax(0,1fr); }
  .sidebar { position:fixed; left:0; width:264px; max-width:calc(100% - 48px); transform:translateX(-100%); transition:transform .2s; }
  .shell.menu-open .sidebar { transform:none; }
  .sidebar-scrim { position:fixed; inset:0; border:0; background:rgba(5,23,38,.58); z-index:25; width:100%; height:100%; }
  .mobile-menu { display:inline-flex; }
  .topbar { min-height:64px; padding:var(--space-2) var(--space-4); }
  .topbar-left { gap:var(--space-1); }
  #main-content { padding:var(--space-6) var(--space-4) var(--space-8); }
  .page-heading { margin-bottom:var(--space-4); }
  .login-story { padding:var(--space-8); min-height:auto; }
  .login-story h1 { font-size:38px; }
  .login-story-content { margin:64px 0; }
  .login-panel { padding-left:var(--space-6); padding-right:var(--space-6); }
  .login-route { gap:var(--space-2); }
  .route-node svg { width:44px; height:44px; }
  .route-connector { margin-top:22px; }
  .table-scroll-hint { display:block; padding-left:var(--space-4); padding-right:var(--space-4); }
  .button,.button.small,.tab,.view-switch button,.row-more-actions>summary,.inventory-more-filters>summary { min-width:44px; min-height:44px; }
  .icon-button,.topbar-actions .icon-button,.toast .icon-button { min-width:44px; width:44px; min-height:44px; height:44px; }
  .toolbar input,.toolbar select { min-height:44px; font-size:16px; }
  .filter-chip { min-height:44px; }
  .filter-chip button { width:44px; height:44px; }
  button.text-link,a.text-link { display:inline-flex; align-items:center; min-width:44px; min-height:44px; }
  .advanced-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .inventory-table-wrap { max-height:min(60svh,480px); }
  .activity-item { flex-wrap:wrap; }
  .activity-item>div { flex:1 1 180px; }
  .activity-item time { margin-left:44px; }
}
@media(width < 800px) {
  .inventory-collection:not([data-inventory-view="table"])>.inventory-table-view { display:none; }
  .inventory-collection:not([data-inventory-view="table"])>.inventory-cards { display:grid; }
}
@media(max-width:600px) {
  .login-screen { grid-template-columns:minmax(0,1fr); }
  .login-story { padding:var(--space-6); min-height:auto; }
  .login-story-content { margin:40px 0 var(--space-6); }
  .login-story h1 { font-size:33px; margin-bottom:var(--space-4); }
  .login-story p { font-size:14px; }
  .login-route,.login-disclaimer { display:none; }
  .brand-login { font-size:14px; }
  .login-panel { padding:56px var(--space-6) var(--space-6); }
  .login-theme { right:12px; top:8px; }
  .login-form { margin:0; }
  .login-form h2 { font-size:25px; }
  .login-bottom { margin-top:var(--space-8); }
  #main-content { padding:var(--space-6) var(--space-3); }
  .topbar { padding-left:var(--space-2); padding-right:var(--space-2); }
  .breadcrumb { font-size:11px; }
  .breadcrumb span { margin:0 var(--space-1); }
  .topbar-actions { gap:0; }
  .page-heading { flex-direction:column; align-items:stretch; gap:var(--space-4); }
  .page-heading h1 { font-size:27px; }
  .heading-actions { justify-content:flex-start; }
  .hero { grid-template-columns:minmax(0,1fr); padding:var(--space-6); gap:var(--space-4); }
  .hero h2 { font-size:22px; }
  .campaign-stamp { border-left:0; border-top:1px solid #37586f; padding:var(--space-3) 0 0; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:var(--space-3); align-items:center; min-width:0; }
  .campaign-stamp strong { font-size:23px; grid-row:1/3; }
  .campaign-stamp .badge { display:none; }
  .operations-banner { padding:var(--space-4); margin-bottom:var(--space-4); }
  .stats { gap:var(--space-2); margin-bottom:var(--space-4); }
  .stat { padding:var(--space-3); }
  .stat-value { font-size:27px; }
  .stat-label { font-size:12px; }
  .stat-top { margin-bottom:var(--space-2); }
  .stat-icon { width:28px; height:28px; }
  .stat-icon .icon { width:16px; height:16px; }
  .grid.two,.grid.dashboard>.stack { grid-template-columns:minmax(0,1fr); }
  .grid,.stack,.detail-layout { gap:var(--space-4); }
  .card-header,.card-padding { padding:var(--space-4); }
  .card-footer { padding:var(--space-3) var(--space-4); }
  .quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); padding:var(--space-4); }
  .toolbar { padding:var(--space-4); gap:var(--space-3); margin-bottom:var(--space-4); }
  .toolbar .form-field { flex-basis:calc(50% - 6px); max-width:none; }
  .toolbar .form-field.search { flex-basis:100%; }
  .toolbar .toolbar-end { margin-left:0; }
  .inventory-controls .view-switch { margin-left:0; }
  .advanced-filter-grid { grid-template-columns:minmax(0,1fr); }
  .form-grid { grid-template-columns:minmax(0,1fr); gap:var(--space-4); }
  .form-grid .full { grid-column:auto; }
  input,select,textarea { font-size:16px; }
  th { padding:var(--space-3); }
  td { padding:var(--space-3); }
  .inventory-cards { gap:var(--space-3); padding:var(--space-3); }
  .inventory-card { padding:var(--space-3); gap:var(--space-3); }
  .inventory-card-actions>.button { flex:1 1 auto; }
  .app-footer { padding:var(--space-4); }
  .dialog-header { padding:var(--space-4); }
  .dialog-body { padding:var(--space-4); }
  .dialog-footer { padding:var(--space-4); }
  .dialog-footer .button { min-height:44px; }
  .dialog-header h2 { font-size:18px; }
  .rule-editor-row { grid-template-columns:minmax(0,1fr) 88px; gap:var(--space-2); border-bottom:1px solid var(--line); }
  .rule-editor-row .checkbox-label { align-self:center; min-height:44px; }
  .rule-editor-row .icon-button { justify-self:end; }
  .detail-meta { gap:var(--space-4); }
  .guide-step { padding:var(--space-4); gap:var(--space-3); }
  .tabs { gap:var(--space-1); }
  .tab { padding:var(--space-2) var(--space-3); }
  .activity-list,.alert-list,.attention-list,.work-list { padding-left:var(--space-4); padding-right:var(--space-4); }
}
@media(max-width:360px) {
  .stat-top { flex-wrap:wrap; }
  .stat-icon { order:-1; }
  .stat-label { flex-basis:100%; }
  .toolbar .form-field { flex-basis:100%; }
  .quick-grid { grid-template-columns:minmax(0,1fr); }
  .detail-meta { grid-template-columns:minmax(0,1fr); }
}

/* 14. User preferences and print. */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
@media(forced-colors:active) {
  .badge,.garment-marker,.stat-icon,.alert-number { border:1px solid CanvasText; }
  .view-switch button[aria-pressed="true"],.menu a[aria-current="page"] { outline:2px solid Highlight; outline-offset:-2px; }
}
@media print {
  .sidebar,.topbar,.app-footer,.heading-actions,.toolbar,.button,.toast-region,.inventory-controls,.active-filters,.inventory-card-actions { display:none!important; }
  .shell { display:block; }
  #main-content { padding:0; }
  .card { box-shadow:none; break-inside:avoid; }
  body { background:#fff; color:#000; }
  .table-wrap { overflow:visible; max-height:none; }
  .inventory-collection>.inventory-table-view { display:block!important; }
  .inventory-collection>.inventory-cards { display:none!important; }
  .inventory-table { min-width:0; }
  .inventory-table thead th,.inventory-table tbody tr:not(.inventory-group)>:first-child { position:static; box-shadow:none; }
  .row-more-actions { display:none; }
}