:root{
  --vellum:#F4F5F7;
  --vellum-2:#ECEDF1;
  --ink:#12161C;
  --ink-soft:#8A93A3;
  --line-blue:#2C5A8C;
  --rust:#B23A22;
  --paper-edge:#E1E3E8;
  --field-border:#6B7280;
  --green:#1F8A4C;
  --amber:#B8730A;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--vellum);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;}
a{color:var(--line-blue);}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px;}

/* auth pages (login/register) */
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.auth-card{max-width:400px;width:100%;background:#fff;border-radius:14px;padding:30px;box-shadow:0 1px 2px rgba(20,24,26,.06);}
.auth-title{font-size:22px;font-weight:800;margin:0 0 4px;}
.auth-sub{color:var(--ink-soft);font-size:13.5px;margin:0 0 22px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.field input,.field textarea,.field select{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--field-border);border-radius:9px;font-size:16.5px;font-weight:600;font-family:inherit;color:var(--ink);background:#fff;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--line-blue);box-shadow:0 0 0 3px rgba(44,90,140,.12);}
.btn{display:inline-block;padding:11px 18px;border:1px solid var(--paper-edge);border-radius:9px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none;text-align:center;}
.btn:hover{border-color:var(--ink);}
.btn-solid{background:var(--ink);border-color:var(--ink);color:#fff;width:100%;}
.btn-solid:hover{background:#272E38;}
.btn-sm{padding:6px 12px;font-size:12.5px;border-radius:7px;}
.btn-rust{background:var(--rust);border-color:var(--rust);color:#fff;}
.btn-green{background:#1F8A4C;border-color:#1F8A4C;color:#fff;}
.btn-green:hover{background:#186b3a;}
.msg-error{background:#FBE7E3;color:#7A2A12;border-radius:9px;padding:12px 14px;font-size:13.5px;margin-bottom:14px;}
.msg-success{background:#E4F5E8;color:#1F5A2D;border-radius:9px;padding:12px 14px;font-size:13.5px;margin-bottom:14px;line-height:1.5;}
.auth-foot{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:18px;}

/* dashboard shell */
header.top{background:#fff;border-bottom:1px solid var(--paper-edge);padding:14px 0;}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;}
.brand{font-size:17px;font-weight:800;}
.brand-sub{font-size:11.5px;color:var(--ink-soft);}
.logout-link{font-size:13px;color:var(--rust);font-weight:600;text-decoration:none;cursor:pointer;background:none;border:none;font-family:inherit;}
main{padding:26px 0 70px;}
.tabs{display:flex;gap:4px;background:var(--vellum-2);border-radius:10px;padding:3px;margin-bottom:22px;overflow-x:auto;}
.tabs button{border:none;background:transparent;color:var(--ink-soft);font-size:13.5px;font-weight:600;border-radius:8px;padding:9px 15px;cursor:pointer;white-space:nowrap;font-family:inherit;}
.tabs button.active{background:var(--ink);color:#fff;}
.panel{display:none;}
.panel.active{display:block;}
.card{background:#fff;border-radius:14px;padding:22px;box-shadow:0 1px 2px rgba(20,24,26,.04);margin-bottom:18px;}
.card h2{font-size:16px;margin:0 0 4px;}
.card .sub{color:var(--ink-soft);font-size:13px;margin:0 0 16px;}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;font-size:11px;text-transform:uppercase;color:#9AA1AD;font-weight:600;padding:8px;border-bottom:1px solid var(--vellum-2);}
td{padding:10px 8px;border-bottom:1px solid var(--vellum-2);vertical-align:middle;}
.empty-row{color:var(--ink-soft);padding:18px 0;font-size:13.5px;}
.badge{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:20px;}
.badge-new{background:#EAF1FB;color:var(--line-blue);}
.badge-inprod{background:#FDF1DC;color:var(--amber);}
.badge-bench{background:#EFE9F7;color:#6B4FA0;}
.badge-ready{background:#E4F5E8;color:var(--green);}
.badge-delivered{background:#EDEEF0;color:#6B7280;}
.badge-unpaid{background:#FBE7E3;color:var(--rust);}
.badge-part_paid{background:#FDF1DC;color:var(--amber);}
.badge-paid{background:#E4F5E8;color:var(--green);}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
.toolbar input[type=text]{flex:1;min-width:200px;padding:9px 12px;border:1px solid var(--paper-edge);border-radius:9px;font-size:13.5px;font-family:inherit;}
.toolbar select{padding:9px 12px;border:1px solid var(--paper-edge);border-radius:9px;font-size:13.5px;font-family:inherit;background:#fff;}
.line-row{display:flex;gap:10px;align-items:flex-end;margin-bottom:10px;flex-wrap:wrap;padding:12px;background:var(--vellum);border-radius:10px;}
.line-row .field{margin-bottom:0;flex:1;min-width:100px;}
.line-row .field.grow{flex:2;min-width:160px;}
.line-total{font-weight:700;min-width:80px;text-align:right;}
.order-total{text-align:right;font-size:20px;font-weight:800;margin:14px 0;}
.note-banner{background:#EAF1FB;border-left:4px solid var(--line-blue);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--ink-soft);margin-bottom:18px;line-height:1.5;}
.note-banner b{color:var(--ink);}
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);padding:12px 20px;border-radius:9px;font-size:13.5px;z-index:100;box-shadow:0 6px 20px rgba(0,0,0,.15);}
.toast-error{background:#FBE7E3;color:#7A2A12;}
.toast-info{background:#E4F5E8;color:#1F5A2D;}
.linkbtn{background:none;border:none;color:var(--line-blue);font-weight:600;font-size:12.5px;cursor:pointer;padding:0;font-family:inherit;}
.linkbtn.rust{color:var(--rust);}

/* catalogue browsing - ported from the main app for a consistent look */
.crumb{font-size:13px;color:var(--ink-soft);margin-bottom:14px;}
.crumb button{background:none;border:none;color:var(--line-blue);font-weight:600;cursor:pointer;padding:0;font-size:13px;font-family:inherit;}
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:20px;}
.browse-tile{background:#fff;border:1px solid var(--paper-edge);border-radius:12px;overflow:hidden;position:relative;box-shadow:0 1px 2px rgba(20,24,26,.04);transition:box-shadow .15s, transform .15s;}
.browse-tile:hover{box-shadow:0 6px 14px rgba(20,24,26,.08);transform:translateY(-1px);}
.browse-tile-img{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;cursor:pointer;overflow:hidden;background:var(--vellum);}
.browse-tile-img img{width:100%;height:100%;object-fit:cover;display:block;}
.browse-tile-label{padding:8px 10px;border-top:1px solid var(--paper-edge);display:flex;flex-direction:column;gap:1px;}
.browse-tile-title{font-family:var(--disp,inherit);font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.browse-tile-sub{font-size:11px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* compact cart cards - ported from the main app so this feels like the same system */
.compact-card{border:1px solid var(--paper-edge);border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(20,24,26,.04);transition:box-shadow .3s, border-color .3s;margin-bottom:16px;}
.cart-card-justadded{border-color:var(--line-blue);box-shadow:0 0 0 3px rgba(44,90,140,.25), 0 4px 14px rgba(44,90,140,.15);animation:cartCardPulse 1.6s ease-out;}
@keyframes cartCardPulse{ 0%{background:rgba(44,90,140,.08);} 100%{background:transparent;} }
.cc-header{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--vellum);border-bottom:1px solid var(--paper-edge);}
.cc-thumb{width:56px;height:44px;flex:0 0 auto;border:1px solid var(--paper-edge);border-radius:8px;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.cc-thumb img{width:100%;height:100%;object-fit:cover;}
.cc-name{flex:1;font-weight:700;font-size:14px;color:var(--line-blue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.cc-close{background:none;border:none;font-size:18px;line-height:1;cursor:pointer;color:var(--ink-soft);flex:0 0 auto;}
.cc-close:hover{color:var(--rust);}
.cc-body{padding:16px;}
.cc-row{display:flex;gap:12px;flex-wrap:wrap;}
.cc-col{flex:1 1 90px;min-width:80px;}
.cc-col label{display:block;font-weight:600;font-size:12px;margin-bottom:5px;color:var(--ink);}
/* Any custom attribute (Value = input[type=text], Dropdown = select) added
   from the admin app renders as one of these element types, so this rule
   covers new attributes automatically - no CSS update needed when more get
   added later, unlike a per-field-name rule would require. */
.cc-col input[type=number], .cc-col input[type=text], .cc-col select{width:100%;font-size:16px;font-weight:600;padding:8px 10px;border:1px solid var(--field-border);border-radius:9px;background:#fff;box-sizing:border-box;color:var(--ink);}
.cc-col input:focus, .cc-col select:focus{outline:none;border-color:var(--line-blue);box-shadow:0 0 0 3px rgba(44,90,140,.12);}
.cc-price{flex:1 1 100px;}
.cc-price-val{font-weight:700;font-size:14px;padding:8px 0;}
.cc-readonly-val{font-weight:600;font-size:13px;padding:8px 0;color:var(--ink-soft);}
.cc-footer{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--vellum-2);flex-wrap:wrap;}
.modal-bg{position:fixed;inset:0;background:rgba(18,22,28,.5);z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto;}
.modal{background:#fff;border-radius:14px;padding:22px;max-width:480px;width:100%;}
.modal h3{margin:0 0 14px;font-size:16px;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;}
.viewer3d-wrap{width:100%;height:340px;background:var(--vellum);border-radius:10px;overflow:hidden;position:relative;}
.viewer3d-hint{text-align:center;font-size:12px;color:var(--ink-soft);margin-top:8px;}
.req-star{color:var(--rust);margin-left:2px;}
.field-pair{display:flex;gap:16px;}
.field-pair .field{flex:1;min-width:0;}
@media (max-width:600px){ .field-pair{flex-direction:column;gap:0;} }
.catalogue-home-divider{display:block;width:100%;border:none;background:#F0C419;color:#3A2E00;text-align:center;font-weight:700;font-size:13px;padding:12px;margin:6px 0 18px;border-radius:10px;cursor:pointer;transition:background .12s;}
.catalogue-home-divider:hover{background:#D9AF12;}
.cl-warning{color:var(--rust);font-weight:700;font-size:12px;margin-bottom:4px;}
body.hide-pricing .price-col{display:none;}
.field-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px;}
.field-row .field{flex:1;min-width:160px;}
.seg{display:flex;border:1px solid var(--field-border);border-radius:9px;height:38px;overflow:hidden;}
.seg button{flex:1;background:#fff;border:none;border-right:1px solid var(--field-border);font-family:inherit;font-size:12px;font-weight:600;padding:0 4px;cursor:pointer;color:var(--ink);}
.seg button:last-child{border-right:none;}
.seg button.active{background:var(--ink);color:#fff;}
.maptable{width:100%;border-collapse:collapse;margin-top:6px;}
.maptable td{padding:8px;border-bottom:1px solid var(--vellum-2);vertical-align:middle;}
.clickable-row{cursor:pointer;}
.clickable-row:hover{background:var(--vellum);}
.order-detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin-bottom:14px;font-size:13px;}
.order-detail-meta div span{display:block;font-size:11px;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:2px;}
.order-detail-comments{font-size:13px;background:var(--vellum);padding:10px 12px;border-radius:8px;margin-bottom:14px;}
.order-detail-lines{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:12px;}
.order-detail-lines th{text-align:left;font-size:11px;text-transform:uppercase;color:var(--ink-soft);padding:6px 8px;border-bottom:1px solid var(--paper-edge);}
.order-detail-lines td{padding:8px;border-bottom:1px solid var(--vellum-2);}
.order-detail-total{text-align:right;font-weight:800;font-size:16px;}
.block-callout{
  position:relative;background:var(--rust);color:#fff;font-weight:600;font-size:13.5px;
  padding:12px 16px;border-radius:12px;margin-bottom:10px;box-shadow:0 6px 18px rgba(178,58,34,.35);
  animation:blockCalloutIn .25s ease-out;
}
.block-callout::after{
  content:"";position:absolute;left:28px;bottom:-7px;width:14px;height:14px;
  background:var(--rust);transform:rotate(45deg);border-radius:0 0 3px 0;
}
@keyframes blockCalloutIn{
  0%{opacity:0;transform:translateY(-8px);}
  100%{opacity:1;transform:translateY(0);}
}

/* mobile catalogue browsing - ported from the main app */
.desktop-browse-only{display:none;}
.mobile-category-tabs{display:flex;gap:8px;overflow-x:auto;padding:12px 20px;-webkit-overflow-scrolling:touch;position:fixed;bottom:0;left:0;right:0;z-index:40;background:#fff;border-top:1px solid var(--paper-edge);box-shadow:0 -2px 10px rgba(20,24,26,.08);}
.mobile-tabs-spacer{display:none;}
@media (max-width:1024px){ .mobile-tabs-spacer{display:block;height:64px;} }
.mobile-category-tabs::-webkit-scrollbar{display:none;}
.mobile-category-tab{flex:0 0 auto;background:#C7CBD1;border:1px solid #AEB3BA;border-radius:20px;padding:9px 18px;font-weight:600;font-size:13.5px;color:var(--ink);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px rgba(20,24,26,.08);transition:background .12s;}
.mobile-category-tab:active{background:var(--ink);color:#fff;}
.mobile-category-tab:active{background:var(--vellum);}
.mobile-browse-overlay{position:fixed;inset:0;background:var(--vellum);z-index:70;display:flex;flex-direction:column;}
.mobile-browse-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#fff;border-bottom:1px solid var(--paper-edge);flex:0 0 auto;}
.mobile-browse-header .brand-text{font-size:16px;font-weight:800;}
.mobile-browse-close{background:var(--ink);color:#fff;border:none;border-radius:50%;width:34px;height:34px;font-size:18px;line-height:1;cursor:pointer;flex:0 0 auto;}
.mobile-browse-body{flex:1 1 auto;overflow-y:auto;padding:18px 16px 40px;}
@media (min-width:1025px){
  /* Was 769px - tablets (768-1024px, e.g. iPad portrait/landscape) were
     landing in the desktop grid view, which is cramped for touch and gives
     a worse look at each product before adding it than the full-screen
     mobile browse overlay does. Now only genuinely wide (laptop/desktop)
     screens get the desktop grid. */
  .mobile-category-tabs, .mobile-browse-overlay{display:none !important;}
  .desktop-browse-only{display:block;}
}
@media (max-width:1024px){
  .desktop-browse-only{display:none;}
}
@media (min-width:1025px) and (max-width:1400px) and (pointer:coarse){
  /* A width breakpoint alone only ever caught tablets in portrait - most
     (iPad, common Android tablets) are 1080-1366px wide in landscape, well
     past 1024px, and would otherwise fall back into the desktop grid the
     moment the tablet is rotated. (pointer:coarse) targets touch as the
     primary input, so an actual desktop/laptop window resized to this same
     width is unaffected - only real touch devices get this override. */
  .mobile-category-tabs, .mobile-browse-overlay{display:flex !important;}
  .desktop-browse-only{display:none !important;}
  .mobile-tabs-spacer{display:block;height:64px;}
}
@media (max-width:480px){
  /* .wrap (20px) + .card (22px) stack to 42px of inset on each side before
     the actual order cards even start - on a ~390px phone that's over 20%
     of the screen width gone to padding alone. Cut both back substantially
     here; .cc-body below already has its own reduced padding so the cards'
     inner content doesn't feel cramped even with the outer edges tightened. */
  .wrap{padding:0 6px;}
  .card{padding:12px;}
  .cc-row{flex-wrap:nowrap;gap:5px;}
  .cc-col{flex:1 1 0;min-width:0;}
  .cc-col label{font-size:8.5px;letter-spacing:0;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .cc-col input[type=number], .cc-col input[type=text], .cc-col select{padding:6px 3px;font-size:13.5px;font-weight:600;text-align:center;border-radius:7px;}
  .cc-price-val{font-size:10.5px;padding:6px 0;}
  .cc-readonly-val{font-size:10.5px;padding:6px 0;}
  .cc-body{padding:10px;}
}

/* admin stat cards */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px;}
.statcard{background:#fff;border:1px solid var(--paper-edge);border-radius:14px;padding:18px;cursor:pointer;box-shadow:0 1px 2px rgba(20,24,26,.04);transition:box-shadow .15s;text-align:left;}
.statcard:hover{box-shadow:0 6px 16px rgba(20,24,26,.08);}
.statcard.active{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink) inset;}
.statcard-label{display:block;font-size:12.5px;color:var(--ink-soft);font-weight:500;margin-bottom:8px;}
.statcard-count{display:block;font-size:32px;font-weight:800;line-height:1;}
select.status-select{font-size:12.5px;font-weight:600;padding:5px 8px;border-radius:20px;border:none;cursor:pointer;}
select.status-select.st-new{background:#EAF1FB;color:var(--line-blue);}
select.status-select.st-inprod{background:#FDF1DC;color:var(--amber);}
select.status-select.st-ready{background:#E4F5E8;color:var(--green);}
select.status-select.st-delivered{background:#EDEEF0;color:#6B7280;}
select.status-select.st-hold{background:#FBE7E3;color:var(--rust);}
select.payment-select{font-size:12.5px;font-weight:600;padding:5px 8px;border-radius:20px;border:none;cursor:pointer;}
select.payment-select.pay-unpaid{background:#FBE7E3;color:var(--rust);}
select.payment-select.pay-part_paid{background:#FDF1DC;color:var(--amber);}
select.payment-select.pay-paid{background:#E4F5E8;color:var(--green);}

/* ===== Dark mode =====
   Same approach as the admin app: override actual surfaces/borders/text
   directly rather than remapping --ink (which doubles as both text colour
   and solid-button background, so flipping it would break contrast).
   Colour accents (blue links, rust warnings, green/amber status badges)
   are left as-is - they already read fine on a dark background. */
html[data-theme="dark"] body{background:#14171C;color:#E4E6EA;}
html[data-theme="dark"] a{color:#6FA3D8;}
html[data-theme="dark"] header.top{background:#1B1F26;border-color:#2E3540;}
html[data-theme="dark"] .tabs{background:#20252D;}
html[data-theme="dark"] .tabs button{color:#9AA3B0;}
html[data-theme="dark"] .tabs button.active, html[data-theme="dark"] .seg button.active{background:#3A4150;color:#fff;}
html[data-theme="dark"] .card, html[data-theme="dark"] .compact-card, html[data-theme="dark"] .modal,
html[data-theme="dark"] .auth-card, html[data-theme="dark"] .browse-tile, html[data-theme="dark"] .statcard{
  background:#1E232B;border-color:#2E3540;color:#E4E6EA;
}
html[data-theme="dark"] .cc-header, html[data-theme="dark"] .browse-tile-label, html[data-theme="dark"] th,
html[data-theme="dark"] .line-row{background:#20252D;border-color:#2E3540;}
html[data-theme="dark"] .cc-name{color:#6FA3D8;}
html[data-theme="dark"] .card h2, html[data-theme="dark"] .modal h3, html[data-theme="dark"] .auth-title,
html[data-theme="dark"] .browse-tile-title, html[data-theme="dark"] .field label, html[data-theme="dark"] .cc-col label{color:#E4E6EA;}
html[data-theme="dark"] td, html[data-theme="dark"] .maptable td, html[data-theme="dark"] .order-detail-lines td{
  border-color:#2A303A;color:#E4E6EA;
}
html[data-theme="dark"] .field input, html[data-theme="dark"] .field textarea, html[data-theme="dark"] .field select,
html[data-theme="dark"] .cc-col input[type=number], html[data-theme="dark"] .cc-col input[type=text], html[data-theme="dark"] .cc-col select,
html[data-theme="dark"] .toolbar input[type=text], html[data-theme="dark"] .toolbar select,
html[data-theme="dark"] .maptable input[type=text]{
  background:#12161B;border-color:#3A4150;color:#E4E6EA;
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{color:#6B7280;}
html[data-theme="dark"] .btn{background:#20252D;border-color:#3A4150;color:#E4E6EA;}
html[data-theme="dark"] .btn:hover{border-color:#5A6270;}
html[data-theme="dark"] .btn-solid{background:#3A4150;border-color:#3A4150;}
html[data-theme="dark"] .btn-solid:hover{background:#48505F;}
html[data-theme="dark"] .hint, html[data-theme="dark"] .note-banner, html[data-theme="dark"] .empty-row{color:#9AA3B0;}
html[data-theme="dark"] .note-banner b{color:#E4E6EA;}
html[data-theme="dark"] .browse-tile-img{background:#20252D;}
html[data-theme="dark"] .mobile-category-tabs{background:#1B1F26;border-color:#2E3540;}
html[data-theme="dark"] .mobile-category-tab{background:#2A303A;border-color:#3A4150;color:#E4E6EA;}
html[data-theme="dark"] .mobile-browse-overlay{background:#14171C;}
html[data-theme="dark"] .mobile-browse-header{background:#1B1F26;border-color:#2E3540;}