/* PharmaOS Control — the operator console.
 *
 * ⚠️ THE DESIGN SYSTEM IS NOT THIS FILE'S TO INVENT. Every token below is copied from the
 * product's `src/styles.css` (Tailwind v4 + shadcn, oklch throughout), because an operator
 * moves between the two applications all day and two palettes read as two products. When the
 * product's tokens change, these change with them — that is the whole contract.
 *
 * LIGHT ONLY, deliberately. There is no `prefers-color-scheme` block here: this console gets
 * screenshotted into client decks and read next to the product, and the product ships a light
 * UI. A dark console beside a light shop is not a theme, it is a mismatch. `color-scheme`
 * below also stops the browser darkening form controls on a dark-mode machine.
 *
 * Geometry follows shadcn's component specs — h-9 controls, radius from --radius, 1px borders,
 * shadow-sm on raised surfaces — so a card here and a card there are the same object.
 */

:root {
  color-scheme: light;

  /* ── Product tokens (src/styles.css :root) ────────────────────────────────── */
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.18 0.03 200);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.03 200);
  --primary: oklch(0.58 0.12 180);
  --primary-foreground: oklch(0.99 0.01 180);
  --secondary: oklch(0.96 0.02 180);
  --secondary-foreground: oklch(0.3 0.05 200);
  --muted: oklch(0.97 0.01 200);
  --muted-foreground: oklch(0.5 0.03 220);
  --accent: oklch(0.93 0.05 175);
  --accent-foreground: oklch(0.28 0.06 195);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(0.92 0.015 200);
  --input: oklch(0.92 0.015 200);
  --ring: oklch(0.58 0.12 180);
  --sidebar: oklch(0.985 0.005 180);
  --sidebar-foreground: oklch(0.25 0.04 200);
  --sidebar-accent: oklch(0.94 0.04 175);
  --sidebar-accent-foreground: oklch(0.3 0.06 195);
  --sidebar-border: oklch(0.91 0.02 195);

  /* ── Semantic status, in the product's hue family ─────────────────────────── */
  --ok: oklch(0.52 0.13 155);
  --ok-wash: oklch(0.96 0.03 155);
  --warn: oklch(0.55 0.12 75);
  --warn-wash: oklch(0.96 0.04 85);
  --bad: oklch(0.55 0.2 27);
  --bad-wash: oklch(0.96 0.03 27);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* shadcn shadow-sm / shadow, at the product's weight. */
  --shadow-sm: 0 1px 2px 0 oklch(0.18 0.03 200 / 0.05);
  --shadow: 0 1px 3px 0 oklch(0.18 0.03 200 / 0.07), 0 1px 2px -1px oklch(0.18 0.03 200 / 0.06);

  /*
   * The product's --font-sans, minus the Bengali splice: the console is English-only by
   * design (an operator console is not a customer surface), and importing a Bengali subset
   * for text that never renders is 188KB of nothing.
   */
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --rail-width: 15.5rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Signed out there is no rail, so the page centres on itself instead. */
body:has(main.bare) {
  display: block;
  background: var(--sidebar);
}

/* ══ The rail ═══════════════════════════════════════════════════════════════════
 *
 * Fixed and full-height. It was `position: static` before, which meant a short page left the
 * rail floating in the middle of the viewport with the background showing under it — the
 * first thing anybody noticed about this console, and rightly.
 */

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-width);
  display: flex;
  flex-direction: column;
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  color: var(--sidebar-foreground);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rail-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 0.875rem;
  text-decoration: none;
  color: inherit;
}

.rail-brand strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.rail-brand em {
  display: block;
  font-style: normal;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  line-height: 1.4;
}

.mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--radius-lg);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

.rail ul {
  list-style: none;
  margin: 0;
  padding: 0 0.625rem;
}

/* A nav group label — "Fleet", "Billing", "Operations". The product groups its rail the same
 * way, and eleven flat links was a list to read rather than a menu to scan. */
.rail .group {
  padding: 1rem 0.625rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* `:not(.who)` is load-bearing. This rule lays out a NAV link — icon beside label, in a row.
   The footer's identity link is also an `.rail a`, and when it matched this rule its name and
   email became flex items and sat side by side, each ellipsised to about eight characters.
   Every prose assertion in the browser gate still passed. */
.rail a:not(.rail-brand):not(.who) {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-lg);
  color: var(--sidebar-foreground);
  text-decoration: none;
  font-weight: 500;
}

.rail a:not(.rail-brand):not(.who):hover {
  background: color-mix(in oklch, var(--sidebar-accent) 55%, transparent);
}

.rail a.on:not(.who) {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
  font-weight: 600;
}

.rail svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.rail-foot {
  margin-top: auto;
  padding: 0.75rem 0.875rem 1rem;
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.who {
  display: block;
  min-width: 0;
  flex: 1;
  /* It is an anchor so the operator can reach their own account, but it sits in the rail's
     footer beside a button and must read as identity, not as navigation. */
  color: inherit;
  border-radius: calc(var(--radius) - 2px);
  padding: 0.25rem 0.375rem;
  margin: -0.25rem -0.375rem;
}

a.who:hover,
a.who.on {
  background: var(--sidebar-accent);
  text-decoration: none;
}

a.who:hover strong {
  text-decoration: underline;
}

.who strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.who span {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linky {
  border: 0;
  background: none;
  padding: 0.25rem;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.linky:hover {
  color: var(--foreground);
  background: var(--muted);
}

/* ══ The page ═══════════════════════════════════════════════════════════════════ */

main {
  flex: 1;
  min-width: 0;
  margin-left: var(--rail-width);
  padding: 0 2rem 4rem;
}

main.bare {
  margin: 0;
  padding: 3rem 1.25rem;
}

.bare-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
  font-size: 1rem;
}

.bare-brand em {
  font-style: normal;
  color: var(--muted-foreground);
}

/*
 * Sticky, so the page title and its actions stay put down a twenty-row table. `backdrop-filter`
 * rather than a solid fill: a table scrolling under a sticky bar with no separation reads as a
 * rendering fault.
 */
header.page {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  margin: 0 -2rem 1.5rem;
  padding: 0.75rem 2rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--background) 88%, transparent);
  backdrop-filter: blur(8px);
}

header.page h1 {
  flex: 1;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

header.page .when {
  white-space: nowrap;
}

header.page .actions {
  margin: 0;
}

h1,
h2,
h3 {
  letter-spacing: -0.01em;
}

h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
}

h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
}

p {
  margin: 0 0 0.75rem;
}

a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

/* Hover-only underline. Every pharmacy name in a twenty-row table underlined at rest turned
 * the fleet list into a page of hyperlinks with a table behind it. */
a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══ Surfaces ═══════════════════════════════════════════════════════════════════ */

.card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

/* A card whose only child is a table: the table draws its own edges, and the card is the thing
 * that scrolls it sideways. A console that scrolls the whole PAGE because one column is wide is
 * a console you cannot use on a laptop. */
.card.flush {
  padding: 0;
  overflow-x: auto;
}

.card > h2:first-child {
  margin-bottom: 1rem;
}

.card .lede {
  margin: -0.125rem 0 1rem;
  color: var(--muted-foreground);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

/* A KPI tile. Same object as the product's dashboard tiles: quiet label, loud number. */
.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 1.125rem 1.25rem;
}

.stat b {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.stat span {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.stat small {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.cols {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

.cols > * {
  min-width: 0;
}

/* ══ Tables ═════════════════════════════════════════════════════════════════════ */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

/*
 * ⚠️ NOT STICKY, and it cannot be. `.card.flush` is a horizontal scroll container, which makes
 * it the containing block for a sticky child — so `top: 3.5rem` did not pin the header under
 * the page bar, it pushed the header 56px DOWN INSIDE THE CARD, where it painted over the first
 * row and left a blank strip above itself. On a one-row table that reads as "the fleet is
 * empty", which is the worst possible thing for this particular table to say. The page header
 * is sticky; a table header does not also need to be.
 */
thead th {
  padding: 0.625rem 1rem;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
  white-space: nowrap;
}

tbody td {
  padding: 0.6875rem 1rem;
  border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover {
  background: color-mix(in oklch, var(--muted) 60%, transparent);
}

/* The first column is the row's name — it should read as the row's name. */
tbody td:first-child {
  font-weight: 500;
}

th.num,
td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ══ Text ═══════════════════════════════════════════════════════════════════════ */

.muted {
  color: var(--muted-foreground);
}

.small {
  font-size: 0.8125rem;
}

.mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.lede {
  color: var(--muted-foreground);
}

.empty {
  padding: 2.5rem 1.25rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--muted-foreground);
}

.card.flush .empty {
  border: 0;
}

/* ══ Badges ═════════════════════════════════════════════════════════════════════ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.tag.accent {
  background: var(--accent);
  color: var(--accent-foreground);
}

.tag.ok {
  background: var(--ok-wash);
  color: var(--ok);
}

.tag.warn {
  background: var(--warn-wash);
  color: var(--warn);
}

.tag.bad {
  background: var(--bad-wash);
  color: var(--bad);
}

/* ══ Flashes and notes ══════════════════════════════════════════════════════════ */

.flash {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted-foreground);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.flash.ok {
  border-left-color: var(--ok);
  background: var(--ok-wash);
  color: var(--ok);
}

.flash.warn {
  border-left-color: var(--warn);
  background: var(--warn-wash);
  color: var(--warn);
}

.flash.bad {
  border-left-color: var(--bad);
  background: var(--bad-wash);
  color: var(--bad);
}

.note {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.8125rem;
}

.note p:last-child {
  margin-bottom: 0;
}

.note.warn {
  border-color: color-mix(in oklch, var(--warn) 35%, var(--border));
  background: var(--warn-wash);
  color: var(--warn);
}

.note.bad {
  border-color: color-mix(in oklch, var(--bad) 35%, var(--border));
  background: var(--bad-wash);
  color: var(--bad);
}

.note.ok {
  border-color: color-mix(in oklch, var(--ok) 35%, var(--border));
  background: var(--ok-wash);
  color: var(--ok);
}

/* ══ Forms ══════════════════════════════════════════════════════════════════════ */

form.stack {
  display: grid;
  gap: 1rem;
}

.field {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.field label {
  font-size: 0.8125rem;
  font-weight: 500;
}

.field small {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  width: 100%;
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-foreground);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent);
}

textarea {
  min-height: 9rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  resize: vertical;
}

select {
  appearance: none;
  padding-right: 2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1rem) 55%,
    calc(100% - 0.7rem) 55%;
  background-size:
    0.3rem 0.3rem,
    0.3rem 0.3rem;
  background-repeat: no-repeat;
}

input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  align-items: start;
}

/* ══ Buttons ════════════════════════════════════════════════════════════════════ */

.btn,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.btn:hover,
button:hover {
  background: var(--muted);
}

.btn.primary,
button.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.btn.primary:hover,
button.primary:hover {
  background: color-mix(in oklch, var(--primary) 88%, black);
}

.btn.danger,
button.danger {
  background: var(--background);
  border-color: color-mix(in oklch, var(--bad) 40%, var(--border));
  color: var(--bad);
}

.btn.danger:hover,
button.danger:hover {
  background: var(--bad-wash);
}

.btn.small,
button.small {
  height: 1.875rem;
  padding: 0 0.625rem;
  font-size: 0.75rem;
}

button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

button[disabled]:hover {
  background: var(--background);
}

/* The rail's sign-out sits inside a form and must not become a button. */
.rail-foot button.linky,
button.linky {
  height: auto;
  border: 0;
  box-shadow: none;
  background: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* ══ Sign-in ════════════════════════════════════════════════════════════════════ */

.login {
  max-width: 24rem;
  margin: 0 auto;
}

.login .card {
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.login .lede {
  margin-bottom: 1.25rem;
}

/* ══ Key/value lists ════════════════════════════════════════════════════════════ */

.kv {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.5rem 1.25rem;
  margin: 0;
}

.kv + p,
.kv + .muted {
  margin-top: 1rem;
}

.kv dt {
  color: var(--muted-foreground);
}

.kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

pre.key,
pre.sql,
pre.letter {
  margin: 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--muted);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

pre.sql {
  max-height: 22rem;
  overflow: auto;
}

/* ══ Tabs ═══════════════════════════════════════════════════════════════════════
 *
 * The product's segmented control: a muted trough, and the active tab is a raised white chip.
 */

.tabs {
  display: inline-flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  padding: 0.25rem;
  border-radius: var(--radius-lg);
  background: var(--muted);
}

.tabs a {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  font-weight: 500;
}

.tabs a:hover {
  color: var(--foreground);
  text-decoration: none;
}

.tabs a.on {
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}

/* ══ Feeds ══════════════════════════════════════════════════════════════════════ */

.feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.feed li {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}

.feed li > a {
  min-width: 0;
  overflow-wrap: anywhere;
}

details.fold {
  margin-top: 0.75rem;
}

details.fold > summary {
  cursor: pointer;
  padding: 0.375rem 0;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  list-style-position: inside;
}

details.fold > summary:hover {
  color: var(--foreground);
}

/* A ring badge — canary, and anything else that names a position in a queue. */
.ring {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--primary) 30%, var(--border));
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* ══ Payment pages ══════════════════════════════════════════════════════════════
 *
 * A pharmacy's owner opens these from a link in an email, on a phone, signed into nothing.
 * They are the only screens in this application that are not an operator console.
 */

.pay {
  max-width: 30rem;
  margin: 0 auto;
}

.pay.gateway {
  max-width: 26rem;
}

.pay-head {
  text-align: center;
  margin-bottom: 1.25rem;
}

.pay-head h2 {
  font-size: 1.125rem;
}

.pay-head p {
  color: var(--muted-foreground);
  margin: 0;
}

.pay-amount {
  text-align: center;
  padding: 1.25rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--muted);
  margin-bottom: 1.25rem;
}

.pay-amount b {
  display: block;
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pay-amount span {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
}

.pay table {
  margin-bottom: 1.25rem;
}

.pay-buttons {
  display: grid;
  gap: 0.5rem;
}

.pay-buttons button,
.pay-buttons .btn {
  width: 100%;
  height: 2.75rem;
}

.pay-foot {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

button.wallet {
  justify-content: flex-start;
  gap: 0.625rem;
  height: 2.75rem;
}

button.wallet:hover {
  border-color: var(--ring);
}

input[data-copy] {
  font-family: var(--mono);
}

/* ══ Documents — invoice and Mushak 6.3 ═════════════════════════════════════════
 *
 * These print. Everything here is sized in absolute units and survives a black-and-white
 * printer, because a VAT challan is a legal document before it is a screen.
 */

.letter,
.parties,
.words,
.meta,
.notes,
.sign,
.rule,
.line,
.form-id,
.paid-stamp,
.not-a-challan {
  font-size: 0.8125rem;
}

.parties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  color: var(--muted-foreground);
}

.words {
  padding: 0.5rem 0;
  font-style: italic;
}

.rule {
  height: 1px;
  background: var(--border);
  margin: 1rem 0;
}

.sign {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}

.line {
  border-top: 1px solid var(--foreground);
  padding-top: 0.375rem;
  text-align: center;
}

.form-id {
  float: right;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--foreground);
  font-weight: 600;
}

.paid-stamp {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border: 2px solid var(--ok);
  border-radius: var(--radius-md);
  color: var(--ok);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

.not-a-challan {
  color: var(--muted-foreground);
}

@media print {
  .rail,
  header.page,
  .actions,
  .toolbar {
    display: none !important;
  }

  body {
    display: block;
    background: #fff;
  }

  main {
    margin: 0;
    padding: 0;
  }

  .card {
    border: 0;
    box-shadow: none;
    padding: 0;
  }
}

/* ══ Narrow screens ═════════════════════════════════════════════════════════════ */

@media (max-width: 60rem) {
  .cols {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  body {
    display: block;
  }

  .rail {
    position: static;
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    border-right: 0;
    border-bottom: 1px solid var(--sidebar-border);
    padding-bottom: 0.5rem;
  }

  .rail ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0 0.75rem;
  }

  .rail .group,
  .rail-foot,
  header.page .when {
    display: none;
  }

  main {
    margin-left: 0;
    padding: 0 1rem 3rem;
  }

  header.page {
    margin: 0 -1rem 1.25rem;
    padding: 0.75rem 1rem;
  }
}