/* =========================================================
   Royal Stock Register — shared design system
   Used by the office back-office and the supplier portal.
   ========================================================= */

:root{
  --paper:#f3f2ec; --surface:#ffffff; --surface-2:#faf9f4; --line:#e1ddd0;
  --ink:#1b1c20; --ink-dim:#5b5c62;
  --accent:#1e3a72; --accent-soft:#e8edf7;
  --accent2:#7a1e2e; --accent2-soft:#f6e8ea;
  --ok:#2f7d55; --ok-soft:#e6f2ea;
  --warn:#a8721c; --warn-soft:#faf1de;
  --crit:#c23b3b; --crit-soft:#fbe9e8;
  --focus:#2f5fb0;
  --brand-navy:#1e3a72; --brand-navy-deep:#0f2148; --brand-maroon:#7a1e2e; --brand-ink:#ffffff;
  --font-display:Georgia,'Iowan Old Style','Palatino Linotype','Book Antiqua',serif;
  --font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,'Cascadia Code','SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --radius:8px;
  --sidebar-w:224px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#121317; --surface:#1a1c22; --surface-2:#20232a; --line:#2d2f37;
    --ink:#eeece6; --ink-dim:#a7a6a1;
    --accent:#8fb0ea; --accent-soft:#1c2740;
    --accent2:#e08a96; --accent2-soft:#3a1f24;
    --ok:#5cbf8c; --ok-soft:#173226;
    --warn:#e0a53f; --warn-soft:#3a2c12;
    --crit:#e2726f; --crit-soft:#3a1b1a;
    --focus:#8fb0ea;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#121317; --surface:#1a1c22; --surface-2:#20232a; --line:#2d2f37;
  --ink:#eeece6; --ink-dim:#a7a6a1;
  --accent:#8fb0ea; --accent-soft:#1c2740;
  --accent2:#e08a96; --accent2-soft:#3a1f24;
  --ok:#5cbf8c; --ok-soft:#173226;
  --warn:#e0a53f; --warn-soft:#3a2c12;
  --crit:#e2726f; --crit-soft:#3a1b1a;
  --focus:#8fb0ea;
  color-scheme:dark;
}

*{box-sizing:border-box;}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }

html,body{height:100%;}
body{
  background:var(--paper); color:var(--ink); font-family:var(--font-ui);
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased; margin:0;
}
h1,h2,h3{font-family:var(--font-display); text-wrap:balance; margin:0; font-weight:700;}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
::selection{background:var(--accent-soft);}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
/* Always show the full logo artwork (crown + ROYAL + tagline) at its real
   proportions — never crop it. Each context below sets only a width; height
   is automatic so the image's actual aspect ratio is preserved exactly. */
.brand-logo{object-fit:contain; display:block; height:auto;}
/* Exact colors sampled from the client's logo artwork (Royal-Logo-Revised.png) —
   used wherever the "Quality Meets Elegance!" tagline is set as text, so it
   matches the wordmark's two-tone treatment precisely. */
.tag-blue, .tag-red{font-weight:700; font-style:italic;}
.tag-blue{color:#283891;}
.tag-red{color:#800607;}

/* ---------- buttons / forms (shared) ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:6px; border:1px solid transparent; padding:10px 16px; font-weight:600; cursor:pointer; font-size:13.5px; line-height:1; white-space:nowrap;}
.btn[hidden]{display:none;}
.btn-primary{background:var(--brand-navy); color:#fff;}
.btn-primary:hover{background:var(--brand-navy-deep);}
.btn-maroon{background:var(--brand-maroon); color:#fff;}
.btn-maroon:hover{filter:brightness(1.1);}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-danger{background:var(--crit-soft); color:var(--crit); border-color:transparent;}
.btn-danger:hover{filter:brightness(0.97);}
.btn-sm{padding:6px 11px; font-size:12.5px;}
.btn:disabled{opacity:.55; cursor:not-allowed;}

.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.04em;}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:6px;
  background:var(--surface-2); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); background:var(--surface); }
.field .hint{font-size:12px; color:var(--ink-dim); margin-top:5px;}
.field .error{font-size:12.5px; color:var(--crit); margin-top:5px; font-weight:600;}
.field-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px;}
.checkbox-row{display:flex; align-items:center; gap:8px;}
.checkbox-row input{width:auto;}

fieldset{border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin:0 0 20px;}
legend{font-family:var(--font-display); font-size:15px; padding:0 8px; color:var(--ink);}

.feature-toggle-list{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.feature-toggle{background:var(--surface); padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:20px;}
.feature-toggle-label{font-weight:600; font-size:14px; margin-bottom:3px;}
.feature-toggle-desc{font-size:12.5px; color:var(--ink-dim); max-width:52ch; line-height:1.5;}
.switch{position:relative; display:inline-block; width:42px; height:24px; flex:none;}
.switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1;}
.switch-track{position:absolute; inset:0; background:var(--line); border-radius:20px; transition:background .15s ease;}
.switch-track::before{content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:var(--surface); border-radius:50%; transition:transform .15s ease; box-shadow:0 1px 3px rgba(0,0,0,.25);}
.switch input:checked + .switch-track{background:var(--ok);}
.switch input:checked + .switch-track::before{transform:translateX(18px);}
.switch input:focus-visible + .switch-track{outline:2px solid var(--focus); outline-offset:2px;}

/* ---------- alerts / flash ---------- */
.alert{border-radius:var(--radius); padding:12px 16px; font-size:13.5px; margin-bottom:16px; border:1px solid transparent;}
.alert-ok{background:var(--ok-soft); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 30%, transparent);}
.alert-err{background:var(--crit-soft); color:var(--crit); border-color:color-mix(in srgb, var(--crit) 30%, transparent);}
.alert ul{margin:6px 0 0; padding-left:18px;}

/* ---------- pills / chips / status (shared) ---------- */
.pill{display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:20px;}
.pill.in{background:var(--ok-soft); color:var(--ok);} .pill.low{background:var(--warn-soft); color:var(--warn);} .pill.out{background:var(--crit-soft); color:var(--crit);}
.pill.role-super_admin{background:var(--crit-soft); color:var(--crit);}
.pill.role-admin{background:var(--accent2-soft); color:var(--accent2);}
.pill.role-staff{background:var(--accent-soft); color:var(--accent);}
.pill.role-supplier{background:var(--ok-soft); color:var(--ok);}
.pill.status-active{background:var(--ok-soft); color:var(--ok);}
.pill.status-inactive{background:var(--crit-soft); color:var(--crit);}
.clearance-price{display:inline-flex; align-items:baseline; gap:6px; flex-wrap:wrap;}
.clearance-price .was{text-decoration:line-through; color:var(--ink-dim); font-size:.9em;}
.clearance-price .now{color:var(--crit); font-weight:700;}
.clearance-tag{display:inline-block; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:1.5px 6px; border-radius:20px; background:var(--crit-soft); color:var(--crit);}
.chip{border:1px solid var(--line); background:var(--surface); color:var(--ink-dim); padding:6px 13px; border-radius:20px; font-size:12.5px; font-weight:600; cursor:pointer;}
.chip.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.chip.status-in.active{background:var(--ok); border-color:var(--ok);}
.chip.status-low.active{background:var(--warn); border-color:var(--warn);}
.chip.status-out.active{background:var(--crit); border-color:var(--crit);}
.chipset{display:flex; gap:6px; flex-wrap:wrap;}
select.sel{border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:7px 10px; font-size:12.5px; color:var(--ink);}

/* ---------- generic data card / table (office) ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); min-width:0;}
.card-pad{padding:20px;}

/* Reusable two-column page layout (show/dashboard pages). Grid items default
   to min-width:auto, which stops a column holding a wide table from ever
   shrinking below the table's content width — forcing the whole page to
   overflow horizontally instead of the table scrolling in its own box.
   min-width:0 here is what fixes that; the breakpoint collapses to one
   column entirely once there isn't room for two. */
.split-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:20px; align-items:start; min-width:0;}
.split-grid.even{grid-template-columns:1fr 1fr;}
.split-grid > *{min-width:0;}
@media (max-width:860px){
  .split-grid, .split-grid.even{grid-template-columns:1fr;}
}

.stat-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; min-width:0;}
.stat-grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; min-width:0;}
.stat-grid-3 > *, .stat-grid-4 > *{min-width:0;}
@media (max-width:640px){
  .stat-grid-3, .stat-grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:420px){
  .stat-grid-3, .stat-grid-4{grid-template-columns:1fr;}
}

.row-actions{flex-wrap:wrap;}

.recovery-codes-grid{display:grid; grid-template-columns:repeat(2,1fr);}
@media (max-width:420px){ .recovery-codes-grid{grid-template-columns:1fr;} }

.visitor-map{height:480px;}
@media (max-width:600px){ .visitor-map{height:320px;} }
.table-wrap{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:auto; position:relative; max-width:100%;}
.table-wrap.has-scroll-hint::after{content:""; position:absolute; top:0; right:0; bottom:0; width:28px; background:linear-gradient(to right, transparent, rgba(0,0,0,.16)); pointer-events:none; opacity:1; transition:opacity .15s ease; border-radius:0 var(--radius) var(--radius) 0;}
.table-wrap.has-scroll-hint.scroll-hint-end::after{opacity:0;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .table-wrap.has-scroll-hint::after{background:linear-gradient(to right, transparent, rgba(0,0,0,.4));} }
:root[data-theme="dark"] .table-wrap.has-scroll-hint::after{background:linear-gradient(to right, transparent, rgba(0,0,0,.4));}
table.dtable{width:100%; border-collapse:collapse; min-width:640px;}
table.dtable thead th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); white-space:nowrap;}
table.dtable tbody td{padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.dtable tbody tr:last-child td{border-bottom:none;}
table.dtable tbody tr:hover{background:var(--surface-2);}
td.qty, th.qty{text-align:right;}
.row-actions{display:flex; gap:8px; justify-content:flex-end;}
.swatch-chip{width:30px; height:30px; border-radius:6px; overflow:hidden; border:1px solid var(--line); flex:none;}

/* ---------- order progress bar ---------- */
.order-progress-wrap{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px 16px; overflow-x:auto;}
.order-progress{display:flex; min-width:560px;}
.order-progress-compact{min-width:420px;}
.order-progress-step{flex:1; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 4px; color:var(--ink-dim);}
.order-progress-line{position:absolute; top:17px; left:-50%; width:100%; height:2px; background:var(--line); z-index:0;}
.order-progress-step:first-child .order-progress-line{display:none;}
.order-progress-step.is-done .order-progress-line{background:var(--brand-navy);}
.order-progress-node{position:relative; z-index:1; width:36px; height:36px; border-radius:50%; background:var(--surface); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-dim); transition:background-color .15s, border-color .15s, color .15s;}
.order-progress-node svg{width:18px; height:18px;}
.order-progress-step.is-done .order-progress-node{background:var(--brand-navy); border-color:var(--brand-navy); color:#fff;}
.order-progress-step.is-current .order-progress-node{border-color:var(--brand-maroon); color:var(--brand-maroon); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-maroon) 16%, transparent);}
.order-progress-label{margin-top:9px; font-size:11.5px; font-weight:600; line-height:1.3; max-width:100px;}
.order-progress-step.is-done .order-progress-label{color:var(--ink);}
.order-progress-step.is-current .order-progress-label{color:var(--brand-maroon);}
.order-progress-cancelled{display:flex; align-items:center; gap:10px; background:var(--crit-soft); border:1px solid color-mix(in srgb, var(--crit) 30%, transparent); border-radius:var(--radius); padding:14px 16px; font-size:13px; color:var(--ink);}
@media (max-width:520px){
    .order-progress-label{font-size:10.5px; max-width:74px;}
    .order-progress-node{width:30px; height:30px;}
    .order-progress-node svg{width:15px; height:15px;}
    .order-progress-line{top:14px;}
}
.swatch-chip svg{display:block; width:100%; height:100%;}
.swatch-photo{display:block; width:100%; height:100%; object-fit:cover; cursor:zoom-in;}

.stats{display:flex; gap:10px; flex-wrap:wrap;}
.stat-tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 18px; min-width:120px;}
.stat-tile b{display:block; font-family:var(--font-mono); font-size:22px;}
.stat-tile span{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim);}
.stat-tile.warn b{color:var(--warn);} .stat-tile.crit b{color:var(--crit);} .stat-tile.ok b{color:var(--ok);}

.empty{text-align:center; padding:60px 20px; color:var(--ink-dim);}
.empty b{display:block; color:var(--ink); font-size:16px; margin-bottom:6px;}
.pagination{display:flex; gap:6px; flex-wrap:wrap; margin-top:16px;}

/* =========================================================
   Auth (login) — shared split-screen
   ========================================================= */
.auth-screen{min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr;}
@media (max-width:860px){ .auth-screen{grid-template-columns:1fr;} }
.auth-brand{
  background:radial-gradient(120% 140% at 15% 0%, var(--accent2-soft), transparent 55%), linear-gradient(155deg, var(--surface) 0%, var(--paper) 100%);
  color:var(--ink); padding:56px 48px; display:flex; flex-direction:column; position:relative; overflow:hidden; border-right:1px solid var(--line);
}
.auth-brand .mark{display:flex; align-items:center; gap:14px;}
.auth-brand .mark .brand-logo{width:210px;}
/* Pitch is pushed to the bottom of the panel (auto top-margin eats the
   remaining flex space) so the logo + tagline stay grouped together near
   the top, with the tagline always directly under the logo. */
.auth-brand .pitch{max-width:420px; margin-top:auto;}
.auth-brand .pitch h1{font-size:clamp(26px,4vw,38px); color:var(--ink); line-height:1.15; margin-bottom:14px;}
.auth-brand .pitch p{color:var(--ink-dim); font-size:15.5px; max-width:38ch;}
.auth-brand .tagline{font-family:var(--font-display); font-style:italic; font-size:18px; margin-top:12px;}
.auth-brand .badge{display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.09em; background:var(--accent-soft); border:1px solid var(--line); padding:5px 12px; border-radius:20px; margin-bottom:16px; color:var(--accent);}
.auth-panel{display:flex; align-items:center; justify-content:center; padding:32px; background:var(--surface);}
.auth-card{width:100%; max-width:380px;}
.auth-card .eyebrow{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-dim); margin-bottom:6px;}
.auth-card h2{font-size:26px; margin-bottom:6px;}
.auth-card .sub{color:var(--ink-dim); font-size:14px; margin-bottom:26px;}
.auth-card .fineprint{margin-top:20px; font-size:12px; color:var(--ink-dim); text-align:center;}
.auth-card .switcher{margin-top:14px; font-size:12.5px; text-align:center; color:var(--ink-dim);}

/* =========================================================
   Landing chooser
   ========================================================= */
.landing{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(160deg,var(--paper),var(--surface-2)); padding:40px 20px; text-align:center;}
.landing .mark{display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:26px;}
.landing .mark .brand-logo{width:230px;}
.landing h1{font-size:clamp(26px,4vw,36px); margin-bottom:10px;}
.landing p.tag{font-family:var(--font-display); font-style:italic; margin-bottom:34px;}
.landing .doors{display:flex; gap:18px; flex-wrap:wrap; justify-content:center; max-width:680px;}
.door{width:270px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:26px 22px; text-align:left; transition:transform .15s ease, box-shadow .15s ease;}
.door:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.1);}
.door h3{font-size:18px; margin-bottom:6px;}
.door p{font-size:13.5px; color:var(--ink-dim); margin-bottom:18px; min-height:40px;}

/* =========================================================
   Office back-office shell
   ========================================================= */
.office-shell{min-height:100vh; display:flex;}
.office-sidebar{
  width:var(--sidebar-w); flex:none; background:var(--surface); color:var(--ink); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.office-sidebar .mark{display:flex; align-items:center; gap:10px; padding:20px 18px 16px;}
.office-sidebar-close{display:none; margin-left:auto; background:none; border:none; font-size:24px; line-height:1; color:var(--ink-dim); cursor:pointer; padding:4px 6px;}
.office-sidebar .mark .brand-logo{width:100px;}
.office-sidebar .mark .cap{font-size:9.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.08em;}
.office-nav{padding:8px 10px; display:flex; flex-direction:column; gap:2px; flex:1;}
.office-nav a{color:var(--ink-dim); padding:9px 12px; border-radius:6px; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:10px;}
.office-nav a:hover{background:var(--surface-2); text-decoration:none;}
.office-nav a.active{background:var(--accent-soft); color:var(--accent);}
.office-nav svg{width:16px; height:16px; flex:none;}
.office-nav .section-label{font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-dim); opacity:.75; padding:14px 12px 4px;}
.office-sidebar .who{padding:14px 18px; border-top:1px solid var(--line); font-size:12.5px;}
.office-sidebar .who b{display:block; font-size:13px;}
.office-sidebar .who span{color:var(--ink-dim); font-size:11.5px;}
.office-sidebar .who form{margin-top:10px;}
.office-sidebar .who button{background:none; border:1px solid var(--line); color:var(--ink); border-radius:6px; padding:6px 11px; font-size:12px; cursor:pointer; width:100%;}
.office-sidebar .who button:hover{background:var(--surface-2);}

.office-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.office-topbar{background:var(--surface); border-bottom:1px solid var(--line); padding:16px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.office-topbar h1{font-size:21px;}
.office-topbar .crumb{font-size:12.5px; color:var(--ink-dim); margin-top:2px;}
.office-content{padding:24px 26px; flex:1;}
.toolbar{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px;}
.toolbar .spacer{flex:1;}
.toolbar .result-count{font-size:12.5px; color:var(--ink-dim);}

.office-menu-btn{display:none; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; width:36px; height:36px; align-items:center; justify-content:center; cursor:pointer;}

@media (max-width:820px){
  .office-sidebar{position:fixed; z-index:50; transform:translateX(-100%); transition:transform .18s ease; box-shadow:0 0 0 100vmax rgba(0,0,0,0);}
  .office-sidebar.open{transform:translateX(0); box-shadow:0 0 0 100vmax rgba(0,0,0,.35);}
  .office-menu-btn{display:inline-flex;}
  .office-sidebar-close{display:block;}
}

/* =========================================================
   Supplier portal shell
   ========================================================= */
.appbar{background:var(--surface); color:var(--ink); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:18px; padding:10px 20px; flex-wrap:wrap;}
.appbar .brand{display:flex; align-items:center; gap:10px; margin-right:auto;}
.appbar .brand .brand-logo{width:140px; flex:none;}
.appbar .brand .cap{font-size:10.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.09em; line-height:1; margin-top:3px;}
.appbar .search{position:relative; flex:1 1 260px; max-width:360px;}
.appbar .search input{width:100%; padding:9px 12px 9px 34px; border-radius:20px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink);}
.appbar .search input::placeholder{color:var(--ink-dim);}
.appbar .search input:focus{background:var(--surface);}
.appbar .search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:14px; height:14px; opacity:.55; color:var(--ink-dim);}
.view-toggle{display:flex; background:var(--surface-2); border:1px solid var(--line); border-radius:20px; padding:3px; gap:2px;}
.view-toggle button{background:none; border:none; color:var(--ink-dim); padding:7px 14px; border-radius:16px; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px;}
.view-toggle button.active{background:var(--accent); color:#fff;}
.view-toggle svg{width:14px; height:14px;}
.icon-btn{background:var(--surface-2); border:1px solid var(--line); color:var(--ink); width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.icon-btn[hidden]{display:none;}
.icon-btn:hover{background:var(--accent-soft);}
.icon-btn svg{width:16px; height:16px;}
/* On a touch screen there's no hover to reveal the title tooltip, so the
   topbar's icon-only buttons show their title text as a small label
   underneath instead — desktop keeps the plain icon-only look. */
@media (max-width:700px){
  .appbar .icon-btn{width:auto; height:auto; min-width:58px; flex-direction:column; gap:3px; padding:7px 5px 6px; border-radius:9px;}
  .appbar .icon-btn::after{content:attr(title); font-size:8.5px; font-weight:600; letter-spacing:.01em; color:var(--ink-dim); line-height:1.15; text-align:center; max-width:66px; white-space:normal;}
}
.user-chip{display:flex; align-items:center; gap:9px;}
.user-chip .avatar{width:32px; height:32px; border-radius:50%; background:var(--brand-maroon); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;}
.user-chip .who{line-height:1.2;}
.user-chip .who b{display:block; font-size:13px;} .user-chip .who span{font-size:11px; color:rgba(255,255,255,.65);}
.signout{background:none; border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:6px; padding:7px 12px; font-size:12.5px; cursor:pointer;}
.signout:hover{background:rgba(255,255,255,.12);}
.offline-banner{background:var(--warn-soft); color:var(--warn); text-align:center; font-size:12.5px; font-weight:600; padding:7px; display:none;}
.offline-banner.show{display:block;}

.subbar{background:var(--surface-2); border-bottom:1px solid var(--line); padding:18px 20px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.subbar .title-block h1{font-size:24px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.datepill{font-family:var(--font-ui); font-size:11.5px; font-weight:600; background:var(--accent-soft); color:var(--accent); padding:4px 10px; border-radius:20px; vertical-align:middle;}
.subbar .title-block p{color:var(--ink-dim); font-size:13.5px; margin-top:4px;}

.dashboard-banner{margin:10px 20px 0; border-radius:10px; overflow:hidden; position:relative; display:flex; align-items:stretch; min-height:126px; background:radial-gradient(140% 180% at 88% 8%, rgba(122,30,46,.55), transparent 60%), linear-gradient(155deg, var(--brand-navy) 0%, var(--brand-navy-deep) 78%);}
.dashboard-banner[hidden]{display:none;}
.dashboard-banner-slides{flex:1 1 auto; min-width:0; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; color:#fff;}
.dashboard-banner-content{min-width:0;}
.dashboard-banner-eyebrow{font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:rgba(255,255,255,.7); font-weight:700; margin-bottom:5px;}
.dashboard-banner-headline{font-family:var(--font-display); font-size:19px; color:#fff; margin:0 0 4px; font-weight:700;}
.dashboard-banner-text{font-size:12.5px; color:rgba(255,255,255,.85); max-width:44ch; margin:0;}
.dashboard-banner-cta{flex:none; background:#fff; color:var(--brand-navy-deep); font-weight:700; font-size:12.5px; padding:9px 18px; border-radius:6px; white-space:nowrap; text-decoration:none;}
.dashboard-banner-cta:hover{background:#f1f1f1; text-decoration:none;}
.dashboard-banner-dots{display:flex; gap:6px; align-items:center; flex:none;}
.dashboard-banner-dot{width:6px; height:6px; border-radius:50%; border:none; background:rgba(255,255,255,.4); cursor:pointer; padding:0;}
.dashboard-banner-dot.active{background:#fff;}
.dashboard-banner-mesh{flex:none; display:flex; align-items:center; margin:0 46px 0 0;}
.dashboard-banner-mesh .mesh-tile{width:84px; height:84px; flex:none; border-radius:12px; overflow:hidden; background:#fff; border:2px solid rgba(255,255,255,.92); box-shadow:0 5px 14px rgba(0,0,0,.4);}
.dashboard-banner-mesh .mesh-tile:not(:first-child){margin-left:-24px;}
.dashboard-banner-mesh .mesh-tile:nth-child(1){transform:rotate(-6deg); z-index:1;}
.dashboard-banner-mesh .mesh-tile:nth-child(2){transform:translateY(-6px); z-index:2;}
.dashboard-banner-mesh .mesh-tile:nth-child(3){transform:rotate(6deg); z-index:1;}
.dashboard-banner-mesh .mesh-tile svg{display:block; width:100%; height:100%;}
.dashboard-banner-dismiss{position:absolute; top:8px; right:10px; z-index:3; background:none; border:none; color:rgba(255,255,255,.6); font-size:18px; line-height:1; cursor:pointer; padding:4px;}
.dashboard-banner-dismiss:hover{color:#fff;}
@media (max-width:640px){
  .dashboard-banner-mesh{display:none;}
}

.content{padding:20px; flex:1;}
table.register{width:100%; border-collapse:collapse; min-width:760px;}
table.register thead th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); white-space:nowrap; cursor:pointer; user-select:none;}
table.register thead th:hover{color:var(--ink);}
table.register thead th .arrow{opacity:.5; font-size:10px; margin-left:3px;}
table.register tbody td{padding:9px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.register tbody tr:last-child td{border-bottom:none;}
table.register tbody tr:hover{background:var(--surface-2);}
.name-cell{display:flex; align-items:center; gap:10px;}
.name-cell .pname{font-weight:600; font-size:13.5px;}
.name-cell .psub{font-size:11.5px; color:var(--ink-dim);}
td.qty.total{font-weight:700;}
.cat-tag{font-size:11.5px; color:var(--ink-dim);}

.star-btn{background:none; border:none; cursor:pointer; font-size:17px; line-height:1; color:var(--ink-dim); padding:2px; border-radius:4px;}
.star-btn:hover{color:var(--warn);}
.star-btn.active{color:var(--warn);}
.star-btn-card{position:absolute; top:8px; left:8px; background:rgba(255,255,255,.85); border-radius:6px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.2);}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .star-btn-card{background:rgba(20,20,20,.7);} }
:root[data-theme="dark"] .star-btn-card{background:rgba(20,20,20,.7);}

.add-cart-btn{background:var(--accent-soft); color:var(--accent); border:none; border-radius:6px; width:26px; height:26px; font-size:16px; font-weight:700; cursor:pointer; line-height:1; display:inline-flex; align-items:center; justify-content:center;}
.add-cart-btn:hover{background:var(--accent); color:#fff;}
.add-cart-btn.in-cart{background:var(--ok); color:#fff;}
.pcard .add-cart-btn{position:absolute; top:8px; right:44px;}

.sample-btn{background:var(--accent2-soft); color:var(--accent2); border:none; border-radius:6px; width:26px; height:26px; font-size:13px; cursor:pointer; line-height:1; display:inline-flex; align-items:center; justify-content:center;}
.sample-btn:hover{background:var(--accent2); color:#fff;}
.sample-btn:disabled{opacity:.6; cursor:default;}
.pcard .sample-btn{position:absolute; top:8px; right:80px;}

.cart-overlay{position:fixed; inset:0; background:rgba(15,20,35,.4); z-index:90;}
.cart-panel{position:fixed; top:0; right:0; bottom:0; width:360px; max-width:92vw; background:var(--surface); z-index:91; display:flex; flex-direction:column; box-shadow:-8px 0 32px rgba(0,0,0,.25);}
.cart-panel[hidden]{display:none;}
.cart-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line);}
.cart-head h2{font-size:17px;}
.cart-items{flex:1; overflow-y:auto; padding:8px 18px;}
.cart-item{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line);}
.cart-item .swatch-chip{width:30px; height:30px; flex:none;}
.cart-item .meta{flex:1; min-width:0;}
.cart-item .meta .pname{font-weight:600; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cart-item .meta .psub{font-size:11px; color:var(--ink-dim);}
.cart-item .qty-input{width:64px; padding:5px 7px; border:1px solid var(--line); border-radius:5px; background:var(--surface-2); text-align:right; font-family:var(--font-mono);}
.cart-item .remove-btn{background:none; border:none; color:var(--ink-dim); cursor:pointer; font-size:15px; padding:2px 4px;}
.cart-item .remove-btn:hover{color:var(--crit);}
.cart-empty{color:var(--ink-dim); font-size:13px; text-align:center; padding:30px 0;}
.cart-foot{padding:16px 18px; border-top:1px solid var(--line);}

#imageLightbox{position:fixed; inset:0; z-index:120; background:rgba(15,20,35,.82); display:flex; align-items:center; justify-content:center; padding:40px;}
#imageLightbox[hidden]{display:none;}
#imageLightbox img{max-width:100%; max-height:calc(100vh - 140px); border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.4);}
#imageLightbox .lightbox-name{color:#fff; font-size:14px; font-weight:600; margin-top:14px; text-align:center;}
#imageLightbox .lightbox-actions{display:flex; gap:10px; margin-top:14px;}
#imageLightbox .lightbox-close{position:absolute; top:18px; right:18px; background:rgba(255,255,255,.14); border:none; color:#fff; width:36px; height:36px; border-radius:50%; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
#imageLightbox .lightbox-close:hover{background:rgba(255,255,255,.24);}

#swatchPreview{position:fixed; z-index:80; width:300px; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.22); padding:12px; pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .12s ease, transform .12s ease;}
#swatchPreview.show{opacity:1; transform:translateY(0);}
#swatchPreview .prev-img{width:100%; height:190px; border-radius:6px; overflow:hidden; border:1px solid var(--line); margin-bottom:10px;}
#swatchPreview .prev-img svg{width:100%; height:100%; display:block;}
#swatchPreview .prev-name{font-weight:700; font-size:13.5px; margin-bottom:2px;}
#swatchPreview .prev-sub{font-size:11.5px; color:var(--ink-dim); margin-bottom:8px;}
#swatchPreview .prev-rows{display:flex; gap:8px;}
#swatchPreview .prev-rows div{flex:1; background:var(--surface-2); border-radius:6px; padding:6px 8px; text-align:center;}
#swatchPreview .prev-rows b{display:block; font-family:var(--font-mono); font-size:13px;}
#swatchPreview .prev-rows span{font-size:9.5px; color:var(--ink-dim); text-transform:uppercase;}

.product-details-modal{position:fixed; inset:0; z-index:110; background:rgba(15,20,35,.72); display:flex; align-items:center; justify-content:center; padding:24px;}
.product-details-modal[hidden]{display:none;}
.product-details-panel{position:relative; width:100%; max-width:380px; background:var(--surface); border-radius:12px; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.35);}
.product-details-panel .lightbox-close{position:absolute; top:10px; right:10px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink); width:32px; height:32px; border-radius:50%; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.product-details-panel .prev-img{width:100%; height:220px; border-radius:8px; overflow:hidden; border:1px solid var(--line); margin-bottom:14px;}
.product-details-panel .prev-img svg{width:100%; height:100%; display:block;}
.product-details-panel .prev-name{font-weight:700; font-size:17px; margin-bottom:4px;}
.product-details-panel .prev-sub{font-size:13px; color:var(--ink-dim); margin-bottom:12px;}
.product-details-panel .loc-line{margin-bottom:12px;}
.product-details-panel .prev-rows{display:flex; gap:10px;}
.product-details-panel .prev-rows div{flex:1; background:var(--surface-2); border-radius:8px; padding:10px 8px; text-align:center;}
.product-details-panel .prev-rows b{display:block; font-family:var(--font-mono); font-size:16px;}
.product-details-panel .prev-rows span{font-size:10px; color:var(--ink-dim); text-transform:uppercase;}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(206px,1fr)); gap:14px;}
.grid[hidden]{display:none;}
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column;}
.pcard .thumb{position:relative; height:220px;}
.pcard .thumb svg{width:100%; height:100%; display:block;}
.pcard .thumb .pill{position:absolute; top:8px; right:8px; box-shadow:0 1px 4px rgba(0,0,0,.25);}
.pcard .body{padding:11px 12px 13px; display:flex; flex-direction:column; gap:6px; flex:1;}
.pcard .pname{font-weight:700; font-size:13.5px; line-height:1.3;}
.pcard .psub{font-size:11.5px; color:var(--ink-dim);}
.pcard .pprice{font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--accent);}
.loc-line{font-size:11px; color:var(--ink-dim); margin-top:2px; line-height:1.5;}
.pcard .qtyrow{display:flex; gap:6px; margin-top:auto; padding-top:8px;}
.pcard .qtyrow div{flex:1; background:var(--surface-2); border-radius:6px; padding:5px 4px; text-align:center;}
.pcard .qtyrow b{display:block; font-family:var(--font-mono); font-size:12.5px;}
.pcard .qtyrow span{font-size:8.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.03em;}

footer.appfoot{padding:22px 20px 30px; text-align:center; color:var(--ink-dim); font-size:12px; border-top:1px solid var(--line);}
footer.appfoot .tag{font-family:var(--font-display); font-style:italic; font-size:14px; margin-bottom:6px;}

.filters-toggle{display:none;}
@media (max-width:760px){
  .content .toolbar{display:none;}
  .content .toolbar.open{display:flex; flex-direction:column; align-items:stretch;}
  .content .filters-toggle{display:inline-flex;}
  .subbar{flex-direction:column; align-items:flex-start;}
}

.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;}
.lang-switcher{position:fixed; top:14px; inset-inline-end:14px; z-index:50;}
.lang-switcher select{background:var(--surface-2); border:1px solid var(--line); color:var(--ink); border-radius:6px; padding:6px 10px; font-size:12.5px; cursor:pointer;}
.lang-switcher select option{color:#1b1c20;}
.office-topbar .lang-switcher, .appbar .lang-switcher{position:static; margin-inline-start:auto;}
.office-topbar .lang-switcher select{background:var(--surface-2); border:1px solid var(--line); color:var(--ink);}

.print-only{display:none;}
@media print{
  .appbar, .subbar, .toolbar, footer.appfoot, #swatchPreview, .office-sidebar, .office-topbar, .dashboard-banner{display:none!important;}
  body{background:#fff;}
  .content, .office-content{padding:0;}
  .print-only{display:block;}
  .print-head{display:flex; justify-content:space-between; align-items:flex-end; border-bottom:2px solid #000; padding-bottom:10px; margin-bottom:14px;}
  .print-head h1{font-size:20px;}
  .print-head .meta{font-size:11px; text-align:right;}
  table.print-table{width:100%; border-collapse:collapse; font-size:11px;}
  table.print-table th, table.print-table td{border:1px solid #999; padding:5px 7px; text-align:left;}
  table.print-table td.qty{text-align:right; font-family:var(--font-mono);}
}

/* ---------- product-advertising popup ---------- */
.ad-popup-overlay{position:fixed; inset:0; z-index:150; background:rgba(15,20,35,.72); display:flex; align-items:center; justify-content:center; padding:24px;}
.ad-popup{position:relative; width:100%; max-width:440px; background:var(--surface); border-radius:14px; overflow:hidden; box-shadow:0 24px 64px rgba(0,0,0,.4); display:flex; flex-direction:column;}
.ad-popup-media{width:100%; aspect-ratio:4/3; background:var(--surface-2);}
.ad-popup-media img, .ad-popup-media video{width:100%; height:100%; object-fit:cover; display:block;}
.ad-popup-body{padding:18px 20px 22px;}
.ad-popup-headline{font-family:var(--font-display); font-size:19px; font-weight:700; margin-bottom:6px;}
.ad-popup-text{font-size:13.5px; color:var(--ink-dim); line-height:1.5; margin-bottom:14px;}
.ad-popup-cta{display:inline-flex;}
.ad-popup-close{position:absolute; top:12px; right:12px; z-index:2; background:rgba(0,0,0,.5); border:none; color:#fff; width:30px; height:30px; border-radius:50%; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.ad-popup-close:hover{background:rgba(0,0,0,.7);}
.ad-popup-arrow{position:absolute; top:calc(50% - 22px); z-index:2; background:rgba(0,0,0,.5); border:none; color:#fff; width:36px; height:36px; border-radius:50%; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.ad-popup-arrow:hover{background:rgba(0,0,0,.7);}
.ad-popup-prev{left:10px;}
.ad-popup-next{right:10px;}
.ad-popup-dots{display:flex; gap:6px; justify-content:center; padding:0 0 16px;}
.ad-popup-dot{width:7px; height:7px; border-radius:50%; border:none; background:var(--line); cursor:pointer; padding:0;}
.ad-popup-dot.active{background:var(--accent);}

/* ---------- in-app calling: status dot + incoming banner (used inside the fab-call panel, see .fab-call below) ---------- */
.calling-dot{width:8px; height:8px; border-radius:50%; background:var(--crit); flex:none; display:inline-block;}
[data-call-status="registered"] .calling-dot,
[data-call-status="connected"] .calling-dot{background:var(--ok);}
[data-call-status="connecting"] .calling-dot,
[data-call-status="ringing"] .calling-dot{background:var(--warn);}
.calling-incoming{background:var(--warn-soft); border:1px solid var(--warn); border-radius:8px; padding:8px 10px; font-size:12.5px; margin:8px 10px; align-items:center; justify-content:space-between; gap:8px;}
.calling-incoming:not([hidden]){display:flex;}

/* ---------- floating button stack (call / team chat / enquiries) ---------- */
.float-stack{position:fixed; right:24px; bottom:24px; z-index:70; display:flex; flex-direction:column; gap:14px; align-items:flex-end;}
.fab-wrap{position:relative;}
.fab{width:56px; height:56px; border-radius:50%; border:none; display:grid; place-items:center; cursor:pointer; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.22); transition:transform .15s ease, box-shadow .15s ease;}
.fab:hover{transform:translateY(-2px) scale(1.04);}
.fab:active{transform:scale(.97);}
.fab svg{width:24px; height:24px; fill:currentColor;}
.fab-team{background:linear-gradient(155deg,#a668d6,#6f3aa8); box-shadow:0 6px 18px rgba(111,58,168,.35);}
.fab-enquiries{background:linear-gradient(155deg,#3d8bd6,#1f5fa8); box-shadow:0 6px 18px rgba(31,95,168,.35);}
.fab-call{background:linear-gradient(155deg,#2fbf6e,#0f8a4c); box-shadow:0 6px 18px rgba(15,138,76,.35);}
.fab-call[data-live="true"]{background:linear-gradient(155deg,#e2726f,#c23b3b);}
.fab-mute{width:34px; height:34px; background:var(--surface); border:1px solid var(--line); color:var(--ink-dim); box-shadow:0 4px 12px rgba(0,0,0,.15);}
.fab-mute svg{width:17px; height:17px;}
.fab-mute .fab-mute-off{display:none;}
.fab-mute[data-muted="true"] .fab-mute-on{display:none;}
.fab-mute[data-muted="true"] .fab-mute-off{display:block; color:var(--crit);}
.fab-badge{position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--crit); color:#fff; font-size:10.5px; font-weight:700; align-items:center; justify-content:center; border:2px solid var(--paper);}
.fab-badge:not([hidden]){display:flex;}
.fab-ring{position:absolute; inset:0; border-radius:50%; border:2px solid #e2726f; animation:float-pulse 1.6s ease-out infinite;}
@keyframes float-pulse{0%{transform:scale(1); opacity:.7;} 100%{transform:scale(1.35); opacity:0;}}
@media (prefers-reduced-motion: reduce){.fab-ring{animation:none;}}

.fab-panel{position:absolute; bottom:110%; right:0; width:300px; max-height:420px; flex-direction:column; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); border:1px solid var(--line); border-radius:18px; box-shadow:0 16px 40px rgba(0,0,0,.28); overflow:hidden; animation:float-panel-in .16s ease-out;}
.fab-panel:not([hidden]){display:flex;}
@keyframes float-panel-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
.fab-panel-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line); font-weight:600; font-size:13.5px;}
.fab-panel-close{background:none; border:none; font-size:18px; line-height:1; color:var(--ink-dim); cursor:pointer; padding:2px 4px;}
.fab-panel-body{flex:1; overflow-y:auto; min-height:0;}
.fab-panel-footer{border-top:1px solid var(--line); padding:8px; display:flex; gap:6px;}
.fab-panel-footer input{flex:1; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); font-size:13px;}

.fab-list-item{display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--line);}
.fab-list-item:hover{background:var(--surface-2);}
.fab-list-item-title{font-weight:600; font-size:13px;}
.fab-list-item-sub{font-size:11.5px; color:var(--ink-dim);}
.fab-list-empty{padding:20px 14px; text-align:center; color:var(--ink-dim); font-size:12.5px;}
.fab-list-item-call{cursor:pointer;}
.fab-search-wrap{padding:8px 10px 4px;}
.fab-search-input{width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); font-size:13px;}

.fab-msg{padding:8px 12px; max-width:85%;}
.fab-msg-mine{margin-left:auto;}
.fab-msg-bubble{background:var(--surface-2); border-radius:12px; padding:7px 11px; font-size:13px;}
.fab-msg-mine .fab-msg-bubble{background:var(--accent-soft);}
.fab-msg-system{text-align:center; max-width:100%; font-size:11px; color:var(--ink-dim); padding:4px 12px;}
.fab-msg-meta{font-size:10.5px; color:var(--ink-dim); margin-top:2px;}