::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: #070B14; }
        ::-webkit-scrollbar-thumb { background: #172033; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #222E46; }

        .inventory-table-container { max-height: 520px; overflow-y: auto; }
        /* POS cart items list: the ONLY scrollable region inside the Sales
           Checkout modal — header, pricing-mode selector, scan/search bar,
           item count, Total Amount, and Cancel/Complete Sale all stay
           outside this container so they never scroll away. overscroll-
           behavior:contain stops an over-scroll at the top/bottom of this
           list from bubbling into (and scrolling) the page behind the
           modal on touch devices. */
        .pos-cart-container { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
        @media (max-width: 640px) {
            .pos-cart-container { max-height: min(38vh, 300px); }
        }

        input[type=number]::-webkit-inner-spin-button, 
        input[type=number]::-webkit-outer-spin-button { 
            -webkit-appearance: none; 
            margin: 0; 
        }
        input[type=number] {
            -moz-appearance: textfield;
            background-color: #070B14 !important;
            color: #E2E8F0 !important;
        }

        /* Native date inputs (Custom Date Range Start/End fields, product
           expiry dates, etc.) all sit on the same dark bg-bgMain background,
           but Chromium renders the calendar picker icon in a fixed dark
           color that's nearly invisible there. Inverting it flips that dark
           icon to near-white without touching layout/size/functionality —
           the indicator is still the native control, still opens the native
           picker on click. */
        input[type="date"]::-webkit-calendar-picker-indicator {
            filter: invert(1);
        }

        .typing-indicator span {
          height: 6px; width: 6px; float: left; margin: 0 2px;
          background-color: #7C8BA1; border-radius: 50%; display: inline-block;
          animation: bounce 1.3s infinite ease-in-out;
        }
        .typing-indicator span:nth-child(2) { animation-delay: -1.1s; }
        .typing-indicator span:nth-child(3) { animation-delay: -0.9s; }
        @keyframes bounce {
          0%, 60%, 100% { transform: translateY(0); }
          30% { transform: translateY(-4px); }
        }

        .inline-camera-box video {
            /* V29: was max-height:180px + object-fit:cover - a thin cropped
               strip at every viewport width, which made a barcode almost
               impossible to aim on laptop/desktop. Show the whole frame,
               same at every breakpoint. The DECODE canvas is still capped at
               1280px in _zxScanTick - this only affects the preview. */
            width: 100% !important;
            min-height: 240px;
            max-height: 60vh !important;
            border-radius: 0.5rem;
            object-fit: contain !important;
            background: #000;
        }
    

        /* Employee directory scrollbar */
        .custom-scrollbar {
            scrollbar-width: thin;
            scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.35);
            border-radius: 999px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: rgba(148, 163, 184, 0.55);
        }

        /* Authentication state must win over every responsive display rule. */
        #inventory-guest-preview[hidden],
        #inventory-guest-preview.hidden {
            display: none !important;
            pointer-events: none !important;
        }

        /* Business Brain: one responsive intelligence summary in the dashboard,
           with the same information hierarchy in its detail view. */
        .business-brief-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem;}
        .business-brief-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex-wrap:wrap;}
        .business-brief-context-chip,.business-brief-open-btn{min-height:44px;border-radius:.7rem;border:1px solid #172033;padding:.45rem .7rem;font-size:11px;cursor:pointer;transition:border-color .15s ease,background-color .15s ease;}
        .business-brief-context-chip{display:inline-flex;align-items:center;gap:.45rem;background:#070B14;color:#7C8BA1;}
        .business-brief-context-chip strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#E2E8F0;}
        .business-brief-context-chip.hidden{display:none!important;}
        .business-brief-context-chip:hover,.business-brief-open-btn:hover{border-color:rgba(67,107,238,.55);}
        .business-brief-open-btn{background:rgba(67,107,238,.12);border-color:rgba(67,107,238,.28);color:#436BEE;font-weight:700;white-space:nowrap;}
        .business-brief-grid,.business-brief-overview-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;}
        .business-brief-loading,.business-brief-upgrade{grid-column:1/-1;min-height:92px;display:flex;align-items:center;justify-content:center;gap:.5rem;border:1px dashed #172033;border-radius:.85rem;color:#7C8BA1;font-size:11px;}
        .business-brief-steady{grid-column:1/-1;display:flex;align-items:flex-start;gap:.7rem;border:1px solid #172033;border-radius:.9rem;background:#070B14;padding:.9rem;font-size:11px;}
        .business-brief-steady-icon{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;flex:none;border-radius:.65rem;background:#0B1120;}
        .business-brief-steady strong{display:block;color:#E2E8F0;}
        .business-brief-steady p{color:#7C8BA1;line-height:1.45;margin-top:.2rem;}
        .business-brief-upgrade{width:100%;background:rgba(67,107,238,.1);border-color:rgba(67,107,238,.3);color:#436BEE;font-weight:700;cursor:pointer;}
        .business-brief-area{min-width:0;border:1px solid #172033;border-radius:.9rem;background:#070B14;padding:.85rem;}
        .business-brief-area>h4,.business-brief-memory-group>h4,.business-brief-outcomes>h4{display:flex;align-items:center;gap:.45rem;color:#E2E8F0;font-size:11px;font-weight:800;margin-bottom:.65rem;}
        .business-brief-area-body{display:flex;flex-direction:column;gap:.45rem;}
        .business-brief-empty{display:flex;align-items:flex-start;gap:.5rem;font-size:11px;line-height:1.45;padding:.35rem .1rem;}
        .business-brief-empty i{margin-top:.15rem;flex:none;}
        .business-brief-signal{width:100%;display:flex;align-items:flex-start;gap:.55rem;text-align:left;border:1px solid #172033;border-radius:.75rem;background:#0B1120;padding:.65rem;color:#E2E8F0;font-size:11px;line-height:1.35;}
        .business-brief-signal.is-action{cursor:pointer;}
        .business-brief-signal.is-action:hover{border-color:rgba(67,107,238,.45);}
        .business-brief-signal.is-compact{padding:.55rem;}
        .business-brief-signal-icon{width:1.7rem;height:1.7rem;display:inline-flex;align-items:center;justify-content:center;flex:none;border:1px solid;border-radius:.55rem;font-size:9px;}
        .business-brief-signal strong{display:block;color:#E2E8F0;font-size:11px;}
        .business-brief-signal small{display:block;color:#7C8BA1;margin-top:.2rem;font-size:10px;line-height:1.4;}
        .business-brief-chevron{margin-left:auto;margin-top:.45rem;color:#7C8BA1;font-size:9px;}
        .business-brief-more{align-self:flex-start;min-height:32px;padding:.25rem .1rem;color:#436BEE;font-size:10px;font-weight:700;cursor:pointer;}
        .business-brief-tabs{display:flex;gap:.4rem;border-bottom:1px solid #172033;padding-bottom:.55rem;margin-bottom:.75rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
        .brain-tab-btn{min-height:44px;flex:0 0 auto;border:1px solid transparent;border-radius:.65rem;padding:.45rem .8rem;color:#7C8BA1;font-size:11px;font-weight:700;cursor:pointer;}
        .brain-tab-btn:hover{background:#070B14;color:#E2E8F0;}
        .brain-tab-btn.is-active{background:rgba(67,107,238,.14);border-color:rgba(67,107,238,.3);color:#436BEE;}
        .business-brief-modal-content{min-height:0;overscroll-behavior:contain;}
        .business-brief-detail-row{border:1px solid #172033;border-radius:.75rem;background:#0B1120;padding:.7rem;font-size:11px;}
        .business-brief-detail-row strong{color:#E2E8F0;line-height:1.35;}
        .business-brief-detail-row p{color:#7C8BA1;line-height:1.45;margin-top:.25rem;}
        .business-brief-detail-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;}
        .business-brief-priority{flex:none;border:1px solid;border-radius:.5rem;padding:.2rem .4rem;font-size:9px;font-weight:800;text-transform:uppercase;}
        .business-brief-row-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:.55rem;color:#7C8BA1;font-size:10px;}
        .business-brief-row-actions button{color:#436BEE;font-weight:700;cursor:pointer;}
        .business-brief-row-actions button.is-muted{color:#7C8BA1;font-weight:500;}
        .business-brief-memory-groups{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;}
        .business-brief-memory-group,.business-brief-outcomes{border:1px solid #172033;border-radius:.9rem;background:#070B14;padding:.8rem;}
        .business-brief-memory-group{display:flex;flex-direction:column;gap:.45rem;}
        .business-brief-memory-group>h4{margin-bottom:.2rem;}
        .business-brief-history-filters{display:flex;gap:.35rem;margin-bottom:.7rem;overflow-x:auto;-webkit-overflow-scrolling:touch;}
        .business-brief-history-filters button{min-height:44px;flex:0 0 auto;border:1px solid #172033;border-radius:999px;padding:.35rem .75rem;color:#7C8BA1;background:#070B14;font-size:10px;font-weight:700;cursor:pointer;}
        .business-brief-history-filters button.is-active{border-color:rgba(67,107,238,.4);background:rgba(67,107,238,.14);color:#436BEE;}
        /* Period presets for Business Brain History — reuses the shared
           cdr-presets/cdr-preset-btn look (see the Cauldra Custom Date Range
           block below) so this matches Sales/Expense/Profit/Activity History
           instead of the browser-native <select> it used to be. */
        .business-brief-history-range{margin-bottom:.9rem;}
        .business-brief-range-btn{min-height:44px;}
        .business-brief-history-list{display:flex;flex-direction:column;gap:.5rem;}
        .business-brief-history-row{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.65rem;border:1px solid #172033;border-radius:.8rem;background:#070B14;padding:.7rem;font-size:11px;}
        .business-brief-history-icon{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:.65rem;background:rgba(67,107,238,.12);color:#436BEE;}
        .business-brief-history-meta{display:flex;justify-content:space-between;gap:.75rem;color:#7C8BA1;font-size:9px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.25rem;}
        .business-brief-history-row strong{color:#E2E8F0;}
        .business-brief-history-row p,.business-brief-outcomes p{color:#7C8BA1;line-height:1.45;margin-top:.25rem;}
        .business-brief-outcomes{margin-top:.75rem;}
        .business-brief-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:.65rem;}

        /* ===================================================================
           Cauldra Custom Date Range — ONE shared, on-brand day/month/year
           range control, used by every period/date-range filter in the app
           (Sales History, Expense History, Profit, Activity History,
           Business Brain History) instead of the browser's native date
           picker. "cdr-" prefix = Custom Date Range, kept short since these
           classes appear a lot in generated markup. See cdrDmyMarkup() /
           cdrReadRange() / cdrValidDate() in app.js.
           =================================================================== */
        .cdr-presets{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;}
        .cdr-preset-btn{min-height:30px;padding:.3rem .6rem;border-radius:.6rem;border:1px solid #172033;color:#7C8BA1;font-size:11px;font-weight:600;cursor:pointer;background:transparent;transition:border-color .15s ease,background-color .15s ease,color .15s ease;white-space:nowrap;}
        .cdr-preset-btn:hover{color:#E2E8F0;}
        .cdr-preset-btn:focus-visible{outline:2px solid #436BEE;outline-offset:1px;}
        .cdr-preset-btn.is-active{border-color:rgba(67,107,238,.5);background:rgba(67,107,238,.15);color:#436BEE;}
        .cdr-preset-btn i{font-size:9px;margin-left:.2rem;}
        .cdr-combobox{position:relative;}
        .cdr-panel{position:absolute;z-index:30;margin-top:.35rem;left:0;width:17rem;max-width:calc(100vw - 24px);background:#0B1120;border:1px solid #172033;border-radius:.9rem;padding:.85rem;box-shadow:0 10px 30px -12px rgba(0,0,0,.55);}
        .cdr-field{margin-bottom:.65rem;}
        .cdr-field:last-of-type{margin-bottom:0;}
        .cdr-field>label{display:block;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#7C8BA1;margin-bottom:.35rem;}
        .cdr-dmy{display:flex;align-items:center;gap:.3rem;}
        .cdr-dmy input{background:#070B14;border:1px solid #172033;border-radius:.6rem;color:#E2E8F0;text-align:center;font-variant-numeric:tabular-nums;font-weight:700;font-size:12px;min-height:38px;padding:0 .3rem;transition:border-color .15s ease,box-shadow .15s ease;min-width:0;}
        .cdr-dmy input::placeholder{color:#3A4560;font-weight:600;}
        .cdr-dmy input.cdr-day,.cdr-dmy input.cdr-month{width:2.7rem;flex:0 0 auto;}
        .cdr-dmy input.cdr-year{width:4.1rem;flex:0 0 auto;}
        .cdr-dmy input:focus{outline:none;border-color:#436BEE;box-shadow:0 0 0 3px rgba(67,107,238,.25);}
        .cdr-dmy input.cdr-invalid{border-color:#EF4444;}
        .cdr-dmy input.cdr-invalid:focus{box-shadow:0 0 0 3px rgba(239,68,68,.22);}
        .cdr-dmy-sep{color:#3A4560;font-weight:700;font-size:12px;flex:none;}
        .cdr-error{display:flex;align-items:flex-start;gap:.4rem;font-size:10px;line-height:1.4;color:#F87171;margin-bottom:.6rem;}
        .cdr-error i{margin-top:1px;flex:none;}
        .cdr-apply{width:100%;min-height:38px;background:#436BEE;color:#fff;border:0;border-radius:.6rem;font-weight:700;font-size:11px;cursor:pointer;transition:background-color .15s ease;}
        .cdr-apply:hover{background:#3457D5;}
        .cdr-apply:focus-visible{outline:2px solid #E2E8F0;outline-offset:2px;}

        @media (max-width:639px){
            .cdr-panel{width:min(92vw,320px);}
            .cdr-dmy input{min-height:44px;font-size:14px;}
            .cdr-dmy input.cdr-day,.cdr-dmy input.cdr-month{width:3rem;}
            .cdr-dmy input.cdr-year{width:4.4rem;}
            .cdr-preset-btn{min-height:36px;}
            .cdr-apply{min-height:44px;}
        }

        /* Business Day bar - Business Day status | Sales Today | Net Profit | action.
           Sales Today / Net Profit read the current open Business Day session. */
        .business-day-bar{align-items:center;}
        .bd-status{display:flex;align-items:center;gap:.5rem;min-width:0;margin-right:auto;}
        .bd-metrics{display:flex;align-items:center;gap:0;}
        #business-day-metrics.hidden,.bd-metric.hidden{display:none!important;}
        .bd-metric{display:flex;flex-direction:column;align-items:flex-start;gap:.12rem;margin-left:.9rem;padding:.15rem 0 .15rem .9rem;border:0;border-left:1px solid #172033;background:transparent;color:#E2E8F0;cursor:pointer;text-align:left;transition:border-color .15s ease;}
        .bd-metric:hover{border-left-color:rgba(67,107,238,.5);}
        .bd-metric-label{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#7C8BA1;line-height:1;}
        .bd-metric>strong{font-size:13px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;}
        .business-day-bar #business-day-header-action-btn{margin-left:.9rem;}

        /* Business Brain dashboard: four compact panels, ALWAYS visibly open at
           every breakpoint (including phones) — never collapsible/accordion.
           Plain divs (see businessBriefDashCard() in app.js), styled as a
           tighter "briefing strip" variant of the full modal's
           .business-brief-area: smaller padding, tighter title margin, and a
           smaller title so four columns stay compact on desktop. Empty
           sections show honest states, never hidden. */
        .business-brief-dash-section{padding:.7rem .75rem;}
        .business-brief-dash-section>h4{font-size:10px;margin-bottom:.5rem;}
        .business-brief-dash-section>.business-brief-area-body{gap:.4rem;}
        .business-brief-learning-stats{display:flex;flex-direction:column;gap:.3rem;}
        .business-brief-learning-stat{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;font-size:10px;color:#7C8BA1;}
        .business-brief-learning-stat>strong{color:#E2E8F0;font-size:12px;font-weight:800;}
        .business-brief-learning-note{margin-top:.15rem;color:#7C8BA1;font-size:10px;line-height:1.45;}

        @media (min-width:640px){
            .business-brief-grid,.business-brief-overview-grid,.business-brief-memory-groups{grid-template-columns:repeat(2,minmax(0,1fr));}
        }

        /* iPad portrait / small laptop: Business Day metrics drop to their own
           full-width row under the status + action, rather than squeezing. */
        @media (min-width:640px) and (max-width:1000px){
            .bd-metrics{order:5;width:100%;margin-top:.7rem;padding-top:.65rem;border-top:1px solid #172033;}
            .bd-metric{flex:1 1 0;}
            .bd-metrics .bd-metric:first-child{margin-left:0;padding-left:0;border-left:0;}
        }

        @media (min-width:1200px){
            .business-brief-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
        }

        @media (max-width:639px){
            #main-layout-container{min-height:100vh;}
            #mobile-nav-drawer{width:min(86vw,330px);}
            #mobile-nav-content button,#mobile-nav-content a{min-height:44px;}
            #mobile-nav-content .guest-preview-disabled{opacity:.55;cursor:default;pointer-events:none;}
            #mobile-auth-container .guest-preview-disabled{opacity:.55;pointer-events:none;}
            #mobile-menu-btn{width:40px;height:40px;border-radius:.8rem;margin-right:.5rem;}
            #header-global-search{display:block!important;min-width:0;width:100%;height:40px;font-size:11px;padding-left:2.25rem;}
            #header-global-search-wrap:not(.hidden):not([hidden]){display:block;}
            #header-action-controls{gap:.35rem;margin-left:.5rem;}
            #nav-btn-new-sale{padding-left:.7rem;padding-right:.7rem;height:40px;}
            #dynamic-dashboard-container section{padding-left:.75rem;padding-right:.75rem;padding-top:.75rem;}
            #dynamic-welcome-banner{flex-direction:column;align-items:stretch;gap:.85rem;padding:1rem;margin-bottom:.75rem;}
            #dynamic-welcome-banner>div:first-child{width:100%;}
            #welcome-heading-text{font-size:1.15rem;line-height:1.25;}
            #welcome-sub-text{line-height:1.45;}
            #dynamic-welcome-banner .welcome-copy-row{display:block!important;}
            #guest-get-started-btn{margin-top:.7rem;align-self:flex-start;}
            #banner-copy-link-btn{margin-top:.65rem;}
            #metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;}
            #metrics-grid>div{padding:.72rem;border-radius:.9rem;min-width:0;}
            #metrics-grid span{line-height:1.2;}
            #metrics-grid h3{font-size:1.15rem;line-height:1.1;}
            #metrics-grid p{font-size:10px;line-height:1.25;}
            main{padding:.75rem .75rem 5rem!important;gap:1rem;}
            #inventory-section{padding:.9rem;border-radius:1rem;}
            .inventory-header-stack{display:flex;flex-direction:column;gap:.65rem;}
            .inventory-main-header{order:1;}
            .inventory-status-row{order:2;width:100%;justify-content:flex-start;line-height:1.2;}
            .inventory-filter-row{order:3;width:100%;}
            .inventory-filter-row select{height:40px;}
            .inventory-filter-row button{height:40px;}
            .inventory-table-container{overflow-x:auto;-webkit-overflow-scrolling:touch;}
            .inventory-table-container table{min-width:700px;}
        }

        /* Inventory Status filters are BOTH status indicators and filter
           controls — they must look and behave like real interactive
           buttons at every breakpoint, especially desktop, where the
           min-width:768px rule further below strips background/border for
           a plain-text look and previously left nothing to replace that
           affordance with. This base rule (outside any media query) is
           what every breakpoint's own sizing tweaks below now layer on top
           of, instead of each breakpoint needing to redefine hover/focus/
           active color state on its own. No animation, no blinking —
           purely hover/focus/pressed/selected state, and the transition
           itself is skipped entirely under prefers-reduced-motion. */
        .inventory-status-filter{cursor:pointer;border:1px solid transparent;background:transparent;transition:background-color .15s ease,border-color .15s ease,color .15s ease;}
        .inventory-status-filter:hover{background:rgba(226,232,240,.06);border-color:#172033;}
        .inventory-status-filter:focus-visible{outline:2px solid #436BEE;outline-offset:2px;}
        .inventory-status-filter:active{transform:translateY(0.5px);}
        .inventory-status-filter.is-active{background:rgba(67,107,238,.15);color:#E2E8F0;border-color:rgba(67,107,238,.4);}
        .inventory-status-filter.is-active:hover{background:rgba(67,107,238,.2);}
        @media (prefers-reduced-motion:reduce){
            .inventory-status-filter{transition:none;}
            .inventory-status-filter:active{transform:none;}
        }

        /* Cauldra responsive dashboard refinement: Layout A (mobile) and Layout B (tablet/desktop). */
        @media (max-width:639px){
            #dynamic-dashboard-container section{padding-inline:clamp(.65rem,3.5vw,.9rem);padding-top:clamp(.65rem,3vw,.9rem);}
            #dynamic-welcome-banner{padding:clamp(.85rem,3.8vw,1.15rem);gap:clamp(.7rem,3vw,1rem);}
            #welcome-heading-text{font-size:clamp(1.02rem,4.8vw,1.22rem);}
            #welcome-role-badge{font-size:clamp(.62rem,2.4vw,.72rem);padding:.32rem .58rem;}
            #welcome-sub-text{font-size:clamp(.66rem,2.8vw,.78rem);}
            #guest-get-started-btn{margin-top:clamp(.9rem,4vw,1.3rem);margin-left:clamp(.1rem,1vw,.3rem);}
            #metrics-grid{gap:clamp(.45rem,2.2vw,.7rem);}
            #metrics-grid>div{padding:clamp(.62rem,3vw,.82rem);border-radius:clamp(.75rem,3vw,1rem);}
            #metrics-grid span{font-size:clamp(.52rem,2.2vw,.65rem);}
            #metrics-grid h3{font-size:clamp(1rem,5vw,1.3rem);}
            #metrics-grid p{font-size:clamp(.52rem,2.2vw,.64rem);}
            #inventory-section{padding:clamp(.75rem,3.5vw,1rem);}
            .inventory-header-stack{gap:clamp(.45rem,2.2vw,.7rem);}
            .inventory-status-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0!important;padding:.15rem!important;overflow:hidden;}
            .inventory-status-filter{min-width:0;min-height:2.25rem;padding:.35rem .2rem!important;display:flex!important;align-items:center;justify-content:center;gap:.3rem!important;border-radius:.65rem;font-size:clamp(.52rem,2.25vw,.64rem)!important;white-space:nowrap;}
            .inventory-status-filter .status-count{font-weight:800;}
            .inventory-status-filter.is-active{background:rgba(67,107,238,.15);color:#E2E8F0;border:1px solid rgba(67,107,238,.3);}
            .inventory-status-filter:disabled{opacity:1;cursor:default;}
            #inventory-status-chip{display:none;align-items:center;gap:.35rem;width:max-content;max-width:100%;margin-top:.1rem;padding:.25rem .5rem;border-radius:.6rem;background:rgba(67,107,238,.12);border:1px solid rgba(67,107,238,.25);font-size:clamp(.52rem,2.2vw,.62rem);color:#E2E8F0;}
            #inventory-status-chip.show{display:inline-flex;}
            #inventory-status-chip button{line-height:1;opacity:.75;}
            .inventory-filter-row{gap:clamp(.4rem,2vw,.6rem)!important;}
            .inventory-filter-row select,.inventory-filter-row button{height:clamp(38px,10vw,42px)!important;font-size:clamp(.62rem,2.7vw,.72rem)!important;}
            #inventory-guest-preview:not([hidden]):not(.hidden){display:flex;}
            .guest-inventory-preview-row{filter:blur(3px);opacity:.7;user-select:none;}
            #header-global-search{font-size:clamp(.64rem,2.8vw,.75rem)!important;height:clamp(38px,10vw,42px)!important;}
            #header-global-search-wrap{max-width:none;flex:1;min-width:0;}
            #header-action-controls{min-width:auto;}
            #nav-btn-new-sale{font-size:clamp(.58rem,2.5vw,.7rem)!important;padding-inline:clamp(.55rem,2.8vw,.8rem)!important;}
            #nav-btn-new-sale i{display:none;}
            #mobile-nav-drawer{width:min(86vw,330px);}
            #mobile-nav-content{padding-bottom:.5rem;}
            #mobile-nav-content button,#mobile-nav-content a{min-height:44px;}
            #mobile-nav-drawer .custom-scrollbar{overscroll-behavior:contain;}
            .business-brief-header{flex-direction:column;align-items:stretch;}
            .business-brief-header-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;}
            .business-brief-open-btn{grid-column:1/-1;min-height:44px;}
            .business-brief-context-chip{min-height:44px;justify-content:space-between;min-width:0;padding-inline:.6rem;}
            .business-brief-area{padding:.75rem;}
            /* Business Day bar stacks: status, then Sales Today | Net Profit, then action. */
            .business-day-bar{flex-direction:column;align-items:stretch;gap:.75rem;}
            .bd-status{margin-right:0;}
            .bd-metrics{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
            .bd-metric{margin-left:0;padding:.55rem .65rem;border:1px solid #172033;border-radius:.7rem;}
            .business-day-bar #business-day-header-action-btn{margin-left:0;width:100%;}
            /* Business Brain sections: always visible on phones too — stacked,
               compact, no accordion/collapse and no tap required to see data. */
            .business-brief-grid{grid-template-columns:minmax(0,1fr);gap:.6rem;}
            .business-brief-dash-section{padding:.65rem .7rem;}
            #business-brain-modal{padding:0!important;align-items:stretch!important;}
            .business-brief-modal-shell{max-height:100dvh!important;min-height:100dvh;border-radius:0!important;border-left:0!important;border-right:0!important;padding:1rem!important;}
            .brain-tab-btn,.business-brief-history-filters button{min-height:44px;}
            .business-brief-modal-content{padding-right:0!important;}
            .business-brief-detail-heading{gap:.45rem;}
        }
        @media (min-width:640px){
            #inventory-status-chip{display:none!important;}
            #inventory-guest-preview{display:none!important;}
        }

        /* Exact dashboard geometry: reference-aligned structure while preserving Cauldra's existing color system. */
        @media (min-width:768px){
            #main-layout-container > aside.hidden.md\:flex{width:288px!important;min-width:288px!important;padding:20px 18px!important;}
            #main-layout-container > div.flex-1 > header{height:84px!important;padding-left:30px!important;padding-right:30px!important;}
            #dynamic-dashboard-container section,
            #main-layout-container main{max-width:1400px!important;}
            #dynamic-dashboard-container section{padding-left:34px!important;padding-right:34px!important;padding-top:30px!important;}
            #dynamic-welcome-banner{min-height:132px;padding:25px 28px!important;border-radius:22px!important;margin-bottom:20px!important;}
            #welcome-heading-text{font-size:1.55rem!important;}
            #welcome-sub-text{font-size:.88rem!important;}
            #metrics-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;}
            #metrics-grid>div{min-height:138px;padding:20px!important;border-radius:20px!important;}
            #metrics-grid h3{font-size:2rem!important;line-height:1.05!important;margin-top:14px!important;}
            #metrics-grid p{font-size:.82rem!important;margin-top:8px!important;}
            #main-layout-container main{padding:28px 34px 72px!important;}
            #inventory-section{padding:0!important;border-radius:22px!important;overflow:hidden;}
            .inventory-header-stack{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:28px;row-gap:0;padding:22px 26px!important;margin-bottom:0!important;}
            .inventory-main-header{order:1;}
            .inventory-status-row{order:2!important;justify-self:center;background:transparent!important;border:0!important;padding:0!important;white-space:nowrap;}
            .inventory-status-filter{padding:0!important;background:transparent;border:0;}
            .inventory-filter-row{order:3!important;justify-self:end;width:auto!important;}
            .inventory-filter-row select{height:44px!important;min-width:220px;}
            .inventory-filter-row button{height:44px!important;}
            .inventory-table-container{border-top:1px solid #172033;max-height:560px;overflow:auto;}
            .inventory-table-container table{min-width:0!important;}
            #inventory-status-chip{display:none!important;}
        }

        @media (min-width:768px) and (max-width:1100px){
            #main-layout-container > aside.hidden.md\:flex{width:240px!important;min-width:240px!important;padding:18px 14px!important;}
            #dynamic-dashboard-container section{padding-left:22px!important;padding-right:22px!important;}
            #main-layout-container main{padding-left:22px!important;padding-right:22px!important;}
            #dynamic-welcome-banner{padding:22px!important;}
            .inventory-header-stack{grid-template-columns:1fr auto;gap:12px!important;}
            .inventory-status-row{grid-column:1/-1;justify-self:start;}
            .inventory-filter-row{grid-column:2;grid-row:1;}
        }

        @media (max-width:767px){
            #dynamic-dashboard-container section{padding-left:clamp(14px,4vw,20px)!important;padding-right:clamp(14px,4vw,20px)!important;padding-top:16px!important;}
            #dynamic-welcome-banner{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin-bottom:14px!important;gap:12px!important;}
            #dynamic-welcome-banner .welcome-copy-row{display:block!important;}
            #dynamic-welcome-banner.signed-in > div:last-child{display:flex!important;align-items:flex-start!important;justify-content:flex-end!important;}
            #dynamic-welcome-banner.signed-in #welcome-role-badge{position:absolute;right:0;top:0;}
            #dynamic-welcome-banner.signed-in > div:first-child{position:relative;padding-right:74px;}
            #welcome-heading-text{font-size:clamp(1.15rem,5vw,1.4rem)!important;line-height:1.2!important;}
            #welcome-sub-text{font-size:.78rem!important;}
            #metrics-grid{gap:12px!important;}
            #metrics-grid>div{min-height:126px;padding:15px!important;border-radius:18px!important;}
            #metrics-grid h3{font-size:1.55rem!important;}
            #main-layout-container main{padding:16px 14px 70px!important;}
            #inventory-section{padding:0!important;border-radius:20px!important;overflow:hidden;}
            .inventory-header-stack{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;padding:16px!important;margin-bottom:0!important;}
            .inventory-main-header{order:1;}
            .inventory-status-row{order:2;width:100%;background:transparent!important;border:1px solid #172033!important;padding:0!important;}
            .inventory-status-filter{min-height:44px!important;padding:8px 3px!important;border-radius:0!important;}
            .inventory-filter-row{order:3;width:100%!important;display:flex!important;}
            .inventory-filter-row select{height:44px!important;}
            .inventory-filter-row button{height:44px!important;}
            .inventory-table-container{border-top:1px solid #172033;overflow-x:auto;}
            .inventory-table-container table{min-width:640px;}
        }

/* Guest visibility wins over all responsive display rules. */
#header-global-search-wrap.hidden,#header-global-search-wrap[hidden]{display:none!important}