/* ── Olive Electric — Global Styles ─────────────────────────── */
/* ── PALETTE ──────────────────────────────────────────────────────────
   Owner 2026-08-11: the site and ERP were "very black". Tried a full white
   content theme; the owner preferred the earlier grey and asked for it
   "1 or 2 shade lighter". So: a dark GREY product, two steps up from where
   it started, with true-white text and edges you can actually see.

   Was: page #0d0d0d, cards #161616, panels #1a1a1a — all within a few shades
   of each other and of black, so nothing had an edge. Labels were #888.
   Density is untouched — the tight ERP spacing was a separate request. */
:root{
  --red:#cc0000;--red-dark:#a00000;
  /* LIGHT theme (owner 2026-08-11: "both lighter back erp and website … text black").
     Same blue-grey hue family as the dark theme it replaces, inverted:
     page darkest of the greys, cards lighter, raised surfaces lightest —
     while hover (card3) goes DARKER than card, because on a light ground
     feedback reads as a shadow, not a glow. */
  /* five shades below the first light cut (smaller step now — the gap to black
     text narrows from here, so shades shrink to keep the crisp look) */
  --black:#a9b2c1;      /* page background (kept the old var name)      */
  --card:#bfc6d3;       /* panels, cards, sidebar                       */
  --card2:#c8ceda;      /* raised surface / table headers               */
  --card3:#a1abbd;      /* hover + active (darker than card)            */
  --border:#6e798c;     /* visible edge on the darker grey              */
  --line:#939eb0;       /* quiet inner divider                          */
  --text:#111111;
  --muted:#2e3440;      /* ONE dark grey for every label (owner: black + dark grey only) */
  --hh:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-dark)}
img{display:block;max-width:100%}
button{cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit}

/* ── HEADER ───────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:1000;
  height:var(--hh);background:var(--card);
  border-bottom:2px solid var(--red);
  display:flex;align-items:center;padding:0 24px;gap:16px;
}
.logo{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:900;letter-spacing:-0.5px;flex-shrink:0}
.logo .o{color:var(--red);transition:color .2s;display:inline-flex;align-items:center;gap:2px}
.logo-icon{height:26px;width:26px;border-radius:50%;object-fit:cover}
.logo .e{color:var(--text);transition:color .2s}
.logo:hover .o{color:var(--text)}
.logo:hover .e{color:var(--red)}
/* complete OLIVE ELECTRIC logo (single image, replaces the split swirl+text) */
.logo-img{height:42px;width:auto;max-width:100%;display:block;transition:opacity .2s}
.logo:hover .logo-img{opacity:.85}
/* sidebar is narrow (220px) — fill its width instead of fixing height */
.admin-sidebar .logo{padding-right:16px}
.admin-sidebar .logo-img{width:100%;height:auto;max-height:34px}

.nav{display:flex;align-items:center;gap:4px;margin-left:24px}
.nav a{color:var(--muted);font-size:13px;font-weight:600;padding:6px 12px;border-radius:4px;transition:all .18s;letter-spacing:.3px;text-transform:uppercase}
.nav a:hover,.nav a.active{color:#fff;background:rgba(204,0,0,.18)}

.header-search{flex:1;max-width:360px;margin-left:auto;position:relative}
.header-search input{width:100%;background:var(--black);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:8px 36px 8px 14px;font-size:13px}
.header-search input:focus{outline:none;border-color:var(--red)}
.header-search button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted)}

.header-actions{display:flex;align-items:center;gap:8px;margin-left:12px}
.header-actions a,.header-actions button{
  background:none;border:none;color:var(--muted);font-size:13px;font-weight:600;
  padding:7px 12px;border-radius:4px;transition:all .18s;display:flex;align-items:center;gap:6px;
}
.header-actions a:hover,.header-actions button:hover{background:rgba(0,0,0,.05);color:#fff}
.cart-badge{background:var(--red);color:#fff;border-radius:50%;width:18px;height:18px;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:4px;font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border:none;transition:all .2s;cursor:pointer}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark);color:#fff}
.btn-outline{background:transparent;color:var(--text);border:2px solid var(--border)}
.btn-outline:hover{border-color:var(--red);color:var(--red)}
.btn-sm{padding:7px 14px;font-size:11px}
.btn-full{width:100%}

/* ── HERO ────────────────────────────────────────────────── */
.hero{background:linear-gradient(140deg,var(--black) 0%,#ca9898 45%,var(--black) 100%);padding:90px 32px;text-align:center;position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(204,0,0,.2) 0%,transparent 65%);pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:680px;margin:0 auto}
.hero h1{font-size:52px;font-weight:900;line-height:1.06;margin-bottom:18px;letter-spacing:-1.5px}
.hero h1 em{color:var(--red);font-style:normal}
.hero p{font-size:17px;color:var(--muted);margin-bottom:36px;line-height:1.7}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── FEATURES ────────────────────────────────────────────── */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:56px 32px;max-width:1060px;margin:0 auto}
.feat{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:28px 20px;text-align:center;transition:border-color .2s}
.feat:hover{border-color:var(--red)}
.feat-icon{font-size:34px;margin-bottom:14px}
.feat h3{font-size:15px;font-weight:700;margin-bottom:8px}
.feat p{font-size:12px;color:var(--muted);line-height:1.6}

/* ── SECTION HEADER ──────────────────────────────────────── */
.sec-header{padding:48px 32px 24px;max-width:1240px;margin:0 auto}
.sec-title{font-size:26px;font-weight:800;margin-bottom:4px}
.sec-title em{color:var(--red);font-style:normal}
.sec-sub{color:var(--muted);font-size:13px}

/* ── CHIPS ───────────────────────────────────────────────── */
.chips-section{background:var(--card);padding:40px 32px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.chips-title{text-align:center;font-size:22px;font-weight:800;margin-bottom:20px}
.chips-title em{color:var(--red);font-style:normal}
.chips{display:flex;flex-wrap:wrap;gap:8px;max-width:880px;margin:0 auto;justify-content:center}
.chip{background:var(--card2);border:1px solid var(--border);color:var(--text);padding:7px 16px;border-radius:20px;font-size:11px;font-weight:600;transition:all .18s;cursor:pointer;text-decoration:none}
.chip:hover,.chip.active{background:var(--red);border-color:var(--red);color:#fff}

/* ── PRODUCT GRID ────────────────────────────────────────── */
.products-layout{display:flex;gap:20px;max-width:1240px;margin:0 auto;padding:24px 32px 48px}
.sidebar{width:215px;flex-shrink:0}
.product-area{flex:1;min-width:0}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:14px}

/* product card */
.pcard{background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .18s,transform .18s}
.pcard:hover{border-color:var(--red);transform:translateY(-2px)}
.pcard-img{aspect-ratio:1;overflow:hidden;background:var(--card2);position:relative}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.pcard:hover .pcard-img img{transform:scale(1.07)}
.pcard-zoom{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;font-size:22px;cursor:pointer}
.pcard:hover .pcard-zoom{opacity:1}
.pcard-body{padding:10px 12px;flex:1;display:flex;flex-direction:column;gap:4px}
.pcard-name{font-size:12px;font-weight:600;line-height:1.35;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-price{font-size:14px;font-weight:800;color:var(--red)}
.pcard-foot{padding:8px 10px 10px;display:flex;align-items:center;gap:6px;border-top:1px solid var(--border)}
.qty-wrap{display:flex;align-items:center;background:var(--black);border:1px solid var(--border);border-radius:4px;overflow:hidden;flex-shrink:0}
.qty-btn{background:none;border:none;color:#2e3440;width:26px;height:28px;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.qty-btn:hover{background:var(--red);color:#fff}
.qty-input{width:28px;height:28px;background:none;border:none;color:#111;text-align:center;font-size:12px;font-weight:600}
.add-btn{flex:1;background:var(--red);color:#fff;border:none;height:28px;border-radius:4px;font-size:11px;font-weight:700;transition:background .18s;white-space:nowrap}
.add-btn:hover{background:var(--red-dark)}

/* ── SIDEBAR (category list) ─────────────────────────────── */
.cat-box{background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;position:sticky;top:calc(var(--hh) + 12px)}
.cat-head{background:var(--red);color:#fff;padding:11px 15px;font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.cat-item{display:flex;align-items:center;justify-content:space-between;padding:9px 15px;font-size:11px;font-weight:600;border-bottom:1px solid var(--line);cursor:pointer;color:var(--muted);text-decoration:none;transition:background .15s,color .15s}
.cat-item:hover{background:#a1abbd;color:#111}
.cat-item.active{background:var(--red);color:#fff}

/* ── PAGINATION ──────────────────────────────────────────── */
.pagination{display:flex;gap:6px;justify-content:center;padding:24px 0}
.page-btn{background:var(--card);border:1px solid var(--border);color:#2e3440;width:36px;height:36px;border-radius:4px;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.page-btn:hover,.page-btn.active{background:var(--red);border-color:var(--red);color:#fff}

/* ── PRODUCT DETAIL ──────────────────────────────────────── */
.product-detail{max-width:1100px;margin:0 auto;padding:40px 32px;display:grid;grid-template-columns:1fr 1fr;gap:48px}
.product-gallery{}
.product-main-img{aspect-ratio:1;background:var(--card);border-radius:8px;overflow:hidden;border:1px solid var(--border);margin-bottom:12px;cursor:zoom-in}
.product-main-img img{width:100%;height:100%;object-fit:cover}
.product-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.product-thumb{width:60px;height:60px;border:2px solid var(--border);border-radius:4px;overflow:hidden;cursor:pointer;transition:border-color .18s}
.product-thumb.active,.product-thumb:hover{border-color:var(--red)}
.product-thumb img{width:100%;height:100%;object-fit:cover}
.product-info{}
.product-cat{font-size:11px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.product-title{font-size:26px;font-weight:800;margin-bottom:10px;line-height:1.2}
.product-price{font-size:28px;font-weight:900;color:var(--red);margin-bottom:16px}
.product-price small{font-size:14px;color:var(--muted);font-weight:400}
.product-stock{font-size:12px;margin-bottom:20px}
.product-stock.in{color:#0b8a30}
.product-stock.out{color:#dc0000}
.product-desc{font-size:14px;color:#2e3440;line-height:1.7;margin-bottom:24px}
.product-actions{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.product-actions .qty-wrap{height:44px}
.product-actions .qty-btn{width:36px;height:44px;font-size:18px}
.product-actions .qty-input{width:44px;height:44px;font-size:14px}
.product-actions .add-btn{height:44px;font-size:13px;padding:0 20px;flex:none;width:auto;border-radius:4px}
.product-specs{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:16px}
.product-specs h4{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.spec-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}
.spec-row:last-child{border-bottom:none}
.spec-row span:first-child{color:var(--muted)}

/* ── CART ────────────────────────────────────────────────── */
.cart-page{max-width:1100px;margin:0 auto;padding:40px 32px;display:grid;grid-template-columns:1fr 360px;gap:32px}
.cart-items{}
.cart-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--border)}
.cart-item-img{width:80px;height:80px;border-radius:6px;overflow:hidden;background:var(--card);flex-shrink:0}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-info{flex:1}
.cart-item-name{font-size:14px;font-weight:600;margin-bottom:4px}
.cart-item-price{font-size:13px;color:var(--red);font-weight:700;margin-bottom:8px}
.cart-item-remove{background:none;border:none;color:var(--muted);font-size:11px;padding:0;cursor:pointer}
.cart-item-remove:hover{color:#dc0000}
.cart-summary{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:20px;height:fit-content;position:sticky;top:calc(var(--hh) + 12px)}
.cart-summary h3{font-size:15px;font-weight:700;margin-bottom:16px}
.summary-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px solid var(--border);color:var(--muted)}
.summary-row:last-of-type{border-bottom:none;font-size:15px;font-weight:700;color:var(--text)}
.summary-row.total{margin-top:8px}

/* ── FORMS ───────────────────────────────────────────────── */
.form-page{max-width:420px;margin:60px auto;padding:0 24px}
.form-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:32px}
.form-title{font-size:22px;font-weight:800;margin-bottom:4px}
.form-sub{font-size:13px;color:var(--muted);margin-bottom:24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;background:var(--black);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:10px 14px;font-size:14px;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red)}
.field textarea{resize:vertical;min-height:80px}
.form-err{color:#dc0000;font-size:13px;margin-top:4px}
.form-switch{font-size:13px;color:var(--muted);text-align:center;margin-top:16px}
.form-switch a{color:var(--red)}

/* ── ACCOUNT ─────────────────────────────────────────────── */
.account-page{max-width:1000px;margin:0 auto;padding:40px 32px;display:grid;grid-template-columns:220px 1fr;gap:28px}
.account-nav{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px;height:fit-content}
.account-nav a{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:4px;font-size:13px;font-weight:600;color:#2e3440;transition:all .18s}
.account-nav a:hover,.account-nav a.active{background:rgba(204,0,0,.15);color:var(--red)}
.account-content{}
.account-section{display:none}
.account-section.active{display:block}

/* ── ORDER CARD ──────────────────────────────────────────── */
.order-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:12px}
.order-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.order-id{font-size:12px;font-weight:700;color:var(--muted)}
.order-status{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}
.status-pending{background:rgba(255,193,7,.15);color:#ffc107}
.status-confirmed{background:rgba(33,150,243,.15);color:#2196f3}
.status-shipped{background:rgba(156,39,176,.15);color:#9c27b0}
.status-delivered{background:rgba(76,175,80,.15);color:#0b8a30}
.status-cancelled{background:rgba(244,67,54,.15);color:#f44336}
.order-items-preview{font-size:12px;color:var(--muted)}
.order-total{font-size:14px;font-weight:700;color:var(--red);margin-top:8px}

/* ── ADMIN ───────────────────────────────────────────────── */
.admin-layout{display:flex;min-height:100vh}
.admin-sidebar{width:220px;background:var(--card);border-right:1px solid var(--border);padding:16px 0;flex-shrink:0;position:sticky;top:0;height:100vh}
.admin-sidebar .logo{padding:0 16px 20px;border-bottom:1px solid var(--border);margin-bottom:8px}
.admin-nav a{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:13px;font-weight:700;color:#2e3440;transition:all .18s}
.admin-nav a:hover,.admin-nav a.active{background:rgba(204,0,0,.15);color:var(--red)}
/* Nav group color variants — each group (parent + sub-items) always shows its colour */
.admin-nav a.nav-amber{color:#b36200}
.admin-nav a.nav-green{color:#0b8a30}
.admin-nav a.nav-blue{color:#0b5ed7}
.admin-nav a.nav-purple{color:#8a2be2}
.admin-nav a.nav-amber:hover,.admin-nav a.nav-amber.active{background:rgba(245,158,11,.18);color:#8a4c00}
.admin-nav a.nav-green:hover,.admin-nav a.nav-green.active{background:rgba(16,185,129,.18);color:#046c26}
.admin-nav a.nav-blue:hover,.admin-nav a.nav-blue.active{background:rgba(59,130,246,.18);color:#0847a6}
.admin-nav a.nav-purple:hover,.admin-nav a.nav-purple.active{background:rgba(139,92,246,.18);color:#6a1cb8}
.admin-main{flex:1;padding:32px;min-width:0}
.admin-title{font-size:22px;font-weight:800;margin-bottom:24px}
/* The page header is named by erp-ux.js — it replaces the section word ("Administration",
   "Transactions") with the screen actually open, and centres it. That script is injected at
   runtime, so it runs after the first paint: hiding the header from JS was always too late and
   the section word flashed up before being replaced. Hiding it HERE, in the stylesheet the page
   loads in its head, means the word is never painted at all.
   The animation is the safety net: with no JS at all the header still appears at 1.2s, so a
   script failure can never leave a screen with no title. erp-ux sets visibility inline as soon as
   it has the name, which is sooner. */
.admin-main .admin-title{visibility:hidden;animation:oeTitleShow 0s linear 2.5s forwards;
  text-transform:uppercase;letter-spacing:.4px}
/* the other two places a screen names itself, kept in step */
.oe-ent-ttl,.bz-rpthdr .t{text-transform:uppercase;letter-spacing:.4px}
@keyframes oeTitleShow{to{visibility:visible}}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:20px}
.stat-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.stat-value{font-size:28px;font-weight:900;color:var(--text)}
.stat-value.red{color:var(--red)}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{text-align:left;padding:10px 12px;background:var(--card2);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
.data-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--card2)}
.table-wrap{background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.table-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border)}
.table-header h3{font-size:15px;font-weight:700}

/* ── TOAST ───────────────────────────────────────────────── */
.toast{position:fixed;bottom:22px;right:22px;z-index:9999;background:#ffffff;border:1px solid var(--red);border-radius:8px;padding:12px 18px;font-size:13px;font-weight:600;color:var(--text);transform:translateY(80px);opacity:0;transition:all .3s;pointer-events:none;box-shadow:0 4px 24px rgba(0,0,0,.5)}
.toast.show{transform:translateY(0);opacity:1}
.toast.success{border-color:#0b8a30}
.toast.error{border-color:#dc0000}

/* ── LIGHTBOX ────────────────────────────────────────────── */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:99999;display:none;align-items:center;justify-content:center;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:4px}
.lightbox-close{position:absolute;top:16px;right:20px;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;opacity:.7}
.lightbox-close:hover{opacity:1}

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer{background:#0a0a0a;border-top:1px solid var(--border);padding:48px 32px 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;max-width:1200px;margin:0 auto 32px}
.footer-brand .logo{margin-bottom:12px}
.footer-brand p{font-size:13px;color:#d9dee6;line-height:1.6;max-width:260px}
.footer-col h4{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:#ffffff;margin-bottom:14px}
.footer-col a{display:block;font-size:13px;color:#ffffff;margin-bottom:8px;transition:color .18s}
.footer-col a:hover{color:var(--red)}
.footer-bottom{max-width:1200px;margin:0 auto;padding-top:20px;border-top:1px solid #3a4150;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#d9dee6}

/* ── EMPTY STATE ─────────────────────────────────────────── */
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty h3{font-size:18px;font-weight:700;margin-bottom:8px;color:var(--text)}
.empty p{font-size:13px;margin-bottom:20px}

/* ── UTILITIES ───────────────────────────────────────────── */
.text-red{color:var(--red)}
.text-muted{color:var(--muted)}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.loading{text-align:center;padding:40px;color:var(--muted)}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:900px){
  .products-layout{flex-direction:column}
  .sidebar{width:100%}
  .cat-box{position:static}
  .hero h1{font-size:34px}
  .features{grid-template-columns:1fr}
  .cart-page,.product-detail{grid-template-columns:1fr}
  .account-page{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
/* The nav (Home / Shop / Contact) is hidden on a phone, so Contact rides in the action bar
   instead - see .ha-contact in the page headers. On desktop the nav has it and this stays off.
   ⚠ Must be `.header-actions .ha-contact` (0,2,0), not a bare `.ha-contact` (0,1,0): line 69's
   `.header-actions a` is (0,1,1) and beats a single class WHEREVER it sits in the file, so the
   plain version left Contact showing twice on desktop. */
.header-actions .ha-contact{display:none}
@media(max-width:600px){
  .nav{display:none}
  .header-actions .ha-contact{display:inline-flex;align-items:center}
  .hero h1{font-size:26px}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* ===================== Mobile responsiveness ===================== */
/* Wrapped tables scroll sideways instead of overflowing the page */
.table-wrap,.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mobile-menu-btn{display:none}
.sidebar-backdrop{display:none}

@media(max-width:900px){
  /* Admin: the sidebar becomes a slide-in drawer opened by a hamburger button */
  .admin-layout{display:block;min-height:100vh}
  .admin-sidebar{position:fixed;top:0;left:0;height:100vh;width:250px;max-width:84vw;z-index:1200;
    transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto;
    box-shadow:2px 0 22px rgba(0,0,0,.6)}
  body.sidebar-open .admin-sidebar{transform:translateX(0)}
  .admin-main{padding:14px 12px 48px;padding-top:60px}
  .mobile-menu-btn{display:flex;position:fixed;top:8px;left:8px;z-index:1100;width:44px;height:44px;
    align-items:center;justify-content:center;background:var(--red);color:#fff;border:none;border-radius:9px;
    font-size:22px;line-height:1;box-shadow:0 2px 12px rgba(0,0,0,.5);cursor:pointer}
  body.sidebar-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1150}

  /* Trim large desktop paddings */
  .sec-header{padding:26px 16px 14px}
  .features{padding:30px 16px}
  .form-page{margin:34px auto;padding:0 16px}
  .products-layout,.cart-page,.product-detail,.account-page{padding-left:14px;padding-right:14px}

  /* Modals fit the viewport and scroll inside */
  .modal-box{max-width:96vw;max-height:92vh;overflow:auto}

  /* Denser tables */
  .data-table{font-size:12px}
  .data-table th,.data-table td{padding:8px 7px}
  /* full-page entry modals collapse to full width on mobile */
  .fp-modal{left:0 !important}
}

/* ── Full-page ERP entry modal (Busy-style): add class "fp-modal" to any fixed full-screen
   overlay div; it fills the page beside the 220px sidebar, and its box fills + scrolls.
   Works over inline-styled overlays via !important. Mark the button row with "entry-actions". ── */
.fp-modal{ left:var(--oe-sb-w,220px) !important; align-items:stretch !important; justify-content:flex-start !important; }
.fp-modal > div, .fp-modal > form{ width:100% !important; max-width:none !important; height:100vh !important; max-height:100vh !important; border-radius:0 !important; margin:0 !important; overflow-y:auto !important; }
.entry-actions{ position:sticky; bottom:-1px; background:var(--card,#151515); padding:12px 20px; margin-top:16px; border-top:1px solid var(--border,#262626); display:flex; gap:10px; align-items:center; z-index:5; }

/* SCREEN ONLY. Without `screen` this whole phone layer also applied while PRINTING — the print
   viewport on a phone really is ~375px wide, so `html,body{overflow-x:hidden;max-width:100%}` below
   took effect and the print engine CLIPPED the document instead of paginating it: printing the
   catalogue from a phone produced 2 sheets instead of 47 (owner 2026-08-03). Paper layout belongs to
   the @media print blocks; a phone-width rule must never reach it. */
@media screen and (max-width:600px){
  /* clip any stray horizontal overflow on phones (scroll regions have their own containers) */
  html,body{overflow-x:hidden;max-width:100%}
  /* Public header wraps; search drops to its own full-width row.
     🚩 This rule said `.header` for months — no element has that class, every page uses
     `.site-header`, so NONE of it applied. The header stayed nowrap at 64px with a 259px
     unshrinkable logo, which crushed the search box to 52px and pushed it off the right
     edge of the screen. Fixed 2026-08-05. */
  .site-header{flex-wrap:wrap;min-height:54px;height:auto;padding:7px 10px;gap:8px}
  /* .logo is flex-shrink:0 by default — on a 375px screen that alone eats 259px.
     Cap it at 42vw so the logo and the Cart/Login actions share ONE row: at 58vw they
     did not fit together, the actions wrapped, and the sticky header grew to 3 rows
     (149px of an 812px screen). Two rows ≈ 100px. */
  .site-header .logo{flex-shrink:1;min-width:0;font-size:18px}
  .site-header .logo-img{height:30px;max-width:42vw;object-fit:contain}
  .nav{margin-left:0}
  .header-search{order:6;flex:1 1 100%;max-width:none;margin:2px 0 0}
  .header-actions{margin-left:auto;flex-wrap:wrap;justify-content:flex-end;gap:6px}
  /* ── Thumb-sized hit areas (were 28px tall / an 18px search icon) ─────────
     44px is the Apple/Android minimum. Padding alone did not get there, so set
     min-height and centre the label inside it. */
  .header-actions a,.header-actions button{
    padding:8px 12px;font-size:13px;min-height:44px;display:inline-flex;align-items:center}
  .header-search input{padding-right:48px;height:44px;box-sizing:border-box}
  .footer-social a{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center}
  .header-search button{width:44px;height:44px;right:0;display:flex;align-items:center;
    justify-content:center;font-size:17px}
  .btn{padding:12px 18px;font-size:13px;min-height:44px}
  .logo{font-size:18px}
  .logo-img{height:32px}
  .product-detail{gap:18px}
  .cart-item-img{width:64px;height:64px}
  /* Full-screen modals on phones */
  .modal-box{max-width:100vw;width:100vw;min-height:100vh;border-radius:0}

  /* ── iOS auto-zooms the whole page when you focus an input under 16px ──────
     It then leaves the page zoomed in, which is why the shop felt "stuck wide"
     after using search or the enquiry form. 16px stops it at the source.
     Scoped to the PUBLIC site: admin pages carry <body data-page="…"> and their
     Busy grids depend on 11–13px cells. */
  body:not([data-page]) input:not([type=checkbox]):not([type=radio]):not([type=range]),
  body:not([data-page]) select,
  body:not([data-page]) textarea{font-size:16px}

  /* Thumb-sized controls on the storefront */
  body:not([data-page]) button{min-height:44px}
  /* the search icon sets its own explicit 44×44 above — keep it square, not stretched */
  body:not([data-page]) .header-search button{min-height:0}
  /* Quantity steppers were 26×28 / 28×28 — too small to hit while holding a phone */
  body:not([data-page]) .qty-btn{width:42px;height:44px;font-size:18px}
  body:not([data-page]) .qty-input{width:46px;height:44px;font-size:16px}
  /* …but a product card is only ~167px wide in the 2-column phone grid, and a full-size
     stepper (130px) beside the Add button does not fit — it pushed the button outside the
     card, which has overflow:hidden, so "Add to Cart" got clipped. Let the footer WRAP:
     stepper on one line, a full-width 44px Add button under it. */
  body:not([data-page]) .pcard-foot{flex-wrap:wrap;gap:8px;justify-content:center}
  body:not([data-page]) .pcard-foot .add-btn{flex:1 1 100%;height:44px;font-size:13px}
  body:not([data-page]) .pcard .qty-btn{width:36px;height:38px}
  body:not([data-page]) .pcard .qty-input{width:38px;height:38px;font-size:16px}
  /* Category chips were 31px tall at 11px text — the main way people browse parts */
  body:not([data-page]) .chip{padding:11px 16px;font-size:12px;min-height:42px;
    display:inline-flex;align-items:center}
  .chips-section{padding:26px 14px}
  body:not([data-page]) .nav a{padding:10px 12px;min-height:44px;display:inline-flex;align-items:center}
}

/* Native date/time pickers render dark (calendar icon visible, popup themed) */
input[type=date],input[type=time],input[type=datetime-local],input[type=month]{color-scheme:dark}

/* ── Financial-year selector (inside the sidebar) ────────────────────────── */
.fy-wrap{padding:6px 16px 12px}
.fy-lbl{font-size:10px;color:#777;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;font-weight:700}
.fy-select{width:100%;background:var(--card2);color:var(--text);border:1px solid var(--border);border-radius:6px;
  padding:7px 9px;font-size:12px;font-weight:700;cursor:pointer}
.fy-select:hover{border-color:var(--red)}
.fy-current{width:100%;background:var(--card2);color:var(--text);border:1px solid var(--border);border-radius:6px;
  padding:7px 9px;font-size:12px;font-weight:700;box-sizing:border-box}
.print-only{display:none}
@media print{
  /* hide all app chrome */
  .admin-sidebar,.site-header,.header,.mobile-menu-btn,#mobileMenuBtn,.sidebar-backdrop,
  .float-print-btn,.tx-pager,.no-print,.detail-overlay,.dd-close,.admin-main .btn{display:none!important}
  html,body{margin:0!important;padding:0!important;background:#fff!important;color:#000!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .admin-layout{display:block!important}
  .admin-main{padding:0!important;margin:0!important}
  /* flatten the dark theme to readable black-on-white for printed records */
  .admin-main,.admin-main *{color:#111!important;background:transparent!important;box-shadow:none!important}
  .admin-main table{border-collapse:collapse!important;width:100%!important}
  .admin-main th,.admin-main td{border:1px solid #ccc!important;padding:5px 8px!important}
  .admin-main th{background:#f0f0f0!important}
  a[href]:after{content:''!important}
  .print-only{display:block!important}
}

/* ── Busy-style voucher entry (shared: PI / SI / Purchase / Journal …) ──
   Spreadsheet feel: numbered rows, visible grid lines, seamless cell inputs,
   right-aligned amounts, bold totals row, function-key legend bar. */
/* Compact voucher grid — rows are only a hair taller than the text so more lines fit
   on smaller screens (was 30px rows; owner: "boxes just a little bigger than the text"). */
.bz-grid { width:100%;border-collapse:collapse;font-size:12.5px; }
.bz-grid thead th { background:var(--card2);color:var(--muted);text-align:left;padding:3px 8px;border:1px solid var(--border);font-weight:600;white-space:nowrap;position:sticky;top:0;z-index:5; }
.bz-grid thead th.bz-r { text-align:right; }
.bz-grid tbody { counter-reset: bzrow; }
.bz-grid tbody tr:not(.bz-norow) { counter-increment: bzrow; }
.bz-grid tbody tr:not(.bz-norow) td.bz-sn::before { content: counter(bzrow); }
.bz-grid td { border:1px solid #1f1f1f;padding:0;vertical-align:middle;height:23px; }
.bz-grid td.bz-sn { text-align:center;color:#2e3440;background:var(--card3);font-size:11px;width:34px;min-width:34px; }
.bz-grid td .dd-inp, .bz-grid td input, .bz-grid td select {
  width:100%;height:100%;min-height:22px;border:0 !important;background:transparent !important;
  color:var(--text);padding:1px 8px;box-sizing:border-box;font-size:12.5px;line-height:1.2;border-radius:0 !important;
}
.bz-grid td input:focus, .bz-grid td select:focus {
  outline:none !important;background:rgba(204,0,0,.10) !important;box-shadow:inset 0 0 0 1.5px rgba(204,0,0,.65);
}
.bz-grid td input[type=number] { text-align:right; }
.bz-grid td.bz-amt { text-align:right;padding:1px 9px;color:#111;font-variant-numeric:tabular-nums;white-space:nowrap; }
.bz-grid td.bz-ro { padding:1px 8px;color:#2e3440; }
.bz-grid tfoot td { border:1px solid var(--border);background:var(--card2);font-weight:700;color:#111;padding:4px 9px;font-variant-numeric:tabular-nums; }
.bz-grid tfoot td.bz-r { text-align:right; }
.bz-grid .pi-x { background:none;border:none;color:#dc0000;cursor:pointer;font-size:14px;padding:2px 6px;line-height:1; }

/* Busy header strip: LABEL value pairs on one line */
.bz-hd { display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;margin-bottom:4px; }
.bz-hd .bz-f { display:flex;align-items:center;gap:8px;min-width:0; }
.bz-hd .bz-l { font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap; }
.bz-hd .bz-v { font-size:13px;color:#111;font-weight:700;font-variant-numeric:tabular-nums; }

/* Tax summary box (bottom-left, like Busy) */
.bz-tax { border:1px solid var(--border);border-radius:6px;background:var(--card2);padding:8px 10px;font-size:12px;min-width:260px; }
.bz-tax table { width:100%;border-collapse:collapse; }
.bz-tax th { color:var(--muted);font-size:10.5px;text-align:right;padding:2px 6px;border-bottom:1px solid var(--line);font-weight:600; }
.bz-tax th:first-child { text-align:left; }
.bz-tax td { text-align:right;padding:2px 6px;color:#2e3440;font-variant-numeric:tabular-nums; }
.bz-tax td:first-child { text-align:left;color:#999; }

/* Function-key legend bar (bottom, like Busy's [Esc-Quit] [F2-Done] strip) */
.bz-keybar { display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:#3d4550;font-family:Consolas,monospace; }
.bz-keybar b { color:#2e3440;font-weight:700; }

/* ════════════════════════════════════════════════════════════════════
   BUSY-STYLE GRID — applied to EVERY table across the ERP
   (Administration lists, Transactions, Reports, China, etc.)
   One rule set so the whole back-office looks like a spreadsheet grid.
   ════════════════════════════════════════════════════════════════════ */
/* Density matches the Add-PI voucher grid (owner 2026-07-31: "do space management in full ERP
   like I have done in new PI") — 12.5px type, 3px/2px cell padding ≈ the PI's 23px rows. */
.data-table, .rpt-tbl, .inv-table { border-collapse:collapse; font-size:12.5px; }
/* Header: dark Busy bar, full cell borders, sticky */
.data-table thead th,
.rpt-tbl thead th,
.inv-table thead th {
  background:var(--card2) !important; color:var(--text) !important;
  border:1px solid var(--border) !important; padding:3px 8px !important;
  font-weight:700 !important; white-space:nowrap; position:sticky; top:0; z-index:3;
}
/* Body cells: gridlines on all four sides (the spreadsheet look) */
.data-table tbody td,
.rpt-tbl tbody td,
.inv-table tbody td {
  border:1px solid var(--line) !important; padding:2px 8px !important; line-height:1.35; vertical-align:middle;   /* gridlines lift with the palette */
}
/* Placeholder cells ("Loading…", "No rows") carry inline padding:20-30px in 84 JS templates —
   colspan is what marks them, and this outranks the inline style so they stay grid-height. */
.data-table td[colspan], .rpt-tbl td[colspan] { padding:6px 9px !important; }
/* Controls INSIDE a grid row shrink to row height — a stacked block button must not make a 90px
   row. .admin-main prefix out-specifies the runtime density layer erp-ux.js injects later
   (.admin-main .btn-sm, same-specificity !important would otherwise win by source order). */
.admin-main .data-table .btn, .admin-main .data-table .btn-sm,
.admin-main .rpt-tbl .btn, .admin-main .rpt-tbl .btn-sm {
  /* 10.5px left these looking like fine print beside 13px rows (owner 2026-10-16) */
  padding:2px 8px !important; font-size:11.5px !important; display:inline-flex !important;
  width:auto !important; margin:1px 2px 1px 0 !important;
}
.admin-main .data-table td select { padding:2px 6px !important; font-size:11.5px !important; margin:0 !important; }
.data-table tbody tr:last-child td { border-bottom:1px solid var(--line) !important; }  /* re-show last row line */
/* Right-align + tabular figures for numeric columns (opt-in via .right, already used widely) */
.data-table .right, .rpt-tbl .right, .inv-table .right { text-align:right; font-variant-numeric:tabular-nums; }
/* Footer / total rows read as a bold grid strip */
.data-table tfoot td, .rpt-tbl tfoot td, .inv-table tfoot td {
  border:1px solid var(--border) !important; background:var(--card2); font-weight:700; color:#111;
}
/* Keep the existing hover, just lighter over the grid */
.data-table tbody tr:hover td, .rpt-tbl tbody tr:hover td, .inv-table tbody tr:hover td { background:rgba(204,0,0,.06) !important; }
/* Preserve report special rows (heading / total / net) on top of the gridlines */
.rpt-tbl .rh   td, .rpt-tbl td.rh   { background:var(--card2) !important; }
.rpt-tbl .rtot td, .rpt-tbl td.rtot { background:#cc9ea5 !important; color:var(--text) !important; }
.rpt-tbl .rnet td, .rpt-tbl td.rnet { background:var(--card2) !important; }

/* ════════════════════════════════════════════════════════════════════
   ONE ADD/EDIT PANEL for the whole ERP.
   Every master add/edit form (Administration) opens as the SAME docked
   panel — full width, but height = its content (no forced full height →
   no big empty gap, no whole-panel scroll). It only scrolls if the form
   is genuinely taller than the screen, and then the fields scroll while
   the docked panel stays put — exactly like the PI (items scroll, frame
   fixed). Fields are packed tight to avoid needless scrolling.
   ════════════════════════════════════════════════════════════════════ */
#accountForm, #agFormWrap, #unitForm, #mcForm,
#groupForm, #typeForm, #vehicleForm {
  position:fixed !important; top:0; right:0; left:var(--oe-sb-w,220px); z-index:870;
  max-height:100vh; overflow-y:auto;          /* height = content; scroll only if it exceeds the screen */
  margin:0 !important; max-width:none !important; width:auto !important;
  border:0 !important; border-left:1px solid var(--border) !important; border-radius:0 !important;
  padding:16px 26px 14px !important;
  box-shadow:-16px 0 50px rgba(0,0,0,.55); background:var(--card);
}
/* a thin accent line at the very top of every panel */
#accountForm::before, #agFormWrap::before, #unitForm::before, #mcForm::before,
#groupForm::before, #typeForm::before, #vehicleForm::before {
  content:''; display:block; height:3px; background:var(--red); margin:-16px -26px 12px;
}
/* Tight, uniform spacing so short forms fit with no scroll (kills the big gaps) */
#accountForm .field, #agFormWrap .field, #unitForm .field, #mcForm .field,
#groupForm .field, #typeForm .field, #vehicleForm .field { margin-bottom:8px; }
#accountForm .field label, #agFormWrap .field label, #unitForm .field label,
#mcForm .field label, #groupForm .field label, #typeForm .field label, #vehicleForm .field label { margin-bottom:2px; }
/* the form's section headings pack tighter too */
#accountForm h3, #accountForm > div[style*="cc6666"], #mcForm h3 { margin:8px 0 4px !important; }
#accountForm > div, #agFormWrap > div, #unitForm > div, #mcForm > div { max-width:1000px; }
@media (max-width:900px){
  #accountForm, #agFormWrap, #unitForm, #mcForm, #groupForm, #typeForm, #vehicleForm { left:0; }
}

/* ── Public header on TABLET widths (601–900px) ──────────────────────────────
   The header only learned to wrap at ≤600px, so between there and the desktop
   layout it stayed on one nowrap row: logo (339px) + search (360px) + actions
   (114px) + gutters ≈ 893px, which pushed .header-actions to x827 on an 800px
   screen and made the WHOLE PAGE scroll sideways by 27px. Verified against
   production before touching it — this was long-standing, not new.
   Wrapping is a no-op once everything fits, so desktop is untouched. */
@media screen and (min-width:601px) and (max-width:900px){
  .site-header{flex-wrap:wrap;height:auto;min-height:var(--hh);padding:8px 14px;gap:10px}
  .site-header .logo{flex-shrink:1;min-width:0}
  .site-header .logo-img{max-width:38vw;object-fit:contain}
  /* search drops to its own full-width row rather than squeezing the actions off-screen */
  .header-search{order:6;flex:1 1 100%;max-width:none;margin:2px 0 0}
  .header-actions{margin-left:auto}
}

/* Sticky footer for the tall admin panel (account/product-type forms): the
   Save/Cancel row stays pinned at the bottom while the fields scroll. */
#accountForm > div:last-child, #groupForm > div:last-child, #typeForm > div:last-child {
  position:sticky; bottom:-14px; background:var(--card); z-index:2;
  padding:10px 0 4px; margin-top:8px; border-top:1px solid var(--border);
}

/* Bill Sundry Master — same docked panel; title (top) + Save/Cancel (bottom)
   stay fixed while ONLY the fields scroll (like PI). */
.bs-modal-bg { align-items:stretch !important; justify-content:flex-start !important; left:var(--oe-sb-w,220px); }
.bs-modal-bg .bs-card {
  max-width:none !important; width:100% !important; height:100vh; max-height:100vh;
  border-radius:0 !important; border:0; margin:0; padding:0 26px !important; overflow-y:auto;
}
.bs-modal-bg .bs-card > div:first-child {                    /* title row — fixed on top */
  position:sticky; top:0; background:var(--card); z-index:3; padding:16px 0 10px; margin-bottom:0 !important;
}
.bs-modal-bg .bs-card .entry-actions {                       /* Save/Cancel — fixed at bottom */
  position:sticky; bottom:0; background:var(--card); z-index:3;
  margin:0 -26px; padding:12px 26px; border-top:1px solid var(--border);
}
.bs-modal-bg .bs-card .bs-field { margin-bottom:8px; }       /* tighter fields */
@media (max-width:900px){ .bs-modal-bg { left:0; } }

/* ── Independent scroll regions inside a voucher (PI pattern) ──
   Each list scrolls on its OWN: items show ~15 rows then scroll, bill
   sundry ~4 rows then scroll. Header row + totals row stay pinned. */
.oe-grid-scroll { overflow:auto; border:1px solid #202020; border-radius:4px;
  /* Focus-driven scrolling (Enter/arrow walk) must clear the PINNED header + totals bars,
     else the row you land on hides behind them. scroll-padding = the bars' heights. */
  scroll-padding-top:34px; scroll-padding-bottom:40px; }
.oe-grid-scroll > table { border:0; }
.oe-grid-scroll thead th { position:sticky; top:0; z-index:4; }        /* column header stays */
.oe-grid-scroll tfoot td { position:sticky; bottom:0; z-index:4; background:var(--card2); }  /* totals stay */
.oe-rows-15 { max-height:560px; }   /* ~15 item rows, then scroll */
.oe-rows-4  { max-height:210px; }   /* ~4 sundry rows, then scroll */

/* Inline label + field on ONE line (Busy "Party name .........[value]") — saves vertical space */
.bz-line { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.bz-line > label { flex:0 0 150px; font-size:12px; color:var(--muted); margin:0; }
.bz-line > input, .bz-line > select, .bz-line > .bz-line-field { flex:1; min-width:0; }
.bz-line > .bz-line-field { position:relative; }

/* PI voucher: the body itself must NOT scroll — only the two inner grids do.
   Items region fills the leftover height (scrolls internally, capped ~15 rows);
   the sundry keeps its ~4-row cap. Result: exactly two scrolls, no outer one. */
#piModal .entry-bd, #purModal .entry-bd, #invModal .entry-bd { display:flex; flex-direction:column; overflow:hidden; }
#piModal #piItems, #purModal #purItems, #invModal #invItems { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
#piModal #piItems > .oe-grid-scroll.oe-rows-15,
#purModal #purItems > .oe-grid-scroll.oe-rows-15,
#invModal #invItems > .oe-grid-scroll.oe-rows-15 { flex:1 1 auto; min-height:90px; }

/* Journal/Contra voucher (superadmin/journal.html): same rule — the voucher body
   never scrolls, only the lines grid does. #id beats .fp-modal>div's overflow:auto. */
#entryModal > div { overflow:hidden !important; display:flex; flex-direction:column; }
#entryModal #entryForm { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden; }
#entryModal #entryForm > .oe-grid-scroll { flex:0 1 auto; min-height:120px; }

/* Credit/Debit Note drawer: the return-lines grid scrolls, not the drawer. */
#cnModal .oe-grid-scroll { max-height:min(560px, calc(100vh - 360px)); }

/* ════════════════════════════════════════════════════════════════════
   ERP APP-SHELL — the PAGE never scrolls; only the content area does.
   Admin pages have .admin-layout; the public storefront does NOT, so it
   keeps normal page scroll. The sidebar and the main content each scroll
   inside their own fixed-height column.
   ════════════════════════════════════════════════════════════════════ */
html:has(.admin-layout), body:has(.admin-layout) { height:100%; overflow:hidden; }
.admin-layout  { height:100vh; overflow:hidden; align-items:stretch; }
.admin-sidebar { height:100vh; overflow-y:auto; }
/* Content column is a fixed-height flex stack: the page title/toolbar stay pinned,
   and the main list/table region fills the leftover height and scrolls INSIDE.
   (overflow-y:auto stays as a fallback for pages without a recognised list box.) */
.admin-main    { height:100vh; overflow-y:auto; display:flex; flex-direction:column; }
.admin-main > .table-wrap,
.admin-main > .scrollbox,
.admin-main > .table-scroll,
.admin-main > .tab-pane.active,          /* International Accounts / tabbed pages: active tab scrolls inside */
.admin-main > div[style*="overflow-x"],
.admin-main > div[style*="overflow-y"] {
  flex:1 1 auto; min-height:0; overflow:auto;
}

/* ════════════════════════════════════════════════════════════════════
   SIDEBAR: AUTO-HIDE + FLY-OUT SUB-MENUS  (desktop only)
   Owner 2026-07-30: "left tab is always open taking big part of screen,
   can we work like it comes and goes" + "sub tabs should come in front
   making left window big, so that other tabs do not shift up and down".

   Two independent behaviours:
   1. body.oe-sb-hidden  → the sidebar leaves the flex flow (position:fixed,
      slid off-screen), so .admin-main reclaims the whole width. A 14px hot
      zone on the left edge, or the ☰ button, slides it back in over the
      content (body.oe-sb-peek) — nothing reflows while it comes and goes.
   2. Top-level sub-menus are position:absolute, so they are OUT OF FLOW:
      opening one no longer pushes every head below it down the screen. It
      paints in front of them, and the sidebar widens to give it room.
   Mobile (≤900px) keeps its own drawer — every rule here is desktop-scoped.
   ════════════════════════════════════════════════════════════════════ */
.oe-sb-toggle { display:none; }
.oe-sb-hot    { display:none; }
/* TWO widths, because two kinds of chrome need different answers — nothing may hard-code 220px.
   --oe-sb-w    the space the bar RESERVES: 220 pinned, 0 hidden. Full-screen entry overlays
                (PI/voucher/master windows) dock against this. It must NOT follow the fly-out
                widening, or every voucher would open with a 250px dead strip down its left.
   --oe-sb-full the width the bar currently PAINTS, fly-out column included. The Busy blank
                work area and the ☰ button use this so neither ends up under the panel. */
body { --oe-sb-w:220px; --oe-sb-full:220px; }
body.oe-sb-hidden { --oe-sb-w:0px; --oe-sb-full:0px; }
@media (max-width:900px) { body { --oe-sb-w:0px; --oe-sb-full:0px; } }

@media (min-width:901px) {
  .admin-sidebar { transition:width .16s ease, transform .18s ease; }

  /* ── 1. comes and goes ── */
  .oe-sb-toggle {
    /* 790 keeps it above ordinary page content but BELOW every full-screen entry overlay
       (detail-drawer 801, PI/voucher 900, credit-note 1000) — a voucher is modal, so the
       menu button must not float over its title bar. */
    display:flex; position:fixed; top:9px; left:9px; z-index:790;
    width:30px; height:30px; align-items:center; justify-content:center;
    background:var(--card2); color:var(--text); border:1px solid var(--border); border-radius:7px;
    font-size:15px; line-height:1; cursor:pointer; opacity:.55;
    transition:opacity .15s, left .18s ease, color .15s;
  }
  .oe-sb-toggle:hover { opacity:1; color:#111; border-color:#aeb6c2; }
  /* parked just clear of the open sidebar so it never covers a menu item */
  body:not(.oe-sb-hidden) .oe-sb-toggle { left:calc(var(--oe-sb-full,220px) + 8px); }

  body.oe-sb-hidden .admin-sidebar {
    position:fixed; top:0; left:0; height:100vh; z-index:1250;
    transform:translateX(-100%); box-shadow:3px 0 26px rgba(0,0,0,.65);
  }
  body.oe-sb-hidden.oe-sb-peek .admin-sidebar { transform:translateX(0); }
  /* the ☰ button lives where the sidebar used to be — keep content clear of it */
  body.oe-sb-hidden .admin-main { padding-left:48px; }
  body.oe-sb-hidden .oe-sb-hot {
    display:block; position:fixed; top:0; left:0; width:14px; height:100vh; z-index:1240;
  }

  /* ── 2. sub-menus in front, nothing shifts ──
     The panel is position:absolute → OUT OF FLOW, so opening a group cannot push the heads
     below it down. `top` stays auto, which resolves to the static position: the panel lines
     up with its own head. It sits in a SECOND COLUMN (left:220px) rather than over the heads,
     so every head stays visible and clickable while a group is open. */
  .admin-nav { position:relative; }
  .admin-nav > div[id$="Subs"] {
    position:absolute; left:220px; right:0; z-index:800;   /* above #oeMainBlank's 700 */
    background:var(--card); border:1px solid var(--border); border-left:3px solid var(--red);
    border-radius:0 8px 8px 0; box-shadow:7px 9px 30px rgba(0,0,0,.66);
    max-height:74vh; overflow-y:auto; padding:3px 0;
  }
  /* The bar grows to hold that column — free while hidden (it is fixed and overlays the work
     area), a deliberate widen while pinned. Only for as long as a menu is actually open. */
  body.oe-subs-open .admin-sidebar { width:474px; }
  body.oe-subs-open { --oe-sb-full:474px; }
  /* A hidden bar occupies NO width whatever its menus are doing — this must out-rank the
     oe-subs-open rule above (same specificity, so it has to come after it). */
  body.oe-sb-hidden, body.oe-sb-hidden.oe-subs-open { --oe-sb-w:0px; --oe-sb-full:0px; }
  /* …but the HEAD column must not grow with it, or the heads would stretch to 474px. */
  body.oe-subs-open .admin-sidebar > .logo,
  body.oe-subs-open .admin-sidebar > .fy-wrap,
  body.oe-subs-open .admin-nav > a { width:220px; box-sizing:border-box; }
  /* The logo is width:100%, so a wider bar makes it TALLER and pushes the whole menu
     down ~9px — the exact vertical jitter this change exists to remove. Pin it to the
     size it has at the bar's natural 220px (220 − 2×16px padding). */
  .admin-sidebar .logo-img { max-width:188px; }
}

/* ════════════════════════════════════════════════════════════════════
   ERP DENSITY — space management like the Add-PI window, everywhere
   (owner 2026-07-31: "do space management in full ERP like I have done
   in new PI, make things maximum in grid format"). Desktop-scoped: the
   ≤900px mobile drawer/padding rules above stay exactly as they are.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width:901px) {
  .admin-main  { padding:10px 14px; }
  .admin-title { font-size:15px; margin-bottom:8px; }
  .table-header { padding:7px 10px; }
  .table-header h3 { font-size:13px; }
  /* forms: PI-style tight fields (labels 10.5px over 13px inputs, half the old air) */
  .admin-layout .field { margin-bottom:8px; }
  .admin-layout .field label { font-size:10.5px; margin-bottom:3px; }
  .admin-layout .field input, .admin-layout .field select, .admin-layout .field textarea {
    padding:5px 8px; font-size:13px;
  }
  /* stat cards: readable but no longer a quarter of the screen */
  .stats-grid { gap:10px; margin-bottom:14px; }
  .stat-card  { padding:10px 14px; }
  .stat-value { font-size:20px; }
  /* buttons: toolbar weight, not hero weight — voucher footers keep their own size below */
  .admin-layout .btn    { padding:7px 14px; font-size:12px; }
  .admin-layout .btn-sm { padding:4px 10px; font-size:11px; }
  .entry-actions .btn   { padding:9px 18px; font-size:12.5px; }   /* the PI Save/Quit stays as built */
}


/* ── LIVELY DARK ──────────────────────────────────────────────────────
   Colour and contrast only — no spacing changes. Gives every surface a
   visible edge and pushes what you READ to true white. */

.admin-title,.sec-title,.chips-title,.hero h1,
.pm-card h3,.card h3,.panel h3,h1,h2,h3{color:var(--text)}

.card,.panel,.feat,.pcard,.pm-card,.chan,.admin-card,.table-wrap{
  background:var(--card);border-color:var(--border)}

/* Zebra striping is what actually puts light into a dense dark grid — on a
   1000-row parts list it does more than lifting the background alone. White
   at low alpha, so it rides over status-coloured rows instead of hiding them. */
.data-table thead th{background:var(--card2);color:var(--text);border-bottom:1px solid var(--border)}
.data-table td{border-color:var(--line)}
.data-table tbody tr:nth-child(even) td{background:rgba(0,0,0,.045)}
.data-table tbody tr:hover td,
.rpt-tbl tbody tr:hover td{background:var(--card3) !important;color:var(--text)}

input,select,textarea{background:var(--card2);color:var(--text);border-color:var(--border)}
input::placeholder,textarea::placeholder{color:#3d4550}
input:focus,select:focus,textarea:focus{border-color:var(--red);background:var(--card3)}

.admin-nav a{color:#2e3440}
.admin-nav a:hover{background:var(--card3);color:var(--text)}
.admin-nav a.active{background:rgba(204,0,0,.22);color:#ff9b93}

/* The fly-out is absolutely positioned (a second column, out of flow) and had
   no background of its own — give it one so it never blends into what it
   overlaps. */
.admin-nav div[id$="Subs"]{background:var(--card);border:1px solid var(--border);
  border-radius:0 8px 8px 0;box-shadow:10px 12px 34px rgba(0,0,0,.5)}
.admin-nav div[id$="Subs"] div[id$="Subs"]{background:transparent;border:0;box-shadow:none;border-radius:0}

.btn-outline:hover{border-color:var(--text);color:var(--text);background:rgba(255,255,255,.07)}

hr{border-color:var(--border)}
::-webkit-scrollbar-thumb{background:#5a6478}
::-webkit-scrollbar-track{background:var(--black)}

/* ── Front-end logo strip stays BLACK ─────────────────────────────────
   Owner 2026-08-11: "in front end make logo strip black". The rest of the
   product lightened to slate grey, but the public site's header bar reads
   better as a black band under the white wordmark — and it is only on the
   9 storefront pages (.site-header is not used anywhere in the admin). */
.site-header{background:#0a0b0e;border-bottom:2px solid var(--red)}
.site-header .nav a{color:#cdd4de}
.site-header .nav a:hover,.site-header .nav a.active{color:#fff;background:rgba(204,0,0,.22)}
.site-header .header-actions a,.site-header .header-actions button{color:#cdd4de}
.site-header .header-actions a:hover,.site-header .header-actions button:hover{color:#fff}
.site-header .header-search input{background:#16181e;border-color:#333a46;color:#fff}
.site-header .header-search input::placeholder{color:#8b93a1}
.site-header .header-search button{color:#8b93a1}

/* the logo artwork is white — keep it on the black strip the owner asked for */
.admin-sidebar .logo{background:#0a0b0e;border-radius:0 0 10px 0}

/* owner 2026-08-12: the whole left panel reads bold */
.admin-sidebar{font-weight:700}

/* owner 2026-08-12: every table heading bold — !important beats the per-page 600s */
th{font-weight:700!important}

/* the footer is dark: ANY text inside it defaults light, classed or not */
.site-footer{color:#d9dee6}
.site-footer p{color:#d9dee6}