/* Hallmark · shape: Split Stage · genre: modern-minimal · theme: brand (GOFLEX) · redesign: full
 * paper: oklch(96.1% 0.006 175) · accent: oklch(52.7% 0.26 268) · display: Loos Wide Bold · body: Manrope · hero: Stage, ink band · nav: edge-aligned wordmark and two actions · footer: ink mast, the light wordmark over the links · signature: a WhatsApp message turning into a reported ZATCA invoice, set as the hero's right column
 * axes: light/display-heavy/chromatic-blue · posture: Stage · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, a split hero is the common move; the right side is the product's own exchange (the real 50.00 SAR test invoice), not a mockup */
/* Hallmark · waive 85 · the site has three pieces of content (the deadline, the fine, the packages) · fast mode redesign: nothing invented to pad it */
/* Hallmark · answered F6 · .deadline-band .figure · a single figure, nothing to align; tabular spacing opened a gap at the comma in Loos */
/* Hallmark · waive 44c · Arabic hero (?lang=ar) text ends short of its visual · the Arabic headline is naturally shorter; the column keeps one width in both languages */
/* Hallmark · waive 77 · four content sections plus hero and footer · the site states only the deadline, the accounting it includes, the fine and the packages; padding it would mean inventing content */
/* Hallmark · reworded "We connect you to ZATCA's Fatoora platform and handle your invoices every month — you just send your sales on WhatsApp." to "Your accounting and ZATCA invoicing, done through WhatsApp." (owner asked to lead with the accounting) · 13 caps the hero sentence */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Loos Wide"; src: url("./fonts/loos-wide-bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("./fonts/manrope.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }

:root {
  --color-lime: #bbfb4c; --color-peri: #8f8fff; --color-cyan: #45fff1;
  --color-on-ink: #f0f4f3; --color-on-ink-muted: #a9adb1;
  --color-warn-bg: #fff4d6; --color-warn: #8a5a00; --color-bad-bg: #fde7e5; --color-bad: #b42318; --color-ok-bg: #e6f9cf; --color-ok: #2f6b00;
  --display-weight: 700; --tracking-display: -0.01em;
  --radius-card: 16px; --radius-control: 10px; --radius-bubble: 18px;
  --container: 1200px; --gutter: 48px;
}

/* Arabic: the brand faces have no Arabic glyphs; IBM Plex Sans Arabic carries both roles */
:root:lang(ar) { --font-display: "IBM Plex Sans Arabic", "Manrope", ui-sans-serif, system-ui, sans-serif; --font-body: "IBM Plex Sans Arabic", "Manrope", ui-sans-serif, system-ui, sans-serif; --tracking-display: 0; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { line-height: 1.25; }
.switch { display: flex; gap: var(--space-xs); font-size: var(--text-sm); }
.switch a { text-decoration: none; padding: var(--space-2xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); }
.switch a[aria-current="true"] { background: var(--color-ink); color: var(--color-on-ink); border-color: var(--color-ink); }
.switch a:hover { border-color: var(--color-ink); }
.hero .switch { margin-bottom: var(--space-xl); }
.admin-bar { padding-block: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-rule); overflow-x: auto; }
.admin-bar a { white-space: nowrap; }
.on-ink .switch a { border-color: var(--color-on-ink-muted); color: var(--color-on-ink); }
.on-ink .switch a[aria-current="true"] { background: var(--color-lime); border-color: var(--color-lime); color: var(--color-ink); }
.on-ink .switch a:hover { border-color: var(--color-on-ink); }
main.page .switch { margin-bottom: var(--space-md); }

/* chrome */
.site-nav { display: flex; align-items: center; gap: var(--space-lg); padding-block: var(--space-md); }
.site-nav .logo { margin-inline-end: auto; display: block; }
.site-nav .logo img { height: 34px; width: auto; }
.site-nav a { white-space: nowrap; }
.site-nav a:not(.logo):not(.btn) { text-decoration: none; font-size: var(--text-sm); font-weight: 600; }
.site-nav a:not(.logo):not(.btn):hover { color: var(--color-accent); }
.site-footer { background: var(--color-ink); color: var(--color-on-ink); margin-top: var(--section-gap-s); }
.site-footer .container { display: grid; gap: var(--space-lg); padding-block: var(--space-2xl); }
.site-footer img { height: 40px; width: auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); font-size: var(--text-sm); color: var(--color-on-ink-muted); }
.site-footer a { color: var(--color-on-ink); }

/* controls: one primary style, eight states */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 44px; padding: var(--space-sm) var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-control);
  background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; font-size: var(--text-sm);
  text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
button:hover, .btn:hover { background: var(--color-ink); border-color: var(--color-ink); }
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.secondary, .btn.secondary { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
button.secondary:hover, .btn.secondary:hover { border-color: var(--color-ink); background: var(--color-paper-2); }
button.danger { background: var(--color-bad); border-color: var(--color-bad); }
.on-ink .btn { background: var(--color-lime); border-color: var(--color-lime); color: var(--color-ink); }
.on-ink .btn:hover { background: var(--color-on-ink); border-color: var(--color-on-ink); }
.on-ink .btn.secondary { background: transparent; color: var(--color-on-ink); border-color: var(--color-on-ink-muted); }
.on-ink .btn.secondary:hover { border-color: var(--color-on-ink); }
.on-ink :focus-visible { outline-color: var(--color-lime); }

label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); margin: var(--space-sm) 0 var(--space-2xs); }
input, select, textarea { width: 100%; min-height: 44px; padding: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper-2); color: var(--color-ink); }
input:hover, select:hover, textarea:hover { border-color: var(--color-muted); }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--color-accent); }
input[type=file] { padding: var(--space-xs); }

/* app screens (dashboard, admin, forms) */
main.page { max-width: var(--container); margin-inline: auto; padding: var(--space-xl) var(--gutter) 0; }
main.page h1 { font-size: var(--text-2xl); max-width: none; margin-bottom: var(--space-md); }
main.page h2 { font-size: var(--text-xl); max-width: none; margin-bottom: var(--space-sm); }
main.page h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
main.page p { margin-block: var(--space-xs); }
.card { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); margin-bottom: var(--space-md); }
.grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.row { display: flex; gap: var(--space-xs); flex-wrap: wrap; align-items: center; }
.roles label { display: inline-flex; align-items: center; gap: var(--space-2xs); margin: 0; margin-inline-end: var(--space-sm); font-weight: 500; }
.muted { color: var(--color-muted); }
.err { background: var(--color-bad-bg); color: var(--color-bad); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-control); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: start; padding: var(--space-xs) var(--space-xs); border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); vertical-align: top; }
th { font-weight: 700; color: var(--color-ink-2); }
.badge { display: inline-block; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; background: var(--color-ok-bg); color: var(--color-ok); }
.badge.draft, .badge.pending_review, .badge.provisioning, .badge.waiting_otp { background: var(--color-warn-bg); color: var(--color-warn); }
.badge.paused, .badge.stopped, .badge.provision_failed, .badge.failed, .badge.expired { background: var(--color-bad-bg); color: var(--color-bad); }
.bar { height: 10px; background: var(--color-paper-3); border-radius: var(--radius-pill); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--color-accent); }
.price { font-family: var(--font-display); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
main.page ul { padding-inline-start: 1.2em; }

/* home: hero on an ink band */
.hero { background: var(--color-ink); color: var(--color-on-ink); }
.hero .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-3xl); min-height: calc(100svh - 84px); }
.hero h1 { font-size: clamp(2.5rem, 4.4vw + 0.5rem, 4.5rem); max-width: 14ch; }
.hero h1 span.deadline { color: var(--color-lime); display: block; }
.hero .lead { margin-top: var(--space-lg); color: var(--color-on-ink-muted); }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

.thread { display: grid; gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-ink-2); }
.thread .who { font-size: var(--text-xs); color: var(--color-on-ink-muted); }
.bubble { max-width: 88%; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-bubble); font-size: var(--text-sm); line-height: 1.45; }
.bubble.in { justify-self: end; background: var(--color-peri); color: var(--color-ink); border-end-end-radius: 4px; }
.bubble.out { min-width: min(100%, 17rem); justify-self: start; background: var(--color-on-ink); color: var(--color-ink); border-end-start-radius: 4px; }
.bubble dl { display: grid; grid-template-columns: auto auto; gap: var(--space-3xs) var(--space-md); margin: var(--space-xs) 0 0; }
.bubble dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; font-weight: 700; }
.bubble .choices { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); }
.bubble .choice { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); border: 1px solid var(--color-rule); font-weight: 600; font-size: var(--text-xs); }
.bubble .choice.picked { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.bubble.done { background: var(--color-lime); }
.thread figcaption { font-size: var(--text-xs); color: var(--color-on-ink-muted); }

.included .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); padding-block: var(--section-gap-s); border-bottom: 1px solid var(--color-rule); }
.included h2 { margin-bottom: var(--space-md); }
.included p { font-size: var(--text-lead); max-width: 45ch; color: var(--color-ink-2); }
.ledger { margin: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); border-top: 2px solid var(--color-ink); }
.ledger dt, .ledger dd { margin: 0; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); }
.ledger dt { font-weight: 700; padding-inline-end: var(--space-md); }
.ledger dd { color: var(--color-ink-2); }
.deadline-band .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: end; padding-block: var(--section-gap-s); }
.deadline-band .figure { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 6.5rem); line-height: 0.95; color: var(--color-ink); max-width: none; overflow-wrap: break-word; min-width: 0; }
.deadline-band .figure small { display: block; font-family: var(--font-body); font-size: var(--text-lg); font-weight: 600; color: var(--color-ink); margin-top: var(--space-xs); }
.deadline-band .comma { margin-inline: -0.12em; }
.deadline-band p { font-size: var(--text-lead); max-width: 45ch; }

.pricing .container { padding-bottom: var(--space-2xl); }
.pricing h2 { margin-bottom: var(--space-sm); }
.pricing .note { color: var(--color-muted); max-width: 60ch; margin-bottom: var(--space-xl); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.plan { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.plan.featured { border: 2px solid var(--color-accent); }
.plan h3 { font-size: var(--text-xl); }
.plan .amount { font-variant-numeric: tabular-nums; font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; }
.plan .amount.on-request { font-size: var(--text-xl); }
.plan .amount span { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.plan dl { display: grid; gap: var(--space-2xs); margin: 0; font-size: var(--text-sm); }
.plan dt { color: var(--color-muted); }
.plan dd { margin: 0 0 var(--space-xs); font-weight: 600; }
.plan ul { margin: 0; padding-inline-start: 1.1em; display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.plan .btn { margin-top: auto; }

@media (max-width: 60rem) {
  .hero .container, .deadline-band .container, .included .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero .container { min-height: 0; padding-block: var(--space-2xl); }
  .plans { grid-template-columns: minmax(0, 1fr); }
}
/* client page (admin) */
.sub-head { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.sub-head .sub-title { flex: 1 1 14rem; min-width: 0; }
.sub-head h1 { margin: 0; font-size: var(--text-2xl); overflow-wrap: anywhere; }
.sub-head .sub-ar { font-size: var(--text-lg); margin: var(--space-3xs) 0; }
.sub-head p { margin: 0; }
.logo-thumb { width: 64px; height: 64px; object-fit: contain; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-control); padding: var(--space-2xs); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-md); margin-bottom: var(--space-md); }
.stat { display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-md); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); min-width: 0; }
.stat span { font-size: var(--text-sm); }
.stat b { font-size: var(--text-xl); font-family: var(--font-display); overflow-wrap: anywhere; }
.stat small { color: var(--color-muted); font-size: var(--text-sm); }
.actions-bar { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; justify-content: space-between; }
.actions-bar input { flex: 1 1 16rem; max-width: 26rem; }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-lg); margin: 0; }
.kv.one { grid-template-columns: minmax(0, 1fr); }
.kv dt { color: var(--color-muted); font-size: var(--text-sm); }
.kv dd { margin: 0 0 var(--space-xs); font-weight: 600; overflow-wrap: anywhere; }
.kv .wide { grid-column: 1 / -1; }
.info { width: 100%; border-collapse: collapse; }
.info th, .info td { padding: var(--space-sm) var(--space-xs); border-bottom: 1px solid var(--color-rule); text-align: start; vertical-align: top; font-size: var(--text-md); }
.info tr:last-child th, .info tr:last-child td { border-bottom: 0; }
.info th { width: 36%; color: var(--color-muted); font-weight: 500; }
.info td { font-weight: 600; overflow-wrap: break-word; }
.split-side .info th, .split-side .info td { font-size: var(--text-sm); }
.rowlist { list-style: none; margin: 0; padding: 0; }
.rowlist li { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); justify-content: space-between; align-items: center; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.rowlist li:last-child { border-bottom: 0; }
.rowlist a { overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip { padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-3); font-size: var(--text-xs); font-weight: 600; }
.pay-amount { text-align: end; }
.log li { display: grid; grid-template-columns: 9.5rem 11rem minmax(0, 1fr); align-items: start; }
.log .what { white-space: pre-wrap; overflow-wrap: anywhere; }
.log .who { overflow-wrap: anywhere; }
/* "Open Odoo" sits on the physical left of its card, in English and Arabic */
.open-odoo-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.open-odoo-row p { margin: 0; }
html[dir="ltr"] .open-odoo-row { flex-direction: row-reverse; }
.btn.danger { background: var(--color-bad); border-color: var(--color-bad); color: #fff; }
.btn.danger:hover { background: var(--color-ink); border-color: var(--color-ink); }
.numbers td.roles { display: table-cell; }
.numbers td.roles label { display: inline-flex; margin-inline-end: var(--space-sm); }
.row-actions { width: 1%; white-space: nowrap; }
.icon-btn { min-height: 0; width: 34px; height: 34px; padding: 0; background: transparent; color: var(--color-bad); border: 1px solid transparent; border-radius: var(--radius-control); }
.icon-btn:hover { background: var(--color-bad-bg); border-color: var(--color-bad); }
.add-number summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill); border: 1px solid var(--color-accent); color: var(--color-accent); }
.add-number summary::-webkit-details-marker { display: none; }
.add-number summary:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.add-number summary svg { transition: transform var(--dur-short) var(--ease-out); }
.add-number[open] summary svg { transform: rotate(45deg); }
.add-number .add-fields { margin-top: var(--space-sm); }
.numbers-foot { display: flex; justify-content: flex-end; margin-top: var(--space-md); }
.access-form { margin-top: var(--space-md); }
.access-form p { margin: var(--space-xs) 0 0; font-size: var(--text-sm); }
.danger-zone { border-color: var(--color-bad); }
.danger-zone h2 { color: var(--color-bad); }
@media (max-width: 60rem) { .split { grid-template-columns: minmax(0, 1fr); } .log li { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); } }
@media (max-width: 40rem) { .kv { grid-template-columns: minmax(0, 1fr); } .actions-bar input { max-width: none; } }

@media (max-width: 40rem) {
  main.page .card table.info { display: table; overflow: visible; }
  .site-nav { gap: var(--space-sm); } .site-nav .logo img { height: 26px; } main.page { padding-top: var(--space-lg); }
  /* app screens on a phone: smaller heads, tighter cards, wide tables scroll inside their card */
  main.page h1 { font-size: var(--text-xl); overflow-wrap: normal; }
  main.page h2 { font-size: var(--text-lg); }
  .card { padding: var(--space-md); border-radius: var(--radius-control); }
  main.page .card table { display: block; overflow-x: auto; overscroll-behavior-x: contain; }
  main.page .card table td, main.page .card table th { min-width: 6.5rem; }
  main.page .card table td:first-child, main.page .card table th:first-child { min-width: 0; }
  main.page .card input[style*="max-width"] { max-width: none !important; }
  main.page .card .row > form { flex: 1 1 100%; }
  main.page .card .row > form .row { flex-wrap: wrap; }
  /* admin tables: one block per row on a phone */
  main.page .card table.stack { display: table; overflow: visible; }
  table.stack tr:has(> th) { display: none; }
  table.stack tr { display: block; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
  table.stack td { display: block; border: 0; padding: var(--space-3xs) 0; min-width: 0 !important; overflow-wrap: anywhere; }
  table.stack td:first-child { font-weight: 700; }
  table.stack td.muted:first-child { font-weight: 400; }
}

.build-log { max-height: 20rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--color-paper-3); padding: var(--space-md); border-radius: var(--radius-control); font-size: var(--text-sm); margin: var(--space-sm) 0; }

.logo-label { color: var(--color-accent); font-weight: 800; font-size: var(--text-md); }

/* mobile pass: readable text, 44px targets, one column, stacked tables */
.site-nav a:not(.logo):not(.btn), .switch a, .site-footer nav a, .admin-bar a { display: inline-flex; align-items: center; min-height: 44px; }
.add-number summary, .icon-btn { width: 44px; height: 44px; }
.numbers td.roles label { min-height: 44px; align-items: center; gap: var(--space-xs); }
input[type=checkbox], input[type=radio] { width: 24px; height: 24px; }
.row { flex-wrap: wrap; }
.row > input[type=file] { flex: 1 1 12rem; min-width: 0; }
summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
@media (max-width: 40rem) {
  body { font-size: 1.0625rem; line-height: 1.6; }
  .site-nav { flex-wrap: wrap; row-gap: 0; }
  .site-nav .btn { min-height: 44px; padding-inline: var(--space-md); }
  .btn, button { width: auto; }
  .hero .btn, .plan .btn, form > button:not(.secondary):last-child { width: 100%; }
  input, select, textarea { font-size: 1rem; min-height: 48px; }
  .card, main.page .card { overflow-wrap: anywhere; }
  .bubble, .plan dl, .plan ul, td, th, label { font-size: var(--text-sm); }
  .site-footer nav { gap: var(--space-xs) var(--space-lg); }
  table.stack td[data-label]::before { content: attr(data-label) ": "; color: var(--color-muted); font-weight: 600; }
  table.stack td.roles { padding-top: var(--space-xs); }
  table.stack td.roles label { display: flex; margin: 0; }
  table.stack td.row-actions { padding-top: var(--space-xs); }
  table.stack td colgroup, table.stack td > details { width: 100%; }
  table.stack td[colspan] { font-weight: 400; }
  .numbers-foot button { width: 100%; }
  .row > input[type=file] { flex-basis: 100%; }
  .row > button { flex: 1 1 100%; }
}
.icon-btn { min-width: 44px; flex: none; }
.site-nav .logo { min-height: 44px; display: inline-flex; align-items: center; }

/* admin list: filter chips, search, phone list */
.filters { display: flex; gap: var(--space-xs); overflow-x: auto; margin: var(--space-md) 0 var(--space-sm); padding-bottom: var(--space-2xs); scrollbar-width: none; }
.filters a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); text-decoration: none; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.filters a[aria-current="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper-2); }
.search-row { display: flex; gap: var(--space-xs); margin: 0 0 var(--space-md); }
.search-row input { flex: 1; min-width: 0; }
.search-row button, .search-row .btn { flex: none; }
.client-list { display: none; list-style: none; margin: 0; padding: 0; }
.client-list li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3xs) var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); text-decoration: none; }
.client-list b { grid-column: 1 / -1; overflow-wrap: anywhere; }
.client-list span { color: var(--color-muted); font-size: var(--text-sm); }
.client-list .pkg { text-transform: capitalize; font-weight: 600; color: var(--color-accent); }
@media (max-width: 40rem) {
  .client-list { display: block; }
  .client-table { display: none !important; }
  .search-row button { width: auto; }
}
@media (max-width: 40rem) {
  .search-row > button { width: auto; padding-inline: var(--space-md); }
  .site-nav .nav-admin { display: none; }
  .client-list li a { padding-inline: 0; }
}
@media (max-width: 40rem) {
  .site-nav a.nav-admin:not(.logo):not(.btn) { display: none; }
  form.search-row > button:not(.secondary):last-child, form.search-row > button { width: auto; flex: none; }
}
.card ul.client-list { padding: 0; margin: 0; }
#backups .rowlist li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); padding-block: var(--space-2xs); } #backups .btn { overflow-wrap: anywhere; }