/* ============================================================
   COPIERWORKS / TONERTECH CUSTOMER PORTAL — DESIGN SYSTEM
   Ported from the Copierworks Design System reference.
   Static stylesheet (linked directly, no Vite build required).
   Order: fonts -> tokens -> base -> components.
   ============================================================ */

@import url('https://fonts.bunny.net/css?family=archivo:400,500,600,700,800,900|ibm-plex-sans:400,400i,500,600,700|ibm-plex-mono:400,500,600&display=swap');

/* ============================================================
   COLOR TOKENS — Two-color brand:
   Copierworks/Tonertech Green (#5d860c) + Blue (#1b74ba)
   ============================================================ */
:root {
  /* Brand Green ramp */
  --green-50:#f4f8e7; --green-100:#e6f0c8; --green-200:#cce292; --green-300:#aecd57;
  --green-400:#88b22c; --green-500:#5d860c; --green-600:#4f7409; --green-700:#3f5c08;
  --green-800:#344a0b; --green-900:#2b3d0e;
  /* Brand Blue ramp */
  --blue-50:#eef5fb; --blue-100:#d6e8f6; --blue-200:#aad0ec; --blue-300:#75b1dd;
  --blue-400:#3e90cd; --blue-500:#1b74ba; --blue-600:#15619e; --blue-700:#134f80;
  --blue-800:#143f64; --blue-900:#122f49;
  /* Neutral ramp */
  --neutral-0:#ffffff; --neutral-50:#f6f7f8; --neutral-100:#eceef1; --neutral-200:#dde0e4;
  --neutral-300:#c5cad0; --neutral-400:#9aa1ab; --neutral-500:#6f7884; --neutral-600:#515a66;
  --neutral-700:#3c434d; --neutral-800:#272c33; --neutral-900:#161a1f; --neutral-950:#0e1115;
  /* Amber (warning) */
  --amber-50:#fdf4e1; --amber-100:#fae5bd; --amber-300:#f0b755; --amber-500:#d98c0a;
  --amber-600:#b87208; --amber-700:#8f5807;
  /* Red (danger) */
  --red-50:#fbeae8; --red-100:#f6cfca; --red-300:#e58578; --red-500:#cf3b2e;
  --red-600:#b32d22; --red-700:#97271d;

  /* Semantic — light theme */
  --brand-green:var(--green-500); --brand-green-strong:var(--green-600); --brand-blue:var(--blue-500);
  --color-primary:var(--blue-500); --color-primary-hover:var(--blue-600); --color-primary-active:var(--blue-700);
  --color-primary-tint:var(--blue-50); --on-primary:#ffffff;
  --color-brand:var(--green-600); --color-brand-hover:var(--green-700); --color-brand-active:var(--green-800);
  --color-brand-tint:var(--green-50); --on-brand:#ffffff;
  --surface-page:var(--neutral-50); --surface-card:var(--neutral-0); --surface-sunken:var(--neutral-100);
  --surface-raised:var(--neutral-0); --surface-hover:var(--neutral-50); --surface-active:var(--neutral-100);
  --surface-inverse:var(--neutral-900); --surface-brand:var(--green-600); --surface-brand-soft:var(--green-50);
  --surface-accent:var(--blue-600); --surface-accent-soft:var(--blue-50);
  --text-strong:var(--neutral-900); --text-body:var(--neutral-800); --text-muted:var(--neutral-600);
  --text-subtle:var(--neutral-500); --text-disabled:var(--neutral-400); --text-inverse:var(--neutral-0);
  --text-link:var(--blue-600); --text-on-brand:#ffffff;
  --border-subtle:var(--neutral-200); --border-default:var(--neutral-300); --border-strong:var(--neutral-400);
  --border-brand:var(--green-500); --border-accent:var(--blue-500); --border-focus:var(--blue-500);
  --status-success:var(--green-600); --status-success-soft:var(--green-50); --status-success-text:var(--green-700); --status-success-border:var(--green-200);
  --status-info:var(--blue-600); --status-info-soft:var(--blue-50); --status-info-text:var(--blue-700); --status-info-border:var(--blue-200);
  --status-warning:var(--amber-500); --status-warning-soft:var(--amber-50); --status-warning-text:var(--amber-700); --status-warning-border:var(--amber-100);
  --status-danger:var(--red-500); --status-danger-soft:var(--red-50); --status-danger-text:var(--red-700); --status-danger-border:var(--red-100);
  --focus-ring-color:color-mix(in srgb, var(--blue-500) 40%, transparent);
  --meter-mono:var(--neutral-700);

  /* Typography */
  --font-display:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extrabold:800;
  --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:16px; --text-lg:18px;
  --text-xl:20px; --text-2xl:24px; --text-3xl:30px; --text-4xl:38px; --text-5xl:48px;
  --leading-none:1; --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-0.02em; --tracking-snug:-0.01em; --tracking-normal:0; --tracking-wide:0.02em; --tracking-wider:0.06em;

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;

  /* Radius */
  --radius-xs:3px; --radius-sm:5px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:22px; --radius-full:999px;

  /* Elevation */
  --shadow-xs:0 1px 2px rgba(22,26,31,.06);
  --shadow-sm:0 1px 2px rgba(22,26,31,.06), 0 1px 3px rgba(22,26,31,.09);
  --shadow-md:0 2px 4px rgba(22,26,31,.05), 0 4px 10px rgba(22,26,31,.08);
  --shadow-lg:0 2px 6px rgba(22,26,31,.05), 0 10px 22px rgba(22,26,31,.10);
  --shadow-xl:0 4px 10px rgba(22,26,31,.06), 0 20px 40px rgba(22,26,31,.14);
  --shadow-focus:0 0 0 3px var(--focus-ring-color);

  /* Motion */
  --duration-fast:140ms; --duration-base:200ms;
  --ease-standard:cubic-bezier(0.2,0,0,1); --ease-out:cubic-bezier(0.16,1,0.3,1);
}

/* Dark theme (opt-in) */
[data-theme="dark"] {
  --color-primary:var(--blue-400); --color-primary-hover:var(--blue-300); --color-primary-active:var(--blue-200);
  --color-primary-tint:color-mix(in srgb, var(--blue-500) 22%, transparent); --on-primary:var(--neutral-950);
  --color-brand:var(--green-400); --color-brand-hover:var(--green-300); --color-brand-active:var(--green-200);
  --color-brand-tint:color-mix(in srgb, var(--green-500) 20%, transparent); --on-brand:var(--neutral-950);
  --surface-page:var(--neutral-950); --surface-card:var(--neutral-900); --surface-sunken:#0a0d11;
  --surface-raised:var(--neutral-800); --surface-hover:var(--neutral-800); --surface-active:var(--neutral-700);
  --surface-inverse:var(--neutral-50); --surface-brand:var(--green-500);
  --surface-brand-soft:color-mix(in srgb, var(--green-500) 16%, transparent);
  --surface-accent:var(--blue-500); --surface-accent-soft:color-mix(in srgb, var(--blue-500) 16%, transparent);
  --text-strong:var(--neutral-50); --text-body:var(--neutral-200); --text-muted:var(--neutral-400);
  --text-subtle:var(--neutral-500); --text-disabled:var(--neutral-600); --text-inverse:var(--neutral-950);
  --text-link:var(--blue-300);
  --border-subtle:var(--neutral-800); --border-default:var(--neutral-700); --border-strong:var(--neutral-600);
  --status-success-soft:color-mix(in srgb, var(--green-500) 16%, transparent); --status-success-text:var(--green-300);
  --status-info-soft:color-mix(in srgb, var(--blue-500) 16%, transparent); --status-info-text:var(--blue-300);
  --status-warning-soft:color-mix(in srgb, var(--amber-500) 18%, transparent); --status-warning-text:var(--amber-300);
  --status-danger-soft:color-mix(in srgb, var(--red-500) 18%, transparent); --status-danger-text:var(--red-300);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--font-sans); font-size:var(--text-base); font-weight:var(--weight-regular);
  line-height:var(--leading-relaxed); color:var(--text-body); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6 { margin:0; font-family:var(--font-display); font-weight:var(--weight-bold);
  line-height:var(--leading-snug); letter-spacing:var(--tracking-snug); color:var(--text-strong); }
h1 { font-size:var(--text-5xl); font-weight:var(--weight-extrabold); letter-spacing:var(--tracking-tight); line-height:var(--leading-tight); }
h2 { font-size:var(--text-4xl); font-weight:var(--weight-extrabold); letter-spacing:var(--tracking-tight); }
h3 { font-size:var(--text-2xl); }
h4 { font-size:var(--text-xl); }
h5 { font-size:var(--text-md); }
p { margin:0; }
a { color:var(--text-link); text-decoration:none; text-underline-offset:2px; transition:color var(--duration-fast) var(--ease-standard); }
a:hover { text-decoration:underline; }
code,kbd,samp,pre { font-family:var(--font-mono); font-size:.9em; }
small { font-size:var(--text-xs); }
:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   APP SHELL (sidebar + topbar)
   ============================================================ */
.pt-app { display:flex; min-height:100vh; background:var(--surface-page); color:var(--text-body); font-family:var(--font-sans); }
.pt-side { width:236px; flex:none; background:var(--surface-card); border-right:1px solid var(--border-subtle); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.pt-side__logo { padding:20px 18px 14px; }
.pt-side__logo img { height:30px; width:auto; display:block; }
.pt-nav { display:flex; flex-direction:column; gap:2px; padding:6px 12px; flex:1; overflow-y:auto; }
.pt-nav__sec { font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-subtle); padding:14px 10px 6px; }
.pt-nav__item { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--radius-md); color:var(--text-muted); font-size:14px; font-weight:500; cursor:pointer; border:0; background:transparent; width:100%; text-align:left; text-decoration:none; transition:background var(--duration-fast), color var(--duration-fast); }
.pt-nav__item:hover { background:var(--surface-hover); color:var(--text-strong); text-decoration:none; }
.pt-nav__item--active { background:var(--color-primary-tint); color:var(--color-primary); font-weight:600; }
.pt-nav__item svg { flex:none; }
.pt-nav__item .pt-badge { margin-left:auto; }
.pt-side__foot { padding:12px; border-top:1px solid var(--border-subtle); }
.pt-acct { display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--radius-md); }
.pt-acct__avatar { width:34px; height:34px; border-radius:var(--radius-full); flex:none; display:grid; place-items:center; background:var(--color-brand-tint); color:var(--color-brand); font-weight:700; font-size:13px; font-family:var(--font-display); }
.pt-acct__name { font-size:13px; font-weight:600; color:var(--text-strong); line-height:1.2; word-break:break-word; }
.pt-acct__sub { font-size:11px; color:var(--text-subtle); }

.pt-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.pt-top { min-height:62px; flex:none; display:flex; align-items:center; gap:16px; padding:12px 24px; background:var(--surface-card); border-bottom:1px solid var(--border-subtle); position:sticky; top:0; z-index:20; }
.pt-top__title { font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--text-strong); letter-spacing:-.01em; }
.pt-top__spacer { flex:1; }
.pt-content { flex:1; padding:24px; }
.pt-content__inner { max-width:1080px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }

/* Mobile top bar (hamburger) — hidden on desktop */
.pt-mobilebar { display:none; }
@media (max-width: 860px) {
  .pt-side { position:fixed; z-index:60; transform:translateX(-100%); transition:transform var(--duration-base) var(--ease-out); box-shadow:var(--shadow-xl); }
  .pt-app[data-nav-open="true"] .pt-side { transform:translateX(0); }
  .pt-scrim { display:none; position:fixed; inset:0; background:rgba(14,17,21,.45); z-index:55; }
  .pt-app[data-nav-open="true"] .pt-scrim { display:block; }
  .pt-mobilebar { display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--surface-card); border-bottom:1px solid var(--border-subtle); position:sticky; top:0; z-index:40; }
  .pt-mobilebar img { height:26px; width:auto; }
  .pt-content { padding:16px; }
}

/* ============================================================
   PAGE HEADER (in-content)
   ============================================================ */
.pg-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.pg-head__h { font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--text-strong); letter-spacing:-.02em; }
.pg-head__sub { color:var(--text-muted); font-size:14px; margin-top:3px; }
.pg-head__actions { display:flex; gap:10px; align-items:center; }

/* Two-column page layout with a sticky right rail - e.g. My Account's
   "Shopping for new hardware" promo, which should stay in view like an ad
   slot instead of scrolling away with the rest of the page. */
.pg-2col { display:flex; gap:20px; align-items:flex-start; }
.pg-2col__main { flex:1; min-width:0; display:flex; flex-direction:column; gap:20px; }
.pg-2col__aside { width:280px; flex:none; position:sticky; top:86px; display:flex; flex-direction:column; gap:20px; }
@media (max-width: 860px) {
  .pg-2col { flex-direction:column; }
  .pg-2col__aside { position:static; width:auto; top:auto; }
}

/* ============================================================
   CARD
   ============================================================ */
.card { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); }
.card__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border-subtle); }
.card__title { font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--text-strong); }
.card__body { padding:20px; }
.card__body--flush { padding:0; }
.card--inset { background:var(--surface-page); }

/* Definition list grid */
.dl { display:grid; grid-template-columns:auto 1fr; gap:10px 18px; margin:0; }
.dl dt { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-subtle); align-self:center; }
.dl dd { margin:0; font-size:14px; color:var(--text-body); text-align:right; }
.dl dd strong { color:var(--text-strong); }
@media (max-width:560px){ .dl { grid-template-columns:1fr; gap:2px 0; } .dl dt{ margin-top:10px;} .dl dd{ text-align:left;} }

/* Sub-card (bordered tile) */
.tile { border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:14px 16px; background:var(--surface-card); }
.tile__label { font-weight:600; color:var(--text-strong); font-size:14px; }
.grid-tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:12px; }

/* ============================================================
   TABLE
   ============================================================ */
.tbl-wrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; background:var(--surface-card); font-size:14px; }
.tbl th { text-align:left; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-subtle); padding:12px 16px; background:var(--surface-page); border-bottom:1px solid var(--border-subtle); white-space:nowrap; }
.tbl td { padding:13px 16px; border-bottom:1px solid var(--border-subtle); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:0; }
.tbl tbody tr:hover { background:var(--surface-hover); }
.tbl .num { text-align:right; font-variant-numeric:tabular-nums; }
.tbl .center { text-align:center; }
.mono { font-family:var(--font-mono); font-size:13px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-sans);
  font-size:14px; font-weight:600; line-height:1; height:40px; padding:0 16px; border-radius:var(--radius-md);
  border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast); }
.btn:hover { text-decoration:none; }
.btn:focus-visible { box-shadow:var(--shadow-focus); outline:none; }
.btn:disabled, .btn[disabled] { opacity:.5; cursor:not-allowed; }
.btn--primary { background:var(--color-primary); color:var(--on-primary); }
.btn--primary:hover { background:var(--color-primary-hover); }
.btn--brand { background:var(--color-brand); color:var(--on-brand); }
.btn--brand:hover { background:var(--color-brand-hover); }
.btn--secondary { background:var(--surface-card); color:var(--text-strong); border-color:var(--border-default); }
.btn--secondary:hover { background:var(--surface-hover); }
.btn--ghost { background:transparent; color:var(--text-muted); }
.btn--ghost:hover { background:var(--surface-hover); color:var(--text-strong); }
.btn--danger { background:var(--status-danger); color:#fff; }
.btn--danger:hover { background:var(--red-600); }
.btn--sm { height:32px; padding:0 12px; font-size:13px; }
.btn--lg { height:48px; padding:0 22px; font-size:16px; }
.btn--block { width:100%; }
.btn--icon { padding:0; width:40px; height:40px; }
.linkbtn { background:none; border:0; padding:0; color:var(--text-link); font:inherit; font-weight:600; cursor:pointer; }
.linkbtn:hover { text-decoration:underline; }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.field { display:flex; flex-direction:column; gap:6px; }
.field__label { font-size:13px; font-weight:600; color:var(--text-strong); }
.field__hint { font-size:12px; color:var(--text-subtle); }
.field__error { font-size:12.5px; color:var(--status-danger-text); font-weight:500; }
.input, .select, .textarea {
  width:100%; font-family:var(--font-sans); font-size:14px; color:var(--text-body);
  background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--radius-md);
  padding:0 12px; height:40px; transition:border-color var(--duration-fast), box-shadow var(--duration-fast); }
.textarea { height:auto; padding:10px 12px; line-height:var(--leading-normal); resize:vertical; }
.input:focus, .select:focus, .textarea:focus { outline:none; border-color:var(--border-focus); box-shadow:var(--shadow-focus); }
.input::placeholder, .textarea::placeholder { color:var(--text-disabled); }
.input--sm { height:32px; font-size:13px; }
.qty { width:64px; text-align:center; }
.checkbox { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--text-body); cursor:pointer; }
.checkbox input { width:16px; height:16px; accent-color:var(--color-primary); }

/* ============================================================
   BADGES / TAGS / STATUS DOTS
   ============================================================ */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; line-height:1;
  padding:4px 9px; border-radius:var(--radius-full); border:1px solid transparent; white-space:nowrap; }
.badge--neutral { background:var(--surface-sunken); color:var(--text-muted); border-color:var(--border-subtle); }
.badge--success { background:var(--status-success-soft); color:var(--status-success-text); border-color:var(--status-success-border); }
.badge--info { background:var(--status-info-soft); color:var(--status-info-text); border-color:var(--status-info-border); }
.badge--warning { background:var(--status-warning-soft); color:var(--status-warning-text); border-color:var(--status-warning-border); }
.badge--danger { background:var(--status-danger-soft); color:var(--status-danger-text); border-color:var(--status-danger-border); }
.badge--brand { background:var(--color-brand-tint); color:var(--color-brand); border-color:var(--green-200); }
.tag { display:inline-flex; align-items:center; font-size:12px; font-weight:500; padding:3px 8px; border-radius:var(--radius-sm); background:var(--surface-sunken); color:var(--text-muted); }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--radius-md); border:1px solid; font-size:14px; }
.alert__title { font-weight:600; }
.alert--success { background:var(--status-success-soft); color:var(--status-success-text); border-color:var(--status-success-border); }
.alert--info { background:var(--status-info-soft); color:var(--status-info-text); border-color:var(--status-info-border); }
.alert--warning { background:var(--status-warning-soft); color:var(--status-warning-text); border-color:var(--status-warning-border); }
.alert--danger { background:var(--status-danger-soft); color:var(--status-danger-text); border-color:var(--status-danger-border); }

/* ============================================================
   STAT TILES
   ============================================================ */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px; }
.stat { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:16px 18px; }
.stat__label { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-subtle); }
.stat__value { font-family:var(--font-display); font-weight:800; font-size:28px; color:var(--text-strong); letter-spacing:-.02em; margin-top:6px; }
.stat__sub { font-size:12.5px; color:var(--text-muted); margin-top:4px; }
.stat__value--pos { color:var(--status-success-text); }
.stat__value--neg { color:var(--status-danger-text); }

/* ============================================================
   METER BARS (MPS toner levels)
   ============================================================ */
.meter { display:flex; align-items:center; gap:10px; }
.meter__track { width:96px; height:8px; border-radius:var(--radius-full); background:var(--surface-sunken); overflow:hidden; flex:none; }
.meter__fill { height:100%; border-radius:var(--radius-full); background:var(--meter-mono); transition:width var(--duration-base) var(--ease-out); }
.meter__fill--k { background:var(--neutral-900); }
.meter__fill--c { background:#0a8fc6; }
.meter__fill--m { background:#c6379a; }
.meter__fill--y { background:#e0b400; }
.meter__pct { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); min-width:34px; text-align:right; }

/* Toner/consumable swatch */
.swatch { width:28px; height:28px; border-radius:var(--radius-sm); flex:none; border:1px solid rgba(0,0,0,.1); display:grid; place-items:center; }
.swatch img { max-width:22px; max-height:22px; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty { text-align:center; color:var(--text-muted); padding:40px 20px; }
.empty__ic { width:56px; height:56px; border-radius:var(--radius-lg); background:var(--surface-page); display:grid; place-items:center; margin:0 auto 14px; color:var(--text-subtle); }
.empty__title { font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--text-strong); }
.empty__text { font-size:13.5px; margin-top:6px; max-width:380px; margin-inline:auto; }

/* ============================================================
   LOGIN / GUEST (two-panel)
   ============================================================ */
.lg-wrap { display:flex; min-height:100vh; background:var(--surface-card); font-family:var(--font-sans); }
.lg-brand { position:relative; overflow:hidden; flex:1; background:var(--neutral-900); padding:56px; display:flex; flex-direction:column; justify-content:space-between; gap:40px; }
.lg-brand__mark { position:absolute; right:-90px; bottom:-120px; width:440px; height:440px; opacity:.09; pointer-events:none; }
.lg-brand__logo { position:relative; }
.lg-brand__logo img { height:34px; width:auto; background:#fff; padding:9px 14px; border-radius:var(--radius-md); box-shadow:var(--shadow-md); }
.lg-brand__eyebrow { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--green-400); }
.lg-brand__h { font-family:var(--font-display); font-weight:800; font-size:38px; line-height:1.08; letter-spacing:-.02em; color:#fff; margin-top:14px; position:relative; max-width:440px; }
.lg-brand__h b { color:var(--blue-400); }
.lg-brand__list { display:flex; flex-direction:column; gap:14px; position:relative; }
.lg-brand__li { display:flex; align-items:center; gap:12px; color:var(--neutral-200); font-size:15px; }
.lg-brand__li .b-dot { width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:var(--green-400); flex:none; }
.lg-form { width:460px; flex:none; display:flex; flex-direction:column; justify-content:center; padding:56px; gap:22px; }
.lg-form__logo { display:none; }
.lg-form__h { font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--text-strong); letter-spacing:-.01em; }
.lg-form__sub { color:var(--text-muted); font-size:14px; margin-top:4px; }
.lg-form__row { display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.lg-form__foot { font-size:13px; color:var(--text-muted); text-align:center; }
@media (max-width: 900px) {
  .lg-brand { display:none; }
  .lg-form { width:100%; max-width:460px; margin:0 auto; }
  .lg-form__logo { display:block; text-align:center; margin-bottom:8px; }
  .lg-form__logo img { height:40px; width:auto; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.stack { display:flex; flex-direction:column; }
.stack-2 { gap:8px; } .stack-3 { gap:12px; } .stack-4 { gap:16px; } .stack-6 { gap:24px; }
.row { display:flex; align-items:center; gap:12px; }
.row--wrap { flex-wrap:wrap; }
.spacer { flex:1; }
.muted { color:var(--text-muted); }
.subtle { color:var(--text-subtle); }
.strong { color:var(--text-strong); font-weight:600; }
.text-danger { color:var(--status-danger-text); }
.text-success { color:var(--status-success-text); }
.text-sm { font-size:13px; } .text-xs { font-size:12px; }
.right { text-align:right; } .center { text-align:center; }
.nowrap { white-space:nowrap; }
.hide { display:none !important; }

/* ============================================================
   ADDITIONS (2026-07-10 round 2)
   ============================================================ */

/* Bigger brand logo in the login top-left (and mobile form logo) */
.lg-brand__logo img { height: 54px; padding: 12px 18px; }
.lg-form__logo img { height: 52px; }

/* Toasts — AJAX add-to-cart feedback (no page reload / scroll jump) */
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--neutral-900); color: #fff; padding: 12px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: 14px; min-width: 220px; max-width: 360px; transition: opacity var(--duration-base) var(--ease-out); animation: toast-in var(--duration-base) var(--ease-out); }
.toast--err { background: var(--red-600); }
.toast__ic { width: 22px; height: 22px; border-radius: 50%; background: var(--green-500); color: #fff; display: grid; place-items: center; flex: none; font-size: 13px; font-weight: 700; }
.toast--err .toast__ic { background: rgba(255,255,255,.22); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ADDITIONS (2026-07-11 round 3) — login logo x4, no pill, mono-white on dark panel */
.lg-brand__logo img { height: auto; width: min(460px, 85%); max-width: 100%; padding: 0; background: none; box-shadow: none; border-radius: 0; filter: brightness(0) invert(1); }

/* ADDITIONS (2026-07-11 round 4) — logo back to colour + cart drawer */
.lg-brand__logo img { filter: none; }

.cart-drawer__scrim { position: fixed; inset: 0; background: rgba(14,17,21,.4); z-index: 115; opacity: 0; visibility: hidden; transition: opacity var(--duration-base) var(--ease-out); }
.cart-drawer__scrim[data-open="true"] { opacity: 1; visibility: visible; }
.cart-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 384px; max-width: 92vw; background: var(--surface-card); border-left: 1px solid var(--border-subtle); box-shadow: var(--shadow-xl); transform: translateX(100%); transition: transform var(--duration-base) var(--ease-out); z-index: 120; display: flex; flex-direction: column; }
.cart-drawer[data-open="true"] { transform: translateX(0); }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); flex: none; }
.cart-drawer__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-strong); }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 4px 18px; }
.cart-drawer__foot { border-top: 1px solid var(--border-subtle); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; flex: none; }
.cart-line { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--border-subtle); }
.cart-line:last-child { border-bottom: 0; }
.cart-line__main { flex: 1; min-width: 0; }
.cart-line__label { font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.cart-line__meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.cart-line__total { font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.cart-empty { text-align: center; color: var(--text-muted); padding: 44px 12px; font-size: 14px; }
.pt-cartbtn { position: relative; }
.pt-cartbtn .pt-cartbtn__count { position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; line-height: 1; }

/* ADDITIONS (2026-07-11 round 5) — Alpine cloak for the delete-confirm modal */
[x-cloak] { display: none !important; }

/* ADDITIONS (2026-07-11 round 6) — login watermark x3 + password show/hide */
.lg-brand__mark { width: 1320px; height: 1320px; right: -300px; bottom: -420px; opacity: .08; }
.pw-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 42px; display: grid; place-items: center; background: none; border: 0; color: var(--text-subtle); cursor: pointer; }
.pw-toggle:hover { color: var(--text-body); }

/* ADDITIONS (2026-07-11 round 7) — login dark-panel polish */
/* Logo pinned to top; headline + lede + bullets centered as one group (no dead gap) */
.lg-brand { justify-content: flex-start; }
.lg-brand__content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 30px; position: relative; }
.lg-brand__lede { color: var(--neutral-300); font-size: 16px; line-height: 1.6; margin-top: 14px; max-width: 430px; }
/* Harmonised brand blue everywhere (matches the logo + Sign-in button) */
.lg-brand__h b { color: var(--blue-500); }
/* Bigger, brighter feature bullets */
.lg-brand__list { gap: 18px; }
.lg-brand__li { font-size: 16px; gap: 14px; }
.lg-brand__li .b-dot { width: 42px; height: 42px; border-radius: 11px; background: rgba(136,178,44,.16); color: var(--green-300); }
/* Trust signal under the form */
.lg-form__trust { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: var(--text-subtle); margin-top: 4px; }

/* ============================================================
   ROUND 8 — VISUAL POLISH (2026-07-12)
   Layered on top of the base system to add depth, warmth and
   brand colour without touching any view. Semantic tokens only,
   so light + dark themes both stay consistent. Safe to remove
   this whole block to revert.
   ============================================================ */

/* Soft brand wash behind page content (subtle, fades out) */
.pt-content {
  background-color: var(--surface-page);
  background-image:
    radial-gradient(1100px 300px at 12% -90px, color-mix(in srgb, var(--brand-blue) 7%, transparent), transparent 70%),
    radial-gradient(1000px 280px at 100% -70px, color-mix(in srgb, var(--brand-green) 7%, transparent), transparent 70%);
  background-repeat: no-repeat;
}

/* Cards: rounder, softly raised, hairline-subtle border */
.card {
  border-radius: var(--radius-lg);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

/* Card header: faint tint + a small brand accent before the title */
.card__head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-sunken) 55%, var(--surface-card)), var(--surface-card));
}
.card__title { position: relative; padding-left: 14px; }
.card__title::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: var(--radius-full);
  background: linear-gradient(var(--brand-green), var(--brand-green-strong));
}

/* Page title as a strong display heading */
.pg-head__h {
  font-family: var(--font-display); font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight); font-size: var(--text-3xl); line-height: var(--leading-tight);
}

/* Sidebar: coloured active state with an accent rail + hover feedback */
.pt-nav__item { border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.pt-nav__item:hover { background: var(--surface-hover); }
.pt-nav__item--active {
  background: var(--color-primary-tint); color: var(--text-link);
  font-weight: var(--weight-semibold); position: relative;
}
.pt-nav__item--active::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 var(--radius-full) var(--radius-full) 0; background: var(--color-primary);
}

/* Icon chips (account team, product swatches): soft brand tint + brand icon */
.swatch {
  background: var(--surface-brand-soft);
  color: var(--brand-green-strong);
  border-radius: var(--radius-md);
}

/* Stat / balance figures: bigger, display weight */
.stat__value {
  font-family: var(--font-display); font-weight: var(--weight-extrabold);
  font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
}

/* Tables: quieter header, gentle row hover */
.tbl thead th {
  background: var(--surface-sunken); color: var(--text-subtle);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
}
.tbl tbody tr { transition: background var(--duration-fast) var(--ease-standard); }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--brand-blue) 4%, var(--surface-card)); }

/* Tiles: soft raise on hover */
.tile { transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.tile:hover { box-shadow: var(--shadow-sm); border-color: var(--border-default); }

/* Empty-state icon: brand-tinted, not grey */
.empty__ic { background: var(--surface-brand-soft); color: var(--brand-green-strong); }

/* Pill badges */
.badge { border-radius: var(--radius-full); }

/* Primary / brand buttons: a hint of depth + lift on hover */
.btn--primary, .btn--brand {
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.btn--primary:hover, .btn--brand:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn--primary:active, .btn--brand:active { transform: translateY(0); box-shadow: var(--shadow-xs); }

/* ---- ROUND 8b tweaks (2026-07-12) ---- */

/* Clip card contents to the rounded corners: the header tint was bleeding
   past the radius, making the top corners look like they didn't close. */
.card { overflow: hidden; }

/* Consumable / product icons: drop the chip bubble behind the image
   (keeps the soft brand chip on icon-only swatches like the account team). */
.swatch:has(img) { background: transparent; border: 0; }

/* Theme toggle: moon shows in light mode, sun shows in dark mode. */
.theme-ic { display: inline-flex; align-items: center; }
.theme-ic--light { display: none; }
[data-theme="dark"] .theme-ic--light { display: inline-flex; }
[data-theme="dark"] .theme-ic--dark { display: none; }

/* ---- ROUND 8c: dark-mode contrast fixes (2026-07-12) ---- */
/* The mono/black toner + drum meter fills were near-black on a near-black
   track in dark mode (invisible). Lighten the track + the mono/K fills in
   dark only; the bright c/m/y fills are fine and left untouched. */
[data-theme="dark"] .meter__track { background: var(--neutral-800); }
[data-theme="dark"] .meter__fill { background: var(--neutral-300); }
[data-theme="dark"] .meter__fill--k { background: var(--neutral-200); }
/* The blanket .meter__fill rule above actually outranks .meter__fill--c/m/y
   (two class-selector specificity beats one), so despite the comment above,
   every meter was rendering the same neutral grey in dark mode regardless of
   toner colour - restore them explicitly. */
[data-theme="dark"] .meter__fill--c { background: #0a8fc6; }
[data-theme="dark"] .meter__fill--m { background: #c6379a; }
[data-theme="dark"] .meter__fill--y { background: #e0b400; }

/* ---- ROUND 9: dark-mode visibility for meter bars + consumable swatches
   (2026-07-23) - both were hard to see against the near-black dark surface,
   so give each a subtle white outline in dark mode only. ---- */
[data-theme="dark"] .meter__track { outline: 1px solid rgba(255, 255, 255, .4); outline-offset: 1px; }
/* .swatch:has(img) zeroes the border out (round 8b, above) for icon-only
   swatches - the exact ones used for toner/consumable images - so it must be
   overridden specifically, not just .swatch, or this has no visible effect. */
[data-theme="dark"] .swatch { border-color: rgba(255, 255, 255, .4); }
[data-theme="dark"] .swatch:has(img) { border: 1px solid rgba(255, 255, 255, .4); }

/* ---- ROUND 8d: file input alignment + button styling (2026-07-12) ---- */
.input--file {
  height: auto;
  padding: 5px 12px;
  line-height: normal;
  cursor: pointer;
}
.input--file::-webkit-file-upload-button,
.input--file::file-selector-button {
  margin: 0 12px 0 0;
  padding: 7px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-body);
  font: inherit;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.input--file:hover::-webkit-file-upload-button,
.input--file:hover::file-selector-button {
  background: var(--surface-active);
}

/* ---- ROUND 8e: submit-button loading state (2026-07-13) ---- */
@keyframes pt-spin { to { transform: rotate(360deg); } }
.btn-spinner {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: var(--radius-full); animation: pt-spin 0.6s linear infinite;
}
.btn.is-loading { cursor: wait; opacity: 0.9; }

/* ---- ROUND 8f: keep the loading spinner animating under reduced-motion ----
   The global reduced-motion reset above freezes ALL animations to .001ms.
   The submit spinner is essential feedback, not decoration, so re-enable it. */
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 0.6s !important; }
}