/* ================================================================
   HopMeds Pharmacy · Web client (v4)
   Warm Nepali "marigold + teal" design system. Light + dark themes,
   accessible focus, reduced-motion aware, print-friendly.
   ================================================================ */

:root {
  /* spacing */
  --s-none:0; --s-xxxs:2px; --s-xxs:4px; --s-xs:8px; --s-sm:12px; --s-md:16px;
  --s-lg:20px; --s-xl:24px; --s-xxl:32px; --s-xxxl:40px; --s-xxxxl:48px; --s-huge:64px;
  /* radii */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-xxl:28px; --r-full:9999px;

  /* brand palette (HopMeds) */
  --c-primary:#0f4d4d; --c-primary-light:#1a6b6b; --c-primary-dark:#0a3838;
  --c-primary-container:#d5e7e7; --c-on-primary:#fdf3e3; --c-on-primary-container:#0a3838;
  --c-secondary:#d96a25; --c-secondary-light:#e88a4f; --c-secondary-dark:#a84812;
  --c-secondary-container:#fde2cc; --c-on-secondary:#ffffff;
  --c-marigold:#d96a25; --c-marigold-deep:#a84812; --c-marigold-soft:#fde2cc;
  --c-teal:#1a6b6b; --c-teal-deep:#0f4d4d; --c-teal-soft:#d5e7e7;
  --c-cream:#f9ead4; --c-rule:#ead8b8;

  --c-background:#fdf3e3; --c-surface:#ffffff; --c-surface-variant:#f9ead4; --c-surface-disabled:#ead8b8;

  /* status */
  --c-error:#c4543c; --c-error-container:#fbdfd6; --c-on-error:#ffffff; --c-on-error-container:#7a1f1f;
  --c-warning:#b8551c; --c-warning-container:#fde2cc;
  --c-success:#2f7d52; --c-success-container:#dcefe2;
  --c-info:#1a6b6b; --c-info-container:#d5e7e7;

  /* text — tertiary darkened from #9b8569 to meet 4.5:1 on cream */
  --c-text:#2a1a10; --c-text-secondary:#6b5340; --c-text-tertiary:#80684c; --c-text-disabled:#b4a07e;
  --c-ink:#2a1a10; --c-ink-soft:#6b5340;
  --c-backdrop:rgba(42,26,16,.55);

  --c-stock-high:#2f7d52; --c-stock-low:#c4543c; --c-stock-out:#7a1f1f;
  --c-expiry-soon:#b8551c; --c-expiry-expired:#c4543c;
  --c-refunded:#8a4baf;

  --shadow-sm:0 1px 2px rgba(42,26,16,.06);
  --shadow:0 1px 2px rgba(42,26,16,.06), 0 4px 14px rgba(42,26,16,.05);
  --shadow-md:0 4px 16px rgba(42,26,16,.08);
  --shadow-lg:0 12px 36px rgba(42,26,16,.12);
  --shadow-xl:0 20px 60px rgba(42,26,16,.16);

  --focus-ring:0 0 0 3px rgba(15,77,77,.30);
}

/* ---- Dark theme ---- */
[data-theme="dark"] {
  --c-primary:#4fd1c5; --c-primary-light:#5fe0d4; --c-primary-dark:#2c8c84;
  --c-primary-container:#173d3d; --c-on-primary:#062020; --c-on-primary-container:#cdeeea;
  --c-secondary:#f08a4b; --c-secondary-dark:#c96a2c; --c-secondary-container:#4a2913;
  --c-marigold:#f08a4b; --c-marigold-deep:#f2a877; --c-marigold-soft:#3a2614;
  --c-teal:#4fd1c5; --c-teal-deep:#0f4d4d; --c-teal-soft:#173d3d;
  --c-cream:#241c14; --c-rule:#3a3027;

  --c-background:#161210; --c-surface:#211b16; --c-surface-variant:#2a221b; --c-surface-disabled:#332a22;

  --c-error:#f08a73; --c-error-container:#4a2018; --c-on-error:#2a0d08; --c-on-error-container:#f3b6a6;
  --c-warning:#f0a463; --c-warning-container:#3a2614;
  --c-success:#5fc98c; --c-success-container:#143726;
  --c-info:#4fd1c5; --c-info-container:#173d3d;

  --c-text:#f3e9da; --c-text-secondary:#c4b59f; --c-text-tertiary:#9a8a73; --c-text-disabled:#6b5d4a;
  --c-ink:#f3e9da; --c-ink-soft:#c4b59f;
  --c-backdrop:rgba(0,0,0,.66);

  --c-stock-high:#5fc98c; --c-stock-low:#f08a73; --c-stock-out:#f0a0a0;
  --c-expiry-soon:#f0a463; --c-expiry-expired:#f08a73; --c-refunded:#c79be0;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
  --shadow-md:0 4px 16px rgba(0,0,0,.45); --shadow-lg:0 12px 36px rgba(0,0,0,.5); --shadow-xl:0 20px 60px rgba(0,0,0,.6);
  --focus-ring:0 0 0 3px rgba(79,209,197,.35);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family:'Nirmala UI','Kohinoor Devanagari','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--c-background); color:var(--c-text);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  transition:background-color .2s, color .2s;
}
body.is-modal-open { overflow:hidden; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; border:none; background:none; }
a { color:var(--c-primary); text-decoration:none; }
img { max-width:100%; display:block; }
.hidden { display:none !important; }
.ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---- Accessible focus ---- */
:focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; border-radius:4px; }
button:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) { outline:none; }

/* ---- Typography utils ---- */
.t-label-md { font-weight:500; font-size:12px; letter-spacing:.5px; }
.mono { font-family:ui-monospace,'Cascadia Mono','SFMono-Regular',Consolas,monospace; }
.text-secondary { color:var(--c-text-secondary); }
.text-tertiary { color:var(--c-text-tertiary); }
.text-error { color:var(--c-error); }
.text-center { text-align:center; }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-xs);
  padding:10px 18px; border-radius:var(--r-md);
  font-family:'Nirmala UI','Kohinoor Devanagari','Segoe UI',sans-serif; font-weight:700; font-size:14px; letter-spacing:-.2px; line-height:1.2;
  border:1px solid transparent; white-space:nowrap; user-select:none;
  transition:background-color .15s, border-color .15s, transform .08s, box-shadow .15s, color .15s;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; transform:none !important; }
.btn:active:not(:disabled) { transform:scale(.985); }
.btn--contained { background:var(--c-secondary); color:var(--c-on-secondary); }
.btn--contained:hover:not(:disabled) { background:var(--c-secondary-dark); }
.btn--outlined { background:transparent; color:var(--c-text); border-color:var(--c-rule); }
.btn--outlined:hover:not(:disabled) { background:var(--c-surface-variant); border-color:var(--c-primary); }
.btn--text { background:transparent; color:var(--c-primary); padding:8px 12px; }
.btn--text:hover:not(:disabled) { background:var(--c-primary-container); }
.btn--teal { background:var(--c-primary); color:var(--c-on-primary); }
.btn--teal:hover:not(:disabled) { background:var(--c-primary-dark); }
.btn--danger { background:var(--c-error); color:var(--c-on-error); }
.btn--danger:hover:not(:disabled) { filter:brightness(.92); }
.btn--sm { padding:7px 12px; font-size:13px; border-radius:var(--r-sm); }
.btn--lg { padding:14px 24px; font-size:16px; }
.btn--block { display:flex; width:100%; }
.btn .spinner, .card .spinner { width:14px; height:14px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---- Cards ---- */
.card { background:var(--c-surface); border:1px solid var(--c-rule); border-radius:var(--r-xl); margin-bottom:var(--s-sm); overflow:hidden; transition:border-color .15s, box-shadow .15s, transform .12s; }
.card--filled { background:var(--c-surface-variant); border-color:transparent; }
.card--clickable { cursor:pointer; }
.card--clickable:hover { border-color:var(--c-primary); box-shadow:var(--shadow); }
.card--clickable:active { transform:scale(.995); }
.card__title-bar { padding:var(--s-md) var(--s-lg) var(--s-xs); }
.card__title { font-weight:700; font-size:16px; letter-spacing:-.3px; color:var(--c-ink); }
.card__subtitle { font-size:12px; color:var(--c-ink-soft); margin-top:2px; }
.card__content { padding:var(--s-md) var(--s-lg); }
.card__content--flush { padding:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.compact-card { margin:0 !important; padding:var(--s-sm) var(--s-md); }

/* ---- Stat cards ---- */
.stat-card { position:relative; border-radius:var(--r-xl); padding:var(--s-md); border:1px solid transparent; min-height:104px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:2px; text-align:left;
  transition:transform .12s, box-shadow .15s; }
.stat-card--filled { background:var(--c-cream); color:var(--c-ink); }
.stat-card--outlined { background:var(--c-surface); border-color:var(--c-rule); border-left:3px solid var(--c-marigold-deep); }
.stat-card--clickable { cursor:pointer; }
.stat-card--clickable:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
.stat-card__icon { position:absolute; top:var(--s-sm); right:var(--s-sm); width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.45); display:grid; place-items:center; font-size:15px; }
.stat-card__title { font-weight:600; font-size:11px; letter-spacing:.4px; text-transform:uppercase; opacity:.85; margin-bottom:2px; }
.stat-card__value { font-weight:800; font-size:26px; letter-spacing:-.8px; line-height:1.05; margin-bottom:2px; }
.stat-card__subtitle { font-weight:500; font-size:11px; opacity:.8; }

/* ---- Hero card ---- */
.hero-card { position:relative; border-radius:var(--r-xxl); padding:var(--s-lg); background:linear-gradient(135deg,#d2691e,#a8480f); color:#fff; overflow:hidden; min-height:132px; display:flex; flex-direction:column; justify-content:flex-end; }
.hero-card__filigree { position:absolute; right:-60px; bottom:-60px; width:200px; height:200px; pointer-events:none; opacity:.9; }
.hero-card__eyebrow { font-weight:600; font-size:11px; letter-spacing:.6px; text-transform:uppercase; opacity:.95; margin-bottom:4px; position:relative; }
.hero-card__value { font-weight:800; font-size:40px; letter-spacing:-1.4px; line-height:44px; position:relative; }
.hero-card__bottom { display:flex; align-items:center; gap:var(--s-sm); margin-top:var(--s-sm); position:relative; }
.hero-card__caption { font-size:12px; opacity:1; }

/* ---- Text fields ---- */
.tf { position:relative; margin-bottom:var(--s-md); }
.tf__field { position:relative; background:var(--c-surface); border:1px solid var(--c-rule); border-radius:var(--r-sm); transition:border-color .12s, box-shadow .12s; }
.tf__input, .tf__textarea, .tf__select { width:100%; padding:22px 14px 8px; border:0; background:transparent; font:inherit; font-family:inherit; color:var(--c-text); outline:none; border-radius:var(--r-sm); }
.tf__select { appearance:none; padding-right:36px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b5340'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px; }
[data-theme="dark"] .tf__select { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c4b59f'><path d='M7 10l5 5 5-5z'/></svg>"); }
.tf__textarea { padding-top:24px; padding-bottom:12px; resize:vertical; min-height:80px; }
/* placeholder only visible once focused, so it never collides with the resting floating label */
.tf__input::placeholder, .tf__textarea::placeholder { color:transparent; transition:color .12s; }
.tf__field:focus-within .tf__input::placeholder, .tf__field:focus-within .tf__textarea::placeholder { color:var(--c-text-tertiary); }
.tf__label { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--c-text-tertiary); font-size:14px; pointer-events:none; transition:top .15s, font-size .15s, color .15s; padding:0 4px; max-width:calc(100% - 28px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tf__field:focus-within .tf__label,
.tf--filled .tf__label,
.tf__input:not(:placeholder-shown) ~ .tf__label,
.tf__textarea:not(:placeholder-shown) ~ .tf__label,
.tf__input[type="date"] ~ .tf__label,
.tf__select ~ .tf__label {
  top:0; font-size:11px; color:var(--c-primary); font-weight:600; letter-spacing:.4px;
  background:linear-gradient(to bottom, var(--c-surface) 0 55%, transparent 55% 100%);
}
/* Chromium can populate saved credentials after initial rendering without firing input/change. */
.tf__input:-webkit-autofill ~ .tf__label {
  top:0; font-size:11px; color:var(--c-primary); font-weight:600; letter-spacing:.4px;
  background:linear-gradient(to bottom, var(--c-surface) 0 55%, transparent 55% 100%);
}

/* ---- Type-ahead suggestions (anchored inside .tf, which is relative) ---- */
.suggest { position:absolute; top:100%; left:0; right:0; z-index:30; margin-top:2px; background:var(--c-surface); border:1px solid var(--c-rule); border-radius:var(--r-sm); box-shadow:var(--shadow-md); max-height:240px; overflow-y:auto; }
.suggest__row { display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; text-align:left; padding:9px 14px; border-bottom:1px solid var(--c-rule); cursor:pointer; }
.suggest__row:last-child { border-bottom:none; }
.suggest__row:hover, .suggest__row--active { background:var(--c-primary-container); }
.suggest__label { font-weight:600; font-size:14px; color:var(--c-text); }
.suggest__sub { font-size:12px; color:var(--c-text-secondary); }
.tf__field:focus-within { border-color:var(--c-primary); box-shadow:var(--focus-ring); }

.checkbox-row { display:flex; align-items:center; gap:var(--s-sm); padding:var(--s-xs) 0; cursor:pointer; }
.checkbox-row input { width:18px; height:18px; accent-color:var(--c-primary); }

/* ---- Search ---- */
.searchbar { display:flex; align-items:center; gap:var(--s-xs); height:48px; background:var(--c-surface); border-radius:var(--r-sm); padding:0 var(--s-md); border:1px solid var(--c-rule); box-shadow:var(--shadow-sm); transition:border-color .12s, box-shadow .12s; }
.searchbar:focus-within { border-color:var(--c-primary); box-shadow:var(--focus-ring); }
.searchbar__icon { color:var(--c-text-secondary); font-size:16px; }
.searchbar__input { flex:1; border:0; background:transparent; outline:none; font-family:inherit; font-size:14px; }
.searchbar__input::placeholder { color:var(--c-text-tertiary); }

/* ---- Empty / error ---- */
.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--s-xxl); min-height:280px; text-align:center; }
.empty__icon { font-size:56px; margin-bottom:var(--s-md); line-height:1; }
.empty__title { font-weight:600; font-size:16px; color:var(--c-text-secondary); }
.empty__message { margin-top:var(--s-xs); color:var(--c-text-tertiary); font-size:14px; max-width:420px; }
.empty__action { margin-top:var(--s-lg); }

/* ---- Modal ---- */
.modal-scrim { position:fixed; inset:0; background:var(--c-backdrop); display:grid; place-items:center; padding:var(--s-lg); z-index:80; animation:scrim-in .15s ease-out; }
@keyframes scrim-in { from { opacity:0; } to { opacity:1; } }
.modal { background:var(--c-surface); border-radius:var(--r-md); width:100%; max-width:560px; max-height:88vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-xl); animation:modal-in .2s ease-out; }
.modal--lg { max-width:720px; }
@keyframes modal-in { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
.modal__header { display:flex; align-items:center; justify-content:space-between; padding:var(--s-xs) var(--s-xs) var(--s-xs) var(--s-lg); border-bottom:1px solid var(--c-rule); }
.modal__title { flex:1; font-weight:700; font-size:20px; line-height:28px; color:var(--c-ink); }
.modal__content { padding:var(--s-lg); overflow:auto; overscroll-behavior:contain; }
.modal__footer { display:flex; gap:var(--s-xs); justify-content:flex-end; flex-wrap:wrap; padding:var(--s-md) var(--s-lg); border-top:1px solid var(--c-rule); background:var(--c-surface-variant); }
.icon-btn { width:40px; height:40px; display:inline-grid; place-items:center; border-radius:var(--r-full); color:var(--c-text-secondary); font-size:18px; transition:background .12s, color .12s; }
.icon-btn:hover { background:var(--c-surface-variant); color:var(--c-text); }
.icon-btn--sm { width:32px; height:32px; font-size:14px; }

/* ---- Loading ---- */
.loading-scrim { position:fixed; inset:0; background:var(--c-backdrop); display:grid; place-items:center; z-index:90; }
.loading-card { background:var(--c-surface); border-radius:var(--r-md); padding:var(--s-xl); display:flex; flex-direction:column; align-items:center; min-width:150px; box-shadow:var(--shadow-xl); }
.loading-spinner { width:36px; height:36px; border:3px solid var(--c-primary-container); border-top-color:var(--c-primary); border-radius:50%; animation:spin .8s linear infinite; }
.loading-message { margin-top:var(--s-sm); color:var(--c-text-secondary); font-size:14px; }

/* ---- Pills ---- */
.pill { display:inline-flex; align-items:center; gap:4px; padding:3px var(--s-sm); border-radius:var(--r-full); font-weight:600; font-size:11px; letter-spacing:.25px; background:var(--c-surface-variant); color:var(--c-text-secondary); }
.pill--paid { background:var(--c-success-container); color:var(--c-success); }
.pill--pending { background:var(--c-warning-container); color:var(--c-warning); }
.pill--partial { background:var(--c-warning-container); color:var(--c-warning); }
.pill--cancelled { background:var(--c-error-container); color:var(--c-error); }
.pill--refunded { background:var(--c-surface-variant); color:var(--c-refunded); }
.pill--draft { background:var(--c-surface-variant); color:var(--c-text-secondary); }
.pill--admin { background:var(--c-primary-container); color:var(--c-primary); }
.pill--stock-high { background:var(--c-success-container); color:var(--c-stock-high); }
.pill--stock-low { background:var(--c-error-container); color:var(--c-stock-low); }
.pill--stock-out { background:var(--c-error-container); color:var(--c-stock-out); }
.pill--expiry-soon { background:var(--c-warning-container); color:var(--c-expiry-soon); }
.pill--expiry-expired { background:var(--c-error-container); color:var(--c-expiry-expired); }
.chip { cursor:pointer; border:1px solid var(--c-rule); background:var(--c-surface); white-space:nowrap; padding:6px var(--s-sm); transition:all .12s; }
.chip:hover { border-color:var(--c-primary); }
.chip-row { display:flex; flex-wrap:wrap; gap:6px; overflow-x:visible; margin-bottom:var(--s-sm); }

/* ---- Tables ---- */
.table { width:100%; border-collapse:collapse; font-size:13px; }
.table th, .table td { text-align:left; padding:var(--s-sm) var(--s-lg); border-bottom:1px solid var(--c-rule); vertical-align:middle; }
.table th { font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--c-text-secondary); background:var(--c-surface-variant); }
.table tr:last-child td { border-bottom:none; }
.table tbody tr { transition:background .12s; }
.table tbody tr:hover { background:var(--c-surface-variant); }
.table.bordered { border:1px solid var(--c-rule); border-radius:var(--r-sm); overflow:hidden; }
.table .row-expired td { background:var(--c-error-container); }

/* ---- Segmented ---- */
.segmented { display:inline-flex; background:var(--c-surface-variant); border-radius:var(--r-full); padding:3px; border:1px solid var(--c-rule); }
.segmented__btn { padding:7px 16px; border-radius:var(--r-full); font-weight:500; font-size:13px; color:var(--c-text-secondary); transition:all .12s; white-space:nowrap; }
.segmented__btn--active { background:var(--c-surface); color:var(--c-primary); font-weight:600; box-shadow:var(--shadow-sm); }
.segmented--compact .segmented__btn { padding:5px 10px; font-size:11px; }
.seg-tabs { display:flex; overflow-x:auto; max-width:100%; }

/* ---- Toasts ---- */
.toasts { position:fixed; top:var(--s-lg); right:var(--s-lg); display:flex; flex-direction:column; gap:var(--s-xs); z-index:100; max-width:380px; }
.toast { background:var(--c-surface); border:1px solid var(--c-rule); border-left:4px solid var(--c-primary); border-radius:var(--r-sm); padding:var(--s-sm) var(--s-md); box-shadow:var(--shadow-lg); animation:toast-in .2s ease-out; transition:opacity .2s, transform .2s; }
@keyframes toast-in { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }
.toast--success { border-left-color:var(--c-success); }
.toast--error { border-left-color:var(--c-error); }
.toast--warning { border-left-color:var(--c-warning); }
.toast__title { font-weight:600; font-size:13px; color:var(--c-text); }
.toast__body { font-size:12px; color:var(--c-text-secondary); margin-top:2px; line-height:1.4; word-break:break-word; }

/* ---- Skeleton ---- */
.skel { background:linear-gradient(90deg, var(--c-surface-variant) 0%, var(--c-cream) 50%, var(--c-surface-variant) 100%); background-size:200% 100%; animation:shine 1.4s linear infinite; border-radius:var(--r-sm); height:14px; }
@keyframes shine { from { background-position:200% 0; } to { background-position:-200% 0; } }
.skel--lg { height:80px; } .skel--xl { height:132px; }

/* ---- Forms layout ---- */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-md); }
.form-grid__full { grid-column:1 / -1; }
@media (max-width:600px) { .form-grid { grid-template-columns:1fr; } }
.form-section { margin-bottom:var(--s-xl); }
.form-section__title { font-weight:600; font-size:12px; letter-spacing:.8px; text-transform:uppercase; color:var(--c-text-secondary); margin-bottom:var(--s-sm); padding-bottom:var(--s-xs); border-bottom:1px solid var(--c-rule); }
.def-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-sm) var(--s-lg); }
.def-grid dt { font-size:11px; color:var(--c-text-tertiary); text-transform:uppercase; letter-spacing:.6px; }
.def-grid dd { font-size:14px; color:var(--c-text); margin-top:2px; }
.totals-dl { display:grid; grid-template-columns:1fr auto; gap:var(--s-xs) var(--s-md); font-size:14px; align-items:baseline; }
.totals-dl dt { color:var(--c-text-secondary); }
.totals-grand { font-weight:700; color:var(--c-text); font-size:16px; border-top:1px solid var(--c-rule); padding-top:var(--s-xs); }
dd.totals-grand { color:var(--c-primary); }

/* ---- Page head ---- */
.page-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:var(--s-lg); gap:var(--s-md); flex-wrap:wrap; }
.page-head__title { font-weight:700; font-size:28px; letter-spacing:-.6px; }
.page-head__sub { color:var(--c-text-secondary); font-size:14px; margin-top:var(--s-xxs); }
.page-head__actions { display:flex; align-items:center; gap:var(--s-xs); }

/* ---- Auth ---- */
#auth-screen { min-height:100vh; display:flex; flex-direction:column; padding:var(--s-xl);
  background:radial-gradient(ellipse 70% 60% at 20% 0%, rgba(217,106,37,.16) 0%, transparent 60%),
             radial-gradient(ellipse 50% 50% at 100% 100%, rgba(15,77,77,.12) 0%, transparent 60%), var(--c-background); }
.auth-shell { flex:1; display:flex; align-items:center; justify-content:center; padding:var(--s-xl) 0; }
.auth-card { width:100%; max-width:420px; background:var(--c-surface); border:1px solid var(--c-rule); border-radius:var(--r-xl); padding:var(--s-xxl) var(--s-xl); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; }
.auth-logo-wrap { display:flex; justify-content:center; margin-bottom:var(--s-xs); }
.auth-title { text-align:center; font-weight:700; font-size:26px; letter-spacing:-.6px; color:var(--c-primary); margin-bottom:var(--s-xxxs); }
.auth-title__sub { display:block; font-weight:600; font-size:12px; line-height:1.1; color:var(--c-text-secondary); opacity:.9; margin-top:5px; text-transform:uppercase; letter-spacing:2.4px; }
.auth-title__sub:lang(ne) { text-transform:none; letter-spacing:normal; font-size:13.5px; margin-top:3px; }
.auth-form-title { text-align:center; font-size:22px; color:var(--c-ink); margin-top:var(--s-sm); }
.auth-subtitle { text-align:center; color:var(--c-text-secondary); font-size:14px; margin-top:var(--s-sm); margin-bottom:var(--s-xl); }
.auth-lang { display:flex; justify-content:center; margin-bottom:var(--s-xl); }
.auth-error { background:var(--c-error-container); color:var(--c-on-error-container); padding:var(--s-sm) var(--s-md); border-radius:var(--r-sm); font-size:13px; margin-bottom:var(--s-sm); border-left:3px solid var(--c-error); }
.auth-notice { background:var(--c-success-container); color:var(--c-success); padding:var(--s-sm) var(--s-md); border-radius:var(--r-sm); font-size:13px; border-left:3px solid var(--c-success); text-align:left; }
.auth-footer { text-align:center; color:var(--c-text-tertiary); font-size:12px; margin-top:var(--s-lg); line-height:1.6; }
.auth-footer .api-url { font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; word-break:break-all; }
.auth-shell--signup { align-items:flex-start; }
.auth-card--signup { max-width:760px; }
.auth-card--signup .form-section { margin-bottom:var(--s-lg); }
.auth-switch { display:flex; align-items:center; justify-content:center; gap:var(--s-xxs); flex-wrap:wrap; margin-top:var(--s-sm); color:var(--c-text-secondary); font-size:13px; }
.auth-switch .btn--text, .auth-link-row .btn--text { min-height:44px; }
.auth-link-row { display:flex; justify-content:space-between; gap:var(--s-xs); flex-wrap:wrap; margin-top:calc(-1 * var(--s-xs)); margin-bottom:var(--s-xs); }
.auth-link-row--end { justify-content:flex-end; }
.auth-password-hint { color:var(--c-text-secondary); font-size:12px; line-height:1.5; margin:calc(-1 * var(--s-xs)) 0 var(--s-md); }
.auth-resend { width:100%; display:flex; flex-direction:column; gap:var(--s-sm); text-align:left; }
.auth-resend .tf { margin-bottom:0; }
.auth-card--verification { max-width:460px; }
.auth-code-form { width:100%; display:flex; flex-direction:column; }
.auth-code-field { margin-bottom:var(--s-md); }
.auth-code-label { display:block; color:var(--c-text-secondary); font-size:12px; font-weight:600; margin-bottom:var(--s-xs); }
.auth-code-input { width:100%; min-height:58px; border:1px solid var(--c-rule); border-radius:var(--r-sm); background:var(--c-surface); color:var(--c-text); padding:10px 14px 10px calc(14px + .45em); text-align:center; font:700 26px/1.2 ui-monospace,'Cascadia Mono',Consolas,monospace; font-variant-numeric:tabular-nums; letter-spacing:.45em; direction:ltr; }
.auth-code-input:hover { border-color:var(--c-primary); }
.auth-code-input:focus-visible { border-color:var(--c-primary); outline:3px solid var(--c-primary-container); outline-offset:1px; }
.auth-code-field .auth-password-hint { margin:var(--s-xs) 0 0; text-align:left; }
.auth-card--verification .auth-resend { margin-top:var(--s-sm); }
.auth-card--verification > #show-login { margin-top:var(--s-sm); }
.auth-success { text-align:center; gap:var(--s-md); }
.auth-success__icon { width:64px; height:64px; display:grid; place-items:center; align-self:center; border-radius:var(--r-full); background:var(--c-success-container); color:var(--c-success); font-size:34px; font-weight:800; }
.auth-success__icon--error { background:var(--c-error-container); color:var(--c-error); }
.auth-success > .loading-spinner { align-self:center; }
.auth-success h2 { font-size:24px; color:var(--c-ink); }
.auth-progress { width:100%; list-style:none; display:grid; gap:var(--s-xs); padding:0; margin:var(--s-sm) 0; text-align:left; }
.auth-progress__step { display:flex; align-items:center; gap:var(--s-sm); min-height:44px; padding:var(--s-xs) var(--s-sm); border:1px solid var(--c-rule); border-radius:var(--r-sm); color:var(--c-text-secondary); }
.auth-progress__step > span { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border-radius:var(--r-full); background:var(--c-surface-variant); font-weight:700; }
.auth-progress__step--complete { color:var(--c-success); }
.auth-progress__step--complete > span { background:var(--c-success-container); }
.auth-progress__step--current { color:var(--c-primary); border-color:var(--c-primary); font-weight:600; }
.auth-progress__step--current > span { background:var(--c-primary-container); }
.signup-checkbox { min-height:56px; align-self:start; }
.signup-privacy { margin-bottom:var(--s-md); align-items:flex-start; }
.signup-privacy a { text-decoration:underline; text-underline-offset:2px; }
.signup-honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.env-tag { font-size:10px; font-weight:700; padding:3px var(--s-xs); border-radius:var(--r-full); background:var(--c-warning-container); color:var(--c-secondary-dark); letter-spacing:.8px; text-transform:uppercase; }

/* ---- App shell ---- */
#app-shell { display:grid; grid-template-columns:272px 1fr; min-height:100vh; }
.app-sidebar { background:var(--c-primary); color:var(--c-on-primary); padding:var(--s-lg) var(--s-sm); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; }
[data-theme="dark"] .app-sidebar { background:var(--c-surface); border-right:1px solid var(--c-rule); color:var(--c-text); }
.sidebar-brand { display:flex; flex-direction:column; align-items:center; gap:var(--s-xxs); padding:var(--s-sm) var(--s-sm) var(--s-lg); }
.sidebar-brand__sub { font-size:10px; line-height:1.1; opacity:.72; margin-top:3px; text-transform:uppercase; letter-spacing:1.7px; }
.sidebar-brand__sub:lang(ne) { text-transform:none; letter-spacing:normal; font-size:11.5px; }
.sidebar-nav { display:flex; flex-direction:column; gap:2px; }
.sidebar-nav__btn { display:flex; align-items:center; gap:var(--s-sm); padding:10px var(--s-sm); border-radius:var(--r-sm); color:inherit; opacity:.78; font-family:inherit; font-weight:500; font-size:14px; text-align:left; transition:all .12s; }
.sidebar-nav__btn:hover { background:rgba(253,243,227,.10); opacity:1; }
[data-theme="dark"] .sidebar-nav__btn:hover { background:var(--c-surface-variant); }
.sidebar-nav__btn.is-active { background:var(--c-secondary); color:#fff; opacity:1; font-weight:700; box-shadow:0 4px 12px rgba(168,72,18,.3); }
.sidebar-nav__glyph { width:22px; display:grid; place-items:center; font-size:16px; }
.sidebar-spacer { flex:1; }
.sidebar-controls { display:flex; flex-direction:column; gap:var(--s-xs); margin-top:var(--s-md); }
.sidebar-theme { padding:8px var(--s-sm); border-radius:var(--r-sm); color:inherit; opacity:.85; font-size:12px; font-weight:600; text-align:left; transition:background .12s; }
.sidebar-theme:hover { background:rgba(253,243,227,.10); opacity:1; }
[data-theme="dark"] .sidebar-theme:hover { background:var(--c-surface-variant); }
.sidebar-card { padding:var(--s-sm) var(--s-md); background:rgba(253,243,227,.06); border:1px solid rgba(253,243,227,.1); border-radius:var(--r-md); margin-top:var(--s-sm); }
[data-theme="dark"] .sidebar-card { background:var(--c-surface-variant); border-color:var(--c-rule); }
.sidebar-user { display:flex; align-items:center; gap:var(--s-sm); }
.sidebar-user__meta { flex:1; min-width:0; }
.sidebar-user__name { font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user__role { font-size:10px; letter-spacing:.8px; text-transform:uppercase; opacity:.65; margin-top:2px; }
.sidebar-user__logout { width:32px; height:32px; border-radius:var(--r-sm); color:inherit; opacity:.6; display:grid; place-items:center; font-size:14px; transition:all .12s; }
.sidebar-user__logout:hover { background:rgba(253,243,227,.12); opacity:1; }
.app-main { padding:var(--s-xl) var(--s-xxl) var(--s-xxxl); overflow-x:hidden; }
.app-main:focus { outline:none; }

@media (max-width:840px) {
  #app-shell { grid-template-columns:1fr; padding-bottom:calc(68px + env(safe-area-inset-bottom, 0px)); }
  .app-sidebar { position:fixed; inset:auto 0 0; width:100%; height:calc(68px + env(safe-area-inset-bottom, 0px)); min-height:68px; flex-direction:row; align-items:flex-start; padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); overflow:visible; z-index:70; border-top:1px solid rgba(255,255,255,.16); box-shadow:0 -6px 20px rgba(36,24,16,.16); }
  [data-theme="dark"] .app-sidebar { border-right:0; border-top:1px solid var(--c-rule); }
  .sidebar-brand, .sidebar-spacer, .sidebar-controls, .sidebar-card { display:none; }
  .sidebar-nav { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:2px; width:100%; }
  .sidebar-nav__btn { min-width:0; min-height:60px; padding:4px 2px; flex-direction:column; justify-content:center; gap:2px; border-radius:var(--r-sm); font-size:10px; line-height:1.1; text-align:center; }
  .sidebar-nav__btn span:not(.sidebar-nav__glyph) { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sidebar-nav__glyph { width:auto; height:22px; font-size:18px; }
  .app-main { min-width:0; padding:var(--s-lg) var(--s-md) calc(var(--s-xl) + env(safe-area-inset-bottom, 0px)); }
  .btn, .chip, .segmented__btn, .icon-btn { min-height:44px; }
  .icon-btn { min-width:44px; }
  .checkbox-row { min-height:44px; }
  .segmented { max-width:100%; }
  .chip-row { flex-wrap:nowrap; overflow-x:auto; padding-bottom:var(--s-xs); }
  .seg-tabs, .chip-row { scrollbar-width:none; -ms-overflow-style:none; }
  .seg-tabs::-webkit-scrollbar, .chip-row::-webkit-scrollbar { display:none; }
  .card__content--flush:has(> .table), .form-section:has(> .table) { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .card__content--flush > .table:has(th:nth-child(4)), .form-section > .table:has(th:nth-child(4)) { min-width:560px; }
}


/* ---- Brand logo (official HopMeds mark, from hopmeds.com) ---- */
/* The artwork is a bitmap, so it is only ever scaled DOWN from its native
   444px width — never up, or it softens. */
.brand-logo { display:block; height:auto; max-width:100%; }
/* White plate: the blue mark needs a light backing on dark surfaces. */
.brand-plate { display:block; box-sizing:content-box; background:#fff; border-radius:var(--r-lg);
  padding:var(--s-sm) var(--s-md); box-shadow:0 4px 14px rgba(0,0,0,.18); }
/* The auth card is already white in light mode; only dark mode needs the plate. */
[data-theme="dark"] .auth-logo-wrap { background:#fff; border-radius:var(--r-lg);
  padding:var(--s-sm) var(--s-md); box-shadow:0 4px 14px rgba(0,0,0,.35); align-self:center; }

/* ---- Avatar ---- */
.avatar { border-radius:var(--r-full); background:var(--c-secondary); color:#fff; display:grid; place-items:center; font-weight:700; flex-shrink:0; }

/* ---- Layout helpers ---- */
.row { display:flex; gap:var(--s-xs); }
.row--center { align-items:center; }
.row--between { justify-content:space-between; }
.col { display:flex; flex-direction:column; gap:var(--s-xs); }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:var(--s-md); }
@media (max-width:560px) { .grid-auto { grid-template-columns:1fr; } }
.divider { height:1px; background:var(--c-rule); margin:var(--s-md) 0; border:0; }
.bi { display:flex; flex-direction:column; }
.bi__primary { font-weight:600; font-size:14px; color:var(--c-text); }
.bi__secondary { font-size:12px; color:var(--c-text-tertiary); margin-top:1px; }

/* ---- Dashboard ---- */
.dash-greeting { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-md); margin-bottom:var(--s-md); flex-wrap:wrap; }
.dash-eyebrow { font-weight:600; font-size:11px; letter-spacing:.6px; color:var(--c-marigold-deep); text-transform:uppercase; margin-bottom:4px; }
.dash-hello { font-weight:800; font-size:30px; letter-spacing:-1px; color:var(--c-ink); line-height:1.13; }
.dash-date { font-size:12px; color:var(--c-text-secondary); margin-top:6px; }
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-sm); margin-bottom:var(--s-md); }
.dash-col { display:flex; flex-direction:column; gap:var(--s-sm); }
.dash-col .stat-card { flex:1; }
.dash-tile { border-radius:var(--r-xl); padding:var(--s-md); min-height:220px; display:flex; flex-direction:column; justify-content:space-between; text-align:left; cursor:pointer; transition:transform .12s, box-shadow .15s; }
.dash-tile:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); }
.dash-tile--teal { background:var(--c-teal-deep); color:#fff; }
[data-theme="dark"] .dash-tile--teal { background:linear-gradient(135deg,#14625f,#0f4d4d); }
.dash-tile__label { font-weight:600; font-size:10px; letter-spacing:.5px; text-transform:uppercase; opacity:.85; }
.dash-tile__value { font-weight:800; font-size:26px; letter-spacing:-.6px; line-height:1.05; }
.dash-tile__sub { font-size:10px; opacity:.8; margin-top:6px; }
.dash-tile--marigold { background:var(--c-marigold-soft); color:var(--c-marigold-deep); }
.dash-tile--marigold .stat-card__title, .dash-tile--marigold .stat-card__value, .dash-tile--marigold .stat-card__subtitle { color:var(--c-marigold-deep); }
.dash-tile--alert { background:var(--c-error-container); color:var(--c-on-error-container); }
.dash-tile--alert .stat-card__title, .dash-tile--alert .stat-card__value, .dash-tile--alert .stat-card__subtitle { color:var(--c-on-error-container); }
.dash-tile--ok { background:var(--c-success-container); color:var(--c-success); }
.dash-tile--ok .stat-card__title, .dash-tile--ok .stat-card__value, .dash-tile--ok .stat-card__subtitle { color:var(--c-success); }
@media (max-width:560px) { .dash-grid { grid-template-columns:1fr; } .dash-tile { min-height:120px; } }

/* ---- Patient / drug cards ---- */
.patient-card__row { display:flex; align-items:center; padding:var(--s-sm); gap:var(--s-sm); }
.patient-card__body { flex:1; min-width:0; }
.patient-card__num { font-size:11px; color:var(--c-text-tertiary); white-space:nowrap; }
.patient-card__meta { display:flex; gap:var(--s-md); font-size:12px; color:var(--c-text-secondary); flex-wrap:wrap; margin-top:2px; }
.patient-card__chev { color:var(--c-text-disabled); font-size:20px; }
.drug-card { padding:var(--s-md); margin-bottom:var(--s-xs); }
.drug-card__stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(90px,1fr)); gap:var(--s-sm); }
.stat-k { font-size:11px; color:var(--c-text-tertiary); text-transform:uppercase; letter-spacing:.4px; }
.stat-v { font-weight:500; font-size:14px; }

/* ---- Detail head ---- */
.detail-head { display:flex; align-items:center; gap:var(--s-md); margin-bottom:var(--s-md); }
.detail-head__name { font-weight:700; font-size:20px; color:var(--c-ink); letter-spacing:-.3px; }

/* ---- Invoice builder ---- */
.invoice-item-row { display:grid; grid-template-columns:1fr 80px 110px 40px; gap:var(--s-xs); align-items:center; background:var(--c-surface-variant); padding:var(--s-sm); border-radius:var(--r-sm); margin-bottom:var(--s-xs); }
.inv-input { background:var(--c-surface); border:1px solid var(--c-rule); border-radius:var(--r-sm); padding:9px 10px; outline:none; width:100%; }
.inv-input:focus { border-color:var(--c-primary); box-shadow:var(--focus-ring); }
.invoice-item-row .tf__select { padding:9px 30px 9px 10px; background-color:var(--c-surface); border:1px solid var(--c-rule); }
@media (max-width:560px) { .invoice-item-row { grid-template-columns:1fr 1fr; } .invoice-item-row .inv-drug { grid-column:1 / -1; } }

/* ---- Settings ---- */
.settings-user { display:flex; align-items:center; gap:var(--s-md); }
.branch-row { display:flex; width:100%; align-items:center; justify-content:space-between; padding:var(--s-sm) var(--s-lg); border-bottom:1px solid var(--c-rule); text-align:left; background:transparent; transition:background .12s; }
.branch-row:last-child { border-bottom:none; }
.branch-row:hover { background:var(--c-surface-variant); }
.branch-row[aria-current="true"] { background:var(--c-primary-container); }
.branch-row__name { font-weight:600; color:var(--c-text); }
.branch-row__name.is-active { color:var(--c-primary); }
.user-row { display:flex; align-items:center; justify-content:space-between; gap:var(--s-sm); padding:var(--s-xs) 0; border-bottom:1px solid var(--c-rule); }
.user-row:last-child { border-bottom:none; }

/* ---- Platform facilities ---- */
.facility-toolbar .card__content { display:grid; grid-template-columns:auto minmax(260px, 1fr); align-items:center; gap:var(--s-md); }
.facility-filters { display:flex; gap:6px; flex-wrap:wrap; }
.facility-results-summary { margin:var(--s-lg) 0 var(--s-sm); font-size:12px; font-weight:600; letter-spacing:.45px; text-transform:uppercase; }
.facility-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:var(--s-md); }
.facility-card { display:flex; flex-direction:column; margin:0; padding:var(--s-lg); min-width:0; }
.facility-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-md); }
.facility-card__identity { display:flex; align-items:center; gap:var(--s-sm); min-width:0; }
.facility-card__icon { width:42px; height:42px; border-radius:var(--r-md); display:grid; place-items:center; flex-shrink:0; background:var(--c-primary-container); font-size:20px; }
.facility-card__title-wrap { min-width:0; }
.facility-card__title { color:var(--c-ink); font-size:17px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.facility-card__id { margin-top:2px; color:var(--c-text-tertiary); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.facility-metrics { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--s-sm); margin-top:var(--s-lg); }
.facility-metrics > div { min-width:0; padding:var(--s-sm); border-radius:var(--r-sm); background:var(--c-surface-variant); }
.facility-metrics dt { color:var(--c-text-tertiary); font-size:10px; font-weight:600; letter-spacing:.45px; text-transform:uppercase; }
.facility-metrics dd { margin-top:3px; color:var(--c-text); font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.facility-metrics small { display:block; margin-top:2px; color:var(--c-text-tertiary); font-size:10px; font-weight:400; }
.facility-service-note { display:flex; flex-direction:column; gap:2px; margin-top:var(--s-md); padding:var(--s-sm) var(--s-md); border-left:4px solid var(--c-warning); border-radius:var(--r-sm); background:var(--c-warning-container); color:var(--c-text); font-size:12px; overflow-wrap:anywhere; }
.facility-service-note--archived { border-left-color:var(--c-error); background:var(--c-error-container); }
.facility-card__actions { display:flex; justify-content:flex-end; gap:var(--s-xs); flex-wrap:wrap; margin-top:auto; padding-top:var(--s-lg); }
.facility-pagination { display:flex; align-items:center; justify-content:center; gap:var(--s-sm); flex-wrap:wrap; margin-top:var(--s-lg); padding:var(--s-md); border:1px solid var(--c-rule); border-radius:var(--r-xl); background:var(--c-surface); }
.facility-action-warning { margin-bottom:var(--s-md); padding:var(--s-sm) var(--s-md); border-left:4px solid var(--c-warning); border-radius:var(--r-sm); background:var(--c-warning-container); color:var(--c-text); }
.facility-action-hint { margin:-8px 0 var(--s-md); font-size:12px; }
.facility-confirmation-name { margin:-8px 0 var(--s-md); padding:var(--s-xs) var(--s-sm); border-radius:var(--r-sm); background:var(--c-surface-variant); color:var(--c-text-secondary); font-size:12px; overflow-wrap:anywhere; user-select:all; }

/* ---- Signup review ---- */
.signup-review-toolbar .card__content { display:grid; grid-template-columns:auto minmax(240px, 1fr); align-items:center; gap:var(--s-md); }
.signup-review-filters { display:flex; gap:6px; flex-wrap:wrap; }
.signup-request-list { padding-top:var(--s-xs); padding-bottom:var(--s-xs); }
.signup-request-row { display:flex; align-items:center; justify-content:space-between; gap:var(--s-md); padding:var(--s-md) 0; border-bottom:1px solid var(--c-rule); }
.signup-request-row:last-child { border-bottom:none; }
.signup-request__main { min-width:0; flex:1; }
.signup-request__heading { display:flex; align-items:center; gap:var(--s-xs); flex-wrap:wrap; color:var(--c-ink); }
.signup-request__meta { color:var(--c-text-secondary); font-size:12px; margin-top:3px; overflow-wrap:anywhere; }
.signup-review-pagination { display:flex; align-items:center; justify-content:center; gap:var(--s-sm); flex-wrap:wrap; padding:var(--s-md); border-top:1px solid var(--c-rule); background:var(--c-surface-variant); }
.signup-review-summary { margin-bottom:var(--s-md); display:flex; gap:var(--s-xs); flex-wrap:wrap; }
.signup-review-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-xl); }
.signup-review-grid h3 { font-size:14px; color:var(--c-ink); margin-bottom:var(--s-sm); }
.detail-list { display:grid; gap:var(--s-xs); }
.detail-list > div { padding-bottom:var(--s-xs); border-bottom:1px solid var(--c-rule); }
.detail-list dt, .credential-list dt { color:var(--c-text-tertiary); font-size:11px; text-transform:uppercase; letter-spacing:.45px; }
.detail-list dd, .credential-list dd { color:var(--c-text); margin-top:2px; overflow-wrap:anywhere; }
.signup-dialog-note { margin-top:var(--s-xs); margin-bottom:var(--s-md); overflow-wrap:anywhere; }
.credential-warning { padding:var(--s-sm) var(--s-md); margin-bottom:var(--s-md); border-left:4px solid var(--c-warning); border-radius:var(--r-sm); background:var(--c-warning-container); color:var(--c-text); }
.credential-list { display:grid; gap:var(--s-md); }
.credential-list > div { padding:var(--s-md); border:1px solid var(--c-rule); border-radius:var(--r-sm); background:var(--c-surface-variant); }
.credential-list dd { font-size:15px; user-select:all; }

@media (max-width:700px) {
  #auth-screen { padding:var(--s-sm); }
  .auth-card { padding:var(--s-xl) var(--s-md); }
  .facility-toolbar .card__content, .signup-review-toolbar .card__content, .signup-review-grid { grid-template-columns:1fr; }
  .facility-grid { grid-template-columns:1fr; }
  .facility-metrics { grid-template-columns:1fr 1fr; }
  .facility-pagination .text-secondary { width:100%; order:-1; text-align:center; }
  .facility-pagination .btn { flex:1; }
  .signup-request-row { align-items:flex-start; flex-direction:column; }
  .signup-request-row > .btn { width:100%; }
  .signup-review-pagination .text-secondary { width:100%; order:-1; text-align:center; }
  .signup-review-pagination .btn { flex:1; }
}

@media (max-width:440px) {
  .auth-shell { padding:var(--s-sm) 0; align-items:flex-start; }
  .auth-card { border-radius:var(--r-lg); }
  .auth-success .btn { min-height:44px; white-space:normal; }
  .page-head { margin-bottom:var(--s-md); }
  .page-head__title { font-size:24px; }
  .page-head__actions { width:100%; }
  .page-head__actions .btn { flex:1 1 auto; }
  .def-grid { grid-template-columns:1fr; }
  .card__content, .modal__content { padding:var(--s-md); }
  .empty { min-height:220px; padding:var(--s-xl) var(--s-md); }
}

@media (max-width:560px) {
  .modal-scrim { place-items:end center; padding:0; }
  .modal { max-height:100dvh; border-radius:var(--r-lg) var(--r-lg) 0 0; }
  .modal__header { padding:var(--s-xs) var(--s-xs) var(--s-xs) var(--s-md); }
  .modal__footer { padding:var(--s-sm) var(--s-md) calc(var(--s-sm) + env(safe-area-inset-bottom, 0px)); }
  .modal__footer .btn { flex:1 1 auto; min-height:44px; }
  .settings-user { align-items:flex-start; flex-wrap:wrap; }
  .settings-user > div:last-child { flex:1 0 100%; }
  .settings-user > div:last-child .btn { flex:1 1 140px; }
  .toasts { top:var(--s-xs); right:var(--s-xs); left:var(--s-xs); max-width:none; }
}

@media (max-width:440px) {
  .facility-card { padding:var(--s-md); }
  .facility-card__head { align-items:flex-start; }
  .facility-card__icon { display:none; }
  .facility-card__actions { flex-direction:column; }
  .facility-card__actions .btn { width:100%; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .skel { background:var(--c-surface-variant); }
}

/* ---- Print: only the modal (receipt/invoice) on white ---- */
@media print {
  body { background:#fff; }
  .app-sidebar, .toasts, .page-head__actions, .modal__header .icon-btn, .modal__footer { display:none !important; }
  #app-shell { display:block; }
  .app-main { padding:0; }
  .modal-scrim { position:static; background:#fff; padding:0; display:block; }
  .modal { box-shadow:none; max-height:none; max-width:100%; }
  .modal__content { overflow:visible; color:#000; }
  @page { margin:12mm; }
}