/* V35 targeted UI polish: keep the Kadex navy/red/gold identity */ :root{--kadex-red:#e31b23;--kadex-gold:#d9a441} /* Pin the desktop rail to the viewport while the page content scrolls independently. */ @media(min-width:801px){#appShell .shell{align-items:stretch}#appShell aside#side{position:fixed!important;left:0!important;top:72px!important;bottom:0!important;align-self:auto!important;width:248px!important;min-width:248px!important;max-width:248px!important;height:auto!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:thin;z-index:170!important}#appShell .main{margin-left:248px!important}body.desktop-device #appShell aside#side{position:fixed!important;left:0!important;top:72px!important;bottom:0!important;width:258px!important;min-width:258px!important;max-width:258px!important;height:auto!important;max-height:none!important;transform:none!important;visibility:visible!important;pointer-events:auto!important;z-index:170!important}body.desktop-device #appShell .main{margin-left:258px!important}} /* Keep laptop swipe gestures inside the menu list instead of scrolling the whole rail. */ @media(min-width:801px){#appShell aside#side{display:flex!important;flex-direction:column!important;overflow:hidden!important;touch-action:pan-y!important;overscroll-behavior-y:contain!important}#appShell aside#side #nav{display:block!important;flex:1 1 auto!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;scrollbar-width:thin!important}#appShell aside#side #nav .nav-group{flex:0 0 auto!important}} /* Mobile drawer is fixed to viewport; only the menu body scrolls */ @media(max-width:800px){#appShell aside#side{position:fixed!important;top:0!important;bottom:0!important;left:0!important;height:100dvh!important;max-height:100dvh!important;overflow-y:auto!important;overscroll-behavior:contain;z-index:220!important;padding-top:max(12px,env(safe-area-inset-top))!important}#appShell .top{position:sticky;top:0;z-index:210;padding-left:12px!important;padding-right:12px!important}#appShell .page-head{display:block;margin-bottom:16px}#appShell .page-head h1{font-size:clamp(21px,5.4vw,26px)!important;line-height:1.25;letter-spacing:-.35px!important;font-weight:750!important}#appShell .page-head h2,#appShell .card h2{font-size:clamp(17px,4.5vw,21px)!important;line-height:1.35;font-weight:700!important}#appShell .role-eyebrow{font-size:9px;letter-spacing:.09em;line-height:1.5}#appShell .userbar .role{display:none!important}#appShell #userName{display:none!important}#appShell .notif-menu{position:fixed!important;top:72px!important;right:10px!important;left:10px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 90px)!important}#appShell .notif-list{max-height:calc(100dvh - 190px)!important}#appShell .main{padding:17px 12px calc(84px + env(safe-area-inset-bottom))!important}#appShell .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}#appShell .card{padding:14px!important;border-radius:13px!important}#appShell .metric{font-size:23px!important;font-weight:750!important}#appShell .toolbar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important;align-items:stretch!important}#appShell .toolbar>*{min-width:0!important;width:100%!important;max-width:100%!important;min-height:44px!important;flex:0 1 auto!important}#appShell .page-head .role-head-actions{margin-top:12px;flex-wrap:wrap}#appShell .logout-button{display:none!important}} @media(max-width:380px){#appShell .grid{grid-template-columns:minmax(0,1fr)!important}#appShell .toolbar{grid-template-columns:minmax(0,1fr)!important}#appShell .brand-label{display:none!important}} /* One restrained notification icon; no emoji fallback double-rendering */ #appShell .notif-btn{display:inline-flex;align-items:center;justify-content:center;gap:0;width:42px;height:42px;padding:0!important;font-size:20px!important} #appShell #notifBtn::before,#appShell #menuBtn::before{content:none!important;display:none!important} #appShell #notifBtn .ui-icon,#appShell #menuBtn .ui-icon{width:20px;height:20px} @media(max-width:800px){#appShell #notifBtn,#appShell #menuBtn{background:#173b59!important;border:1px solid rgba(255,255,255,.14)!important;color:#fff!important;box-shadow:none!important;border-radius:11px!important}#appShell #notifBtn{width:40px!important;min-width:40px!important;height:40px!important}#appShell #menuBtn{width:42px!important;height:42px!important}#appShell #notifBtn .ui-icon,#appShell #menuBtn .ui-icon{display:block;stroke:currentColor}} @media(max-width:800px){#appShell aside#side{display:flex!important;flex-direction:column!important;overflow:hidden!important}#appShell .ui-menu-search{flex:0 0 auto!important}#appShell #nav{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain!important}#appShell .ui-nav-empty{flex:0 0 auto!important}#appShell .mobile-drawer-account{position:relative!important;bottom:auto!important;flex:0 0 auto!important;margin-top:0!important}body.nav-open #appShell #mobileBottomNav{display:none!important}} #appShell .notif-count{right:-3px;top:-4px} /* Sign out should be accessible but not dominate the drawer */ #appShell #drawerLogoutBtn{background:rgba(255,255,255,.08)!important;color:#e8eef4!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:10px!important;box-shadow:none!important;font-weight:650!important;justify-content:flex-start!important;padding-left:14px!important} #appShell #drawerLogoutBtn:hover{background:rgba(227,27,35,.18)!important;border-color:rgba(227,27,35,.45)!important} #appShell #drawerLogoutBtn span{color:#e8eef4!important} /* Softer Quantity Surveyor visual hierarchy */ #appShell .qs-dashboard .admin-hero,#appShell [data-role-dashboard="QUANTITY_SURVEYOR"] .admin-hero{background:linear-gradient(120deg,#f4f7fa,#eaf0f5)!important;color:#1b344a!important;box-shadow:none!important;border:1px solid #dfe6ed!important} #appShell .qs-dashboard .admin-hero h1,#appShell [data-role-dashboard="QUANTITY_SURVEYOR"] .admin-hero h1{color:#1b344a!important;font-size:clamp(22px,2.5vw,28px)!important;font-weight:700!important} #appShell .qs-dashboard .admin-hero p,#appShell [data-role-dashboard="QUANTITY_SURVEYOR"] .admin-hero p{color:#64758a!important} #appShell .qs-dashboard .metric,#appShell [data-role-dashboard="QUANTITY_SURVEYOR"] .metric{font-weight:700!important} #appShell .qs-dashboard .card,#appShell [data-role-dashboard="QUANTITY_SURVEYOR"] .card{box-shadow:0 3px 12px rgba(15,35,55,.035)!important} /* Respect reduced motion and avoid startling emphasis */ @media(prefers-reduced-motion:reduce){#appShell *{scroll-behavior:auto!important;transition:none!important;animation:none!important}} /* V35 dashboard refresh: clearer hierarchy, warmer brand accents and resilient layouts. */ #appShell .dashboard-page{--dash-ink:#162b40;--dash-line:#e5eaf0} #appShell .dashboard-header{padding:22px 24px;margin:0 0 20px!important;background:linear-gradient(115deg,#fff 0%,#f6f8fb 100%);border:1px solid var(--dash-line);border-radius:18px} #appShell .dashboard-header .role-eyebrow{display:inline-flex;align-items:center;gap:7px;color:#9a5a14!important;font-size:10px!important;font-weight:800!important;letter-spacing:.12em!important} #appShell .dashboard-header .role-eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--kadex-red);box-shadow:0 0 0 4px #e31b2315} #appShell .dashboard-header h1{margin:5px 0 7px;font-size:clamp(25px,2.5vw,34px)!important;color:#162b40!important} #appShell .dashboard-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px!important} #appShell .dashboard-kpis .kpi{min-height:145px!important;padding:20px!important;border:1px solid var(--dash-line)!important;border-radius:16px!important;border-top:1px solid var(--dash-line)!important;box-shadow:0 4px 16px #152d4410!important} #appShell .dashboard-kpis .kpi:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 4px 4px 0;background:#d9a441} #appShell .dashboard-kpis .kpi:nth-child(2):before{background:#173f63} #appShell .dashboard-kpis .kpi:nth-child(3):before{background:#e31b23} #appShell .dashboard-kpis .kpi:nth-child(4):before{background:#087f5b} #appShell .dashboard-kpis .kpi-label{font-size:12px;color:#64758a;font-weight:650} #appShell .dashboard-kpis .metric{margin-top:10px;font-size:clamp(25px,2.4vw,34px)!important;color:#162b40!important} #appShell .dashboard-data-note{display:flex;gap:8px;align-items:baseline;margin-bottom:14px;padding:11px 14px;border-radius:12px} #appShell .dashboard-data-note b{white-space:nowrap} #appShell .empty-state{display:flex;flex-direction:column;gap:7px;padding:24px!important;text-align:left;color:#667085;line-height:1.5} #appShell .empty-state strong{color:#243b53;font-size:14px} #appShell .empty-state span{font-size:12px} #appShell .health-modern .health-available{color:#087f5b} #appShell .health-modern .health-unavailable{color:#b42318} #appShell .health-caption{margin:11px 0 0;line-height:1.5} #appShell .command-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 28px;margin-bottom:16px;border-radius:18px;background:linear-gradient(120deg,#102a43,#1d496b);color:#fff;box-shadow:0 12px 30px #102a4320} #appShell .command-hero .eyebrow{color:#f2c94c} #appShell .command-hero h1{margin:6px 0 7px;color:#fff;font-size:clamp(24px,3vw,34px);letter-spacing:-.03em} #appShell .command-hero p{margin:0;color:#d7e2ed;line-height:1.5} #appShell .command-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end} #appShell .command-actions button{min-height:42px} #appShell .command-kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px} #appShell .command-kpi{display:flex;flex-direction:column;gap:8px;min-height:125px} #appShell .command-kpi>span{font-size:12px;color:#64758a;font-weight:700} #appShell .command-kpi strong{font-size:30px;line-height:1.15;color:#172f45;font-variant-numeric:tabular-nums} #appShell .command-kpi small{font-size:11px;color:#667085;line-height:1.4} #appShell .command-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} #appShell .command-panel{min-width:0} #appShell .command-panel h2{margin:3px 0;font-size:18px;color:#1c354b} #appShell .command-panel .section-title{align-items:flex-start} #appShell .command-panel .section-title p{margin:4px 0 0;font-size:12px;line-height:1.5} #appShell .required-setup{padding:15px;border:1px solid #e1e7ef;border-radius:14px;background:#fafbfd} #appShell .required-setup-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px} #appShell .required-setup-head h2{margin:4px 0;color:#172f45;font-size:17px} #appShell .required-setup-head p{margin:0;color:#667085;font-size:12px;line-height:1.5} #appShell .setup-score{display:grid;place-items:center;flex:0 0 48px;height:48px;border-radius:14px;background:#fff3e0;color:#9a5a14;font-size:13px;font-weight:850} #appShell .setup-score.complete{background:#e9f7f0;color:#087f5b} #appShell .required-setup-list{display:grid;gap:8px} #appShell .required-setup-item{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border:1px solid #e5eaf0;border-radius:11px;background:#fff} #appShell .setup-state{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:900} #appShell .setup-state.ready{background:#e8f7ef;color:#087f5b} #appShell .setup-state.needs-setup{background:#fff0eb;color:#b42318} #appShell .setup-copy{display:grid;gap:3px;min-width:0} #appShell .setup-copy strong{font-size:12px;color:#253b50} #appShell .setup-copy small{font-size:11px;line-height:1.4;color:#667085} #appShell .setup-value{font-size:11px;color:#087f5b;overflow-wrap:anywhere} #appShell .setup-value.needs-setup{color:#b42318} #appShell .required-setup-item button{min-height:36px;padding:7px 10px;font-size:11px} #appShell .required-label{margin-left:8px;padding:3px 6px;border-radius:5px;background:#fff2dc;color:#8c5417;font-size:9px;letter-spacing:.06em;vertical-align:middle} #appShell .settings-records{display:grid;gap:2px} #appShell .settings-records .setting-row{grid-template-columns:minmax(0,1fr) auto;align-items:center} #appShell .setting-value{margin-top:6px;color:#253b50;font-size:13px;overflow-wrap:anywhere} #appShell .settings-guidance{padding:16px;border:1px solid #e3e9ef;border-radius:12px;background:#fafbfd} #appShell .settings-guidance h3{margin:4px 0 7px;color:#253b50} #appShell .settings-guidance p{color:#667085;line-height:1.55;font-size:13px} #appShell .login-status-row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;margin-top:10px;padding:12px;border-radius:11px;background:#fff;border:1px solid #e5eaf0} #appShell .login-status-row b{font-size:12px;color:#253b50} #appShell .login-status-row .ready{color:#087f5b;font-size:11px;font-weight:800} #appShell .login-status-row .needs-setup{color:#b42318;font-size:11px;font-weight:800} #appShell .login-status-row small{grid-column:1/-1;color:#b42318;line-height:1.45;overflow-wrap:anywhere} #appShell .command-exception{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:12px;margin:8px 0;border:1px solid #e5eaf0;border-left:4px solid #d9a441;border-radius:11px;background:#fafbfd} #appShell .command-exception b{font-size:12px;color:#253b50} #appShell .command-exception span{grid-column:1;color:#667085;font-size:11px;line-height:1.45} #appShell .command-exception button{grid-column:2;grid-row:1/3} #appShell .command-exception.critical{border-left-color:#d92d20;background:#fff9f8} #appShell .command-exception.unavailable{border-left-color:#667085} #appShell .command-clear{display:grid;gap:5px;padding:18px;border:1px dashed #d9e1e8;border-radius:11px;background:#fafbfd} #appShell .command-clear b{font-size:13px;color:#253b50} #appShell .command-clear span{font-size:12px;color:#667085;line-height:1.5} @media(max-width:1050px){#appShell .command-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:800px){#appShell .command-hero{display:grid;padding:19px!important;gap:14px}#appShell .command-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}#appShell .command-actions button{width:100%;min-width:0}#appShell .command-grid{grid-template-columns:minmax(0,1fr);gap:10px}#appShell .command-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}#appShell .command-kpi{min-height:105px!important;padding:14px!important}#appShell .command-kpi strong{font-size:25px}#appShell .required-setup{padding:12px}#appShell .required-setup-item{grid-template-columns:24px minmax(0,1fr);gap:8px}#appShell .required-setup-item button{grid-column:2;justify-self:start}#appShell .command-exception{grid-template-columns:1fr}#appShell .command-exception span,#appShell .command-exception button{grid-column:1;grid-row:auto;justify-self:start}} @media(max-width:380px){#appShell .command-kpis{grid-template-columns:minmax(0,1fr)!important}#appShell .command-actions{grid-template-columns:minmax(0,1fr)}} #appShell .dashboard-modules{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px!important;margin-top:18px} #appShell .dashboard-module{position:relative;min-height:185px;text-align:left!important;border:1px solid var(--dash-line)!important;border-radius:16px!important;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important} #appShell .dashboard-module:hover{transform:translateY(-3px);border-color:#c8d5e1!important;box-shadow:0 12px 28px #14283d14!important} #appShell .dashboard-module-mark{display:grid;place-items:center;width:34px;height:34px;margin-bottom:16px;border-radius:10px;background:#fdf0e1;color:#a85a0c;font-size:17px;font-weight:800} #appShell .dashboard-module p{font-size:12px;margin:8px 0 18px} #appShell .dashboard-module-link{display:flex;justify-content:space-between;align-items:center;margin-top:auto;color:#173f63;font-size:12px;font-weight:750} #appShell .dashboard-welcome{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px!important;padding:24px!important;background:linear-gradient(110deg,#102a43,#173f63)!important;color:#fff} #appShell .dashboard-welcome .role-eyebrow{color:#f2c94c!important} #appShell .dashboard-welcome h2{margin:7px 0;color:#fff;font-size:20px} #appShell .dashboard-welcome p{max-width:650px;margin:0;color:#d7e2ed} #appShell .dashboard-welcome-mark{display:grid;place-items:center;flex:0 0 58px;height:58px;border:1px solid #ffffff35;border-radius:18px;color:#f2c94c;font-size:28px;font-weight:800} @media(max-width:1000px){#appShell .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}#appShell .dashboard-modules{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:800px){#appShell .dashboard-header{padding:17px!important;margin-bottom:14px!important}#appShell .dashboard-header .role-head-actions{margin-top:12px}#appShell .dashboard-kpis{gap:9px!important}#appShell .dashboard-kpis .kpi{min-height:122px!important;padding:15px!important}#appShell .dashboard-modules{grid-template-columns:1fr!important;gap:10px!important}#appShell .dashboard-module{min-height:155px!important}#appShell .dashboard-data-note{display:grid;gap:3px}#appShell .dashboard-welcome{padding:18px!important}#appShell .dashboard-welcome-mark{display:none}} @media(max-width:800px){ body.app-mode{height:100dvh!important;overflow:hidden!important} body.app-mode #appShell{display:flex!important;flex-direction:column!important;height:100dvh!important;max-height:100dvh!important;overflow:hidden!important} #appShell .top{flex:0 0 64px!important} #appShell .shell{display:flex!important;flex:1 1 auto!important;min-height:0!important;overflow:hidden!important} #appShell .main{flex:1 1 auto!important;height:100%!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;padding-bottom:24px!important;overscroll-behavior-y:contain} #appShell #mobileBottomNav{position:relative!important;inset:auto!important;flex:0 0 calc(72px + env(safe-area-inset-bottom))!important;width:100%!important;height:auto!important;min-height:72px!important;margin:0!important;padding:5px 8px max(5px,env(safe-area-inset-bottom))!important;border-radius:0!important;border-width:1px 0 0!important;background:rgba(255,255,255,.99)!important;box-shadow:0 -5px 18px rgba(15,23,42,.1)!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;z-index:180!important} #appShell #mobileBottomNav button{min-height:54px!important} #appShell .dashboard-data-note button{justify-self:start;margin-top:5px} } /* Role dashboards share the cleaner, tighter visual language in the supplied references. */ #appShell .main aside.card{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;align-self:start!important;transform:none!important} #appShell #drawerLogoutBtn{min-height:50px!important;border:1px solid #c5222a!important;border-radius:11px!important;background:#c5222a!important;color:#fff!important;box-shadow:0 4px 12px rgba(197,34,42,.22)!important;font-weight:800!important} #appShell #drawerLogoutBtn:hover{border-color:#a91e2a!important;background:#a91e2a!important;color:#fff!important} #appShell #drawerLogoutBtn:focus-visible{outline:3px solid #fff!important;outline-offset:3px!important} #appShell .ceo-hero,#appShell .work-welcome{border:1px solid #e2e8ef!important;background:linear-gradient(110deg,#fff 0%,#f7f9fb 72%,#f2f6f9 100%)!important;box-shadow:0 4px 16px rgba(16,42,67,.05)!important;color:#17334c!important} #appShell .ceo-hero h1,#appShell .work-welcome h1{color:#17334c!important} #appShell .ceo-hero p,#appShell .work-welcome p{color:#66798d!important} #appShell .ceo-hero .role-eyebrow,#appShell .work-welcome .role-eyebrow{color:#8d6822!important} #appShell .ceo-live{border-color:#dce5ec!important;background:#fff!important;color:#526a80!important} #appShell .work-welcome .secondary{color:#1b3a54!important;background:#fff!important;border:1px solid #d9e2e9!important} #appShell .ceo-overview,#appShell .ceo-panels,#appShell .work-columns,#appShell .enterprise-grid,#appShell .enterprise-lower{gap:12px!important} #appShell .ceo-dashboard,#appShell .work-dashboard,#appShell .enterprise-dashboard{gap:12px!important} @media(min-width:801px){ #appShell .main{padding:24px!important} #appShell .main .page-head{margin-bottom:14px!important} #appShell .main .toolbar{gap:8px!important;margin:12px 0!important} #appShell .main .grid,#appShell .main .dashboard-two-col,#appShell .main .dashboard-three-col,#appShell .main .dashboard-modules,#appShell .main .quick-actions,#appShell .main .command-grid{gap:12px!important} #appShell .main .card{padding:16px!important} } @media(max-width:800px){ #appShell .main{padding:14px 11px calc(78px + env(safe-area-inset-bottom))!important} #appShell .main .page-head{margin-bottom:12px!important} #appShell .main .toolbar{gap:8px!important;margin:10px 0!important} #appShell .main .grid,#appShell .main .dashboard-two-col,#appShell .main .dashboard-three-col,#appShell .main .dashboard-modules,#appShell .main .quick-actions,#appShell .main .command-grid{gap:8px!important} #appShell .main .card{padding:12px!important} #appShell .mobile-drawer-account{margin-top:auto!important;padding-bottom:calc(8px + env(safe-area-inset-bottom))!important} #appShell #nav button{min-height:44px!important} } html[data-theme="dark"] #appShell .main .work-empty{ background:#162735!important; border-color:#456176!important; color:#dbe5ed!important; } html[data-theme="dark"] #appShell .main .work-empty b{color:#f2f6f9!important} html[data-theme="dark"] #appShell .main .work-empty span{color:#b9c9d5!important} html[data-theme="dark"] #appShell .main :is(button.primary,.primary), html[data-theme="dark"] #appShell .main :is(button.primary,.primary) :where(*){ color:#fff!important; } /* Dark theme coverage for secondary module pages and their nested empty states. */ html[data-theme="dark"] #appShell .main :is( .ceo-signal-list>div,.ceo-clear,.enterprise-empty,.analytics-empty,.empty,.empty-state, .v33-calendar-card,.v33-selected-card,.v33-recent-card,.v33-day,.v34-stat,.v34-task-card, .v34-completed,.v34-security-note,.v33-activity-item,.v33-event-card,.v33-activity-empty, .required-setup,.required-setup-item,.login-status-row,.command-exception,.command-clear, .settings-guidance,.setting-row,.project-summary,.approval-summary-card, .work-task-row,.work-stock-list>div,.inventory-metric,.inventory-empty, .inventory-more>div,.inventory-more>summary,.transaction-stat,.transaction-hero, .transaction-ledger,.transaction-insights,.transaction-detail,.analytics-kpi, .analytics-toolbar,.analytics-chart,.analytics-table,.analytics-type-row, .chart-card,.status-card,.export-card,.admin-module,.admin-kpi,.fleet-kpi,.equipment-kpi ){ background-color:#192a39!important; background-image:none!important; border-color:#385064!important; color:#dbe5ed!important; } html[data-theme="dark"] #appShell .main :is(.v33-day.outside,.v33-activity-empty,.analytics-empty,.empty,.empty-state){ background-color:#162735!important; } html[data-theme="dark"] #appShell .main :is( .v34-task-card,.v33-calendar-card,.v33-selected-card,.v33-recent-card,.required-setup-item, .settings-guidance,.setting-row,.transaction-detail,.analytics-kpi,.analytics-toolbar, .chart-card,.status-card,.export-card,.admin-module ) :is(h1,h2,h3,h4,strong,b){ color:#f2f6f9!important; } html[data-theme="dark"] #appShell .main :is( .v34-task-card,.v33-calendar-card,.v33-selected-card,.v33-recent-card,.required-setup-item, .settings-guidance,.setting-row,.transaction-detail,.analytics-kpi,.analytics-toolbar, .chart-card,.status-card,.export-card,.admin-module ) :is(p,small,.muted,.help-text){ color:#b9c9d5!important; } html[data-theme="dark"] #appShell .main :is( .v34-task-toolbar input,.v34-task-toolbar select,.v34-task-form input, .v34-task-form select,.v34-task-form textarea,.v34-status-control select, .analytics-toolbar select,.field input,.field select,.field textarea ){ background:#10202d!important; border-color:#476176!important; color:#edf5fa!important; -webkit-text-fill-color:#edf5fa!important; } html[data-theme="dark"] #appShell .main :is(.v34-tabs,.v34-task-meta,.work-profile-stats){ border-color:#385064!important; } html[data-theme="dark"] #appShell .main .v34-tabs button{color:#b9c9d5!important} html[data-theme="dark"] #appShell .main .v34-tabs button.active{color:#f2f6f9!important;border-bottom-color:#e2858a!important} html[data-theme="dark"] #appShell .main :is(.v34-status,.v34-priority){ background:#293f52!important; border-color:#456176!important; color:#dbe9f3!important; } html[data-theme="dark"] #appShell .main :is(.v34-status-in_progress,.v34-priority-low){ background:#203b53!important;color:#b9dafa!important; } html[data-theme="dark"] #appShell .main .v34-status-done, html[data-theme="dark"] #appShell .main .v34-completed{ background:#1f4538!important;color:#a5e4c1!important; } html[data-theme="dark"] #appShell .main :is(.v34-status-blocked,.v34-priority-high,.v34-priority-urgent){ background:#44272c!important;color:#ffb8bc!important; } html[data-theme="dark"] #appShell .main :is(.v34-status-cancelled,.v34-status-todo,.v34-priority-low){ background:#293846!important;color:#c2d0dc!important; } html[data-theme="dark"] #appShell .main :is(.analytics-chart,.analytics-table,.analytics-type-row,.v34-task-meta){ border-color:#385064!important; } html[data-theme="dark"] #appShell .main :is(.v33-weekdays span,.v33-calendar-head strong,.v33-calendar-legend){ color:#b9c9d5!important; } html[data-theme="dark"] #appShell .main :is(.v33-day.selected,.v33-day.today){ background:#25435b!important;color:#f3f8fb!important;border-color:#71a4cb!important; } html[data-theme="dark"] #appShell .main :is(.v33-day:hover,.v34-task-card:hover,.enterprise-shortcut-grid button:hover){ background-color:#274258!important; } /* Keep role dashboards readable when legacy components set light-only surfaces. */ html[data-theme="dark"] #appShell .main .dashboard-page .dashboard-header, html[data-theme="dark"] #appShell .main .dashboard-page .dashboard-module, html[data-theme="dark"] #appShell .main .dashboard-page .quick-actions>button, html[data-theme="dark"] #appShell .main .dashboard-page .dashboard-two-col>.card, html[data-theme="dark"] #appShell .main .dashboard-page .dashboard-three-col>.card, html[data-theme="dark"] #appShell .main .dashboard-page .work-panel, html[data-theme="dark"] #appShell .main .dashboard-page .work-profile, html[data-theme="dark"] #appShell .main .dashboard-page .ceo-metrics-panel, html[data-theme="dark"] #appShell .main .dashboard-page .ceo-brief, html[data-theme="dark"] #appShell .main .dashboard-page .ceo-panel, html[data-theme="dark"] #appShell .main .dashboard-page .ceo-signal-list>div, html[data-theme="dark"] #appShell .main .dashboard-page .ceo-clear, html[data-theme="dark"] #appShell .main .dashboard-page .enterprise-hero, html[data-theme="dark"] #appShell .main .dashboard-page .enterprise-panel, html[data-theme="dark"] #appShell .main .dashboard-page .enterprise-shortcuts, html[data-theme="dark"] #appShell .main .dashboard-page .enterprise-shortcut-grid button, html[data-theme="dark"] #appShell .main .dashboard-page .enterprise-alert, html[data-theme="dark"] #appShell .main .dashboard-page .enterprise-empty, html[data-theme="dark"] #appShell .main .dashboard-page .work-task-row, html[data-theme="dark"] #appShell .main .dashboard-page .work-stock-list>div, html[data-theme="dark"] #appShell .main .dashboard-page .transaction-insights, html[data-theme="dark"] #appShell .main .dashboard-page .transaction-detail{ background:#192a39!important; background-image:none!important; border-color:#385064!important; color:#dbe5ed!important; } html[data-theme="dark"] #appShell .main .dashboard-page .enterprise-hero{ background:#172a39!important; } html[data-theme="dark"] #appShell .main .dashboard-page .dashboard-header :is(h1,h2,h3), html[data-theme="dark"] #appShell .main .dashboard-page .dashboard-module>div:not(.dashboard-module-mark), html[data-theme="dark"] #appShell .main .dashboard-page .quick-actions button>b, html[data-theme="dark"] #appShell .main .dashboard-page .work-panel :is(h2,h3,strong,b), html[data-theme="dark"] #appShell .main .dashboard-page .work-profile :is(h2,h3,strong,b), html[data-theme="dark"] #appShell .main .dashboard-page .ceo-metrics-panel :is(h2,h3,strong,b), html[data-theme="dark"] #appShell .main .dashboard-page .ceo-brief :is(h2,h3,strong,b), html[data-theme="dark"] #appShell .main .dashboard-page .ceo-panel :is(h2,h3,strong,b), html[data-theme="dark"] #appShell .main .dashboard-page .enterprise-panel :is(h2,h3,strong,b), html[data-theme="dark"] #appShell .main .dashboard-page .enterprise-shortcut-grid b, html[data-theme="dark"] #appShell .main .dashboard-page .enterprise-alert b, html[data-theme="dark"] #appShell .main .dashboard-page .enterprise-empty b{ color:#f2f6f9!important; } html[data-theme="dark"] #appShell .main .dashboard-page .dashboard-header :is(p,.muted,.small), html[data-theme="dark"] #appShell .main .dashboard-page .dashboard-kpis .kpi-label, html[data-theme="dark"] #appShell .main .dashboard-page .dashboard-kpis .small, html[data-theme="dark"] #appShell .main .dashboard-page .dashboard-module p, html[data-theme="dark"] #appShell .main .dashboard-page .quick-actions button small, html[data-theme="dark"] #appShell .main .dashboard-page .work-panel :is(p,small,.muted), html[data-theme="dark"] #appShell .main .dashboard-page .work-profile :is(p,small,.muted), html[data-theme="dark"] #appShell .main .dashboard-page .ceo-metrics-panel :is(p,small,.muted), html[data-theme="dark"] #appShell .main .dashboard-page .ceo-brief :is(p,small,.muted), html[data-theme="dark"] #appShell .main .dashboard-page .ceo-panel :is(p,small,.muted), html[data-theme="dark"] #appShell .main .dashboard-page .enterprise-panel :is(p,small,.muted), html[data-theme="dark"] #appShell .main .dashboard-page .enterprise-shortcut-grid small, html[data-theme="dark"] #appShell .main .dashboard-page .enterprise-alert span, html[data-theme="dark"] #appShell .main .dashboard-page .enterprise-empty span, html[data-theme="dark"] #appShell .main .dashboard-page :is(.ceo-activity-count,.ceo-activity-day small,.enterprise-chart b,.enterprise-chart small){ color:#b9c9d5!important; } html[data-theme="dark"] #appShell .main .dashboard-page .dashboard-kpis .metric, html[data-theme="dark"] #appShell .main .dashboard-page .work-metrics .metric, html[data-theme="dark"] #appShell .main .dashboard-page .ceo-metrics .metric, html[data-theme="dark"] #appShell .main .dashboard-page .ceo-project-label strong, html[data-theme="dark"] #appShell .main .dashboard-page .ceo-project-label span, html[data-theme="dark"] #appShell .main .dashboard-page .ceo-signal-list>div>strong, html[data-theme="dark"] #appShell .main .dashboard-page .work-profile-stats b, html[data-theme="dark"] #appShell .main .dashboard-page .enterprise-project-top b, html[data-theme="dark"] #appShell .main .dashboard-page .enterprise-project-top strong{ color:#f2f6f9!important; } html[data-theme="dark"] #appShell .main .dashboard-page :is(.ceo-project-track,.ceo-bar-track,.work-track,.progress-track,.enterprise-project-track,.enterprise-chart-bar,.transaction-type-track){ background:#263b4e!important; } html[data-theme="dark"] #appShell .main .dashboard-page .dashboard-module-link{ color:#9dcaf0!important; } html[data-theme="dark"] #appShell .main .dashboard-page .ceo-signal-mark.neutral{ background:#293f52!important; color:#dbe9f3!important; } html[data-theme="dark"] #appShell .main .dashboard-page .ceo-signal-mark.warning{ background:#40331f!important; color:#f3cf7b!important; } html[data-theme="dark"] #appShell .main .dashboard-page .ceo-signal-mark.danger{ background:#44272c!important; color:#ffb8bc!important; } /* Cover every dashboard shell, including the nested CEO and enterprise layouts. */ html[data-theme="dark"] #appShell .main :is(.dashboard-page,.ceo-dashboard,.enterprise-dashboard,.work-dashboard) :is( .dashboard-header,.dashboard-module,.quick-actions>button,.dashboard-two-col>.card,.dashboard-three-col>.card, .work-panel,.work-profile,.ceo-metrics-panel,.ceo-brief,.ceo-panel,.ceo-signal-list>div,.ceo-clear, .enterprise-hero,.enterprise-panel,.enterprise-shortcuts,.enterprise-shortcut-grid button, .enterprise-alert,.enterprise-empty,.work-task-row,.work-stock-list>div,.transaction-insights,.transaction-detail ){ background:#192a39!important; background-image:none!important; border-color:#385064!important; color:#dbe5ed!important; } html[data-theme="dark"] #appShell .main :is(.dashboard-page,.ceo-dashboard,.enterprise-dashboard,.work-dashboard) :is( .ceo-brief,.work-profile ){background:#192a39!important} html[data-theme="dark"] #appShell .main :is(.dashboard-page,.ceo-dashboard,.enterprise-dashboard,.work-dashboard) :is( .dashboard-header h1,.dashboard-header h2,.dashboard-header h3,.dashboard-module>div:not(.dashboard-module-mark), .quick-actions button>b,.work-panel :is(h2,h3,strong,b),.work-profile :is(h2,h3,strong,b), .ceo-metrics-panel :is(h2,h3,strong,b),.ceo-brief :is(h2,h3,strong,b),.ceo-panel :is(h2,h3,strong,b), .enterprise-panel :is(h2,h3,strong,b),.enterprise-shortcut-grid b,.enterprise-alert b,.enterprise-empty b ){color:#f2f6f9!important} html[data-theme="dark"] #appShell .main :is(.dashboard-page,.ceo-dashboard,.enterprise-dashboard,.work-dashboard) :is( .dashboard-header p,.dashboard-header .muted,.dashboard-header .small,.dashboard-kpis .kpi-label, .dashboard-kpis .small,.dashboard-module p,.quick-actions button small,.work-panel :is(p,small,.muted), .work-profile :is(p,small,.muted),.ceo-metrics-panel :is(p,small,.muted),.ceo-brief :is(p,small,.muted), .ceo-panel :is(p,small,.muted),.enterprise-panel :is(p,small,.muted),.enterprise-shortcut-grid small, .enterprise-alert span,.enterprise-empty span,.ceo-activity-count,.ceo-activity-day small, .enterprise-chart b,.enterprise-chart small,.ceo-project-label span ){color:#b9c9d5!important} html[data-theme="dark"] #appShell .main :is(.dashboard-page,.ceo-dashboard,.enterprise-dashboard,.work-dashboard) :is( .dashboard-kpis .metric,.work-metrics .metric,.ceo-metrics .metric,.ceo-project-label strong, .ceo-signal-list>div>strong,.work-profile-stats b,.enterprise-project-top b,.enterprise-project-top strong ){color:#f2f6f9!important} html[data-theme="dark"] #appShell .main :is(.dashboard-page,.ceo-dashboard,.enterprise-dashboard,.work-dashboard) :is( .ceo-project-track,.ceo-bar-track,.work-track,.progress-track,.enterprise-project-track, .enterprise-chart-bar,.transaction-type-track ){background:#263b4e!important} html[data-theme="dark"] #appShell .main :is(.dashboard-page,.ceo-dashboard,.enterprise-dashboard,.work-dashboard) .dashboard-module-link{ color:#9dcaf0!important; } html[data-theme="dark"] #appShell .main :is(.dashboard-page,.ceo-dashboard,.enterprise-dashboard,.work-dashboard) .ceo-signal-mark.neutral{ background:#293f52!important;color:#dbe9f3!important; } html[data-theme="dark"] #appShell .main :is(.dashboard-page,.ceo-dashboard,.enterprise-dashboard,.work-dashboard) .ceo-signal-mark.warning{ background:#40331f!important;color:#f3cf7b!important; } html[data-theme="dark"] #appShell .main :is(.dashboard-page,.ceo-dashboard,.enterprise-dashboard,.work-dashboard) .ceo-signal-mark.danger{ background:#44272c!important;color:#ffb8bc!important; } .dashboard-refreshbar{ display:flex; justify-content:flex-end; align-items:center; gap:10px; margin:0 0 12px; color:#64758a; font-size:11px; } .dashboard-refreshbar button{min-height:36px!important;padding:7px 11px!important;font-size:11px!important} html[data-theme="dark"] #appShell .main .dashboard-refreshbar{color:#b9c9d5!important} /* Complete dark-mode coverage for calendar, tasks, and Admin setup panels. */ :root[data-theme="dark"] #appShell .main .v33-calendar-card, :root[data-theme="dark"] #appShell .main .v33-selected-card, :root[data-theme="dark"] #appShell .main .v33-recent-card, :root[data-theme="dark"] #appShell .main .v33-day, :root[data-theme="dark"] #appShell .main .v34-stat, :root[data-theme="dark"] #appShell .main .v34-task-card, :root[data-theme="dark"] #appShell .main .required-setup, :root[data-theme="dark"] #appShell .main .required-setup-item, :root[data-theme="dark"] #appShell .main .login-status-row, :root[data-theme="dark"] #appShell .main .command-panel, :root[data-theme="dark"] #appShell .main .command-exception, :root[data-theme="dark"] #appShell .main .command-clear{background:#192a39!important;background-image:none!important;border-color:#385064!important;color:#dbe5ed!important} :root[data-theme="dark"] #appShell .main .v33-day.outside{background:#162735!important;color:#9dafbe!important} :root[data-theme="dark"] #appShell .main .v33-day:hover{background:#274258!important;border-color:#50708a!important} :root[data-theme="dark"] #appShell .main .v33-day.selected, :root[data-theme="dark"] #appShell .main .v33-day.today{background:#25435b!important;color:#f3f8fb!important;border-color:#71a4cb!important} :root[data-theme="dark"] #appShell .main .v33-weekdays span, :root[data-theme="dark"] #appShell .main .v33-calendar-head strong, :root[data-theme="dark"] #appShell .main .v33-calendar-legend{color:#b9c9d5!important} :root[data-theme="dark"] #appShell .main .v34-stat :is(span,small), :root[data-theme="dark"] #appShell .main .v34-task-card :is(p,small,.muted), :root[data-theme="dark"] #appShell .main .required-setup :is(p,small,.muted), :root[data-theme="dark"] #appShell .main .required-setup-item :is(small,.setup-value), :root[data-theme="dark"] #appShell .main .command-panel :is(p,small,.muted), :root[data-theme="dark"] #appShell .main .command-exception span, :root[data-theme="dark"] #appShell .main .command-clear span{color:#b9c9d5!important} :root[data-theme="dark"] #appShell .main .v34-stat strong, :root[data-theme="dark"] #appShell .main .v34-task-card h3, :root[data-theme="dark"] #appShell .main .required-setup :is(h1,h2,h3,strong,b), :root[data-theme="dark"] #appShell .main .required-setup-item strong, :root[data-theme="dark"] #appShell .main .command-panel :is(h1,h2,h3,strong,b), :root[data-theme="dark"] #appShell .main .command-exception b, :root[data-theme="dark"] #appShell .main .command-clear b{color:#f2f7fa!important} :root[data-theme="dark"] #appShell .main .setup-state.ready{background:#1f4a3a!important;color:#8fdfb7!important} :root[data-theme="dark"] #appShell .main .setup-state.needs-setup{background:#4a2b30!important;color:#ffb8bc!important} /* Navigation and commercial dashboard use the same calm reading weight. */ #appShell #nav button,#appShell #nav .nav-group-title,#appShell #mobileBottomNav button{font-family:Inter,Roboto,"Segoe UI",Arial,sans-serif!important} #appShell #nav button{font-size:12px!important;font-weight:600!important;letter-spacing:0!important} #appShell #nav .nav-group-title{font-size:10px!important;font-weight:750!important;letter-spacing:.1em!important} #appShell .dashboard-page .work-welcome h1{font-weight:650!important} #appShell .dashboard-page .dashboard-module>div:not(.dashboard-module-mark){font-weight:650!important} #appShell .dashboard-page .dashboard-module p{font-weight:400!important} #appShell .approval-row-actions .secondary{background:#f1f5f9!important;color:#334e68!important} /* Login uses native required validation without visual red asterisks. */ #login .req,#login .sr-only{display:none!important} /* Dark inventory panels must never retain the light palette beneath shared theme rules. */ html[data-theme="dark"] #appShell .inventory-commandbar,html[data-theme="dark"] #appShell .inventory-filterbar,html[data-theme="dark"] #appShell .inventory-summary,html[data-theme="dark"] #appShell .inventory-metric,html[data-theme="dark"] #appShell .inventory-empty{background:#192a39!important;border-color:#304252!important;color:#dbe5ed!important} html[data-theme="dark"] #appShell .inventory-commandbar :is(h1,h2,h3,strong,b),html[data-theme="dark"] #appShell .inventory-filterbar :is(label,strong),html[data-theme="dark"] #appShell .inventory-summary :is(strong,b),html[data-theme="dark"] #appShell .inventory-metric :is(strong,b){color:#f2f6f9!important} html[data-theme="dark"] #appShell .inventory-commandbar :is(p,small,.muted),html[data-theme="dark"] #appShell .inventory-filterbar :is(p,small,.muted),html[data-theme="dark"] #appShell .inventory-summary :is(p,small,.muted),html[data-theme="dark"] #appShell .inventory-empty :is(p,small,.muted){color:#a8b8c6!important} /* One type scale for every role dashboard and operational page. */ #appShell{--ui-font:Inter,Roboto,"Segoe UI",Arial,sans-serif} #appShell .main,#appShell .main button,#appShell .main input,#appShell .main select,#appShell .main textarea,#appShell .main table{font-family:var(--ui-font)!important} #appShell .main .role-eyebrow,#appShell .main .eyebrow{font-size:10px!important;font-weight:800!important;letter-spacing:.11em!important;line-height:1.35!important} #appShell .main .page-head h1,#appShell .main .ceo-hero h1,#appShell .main .work-welcome h1,#appShell .main .admin-hero h1{font-size:clamp(24px,2.35vw,31px)!important;line-height:1.18!important;font-weight:700!important;letter-spacing:-.035em!important} #appShell .main h2{font-size:18px!important;line-height:1.3!important;font-weight:700!important;letter-spacing:-.018em!important} #appShell .main h3{font-size:15px!important;line-height:1.35!important;font-weight:700!important} #appShell .main .muted{font-size:13px!important;line-height:1.55!important} #appShell .main .small{font-size:12px!important;line-height:1.5!important} #appShell .main .dashboard-module{font-family:var(--ui-font)!important} #appShell .main .dashboard-module>div:not(.dashboard-module-mark){font-size:16px!important;line-height:1.32!important;font-weight:700!important} #appShell .main .dashboard-module p{font-size:12px!important;line-height:1.55!important} #appShell .main label{font-size:12px!important;line-height:1.4!important;font-weight:650!important} #appShell .main th{font-size:10px!important;line-height:1.35!important;font-weight:750!important;letter-spacing:.06em!important} #appShell .main td{font-size:12px!important;line-height:1.5!important} #appShell .main .metric{font-size:clamp(25px,2.15vw,32px)!important;line-height:1.15!important;font-weight:700!important} #appShell .main .req{color:#c5222a!important;font-weight:800!important} #appShell .main :where(button,a,input,select,textarea):focus-visible{outline:3px solid #2e77bd!important;outline-offset:2px!important} @media(max-width:800px){ #appShell .main .page-head h1,#appShell .main .ceo-hero h1,#appShell .main .work-welcome h1,#appShell .main .admin-hero h1{font-size:24px!important} #appShell .main h2{font-size:17px!important} #appShell .main .muted{font-size:12px!important} #appShell .main .metric{font-size:24px!important} #appShell .main td{font-size:12px!important} } /* Equipment register: clear quantity and acquisition value at a glance. */ #appShell .equipment-summary{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px} #appShell .equipment-summary .card{min-width:0} #appShell .equipment-summary .metric{overflow-wrap:anywhere} #appShell .equipment-summary small{display:block;margin-top:5px} #appShell .equipment-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;margin-bottom:14px} #appShell .equipment-toolbar h2{margin:0 0 5px;font-size:18px} #appShell .equipment-toolbar p{margin:0;max-width:680px} #appShell .equipment-filters{grid-column:1/-1;display:grid;grid-template-columns:minmax(220px,1fr) repeat(2,minmax(150px,220px));gap:9px} #appShell .equipment-filters input,#appShell .equipment-filters select{min-width:0;width:100%;min-height:42px;border:1px solid #d5dee7;border-radius:10px;padding:9px 11px;background:#fff;color:#18344d} #appShell .equipment-filters input:focus,#appShell .equipment-filters select:focus{outline:3px solid rgba(37,99,235,.14);border-color:#4d86c6} #appShell .equipment-empty{display:flex;flex-direction:column;align-items:flex-start;gap:9px;color:#1b344c} #appShell .equipment-empty span{color:#697d90} #appShell .equipment-form-intro{grid-column:1/-1;padding:12px 14px;border:1px solid #dbe7ef;border-radius:11px;background:#f5f9fc;color:#536b7f;font-size:13px;line-height:1.55} #appShell .equipment-form-wide{grid-column:1/-1} @media(max-width:800px){ #appShell .equipment-summary{grid-template-columns:repeat(2,minmax(0,1fr))} #appShell .equipment-toolbar{grid-template-columns:minmax(0,1fr)} #appShell .equipment-toolbar>#addEquipmentBtn{width:100%} #appShell .equipment-filters{grid-template-columns:minmax(0,1fr)} #appShell .equipment-form-wide{grid-column:auto} } html[data-theme="dark"] #appShell .main .equipment-filters input,html[data-theme="dark"] #appShell .main .equipment-filters select{background:#12202c!important;color:#edf3f8!important;border-color:#3a5062!important} html[data-theme="dark"] #appShell .main .equipment-form-intro{background:#203444!important;border-color:#3a5264!important;color:#c8d6e1!important} html[data-theme="dark"] #modal .equipment-form-intro{background:#203444!important;border-color:#3a5264!important;color:#c8d6e1!important} /* Shared interaction and page rhythm across every role workspace. */ #appShell .main>.page-head{align-items:center;gap:12px;margin-bottom:16px} #appShell .main>.page-head h1{font-size:clamp(22px,2.2vw,29px);line-height:1.2;letter-spacing:-.025em} #appShell .main .toolbar{align-items:center;row-gap:9px} #appShell .main .toolbar>button,#appShell .main .toolbar>input,#appShell .main .toolbar>select{min-height:40px} #appShell .main :where(button,a,input,select,textarea):focus-visible{outline:3px solid rgba(48,126,191,.38);outline-offset:2px} #appShell .main .tablewrap{max-width:100%;overflow:auto;overscroll-behavior-x:contain;border-radius:13px} #appShell .main .tablewrap table{margin:0} #appShell .main .tablewrap tbody tr:nth-child(even){background-color:rgba(110,133,153,.035)} #appShell .main .tablewrap tbody tr:hover{background-color:rgba(44,112,168,.075)} @media(max-width:800px){ #appShell .main>.page-head{align-items:stretch} #appShell .main>.page-head h1{font-size:23px} #appShell .main .toolbar>button,#appShell .main .toolbar>input,#appShell .main .toolbar>select{min-height:44px} } /* Theme switch beside notifications and a compact, comparable analytics workspace. */ #appShell .userbar .theme-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-width:74px!important;height:42px!important;padding:0 10px!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:11px!important;background:rgba(255,255,255,.1)!important;color:#fff!important;font-size:12px!important;font-weight:750!important;line-height:1!important;white-space:nowrap!important} #appShell .userbar .theme-toggle:hover{background:rgba(255,255,255,.2)!important;transform:translateY(-1px)} #appShell .userbar .theme-toggle:focus-visible{outline:2px solid #f3c76b!important;outline-offset:2px!important} #appShell .theme-toggle #themeToggleIcon{font-size:18px;line-height:1} .analytics-loading{display:flex;align-items:center;gap:12px;min-height:90px;color:#66798d} .analytics-page-head{margin-bottom:12px!important} .analytics-page-head .role-eyebrow{margin-bottom:5px} .analytics-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 13px;padding:10px 13px;border:1px solid #dce5ed;border-radius:12px;background:#f8fafc;color:#40566b;font-size:12px} .analytics-toolbar>div{margin-right:auto}.analytics-toolbar label{font-size:11px;font-weight:750;color:#607387} .analytics-toolbar select{min-height:36px;padding:6px 30px 6px 10px;border:1px solid #d5dfe8;border-radius:8px;background:#fff;color:#17324d} .analytics-live-dot{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%;background:#20a06b;box-shadow:0 0 0 3px rgba(32,160,107,.12)} .analytics-notice{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}.analytics-notice span{flex:1 1 240px} .analytics-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:12px} .analytics-kpi{position:relative;display:flex;min-width:0;min-height:126px;flex-direction:column;justify-content:center;gap:5px;padding:16px 17px;border:1px solid #e0e7ed;border-radius:14px;background:#fff;box-shadow:0 3px 12px rgba(22,48,70,.04);overflow:hidden} .analytics-kpi>span{font-size:11px;font-weight:750;color:#66798d}.analytics-kpi>strong{font-size:clamp(21px,2vw,27px);line-height:1.15;letter-spacing:-.04em;color:#17324d;overflow-wrap:anywhere}.analytics-kpi>small{font-size:10px;line-height:1.4;color:#75869a} .analytics-kpi>i{position:absolute;right:14px;top:13px;display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:#eef4f8;color:#51728c;font-size:15px;font-style:normal;font-weight:800} .analytics-change{font-size:10px;font-weight:750;color:#708196}.analytics-change.up{color:#178356}.analytics-change.down{color:#bd4545}.analytics-change.is-new{color:#2474b9} .analytics-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr);gap:12px;margin-bottom:12px} #appShell .analytics-grid>.card,#appShell .analytics-project-card{min-width:0;padding:16px!important} .analytics-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px} .analytics-section-head h2{margin:3px 0;font-size:17px;letter-spacing:-.025em;color:#17324d}.analytics-section-head p{margin:0;font-size:11px} .analytics-section-head .role-eyebrow{font-size:9px;letter-spacing:.1em;font-weight:800;color:#788b9d}.analytics-total{flex:0 0 auto;font-size:20px;font-weight:800;color:#17324d;text-align:right}.analytics-total small{display:block;font-size:9px;font-weight:600;color:#8291a0} .analytics-chart{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;gap:12px;min-height:166px;padding:13px 8px 0;border-bottom:1px solid #e7edf2} .analytics-bar-column{display:flex;height:155px;min-width:0;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}.analytics-bar-column>b{font-size:10px;color:#536b80} .analytics-bar-track{display:flex;align-items:flex-end;justify-content:center;width:min(40px,90%);height:105px;overflow:hidden;border-radius:7px 7px 2px 2px;background:#f1f5f8}.analytics-bar-track>span{display:block;width:100%;min-height:5px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,#5588ba,#244f73)} .analytics-bar-column>small{min-height:24px;font-size:9px;color:#7a8b9b;text-align:center;white-space:nowrap}.analytics-chart-legend{display:flex;justify-content:space-between;gap:10px;padding:10px 2px 0;font-size:10px} .analytics-chart-legend>span:first-child{display:flex;align-items:center;gap:6px;color:#50677d}.analytics-chart-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;background:#386b94} .analytics-type-row{display:grid;grid-template-columns:minmax(75px,1fr) 35px minmax(110px,1.15fr);align-items:center;gap:8px;padding:13px 0;border-top:1px solid #edf1f4;font-size:11px;color:#52677a}.analytics-type-row>b{font-size:14px;color:#17324d;text-align:right}.analytics-type-row .analytics-change{text-align:right} .analytics-table{box-shadow:none;border-color:#e7edf2}.analytics-table table{min-width:520px}.analytics-table th{background:#f7f9fb}.analytics-table td,.analytics-table th{padding:10px 12px}.analytics-table td{font-size:11px} .analytics-alert-count{display:inline-flex;padding:4px 8px;border-radius:99px;background:#fff3e6;color:#a85e12;font-size:10px;font-weight:750;white-space:nowrap}.analytics-clear-count{color:#178356;font-size:10px;font-weight:750} .analytics-empty{padding:24px!important;border:1px dashed #d9e2e9;border-radius:10px;background:#fafcfd;color:#61778c;text-align:center}.analytics-footnote{margin:10px 2px 0;color:#8090a0;font-size:10px;line-height:1.5} @media(max-width:1050px){.analytics-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-grid{grid-template-columns:minmax(0,1fr)}} @media(max-width:800px){ #appShell .userbar .theme-toggle{min-width:40px!important;width:40px!important;height:40px!important;padding:0!important;gap:0!important;border-radius:11px!important;background:#173b59!important;border-color:rgba(255,255,255,.14)!important} #appShell .theme-toggle #themeToggleIcon{font-size:20px}#appShell .theme-toggle #themeToggleLabel{display:none!important} #appShell .analytics-toolbar{gap:8px;padding:9px 10px}#appShell .analytics-toolbar>div{flex:1 1 100%;margin:0}#appShell .analytics-toolbar label{margin-right:auto} #appShell .analytics-kpis{gap:8px}#appShell .analytics-kpi{min-height:112px;padding:12px}#appShell .analytics-kpi>strong{font-size:21px} #appShell .analytics-grid{gap:8px}#appShell .analytics-chart{gap:5px;padding-right:0;padding-left:0} #appShell .analytics-type-row{grid-template-columns:minmax(65px,1fr) 28px minmax(90px,1.2fr);gap:5px;font-size:10px}#appShell .analytics-type-row .analytics-change{font-size:9px} #appShell .analytics-section-head h2{font-size:16px}#appShell .analytics-section-head p{font-size:10px} } @media(max-width:360px){#appShell .analytics-kpis{grid-template-columns:minmax(0,1fr)}#appShell .analytics-kpi{min-height:95px}} /* Dark mode for shared chrome, work surfaces, forms, and dashboard visualizations. */ html[data-theme="dark"] body{background:#101923!important;color:#e4ebf2!important} html[data-theme="dark"] #appShell{--text:#e4ebf2;--muted:#a3b2c1;--line:#304252;--shadow:0 8px 24px rgba(0,0,0,.22);color:#e4ebf2!important} html[data-theme="dark"] #appShell .shell,html[data-theme="dark"] #appShell .main{background:#101923!important;color:#e4ebf2!important} html[data-theme="dark"] #appShell aside#side{background:#152331!important;border-color:#2b3d4d!important;color:#e4ebf2!important} html[data-theme="dark"] #appShell .nav-group-title,html[data-theme="dark"] #appShell .nav:before{color:#91a4b6!important}html[data-theme="dark"] #appShell .nav button{color:#c2ced9!important} html[data-theme="dark"] #appShell .nav button:hover{background:#203345!important;color:#f5f8fa!important}html[data-theme="dark"] #appShell .nav button.active{background:#223e57!important;color:#d9eaff!important;box-shadow:inset 3px 0 #69a7e5!important} html[data-theme="dark"] #appShell .card,html[data-theme="dark"] #appShell .tablewrap,html[data-theme="dark"] #appShell .modalbox,html[data-theme="dark"] #appShell .notif-menu,html[data-theme="dark"] #appShell .settings-panel,html[data-theme="dark"] #appShell .settings-nav{background:#192a39!important;border-color:#304252!important;color:#e4ebf2!important} html[data-theme="dark"] #appShell .card h1,html[data-theme="dark"] #appShell .card h2,html[data-theme="dark"] #appShell .card h3,html[data-theme="dark"] #appShell .page-head h1,html[data-theme="dark"] #appShell .page-head h2,html[data-theme="dark"] #appShell .metric,html[data-theme="dark"] #appShell .kpi-label{color:#e8eff6!important} html[data-theme="dark"] #appShell .muted,html[data-theme="dark"] #appShell .small{color:#a5b5c4!important} html[data-theme="dark"] #appShell th{background:#213344!important;color:#bac8d4!important;border-color:#304252!important}html[data-theme="dark"] #appShell td{color:#d9e3eb!important;border-color:#304252!important} html[data-theme="dark"] #appShell tbody tr:hover,html[data-theme="dark"] #appShell .notif-item:hover{background:#223648!important} html[data-theme="dark"] #appShell .notif-item,html[data-theme="dark"] #appShell .notif-head{border-color:#304252!important;color:#e4ebf2!important}html[data-theme="dark"] #appShell .notif-item.unread{background:#203b53!important} html[data-theme="dark"] #appShell input:not([type=checkbox]):not([type=radio]):not([type=range]),html[data-theme="dark"] #appShell select,html[data-theme="dark"] #appShell textarea{background:#12202c!important;color:#edf3f8!important;-webkit-text-fill-color:#edf3f8!important;border-color:#3a5062!important} html[data-theme="dark"] #appShell input::placeholder,html[data-theme="dark"] #appShell textarea::placeholder{color:#93a6b7!important;-webkit-text-fill-color:#93a6b7!important} html[data-theme="dark"] #appShell .secondary{background:#263b4e!important;border:1px solid #3b5265!important;color:#e3ebf2!important}html[data-theme="dark"] #appShell .secondary:hover{background:#304a60!important} html[data-theme="dark"] #appShell .notice.info{background:#1b3449!important;border-color:#315873!important;color:#d5e9f7!important}html[data-theme="dark"] #appShell .notice.warning{background:#3a3020!important;border-color:#6a5630!important;color:#f7e6bd!important} html[data-theme="dark"] #appShell .notice.success{background:#17362c!important;border-color:#2e604b!important;color:#cff3df!important}html[data-theme="dark"] #appShell .notice.error{background:#3c2528!important;border-color:#704044!important;color:#ffd8dc!important} html[data-theme="dark"] #appShell .ceo-hero,html[data-theme="dark"] #appShell .work-welcome{background:linear-gradient(110deg,#192a39,#1b3042)!important;border-color:#30495b!important;color:#e4ebf2!important} html[data-theme="dark"] #appShell .ceo-hero h1,html[data-theme="dark"] #appShell .work-welcome h1{color:#edf4fa!important}html[data-theme="dark"] #appShell .ceo-hero p,html[data-theme="dark"] #appShell .work-welcome p{color:#b1c0cd!important} html[data-theme="dark"] #appShell .ceo-live,html[data-theme="dark"] #appShell .work-welcome .secondary{background:#23394b!important;border-color:#3a5265!important;color:#e3ebf2!important} html[data-theme="dark"] #appShell .enterprise-project,html[data-theme="dark"] #appShell .enterprise-alert,html[data-theme="dark"] #appShell .analytics-kpi{background:#192a39!important;border-color:#304252!important;color:#e4ebf2!important} html[data-theme="dark"] #appShell .analytics-toolbar{background:#182938!important;border-color:#304252!important;color:#ced9e2!important}html[data-theme="dark"] #appShell .analytics-toolbar select{background:#12202c!important;color:#edf3f8!important;border-color:#3a5062!important} html[data-theme="dark"] #appShell .analytics-kpi>strong,html[data-theme="dark"] #appShell .analytics-total,html[data-theme="dark"] #appShell .analytics-section-head h2,html[data-theme="dark"] #appShell .analytics-type-row>b{color:#edf4fa!important} html[data-theme="dark"] #appShell .analytics-kpi>span,html[data-theme="dark"] #appShell .analytics-type-row{color:#b2c1ce!important}html[data-theme="dark"] #appShell .analytics-kpi>small,html[data-theme="dark"] #appShell .analytics-footnote{color:#97a9b8!important} html[data-theme="dark"] #appShell .analytics-kpi>i{background:#243b4e!important;color:#aed0ed!important}html[data-theme="dark"] #appShell .analytics-chart{border-color:#34495a!important} html[data-theme="dark"] #appShell .analytics-bar-track{background:#263a4b!important}html[data-theme="dark"] #appShell .analytics-bar-track>span{background:linear-gradient(180deg,#70a9d7,#376d99)!important} html[data-theme="dark"] #appShell .analytics-type-row,html[data-theme="dark"] #appShell .analytics-chart-legend{border-color:#304252!important}html[data-theme="dark"] #appShell .analytics-table th{background:#213344!important} html[data-theme="dark"] #appShell .analytics-empty{background:#152635!important;border-color:#405669!important;color:#bac8d4!important} html[data-theme="dark"] #appShell .mobile-bottom-nav{background:rgba(21,35,49,.96)!important;border-color:#304252!important} html[data-theme="dark"] #appShell .mobile-bottom-nav button{color:#aebdca!important}html[data-theme="dark"] #appShell .mobile-bottom-nav button span{color:#bfccd7!important} html[data-theme="dark"] #appShell .mobile-bottom-nav button.active{background:#253d51!important;color:#f0f5f8!important}html[data-theme="dark"] #appShell .mobile-bottom-nav button.active span{color:#f18a8f!important} html[data-theme="dark"] #modal .modalbox{background:#192a39!important;border-color:#304252!important;color:#e4ebf2!important} html[data-theme="dark"] #modal .modalbox h1,html[data-theme="dark"] #modal .modalbox h2,html[data-theme="dark"] #modal .modalbox h3,html[data-theme="dark"] #modal .modalbox label{color:#e4ebf2!important} html[data-theme="dark"] #modal .modalbox input:not([type=checkbox]):not([type=radio]),html[data-theme="dark"] #modal .modalbox select,html[data-theme="dark"] #modal .modalbox textarea{background:#12202c!important;color:#edf3f8!important;-webkit-text-fill-color:#edf3f8!important;border-color:#3a5062!important} html[data-theme="dark"] #modal .actions-sticky,html[data-theme="dark"] #modal .modal-actions{background:#192a39!important;border-color:#304252!important} /* Keep the signed-out page as one coherent panel in dark mode. The login card is intentionally transparent: making it a second dark card caused the split, broken layout. */ html[data-theme="dark"] #login{background:radial-gradient(circle at 20% 10%,#1b3449,transparent 38%),linear-gradient(135deg,#101923,#152331)!important} html[data-theme="dark"] #login .login-shell{background:#122433!important;border-color:#365065!important;box-shadow:0 18px 65px rgba(0,0,0,.32)!important} html[data-theme="dark"] #login .login-brand-panel{background:linear-gradient(145deg,#0c1d2d,#173a57)!important} html[data-theme="dark"] #login .login-form-panel{background:#172b3d!important;color:#e4ebf2!important} html[data-theme="dark"] #login .login-card{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#e4ebf2!important} html[data-theme="dark"] #login .login-card h1,html[data-theme="dark"] #login .login-card label{color:#f1f6fa!important} html[data-theme="dark"] #login .login-card .muted,html[data-theme="dark"] #login .ui-login-note{color:#b9c9d5!important;border-color:#365065!important} html[data-theme="dark"] #login .field input{background:#0f202f!important;color:#f1f6fa!important;-webkit-text-fill-color:#f1f6fa!important;border-color:#466278!important} html[data-theme="dark"] #login .field input::placeholder{color:#aebfcd!important;-webkit-text-fill-color:#aebfcd!important} html[data-theme="dark"] #login #email,html[data-theme="dark"] #login #password{background-color:#0f202f!important;color:#f1f6fa!important;-webkit-text-fill-color:#f1f6fa!important;caret-color:#fff!important} html[data-theme="dark"] #login input:-webkit-autofill,html[data-theme="dark"] #login input:-webkit-autofill:hover,html[data-theme="dark"] #login input:-webkit-autofill:focus{box-shadow:0 0 0 1000px #0f202f inset!important;-webkit-box-shadow:0 0 0 1000px #0f202f inset!important;-webkit-text-fill-color:#f1f6fa!important;color:#f1f6fa!important;caret-color:#fff!important;border-color:#466278!important} html[data-theme="dark"] #login .ui-password-toggle{background:#243d52!important;color:#edf4f9!important} @media(max-width:800px){html[data-theme="dark"] body.app-mode{background:#101923!important}html[data-theme="dark"] body.app-mode #appShell header.top{background:#152331!important;color:#eaf1f6!important;border-color:#304252!important}html[data-theme="dark"] body.app-mode #appShell header.top .theme-toggle,html[data-theme="dark"] body.app-mode #appShell header.top #notifBtn{background:#243b4e!important}} /* Make theme changes visible in the masthead and allow the whole rail to scroll. */ html[data-theme="dark"] #appShell header.top{background:#0b1520!important;color:#eef4f8!important;border-bottom:1px solid #263746!important;box-shadow:0 4px 16px rgba(0,0,0,.28)!important} html[data-theme="dark"] #appShell header.top #notifBtn,html[data-theme="dark"] #appShell header.top #menuBtn,html[data-theme="dark"] #appShell header.top .theme-toggle{background:#223849!important;border-color:#3b5263!important;color:#f0f5f8!important} @media(min-width:801px){ #appShell aside#side{overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important;scrollbar-color:#718296 transparent!important} #appShell aside#side #nav{display:block!important;flex:0 0 auto!important;min-height:auto!important;overflow:visible!important;overscroll-behavior:initial!important;touch-action:pan-y!important} #appShell aside#side .mobile-drawer-account{flex:0 0 auto!important;margin-top:14px!important} } @media(max-width:800px){ #appShell aside#side{overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;scrollbar-width:thin!important} #appShell aside#side #nav{flex:0 0 auto!important;min-height:auto!important;overflow:visible!important;touch-action:pan-y!important} #appShell aside#side .mobile-drawer-account{flex:0 0 auto!important;margin-top:14px!important} html[data-theme="dark"] body.app-mode #appShell header.top{background:#0b1520!important;color:#eef4f8!important;border-bottom-color:#263746!important;box-shadow:0 4px 16px rgba(0,0,0,.28)!important} } /* High-contrast theme control in the light palette. */ html[data-theme="light"] #appShell header.top .theme-toggle{background:#173b59!important;border:1px solid #44617a!important;color:#fff!important;box-shadow:0 2px 7px rgba(7,26,44,.24)!important} html[data-theme="light"] #appShell header.top .theme-toggle:hover{background:#244f72!important;border-color:#5b7890!important} html[data-theme="light"] #appShell header.top .theme-toggle:focus-visible{outline-color:#e1ad45!important} /* Normalize inherited and inline-dark text across every dark-mode workspace page. */ html[data-theme="dark"] #appShell .main :where(*):not(input):not(select):not(textarea){color:#dbe5ed!important} html[data-theme="dark"] #appShell .main :where(h1,h2,h3,h4,h5,h6){color:#f2f6f9!important} html[data-theme="dark"] #appShell .main :where(.muted,.small,small,.help-text,.form-hint,.subtle,.eyebrow,.role-eyebrow){color:#a8b8c6!important} html[data-theme="dark"] #appShell .main :where(a){color:#8ec5f4!important} html[data-theme="dark"] #appShell .main svg text{fill:#c8d5df!important} html[data-theme="dark"] #appShell .main :where(.card,.panel,.panel-card,.section-card,.dashboard-panel,.admin-hero,.enterprise-panel,.work-welcome,.project-summary,.inventory-commandbar,.inventory-filterbar,.inventory-summary,.required-note,.empty,.empty-state,.tablewrap,.settings-panel,.settings-nav,.approval-summary-card,.approval-toolbar,.export-card,.admin-module,.status-card,.chart-card){background-color:#192a39!important;border-color:#304252!important;color:#dbe5ed!important} html[data-theme="dark"] #appShell .main :where(.IN-STOCK,.status-approved,.LOW-STOCK,.status-pending,.OUT-OF-STOCK,.status-rejected,.OVERSTOCKED,.status-ceo,.badge){background:#24384a!important;border-color:#40596d!important;color:#e4edf4!important} html[data-theme="dark"] #appShell .main :where(.success-text,.text-success,.health-available,.analytics-clear-count){color:#70d0a2!important} html[data-theme="dark"] #appShell .main :where(.danger-text,.text-danger,.health-unavailable){color:#ff999d!important} html[data-theme="dark"] #appShell .main :where(.warning-text,.text-warning,.analytics-alert-count){background:#40331f!important;color:#f3cf7b!important} html[data-theme="dark"] #appShell .main :where(.progress-track,.analytics-bar-track){background:#263b4e!important} html[data-theme="dark"] #appShell .main :where(.progress-track>span){background:#6aa5d4!important} html[data-theme="dark"] #appShell .main :where(hr){border-color:#35495a!important} html[data-theme="dark"] #appShell .enterprise-dashboard{--enterprise-ink:#f0f5f8;--enterprise-muted:#a9bac8;--enterprise-line:#304252} html[data-theme="dark"] #appShell .enterprise-hero{background:#172a39!important;background-image:none!important;border-color:#344b5d!important;box-shadow:0 5px 18px rgba(0,0,0,.16)!important} html[data-theme="dark"] #appShell .enterprise-empty{background:#213545!important;border-color:#496174!important;color:#e1eaf0!important} html[data-theme="dark"] #appShell .enterprise-shortcuts{background:#192a39!important;border-color:#304252!important} html[data-theme="dark"] #appShell .enterprise-shortcut-grid button{background:#203444!important;border-color:#3a5264!important} html[data-theme="dark"] #appShell .enterprise-shortcut-grid button:hover{background:#294257!important;border-color:#58748c!important} html[data-theme="dark"] #appShell .enterprise-shortcut-grid button>i{background:#2c455a!important;color:#c5d9e8!important} html[data-theme="dark"] #appShell .enterprise-chart-bar{background:#293d4f!important} html[data-theme="dark"] #appShell .enterprise-project{border-color:#304252!important} html[data-theme="dark"] #appShell .enterprise-project-track,html[data-theme="dark"] #appShell .transaction-type-track{background:#293d4f!important} html[data-theme="dark"] #appShell .enterprise-alert{background:#1b2c3b!important;border-color:#34495a!important} html[data-theme="dark"] #appShell .enterprise-alert.critical{background:#382a2d!important} html[data-theme="dark"] #appShell .enterprise-alert.clear{background:#1d342e!important} html[data-theme="dark"] #appShell .transaction-detail-empty{background:#213545!important;color:#c5d3de!important} html[data-theme="dark"] #appShell .transaction-detail-body dl>div{border-color:#304252!important} html[data-theme="dark"] #appShell .enterprise-count{background:#40351f!important;color:#f4d58a!important} /* Keep mobile navigation glyphs compact without shrinking their tap targets. Legacy span styling also matched the Storekeeper's separate label spans. */ #appShell #mobileBottomNav button>span[aria-hidden="true"]{display:inline-flex!important;align-items:center;justify-content:center;width:18px!important;height:18px!important;min-width:18px!important;flex:0 0 18px!important;font-size:18px!important;line-height:1!important} #appShell #mobileBottomNav button>span[aria-hidden="true"] .ui-icon{display:block;width:18px!important;height:18px!important;max-width:18px!important;max-height:18px!important} #appShell #mobileBottomNav button>span:not([aria-hidden="true"]){font-size:11px!important;line-height:1.2!important;min-width:0;max-width:100%;overflow-wrap:normal} /* Final dark-mode contrast layer for legacy pages and inline component styles. */ html[data-theme="dark"] #appShell .main .inventory-commandbar, html[data-theme="dark"] #appShell .main .inventory-filterbar, html[data-theme="dark"] #appShell .main .inventory-metric, html[data-theme="dark"] #appShell .main .inventory-empty, html[data-theme="dark"] #appShell .main .inventory-more>div, html[data-theme="dark"] #appShell .main .inventory-more>summary{background:#182938!important;background-image:none!important;border-color:#385064!important;color:#e8f0f6!important} html[data-theme="dark"] #appShell .main .inventory-command-copy strong, html[data-theme="dark"] #appShell .main .inventory-metric>strong, html[data-theme="dark"] #appShell .main .inventory-empty>b, html[data-theme="dark"] #appShell .main .inventory-summary b{color:#f4f8fb!important} html[data-theme="dark"] #appShell .main .inventory-command-copy small, html[data-theme="dark"] #appShell .main .inventory-metric>span, html[data-theme="dark"] #appShell .main .inventory-metric>small, html[data-theme="dark"] #appShell .main .inventory-empty p, html[data-theme="dark"] #appShell .main .inventory-summary{color:#b9c9d5!important} html[data-theme="dark"] #appShell .main .inventory-filterbar input, html[data-theme="dark"] #appShell .main .inventory-filterbar select{background:#10202d!important;border-color:#476176!important;color:#eff6fb!important;-webkit-text-fill-color:#eff6fb!important} html[data-theme="dark"] #appShell .main .inventory-filterbar input::placeholder{color:#aabccb!important;-webkit-text-fill-color:#aabccb!important} html[data-theme="dark"] #appShell .main .inventory-more>div button{color:#e5eef5!important} html[data-theme="dark"] #appShell .main .inventory-more>div button:hover{background:#284357!important} html[data-theme="dark"] #appShell .main .inventory-empty-icon{background:#263f52!important;color:#bcd8eb!important} html[data-theme="dark"] #appShell .main .inventory-metric.has-attention{background:#322c23!important;border-color:#655438!important} html[data-theme="dark"] #appShell .main .inventory-metric.has-attention>strong{color:#ffd38a!important} /* Dark mode must also override the higher-specificity mobile and legacy surface rules. */ :root[data-theme="dark"] #appShell #mobileBottomNav{background:#162736!important;background-image:none!important;border-color:#385064!important;box-shadow:0 -5px 18px rgba(0,0,0,.28)!important} :root[data-theme="dark"] #appShell #mobileBottomNav button{background:transparent!important;color:#b9c9d5!important} :root[data-theme="dark"] #appShell #mobileBottomNav button.active{background:#27445a!important;color:#f2f7fa!important} :root[data-theme="dark"] #appShell #mobileBottomNav button span{color:inherit!important} :root[data-theme="dark"] #appShell .main .inventory-more>div, :root[data-theme="dark"] #appShell .main .inventory-more>summary{background:#162938!important;background-image:none!important;border-color:#456176!important;color:#eef5fa!important} :root[data-theme="dark"] #appShell .main .toolbar, :root[data-theme="dark"] #appShell .main .settings-nav, :root[data-theme="dark"] #appShell .main .settings-panel, :root[data-theme="dark"] #appShell .main .transaction-stat, :root[data-theme="dark"] #appShell .main .quick-grid button, :root[data-theme="dark"] #appShell .main .work-shortcuts button, :root[data-theme="dark"] #appShell .main .enterprise-shortcuts, :root[data-theme="dark"] #appShell .main .enterprise-shortcut-grid button, :root[data-theme="dark"] #appShell .main .ceo-metrics-panel, :root[data-theme="dark"] #appShell .main .ceo-brief{background:#192a39!important;background-image:none!important;border-color:#385064!important;color:#dbe5ed!important} :root[data-theme="dark"] #appShell .main .toolbar :is(input,select), :root[data-theme="dark"] #appShell .main .field :is(input,select,textarea){background:#10202d!important;color:#edf5fa!important;border-color:#476176!important} :root[data-theme="dark"] #modal #modalBox .actions-sticky, :root[data-theme="dark"] #modal #modalBox .modal-actions{background:#192a39!important;border-color:#385064!important} :root[data-theme="dark"] #appShell .main .transaction-hero, :root[data-theme="dark"] #appShell .main .transaction-stat, :root[data-theme="dark"] #appShell .main .transaction-ledger, :root[data-theme="dark"] #appShell .main .transaction-insights, :root[data-theme="dark"] #appShell .main .transaction-detail{background:#192a39!important;background-image:none!important;border-color:#385064!important;color:#dbe5ed!important} :root[data-theme="dark"] #appShell .main .transaction-hero :is(h1,h2,h3,strong), :root[data-theme="dark"] #appShell .main .transaction-stat strong, :root[data-theme="dark"] #appShell .main .transaction-ledger :is(h1,h2,h3,strong), :root[data-theme="dark"] #appShell .main .transaction-insights :is(h1,h2,h3,strong), :root[data-theme="dark"] #appShell .main .transaction-detail :is(h1,h2,h3,strong){color:#f2f7fa!important} :root[data-theme="dark"] #appShell .main .transaction-hero :is(p,small,.muted), :root[data-theme="dark"] #appShell .main .transaction-stat :is(span,small,.muted), :root[data-theme="dark"] #appShell .main .transaction-ledger :is(p,small,.muted), :root[data-theme="dark"] #appShell .main .transaction-insights :is(p,small,.muted), :root[data-theme="dark"] #appShell .main .transaction-detail :is(p,small,.muted){color:#b9c9d5!important} /* Keep the full Kadex mark legible against either header palette. */ body.app-mode #appShell header.top button.brand-home .top-logo-frame{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 166px!important;width:166px!important;min-width:166px!important;max-width:166px!important;height:46px!important;overflow:hidden!important;padding:3px 6px!important;border:1px solid #d8e1e8!important;border-radius:8px!important;background:#fff!important;box-shadow:0 1px 4px rgba(10,28,44,.14)!important} body.app-mode #appShell header.top button.brand-home .top-logo-frame img{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;max-height:100%!important;object-fit:contain!important;transform:none!important;filter:none!important} @media(max-width:800px){ body.app-mode #appShell header.top button.brand-home .top-logo-frame{flex-basis:132px!important;width:132px!important;min-width:132px!important;max-width:132px!important;height:40px!important;padding:2px 4px!important;border-radius:7px!important} } /* Consistent required-field cues and accessible visually hidden descriptions. */ .req{color:#c5222a;font-weight:800;margin-left:3px} .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} #modal #modalBox input:required:focus,#modal #modalBox select:required:focus,#modal #modalBox textarea:required:focus{outline:3px solid rgba(37,99,235,.22);outline-offset:1px} #appShell .ceo-dashboard{display:grid;gap:16px;--dash-ink:#162b40;--dash-line:#e5eaf0} #appShell .ceo-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 27px;border-radius:18px;background:linear-gradient(115deg,#102a43,#1d4668);color:#fff;box-shadow:0 10px 26px #102a4318} #appShell .ceo-hero .role-eyebrow{color:#f2c94c!important;font-size:10px!important;font-weight:850;letter-spacing:.13em} #appShell .ceo-hero h1{margin:8px 0 5px;color:#fff;font-size:clamp(25px,3vw,34px);letter-spacing:-.04em} #appShell .ceo-hero p{margin:0;color:#d4e0eb;font-size:13px} #appShell .ceo-live{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #ffffff30;border-radius:999px;color:#e4edf5;font-size:11px;white-space:nowrap} #appShell .ceo-live span{width:8px;height:8px;border-radius:50%;background:#61d6a2;box-shadow:0 0 0 4px #61d6a220} #appShell .ceo-overview{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr);gap:15px;align-items:stretch} #appShell .ceo-metrics-panel,#appShell .ceo-brief{padding:18px!important;border:1px solid var(--dash-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:0 3px 14px #102a4308!important} #appShell .ceo-section-head,#appShell .ceo-panel .section-title{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:13px} #appShell .ceo-section-head h2,#appShell .ceo-panel h2{margin:4px 0;color:#18334c;font-size:17px} #appShell .ceo-section-head p{margin:4px 0 0;font-size:11px;line-height:1.45} #appShell .ceo-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px} #appShell .ceo-metrics .kpi{position:relative;min-height:106px;padding:13px!important;border:1px solid #e8edf2!important;border-radius:13px!important;border-top:1px solid #e8edf2!important;box-shadow:none!important} #appShell .ceo-metrics .kpi:before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:3px;border-radius:0 4px 4px 0;background:#d9a441} #appShell .ceo-metrics .kpi-label{font-size:10px;font-weight:750;color:#65768a} #appShell .ceo-metrics .metric{margin-top:8px;font-size:clamp(20px,2vw,27px)!important;color:#17334c!important;overflow-wrap:anywhere} #appShell .ceo-metrics .small{font-size:10px!important;line-height:1.4} #appShell .ceo-brief{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:22px!important;background:linear-gradient(145deg,#f7f9fb,#fff)!important} #appShell .ceo-brief-icon{display:grid;place-items:center;width:38px;height:38px;margin-bottom:13px;border-radius:12px;background:#fff3e2;color:#a85a0c;font-size:19px} #appShell .ceo-brief .eyebrow,#appShell .ceo-section-head .eyebrow{font-size:9px;font-weight:850;letter-spacing:.12em;color:#a1661c} #appShell .ceo-brief h2{margin:6px 0;color:#17334c;font-size:19px} #appShell .ceo-brief p{margin:4px 0 16px;color:#607286;font-size:12px;line-height:1.55} #appShell .ceo-brief-actions{display:flex;gap:8px;flex-wrap:wrap} #appShell .ceo-brief-foot{margin-top:15px;padding-top:12px;border-top:1px solid #e6ebf0;color:#8290a0;font-size:10px;line-height:1.4} #appShell .ceo-panels{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:15px} #appShell .ceo-panel{min-width:0;padding:18px!important;border:1px solid var(--dash-line)!important;border-radius:16px!important;box-shadow:0 3px 14px #102a4308!important} #appShell .ceo-project-row{margin:14px 0} #appShell .ceo-project-label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:7px;font-size:11px} #appShell .ceo-project-label strong{color:#263c51} #appShell .ceo-project-label span{color:#687b8f;font-variant-numeric:tabular-nums} #appShell .ceo-project-track,.work-track{height:8px;overflow:hidden;border-radius:99px;background:#edf1f5} #appShell .ceo-project-track span,.work-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d71920,#f2c94c)} #appShell .ceo-signal-list{display:grid;gap:8px} #appShell .ceo-signal-list>div{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px;border:1px solid #e9edf1;border-radius:11px;background:#fbfcfd} #appShell .ceo-signal-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;font-weight:850} #appShell .ceo-signal-mark.danger{background:#fff0ef;color:#bf3026} #appShell .ceo-signal-mark.warning{background:#fff5e6;color:#a5660b} #appShell .ceo-signal-mark.neutral{background:#eef3f7;color:#46627a} #appShell .ceo-signal-list b,#appShell .ceo-signal-list small{display:block} #appShell .ceo-signal-list b{font-size:11px;color:#273d52} #appShell .ceo-signal-list small{margin-top:3px;font-size:10px;color:#8290a0} #appShell .ceo-signal-list>div>strong{font-size:19px;color:#18334c;font-variant-numeric:tabular-nums} #appShell .ceo-activity-chart{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;align-items:end;min-height:155px;padding:8px 4px 0} #appShell .ceo-activity-day{display:grid;grid-template-rows:20px 1fr 20px;justify-items:center;align-items:end;gap:6px;height:140px} #appShell .ceo-activity-count{font-size:10px;color:#65768a;font-variant-numeric:tabular-nums} #appShell .ceo-bar-track{display:flex;align-items:flex-end;width:min(34px,80%);height:100%;overflow:hidden;border-radius:8px 8px 3px 3px;background:#f0f3f6} #appShell .ceo-bar-track span{display:block;width:100%;min-height:3px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,#d71920,#f2c94c)} #appShell .ceo-activity-day small{font-size:10px;color:#718196} #appShell .ceo-clear{display:flex;align-items:center;gap:11px;padding:15px;border:1px dashed #d7e1e8;border-radius:11px;background:#fafcfd} #appShell .ceo-clear>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e8f7ef;color:#087f5b;font-weight:900} #appShell .ceo-clear b,#appShell .ceo-clear small{display:block} #appShell .ceo-clear b{font-size:12px;color:#24445d} #appShell .ceo-clear small{margin-top:3px;color:#718196;font-size:10px} #appShell .work-dashboard{display:grid;gap:15px} #appShell .work-welcome{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;border-radius:17px;background:linear-gradient(115deg,#102a43,#1d4668);color:#fff} #appShell .work-welcome .role-eyebrow{color:#f2c94c!important;font-size:9px!important;font-weight:850;letter-spacing:.12em} #appShell .work-welcome h1{margin:7px 0 4px;color:#fff;font-size:clamp(23px,2.5vw,30px);letter-spacing:-.035em} #appShell .work-welcome p{margin:0;color:#d4e0eb;font-size:12px;line-height:1.5} #appShell .work-welcome-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} #appShell .work-welcome .secondary{color:#fff!important;background:#ffffff12!important;border:1px solid #ffffff35!important} #appShell .work-title{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 2px} #appShell .work-title .eyebrow{color:#a1661c;font-size:9px;font-weight:850;letter-spacing:.12em} #appShell .work-title p{margin:3px 0 0;color:#718196;font-size:11px} #appShell .work-avatar,#appShell .work-profile-avatar{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#fff1df;color:#975e17;font-size:15px;font-weight:850} #appShell .work-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px} #appShell .work-metrics .kpi{min-height:112px;padding:15px!important;border:1px solid #e5eaf0!important;border-radius:14px!important;border-top:1px solid #e5eaf0!important;box-shadow:0 3px 14px #102a4308!important} #appShell .work-metrics .kpi-label{font-size:10px;font-weight:750;color:#718196} #appShell .work-metrics .metric{margin-top:8px;font-size:clamp(21px,2vw,28px)!important;color:#17334c!important} #appShell .work-metrics .small{font-size:10px!important;line-height:1.4} #appShell .work-columns{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(245px,.65fr);gap:14px;align-items:start} #appShell .work-panel,#appShell .work-profile{min-width:0;padding:18px!important;border:1px solid #e5eaf0!important;border-radius:15px!important;box-shadow:0 3px 14px #102a4308!important} #appShell .work-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:13px} #appShell .work-panel-head .eyebrow{color:#a1661c;font-size:9px;font-weight:850;letter-spacing:.12em} #appShell .work-panel-head h2{margin:4px 0;color:#17334c;font-size:16px} #appShell .work-panel-head p{max-width:620px;margin:3px 0 0;font-size:10px;line-height:1.45} #appShell .work-project{margin:15px 0} #appShell .work-project>div:first-child{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;font-size:11px} #appShell .work-project b{color:#243b50} #appShell .work-project>div:first-child span{color:#718196;font-variant-numeric:tabular-nums} #appShell .work-track{height:7px} #appShell .work-project-foot{margin-top:14px;padding-top:11px;border-top:1px solid #edf0f4;color:#718196;font-size:10px} #appShell .work-alert-text{color:#b42318;font-weight:800} #appShell .work-profile{display:flex;flex-direction:column;align-items:center;text-align:center;padding:21px!important;background:linear-gradient(145deg,#f7f9fb,#fff)!important} #appShell .work-profile-avatar{width:58px;height:58px;flex-basis:58px;margin:0 auto 10px;border:4px solid #fff;box-shadow:0 2px 10px #102a4315;font-size:18px} #appShell .work-profile h2{margin:0;color:#17334c;font-size:15px;overflow-wrap:anywhere} #appShell .work-profile>p{margin:4px 0;color:#718196;font-size:10px} #appShell .work-profile-stats{display:grid;grid-template-columns:1fr 1fr;width:100%;margin:13px 0;border-top:1px solid #e7ebf0;border-bottom:1px solid #e7ebf0} #appShell .work-profile-stats span{padding:11px 5px;color:#718196;font-size:9px} #appShell .work-profile-stats span+span{border-left:1px solid #e7ebf0} #appShell .work-profile-stats b{display:block;margin-bottom:3px;color:#17334c;font-size:18px} #appShell .work-profile-note{margin:0 0 13px;color:#607286;font-size:10px;line-height:1.5} #appShell .work-profile button{width:100%;margin-top:auto} #appShell .work-task-list{display:grid} #appShell .work-task-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 2px;border-top:1px solid #edf0f4} #appShell .work-task-mark{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#eef2f6;color:#50667b;font-weight:800} #appShell .work-task-mark.in_progress{background:#e8f1ff;color:#2459a8} #appShell .work-task-mark.blocked{background:#fff0e7;color:#a34c10} #appShell .work-task-mark.done{background:#e6f7ed;color:#18794e} #appShell .work-task-copy{display:grid;gap:4px;min-width:0} #appShell .work-task-copy b{overflow:hidden;color:#233a50;font-size:11px;text-overflow:ellipsis;white-space:nowrap} #appShell .work-task-copy small{color:#718196;font-size:9px} #appShell .work-task-row .v34-status{font-size:9px;white-space:nowrap} #appShell .work-empty{display:grid;gap:5px;padding:17px;border:1px dashed #d9e1e8;border-radius:11px;background:#fafcfd} #appShell .work-empty b{color:#24445d;font-size:12px} #appShell .work-empty span{color:#718196;font-size:10px;line-height:1.45} #appShell .work-stock-list{display:grid} #appShell .work-stock-list>div{display:grid;grid-template-columns:9px minmax(0,1fr) minmax(80px,auto) auto;gap:9px;align-items:center;padding:10px 2px;border-top:1px solid #edf0f4} #appShell .work-stock-list b{overflow:hidden;color:#263d52;font-size:10px;text-overflow:ellipsis;white-space:nowrap} #appShell .work-stock-list small{color:#718196;font-size:9px} #appShell .work-stock-indicator{width:8px;height:8px;border-radius:50%;background:#e5a52e} #appShell .work-stock-indicator.danger{background:#d92d20} #appShell .work-stock-list .v34-status{font-size:8px;white-space:nowrap} #appShell .work-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} #appShell .work-shortcuts button{position:relative;display:grid;gap:5px;min-width:0;padding:14px 36px 14px 15px;border:1px solid #e5eaf0;border-radius:13px;background:#fff;text-align:left} #appShell .work-shortcuts button:hover{border-color:#c8d5e1;box-shadow:0 8px 22px #102a4310} #appShell .work-shortcuts b{color:#243b50;font-size:11px} #appShell .work-shortcuts small{color:#718196;font-size:9px;line-height:1.4} #appShell .work-shortcuts button>span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#a1661c;font-weight:850} @media(max-width:1000px){#appShell .ceo-overview{grid-template-columns:minmax(0,1fr) minmax(250px,.8fr)}#appShell .ceo-panels{grid-template-columns:minmax(0,1fr)}#appShell .work-columns{grid-template-columns:minmax(0,1fr) 260px}} @media(max-width:800px){#appShell .ceo-hero,#appShell .work-welcome{align-items:flex-start;flex-direction:column;padding:18px!important}#appShell .ceo-live{align-self:flex-start}#appShell .ceo-overview,#appShell .ceo-panels,#appShell .work-columns{grid-template-columns:minmax(0,1fr)}#appShell .ceo-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#appShell .ceo-metrics .kpi{min-height:98px;padding:12px!important}#appShell .ceo-panel,#appShell .ceo-metrics-panel,#appShell .ceo-brief,#appShell .work-panel,#appShell .work-profile{padding:14px!important}#appShell .ceo-section-head,#appShell .work-panel-head{align-items:flex-start}#appShell .ceo-section-head>.secondary,#appShell .work-panel-head>.secondary{flex:0 0 auto;padding:8px;font-size:10px}#appShell .ceo-activity-chart{min-height:140px;gap:5px}#appShell .ceo-activity-day{height:125px}#appShell .work-welcome-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#appShell .work-welcome-actions button{min-width:0;width:100%}#appShell .work-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#appShell .work-metrics .kpi{min-height:100px;padding:12px!important}#appShell .work-shortcuts{grid-template-columns:minmax(0,1fr)}#appShell .work-shortcuts button{min-height:65px}#appShell .work-task-row{grid-template-columns:26px minmax(0,1fr);gap:8px}#appShell .work-task-row .v34-status{grid-column:2;justify-self:start}#appShell .work-task-copy b{white-space:normal}#appShell .work-stock-list>div{grid-template-columns:9px minmax(0,1fr) auto;gap:7px}#appShell .work-stock-list small{grid-column:2}#appShell .work-stock-list .v34-status{grid-column:3;grid-row:1/3}} @media(max-width:380px){#appShell .ceo-metrics{grid-template-columns:minmax(0,1fr)}#appShell .work-welcome-actions{grid-template-columns:minmax(0,1fr)}#appShell .work-metrics{grid-template-columns:minmax(0,1fr)}} /* Consistent premium workspace treatment across legacy and role-specific pages. */ #appShell .main{background:linear-gradient(180deg,#f7f9fc 0%,#f3f6f9 100%)} #appShell .page-head{padding:4px 2px 16px;border-bottom:1px solid #e3e9ef;margin-bottom:18px} #appShell .page-head h1{color:#142d43;letter-spacing:-.035em} #appShell .page-head .muted{margin-top:5px;color:#687b8f;font-size:12px} #appShell .nav-group{margin-bottom:16px!important} #appShell .nav-group-title{padding:14px 12px 7px!important;color:#8fa6bb!important;font-size:9px!important;letter-spacing:.15em!important} #appShell #nav button{min-height:40px;margin:2px 0!important;padding:9px 11px!important;border:1px solid transparent!important;border-radius:10px!important;transition:background .16s ease,border-color .16s ease,transform .16s ease!important} #appShell #nav button:hover{transform:translateX(2px);background:rgba(255,255,255,.075)!important;border-color:rgba(255,255,255,.07)!important} #appShell #nav button.active{background:linear-gradient(100deg,rgba(227,27,35,.2),rgba(255,255,255,.075))!important;border-color:rgba(255,255,255,.1)!important;box-shadow:inset 3px 0 #d9a441!important} #appShell #nav button .nav-icon{flex:0 0 24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,.055);font-size:13px} #appShell #nav button.active .nav-icon{background:rgba(217,164,65,.16);color:#f2c94c!important} #appShell .card{border-color:#e2e8ef;border-radius:15px;box-shadow:0 3px 14px rgba(16,42,67,.045)} #appShell .card h2,#appShell .card h3{color:#19364f;letter-spacing:-.02em} #appShell .toolbar{gap:9px;padding:10px;margin:0 0 13px;border:1px solid #e3e9ef;border-radius:13px;background:rgba(255,255,255,.82)} #appShell .toolbar input,#appShell .toolbar select,#appShell .field input,#appShell .field select,#appShell .field textarea{border:1px solid #d8e0e8;border-radius:9px;background:#fff;box-shadow:0 1px 2px rgba(16,42,67,.025);color:#243b50} #appShell .toolbar input:focus,#appShell .toolbar select:focus,#appShell .field input:focus,#appShell .field select:focus,#appShell .field textarea:focus{border-color:#6d91ad;outline:3px solid rgba(37,91,133,.12)} #appShell button.primary,#appShell button.secondary,#appShell button.danger{min-height:40px;border-radius:9px;font-weight:700;transition:transform .15s ease,box-shadow .15s ease,background .15s ease} #appShell button.primary:hover,#appShell button.secondary:hover,#appShell button.danger:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(16,42,67,.11)} #appShell .tablewrap{border:1px solid #e2e8ef;border-radius:13px;background:#fff;box-shadow:0 2px 10px rgba(16,42,67,.03)} #appShell table thead th{position:sticky;top:0;background:#f5f8fa;color:#61768a;border-bottom:1px solid #e0e7ed} #appShell table tbody tr:hover{background:#f8fafc} #appShell .settings-layout{grid-template-columns:215px minmax(0,1fr);gap:14px;margin-top:16px} #appShell .settings-nav{position:sticky;top:12px;padding:9px;border-color:#e1e8ef;border-radius:14px;background:#fff;box-shadow:0 3px 14px #102a4308} #appShell .settings-nav button{min-height:42px;border-radius:9px;color:#53677a;font-size:12px} #appShell .settings-nav button:hover{background:#f5f8fa;color:#203c53} #appShell .settings-nav button.active{background:#edf3f8;color:#173f63;box-shadow:inset 3px 0 #d9a441;font-weight:750} #appShell .settings-panel{min-width:0;border-color:#e1e8ef;border-radius:15px;box-shadow:0 3px 14px #102a4308} #appShell .settings-panel>h2{color:#17334c;font-size:20px;letter-spacing:-.025em} #appShell .settings-panel>.muted{max-width:720px;line-height:1.55} #appShell .settings-panel .setting-row{align-items:center;gap:16px;padding:17px 2px} #appShell .settings-panel .setting-row strong{display:inline-flex;align-items:center;gap:8px;color:#273f54} #appShell .settings-panel .setting-value{margin-top:7px;color:#173f63;font-size:13px;font-weight:700;overflow-wrap:anywhere} #appShell .settings-guidance{padding:17px;border:1px solid #e4eaf0;border-radius:12px;background:linear-gradient(135deg,#f7f9fb,#fff)} #appShell .settings-guidance h3{margin:4px 0 8px} #appShell .settings-guidance p{max-width:720px;line-height:1.6} #appShell .required-setup{background:linear-gradient(135deg,#fff,#f7f9fb)} #appShell .command-hero{border:1px solid rgba(255,255,255,.08);box-shadow:0 15px 36px #102a4326} #appShell .command-grid .command-panel{background:linear-gradient(180deg,#fff,#fcfdfe)} #appShell .command-panel .section-title{padding-bottom:12px;border-bottom:1px solid #edf0f4} #appShell .transaction-page{display:grid;gap:15px} #appShell .transaction-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:23px 25px;border:1px solid #e2e8ef;border-radius:16px;background:radial-gradient(circle at 90% 0%,#f7e9cc88,transparent 28%),linear-gradient(115deg,#fff,#f6f8fa);box-shadow:0 4px 18px #102a430a} #appShell .transaction-hero .eyebrow{color:#a1661c} #appShell .transaction-hero h2{margin:6px 0;color:#17334c;font-size:21px;letter-spacing:-.025em} #appShell .transaction-hero p{max-width:620px;margin:0;color:#687b8f;font-size:12px;line-height:1.55} #appShell .transaction-actions{display:flex;gap:8px;flex-wrap:wrap} #appShell .transaction-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} #appShell .transaction-stat{display:grid;gap:7px;min-height:106px;padding:15px;border:1px solid #e2e8ef;border-radius:13px;background:#fff;box-shadow:0 3px 12px #102a4308} #appShell .transaction-stat span{color:#64788b;font-size:11px;font-weight:750} #appShell .transaction-stat strong{color:#17334c;font-size:27px;line-height:1.1;font-variant-numeric:tabular-nums} #appShell .transaction-stat small{color:#8290a0;font-size:10px} #appShell .transaction-ledger{padding:18px!important} #appShell .transaction-ledger-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px} #appShell .transaction-ledger-head .eyebrow{color:#a1661c} #appShell .transaction-ledger-head h2{margin:4px 0;color:#17334c;font-size:18px} #appShell .transaction-ledger-head p{margin:4px 0 0;font-size:11px} #appShell .transaction-live{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #e5eaf0;border-radius:999px;color:#607286;font-size:10px;font-weight:700;white-space:nowrap} #appShell .transaction-live i{width:7px;height:7px;border-radius:50%;background:#36a875;box-shadow:0 0 0 3px #36a8751c} #appShell .transaction-filters{grid-template-columns:minmax(200px,1.5fr) repeat(2,minmax(145px,1fr)) auto;margin-bottom:12px} @media(max-width:950px){#appShell .transaction-filters{grid-template-columns:repeat(2,minmax(0,1fr))}#appShell .transaction-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:800px){#appShell .settings-layout{grid-template-columns:minmax(0,1fr)!important}#appShell .settings-nav{position:relative;top:auto;display:flex;overflow-x:auto;max-width:100%;gap:5px}#appShell .settings-nav button{flex:0 0 auto;width:auto;white-space:nowrap}#appShell .settings-panel{padding:16px!important}#appShell .transaction-hero{align-items:flex-start;flex-direction:column;padding:18px!important}#appShell .transaction-actions{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}#appShell .transaction-actions button{width:100%;min-width:0}#appShell .transaction-ledger{padding:13px!important}#appShell .transaction-filters{grid-template-columns:minmax(0,1fr)!important;padding:9px}#appShell .transaction-ledger-head{align-items:flex-start}#appShell .transaction-stat{min-height:96px;padding:12px}} @media(max-width:380px){#appShell .transaction-metrics{grid-template-columns:minmax(0,1fr)}#appShell .transaction-actions{grid-template-columns:minmax(0,1fr)}} /* Keep the navigation frame and search anchored; scroll only the menu list. */ @media(min-width:801px){#appShell aside#side{display:flex!important;flex-direction:column!important;overflow:hidden!important}#appShell #nav{flex:1 1 auto!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;scrollbar-width:thin}#appShell .ui-menu-search{flex:0 0 auto!important}#appShell .mobile-drawer-account{flex:0 0 auto!important}} /* Clean mobile-first admin and operations dashboards. */ #appShell .brand-home{display:flex!important;align-items:center;gap:10px;padding:0!important;border:0!important;background:transparent!important;color:inherit!important;text-align:left!important;box-shadow:none!important;cursor:pointer} #appShell .brand-home:hover{transform:none!important;box-shadow:none!important;opacity:.92} #appShell .top{position:sticky!important;top:0!important;align-self:stretch!important;transform:none!important;z-index:210!important} #appShell .enterprise-dashboard{display:grid;gap:14px;--enterprise-ink:#172f45;--enterprise-muted:#728195;--enterprise-line:#e4eaf0} #appShell .enterprise-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;border:1px solid #e1e8ef;border-radius:16px;background:linear-gradient(105deg,#fff 0%,#f8fafc 70%,#f5f8fb 100%);box-shadow:0 4px 18px #102a4309} #appShell .enterprise-greeting .eyebrow,#appShell .enterprise-panel .eyebrow{color:#8d6822;font-size:9px;font-weight:850;letter-spacing:.13em} #appShell .enterprise-greeting h1{margin:6px 0;color:var(--enterprise-ink);font-size:clamp(22px,2.6vw,30px);letter-spacing:-.04em} #appShell .enterprise-greeting h1 span{font-size:.75em;color:#ba8c3d} #appShell .enterprise-greeting p{margin:0;color:var(--enterprise-muted);font-size:11px;line-height:1.5} #appShell .enterprise-hero-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} #appShell .enterprise-hero-actions button{min-height:40px;white-space:nowrap} #appShell .enterprise-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px} #appShell .enterprise-kpis .kpi{min-width:0;min-height:104px;padding:14px!important;border:1px solid var(--enterprise-line)!important;border-radius:13px!important;box-shadow:0 3px 12px #102a4307!important} #appShell .enterprise-kpis .kpi-label{color:#687b8f;font-size:10px;font-weight:750} #appShell .enterprise-kpis .metric{margin-top:7px;color:var(--enterprise-ink)!important;font-size:clamp(19px,2vw,25px)!important;overflow-wrap:anywhere} #appShell .enterprise-kpis .small{margin-top:5px!important;color:#8592a1!important;font-size:9px!important;line-height:1.4} #appShell .enterprise-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(270px,.8fr);gap:12px;align-items:start} #appShell .enterprise-lower{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)} #appShell .enterprise-panel{min-width:0;padding:16px!important;border:1px solid var(--enterprise-line)!important;border-radius:14px!important;box-shadow:0 3px 13px #102a4307!important} #appShell .enterprise-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px} #appShell .enterprise-panel-head h2{margin:4px 0;color:#1d354a;font-size:15px;letter-spacing:-.02em} #appShell .enterprise-panel-head p{margin:3px 0 0;font-size:10px;line-height:1.45} #appShell .enterprise-panel-head>.secondary{flex:0 0 auto;min-height:34px;padding:7px 10px;font-size:10px} #appShell .enterprise-project{padding:11px 0;border-top:1px solid #edf0f4} #appShell .enterprise-project-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} #appShell .enterprise-project-top>span{display:grid;gap:3px;min-width:0} #appShell .enterprise-project-top b{color:#283e52;font-size:11px} #appShell .enterprise-project-top small,.enterprise-project-foot{color:#8491a0;font-size:9px} #appShell .enterprise-project-top strong{color:#193b58;font-size:10px;white-space:nowrap} #appShell .enterprise-project-track{height:5px;margin-top:8px;overflow:hidden;border-radius:99px;background:#edf1f4} #appShell .enterprise-project-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2367ce,#61a6ee)} #appShell .enterprise-project-foot{display:flex;justify-content:space-between;gap:10px;margin-top:5px} #appShell .enterprise-count{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:10px;background:#fff4e6;color:#9a6112;font-size:12px;font-weight:850} #appShell .enterprise-alert-list{display:grid;gap:7px} #appShell .enterprise-alert{display:grid;gap:3px;padding:9px 10px;border:1px solid #e9edf1;border-left:3px solid #d3a54c;border-radius:9px;background:#fcfdfe} #appShell .enterprise-alert b{color:#30465b;font-size:10px} #appShell .enterprise-alert span{color:#8190a0;font-size:9px;line-height:1.4} #appShell .enterprise-alert.critical{border-left-color:#d84949;background:#fffafa} #appShell .enterprise-alert.clear{border-left-color:#4ba47b;background:#f9fdfb} #appShell .enterprise-alert.neutral{border-left-color:#8c9bae} #appShell .enterprise-full-button{width:100%;margin-top:10px;text-align:left;font-size:10px} #appShell .enterprise-chart{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:end;height:137px;padding:8px 0 0} #appShell .enterprise-chart>div{display:grid;grid-template-rows:14px 1fr 15px;justify-items:center;gap:5px;height:100%} #appShell .enterprise-chart b{color:#758599;font-size:9px} #appShell .enterprise-chart small{color:#8592a1;font-size:9px} #appShell .enterprise-chart-bar{display:flex;align-items:flex-end;width:25px;height:100%;overflow:hidden;border-radius:7px 7px 2px 2px;background:#f0f3f6} #appShell .enterprise-chart-bar i{display:block;width:100%;min-height:3px;border-radius:inherit;background:linear-gradient(180deg,#3880df,#85b7f0)} #appShell .enterprise-shortcuts{padding:15px;border:1px solid var(--enterprise-line);border-radius:14px;background:#fff} #appShell .enterprise-shortcut-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px} #appShell .enterprise-shortcut-grid button{display:grid;grid-template-columns:27px minmax(0,1fr) 12px;gap:8px;align-items:center;min-width:0;min-height:60px;padding:9px;border:1px solid #e8edf2;border-radius:10px;background:#fff;text-align:left} #appShell .enterprise-shortcut-grid button:hover{border-color:#c6d6e4;background:#fbfcfd} #appShell .enterprise-shortcut-grid button>i{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:#f0f5fb;color:#2d638f;font-style:normal;font-size:13px} #appShell .enterprise-shortcut-grid button>span{display:grid;gap:3px;min-width:0} #appShell .enterprise-shortcut-grid b{overflow:hidden;color:#2b4054;font-size:9px;text-overflow:ellipsis;white-space:nowrap} #appShell .enterprise-shortcut-grid small{color:#8290a0;font-size:8px;line-height:1.35} #appShell .enterprise-shortcut-grid button>strong{color:#8290a0;font-size:11px} #appShell .enterprise-footnote{margin:0;color:#8995a3;font-size:9px;line-height:1.4} #appShell .enterprise-empty{display:grid;gap:4px;padding:15px;border:1px dashed #d9e2e9;border-radius:10px;background:#fafcfd} #appShell .enterprise-empty b{color:#30475c;font-size:11px} #appShell .enterprise-empty span{color:#8190a0;font-size:9px} #appShell .transaction-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:12px;align-items:start} #appShell .transaction-rail{display:grid;gap:12px;min-width:0} #appShell .transaction-insights,#appShell .transaction-detail{padding:15px!important} #appShell .transaction-type-row{margin:10px 0} #appShell .transaction-type-row>div:first-child{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px;color:#687b8f;font-size:10px} #appShell .transaction-type-row b{color:#1f3c56} #appShell .transaction-type-track{height:6px;overflow:hidden;border-radius:99px;background:#eef2f5} #appShell .transaction-type-track i{display:block;height:100%;border-radius:inherit;background:#477fbe} #appShell .transaction-detail-id{margin-bottom:12px;padding:9px 10px;border-radius:8px;background:#122638;color:#f2f6fa;font-size:11px;font-weight:750;overflow-wrap:anywhere} #appShell .transaction-detail-body dl{display:grid;gap:0;margin:0} #appShell .transaction-detail-body dl>div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #edf0f4} #appShell .transaction-detail-body dt{color:#8491a0;font-size:9px} #appShell .transaction-detail-body dd{margin:0;color:#2c4357;font-size:9px;font-weight:700;text-align:right;overflow-wrap:anywhere} #appShell .transaction-detail-empty{padding:14px;border-radius:9px;background:#f7f9fb;color:#8491a0;font-size:10px;line-height:1.5} #appShell .transaction-layout .transaction-ledger{padding:15px!important} #appShell .transaction-layout .transaction-filters{grid-template-columns:minmax(150px,1.4fr) repeat(2,minmax(110px,.8fr)) auto} #appShell .transaction-layout table{min-width:780px} #appShell .transaction-layout td,#appShell .transaction-layout th{padding:10px 11px;font-size:10px} #appShell .transaction-layout td.action-cell{min-width:74px;padding:7px} @media(max-width:1100px){#appShell .enterprise-shortcut-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#appShell .enterprise-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:800px){#appShell .top{position:sticky!important;top:0!important;min-height:64px!important;height:64px!important;z-index:210!important}#appShell .brand-home{gap:7px}#appShell .brand-home .brand-label{font-size:9px;letter-spacing:.05em}#appShell .enterprise-dashboard{gap:10px}#appShell .enterprise-hero{display:grid;gap:12px;padding:15px!important;border-radius:13px}#appShell .enterprise-greeting h1{font-size:21px}#appShell .enterprise-greeting p{font-size:10px}#appShell .enterprise-hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}#appShell .enterprise-hero-actions button{width:100%;min-width:0;padding:8px;font-size:10px;white-space:normal}#appShell .enterprise-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}#appShell .enterprise-kpis .kpi{min-height:86px;padding:10px!important}#appShell .enterprise-kpis .kpi-label{font-size:9px}#appShell .enterprise-kpis .metric{font-size:19px!important}#appShell .enterprise-kpis .small{font-size:8px!important}#appShell .enterprise-grid,#appShell .enterprise-lower{grid-template-columns:minmax(0,1fr);gap:9px}#appShell .enterprise-panel{padding:12px!important}#appShell .enterprise-panel-head{margin-bottom:9px}#appShell .enterprise-panel-head h2{font-size:14px}#appShell .enterprise-shortcuts{padding:12px}#appShell .enterprise-shortcut-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}#appShell .enterprise-shortcut-grid button{min-height:56px;padding:8px;grid-template-columns:25px minmax(0,1fr) 10px}#appShell .enterprise-shortcut-grid button>i{width:25px;height:25px}#appShell .enterprise-shortcut-grid b{font-size:9px}#appShell .enterprise-shortcut-grid small{font-size:8px}#appShell .enterprise-chart{height:115px}#appShell .transaction-layout{grid-template-columns:minmax(0,1fr)}#appShell .transaction-rail{grid-template-columns:repeat(2,minmax(0,1fr))}#appShell .transaction-layout .transaction-filters{grid-template-columns:minmax(0,1fr)!important}#appShell .transaction-layout .transaction-ledger{padding:11px!important}#appShell .transaction-layout .transaction-ledger-head{display:grid}#appShell .transaction-layout .transaction-live{justify-self:start}} @media(max-width:420px){#appShell .enterprise-shortcut-grid{grid-template-columns:minmax(0,1fr)}#appShell .enterprise-hero-actions{grid-template-columns:minmax(0,1fr)}#appShell .transaction-rail{grid-template-columns:minmax(0,1fr)}} /* Trim the logo emblem from the header while preserving its wordmark. */ #appShell .brand-home .top-logo-frame{display:block!important;width:105px!important;min-width:105px!important;max-width:105px!important;height:34px!important;overflow:hidden!important} #appShell .brand-home .top-logo-frame img{display:block!important;width:164px!important;min-width:164px!important;max-width:none!important;height:auto!important;transform:none!important} /* Sidebar groups read as short, distinct sections on both pointer and touch layouts. */ #appShell #nav .nav-group{padding:0 0 8px;margin:0 0 8px!important;border-bottom:1px solid rgba(226,235,243,.08)} #appShell #nav .nav-group:last-child{border-bottom:0;margin-bottom:0!important} #appShell #nav .nav-group-title{padding-top:11px!important} @media(max-width:800px){#appShell .top{position:sticky!important;top:0!important;transform:translateY(0)!important}#appShell .main{scroll-padding-top:72px}#appShell .enterprise-footnote{font-size:8px}#appShell .transaction-type-row{margin:8px 0}#appShell .transaction-detail-body dl>div{padding:7px 0}} /* The brand bar stays attached to the viewport even when the page scrolls. */ @media(min-width:801px){#appShell .top{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;transform:none!important}#appShell .shell{margin-top:72px!important}} @media(max-width:800px){body.app-mode #appShell{box-sizing:border-box!important;padding-top:64px!important}#appShell .top{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;transform:none!important}} /* Inventory is organized around the next stock action and a readable ledger. */ #appShell .inventory-commandbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:16px 0 12px;padding:18px 20px;border:1px solid #e3eaf0;border-radius:16px;background:linear-gradient(105deg,#fff,#f7fafc);box-shadow:0 5px 18px #102a4308} #appShell .inventory-command-copy{display:grid;gap:5px;min-width:0} #appShell .inventory-command-copy .eyebrow{color:#8d6822;font-size:10px;font-weight:850;letter-spacing:.12em} #appShell .inventory-command-copy strong{color:#172f45;font-size:18px;letter-spacing:-.02em} #appShell .inventory-command-copy small{color:#728195;font-size:13px;line-height:1.45} #appShell .inventory-command-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap} #appShell .inventory-command-actions>button,#appShell .inventory-more>summary{min-height:42px;padding:10px 15px;border-radius:11px;font-size:13px;font-weight:750} #appShell .inventory-command-actions>button span{margin-right:4px;font-size:16px} #appShell .inventory-more{position:relative} #appShell .inventory-more>summary{display:flex;align-items:center;gap:8px;border:1px solid #dce4ec;background:white;color:#2b4055;cursor:pointer;list-style:none;white-space:nowrap} #appShell .inventory-more>summary::-webkit-details-marker{display:none} #appShell .inventory-more>summary:after{content:'⌄';font-size:15px;color:#728195} #appShell .inventory-more[open]>summary{border-color:#9eb5cc} #appShell .inventory-more>div{position:absolute;top:calc(100% + 7px);right:0;z-index:40;display:grid;min-width:235px;padding:6px;border:1px solid #dce4ec;border-radius:12px;background:#fff;box-shadow:0 12px 30px #102a4322} #appShell .inventory-more>div button{padding:11px 12px;border:0;border-radius:8px;background:transparent;color:#273a4d;text-align:left;font-size:13px;font-weight:650} #appShell .inventory-more>div button:hover{background:#f0f5fa} #appShell .inventory-filterbar{display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(150px,1fr) minmax(160px,1fr) auto;gap:9px;align-items:center;padding:11px;border:1px solid #e5eaf0;border-radius:14px;background:#fff} #appShell .inventory-filterbar label{min-width:0} #appShell .inventory-filterbar input,#appShell .inventory-filterbar select{box-sizing:border-box;width:100%;min-width:0;height:43px;padding:0 12px;border:1px solid #dbe3eb;border-radius:10px;background:#fbfcfd;color:#263b50;font-size:13px} #appShell .inventory-search{position:relative} #appShell .inventory-search>span:not(.sr-only){position:absolute;left:12px;top:6px;color:#7d8da0;font-size:23px;pointer-events:none} #appShell .inventory-search input{padding-left:38px} #appShell .inventory-filterbar>button{min-height:42px;white-space:nowrap} #appShell .inventory-summary{display:flex;justify-content:space-between;gap:12px;margin:14px 2px 9px;color:#6c7d8f;font-size:12px} #appShell .inventory-summary b{color:#32485e} #appShell .inventory-attention-count{color:#b54708!important} #appShell .inventory-clear-count{color:#18805b!important} #appShell .inventory-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:0 0 14px} #appShell .inventory-metric{display:grid;gap:5px;min-width:0;padding:15px 17px;border:1px solid #e3eaf0;border-radius:14px;background:#fff;box-shadow:0 3px 12px #102a4307} #appShell .inventory-metric>span{color:#65788b;font-size:13px;font-weight:650} #appShell .inventory-metric>strong{color:#172f45;font-size:25px;line-height:1.2;letter-spacing:-.03em;overflow-wrap:anywhere} #appShell .inventory-metric>small{color:#8794a2;font-size:11px;line-height:1.4} #appShell .inventory-metric.has-attention{border-color:#f0d6b9;background:#fffdfa} #appShell .inventory-metric.has-attention>strong{color:#b54708} #appShell .inventory-empty{display:grid;justify-items:center;gap:9px;margin-top:10px;padding:44px 22px;border:1px dashed #ccd7e2;border-radius:16px;background:linear-gradient(140deg,#fff,#f8fafc);text-align:center} #appShell .inventory-empty-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#edf4fa;color:#346087;font-size:22px} #appShell .inventory-empty b{color:#233b51;font-size:17px} #appShell .inventory-empty p{max-width:520px;margin:0;color:#728195;font-size:13px;line-height:1.6} #appShell .inventory-empty button{margin-top:5px} #appShell .inventory-filterbar .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} #appShell .enterprise-panel-head h2{font-size:19px!important} #appShell .enterprise-panel-head p{font-size:13px!important;line-height:1.5!important} #appShell .enterprise-greeting .eyebrow,#appShell .enterprise-panel .eyebrow{font-size:11px!important} #appShell .enterprise-project-top b{font-size:15px!important} #appShell .enterprise-project-top small,#appShell .enterprise-project-foot{font-size:12px!important} #appShell .enterprise-project-top strong{font-size:14px!important} #appShell .enterprise-alert b{font-size:14px!important} #appShell .enterprise-alert span{font-size:12px!important;line-height:1.45} #appShell .enterprise-kpis .kpi-label{font-size:12px!important} #appShell .enterprise-kpis .small{font-size:11px!important} #appShell .enterprise-chart>div>b,#appShell .enterprise-chart>div>small{font-size:11px!important} #appShell .enterprise-shortcut-grid b{font-size:13px!important} #appShell .enterprise-shortcut-grid small{font-size:11px!important} #appShell .enterprise-dashboard .tablewrap th,#appShell .enterprise-dashboard .tablewrap td{font-size:12px!important} @media(max-width:800px){ #appShell .top>div:first-child{flex:0 0 auto;min-width:0} #appShell .userbar{flex:0 0 auto;gap:8px!important} #appShell .userbar #userName,#appShell .userbar .role{display:none!important} #appShell .brand-home{flex:0 0 auto!important;width:auto!important;min-width:0!important} #appShell .brand-home .brand-label{display:none!important} #appShell .brand-home .top-logo-frame{flex:0 0 146px!important} #appShell .inventory-commandbar{display:grid;gap:13px;padding:15px} #appShell .inventory-command-copy strong{font-size:16px} #appShell .inventory-command-copy small{font-size:12px} #appShell .inventory-command-actions{justify-content:flex-start} #appShell .inventory-command-actions>button,#appShell .inventory-more>summary{min-height:40px;padding:9px 12px;font-size:12px} #appShell .inventory-filterbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:9px} #appShell .inventory-search{grid-column:1/-1} #appShell .inventory-filterbar>button{width:100%;min-width:0} #appShell .inventory-summary{align-items:flex-start;flex-direction:column;gap:4px;font-size:11px} #appShell .inventory-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #appShell .inventory-metric{padding:12px} #appShell .inventory-metric:last-child{grid-column:1/-1} #appShell .inventory-metric>span{font-size:12px} #appShell .inventory-metric>strong{font-size:22px} #appShell .inventory-metric>small{font-size:10px} #appShell .enterprise-panel-head h2{font-size:17px!important} #appShell .enterprise-panel-head p{font-size:12px!important} #appShell .enterprise-project-top b{font-size:14px!important} #appShell .enterprise-project-top small,#appShell .enterprise-project-foot{font-size:11px!important} #appShell .enterprise-project-top strong{font-size:13px!important} #appShell .enterprise-alert b{font-size:13px!important} #appShell .enterprise-alert span{font-size:11px!important} #appShell .enterprise-kpis .kpi-label{font-size:11px!important} #appShell .enterprise-kpis .small{font-size:10px!important} #appShell .brand-home .top-logo-frame{width:146px!important;min-width:146px!important;max-width:146px!important;height:52px!important} #appShell .brand-home .top-logo-frame img{width:230px!important;min-width:230px!important;transform:translateY(-4px)!important} } /* Crop only the three-chevron emblem, keeping the full KADEx Express wordmark and tagline. */ #appShell .brand-home .top-logo-frame{box-sizing:border-box!important;display:block!important;width:160px!important;min-width:160px!important;max-width:160px!important;height:58px!important;overflow:hidden!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important} #appShell .brand-home .top-logo-frame img{display:block!important;width:250px!important;min-width:250px!important;max-width:none!important;height:auto!important;transform:translateY(-4px)!important} @media(max-width:800px){#appShell .brand-home .top-logo-frame{width:146px!important;min-width:146px!important;max-width:146px!important;height:52px!important}#appShell .brand-home .top-logo-frame img{width:230px!important;min-width:230px!important;transform:translateY(-7px)!important}} #appShell .brand-home:before{display:none!important;content:none!important} #appShell .brand-home .brand-label{display:none!important} #appShell .login-status-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} #appShell .login-status-row .login-feedback{flex-basis:100%;color:#b42318;font-size:12px} @media(max-width:800px){#appShell .top #userName,#appShell .top #userRole{display:none!important}#appShell .top .brand-home{width:auto!important;max-width:none!important}#appShell .top .userbar{margin-left:auto!important}} @media(max-width:800px){body.desktop-device.app-mode #appShell header.top .userbar #userName,body.desktop-device.app-mode #appShell header.top .userbar #userRole{display:none!important}} #appShell header.top button.brand-home .brand-label{display:inline-block!important;max-width:none!important;padding-left:9px!important;border-left:1px solid rgba(255,255,255,.25)!important;color:#f0dba7!important;font-size:10px!important;letter-spacing:.1em!important;white-space:nowrap!important} @media(max-width:800px){#appShell header.top button.brand-home .brand-label{font-size:8px!important;letter-spacing:.07em!important;padding-left:7px!important}} @media(max-width:380px){#appShell header.top button.brand-home .brand-label{display:none!important}} @media(max-width:800px){#appShell .page-head .muted{white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.5!important}#appShell header.top button.brand-home .brand-label{font-size:9px!important;letter-spacing:.04em!important}} /* Keep laptop proportions compact while leaving phone sizing untouched. */ @media(min-width:801px) and (max-width:1440px){ #appShell .brand-home .top-logo-frame{width:136px!important;min-width:136px!important;max-width:136px!important;height:50px!important} #appShell .brand-home .top-logo-frame img{width:212px!important;min-width:212px!important;transform:translateY(-4px)!important} #appShell header.top button.brand-home .brand-label{font-size:9px!important;letter-spacing:.08em!important;padding-left:8px!important} #appShell .page-head h1{font-size:25px!important;letter-spacing:-.4px!important} #appShell .page-head h2,#appShell .card h2{font-size:18px!important} #appShell .enterprise-greeting h1{font-size:clamp(24px,2.2vw,28px)!important} #appShell .page-head .muted,#appShell .muted{font-size:12px} #appShell .nav button{font-size:13px} #appShell .primary,#appShell .secondary,#appShell .danger{font-size:12px} #appShell table td{font-size:12px} #appShell .metric{font-size:27px} #appShell .enterprise-panel-head h2{font-size:18px!important} #appShell .enterprise-panel-head p{font-size:12px!important} #appShell .enterprise-project-top b{font-size:14px!important} #appShell .enterprise-project-top small,#appShell .enterprise-project-foot{font-size:11px!important} #appShell .enterprise-project-top strong{font-size:13px!important} #appShell .enterprise-alert b{font-size:13px!important} #appShell .enterprise-alert span{font-size:11px!important} #appShell .enterprise-kpis .kpi-label{font-size:11px!important} #appShell .enterprise-kpis .small{font-size:10px!important} #appShell .enterprise-shortcut-grid b{font-size:12px!important} #appShell .enterprise-shortcut-grid small{font-size:10px!important} #appShell .inventory-command-copy strong{font-size:17px} #appShell .inventory-command-copy small{font-size:12px} #appShell .inventory-command-actions>button,#appShell .inventory-more>summary{font-size:12px} #appShell .inventory-filterbar input,#appShell .inventory-filterbar select{font-size:12px} #appShell .inventory-metric>span{font-size:12px} #appShell .inventory-metric>strong{font-size:23px} #appShell .inventory-empty b{font-size:16px} #appShell .inventory-empty p{font-size:12px} } /* A quieter mobile masthead with a shorter logo footprint. */ @media(max-width:800px){ html body.app-mode{background:#edf2f6!important} body.app-mode #appShell{padding-top:56px!important;--mobile-bg:#edf2f6!important} body.app-mode #appShell header.top{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;height:56px!important;min-height:56px!important;padding:0 10px!important;box-sizing:border-box!important;align-items:center!important;background:#eaf0f5!important;color:#20384e!important;border-bottom:1px solid #d7e1e9!important;box-shadow:0 3px 12px rgba(20,43,63,.08)!important;z-index:230!important} body.app-mode #appShell header.top>div:first-child{height:100%;gap:8px!important} body.app-mode #appShell header.top button.brand-home{height:100%;gap:0!important} body.app-mode #appShell header.top button.brand-home .top-logo-frame{position:relative!important;box-sizing:border-box!important;display:block!important;flex:0 0 124px!important;width:124px!important;min-width:124px!important;max-width:124px!important;height:42px!important;overflow:hidden!important;padding:0!important;border:1px solid #e0e6ec!important;border-radius:7px!important;background:#fff!important;box-shadow:0 1px 3px rgba(20,43,63,.08)!important} body.app-mode #appShell header.top button.brand-home .top-logo-frame img{display:block!important;width:190px!important;min-width:190px!important;max-width:none!important;height:auto!important;transform:translateY(-5px)!important} body.app-mode #appShell header.top .userbar{height:100%;gap:7px!important} body.app-mode #appShell .notif-menu{top:62px!important} } /* Keep entered values and guidance text legible throughout data-entry screens. */ #appShell input:not([type=checkbox]):not([type=radio]):not([type=range]),#appShell select,#appShell textarea{color:#172b3a!important;-webkit-text-fill-color:#172b3a!important} #appShell input:not([type=checkbox]):not([type=radio]):not([type=range])::placeholder,#appShell textarea::placeholder{color:#687b8d!important;-webkit-text-fill-color:#687b8d!important;opacity:1!important} #appShell .global-search input{color:#fff!important;-webkit-text-fill-color:#fff!important} #appShell .global-search input::placeholder{color:#c7d2dd!important;-webkit-text-fill-color:#c7d2dd!important} #appShell #lastLoginStatus{font-size:14px;line-height:1.55} #appShell #lastLoginStatus b{font-size:15px} /* Use the full content width for the project portfolio on compact laptop screens. */ @media(max-width:1000px){ #appShell .enterprise-grid,#appShell .enterprise-lower{grid-template-columns:minmax(0,1fr)!important} #appShell .enterprise-panel-head{display:flex!important;flex-wrap:wrap!important;gap:8px 12px!important} #appShell .enterprise-panel-head>div{flex:1 1 100%!important;min-width:0!important} #appShell .enterprise-panel-head>.secondary{margin-left:auto!important} #appShell .enterprise-panel-head .eyebrow{white-space:nowrap} } /* Keep modal forms inside the viewport and let action buttons follow all fields. */ #modal{box-sizing:border-box!important;padding:12px!important;overflow-x:hidden!important} #modal #modalBox{box-sizing:border-box!important;width:min(920px,100%)!important;max-width:100%!important;min-width:0!important;max-height:calc(100dvh - 24px)!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important} #modal #modalBox .formgrid{width:100%!important;max-width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important} #modal #modalBox .formgrid>*{min-width:0!important;max-width:100%!important} #modal #modalBox .actions-sticky,#modal #modalBox .modal-actions{position:static!important;inset:auto!important;z-index:auto!important;box-sizing:border-box!important;width:100%!important;max-width:100%!important;margin-top:16px!important;padding:14px 0 0!important;border-top:1px solid #e2e8ef!important;background:#fff!important} #modal #modalBox .actions-sticky{display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important;gap:9px!important} @media(max-width:800px){ #modal{align-items:flex-end!important;padding:8px!important} #modal #modalBox{width:100%!important;max-height:calc(100dvh - 16px)!important;padding:18px 15px!important} #modal #modalBox .formgrid{grid-template-columns:minmax(0,1fr)!important} #modal #modalBox .actions-sticky,#modal #modalBox .modal-actions{flex-wrap:wrap!important;gap:8px!important} #modal #modalBox .actions-sticky>* ,#modal #modalBox .modal-actions>*{flex:1 1 120px!important;min-width:0!important} } /* Final role dashboard and page rhythm overrides. */ #appShell .main aside.card{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;align-self:start!important;transform:none!important} #appShell #drawerLogoutBtn{min-height:50px!important;border:1px solid #c5222a!important;border-radius:11px!important;background:#c5222a!important;color:#fff!important;box-shadow:0 4px 12px rgba(197,34,42,.22)!important;font-weight:800!important} #appShell #drawerLogoutBtn:hover{border-color:#a91e2a!important;background:#a91e2a!important;color:#fff!important} #appShell #drawerLogoutBtn:focus-visible{outline:3px solid #fff!important;outline-offset:3px!important} #appShell .ceo-hero,#appShell .work-welcome{border:1px solid #e2e8ef!important;background:linear-gradient(110deg,#fff 0%,#f7f9fb 72%,#f2f6f9 100%)!important;box-shadow:0 4px 16px rgba(16,42,67,.05)!important;color:#17334c!important} #appShell .ceo-hero h1,#appShell .work-welcome h1{color:#17334c!important} #appShell .ceo-hero p,#appShell .work-welcome p{color:#66798d!important} #appShell .ceo-hero .role-eyebrow,#appShell .work-welcome .role-eyebrow{color:#8d6822!important} #appShell .ceo-live{border-color:#dce5ec!important;background:#fff!important;color:#526a80!important} #appShell .work-welcome .secondary{color:#1b3a54!important;background:#fff!important;border:1px solid #d9e2e9!important} #appShell .ceo-overview,#appShell .ceo-panels,#appShell .work-columns,#appShell .enterprise-grid,#appShell .enterprise-lower{gap:12px!important} #appShell .ceo-dashboard,#appShell .work-dashboard,#appShell .enterprise-dashboard{gap:12px!important} @media(min-width:801px){ #appShell .main{padding:24px!important} #appShell .main .page-head{margin-bottom:14px!important} #appShell .main .toolbar{gap:8px!important;margin:12px 0!important} #appShell .main .grid,#appShell .main .dashboard-two-col,#appShell .main .dashboard-three-col,#appShell .main .dashboard-modules,#appShell .main .quick-actions,#appShell .main .command-grid{gap:12px!important} #appShell .main .card{padding:16px!important} } @media(max-width:800px){ #appShell .main{padding:14px 11px calc(78px + env(safe-area-inset-bottom))!important} #appShell .main .page-head{margin-bottom:12px!important} #appShell .main .toolbar{gap:8px!important;margin:10px 0!important} #appShell .main .grid,#appShell .main .dashboard-two-col,#appShell .main .dashboard-three-col,#appShell .main .dashboard-modules,#appShell .main .quick-actions,#appShell .main .command-grid{gap:8px!important} #appShell .main .card{padding:12px!important} #appShell .mobile-drawer-account{margin-top:auto!important;padding-bottom:calc(8px + env(safe-area-inset-bottom))!important} #appShell #nav button{min-height:44px!important} } /* Final dark-mode treatment for light-only badges and V33 calendar components. */ html[data-theme="dark"] #appShell .main :is(.readonly-badge,.v33-count-pill){ background:#263b4e!important; border-color:#40596d!important; color:#dbe5ed!important; } html[data-theme="dark"] #appShell .main :is(.v33-calendar-card,.v33-selected-card,.v33-recent-card){ background:#192a39!important; border-color:#304252!important; color:#dbe5ed!important; } html[data-theme="dark"] #appShell .main :is(.v33-calendar-head strong,.v33-activity-toolbar label,.v33-activity-copy strong,.v33-empty strong){ color:#edf4fa!important; } html[data-theme="dark"] #appShell .main :is(.v33-calendar-legend,.v33-activity-copy p,.v33-empty,.v33-empty p,.v33-activity-row time){ color:#b9c9d5!important; } html[data-theme="dark"] #appShell .main :is(.v33-activity-copy small,.v33-weekdays span){color:#a8b8c6!important} html[data-theme="dark"] #appShell .main :is(.v33-day,.v33-day.outside){ background:#172a39!important; border-color:#304252!important; color:#dbe5ed!important; } html[data-theme="dark"] #appShell .main .v33-day.outside{color:#91a4b6!important} html[data-theme="dark"] #appShell .main .v33-day:hover{background:#22394d!important;border-color:#49647b!important} html[data-theme="dark"] #appShell .main .v33-day.today{border-color:#e06c72!important} html[data-theme="dark"] #appShell .main .v33-day.selected{background:#25445e!important;border-color:#5b88ad!important;color:#f2f6f9!important} html[data-theme="dark"] #appShell .main :is(.v33-event-count,.v33-day.selected .v33-event-count){ background:#4a3035!important; color:#ffc2c5!important; } html[data-theme="dark"] #appShell .main :is(.v33-activity-row,.v33-calendar-legend){border-color:#304252!important} html[data-theme="dark"] #appShell .main .v33-activity-icon{background:#243b4e!important;color:#cce4f5!important} html[data-theme="dark"] #appShell .main .v33-activity-icon.receipt{background:#1d3b31!important;color:#91e0b8!important} html[data-theme="dark"] #appShell .main .v33-activity-icon.issue{background:#433326!important;color:#ffd0a1!important} html[data-theme="dark"] #appShell .main .v33-empty>span{color:#8ea3b6!important}