/* Cooklayer shared identity. Last-loaded bridge for both existing page shells. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('../brand/cooklayer/PlusJakartaSans-variable.woff2') format('woff2')}
html[data-brand="cooklayer"]{
 --cooklayer-navy:#03111E;--cooklayer-yellow:#E8730C;--cooklayer-orange:#E8730C;--cooklayer-ai-premium:#FFC51B;
 --font:'Plus Jakarta Sans',system-ui,sans-serif;--font-display:var(--font);
 --margherita:#E8730C;--margherita-soft:#FFF0E4;--accent:#E8730C;
 --acc:#173B53;--acc-ink:#173B53;--acc-lift:#E8730C;--acc-soft:rgba(23,59,83,.09);
 --acc-grad-a:#03111E;--acc-grad-b:#173B53;
 --bg-page:#DFE6ED;--bg-card:#fff;--bg-chrome:#03111E;
 --text-1:#142C3D;--text-2:#526575;--text-3:#617484;
 --border:#C3CFD9;--border-soft:#DEE5EB;--surface-soft:#EFF3F7;
 --radius:10px;--radius-md:12px;--radius-lg:16px;
 --naly-r-card:16px;--naly-r-tile:14px;--naly-r-control:10px;
 --naly-surface:var(--bg-card);--naly-surface-border:var(--border);
 --naly-cta-bg:#173B53;--naly-cta-shadow:0 2px 4px #03111e12;
 --nav-active-bg:linear-gradient(90deg,rgba(232,115,12,.19),rgba(232,115,12,0));
 --nav-active-text:#FFFFFF;
 --shadow:0 2px 4px #18374c06,0 8px 24px #18374c09;
}
html[data-brand="cooklayer"][data-theme="dark"]{
 --bg-page:#071622;--bg-card:#142B3C;--surface-soft:#102332;
 --text-1:#F1F6FA;--text-2:#C1D0DD;--text-3:#A1B5C5;
 --border:#344D60;--border-soft:#294254;
 --acc:#82B7D7;--acc-ink:#B7D7EB;--acc-soft:rgba(130,183,215,.12);
 --naly-cta-bg:#245371;
 /* --margherita-soft has to be re-stated here.
    The light block above is `html[data-brand="cooklayer"]` (0,1,1) and
    tokens.css's dark values are `[data-theme="dark"]` (0,1,0), so every token
    the light block sets and this one does not keeps its LIGHT value in dark
    theme. For most of them that is intended — the brand radii, shadow and
    chrome navy are deliberate in both themes. For this one it is not: the cream
    #FFF0E4 stayed behind dark-theme text on the invoice tables and measured
    1.38:1. The translucent amber is the same accent against a dark ground. */
 --margherita-soft:rgba(232,115,12,.15);
}
/* --nav-active-text is a pale yellow chosen for the sidebar, which sits on the
   dark --bg-chrome in both themes. The mobile tab bar is a different surface —
   --naly-chrome-bg is near-white in light — so the same pale yellow landed at
   luminance .77 on .93 and the label vanished. --text-1 follows the theme here
   and clears both. Scoped to the tab bar so the sidebar keeps its colour. */
html[data-brand="cooklayer"] .naly-tab[aria-current="page"]{color:var(--text-1)}
html[data-brand="cooklayer"] body{font-family:var(--font);background:var(--bg-page);color:var(--text-1)}
html[data-brand="cooklayer"] .dash-root{--dash-page-bg:var(--bg-page);--dash-text:var(--text-1);--dash-font:var(--font);background:var(--bg-page)}
html[data-brand="cooklayer"] :is(.naly-sidebar,.cooklayer-legacy-sidebar,.naly-drawer){background:#03111E;color:#fff;box-shadow:none;backdrop-filter:none;display:flex;flex-direction:column}
html[data-brand="cooklayer"] .naly-sidebar__brand{padding:20px 20px 12px;flex-shrink:0}
html[data-brand="cooklayer"] .cooklayer-wordmark{display:block;width:180px;max-width:100%;height:auto}
html[data-brand="cooklayer"] .cooklayer-company-brand{display:flex;align-items:center;gap:9px;min-width:0}
html[data-brand="cooklayer"] .cooklayer-company-logo{display:block;width:36px;height:36px;flex:0 0 36px;box-sizing:border-box;padding:3px;object-fit:contain;background:var(--ink-10);border-radius:8px}
html[data-brand="cooklayer"] .cooklayer-company-identity{display:flex;flex-direction:column;gap:3px;min-width:0;letter-spacing:normal;line-height:1.3}
html[data-brand="cooklayer"] .cooklayer-company-identity strong{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-brand="cooklayer"] .cooklayer-company-identity small{font-size:10px;font-weight:500;opacity:.75}
html[data-brand="cooklayer"] .naly-sidebar__nav{padding:0 12px 12px;gap:2px;overflow-y:auto;min-height:100px;scrollbar-width:thin;scrollbar-color:#294052 transparent;flex:1}
.cooklayer-sidebar-scroll{display:none}
@media(min-width:1025px){
 html[data-brand="cooklayer"] :is(.naly-sidebar,.cooklayer-legacy-sidebar)>.cooklayer-sidebar-scroll:not([hidden]){display:block;flex-shrink:0;height:28px;margin:0 24px;border-top:1px solid #253A4A}
 .cooklayer-sidebar-scroll.is-at-end{visibility:hidden}
 .cooklayer-sidebar-scroll__button{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;height:100%;padding:0;border:0;background:transparent;color:#9FB2C2;font:inherit;font-size:11px;cursor:pointer}
 .cooklayer-sidebar-scroll__button svg{width:12px;height:12px}
}
html[data-brand="cooklayer"] .naly-sidebar__section{padding:16px 12px 5px;font-size:11px;font-weight:600;letter-spacing:.07em;color:#8CA3B5}
html[data-brand="cooklayer"] .naly-sidebar__item{position:relative;min-height:34px;padding:6px 12px;border-radius:10px;color:#C3D0DB;font-size:13px;line-height:1.4;font-weight:500;gap:11px;flex-shrink:0;transition:background .15s,color .15s}
html[data-brand="cooklayer"] .naly-sidebar__item svg{width:16px;height:16px}
html[data-brand="cooklayer"] .naly-sidebar__item--sub{min-height:30px;padding-left:30px;font-size:12.5px}
html[data-brand="cooklayer"] .naly-sidebar__item--sub svg{width:14px;height:14px}
html[data-brand="cooklayer"] .naly-sidebar__item:hover{background:rgba(232,115,12,.08);color:white}
html[data-brand="cooklayer"] .naly-sidebar__item:hover svg{color:#FFB879}
html[data-brand="cooklayer"] .naly-sidebar__item[aria-current="page"]{background:linear-gradient(90deg,rgba(232,115,12,.42),rgba(232,115,12,.1) 60%,rgba(232,115,12,0));color:#FFFFFF;box-shadow:none;font-weight:650}
html[data-brand="cooklayer"] .naly-sidebar__item[aria-current="page"]::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:#E8730C}
html[data-brand="cooklayer"] .naly-sidebar__badge{font-size:11px;font-weight:600;min-width:22px;background:#26394B;color:white}
html[data-brand="cooklayer"] .naly-sidebar__user{flex-shrink:0;margin:8px 12px;padding:11px 10px;gap:9px;background:#0E2233;border:1px solid #253A4A;border-radius:12px}
html[data-brand="cooklayer"] .naly-sidebar__user>div{min-width:0}
html[data-brand="cooklayer"] .cooklayer-profile-link{color:inherit;text-decoration:none;min-height:44px}
html[data-brand="cooklayer"] .cooklayer-profile-link:focus-visible{outline:2px solid #E8730C;outline-offset:2px}
html[data-brand="cooklayer"] .naly-sidebar__uname{font-size:11px;overflow-wrap:anywhere;color:#C3D0DB}
html[data-brand="cooklayer"] .naly-sidebar__urole{font-size:10px;color:#9FB2C2;margin-top:4px}
html[data-brand="cooklayer"] .cooklayer-workspace{font-size:12px;font-weight:700;margin-bottom:5px;overflow-wrap:anywhere;color:white}
html[data-brand="cooklayer"] .naly-sidebar__foot{flex-shrink:0;margin-top:0;padding:0 12px 12px}
html[data-brand="cooklayer"] .cooklayer-theme{border:0;background:transparent;width:100%;text-align:left;font-family:inherit;cursor:pointer}
html[data-brand="cooklayer"] .naly-sidebar__foot .naly-sidebar__item{min-height:32px;padding-top:6px;padding-bottom:6px;font-size:11px}
html[data-brand="cooklayer"] .naly-card,html[data-brand="cooklayer"] .naly-tile{box-shadow:0 2px 5px #15354b08}
html[data-brand="cooklayer"] :is(button,input,select,textarea){font-family:inherit}
html[data-brand="cooklayer"] :is(a,button,input,select,textarea):focus-visible{outline:3px solid #B88700;outline-offset:3px}
html[data-brand="cooklayer"] .cooklayer-workspace-title{font-size:12px;font-weight:650;color:var(--text-2)}
@media(max-width:1024px){html[data-brand="cooklayer"] .cooklayer-workspace-title{color:#C3D0DB}}
@media(min-width:1025px){
 html[data-brand="cooklayer"]{--sidebar-w:258px}
 html[data-brand="cooklayer"] :is(.naly-sidebar,.cooklayer-legacy-sidebar){display:flex;left:14px;top:14px;bottom:14px;width:230px;border-radius:23px;overflow:hidden}
 html[data-brand="cooklayer"] .dash-root{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
 /* The content column is inset asymmetrically on purpose: the rail floats with
    its own 14px gap on the left, so the page does not need a wide one there.
    Exposed as tokens because a fixed-position element that must line up with
    this column (the supplier catalogue dialog) has no other way to know. */
 html[data-brand="cooklayer"]{--content-pad-l:10px;--content-pad-r:26px}
 html[data-brand="cooklayer"] .dash-main{padding:22px var(--content-pad-r) 32px var(--content-pad-l)}
 html[data-brand="cooklayer"] .topbar{margin-left:var(--sidebar-w);width:auto;background:var(--bg-page);border:0;box-shadow:none;padding-left:10px}
 html[data-brand="cooklayer"] .main-wrapper .topbar{margin-left:0}
 html[data-brand="cooklayer"] .main-wrapper{margin-left:var(--sidebar-w)}
 html[data-brand="cooklayer"] .main-container{padding-left:10px}
 html[data-brand="cooklayer"] .naly-drawer{display:none}
}
@media(min-width:1025px) and (max-width:1199px){
 html[data-brand="cooklayer"]{--sidebar-w:238px}
 html[data-brand="cooklayer"] :is(.naly-sidebar,.cooklayer-legacy-sidebar){width:210px}
 html[data-brand="cooklayer"] .naly-sidebar__brand{padding-left:18px;padding-right:18px}
 html[data-brand="cooklayer"]{--content-pad-r:18px}
}
@media(max-width:1024px){
 html[data-brand="cooklayer"] .naly-sidebar{display:none}
 html[data-brand="cooklayer"] .cooklayer-legacy-sidebar{width:280px;--sidebar-w:280px}
 html[data-brand="cooklayer"] .naly-drawer{background:#03111E;border-radius:0 22px 22px 0}
 html[data-brand="cooklayer"] .naly-sidebar__item{min-height:44px;font-size:13px}
 html[data-brand="cooklayer"] .naly-sidebar__foot .naly-sidebar__item{min-height:44px;font-size:12px}
 html[data-brand="cooklayer"] .naly-topbar{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;box-shadow:0 2px 5px #03111e08}
}
@media(prefers-reduced-motion:reduce){html[data-brand="cooklayer"] .naly-sidebar__item{transition:none}}
@media(min-width:1025px){
 html[data-brand="cooklayer"] .topbar{--tb-ink:var(--text-1);--tb-ink-2:var(--text-2);--tb-pill-bg:var(--bg-card);--tb-pill-line:var(--border)}
 html[data-brand="cooklayer"] .topbar::after{display:none}
 html[data-brand="cooklayer"] .topbar-icon i{color:var(--text-1)}
}
html[data-brand="cooklayer"] .naly-page{background:var(--bg-page)}
html[data-brand="cooklayer"] .admin-switcher{--as-bg-surface:#0E2233;--as-bg-elev:#183448;--as-border:#304B60;--as-indigo:#E8730C;--as-indigo-soft:#E8730C20;--as-indigo-text:#FFB879}
@media(min-width:1025px){
 html[data-brand="cooklayer"] .cooklayer-legacy-sidebar .admin-switcher__panel--sidebar{position:fixed;left:calc(var(--sidebar-w) + 14px);width:min(360px,calc(100vw - var(--sidebar-w) - 28px));min-width:300px;max-height:calc(100vh - 24px);overflow-y:auto}
}

@media(min-width:1025px){
 html[data-brand="cooklayer"] .topbar-chat{background:var(--bg-card);border-color:var(--border);color:var(--text-1)}
 html[data-brand="cooklayer"] .topbar-chat i{color:inherit}
 html[data-brand="cooklayer"] .topbar-chat:hover{background:var(--surface-soft);color:var(--text-1)}
}
html[data-brand="cooklayer"][data-theme="dark"] .hub-tab--hrs.active,html[data-brand="cooklayer"][data-theme="dark"] .hub-tab--hrs.active i{color:#77D9A5}

/* Mobile web identity: both shells keep their existing routes and safe-area
   positioning. Opaque surfaces avoid the iOS fixed-chrome scroll jitter. */
@media(max-width:1024px){
 html[data-brand="cooklayer"] body.naly-shell{--topbar-h:calc(72px + env(safe-area-inset-top,0px))}
 html[data-brand="cooklayer"] .naly-topbar-wrap{padding:calc(8px + env(safe-area-inset-top,0px)) 12px 0}
 html[data-brand="cooklayer"] :is(.naly-topbar,.topbar){background:#03111E;color:#F1F6FA;border-color:#263D4F;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 html[data-brand="cooklayer"] .naly-topbar{padding:8px;gap:8px;border-radius:16px}
 html[data-brand="cooklayer"] .naly-topbar__title{color:#F1F6FA;font-size:14px;font-weight:700;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 html[data-brand="cooklayer"] .naly-topbar__subtitle{color:#B6C8D6;font-size:10px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 html[data-brand="cooklayer"] :is(.naly-burger,.naly-bell){width:44px;height:44px;background:#102838;border:1px solid #294254;color:#E7EFF5;box-shadow:none;border-radius:12px}
 html[data-brand="cooklayer"] :is(.naly-burger,.naly-bell) svg{width:20px;height:20px}
 html[data-brand="cooklayer"] .naly-avatar{width:40px;height:40px;background:#23465D;box-shadow:none;border:1px solid #426079}
 html[data-brand="cooklayer"] :is(.naly-tabbar,.m-bottomnav){background:#03111E;color:#C3D0DB;border-color:#294254;box-shadow:0 -2px 10px rgb(3 17 30 / 10%);backdrop-filter:none;-webkit-backdrop-filter:none}
 html[data-brand="cooklayer"] :is(.naly-tab,.m-bottomnav-item){font-family:var(--font);color:#C3D0DB;font-size:11px;font-weight:600;line-height:1.3;min-height:44px;border-radius:12px}
 html[data-brand="cooklayer"] .naly-tab{flex:1;min-width:0;padding:4px 6px}
 html[data-brand="cooklayer"] .naly-tab svg{width:20px;height:20px}
 html[data-brand="cooklayer"] .naly-tab[aria-current="page"],
 html[data-brand="cooklayer"] .m-bottomnav-item.active{background:#E8730C;color:#03111E;font-weight:750;box-shadow:none}
 html[data-brand="cooklayer"] .naly-tab:not([aria-current="page"]):hover,
 html[data-brand="cooklayer"] .m-bottomnav-item:not(.active):hover{background:#193446;color:#fff}
 html[data-brand="cooklayer"] :is(.naly-tabbar,.m-bottomnav,.naly-topbar,.topbar,.naly-drawer,.cooklayer-legacy-sidebar) :is(a,button):focus-visible{outline-color:#E8730C;outline-offset:2px}
 html[data-brand="cooklayer"] .naly-drawer{width:min(264px,calc(100vw - 64px));padding-bottom:0}
 html[data-brand="cooklayer"] .cooklayer-legacy-sidebar{width:min(264px,calc(100vw - 64px));--sidebar-w:264px;padding-bottom:0}
 html[data-brand="cooklayer"] .naly-drawer .naly-sidebar__nav{min-height:0}
 html[data-brand="cooklayer"] :is(.naly-drawer,.cooklayer-legacy-sidebar) .naly-sidebar__brand{padding:16px 16px 12px}
 html[data-brand="cooklayer"] :is(.naly-drawer,.cooklayer-legacy-sidebar) .cooklayer-wordmark{width:160px}
 html[data-brand="cooklayer"] :is(.naly-drawer,.cooklayer-legacy-sidebar) .naly-sidebar__user{margin:4px 12px 8px;padding:8px 10px;background:transparent;border-color:transparent}
 html[data-brand="cooklayer"] :is(.naly-drawer,.cooklayer-legacy-sidebar) .naly-sidebar__avatar{width:30px;height:30px}
 /* Account utilities match the desktop rail: one quiet icon row. The
    original labels remain available to assistive technology and tooltips. */
 html[data-brand="cooklayer"] :is(.naly-drawer,.cooklayer-legacy-sidebar)>.naly-sidebar__foot{display:flex;gap:4px;padding:0 12px calc(12px + env(safe-area-inset-bottom,0px))}
 html[data-brand="cooklayer"] :is(.naly-drawer,.cooklayer-legacy-sidebar)>.naly-sidebar__foot .naly-sidebar__item{flex:1;justify-content:center;min-width:44px;min-height:44px;padding:0;gap:0}
 html[data-brand="cooklayer"] :is(.naly-drawer,.cooklayer-legacy-sidebar)>.naly-sidebar__foot .naly-sidebar__item span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 html[data-brand="cooklayer"] .naly-topbar .admin-switcher__trigger{min-height:40px;min-width:40px;box-shadow:none}
 html[data-brand="cooklayer"] .topbar{display:flex;justify-content:space-between;gap:6px}
 html[data-brand="cooklayer"] .topbar-left{min-width:0;flex:1;gap:6px}
 html[data-brand="cooklayer"] .topbar-right{flex-shrink:0;gap:4px}
 html[data-brand="cooklayer"] .cooklayer-workspace-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 html[data-brand="cooklayer"] :is(.topbar-chat,.topbar-cart,.topbar-hamburger,.topbar-account){color:#E7EFF5}
 html[data-brand="cooklayer"] .topbar-chat i,html[data-brand="cooklayer"] .topbar-cart i{color:inherit}
}
@media(max-width:1024px){
 /* The employee launcher deliberately has its own header and no tabbar. */
 html[data-brand="cooklayer"] .employee-home-3d{--staff-navy:#03111E;--staff-navy-muted:#102838;--staff-navy-deep:#03111E;--staff-yellow:#E8730C}
 html[data-brand="cooklayer"] .employee-home-3d :is(.staff3d,.staff3d__top){background:#03111E}
 html[data-brand="cooklayer"] .staff3d__burger{background:#102838;border-color:#294254;box-shadow:none}
 html[data-brand="cooklayer"] .staff3d__avatar{background:#23465D;box-shadow:none}
}

/* Desktop rail uses the same account utility row as mobile, with a shorter
   target height for pointer use. Labels stay in the DOM for screen readers. */
@media(min-width:1025px){
 html[data-brand="cooklayer"] .naly-sidebar>.naly-sidebar__foot{display:flex;gap:4px;padding:0 12px 12px}
 html[data-brand="cooklayer"] .naly-sidebar>.naly-sidebar__foot .naly-sidebar__item{flex:1;justify-content:center;min-height:36px;padding:0;gap:0}
 html[data-brand="cooklayer"] .naly-sidebar>.naly-sidebar__foot .naly-sidebar__item span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* Sidebar groups (2026-10-31): pinned pages stay in view, the rest folds into
   <details> groups so the rail fits one screen. No JS: the browser opens and
   closes them, and the template opens the group holding the current page. */
html[data-brand="cooklayer"] .naly-sidebar__group>summary{list-style:none;cursor:pointer;user-select:none}
html[data-brand="cooklayer"] .naly-sidebar__group>summary::-webkit-details-marker{display:none}
html[data-brand="cooklayer"] .naly-sidebar__group>summary:focus-visible{outline:2px solid #E8730C;outline-offset:2px}
html[data-brand="cooklayer"] .naly-sidebar__chev{margin-left:auto;width:14px;height:14px;transition:transform .15s}
html[data-brand="cooklayer"] .naly-sidebar__group[open]>summary{color:#fff}
html[data-brand="cooklayer"] .naly-sidebar__group[open]>summary .naly-sidebar__chev{transform:rotate(90deg)}
html[data-brand="cooklayer"] .naly-sidebar__group-body{display:flex;flex-direction:column;gap:2px;padding:2px 0 6px 10px}
@media (prefers-reduced-motion:reduce){html[data-brand="cooklayer"] .naly-sidebar__chev{transition:none}}