/* Final semantic surface layer. All UI palettes derive from the current Social
   appearance state; intentional paper/branding/semantic-status colors are scoped. */
:root{--storage-surface:color-mix(in srgb,var(--theme-bg-1) 48%,transparent);--storage-surface-strong:color-mix(in srgb,var(--theme-bg-2) 90%,transparent);--storage-edge:color-mix(in srgb,var(--theme-accent) 23%,var(--glass-border));--storage-overlay:color-mix(in srgb,var(--theme-bg-2) 26%,#07121f80);--warning-ink:#88500f;--warning-fill:#e5a0381a;--danger-ink:#a22d43;--danger-fill:#d84a601a;--success-ink:#146c52;--success-fill:#229b7619;--paper:#fff;--paper-ink:#18293f;--paper-muted:#4a6078;--paper-line:#c7d4e2}
html[data-social-theme=dark]{--storage-surface:color-mix(in srgb,var(--theme-bg-1) 25%,transparent);--storage-surface-strong:color-mix(in srgb,var(--theme-bg-2) 95%,#07121f);--storage-overlay:color-mix(in srgb,var(--theme-bg-1) 42%,#02060be0);--warning-ink:#ffcf86;--warning-fill:#e5a03824;--danger-ink:#ffb8c4;--danger-fill:#d84a6030;--success-ink:#8ee2bd;--success-fill:#229b762a}
html,body,.storage-app,.storage-main,.modal,.modal-scroll,.gc-popup{color:var(--theme-text)}
.storage-app :is(h1,h2,h3),.modal :is(h1,h2,h3){color:var(--theme-text)}
.storage-app :is(.muted,.small.muted,.tiny.muted,.page-head p,.table th,.table .sub,.stat label,.stat small,.workspace small,.sidebar-bottom p,.app-footer,.register-foot),.modal :is(.muted,.small.muted,.tiny.muted,.table th,.table .sub,.field>span,.modal-header p,.detail-summary>div>span:first-child),.gc-weekday{color:var(--muted)}
.storage-app :is(.btn:not(.primary):not(.danger):not(.success),.icon-btn,.text-link,.stat-icon),.modal :is(.btn:not(.primary):not(.danger):not(.success),.icon-btn,.text-link),.gc-calendar-head button,.gc-calendar-footer button{color:var(--accent-display)}
.storage-app .btn.primary,.modal .btn.primary,.gc-day[aria-selected=true]{background:var(--primary-bg)!important;color:var(--primary-ink)!important;border-color:color-mix(in srgb,var(--primary-bg) 65%,white)!important}
.storage-app .btn.primary :is(span,svg),.modal .btn.primary :is(span,svg){color:var(--primary-ink)!important}
.storage-app .btn.danger,.modal .btn.danger{background:var(--danger-fill);color:var(--danger-ink);border-color:color-mix(in srgb,var(--danger-ink) 28%,transparent)}.danger-text,[data-social-theme=dark] .danger-text{color:var(--danger-ink)}
.storage-app .btn.success,.modal .btn.success{background:var(--success-fill);color:var(--success-ink);border-color:color-mix(in srgb,var(--success-ink) 28%,transparent)}.good-text,[data-social-theme=dark] .good-text{color:var(--success-ink)}.warning-text{color:var(--warning-ink)}
.storage-app :is(.tabs,.view-toggle,.selection-bar),.modal .tabs{background:var(--storage-surface);border-color:var(--glass-border)}.tabs button,.view-toggle button{color:var(--muted)}.tabs button.active,.view-toggle button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-display)}
.storage-app .nav a:not(.active),.storage-app .nav a:not(.active) .icon{color:var(--muted)}.storage-app .nav a.active,.storage-app .nav a.active .icon{color:var(--theme-text)!important}
.notice,.modal .notice,.storage-app .notice{color:var(--muted);background:var(--storage-surface);border-color:var(--glass-border)}.notice.amber,.modal .notice.amber{color:var(--warning-ink);background:var(--warning-fill);border-color:color-mix(in srgb,var(--warning-ink) 25%,transparent)}.notice.glass-painted,.modal .notice.glass-painted{background:transparent}
.badge.gray,[data-social-theme=dark] .badge.gray{background:color-mix(in srgb,var(--theme-text) 9%,transparent);color:var(--muted)}.badge.blue,[data-social-theme=dark] .badge.blue{background:var(--accent-soft);color:var(--accent-display)}.badge.amber,[data-social-theme=dark] .badge.amber{background:var(--warning-fill);color:var(--warning-ink)}.badge.red,[data-social-theme=dark] .badge.red{background:var(--danger-fill);color:var(--danger-ink)}.badge.green,.badge.mint,[data-social-theme=dark] .badge.green,[data-social-theme=dark] .badge.mint{background:var(--success-fill);color:var(--success-ink)}.badge.purple,[data-social-theme=dark] .badge.purple{background:color-mix(in srgb,var(--theme-secondary) 16%,transparent);color:var(--accent-display)}
.gc-trigger,.gc-input{background:var(--storage-surface);border-color:var(--storage-edge)}.gc-input :is(input,textarea),.gc-trigger,.gc-option{color:var(--theme-text)}input::placeholder,textarea::placeholder,[data-social-theme=dark] input::placeholder,[data-social-theme=dark] textarea::placeholder{color:var(--muted);opacity:.86}.gc-popup{background:var(--storage-surface-strong);border-color:var(--glass-border)}.gc-popup.glass-painted{background:transparent}.gc-option[aria-selected=true],.gc-option:hover,.gc-option:focus-visible,[data-social-theme=dark] .gc-option[aria-selected=true]{color:var(--accent-display);background:var(--accent-soft)}
.modal-overlay,.storage-app.rail-open .nav-backdrop{background:var(--storage-overlay)}.print-preview-scroll{background:color-mix(in srgb,var(--theme-text) 8%,var(--theme-bg-2));border:1px solid var(--line)}
.glass-off .storage-sidebar,.glass-off .modal,.glass-off .gc-popup,.glass-off .appearance-picker{background:var(--storage-surface-strong)!important}.glass-off .btn.primary{background:var(--primary-bg)!important;color:#fff!important}
/* Consistent and stationary close affordance: same inset on both axes. */
.modal{--dialog-inset:26px}.modal .modal-scroll,.modal.appearance-dialog .modal-scroll{padding:var(--dialog-inset);max-height:calc(100dvh - 50px)}.modal .modal-header,.modal.appearance-dialog .modal-header{padding:0 62px 0 0;margin-bottom:23px;min-height:44px}.modal .modal-header>div{width:100%}.modal>[data-dialog-close]{position:absolute!important;right:var(--dialog-inset);top:var(--dialog-inset);z-index:8;width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;display:grid;place-items:center;line-height:1;border-radius:12px}.modal>[data-dialog-close]>.icon{display:block;width:19px;height:19px;flex:none;margin:0}.modal>[data-dialog-close]>.sg-pane{z-index:-1}.appearance-picker .row.between{align-items:flex-start;gap:14px}.appearance-picker [data-color-close]{width:44px;min-width:44px;height:44px;min-height:44px;display:grid;place-items:center;padding:0;line-height:1;font-size:24px}.appearance-dialog .modal-header p{font-size:12px;margin-top:7px;line-height:1.6}.appearance-dialog .modal-header h2{font-size:22px;line-height:1.25;letter-spacing:-.6px}
/* Paper intentionally stays white/ink in every palette, also before printing. */
.print-document,.print-label,.paper-preview,.invoice-paper{background:var(--paper)!important;color:var(--paper-ink)!important;border-color:var(--paper-line)!important;color-scheme:light}
:is(.print-document,.print-label,.paper-preview,.invoice-paper) :is(h1,h2,h3,p,b,strong,span,th,td),[data-social-theme=dark] :is(.print-document,.print-label,.paper-preview,.invoice-paper) :is(h1,h2,h3,p,b,strong,span,th,td){color:var(--paper-ink)!important}
:is(.print-document,.print-label,.paper-preview,.invoice-paper) :is(small,footer,.paper-sign),[data-social-theme=dark] :is(.print-document,.print-label,.paper-preview,.invoice-paper) :is(small,footer,.paper-sign){color:var(--paper-muted)!important}.print-document table th,.print-document table td{border-color:var(--paper-line)!important;background:transparent!important}.paper-preview i,.paper-rule{background:var(--paper-line)}
/* Floating notices remain readable after palette changes. */
#toast,#toast.glass-painted,[data-social-theme=dark] #toast{color:var(--theme-text);border-color:var(--glass-border);background:var(--storage-surface-strong)}
@media(max-width:950px){.modal{--dialog-inset:23px}}@media(max-width:650px){.modal{--dialog-inset:16px}.modal .modal-scroll,.modal.appearance-dialog .modal-scroll{max-height:calc(100dvh - 20px)}.modal .modal-header,.modal.appearance-dialog .modal-header{padding-right:58px;min-height:44px}.modal .modal-header h2,.modal.appearance-dialog .modal-header h2{font-size:20px}.modal .modal-header p,.modal.appearance-dialog .modal-header p{font-size:10px}.modal>[data-dialog-close]{width:44px;height:44px;min-width:44px;min-height:44px}}
@media print{.print-preview-scroll{background:transparent!important;border:0}.modal>[data-dialog-close]{display:none!important}html,body{--theme-text:#18293f;--muted:#4a6078}}
:root{--shadow:0 5px 22px color-mix(in srgb,var(--theme-accent) 8%,transparent),0 1px 3px color-mix(in srgb,var(--theme-accent) 7%,transparent);--glass-border:color-mix(in srgb,var(--theme-bg-1) 62%,white);--soft-fill:color-mix(in srgb,var(--theme-bg-1) 32%,transparent)}html[data-social-theme=dark]{--shadow:0 5px 22px #0002,0 1px 3px #0002;--glass-border:color-mix(in srgb,var(--theme-bg-3) 65%,#ffffff45);--soft-fill:color-mix(in srgb,var(--theme-bg-2) 32%,transparent)}
html[data-social-theme] .modal:not(.glass-painted){background:var(--storage-surface-strong)}html[data-social-theme] .modal.glass-painted{background:transparent}.storage-app .glass,.storage-app [data-glass],.modal [data-glass]{border-color:var(--glass-border)}.storage-app .btn,.storage-app .icon-btn,.modal .btn,.modal .icon-btn{box-shadow:0 3px 9px color-mix(in srgb,var(--theme-accent) 9%,transparent),inset 0 1px 0 color-mix(in srgb,var(--theme-bg-1) 75%,transparent);background-color:var(--storage-surface);background-image:none}.storage-app .btn:hover,.storage-app .icon-btn:hover,.modal .btn:hover,.modal .icon-btn:hover{box-shadow:0 5px 15px color-mix(in srgb,var(--theme-accent) 16%,transparent),inset 0 1px 0 var(--glass-border)}.storage-app .btn.primary,.modal .btn.primary{box-shadow:0 4px 14px color-mix(in srgb,var(--primary-bg) 26%,transparent)}.storage-app .btn.flat,.modal .btn.flat{background:transparent;border-color:transparent;box-shadow:none}.storage-app .btn.danger,.modal .btn.danger{background-color:var(--danger-fill)}.storage-app .btn.success,.modal .btn.success{background-color:var(--success-fill)}
@media(max-width:650px),(pointer:coarse){.storage-app .topbar>.icon-btn,.storage-app .topbar>.profile-button{min-width:44px;width:44px;min-height:44px;height:44px}.storage-app .topbar .btn{min-height:44px}}
@media(max-width:650px){.storage-app .topbar>.brand{flex:1}.storage-app .topbar>.profile-button{order:6}.warehouse-control{order:5;width:calc(100% - 52px);flex:1 1 calc(100% - 52px)}}

/* The mobile drawer is full navigation, not the inherited icon-only KDS rail. */
@media(max-width:950px){.storage-sidebar .nav a{justify-content:flex-start}.storage-sidebar .nav a>span{display:inline}.storage-sidebar .nav a>.count{display:inline-flex}}
/* Reserve stationary dialog chrome so scrolling form controls cannot pass under X. */
.modal{display:flex;flex-direction:column;max-height:calc(100dvh - 50px)}.modal>.modal-header,.modal.appearance-dialog>.modal-header{flex:none;position:relative;z-index:2;margin:0;min-height:88px;padding:var(--dialog-inset) calc(var(--dialog-inset) + 62px) 20px var(--dialog-inset)}.modal>.modal-scroll,.modal.appearance-dialog>.modal-scroll{flex:1 1 auto;min-height:0;max-height:none;padding:0 var(--dialog-inset) var(--dialog-inset);scroll-padding-block:20px}.modal>.modal-header h2,.modal>.modal-header p{position:relative;z-index:1}.modal>[data-dialog-close]{z-index:8}
@media(max-width:650px){.modal{max-height:calc(100dvh - 20px)}.modal>.modal-header,.modal.appearance-dialog>.modal-header{min-height:76px;padding:var(--dialog-inset) calc(var(--dialog-inset) + 58px) 18px var(--dialog-inset)}.modal>.modal-scroll,.modal.appearance-dialog>.modal-scroll{max-height:none;padding-top:0}}