/* HardwareHub — shared styles */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#2D7DD2;--blue-dark:#1A2540;--blue-light:#E8F2FC;
  --green:#3B6D11;--green-light:#EAF3DE;
  --amber:#BA7517;--amber-light:#FAEEDA;
  --red:#A32D2D;--red-light:#FCEBEB;
  --text:#1a1a1a;--text-sec:#6b6b6b;--text-hint:#9b9b9b;
  --bg:#f5f5f3;--surface:#ffffff;--surface2:#f7f7f5;
  --border:rgba(0,0,0,0.12);--border2:rgba(0,0,0,0.22);
  --radius:8px;--radius-lg:12px;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text);background:var(--bg);font-size:14px;line-height:1.6}
a{text-decoration:none;color:inherit}
h1{font-size:24px;font-weight:500}h2{font-size:20px;font-weight:500}h3{font-size:16px;font-weight:500}
.card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:20px}
.btn-primary{background:var(--blue);color:#fff;border:none;padding:10px 20px;border-radius:var(--radius);font-size:14px;font-weight:500;cursor:pointer}
.btn-primary:hover{background:var(--blue-dark)}
.btn-outline{background:none;border:0.5px solid var(--border2);padding:9px 18px;border-radius:var(--radius);font-size:14px;cursor:pointer;color:var(--text)}
.btn-outline:hover{background:var(--surface2)}
.btn-sm{background:none;border:0.5px solid var(--border);padding:8px 14px;border-radius:var(--radius);font-size:12px;cursor:pointer;color:var(--text)}
.btn-sm:hover{background:var(--surface2)}
input,select,textarea{font-family:inherit;font-size:14px;padding:9px 12px;border:0.5px solid var(--border2);border-radius:var(--radius);background:var(--surface);color:var(--text);width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)}
textarea{resize:vertical;min-height:80px}
.fg{margin-bottom:14px}
.fg label{display:block;font-size:13px;color:var(--text-sec);margin-bottom:4px}
.fg .hint{font-size:12px;color:var(--text-hint);margin-top:4px}
.fg .hint.ok{color:var(--green)}.fg .hint.err{color:var(--red)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.badge{font-size:11px;padding:2px 9px;border-radius:9px;font-weight:500;display:inline-block}
.badge-pending{background:var(--amber-light);color:#633806}
.badge-approved{background:var(--green-light);color:#27500A}
.badge-rejected{background:var(--red-light);color:#791F1F}
.badge-draft{background:var(--surface2);color:var(--text-sec);border:0.5px solid var(--border)}
.badge-info{background:var(--blue-light);color:var(--blue-dark)}
.toast{position:fixed;bottom:20px;right:20px;background:var(--blue);color:#fff;padding:10px 18px;border-radius:var(--radius);font-size:14px;font-weight:500;z-index:9999;opacity:0;transition:opacity .25s;pointer-events:none}
.toast.show{opacity:1}
nav.topnav{background:var(--surface);border-bottom:0.5px solid var(--border);position:sticky;top:0;z-index:100}
.nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:12px 20px}
.nav-logo{font-size:17px;font-weight:500}.nav-logo span{color:var(--blue)}
.nav-search{flex:1;position:relative}
.nav-search input{padding-left:34px}
.nav-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.4}
.nav-actions{display:flex;gap:8px}
.nav-btn{background:none;border:none;cursor:pointer;color:var(--text-sec);font-size:13px;display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:var(--radius)}
.nav-btn:hover{background:var(--surface2)}
.cart-badge{background:var(--blue);color:#fff;font-size:11px;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.page-wrap{max-width:1100px;margin:0 auto;padding:24px 20px}
/* sidebar shell */
.shell{display:flex;height:100vh}
.sidebar{width:210px;flex-shrink:0;background:var(--surface);border-right:0.5px solid var(--border);padding:16px 0;position:sticky;top:0;height:100vh;overflow-y:auto}
.sb-logo{padding:0 16px 16px;border-bottom:0.5px solid var(--border);margin-bottom:10px}
.sb-logo .l1{font-size:15px;font-weight:500}.sb-logo .l1 span{color:var(--blue)}
.sb-logo .l2{font-size:11px;color:var(--text-sec);margin-top:2px}
.sbi{display:flex;align-items:center;gap:9px;padding:9px 16px;cursor:pointer;color:var(--text-sec);border-left:2px solid transparent;font-size:13px;text-decoration:none}
.sbi:hover{background:var(--surface2);color:var(--text)}
.sbi.active{color:var(--blue);background:var(--blue-light);border-left-color:var(--blue);font-weight:500}
.sbi svg{width:15px;height:15px;flex-shrink:0}
.main-content{flex:1;padding:24px;min-width:0;overflow:auto}
@media(max-width:680px){.row2{grid-template-columns:1fr}}

/* ── Sidebar hamburger button (hidden on desktop) ────────────────────────── */
.mob-sb-btn{display:none;align-items:center;gap:8px;font-size:13px;padding:9px 14px;background:var(--surface2);border:0.5px solid var(--border);border-radius:var(--radius);cursor:pointer;color:var(--text);font-family:inherit;margin-bottom:16px;width:100%;text-align:left}
.mob-sb-btn:hover{background:var(--surface)}
.mob-sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:299}
.mob-sb-overlay.open{display:block}

/* ── Semantic status panels — used in JS-rendered HTML so CSS vars apply ─── */
.sp-panel{border-radius:var(--radius);font-size:12px}
.sp-green{background:#EAF3DE;border:0.5px solid #97C459;color:#27500A}
.sp-amber{background:#FFF8E1;border:0.5px solid #F5C842;color:#7A4300}
.sp-orange{background:#FFF4E5;border:0.5px solid #E8B96B;color:#633806}
.sp-red  {background:#FCEBEB;border:0.5px solid #E8B0B0;color:#791F1F}
.sp-blue {background:#E8F0FE;border:0.5px solid #B8D0F8;color:#1A2540}
/* Small inline chips (badges in JS-rendered rows) */
.chip-green{background:#EAF3DE;color:#27500A}
.chip-amber{background:#FFF4E5;color:#633806}
.chip-red  {background:#FCEBEB;color:#791F1F}
.chip-blue {background:#E8F0FE;color:#1A2540}
.chip-purple{background:#F3E8FF;color:#5B1C8F}

@media(max-width:640px){
  /* Sidebar: slide-in overlay instead of stacking above content */
  .shell{display:block}
  .sidebar{position:fixed;top:0;left:0;height:100vh;width:260px;z-index:300;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 20px rgba(0,0,0,.15)}
  .sidebar.mob-open{transform:translateX(0)}
  .main-content{padding:16px}
  .mob-sb-btn{display:flex}
}

/* ── Mobile nav: hamburger + slide-in drawer ─────────────────────────────── */
.mob-menu-btn{display:none;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:7px;color:var(--text);border-radius:var(--radius);-webkit-tap-highlight-color:transparent}
.mob-menu-btn:hover{background:var(--surface2)}
.mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;-webkit-tap-highlight-color:transparent}
.mob-overlay.open{display:block}
.mob-drawer{position:fixed;top:0;right:0;width:260px;height:100%;background:var(--surface);z-index:201;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);overflow-y:auto;box-shadow:-4px 0 20px rgba(0,0,0,.15);border-left:0.5px solid var(--border)}
.mob-drawer.open{transform:translateX(0)}
.mob-dr-hdr{padding:14px 16px;border-bottom:0.5px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:500}
.mob-dr-close{background:none;border:none;cursor:pointer;color:var(--text-sec);padding:4px 8px;font-size:18px;border-radius:var(--radius);line-height:1;font-family:inherit}
.mob-dr-close:hover{background:var(--surface2)}
.mob-dr-user{padding:14px 16px;background:var(--surface2);border-bottom:0.5px solid var(--border)}
.mob-dr-name{font-size:13px;font-weight:500}
.mob-dr-role{font-size:11px;color:var(--text-sec);margin-top:2px}
.mob-dr-link{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:13px;color:var(--text);text-decoration:none;border-bottom:0.5px solid var(--border);background:none;border-left:none;border-right:none;border-top:none;width:100%;text-align:left;cursor:pointer;font-family:inherit}
.mob-dr-link:hover,.mob-dr-link:active{background:var(--surface2)}
.mob-dr-signout{color:var(--red)}

@media(max-width:640px){
  /* Nav: logo + actions on row 1, search bar full-width on row 2 */
  .nav-inner{flex-wrap:wrap;padding:10px 14px;gap:0}
  .nav-logo{order:1;flex-shrink:0;margin-right:8px}
  .nav-actions{order:2;margin-left:auto;gap:2px;flex-shrink:0}
  .nav-search{order:3;flex:0 0 100%;margin-top:8px}
  /* Hide account link, lang switchers — available in drawer */
  .nav-actions #accountLink,.nav-actions #ordersLink,.nav-actions #logoutBtn{display:none}
  .nav-actions .lang-wrap,.nav-actions .lang-switcher{display:none}
  /* Show hamburger button */
  .mob-menu-btn{display:flex}
  /* Tighter page padding on small screens */
  .page-wrap{padding:14px 12px}
}

/* ── Dark mode ──────────────────────────────────────────────────────────────── */
html[data-theme="dark"]{
  --blue:#4A9EE8;--blue-dark:#6AB8F5;--blue-light:#162840;
  --green:#5A9E2F;--green-light:#162310;
  --amber:#D4900A;--amber-light:#2A1A06;
  --red:#D04040;--red-light:#280F0F;
  --text:#E8E8E8;--text-sec:#9A9A9A;--text-hint:#6A6A6A;
  --bg:#121212;--surface:#1E1E1E;--surface2:#282828;
  --border:rgba(255,255,255,0.10);--border2:rgba(255,255,255,0.18);
}
/* Badge text colors are hardcoded — override for dark */
html[data-theme="dark"] .badge-pending{background:var(--amber-light);color:#E8A840}
html[data-theme="dark"] .badge-approved{background:var(--green-light);color:#6CB84A}
html[data-theme="dark"] .badge-rejected{background:var(--red-light);color:#E05050}
html[data-theme="dark"] .badge-info{background:var(--blue-light);color:#4A9EE8}
/* Common action button variants (seller pages) */
html[data-theme="dark"] .btn-accept{color:#6CB84A;border-color:#2D5A1A}
html[data-theme="dark"] .btn-counter{border-color:#1E3D5C}
html[data-theme="dark"] .btn-decline{color:#E05050;border-color:#5C1A1A}
/* Status gap pills (seller-dashboard) */
html[data-theme="dark"] .gap-low{color:#6CB84A}
html[data-theme="dark"] .gap-mid{color:#E8A840}
html[data-theme="dark"] .gap-high{color:#E05050}
/* Notice/info banners */
html[data-theme="dark"] .notice{color:#E8A840}
/* Product page pills */
html[data-theme="dark"] .pill-sale{color:#E05050}
html[data-theme="dark"] .pill-new{color:#4A9EE8}
/* Scrollbar in dark mode */
html[data-theme="dark"] *::-webkit-scrollbar-track{background:var(--surface2)}
html[data-theme="dark"] *::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:4px}
/* Semantic status panels — dark overrides */
html[data-theme="dark"] .sp-green {background:#162310;border-color:#2D5A1B;color:#6CB84A}
html[data-theme="dark"] .sp-amber {background:#231900;border-color:#4A3500;color:#D4900A}
html[data-theme="dark"] .sp-orange{background:#1F1200;border-color:#4A2E00;color:#E8A840}
html[data-theme="dark"] .sp-red   {background:#1F0A0A;border-color:#5A1C1C;color:#E05050}
html[data-theme="dark"] .sp-blue  {background:#0D1E35;border-color:#1A3A6A;color:#6AB8F5}
html[data-theme="dark"] .chip-green {background:#162310;color:#6CB84A}
html[data-theme="dark"] .chip-amber {background:#1F1200;color:#E8A840}
html[data-theme="dark"] .chip-red   {background:#1F0A0A;color:#E05050}
html[data-theme="dark"] .chip-blue  {background:#0D1E35;color:#6AB8F5}
html[data-theme="dark"] .chip-purple{background:#1E0F30;color:#C084FC}
/* Logo has a white background baked in — give it a clean pill in dark mode */
html[data-theme="dark"] .nav-logo img,
html[data-theme="dark"] .sb-logo img,
html[data-theme="dark"] .auth-logo img,
html[data-theme="dark"] .reg-logo img{background:#fff;border-radius:8px;padding:3px 8px;box-sizing:content-box}