/* =============================================================================
   QHRM My Account — the customer console.

   GENERATED: every selector is confined to `.app`, the shell ConsoleLayout renders.
   That scoping is load-bearing, not tidiness: this file and qhrm-theme.css define
   the same 35 token names with different values (the staff palette is dark, this
   one is light), so an unscoped `:root` here would repaint the whole staff console.
   ========================================================================== */

.app {
  --bg:#f5f6f9; --surface:#ffffff; --surface-2:#f2f4f8; --surface-3:#e8ebf1;
  --border:#e7e9f0; --border-2:#d4d9e3;
  --text:#12151c; --text-2:#525a68; --text-3:#8a91a0;
  --accent:#5145e8; --accent-2:#4035c9; --accent-soft:#ecebfd; --accent-on:#ffffff;
  --sidebar:#fbfcfe; --sidebar-border:#eaecf2; --topbar:#ffffff;
  --success:#0e9f6e; --success-soft:#e7f7f0; --success-text:#0a7d56;
  --warning:#d97706; --warning-soft:#fcf2e3; --warning-text:#a85d04;
  --danger:#dc2626;  --danger-soft:#fdebea;  --danger-text:#b91c1c;
  --info:#2563eb;    --info-soft:#e8efff;    --info-text:#1d4ed8;
  --shadow:0 1px 2px rgba(16,20,30,.04), 0 1px 3px rgba(16,20,30,.05);
  --shadow-lg:0 24px 60px -16px rgba(16,20,30,.24);
  --overlay:rgba(18,21,28,.40);
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-card:12px; --r-control:8px; --r-pill:9999px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) .app {
    --bg:#090b10; --surface:#13161e; --surface-2:#1a1e28; --surface-3:#232834;
    --border:#242a35; --border-2:#333a48;
    --text:#eef1f6; --text-2:#a6aebd; --text-3:#6c7484;
    --accent:#7d7bff; --accent-2:#9b99ff; --accent-soft:rgba(125,123,255,.15); --accent-on:#ffffff;
    --sidebar:#0c0e14; --sidebar-border:#1c212b; --topbar:#0f121a;
    --success:#2dd4a4; --success-soft:rgba(45,212,164,.14); --success-text:#3ce0b2;
    --warning:#f0a83a; --warning-soft:rgba(240,168,58,.15); --warning-text:#f6bb5d;
    --danger:#f1675c;  --danger-soft:rgba(241,103,92,.16);  --danger-text:#ff8479;
    --info:#5d8cff;    --info-soft:rgba(93,140,255,.16);    --info-text:#86a8ff;
    --shadow:0 1px 2px rgba(0,0,0,.5);
    --shadow-lg:0 28px 64px -16px rgba(0,0,0,.7);
    --overlay:rgba(2,4,8,.62);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] .app {
  --bg:#090b10; --surface:#13161e; --surface-2:#1a1e28; --surface-3:#232834;
  --border:#242a35; --border-2:#333a48;
  --text:#eef1f6; --text-2:#a6aebd; --text-3:#6c7484;
  --accent:#7d7bff; --accent-2:#9b99ff; --accent-soft:rgba(125,123,255,.15); --accent-on:#ffffff;
  --sidebar:#0c0e14; --sidebar-border:#1c212b; --topbar:#0f121a;
  --success:#2dd4a4; --success-soft:rgba(45,212,164,.14); --success-text:#3ce0b2;
  --warning:#f0a83a; --warning-soft:rgba(240,168,58,.15); --warning-text:#f6bb5d;
  --danger:#f1675c;  --danger-soft:rgba(241,103,92,.16);  --danger-text:#ff8479;
  --info:#5d8cff;    --info-soft:rgba(93,140,255,.16);    --info-text:#86a8ff;
  --shadow:0 1px 2px rgba(0,0,0,.5);
  --shadow-lg:0 28px 64px -16px rgba(0,0,0,.7);
  --overlay:rgba(2,4,8,.62);
  color-scheme: dark;
}
/* ── reset ───────────────────────────────────────────────────────────────── */
.app *, .app *::before, .app *::after { box-sizing: border-box; }
.app h1, .app h2, .app h3, .app h4, .app p, .app figure { margin:0; }
.app a { color: inherit; text-decoration: none; }
.app button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.app button:disabled { cursor: not-allowed; }
.app img { max-width: 100%; }
.app [hidden] { display: none !important; }
.app :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.app ::selection { background: var(--accent-soft); }
/* ── layout shell ────────────────────────────────────────────────────────── */
.app { min-height:100vh; display:flex; flex-direction:column; background:var(--bg); }
.app__body { display:flex; flex:1; min-height:0; }
.app .topbar {
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:14px;
  height:56px; padding:0 18px;
  background:var(--topbar); border-bottom:1px solid var(--border);
}
.app .topbar__brand { display:flex; align-items:center; gap:9px; font-weight:700; font-size:14.5px; letter-spacing:-.01em; }
.app .topbar__mark {
  width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-on); font-size:12px; font-weight:800;
}
.app .topbar__spacer { flex:1; }
.app .rail {
  width:248px; flex-shrink:0;
  background:var(--sidebar); border-right:1px solid var(--sidebar-border);
  display:flex; flex-direction:column;
  position:sticky; top:56px; height:calc(100vh - 56px); overflow-y:auto;
  transition:width .16s ease;
}
.app .rail--collapsed { width:64px; }
.app .rail__company {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:14px 14px; border-bottom:1px solid var(--sidebar-border); text-align:left;
}
.app .rail__avatar {
  width:32px; height:32px; border-radius:9px; flex-shrink:0; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); font-size:11.5px; font-weight:800;
}
.app .rail__nav { flex:1; padding:10px 10px 16px; }
.app .rail__group { margin-top:14px; }
.app .rail__group:first-child { margin-top:2px; }
.app .rail__grouplabel {
  padding:0 10px 6px; font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-3);
}
.app .rail__item {
  position:relative; display:flex; align-items:center; gap:11px; width:100%;
  height:37px; padding:0 11px; margin-bottom:2px;
  border-radius:9px; font-size:13px; font-weight:500; color:var(--text-2);
}
.app .rail__item:hover { background:var(--surface-2); color:var(--text); }
.app .rail__item.is-active { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.app .rail__item.is-active::before {
  content:''; position:absolute; left:-10px; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:var(--accent);
}
.app .rail__label { flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app .rail__badge {
  min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  font-size:10.5px; font-weight:700; font-family:var(--font-mono);
}
.app .rail__badge--danger { background:var(--danger); color:#fff; }
.app .rail__badge--accent { background:var(--accent); color:var(--accent-on); }
.app .rail__dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.app .rail__foot { border-top:1px solid var(--sidebar-border); padding:10px; }
.app .main { flex:1; min-width:0; }
.app .page { padding:24px 26px 56px; max-width:1360px; }
/* ── page header ─────────────────────────────────────────────────────────── */
.app .pagehead { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.app .pagehead h1 { font-size:23px; font-weight:700; letter-spacing:-.02em; }
.app .pagehead__sub { margin-top:4px; font-size:13px; color:var(--text-2); }
.app .pagehead__actions { display:flex; align-items:center; gap:9px; flex-shrink:0; }
/* ── surfaces ────────────────────────────────────────────────────────────── */
.app .card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-card); box-shadow:var(--shadow);
}
.app .card__pad { padding:18px 19px; }
.app .card__head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px; border-bottom:1px solid var(--border);
}
.app .card__title { font-size:14px; font-weight:700; }
.app .card__caption { margin-top:2px; font-size:12px; color:var(--text-3); }
.app .grid { display:grid; gap:16px; }
.app .grid--kpi { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.app .grid--cards { grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); }
.app .grid--2 { grid-template-columns:1.6fr 1fr; }
.app .grid--form { grid-template-columns:repeat(2,minmax(0,1fr)); }
.app .span-2 { grid-column:span 2; }
/* ── buttons ─────────────────────────────────────────────────────────────── */
.app .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:34px; padding:0 14px; border-radius:var(--r-control);
  font-size:12.5px; font-weight:600; white-space:nowrap;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  transition:background .12s ease, border-color .12s ease;
}
.app .btn:hover:not(:disabled) { background:var(--surface-2); }
.app .btn:disabled { opacity:.55; }
.app .btn--primary { background:var(--accent); color:var(--accent-on); border-color:var(--accent); }
.app .btn--primary:hover:not(:disabled) { background:var(--accent-2); border-color:var(--accent-2); }
.app .btn--danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.app .btn--ghost { background:transparent; border-color:transparent; color:var(--text-2); }
.app .btn--ghost:hover:not(:disabled) { background:var(--surface-2); color:var(--text); }
.app .btn--sm { height:29px; padding:0 10px; font-size:11.5px; }
.app .btn--lg { height:40px; padding:0 18px; font-size:13.5px; }
.app .btn--block { width:100%; }
.app .iconbtn {
  width:32px; height:32px; border-radius:var(--r-control); display:grid; place-items:center;
  color:var(--text-2); border:1px solid transparent;
}
.app .iconbtn:hover { background:var(--surface-2); color:var(--text); }
/* ── pills & chips ───────────────────────────────────────────────────────── */
.app .pill {
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  font-size:11px; font-weight:600; padding:3px 9px; border-radius:var(--r-pill);
  background:var(--surface-3); color:var(--text-3);
}
.app .pill__dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; background:currentColor; }
.app .pill--success { background:var(--success-soft); color:var(--success-text); }
.app .pill--warning { background:var(--warning-soft); color:var(--warning-text); }
.app .pill--danger { background:var(--danger-soft);  color:var(--danger-text); }
.app .pill--info { background:var(--info-soft);    color:var(--info-text); }
.app .pill--accent { background:var(--accent-soft);  color:var(--accent); }
.app .chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:var(--r-pill);
  background:var(--surface-3); color:var(--text-2);
}
.app .chip__dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
/* ── money & numerics ────────────────────────────────────────────────────── */
.app .mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.app .money { font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.app .num-xl { font-size:30px; font-weight:700; letter-spacing:-.025em; }
/* ── tables ──────────────────────────────────────────────────────────────── */
.app .tblwrap { overflow-x:auto; }
.app .tbl { width:100%; border-collapse:collapse; }
.app .tbl th {
  text-align:left; padding:9px 14px; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-3);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.app .tbl td { padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.app .tbl tbody tr:hover { background:var(--surface-2); }
.app .tbl tbody tr:last-child td { border-bottom:0; }
.app .tbl .is-overdue { box-shadow:inset 3px 0 0 var(--danger); }
/* ── forms ───────────────────────────────────────────────────────────────── */
.app .field { display:flex; flex-direction:column; gap:6px; }
.app .field__label { font-size:11.5px; font-weight:600; color:var(--text-2); }
.app .field__hint { font-size:11.5px; color:var(--text-3); }
.app .field__error { font-size:11.5px; color:var(--danger-text); }
.app .input, .app .select, .app .textarea {
  width:100%; height:38px; padding:0 12px;
  border:1px solid var(--border-2); border-radius:var(--r-control);
  background:var(--surface); color:var(--text); font-size:13px; font-family:inherit;
}
.app .textarea { height:auto; min-height:96px; padding:10px 12px; resize:vertical; line-height:1.5; }
.app .input:focus, .app .select:focus, .app .textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.app .input:disabled, .app .select:disabled { background:var(--surface-2); color:var(--text-3); }
.app .input.is-invalid { border-color:var(--danger); }
.app .locked {
  display:flex; align-items:center; gap:8px; height:38px; padding:0 12px;
  border:1px dashed var(--border-2); border-radius:var(--r-control);
  background:var(--surface-2); color:var(--text-3); font-size:13px;
}
.app .segment { display:inline-flex; gap:4px; padding:3px; background:var(--surface-2); border-radius:10px; }
.app .segment__btn {
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  height:32px; padding:0 13px; border-radius:7px; font-size:12.5px; font-weight:500; color:var(--text-2);
}
.app .segment__btn.is-active { background:var(--surface); color:var(--text); font-weight:600; box-shadow:var(--shadow); }
.app .toggle { width:40px; height:23px; border-radius:var(--r-pill); position:relative; flex-shrink:0; background:var(--surface-3); transition:background .16s ease; }
.app .toggle.is-on { background:var(--accent); }
.app .toggle__knob { position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:left .16s ease; }
.app .toggle.is-on .toggle__knob { left:19px; }
.app .check {
  width:18px; height:18px; border-radius:5px; flex-shrink:0; display:grid; place-items:center;
  border:1.5px solid var(--border-2); background:var(--surface-2); color:var(--accent-on);
}
.app .check.is-on { border-color:var(--accent); background:var(--accent); }
/* ── progress ────────────────────────────────────────────────────────────── */
.app .bar { height:6px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; }
.app .bar__fill { height:100%; border-radius:var(--r-pill); background:var(--accent); transition:width .3s ease; }
.app .bar__fill--warning { background:var(--warning); }
.app .bar__fill--danger { background:var(--danger); }
/* ── banners ─────────────────────────────────────────────────────────────── */
.app .banner {
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 15px; border-radius:var(--r-card); margin-bottom:12px;
  border:1px solid var(--border); background:var(--surface);
}
.app .banner--danger { background:var(--danger-soft);  border-color:var(--danger); }
.app .banner--warning { background:var(--warning-soft); border-color:var(--warning); }
.app .banner--info { background:var(--info-soft);    border-color:var(--info); }
.app .banner__icon { flex-shrink:0; margin-top:1px; }
.app .banner__text { flex:1; font-size:13px; font-weight:500; }
.app .banner--danger  .banner__text, .app .banner--danger  .banner__icon { color:var(--danger-text); }
.app .banner--warning .banner__text, .app .banner--warning .banner__icon { color:var(--warning-text); }
.app .banner--info    .banner__text, .app .banner--info    .banner__icon { color:var(--info-text); }
/* ── drawer ──────────────────────────────────────────────────────────────── */
.app .overlay { position:fixed; inset:0; background:var(--overlay); z-index:100; }
.app .drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(520px,100vw); z-index:110;
  background:var(--surface); border-left:1px solid var(--border); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; animation:slidein .22s cubic-bezier(.22,.61,.36,1);
}
.app .drawer--wide { width:min(680px,100vw); }
.app .drawer__head { display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--border); }
.app .drawer__title { font-size:16px; font-weight:700; }
.app .drawer__sub { margin-top:2px; font-size:12px; color:var(--text-3); }
.app .drawer__body { flex:1; overflow-y:auto; padding:22px; }
.app .drawer__foot { display:flex; gap:10px; justify-content:flex-end; padding:16px 22px; border-top:1px solid var(--border); }
keyframes slidein { from { transform:translateX(24px); opacity:0; } to { transform:none; opacity:1; } }
.app .modal {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:110;
  width:min(440px,calc(100vw - 32px));
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  box-shadow:var(--shadow-lg); padding:22px;
}
/* ── toast ───────────────────────────────────────────────────────────────── */
.app .toast {
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:200;
  display:flex; align-items:center; gap:10px;
  padding:11px 16px; border-radius:10px;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lg);
  font-size:13px; font-weight:500;
  animation:toastin .2s ease;
}
keyframes toastin { from { opacity:0; transform:translate(-50%,8px); } to { opacity:1; transform:translate(-50%,0); } }
/* ── empty / loading ─────────────────────────────────────────────────────── */
.app .empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:52px 24px; }
.app .empty__icon { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--surface-2); color:var(--text-3); margin-bottom:14px; }
.app .empty__title { font-size:15px; font-weight:700; }
.app .empty__hint { margin-top:5px; font-size:13px; color:var(--text-2); max-width:380px; }
.app .empty__action { margin-top:16px; }
.app .skel { background:var(--surface-2); border-radius:6px; animation:pulse 1.4s ease-in-out infinite; }
keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }
/* ── misc ────────────────────────────────────────────────────────────────── */
.app .muted { color:var(--text-2); }
.app .muted-3 { color:var(--text-3); }
.app .row { display:flex; align-items:center; gap:10px; }
.app .row--between { justify-content:space-between; }
.app .stack { display:flex; flex-direction:column; gap:14px; }
.app .divider { height:1px; background:var(--border); }
.app .avatar {
  width:32px; height:32px; border-radius:var(--r-pill); flex-shrink:0; display:grid; place-items:center;
  font-size:11px; font-weight:700; background:var(--surface-3); color:var(--text-2);
}
.app .contextbar {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; margin-bottom:16px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface-2);
  font-size:12.5px; color:var(--text-2);
}
/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {.app .rail {
    position:fixed; top:56px; left:0; bottom:0; z-index:80;
    transform:translateX(-100%); transition:transform .2s ease;
    box-shadow:var(--shadow-lg);
  }
.app .rail.is-open { transform:none; }
.app .page { padding:18px 16px 48px; }
.app .grid--2, .app .grid--form { grid-template-columns:1fr; }
.app .span-2 { grid-column:auto; }
.app .pagehead { flex-direction:column; align-items:stretch; }
}

/* ── product picker (My products) ─────────────────────────────────────────────
   One row along the top; scrolls sideways so any number of catalog products fit. */
.app .psel {
  display:flex; align-items:center; gap:6px; overflow-x:auto; padding:6px; margin-bottom:16px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  box-shadow:var(--shadow); scrollbar-width:thin;
}
.app .psel__item {
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0; white-space:nowrap;
  height:38px; padding:0 14px; border-radius:9px; border:1px solid transparent;
  font-size:13px; font-weight:600; color:var(--text-2);
}
.app .psel__item:hover { background:var(--surface-2); color:var(--text); }
.app .psel__item.is-active {
  background:var(--accent-soft); color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 35%, transparent);
}
.app .psel__item--catalog { border:1px dashed var(--border-2); color:var(--text-3); font-weight:500; }
.app .psel__sep { width:1px; align-self:stretch; margin:6px 4px; background:var(--border); flex-shrink:0; }
.app .psel__tag { font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:9999px; }