:root{
    --sidebar-width:256px;
    --ux-focus:#3158d8;
    --ux-focus-ring:0 0 0 4px rgba(49,88,216,.16);
    --ux-panel-border:#e3e8f0;
    --ux-text-soft:#596579;
}

html{scroll-padding-top:96px}
body{font-size:15px;line-height:1.55}
.skip-link{background:#172033;border-radius:0 0 10px 10px;color:#fff;font-weight:800;left:20px;padding:10px 14px;position:fixed;top:0;transform:translateY(-120%);transition:transform .16s;z-index:200}
.skip-link:focus{transform:translateY(0)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{box-shadow:var(--ux-focus-ring);outline:2px solid var(--ux-focus);outline-offset:2px}

/* Navigation: group work by user intent and keep every module discoverable. */
.sidebar{padding:18px 14px 13px}
.sidebar-head{margin-bottom:13px}
.brand{gap:12px}
.brand-copy strong{font-size:15px}.brand-copy small{font-size:11px}
.side-nav{gap:2px;padding-bottom:10px}
.nav-label{font-size:10px;letter-spacing:.11em;margin:13px 11px 5px}
.side-nav a,.settings-link{border-radius:10px;font-size:13px;min-height:39px;padding:8px 10px}
.nav-icon{font-size:15px;height:21px;width:21px}
.sidebar-bottom{background:transparent;margin-top:auto;padding-top:13px;position:static}
.account-summary{grid-template-columns:35px minmax(0,1fr);margin-top:8px}.avatar{height:35px;width:35px}.account-summary strong{font-size:12px}.account-summary small{font-size:10px}

/* Page hierarchy and actions. */
.topbar{height:74px;padding:0 clamp(18px,2.4vw,34px)}
.topbar-actions{flex-shrink:0}.topbar-location{min-width:0}.date-pill{font-size:12px}
.content-area{max-width:1380px;padding:32px clamp(18px,2.4vw,34px) 72px}
.page-heading{align-items:flex-end;margin-bottom:26px}.page-heading>div:first-child{min-width:0}
.page-heading h1{font-size:clamp(30px,3vw,42px);margin-bottom:9px}
.page-heading p,.section-heading p,.panel-intro{font-size:13.5px;line-height:1.6}
.panel-kicker,.eyebrow{font-size:10px;letter-spacing:.11em}
.heading-actions{justify-content:flex-end}
.button{border-radius:10px;font-size:13px;min-height:42px;padding:10px 15px}
.button.compact{min-height:40px;padding:9px 14px}.button.small,.small-button{font-size:12px;min-height:36px;padding:8px 11px}
.icon-button,.dialog-close{min-height:40px;min-width:40px}
.back-to-top{align-items:center;background:#172033;border:0;border-radius:12px;bottom:24px;box-shadow:0 12px 30px rgba(23,32,51,.22);color:#fff;cursor:pointer;display:flex;font-size:20px;height:44px;justify-content:center;opacity:0;pointer-events:none;position:fixed;right:24px;transform:translateY(12px);transition:.2s;visibility:hidden;width:44px;z-index:55}
.back-to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0);visibility:visible}

/* Clearer cards, readable summaries and adaptive dashboards. */
.glass-panel,.workflow-section,.low-stock-panel,.data-panel,.editor-panel,.filter-panel,.placeholder-panel{background:rgba(255,255,255,.93);border:1px solid var(--ux-panel-border);box-shadow:0 10px 34px rgba(32,47,72,.065);padding:24px}
.section-heading{margin-bottom:18px}.section-heading h2{font-size:22px}.section-heading a{font-size:12.5px}
.stats-row,.metric-strip{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.stat-card{min-height:128px;padding:20px}.stat-card>span{font-size:11px}.stat-card strong{font-size:32px;margin:16px 0 8px}.stat-card small{font-size:11.5px;line-height:1.4}
.metric-mini{padding:16px}.metric-mini span{font-size:11px}.metric-mini strong{font-size:23px}
.workflow-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.workflow-card{min-height:178px;padding:18px}.workflow-card p{font-size:12.5px}
.activity-row strong,.attention-card strong{font-size:13px}.activity-row small,.attention-card p{font-size:11.5px}.activity-row time{font-size:11px}
.empty-state{font-size:13px;line-height:1.65;padding:28px}.status-pill{font-size:10px;padding:5px 9px}

/* Forms: larger controls, clearer grouping and no hidden-radio overflow. */
.form-grid{gap:17px;margin-top:19px}.field{gap:7px}.field>span,.module-access-field legend{color:#374255;font-size:12px;font-weight:760}.field small,.form-divider small,.editor-note{font-size:11.5px}.field input,.field select,.field textarea,.login-form input{border-color:#d7dee9;border-radius:10px;font-size:14px;min-height:46px;padding:10px 12px}.field textarea{min-height:92px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#b9c3d2}
.field input:focus,.field select:focus,.field textarea:focus,.login-form input:focus{box-shadow:var(--ux-focus-ring)}
.check-field{min-height:46px}.check-field input,.module-checklist input{height:18px;width:18px}.check-field span{font-size:12.5px}
.choice-row{gap:10px}.choice-row label{position:relative}.choice-row input{clip-path:inset(50%);height:1px!important;overflow:hidden;position:absolute;width:1px!important}.choice-row span{font-size:13px;min-height:44px;padding:11px}
.form-divider{margin-top:8px;padding-top:18px}.form-divider strong{font-size:14px}.form-actions{gap:10px;margin-top:22px;padding-top:18px}
.editor-note{padding:13px 14px}.module-checklist label{min-height:44px}.module-checklist span{font-size:12px}
.ux-form-guide{background:linear-gradient(135deg,#f7f9ff,#eef2ff);border:1px solid #dbe2fb;border-radius:15px;display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px;padding:12px}
.ux-form-guide span{align-items:center;color:#536078;display:flex;font-size:12px;font-weight:700;gap:9px;padding:8px 10px}.ux-form-guide b{align-items:center;background:#fff;border:1px solid #d8e0f7;border-radius:50%;color:var(--primary);display:flex;flex:0 0 27px;height:27px;justify-content:center;width:27px}
.login-card{max-width:470px;padding:38px}.login-heading p{font-size:13px}.login-form label>span{font-size:12px}.login-form input{font-size:14px;min-height:48px}.primary-wide{font-size:14px;min-height:48px}.login-note{font-size:11px}.password-field{display:grid;position:relative}.password-field input{padding-right:64px}.password-field button{background:#eef1ff;border:0;border-radius:8px;color:var(--primary);cursor:pointer;font-size:11px;font-weight:800;padding:7px 10px;position:absolute;right:7px;top:7px}

/* Tables remain compact but no longer rely on tiny type. */
.data-table-wrap{border:1px solid #e6eaf1;border-radius:13px;overscroll-behavior-x:contain;scrollbar-width:thin}
table{background:#fff}th{background:#f8fafc;color:#697487;font-size:11px;padding:12px 11px;position:sticky;top:0;z-index:1}td{font-size:12.5px;padding:14px 11px}td small{font-size:11.5px;line-height:1.45}.table-actions a,.table-actions button,.table-link{font-size:11.5px;min-height:32px;padding:7px}
.data-table-wrap:focus-visible{box-shadow:var(--ux-focus-ring);outline:0}.count-pill{font-size:11px;padding:8px 11px}
.inline-filter{gap:10px}.inline-filter input,.inline-filter select{font-size:13px;min-height:42px}

/* Drawers and dialogs feel like guided tasks, not floating forms. */
.action-drawer{background:#fff;padding:24px;width:min(560px,96vw)}body.drawer-open{overflow:hidden}
.drawer-head{margin-bottom:20px;padding-bottom:18px}.drawer-head h2{font-size:26px}.drawer-intro{font-size:12px;line-height:1.5}
.quick-action-list{gap:10px}.quick-action-list a{min-height:66px;padding:13px}.quick-action-list strong{font-size:13px}.quick-action-list small{font-size:11px}.quick-action-list a>span{font-size:18px;height:40px;width:40px}
.app-dialog,.quick-add-dialog{max-height:calc(100dvh - 28px)}.dialog-card,.quick-add-card{padding:24px}.dialog-heading h2,.quick-add-head h2{font-size:24px}.dialog-heading p,.quick-add-head p:last-child{font-size:12px}

/* Settings becomes a compact task chooser with expandable working sections. */
.ux-settings-hub{background:rgba(255,255,255,.93);border:1px solid var(--ux-panel-border);border-radius:18px;box-shadow:0 10px 34px rgba(32,47,72,.065);margin-bottom:18px;padding:22px}
.ux-settings-hub .section-heading{margin-bottom:15px}.ux-settings-hub-grid{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
.ux-settings-hub-link{align-items:center;background:#f8fafc;border:1px solid #e1e6ef;border-radius:13px;display:grid;gap:11px;grid-template-columns:34px minmax(0,1fr) auto;min-height:72px;padding:12px;transition:.18s}
.ux-settings-hub-link:hover{background:#f1f4ff;border-color:#b9c5f2;transform:translateY(-1px)}.ux-settings-hub-link>span{align-items:center;background:#eef1ff;border-radius:9px;color:var(--primary);display:flex;font-size:11px;font-weight:850;height:34px;justify-content:center}.ux-settings-hub-link strong{display:block;font-size:13px}.ux-settings-hub-link small{color:var(--muted);display:block;font-size:11px;line-height:1.4;margin-top:2px}.ux-settings-hub-link>b{color:#8a94a6}
.ux-settings-section-toggle{align-items:center;background:#fff;border:1px solid var(--ux-panel-border);border-radius:15px;color:var(--ink);cursor:pointer;display:grid;gap:13px;grid-template-columns:38px minmax(0,1fr) 30px;margin:11px 0;padding:14px 16px;text-align:left;width:100%}.ux-settings-section-toggle:hover{border-color:#bac5d6;box-shadow:0 8px 24px rgba(32,47,72,.06)}.ux-settings-section-toggle>span:first-child{align-items:center;background:#eef1ff;border-radius:10px;color:var(--primary);display:flex;font-size:12px;font-weight:850;height:38px;justify-content:center}.ux-settings-section-toggle strong{display:block;font-size:14px}.ux-settings-section-toggle small{color:var(--muted);display:block;font-size:11.5px;margin-top:3px}.ux-settings-section-toggle>b{align-items:center;background:#f2f4f7;border-radius:50%;color:#637086;display:flex;font-size:18px;height:28px;justify-content:center;transition:transform .18s;width:28px}.ux-settings-section-toggle[aria-expanded=true]{background:#f7f9ff;border-color:#cbd4f5;margin-bottom:14px}.ux-settings-section-toggle[aria-expanded=true]>b{background:var(--primary);color:#fff;transform:rotate(45deg)}
.ux-settings-section[hidden]{display:none!important}.ux-settings-section{animation:ux-reveal .18s ease;margin-bottom:22px;scroll-margin-top:96px}@keyframes ux-reveal{from{opacity:.35;transform:translateY(-5px)}to{opacity:1;transform:none}}
.ux-settings-accordion{margin:11px 0}.ux-settings-accordion>summary{list-style:none}.ux-settings-accordion>summary::-webkit-details-marker{display:none}.ux-settings-accordion>.ux-settings-section-toggle{margin:0}.ux-settings-accordion[open]>.ux-settings-section-toggle{background:#f7f9ff;border-color:#cbd4f5;margin-bottom:14px}.ux-settings-accordion[open]>.ux-settings-section-toggle>b{background:var(--primary);color:#fff;transform:rotate(45deg)}.ux-settings-accordion>section{animation:ux-reveal .18s ease;margin-bottom:22px;scroll-margin-top:96px}

/* Guided start on Overview and create workflows. */
.ux-process-guide{margin-bottom:20px}.ux-process-grid{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}.ux-process-step{align-items:center;background:#f8fafc;border:1px solid #e2e7ef;border-radius:13px;display:grid;gap:11px;grid-template-columns:34px minmax(0,1fr) auto;padding:13px}.ux-process-step:hover{background:#f1f4ff;border-color:#bec9f2}.ux-process-step>span{align-items:center;background:#fff;border:1px solid #dce3ef;border-radius:50%;color:var(--primary);display:flex;font-size:11px;font-weight:850;height:34px;justify-content:center}.ux-process-step strong{display:block;font-size:12.5px}.ux-process-step small{color:var(--muted);display:block;font-size:10.5px;margin-top:2px}.ux-process-step>b{color:#8a94a6}

/* Dense location screens need readable labels without losing hierarchy. */
.location-tree details>summary{min-height:48px;padding:9px 10px}.tree-name{font-size:12px}.tree-code,.tree-purpose{font-size:11px}.location-type-chip{font-size:10.5px}.tree-actions .tree-edit,.tree-duplicate,.tree-delete,.tree-add-under{font-size:11px;min-height:32px;padding:8px 9px}.warehouse-heading p{font-size:11.5px}.warehouse-metrics>span:not(.status-pill){font-size:11px}

/* Analytics remains information-dense, but supporting text is still readable. */
.insight-metrics span{font-size:10.5px}.insight-metrics small,.chart-legend span,.chart-footnote,.forecast-period{font-size:11px}.live-chip{font-size:10px}.insights-empty-banner p{font-size:11.5px}.intel-card>div>strong,.outlet-main strong{font-size:12px}.intel-card p,.outlet-main span,.outlet-main small,.next-order strong,.outlet-favourites strong,.outlet-favourites p,.movement-timeline time,.movement-timeline p,.movement-timeline article>b,.velocity-pill,.forecast-legend span{font-size:10.5px}.chart-tooltip strong{font-size:11px}.chart-tooltip span{font-size:10.5px}.heatmap-table td{font-size:10.5px}

@media(max-width:1100px){
    .page-heading{align-items:flex-start;flex-direction:column}.heading-actions{justify-content:flex-start;width:100%}
    .ux-settings-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ux-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
    .content-area{padding:26px 18px 64px}.topbar{height:68px}.side-nav a,.settings-link{min-height:43px}
}
@media(max-width:620px){
    body{font-size:14px}.topbar{padding:0 12px}.topbar-actions{gap:6px}.topbar-actions .button.compact{min-width:40px;padding:9px}.topbar-actions .button.primary.compact{font-size:0}.topbar-actions .button.primary.compact::before{content:"＋";font-size:18px}.topbar-logout-label{display:none}
    .content-area{padding:22px 13px 70px}.page-heading{gap:14px;margin-bottom:20px}.page-heading h1{font-size:30px}.page-heading p{font-size:13px}.heading-actions .button{flex:1 1 auto}
    .glass-panel,.workflow-section,.low-stock-panel,.data-panel,.editor-panel,.filter-panel,.placeholder-panel{border-radius:15px;padding:17px}
    .stats-row,.metric-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-card{min-height:112px;padding:15px}.stat-card strong{font-size:26px}
    .form-grid{grid-template-columns:1fr}.field.full,.full-span{grid-column:auto}.form-actions{align-items:stretch;flex-direction:column-reverse}.form-actions .button{width:100%}.ux-form-guide{grid-template-columns:1fr}
    .ux-settings-hub{padding:16px}.ux-settings-hub-grid,.ux-process-grid{grid-template-columns:1fr}.ux-settings-section-toggle{padding:12px}
    .data-table-wrap{margin-left:-4px;margin-right:-4px}.back-to-top{bottom:16px;right:16px}
    .action-drawer{padding:18px;width:100vw}.dialog-card,.quick-add-card{border-radius:16px;padding:18px}
}
@media(max-width:390px){.stats-row,.metric-strip{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ux-settings-section{animation:none}}