/* JVZEA design: clean, clinical, light. One brand colour per site (admin blue, staff amber, store teal, www JVZEA blue),
   white surfaces on a cool grey page, soft borders, quiet badges. Tokens first; components below use only the tokens. */
:root{color-scheme:only light;
  --jv-brand:#1e3a8a;--jv-brand-2:#2748a8;--jv-brand-soft:#e8eefb;--jv-accent:#0ea5e9;
  --jv-bg:#f4f6f9;--jv-surface:#fff;--jv-border:#e3e8ef;--jv-text:#1f2937;--jv-muted:#6b7280;--jv-radius:.6rem;
  --tabbar-h:3.6rem;
  --bs-body-font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bs-body-color:var(--jv-text);--bs-border-color:var(--jv-border);--bs-border-radius:var(--jv-radius);
  --bs-link-color:var(--jv-brand);--bs-link-color-rgb:30,58,138;--bs-link-hover-color:var(--jv-brand-2);
}
.site-admin{--jv-brand:#1e3a8a;--jv-brand-2:#2748a8;--jv-brand-soft:#e8eefb;--jv-accent:#0ea5e9}
.site-staff{--jv-brand:#a14a07;--jv-brand-2:#c2610c;--jv-brand-soft:#fdf1e4;--jv-accent:#f59e0b}
.site-store{--jv-brand:#0f766e;--jv-brand-2:#0d9488;--jv-brand-soft:#e3f5f2;--jv-accent:#14b8a6}
.site-wh{--jv-brand:#9f1239;--jv-brand-2:#be123c;--jv-brand-soft:#fdecef;--jv-accent:#fb7185}
.site-www{--jv-brand:#0d1197;--jv-brand-2:#1a20b8;--jv-brand-soft:#eceefc;--jv-accent:#009cbf;--jv-sun:#ffe107}
body{background:var(--jv-bg)}
body.fe{background:#fff}
.bg-brand{background-color:var(--jv-brand)!important}
.text-brand{color:var(--jv-brand)!important}
.text-accent{color:var(--jv-accent)!important}
.btn-primary,.btn-brand{--bs-btn-color:#fff;--bs-btn-bg:var(--jv-brand);--bs-btn-border-color:var(--jv-brand);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--jv-brand-2);--bs-btn-hover-border-color:var(--jv-brand-2);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--jv-brand-2);--bs-btn-active-border-color:var(--jv-brand-2);--bs-btn-disabled-bg:var(--jv-brand);--bs-btn-disabled-border-color:var(--jv-brand)}
.btn-outline-primary{--bs-btn-color:var(--jv-brand);--bs-btn-border-color:var(--jv-brand);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--jv-brand);--bs-btn-hover-border-color:var(--jv-brand);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--jv-brand);--bs-btn-active-border-color:var(--jv-brand)}
.form-control:focus,.form-select:focus,.form-check-input:focus{border-color:var(--jv-brand-2);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--jv-brand) 18%,transparent)}
.form-check-input:checked{background-color:var(--jv-brand);border-color:var(--jv-brand)}
.nav-pills{--bs-nav-pills-link-active-bg:var(--jv-brand)}
.nav-pills .nav-link{color:var(--jv-text)}
.pagination{--bs-pagination-color:var(--jv-brand);--bs-pagination-active-bg:var(--jv-brand);--bs-pagination-active-border-color:var(--jv-brand)}
.progress-bar{background-color:var(--jv-brand)}
.tooltip{pointer-events:none}
.min-w-0{min-width:0}

/* app header (admin, staff, store): white bar with a brand stripe, logo + site name, quiet links with a brand underline */
.app-nav{background:var(--jv-surface);border-top:3px solid var(--jv-brand);border-bottom:1px solid var(--jv-border)}
.app-nav .navbar-brand{color:var(--jv-brand);font-weight:700}
.app-nav .navbar-brand .site-name{color:var(--jv-muted);font-weight:500}
.app-nav .nav-link{color:var(--jv-text);font-weight:500}
.app-nav .nav-link:hover,.app-nav .nav-link:focus{color:var(--jv-brand)}
.app-nav .nav-link.active,.app-nav .show>.nav-link{color:var(--jv-brand);box-shadow:inset 0 -3px 0 var(--jv-brand)}
.app-nav .navbar-toggler{color:var(--jv-brand)}
.dropdown-menu{--bs-dropdown-border-color:var(--jv-border);--bs-dropdown-link-active-bg:var(--jv-brand);box-shadow:0 8px 24px rgba(15,23,42,.08)}
.dropdown-menu .dropdown-item.active,.dropdown-menu .dropdown-item:active{background-color:var(--jv-brand);color:#fff}
.navbar-brand img{width:auto}
@media (min-width:992px){
  .navbar-expand-lg .offcanvas-body{overflow:visible}
  .navbar .dropdown-menu{max-height:calc(100dvh - 6.5rem);overflow-y:auto;overscroll-behavior:contain}
  .navbar .dropdown-menu.dd-cols{columns:2;column-gap:0;min-width:25rem}
  .navbar .dropdown-menu.dd-cols>li{break-inside:avoid}
}
@media (max-width:991.98px){.navbar .dropdown-menu{max-height:none;overflow:visible;box-shadow:none;border:0}.offcanvas-body{overflow-y:auto}}
.quickbar{overflow-x:auto;white-space:nowrap;scrollbar-width:none;background:var(--jv-surface);border-bottom:1px solid var(--jv-border)}
.quickbar::-webkit-scrollbar{display:none}
.quickbar .nav-link{padding:.45rem .8rem;font-size:.85rem;color:var(--jv-text)}
.quickbar .nav-link.active{color:var(--jv-brand);font-weight:600;box-shadow:inset 0 -3px 0 var(--jv-brand)}

/* page bar: breadcrumb + title + actions (UI conventions in CLAUDE.md) */
.pagebar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.6rem 0 .75rem;margin-bottom:.25rem;font-weight:600;color:var(--jv-text)}
.pagebar:empty{display:none}
.pagebar h5,.pagebar h6{margin:0;font-size:1.15rem;font-weight:700;color:var(--jv-text)}
.pagebar a{color:var(--jv-muted)}
.pagebar .btn-outline-light{--bs-btn-color:var(--jv-brand);--bs-btn-bg:var(--jv-surface);--bs-btn-border-color:var(--jv-border);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--jv-brand);--bs-btn-hover-border-color:var(--jv-brand);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--jv-brand)}
.pagebar>.btn-outline-light:first-of-type{margin-left:auto}

/* surfaces: cards, tables, badges, forms */
.card{--bs-card-border-color:var(--jv-border);--bs-card-border-radius:var(--jv-radius);--bs-card-cap-bg:var(--jv-surface);box-shadow:0 1px 2px rgba(15,23,42,.04)}
.card-header{font-size:.9rem;border-bottom-color:var(--jv-border)}
.card-header.fw-semibold{color:var(--jv-text)}
.table{--bs-table-hover-bg:var(--jv-brand-soft)}
.table>thead.table-light th,.table thead.table-light th{background:#f8fafc;color:var(--jv-muted);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;border-bottom-color:var(--jv-border)}
.badge{font-weight:600;letter-spacing:.01em}
.be label,.be .form-label{font-size:.8rem;color:var(--jv-muted);font-weight:500;margin-bottom:.2rem}
.be .form-control,.be .form-select{font-size:.88rem}
.be .asteriskField{color:var(--jv-muted);margin-left:.15rem}
.be .invalid-feedback{display:block}
.be .btn:disabled,.be .btn.disabled{cursor:not-allowed}
.filterbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.6rem}
.filterbar .form-control,.filterbar .form-select{width:auto;flex:1 1 12rem;max-width:28rem}
.form-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1rem}
.doc-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--jv-muted);margin-bottom:.15rem}
.doc-totals td{padding:.2rem .5rem}
.doc-sign .border-top{min-height:3.5rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.75rem}
.kpi{display:block;padding:.85rem 1rem;background:var(--jv-surface);border:1px solid var(--jv-border);border-left:4px solid var(--jv-brand);border-radius:var(--jv-radius);text-decoration:none;color:var(--jv-text)}
.kpi .n{font-size:1.6rem;font-weight:700;line-height:1.1;color:var(--jv-brand)}
.kpi.warn{border-left-color:#d97706}.kpi.warn .n{color:#b45309}
.kpi.alert{border-left-color:#dc2626}.kpi.alert .n{color:#b91c1c}
.kpi .l{font-size:.8rem;color:var(--jv-muted)}

/* inputs inside list tables (formset rows render bare widgets): same look as Bootstrap's small controls */
.be td>select,.be td>input:not([type=checkbox]):not([type=hidden]):not([type=radio]),.be td>textarea{display:block;width:100%;min-width:5rem;padding:.3rem .5rem;font-size:.85rem;line-height:1.4;color:var(--jv-text);background-color:#fff;border:1px solid var(--jv-border);border-radius:.4rem}
.be td>select:focus,.be td>input:focus,.be td>textarea:focus{outline:0;border-color:var(--jv-brand-2);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--jv-brand) 18%,transparent)}
.be td>input[type=checkbox]{width:1.1rem;height:1.1rem;accent-color:var(--jv-brand)}
/* pack converter (products, purchase orders, receiving) */
.pack-hint{font-size:.75rem;color:var(--jv-muted);margin-top:.15rem}
.pack-hint b{color:var(--jv-brand)}
.pack-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.pack-chips span{background:var(--jv-brand-soft);color:var(--jv-brand);border-radius:1rem;padding:.15rem .6rem;font-size:.78rem;font-weight:600}

/* sign-in screens: site colour across the top, white card */
.login-wrap{width:100%;max-width:440px;margin:0 auto}
/* solid colours, not a gradient: dark-mode extensions and contrast themes drop background images but keep the white text */
.login-page{min-height:100vh;background-color:var(--jv-bg)}
.login-brand{color:#fff;background-color:var(--jv-brand);padding:2.5rem 1rem 4.5rem}
.login-page main{margin-top:-3.5rem}
.login-site{font-size:1.5rem;font-weight:700;letter-spacing:.01em}
.login-host{display:inline-block;margin-top:.6rem;font-size:.78rem;color:#fff;background-color:rgba(0,0,0,.22);border-radius:1rem;padding:.15rem .7rem}
.login-page .card{border:0;box-shadow:0 10px 30px rgba(15,23,42,.12)}
.login-page .card-header{background:#fff;border:0;padding-top:1.1rem}
.signin .form-floating>.form-control{height:3.25rem;font-size:1rem}
.signin .form-floating>label{color:var(--jv-muted)}
.signin .pw-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);z-index:5;color:var(--jv-muted)}
.signin .btn-lg{font-size:1rem;padding:.7rem}

/* bottom tab bar (staff app, public mobile) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:1030;display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;background:var(--jv-surface);border-top:1px solid var(--jv-border);padding-bottom:env(safe-area-inset-bottom)}
.tabbar::-webkit-scrollbar{display:none}
.tabbar a{flex:1 0 4.6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:var(--tabbar-h);padding:.3rem 0;color:var(--jv-muted);text-decoration:none;font-size:.68rem;line-height:1.1}
.tabbar a i{font-size:1.2rem}
.tabbar a.active{color:var(--jv-brand);font-weight:600;box-shadow:inset 0 3px 0 var(--jv-brand)}
.has-tabbar{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + .5rem)}
@media (min-width:768px){.fe.has-tabbar{padding-bottom:0}}

/* public site (www) */
.fe label{font-size:.85rem;font-weight:600}
.fe-main{min-height:60vh}
.fe-footer{background:var(--jv-brand);color:rgba(255,255,255,.85)}
.fe-footer a{text-decoration:none;color:#fff}.fe-footer a:hover{color:var(--jv-sun)}
.fe-head .nav-link{font-weight:600;padding:.75rem 1rem}
.fe-sec-title{color:var(--jv-brand);font-weight:700;font-size:1.75rem}
.fe-prod{background:#fff;border:1px solid var(--jv-border);border-radius:var(--jv-radius);overflow:hidden;transition:box-shadow .2s}.fe-prod:hover{box-shadow:0 .5rem 1rem rgba(13,17,151,.12)}
.fe-tile{background:var(--jv-brand-soft);border-radius:.75rem;padding:1.5rem}
.fe-foot-title{font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.05em;color:var(--jv-sun);margin-bottom:.5rem}
.fe-hero-img{max-height:420px;object-fit:cover}
.photo-preview{max-width:100%;object-fit:cover}
.photo-view img{border-radius:var(--jv-radius)}
section[id]{scroll-margin-top:7rem}

/* footer credit (all sites) */
.site-credit{color:var(--jv-muted);padding:1rem 0 .5rem;line-height:1.6}
.site-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.site-credit a:hover{color:var(--jv-brand)}
.fe-footer .site-credit{color:rgba(255,255,255,.8)}
.fe-footer .site-credit a:hover{color:var(--jv-sun)}

/* htmx busy states */
.htmx-indicator{opacity:0;transition:opacity 1000ms ease-in;display:none}
.htmx-request.htmx-indicator{opacity:1;display:block;z-index:1061;position:fixed;top:10%;left:50%;transform:translateX(-50%)}
html.hx-busy::before{content:"";position:fixed;top:0;left:0;width:100%;height:3px;background:var(--jv-accent);z-index:2000;transform-origin:0 50%;animation:hxbar 1.2s ease-in-out infinite}
@keyframes hxbar{0%{transform:scaleX(0)}60%{transform:scaleX(.8)}100%{transform:scaleX(1);opacity:.25}}
@media (prefers-reduced-motion:reduce){html.hx-busy::before{animation:none;transform:scaleX(.6)}}

/* print: documents only */
@media print{
  .noprint,header.sticky-top,.tabbar,.pagebar,.site-credit{display:none!important}
  body{background:#fff!important}.has-tabbar{padding-bottom:0!important}.be main{padding:0!important}
  .doc,.card{border:0!important;box-shadow:none!important}
}

.upload-lock{position:fixed;inset:0;z-index:2100;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:16px;cursor:progress}
.upload-box{background:var(--bs-body-bg,#fff);border-radius:.5rem;padding:1.25rem;width:100%;max-width:360px;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.25)}

/* organisation chart: indented tree with guide lines, people as chips */
.org-tree,.org-tree ul{list-style:none;margin:0;padding-left:0}
.org-tree ul{margin-left:.5rem;padding-left:1rem;border-left:1px dashed var(--jv-border)}
.org-tree li{padding:.3rem 0}
.org-node{font-weight:600}
.org-sub{margin-top:.15rem}
.org-p{display:inline-block;margin:.1rem .15rem .1rem 0;padding:.05rem .5rem;border:1px solid var(--jv-border);border-radius:1rem;background:var(--jv-surface);color:var(--jv-text);text-decoration:none;font-size:.8rem}
a.org-p:hover{border-color:var(--jv-brand)}
.map-box{height:420px;border-radius:var(--jv-radius);border:1px solid var(--jv-border)}
@media (max-width:576px){.map-box{height:60vh}}
.qty-box{width:5rem}
.pos-thumb{width:64px;height:64px;object-fit:cover}.pos-photo{max-height:360px}

/* v1.27 visual editor and www pages */
.rt-edit{min-height:14rem;max-height:32rem;overflow:auto}.rt-edit:focus{outline:2px solid var(--jv-brand)}.rt-edit h2{font-size:1.4rem}.rt-edit h3{font-size:1.15rem}
.rt-edit img.rt-media{max-height:9rem;max-width:100%;border-radius:.25rem}.rt-chip{display:inline-block;padding:.1rem .5rem;border:1px solid #ced4da;border-radius:1rem;background:#f8f9fa;font-size:.85rem}
.rt-body h2{font-size:1.5rem;margin-top:1.5rem}.rt-body h3{font-size:1.2rem;margin-top:1.25rem}.rt-body blockquote{border-left:4px solid #dee2e6;padding-left:1rem;color:#6c757d}
.serp{font-family:arial,sans-serif;max-width:600px}.serp-url{color:#202124;font-size:.8rem}.serp-title{color:#1a0dab;font-size:1.15rem;line-height:1.3}.serp-desc{color:#4d5156;font-size:.85rem}
.fe-consent{position:fixed;left:0;right:0;bottom:0;z-index:1085;background:#212529;color:#fff;box-shadow:0 -2px 8px rgba(0,0,0,.25)}.fe-consent a{color:#fff;text-decoration:underline}