/* HaZix control panel. Calm cool-slate palette, brand gradient (cyan -> blue -> purple) only as an accent.
   Light + dark (data-theme), RTL-safe (logical properties only), phone-first at 375px. */
:root {
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", "Segoe UI Arabic", Tahoma, sans-serif;
  /* shape + rhythm (the same scale as the back office: public/admin.css) */
  --r: 14px; --r-sm: 10px; --r-lg: 18px; --ctl-h: 38px; --ctl-h-sm: 32px; --pad: 18px; --gap: 16px; --side-w: 236px; --side-w-mini: 64px;
  --h1: 24px; --h3: 15px;
}
/* Colour tokens. They are declared for the page (:root) and again for any box that carries data-skin="light|dark" (the live previews on the Appearance page), so a box can
   show the other mode, or the chosen palette, without touching the page. Appearance (js/skin.js) overrides --accent*, --on-accent, --grad-*, --side* inline on <html>. */
:root, [data-skin] {
  /* the HaZix brand gradient (cyan -> blue -> purple), only ever an accent: avatar, active tab / menu bar, auth card edge, wizard progress */
  --grad-1: #22d3ee; --grad-2: #3b82f6; --grad-3: #a855f7; --on-grad: #ffffff;
  --grad: linear-gradient(135deg, var(--grad-1) 0%, var(--grad-2) 52%, var(--grad-3) 100%);
  --chart-a: #3b82f6; --chart-b: #22d3ee;
  --paper: #ffffff; --switch-thumb: #ffffff;
  --shadow-lg: 0 24px 64px rgba(12, 18, 40, .28);
  --scrim: rgba(10, 14, 28, .5);
  /* the sidebar: the page surface by default; the "dark" and "brand" styles of Settings > Appearance override these (palette from the back office's colour engine) */
  --side: var(--panel); --side-2: var(--panel-3); --side-ink: var(--muted); --side-strong: var(--ink); --side-muted: var(--faint);
  --side-hl: var(--panel-3); --side-hl-2: var(--panel-2); --side-line: var(--line); --side-edge: var(--line);
  --side-active-bg: var(--accent-soft); --side-active-ink: var(--accent-d); --side-bar: var(--grad);
}
:root, [data-skin="light"] {
  --bg: #f5f6fa; --panel: #ffffff; --panel-2: #f9fafc; --panel-3: #eef0f6; --line: #e3e6ee; --line-2: #eceef4;
  --ink: #151a2c; --muted: #5f6a82; --faint: #98a2b3;
  --accent: #3b6df0; --accent-d: #2a56cf; --accent-h: #2a56cf; --accent-soft: #e8eefe; --on-accent: #ffffff;
  --ok: #0f7a56; --ok-soft: #dff4ea; --warn: #a4570a; --warn-soft: #fdf0d8; --danger: #c0362c; --danger-soft: #fde8e6; --on-danger: #ffffff;
  --info: #2a56cf; --info-soft: #e5edfe; --dark-badge: #344054; --dark-badge-soft: #e6e8ee; --on-solid: #ffffff;
  --shadow: 0 1px 2px rgba(20, 28, 55, .05), 0 6px 20px rgba(20, 28, 55, .05);
  color-scheme: light;
}
:root[data-theme="dark"], [data-skin="dark"] {
  --bg: #0b0e16; --panel: #131825; --panel-2: #181e2d; --panel-3: #212839; --line: #272f43; --line-2: #1f2637;
  --ink: #e8ebf5; --muted: #9ba6bd; --faint: #667088;
  --accent: #6d94ff; --accent-d: #93b0ff; --accent-h: #84a4ff; --accent-soft: #1b2850; --on-accent: #08102a;
  --ok: #4fd6a2; --ok-soft: #12342a; --warn: #f0b252; --warn-soft: #3a2b12; --danger: #ff8077; --danger-soft: #3c1f1e; --on-danger: #1a0605;
  --info: #93b0ff; --info-soft: #1b2850; --dark-badge: #d0d5e2; --dark-badge-soft: #2a3246; --on-solid: #0b0e16;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { scrollbar-gutter: stable; }   /* the page does not shift sideways when a long page gets its scrollbar */
body { background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, ul { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled, .btn[disabled] { cursor: not-allowed; opacity: .5; }
[hidden] { display: none !important; }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.nowrap { white-space: nowrap; }
.small { font-size: 12.5px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.num { font-variant-numeric: tabular-nums; }
.neg { color: var(--danger); }
.pos { color: var(--ok); }
.ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ic { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.flip-rtl .ic { transform: none; }
:root[dir="rtl"] .flip-rtl .ic, :root[dir="rtl"] .flip-rtl-ic .ic { transform: scaleX(-1); }
.link { color: var(--accent-d); font-weight: 600; cursor: pointer; }
.link:hover { text-decoration: underline; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent-d); font-weight: 600; }
.link-btn:hover { text-decoration: underline; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }   /* a wide row inside (a long filter strip) scrolls itself, never widens the page */
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); }
.boot img { width: 64px; height: 64px; animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .5; transform: scale(.94); } }

/* ------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ctl-h); padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 650; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s, transform .1s; }
.btn:hover:not(:disabled) { background: var(--panel-2); border-color: var(--faint); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-h); border-color: var(--accent-h); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.btn-danger:hover:not(:disabled) { filter: brightness(.93); background: var(--danger); }
.btn-danger-ghost { color: var(--danger); }
.btn-danger-ghost:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); }
/* the one button set: .btn (the plain bordered button; "btn-ghost" is only another name for it, no extra rules), .btn-primary, .btn-danger, .btn-danger-ghost, .btn-quiet; sizes .btn-sm / .btn-lg */
.btn-quiet { border-color: transparent; background: transparent; }
.btn-quiet:hover:not(:disabled) { background: var(--panel-3); border-color: transparent; }
.btn-sm { min-height: var(--ctl-h-sm); padding: 0 11px; font-size: 13px; border-radius: 8px; gap: 6px; }
.btn-lg { min-height: 46px; font-size: 15px; }
.btn-block { width: 100%; }
.btn.is-busy { position: relative; color: transparent; pointer-events: none; }
.btn.is-busy::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--on-accent) transparent var(--on-accent) transparent; animation: spin .7s linear infinite; }
.btn-ghost.is-busy::after, .btn-quiet.is-busy::after { border-color: var(--muted) transparent var(--muted) transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn { display: inline-grid; place-items: center; width: var(--ctl-h); height: var(--ctl-h); border: 0; border-radius: var(--r-sm); background: transparent; color: inherit; flex: 0 0 auto; }
.icon-btn.sm { width: 30px; height: 30px; border-radius: 8px; color: var(--muted); }
.icon-btn:hover:not(:disabled) { background: var(--panel-3); }
.icon-btn.bordered { border: 1px solid var(--line); background: var(--panel); }

/* ------------------------------------------------------------ badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--panel-3); color: var(--muted); white-space: nowrap; line-height: 1.5; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-dark { background: var(--dark-badge-soft); color: var(--dark-badge); }
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; background: var(--panel-3); font-size: 12.5px; font-weight: 600; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: 0 0 auto; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.danger { background: var(--danger); }

/* ------------------------------------------------------------ shell */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.scrim { display: none; }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--side); color: var(--side-ink); border-inline-end: 1px solid var(--side-edge); display: flex; flex-direction: column; z-index: 40; }
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; }
.brand img { width: 130px; height: auto; display: block; }
.brand .logo-dark { display: none; }
/* the white logo on every dark surface: the dark mode, and a dark / brand-colour sidebar (js/skin.js sets data-side) */
:root[data-theme="dark"] .brand .logo-light, :root[data-side="dark"] .brand .logo-light, :root[data-side="brand"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark, :root[data-side="dark"] .brand .logo-dark, :root[data-side="brand"] .brand .logo-dark { display: block; }
.brand-tag { margin-inline-start: auto; font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--panel-3); border-radius: 6px; padding: 2px 6px; }
.side-nav { flex: 1; overflow-y: auto; padding: 6px 10px; display: grid; gap: 2px; align-content: start; }
.side-label { padding: 14px 10px 4px; font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--side-muted); }
.side-link { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--side-ink); font-weight: 600; position: relative; }
.side-link:hover { background: var(--side-hl); color: var(--side-strong); }
button.side-link { width: 100%; background: none; border: 0; font: inherit; font-weight: 600; text-align: start; cursor: pointer; }
.side-link .side-ext { margin-inline-start: auto; display: inline-flex; opacity: .55; }
:root[dir="rtl"] .side-link .side-ext svg { transform: scaleX(-1); }
.side-link.active { background: var(--side-active-bg); color: var(--side-active-ink); }
.side-link.active::before { content: ""; position: absolute; inset-inline-start: -10px; inset-block: 8px; width: 3px; border-start-end-radius: 3px; border-end-end-radius: 3px; background: var(--side-bar); }
.side-link .count { margin-inline-start: auto; font-size: 11.5px; background: var(--danger-soft); color: var(--danger); border-radius: 999px; padding: 0 7px; font-weight: 700; }
.side-foot { padding: 10px; border-top: 1px solid var(--side-line); display: grid; gap: 2px; }
.brand { min-height: 66px; }
.brand img.brand-mark { display: none; }
.side-link .lbl { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Desktop hover sidebar (a mouse screen wider than 900px; js/side-rail.js adds .hovernav and keeps .collapsed / .peek / .pinned). It is a 64px ICON RAIL (.collapsed: no labels, group
   chevrons, section titles or sub-menus; the HaZix mark instead of the logo) until the pointer or the keyboard focus reaches it, then it opens OVER the page (.peek): the grid column
   never leaves 64px, so nothing in the page moves. .pinned (My appearance > Pin sidebar open, saved per user) keeps it open in the layout. In RTL the overlay opens toward the page (the sidebar
   is at the right edge and overflows to the left). Phones and tablets (<= 900px or no hover) never get .hovernav: they keep the drawer below. */
.shell.hovernav:not(.pinned) { grid-template-columns: var(--side-w-mini) minmax(0, 1fr); }
.shell.hovernav .sidebar { overflow: hidden; }
.shell.hovernav:not(.pinned) .sidebar { width: var(--side-w-mini); transition: width .16s cubic-bezier(.4, 0, .2, 1), box-shadow .16s; }
.shell.hovernav.peek .sidebar { width: var(--side-w); box-shadow: var(--shadow-lg); }   /* wider than its grid track: it overflows toward the page (to the left in Arabic) and covers it */
.shell.hovernav.pinned .sidebar { width: var(--side-w); }                                  /* pinned: the full sidebar in the layout, like before */
.shell.collapsed .lbl, .shell.collapsed .side-chev, .shell.collapsed .side-label { display: none; }
.shell.collapsed .side-sub, .shell.collapsed .side-group.open > .side-sub { display: none; }
.shell.collapsed .side-link { justify-content: center; padding-inline: 0; }
.shell.collapsed .side-nav, .shell.collapsed .side-foot { padding-inline: 8px; }
.shell.collapsed .side-nav { padding-block-start: 12px; }
.shell.collapsed .side-link.active::before { inset-inline-start: -8px; }
.shell.collapsed .brand { justify-content: center; padding-inline: 0; }
.shell.collapsed .brand a { display: grid; place-items: center; }
.shell.collapsed .brand .logo-light, .shell.collapsed .brand .logo-dark { display: none !important; }
.shell.collapsed .brand .brand-mark { display: block; width: 34px; height: 34px; }

/* name tooltip (one element, placed by main.js sideTips): a label cut short, or an entry of the folded rail while it stays folded */
.side-tip { position: fixed; z-index: 80; max-width: min(260px, 70vw); padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 600; line-height: 1.35; pointer-events: none; opacity: 0; transition: opacity .12s; }
.side-tip.on { opacity: 1; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 8px 24px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); min-height: 56px; }
.menu-btn { display: none; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); min-width: 0; flex: 1 1 0; white-space: nowrap; overflow: hidden; }
.crumbs a:hover { color: var(--ink); }
.crumbs .cur { color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.crumbs .sep { opacity: .5; display: inline-flex; }
:root[dir="rtl"] .crumbs .sep { transform: scaleX(-1); }
.lang-btn { width: auto; padding: 0 10px; gap: 6px; font-weight: 750; font-size: 12.5px; white-space: nowrap; display: inline-flex; align-items: center; }
.user-menu { position: relative; }
.user-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--panel); padding-block: 3px; padding-inline: 3px 10px; border-radius: 999px; }
.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: var(--on-grad); font-weight: 800; font-size: 12px; flex: 0 0 auto; }
.user-name { font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 230px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 6px; z-index: 50; display: grid; }
.menu-head { padding: 8px 10px; display: grid; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: transparent; border-radius: var(--r-sm); text-align: start; width: 100%; font-weight: 550; }
.menu a:hover, .menu button:hover { background: var(--panel-3); }
.menu .sep-line { height: 1px; background: var(--line); margin: 4px 0; }
.content { padding: 24px 28px 64px; min-width: 0; outline: 0; }
.page { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-content: start; }
.page.narrow { max-width: 880px; margin-inline: 0; }   /* forms: a narrower column, but the header stays where it is on every other page */
/* THE page header, on every page (js/core.js pageHead): title, optional subtitle, actions at the end. The client page's own header (.client-head) has the same title size. */
.page-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.page-head h1, .client-head h1 { font-size: var(--h1); letter-spacing: -.015em; line-height: 1.25; }
.page-head .sub { color: var(--muted); margin-top: 2px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-inline-start: auto; }

/* ------------------------------------------------------------ cards, KPIs */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--pad); box-shadow: var(--shadow); min-width: 0; }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card.flush > .card-head { padding: 14px var(--pad) 0; margin-bottom: 10px; }
.card-head h3, .card-title { font-size: var(--h3); letter-spacing: -.005em; }
.card-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; display: block; text-align: start; width: 100%; container-type: inline-size; }
.kpi-link { cursor: pointer; transition: border-color .15s, transform .12s; }
.kpi-link:hover { border-color: var(--accent); }
.kpi-top { display: flex; align-items: center; gap: 8px; }
.kpi-ico { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-d); display: grid; place-items: center; flex: 0 0 auto; }
.kpi-ico.tone-ok { background: var(--ok-soft); color: var(--ok); }
.kpi-ico.tone-warn { background: var(--warn-soft); color: var(--warn); }
.kpi-ico.tone-danger { background: var(--danger-soft); color: var(--danger); }
.kpi-ico.tone-dark { background: var(--dark-badge-soft); color: var(--dark-badge); }
.kpi-label { color: var(--muted); font-weight: 600; font-size: 13px; min-width: 0; }
.kpi-value { font-size: clamp(18px, 10cqw, 25px); font-weight: 750; letter-spacing: -.02em; margin-top: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi-sub { color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.kpi-row.kpi-flow { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }   /* any number of tiles (Mintro page) */
.share-cell { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.share-cell .meter-bar { inline-size: 64px; flex: 0 0 auto; }
.share-cell .meter-bar i { background: var(--accent); }
/* Applications > Tester feedback (app-feedback.js) */
.fb-list { display: grid; gap: 10px; }
.fb-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 6px; min-width: 0; }
.fb-item.is-unread { border-inline-start: 3px solid var(--accent); }
.fb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-when { font-weight: 600; font-size: 13.5px; }
.fb-stars { color: var(--warn); letter-spacing: 1px; font-size: 14px; }
.fb-stars-off { color: var(--faint); }
.fb-meta { overflow-wrap: anywhere; }
.fb-body { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.fb-msg { margin: 0; flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.fb-shot { flex: 0 0 auto; inline-size: 96px; block-size: 96px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); overflow: hidden; cursor: zoom-in; }
.fb-shot img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.fb-shot-missing { display: grid; place-items: center; gap: 4px; text-align: center; cursor: default; padding: 6px; }
.fb-shot-full { display: grid; place-items: center; }
.fb-shot-full img { max-inline-size: 100%; max-block-size: 75vh; border-radius: var(--r-sm); }
.fb-more { display: flex; justify-content: center; }
@media (max-width: 520px) { .fb-body { flex-direction: column; } .fb-shot { inline-size: 100%; block-size: 180px; } .fb-head .row-actions { inline-size: 100%; } }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.grid-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.kv { display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 8px 14px; margin: 0; font-size: 13.5px; }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv dd[dir="ltr"] { justify-self: start; }   /* an e-mail / number keeps the same edge as the other values in Arabic */
.note-box { padding: 10px 12px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--line-2); font-size: 13px; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); font-size: 13px; background: var(--info-soft); color: var(--ink); }
.alert .ico { margin-top: 1px; color: var(--info); }
.alert-warn { background: var(--warn-soft); } .alert-warn .ico { color: var(--warn); }
.alert-danger { background: var(--danger-soft); } .alert-danger .ico { color: var(--danger); }
.alert-ok { background: var(--ok-soft); } .alert-ok .ico { color: var(--ok); }
.error-box { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--danger-soft); color: var(--ink); flex-wrap: wrap; }
.error-box .ico { color: var(--danger); }

/* client header */
.client-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.client-head h1 { font-size: 22px; letter-spacing: -.015em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.client-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-top: 4px; }
.client-meta span { display: inline-flex; align-items: center; gap: 5px; }
.banner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-sm); font-size: 13.5px; flex-wrap: wrap; }
.banner-warn { background: var(--warn-soft); } .banner-danger { background: var(--danger-soft); } .banner-dark { background: var(--dark-badge-soft); }

/* ------------------------------------------------------------ toolbar / lists / tables */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar .grow-sp { flex: 1; }
.search-box { position: relative; flex: 1 1 240px; max-width: 380px; }
.search-box .ico { position: absolute; inset-inline-start: 11px; inset-block-start: calc((var(--ctl-h) - 16px) / 2); color: var(--muted); pointer-events: none; }
/* every text control (toolbar and form) is --ctl-h high with the same border, radius and focus ring */
.search-input, .sel, .date-in { height: var(--ctl-h); padding: 0 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); outline: 0; max-width: 100%; transition: border-color .15s, box-shadow .15s; }
.search-input { width: 100%; padding-inline-start: 34px; }
.search-input:focus, .sel:focus, .date-in:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.date-in { width: 142px; }
.date-range { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); padding: 2px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg { flex: none; border: 0; background: transparent; padding: 0 12px; min-height: calc(var(--ctl-h) - 6px); border-radius: 8px; color: var(--muted); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.seg small { color: var(--faint); font-weight: 600; }
.seg:hover:not(:disabled) { color: var(--ink); }
.seg.on { background: var(--accent); color: var(--on-accent); }
.seg.on small { color: inherit; opacity: .8; }
.seg:disabled { opacity: .45; cursor: not-allowed; }
.list-body { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; min-height: 60px; transition: opacity .15s; }
.list-body.is-loading { opacity: .55; }
.table-wrap { overflow-x: auto; }
.dt { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dt th { text-align: start; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none; }
.dt td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.dt tbody tr:last-child td { border-bottom: 0; }
.dt .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt th.sortable { cursor: pointer; }
.dt th.sortable:hover { color: var(--ink); }
.sort-ind { margin-inline-start: 5px; opacity: .4; font-size: 10px; }
.sorted-asc .sort-ind, .sorted-desc .sort-ind { opacity: 1; color: var(--accent-d); }
.dt tr.clickable { cursor: pointer; }
.dt tr.clickable:hover td { background: var(--panel-2); }
.dt tr.clickable:focus-visible { outline-offset: -2px; }
.dt tfoot td { font-weight: 750; background: var(--panel-2); border-top: 1px solid var(--line); border-bottom: 0; }
.dt tr.row-attn td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.kpi-multi { display: block; font-size: .8em; white-space: normal; overflow-wrap: anywhere; }   /* Expenses: one amount per currency can be long */
.dt tr.row-stopped td:not(:last-child) { opacity: .6; }   /* Expenses: a stopped expense is dimmed, its actions stay clear */
:root[dir="rtl"] .dt tr.row-attn td:first-child { box-shadow: inset -3px 0 0 var(--danger); }
.cell-name { display: grid; min-width: 0; }
.cell-name b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.cell-name small { color: var(--muted); font-size: 12px; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; text-align: start; }
.cell-name b.num { white-space: nowrap; overflow: visible; text-align: start; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.dt td .link { white-space: nowrap; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line-2); font-size: 13px; }
.pager-btns { display: flex; gap: 4px; }
.list-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 13px; padding: 2px 2px 0; }
.empty { text-align: center; padding: 44px 20px; color: var(--muted); display: grid; justify-items: center; gap: 8px; }
.empty h3 { color: var(--ink); font-size: 16px; }
.empty p { max-width: 420px; }
.empty .btn { margin-top: 8px; }
.empty-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-d); display: grid; place-items: center; }
.skeleton { display: grid; gap: 10px; padding: 8px 0; }
.sk { border-radius: 8px; background: linear-gradient(90deg, var(--panel-3), var(--panel-2), var(--panel-3)); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
.sk-title { height: 26px; width: 240px; max-width: 70%; }
.sk-row { height: 46px; }
.sk-kpi { height: 92px; border-radius: var(--r); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* meters */
.meter { display: grid; gap: 3px; min-width: 76px; }
.meter-top { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; line-height: 1.2; }
.meter-label { color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter-val { white-space: nowrap; }
.meter-val { font-variant-numeric: tabular-nums; font-size: 12px; unicode-bidi: isolate; direction: ltr; }
.meter-bar { height: 5px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.meter-bar i { display: block; height: 100%; border-radius: 999px; background: var(--ok); transition: inline-size .3s; }
.meter-warn .meter-bar i { background: var(--warn); } .meter-danger .meter-bar i { background: var(--danger); }
.meters { display: grid; grid-template-columns: repeat(2, minmax(104px, 1fr)); gap: 8px 14px; min-width: 232px; }
.meters-lg { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; }
.meters-lg .meter-bar { height: 8px; }

/* ------------------------------------------------------------ tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); position: relative; }
.tab.on::after { content: ""; position: absolute; inset-inline: 6px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--grad); }
.tab-count { font-size: 11.5px; background: var(--panel-3); border-radius: 999px; padding: 0 7px; color: var(--muted); font-weight: 700; }

/* ------------------------------------------------------------ forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.form-grid .span-2 { grid-column: 1 / -1; }
.field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.field-label { font-size: 12.5px; font-weight: 650; color: var(--muted); }
.req { color: var(--danger); }
.field input[type=text], .field input[type=number], .field input[type=email], .field input[type=tel], .field input[type=password], .field input[type=date], .field input[type=search], .field input:not([type]), .field select, .field textarea {
  width: 100%; min-height: var(--ctl-h); padding: 7px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); outline: 0; transition: border-color .15s, box-shadow .15s; }
.field textarea { resize: vertical; min-height: 72px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.field input:disabled, .field select:disabled, .field textarea:disabled, .field input[readonly] { background: var(--panel-3); color: var(--muted); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); }
.field.invalid input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }
.field-error { color: var(--danger); font-size: 12.5px; font-weight: 600; }
.field-hint { color: var(--muted); font-size: 12.5px; }
.input-suffix { display: flex; align-items: center; gap: 0; }
.input-suffix input { border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; }
.suffix { display: inline-flex; align-items: center; padding: 0 11px; min-height: var(--ctl-h); border: 1px solid var(--line); border-inline-start: 0; border-start-end-radius: var(--r-sm); border-end-end-radius: var(--r-sm); background: var(--panel-3); color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; }
.input-group { display: flex; gap: 6px; align-items: stretch; }
.input-group .field { flex: 1; }
.input-group > .btn { align-self: end; }
.field input[type=number], .num-in { font-variant-numeric: tabular-nums; }
input[type=number]::-webkit-inner-spin-button { opacity: .5; }
.switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px; background: var(--faint); position: relative; transition: background .15s; margin-top: 1px; }
.switch-track i { position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--switch-thumb); transition: inset-inline-start .15s; box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 35%, transparent); }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track i { inset-inline-start: 18px; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-text { display: grid; }
.switch-text small { color: var(--muted); font-size: 12.5px; }
.check { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--accent); }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dirty-bar { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; padding: 10px 14px; background: var(--accent-soft); border-radius: var(--r-sm); }

/* limits editor */
.limits { display: grid; gap: 12px; }
.limit-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 1.4fr) 120px; gap: 12px; align-items: center; }
.limit-row .field input { text-align: end; }

/* ------------------------------------------------------------ modal / toast */
.backdrop { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 20px; animation: fade .15s; z-index: 100; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal { width: min(560px, 100%); max-height: calc(100vh - 40px); display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .18s; }
.modal-form { display: flex; flex-direction: column; min-width: 0; min-height: 0; width: 100%; }
.modal-sm { width: min(420px, 100%); } .modal-lg { width: min(720px, 100%); } .modal-xl { width: min(880px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-block: 16px 8px; padding-inline: 22px 16px; }
.modal-head h3 { font-size: 16.5px; letter-spacing: -.01em; }
.modal-sub { color: var(--muted); font-size: 13px; margin-top: 1px; }
.modal-body { padding: 6px 22px var(--pad); overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--panel-2); flex-wrap: wrap; }
.confirm-msg { color: var(--ink); }
.consequences { padding-inline-start: 18px; color: var(--muted); display: grid; gap: 4px; }
.toasts { position: fixed; inset-inline-end: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 200; max-width: min(400px, calc(100vw - 36px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: var(--r-sm); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px); transition: .2s; font-weight: 550; }
.toast .ico { margin-top: 2px; }
.toast.show { opacity: 1; transform: none; }
.toast-success { background: var(--ok); color: var(--on-solid); }
.toast-error { background: var(--danger); color: var(--on-solid); }

/* ------------------------------------------------------------ extend dialog */
.ext-current { display: flex; gap: 10px 16px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-2); font-size: 13px; }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.plan-card { text-align: start; border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-sm); padding: 9px 12px; display: grid; gap: 1px; }
.plan-card b { font-weight: 650; }
.plan-card span { color: var(--muted); font-size: 12.5px; }
.plan-card:hover { border-color: var(--faint); }
.plan-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); background: var(--accent-soft); }
.stepper { display: inline-flex; align-items: stretch; direction: ltr; }
.stepper button { width: 38px; border: 1px solid var(--line); background: var(--panel); font-size: 18px; line-height: 1; color: var(--ink); }
.stepper button:first-child { border-start-start-radius: var(--r-sm); border-end-start-radius: var(--r-sm); }
.stepper button:last-child { border-start-end-radius: var(--r-sm); border-end-end-radius: var(--r-sm); }
.stepper button:hover:not(:disabled) { background: var(--panel-3); }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input, .field .stepper input { -moz-appearance: textfield; width: 64px; text-align: center; border-radius: 0 !important; border-inline: 0 !important; }
.preview { border-radius: 12px; padding: 1px; background: var(--grad); }
.preview-in { background: var(--panel); border-radius: 11px; padding: 12px 14px; display: grid; gap: 8px; }
.preview-line { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: baseline; }
.preview-line .k { color: var(--muted); font-size: 12.5px; font-weight: 600; min-width: 92px; }
.preview-line b { font-variant-numeric: tabular-nums; }
.preview-big { font-size: 15.5px; }
.preview .arrow { color: var(--faint); margin-inline: 4px; }
:root[dir="rtl"] .preview .arrow { display: inline-block; transform: scaleX(-1); }
.preview-total { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding-top: 8px; border-top: 1px dashed var(--line); }
.preview-total b { font-size: 17px; }

/* ------------------------------------------------------------ timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tl-item { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.tl-item::before { content: ""; position: absolute; inset-inline-start: 10px; top: 20px; bottom: 0; width: 2px; background: var(--line); }
.tl-item:last-child::before { display: none; }
.tl-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--panel); border: 2px solid var(--accent); display: grid; place-items: center; color: var(--accent-d); margin-top: 2px; }
.tl-dot.trial { border-color: var(--warn); color: var(--warn); }
.tl-dot.adjust { border-color: var(--faint); color: var(--muted); }
.tl-head { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: baseline; }
.tl-head b { font-size: 14px; font-variant-numeric: tabular-nums; }
.tl-sub { color: var(--muted); font-size: 12.5px; display: flex; gap: 4px 12px; flex-wrap: wrap; margin-top: 2px; }

/* ------------------------------------------------------------ chart */
.chart { direction: ltr; width: 100%; height: auto; max-height: 340px; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--faint); stroke-width: 1; }
.chart .ax { fill: var(--muted); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart .bar-inv { fill: var(--panel-3); }
.chart .bar-paid { fill: url(#hzg); }
.chart .bar-hit:hover ~ .bar-inv, .chart g:hover .bar-inv { fill: var(--line); }
.chart g:hover .bar-paid { filter: brightness(1.08); }
.chart .hit { fill: transparent; }
.chart .bar-day { fill: url(#hzd); }
.chart g:hover .bar-day { filter: brightness(1.08); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }
.legend .sw-invoiced { background: var(--panel-3); border: 1px solid var(--line); }
.legend .sw-paid { background: linear-gradient(var(--chart-a), var(--chart-b)); }

/* attention lists */
.attn-list { display: grid; }
.attn-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.attn-row:last-child { border-bottom: 0; }
.attn-main { min-width: 0; flex: 1; display: grid; }
.attn-main b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attn-main small { color: var(--muted); }
.attn-end { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------ wizard */
.steps { display: flex; gap: 6px; flex-wrap: wrap; counter-reset: s; }
.step { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; font-size: 13px; padding-block: 4px; padding-inline: 4px 10px; border-radius: 999px; }
.step-n { width: 24px; height: 24px; border-radius: 50%; background: var(--panel-3); display: grid; place-items: center; font-size: 12px; font-weight: 750; }
.step.done .step-n { background: var(--ok-soft); color: var(--ok); }
.step.on { color: var(--ink); }
.step.on .step-n { background: var(--grad); color: var(--on-grad); }
.step-bar { height: 3px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.step-bar i { display: block; height: 100%; background: var(--grad); transition: inline-size .25s; }
.slug-status { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.slug-status.ok { color: var(--ok); } .slug-status.bad { color: var(--danger); } .slug-status.wait { color: var(--muted); }
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.choice-card { text-align: start; border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-sm); padding: 12px 14px; display: grid; gap: 2px; }
.choice-card span { color: var(--muted); font-size: 12.5px; }
.choice-card:hover { border-color: var(--faint); }
.choice-card.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.review dl { margin: 0; }
.creds { display: grid; gap: 8px; }
.cred { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); min-width: 0; }
.cred .k { color: var(--muted); font-size: 12.5px; font-weight: 600; min-width: 82px; }
.cred code { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; overflow-wrap: anywhere; direction: ltr; text-align: start; unicode-bidi: plaintext; }
.success-ico { width: 52px; height: 52px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; }

/* ------------------------------------------------------------ auth */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; position: relative; background: radial-gradient(900px 400px at 15% -10%, color-mix(in srgb, var(--grad-1) 14%, transparent), transparent 70%), radial-gradient(800px 400px at 95% 0%, color-mix(in srgb, var(--grad-3) 14%, transparent), transparent 70%), var(--bg); }
.auth-tools { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; display: flex; gap: 6px; }
.auth-card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 28px 26px 24px; display: grid; gap: 16px; position: relative; overflow: hidden; }
.auth-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--grad); }
.auth-logo { display: grid; justify-items: center; gap: 4px; }
.auth-logo img { height: 52px; width: auto; }
.auth-logo .logo-dark { display: none; }
:root[data-theme="dark"] .auth-logo .logo-light { display: none; }
:root[data-theme="dark"] .auth-logo .logo-dark { display: block; }
.auth-card h1 { font-size: 19px; text-align: center; letter-spacing: -.01em; }
.auth-card .sub { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: -8px; }
.auth-form { display: grid; gap: 14px; }
.otp { letter-spacing: .5em; text-align: center; font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; direction: ltr; }
.field input.otp { min-height: 48px; }
.enroll { display: grid; gap: 14px; }
.qr-box { justify-self: center; background: var(--paper); padding: 8px; border-radius: var(--r-sm); border: 1px solid var(--line); line-height: 0; }
.qr-box svg { width: 196px; height: 196px; display: block; }
.secret-box { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--panel-2); border: 1px dashed var(--line); border-radius: 10px; }
.secret-box code { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14.5px; letter-spacing: .08em; direction: ltr; text-align: center; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ misc */
.audit-detail { min-width: 200px; display: inline-block; font-size: 12px; color: var(--muted); max-width: 420px; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.kbd { font: 600 11px var(--font); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; background: var(--panel-2); color: var(--muted); direction: ltr; unicode-bidi: isolate; }
.aging { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.aging > div { padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-2); display: grid; }
.aging span { font-size: 12px; color: var(--muted); font-weight: 600; }
.aging b { font-variant-numeric: tabular-nums; font-size: 15px; }
.aging .late b { color: var(--danger); }
.sync-pill { display: inline-flex; align-items: center; gap: 6px; }
.url-link { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-d); font-weight: 600; direction: ltr; unicode-bidi: isolate; }
.url-link:hover { text-decoration: underline; }
.proc { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-main, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(280px, 86vw); transform: translateX(-102%); transition: transform .2s; box-shadow: var(--shadow-lg); }
  :root[dir="rtl"] .sidebar { transform: translateX(102%); }
  .shell.nav-open .sidebar { transform: none; }
  .shell.nav-open .scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 35; }
  .menu-btn { display: inline-grid; }
  .topbar { padding: 6px 12px; }
  .content { padding: 16px 14px 56px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .user-name { display: none; }
  .user-btn { padding: 3px; }
}
@media (max-width: 720px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .limit-row { grid-template-columns: minmax(0, 1fr) 100px; }
  .limit-row .limit-meter { grid-column: 1 / -1; order: 3; }
  .aging { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-actions { margin-inline-start: 0; width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }
  .search-box { max-width: none; flex-basis: 100%; }
  .date-in { width: 100%; flex: 1 1 120px; }
  .toolbar .sel { flex: 1 1 140px; }
  .backdrop { padding: 0; place-items: end stretch; }
  .modal { width: 100% !important; max-height: 94vh; border-radius: var(--r-lg) var(--r-lg) 0 0; border-inline: 0; border-bottom: 0; }
  .modal-body { padding-inline: 16px; }
  /* the summary card is tall on a phone: sticking it to the bottom hid the very fields being edited (focus went under it), so it flows with the form */
  .modal-body .preview { scroll-margin-block-end: 12px; }
  .preview-line .k { min-width: 0; }
  .modal-body .segmented { display: flex; flex-wrap: wrap; overflow: visible; }   /* see all choices (Today / Tomorrow / After current end / Pick date) without scrolling sideways */
  .toasts { bottom: 12px; inset-inline: 12px; max-width: none; }
  /* tables become cards */
  .rtable, .rtable tbody, .rtable tfoot { display: block; }
  .rtable thead { display: none; }
  .rtable tr { display: block; margin: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow); }
  /* a table that turns into cards does not sit inside another card / frame: the cards are the frame */
  :is(.list-body, .card.flush):has(> .table-wrap > .rtable) { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  :is(.list-body, .card.flush) > .table-wrap > .rtable tr { margin: 0 0 10px; }
  .card.flush:has(> .table-wrap > .rtable) > .card-head { padding-inline: 0; }
  .date-range { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; }
  .date-range .date-in { width: 100%; }
  .date-range > .sel { grid-column: 1 / -1; }   /* Accounting's period select (books-kit.js periodBar) on its own line above From / To */
  .rtable tfoot tr { background: var(--panel-2); }
  .rtable td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border: 0 !important; text-align: end; background: transparent !important; }
  .rtable td[data-label]::before { content: attr(data-label); color: var(--muted); font-weight: 600; font-size: 12px; text-align: start; flex: 0 0 auto; }
  .rtable td.cell-primary { font-size: 15px; padding-block: 4px 8px; border-bottom: 1px solid var(--line-2) !important; margin-bottom: 4px; justify-content: flex-start; text-align: start; }
  .rtable td.cell-primary::before { display: none; }
  .rtable td:not([data-label]) { justify-content: flex-end; }
  .rtable .meters { justify-content: flex-end; width: 100%; max-width: 230px; }
  .dt .num { white-space: normal; }
  .rtable tr.row-attn { border-inline-start: 3px solid var(--danger); }
  .rtable tr.row-attn td:first-child { box-shadow: none; }
  .topbar .btn-primary { display: none; }
  .kpi-row { gap: 8px; }
  .kpi { padding: 12px; }
  /* attention rows (renewals, overdue invoices): name + amount on one line, the action button below, never wider than the card */
  .attn-row { flex-wrap: wrap; row-gap: 8px; }
  .attn-main { flex-basis: 55%; }
  .attn-row > .btn { margin-inline-start: auto; }
}
@media (max-width: 420px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head h1, .client-head h1 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media print { .sidebar, .topbar, .page-actions, .tabs, .toolbar { display: none !important; } .shell { display: block; } .card { box-shadow: none; } }

.invoice-frame { display: block; inline-size: 100%; block-size: min(64vh, 640px); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); }

/* ------------------------------------------------------------ Accounting: HaZix's books inside the panel (accounting.js) */
.side-group { display: grid; gap: 2px; }
.side-group .side-chev { margin-inline-start: auto; display: inline-flex; opacity: .55; transition: transform .15s; }
.side-group.open .side-chev { transform: rotate(180deg); }
.side-group.open > .side-head { color: var(--side-strong); }
.side-sub { display: none; gap: 1px; padding-inline-start: 20px; margin-inline-start: 18px; border-inline-start: 1px solid var(--side-line); }
.side-group.open > .side-sub { display: grid; }
.side-sub .side-link { padding-block: 6px; font-size: 13.5px; font-weight: 550; min-height: 34px; }
.side-sub .side-link.active::before { inset-inline-start: -21px; }
/* the folded rail keeps the icons of the open group (Settings: Billing and company, Appearance) */
.shell.collapsed .side-group.open > .side-sub[data-icons] { display: grid; padding: 0; margin: 0; border: 0; }
.shell.collapsed .side-sub[data-icons] .side-link { min-height: 0; padding-block: 8px; }
.shell.collapsed .side-sub[data-icons] .side-link.active::before { inset-inline-start: -8px; }
/* the group that is the open page lights its head like any other page's entry when none of its entries shows: folded by a click on the head, or the folded rail (Accounting) */
.side-group.here:not(.open) > .side-head, .shell.collapsed .side-group.here:not(:has(> .side-sub[data-icons])) > .side-head { background: var(--side-active-bg); color: var(--side-active-ink); }
.side-group.here:not(.open) > .side-head::before, .shell.collapsed .side-group.here:not(:has(> .side-sub[data-icons])) > .side-head::before { content: ""; position: absolute; inset-inline-start: -10px; inset-block: 8px; width: 3px; border-start-end-radius: 3px; border-end-end-radius: 3px; background: var(--side-bar); }
.shell.collapsed .side-group.here > .side-head::before { inset-inline-start: -8px; }
/* the books live in a layer next to the page area (accounting.js): it stays loaded while another panel page is open, so coming back is instant; the page area hides meanwhile */
.content.books-content { display: none; }
.books-layer { position: relative; flex: 1 1 auto; height: calc(100vh - 57px); height: calc(100dvh - 57px); }
.books-layer[hidden] { display: none; }
@media (max-width: 560px) { .crumbs > a, .crumbs > .sep, .crumbs > span:not(.cur) { display: none; } }   /* a phone's top bar has room for the page title only */
@media (max-width: 900px) { .books-layer { height: calc(100vh - 61px); height: calc(100dvh - 61px); } }
.books-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
/* until the books have drawn their screen: the panel's own page skeleton (no blank frame, no "another app is loading" spinner) */
.books-veil { position: absolute; inset: 0; background: var(--bg); z-index: 2; padding: 24px 28px 64px; overflow: hidden; }
.books-veil[hidden] { display: none; }
@media (max-width: 900px) { .books-veil { padding: 16px; } }
.books-error { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 24px; color: var(--ink); }
.books-error p { max-width: 340px; color: var(--muted); }
.books-empty { padding: 40px 16px; }

/* ------------------------------------------------------------ Settings > Appearance (js/appearance.js): the colour picker + live preview, ported from the back office (public/css/appearance.css) */
.ap { display: grid; gap: 22px; min-width: 0; }
.ap-sec { display: grid; gap: 10px; min-width: 0; }
.ap-sec > .segmented { justify-self: start; }
.ap-h { font-size: 12px; font-weight: 750; color: var(--muted); letter-spacing: .03em; text-transform: uppercase; }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.ap-grid.ap-three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 460px; }
.ap-grid.ap-one { grid-template-columns: minmax(0, 1fr); }
.ap-tile { position: relative; display: grid; gap: 8px; align-content: start; min-height: var(--ctl-h); padding: 10px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--panel); cursor: pointer; text-align: center; transition: border-color .12s, box-shadow .12s, background .12s; }
@media (hover: hover) { .ap-tile:hover { border-color: var(--muted); } }
.ap-tile:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); background: var(--accent-soft); }
.ap-tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-name { font-weight: 650; font-size: 13.5px; line-height: 1.25; overflow-wrap: anywhere; }
.ap-follow { grid-template-columns: auto 1fr; text-align: start; align-items: center; gap: 4px 14px; }
.ap-follow .ap-sw { grid-row: span 2; width: 96px; }
.ap-follow small { grid-column: 2; }
.ap-sw { display: flex; height: 36px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.ap-sw i { flex: 1; display: block; }
.ap-sw i:first-child { flex: .9; }
.ap-custom { display: grid; gap: 6px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--r-sm); }
.ap-custom.on { border-style: solid; border-color: var(--accent); }
.ap-hue-label { display: flex; justify-content: space-between; align-items: center; font-weight: 650; font-size: 13px; }
.ap-hue-val { color: var(--muted); font-variant-numeric: tabular-nums; }
/* the input is a 44 px high touch target; the rainbow (--ap-track, set in appearance.js) is the 14 px track inside it */
.ap-hue { direction: ltr; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; border: 0; outline: 0; touch-action: pan-y; cursor: pointer; }
.ap-hue::-webkit-slider-runnable-track { height: 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--ap-track); }
.ap-hue::-moz-range-track { height: 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--ap-track); }
.ap-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -8px; border-radius: 50%; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 35%, transparent); cursor: grab; }
.ap-hue::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 35%, transparent); cursor: grab; }
.ap-hue:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ap-note { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin: 0; }
.ap-note .ico { color: var(--ok); }
.ap-side-mock { display: flex; gap: 3px; height: 44px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); padding: 0; }
.ap-side-mock i { flex: 0 0 26%; display: block; }
.ap-side-mock b { display: none; }
.ap-side-dark .ap-side-mock i { background: color-mix(in srgb, var(--ink) 88%, var(--accent)); }
.ap-side-light .ap-side-mock i { background: var(--panel); border-inline-end: 1px solid var(--line); }
.ap-side-brand .ap-side-mock i { background: var(--accent-d); }
.ap-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 650; cursor: pointer; }
.ap-check input { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; }
/* the live preview: a scoped copy of the shell (data-skin gives it its own tokens, the palette is set on it inline, so the page itself never changes while you try things) */
.ap-prev { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 176px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg); color: var(--ink); }
.ap-prev-side { display: grid; align-content: start; gap: 4px; padding: 10px 8px; background: var(--side); border-inline-end: 1px solid var(--side-edge); color: var(--side-ink); }
.ap-l { padding: 5px 8px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--side-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-l.on { background: var(--side-active-bg); color: var(--side-active-ink); }
.ap-l.mut { color: var(--side-muted); font-weight: 500; }
.ap-prev-main { display: grid; gap: 14px; align-content: start; padding: 14px; min-width: 0; }
.ap-prev-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ap-prev .btn { min-height: var(--ctl-h-sm); padding: 0 12px; font-size: 13px; pointer-events: none; }
.ap-av { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: var(--on-grad); font-weight: 700; font-size: 13px; }
.ap-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); }
.ap-bars i { flex: 1; border-radius: 4px 4px 0 0; min-height: 8px; background: linear-gradient(var(--accent), var(--accent-soft)); }
.ap-block { display: grid; gap: 18px; }
.ap-lead { color: var(--muted); max-width: 70ch; }
.ap-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 600px) {
  .ap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ap-grid.ap-three { max-width: none; }
  .ap-tile { padding: 8px 6px; }
  .ap-name { font-size: 12.5px; overflow-wrap: break-word; }
  .ap-custom { padding: 8px 12px 4px; }
  .ap-follow .ap-sw { width: 72px; }
  .ap-prev { grid-template-columns: 84px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .ap-tile { transition: none; } }

/* ------------------------------------------------------------ small utilities (replace inline style="" in the page modules) */
.ms-6 { margin-inline-start: 6px; } .ms-8 { margin-inline-start: 8px; }
.gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-18 { gap: 18px; }
.mt-4 { margin-block-start: 4px; } .mt-10 { margin-block-start: 10px; } .mt-14 { margin-block-start: 14px; }
.between { justify-content: space-between; } .start { justify-content: flex-start; } .center { align-items: center; }
.self-start { justify-self: start; } .span-2 { grid-column: 1 / -1; }
.ink { color: var(--ink); }
.plain-list { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; }
.steps { list-style: none; margin: 0; padding: 0; }
.input-group.center > input { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- stage 4 of docs/UX-EASE.md: Ctrl+K search, type-ahead picker */
/* the search button of the top bar: wide with the shortcut on a computer, the icon alone on a phone (mobile.css) */
.find-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding-inline: 10px 6px; min-inline-size: 200px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--muted); font-weight: 550; cursor: pointer; }
.find-btn:hover { border-color: var(--accent); color: var(--ink); }
.find-btn .find-label { flex: 1; text-align: start; }
kbd, .find-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 650; padding: 1px 6px; border: 1px solid var(--line); border-block-end-width: 2px; border-radius: 5px; background: var(--panel-2); color: var(--muted); direction: ltr; unicode-bidi: isolate; }

/* the palette: a dialog near the top of the screen, results grouped (Pages, Clients, Companies, Invoices) */
.backdrop:has(.modal-palette) { place-items: start center; padding-block-start: 10vh; }
.modal-palette .modal-body { gap: 8px; padding-block-end: 12px; }
.palette-box { max-width: none; flex: none; }
.palette-list { display: grid; gap: 2px; max-block-size: min(56vh, 460px); overflow: auto; margin-inline: -8px; padding-inline: 8px; }
.palette-group { display: grid; gap: 2px; }
.palette-group + .palette-group { margin-block-start: 6px; }
.palette-head { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 8px 2px; }
.palette-opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); cursor: pointer; min-inline-size: 0; }
.palette-opt.on { background: var(--accent-soft); }
.palette-ico { inline-size: 28px; block-size: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--panel-3); color: var(--muted); flex: none; }
.palette-opt.on .palette-ico { color: var(--accent-d); }
.palette-txt { display: grid; min-inline-size: 0; flex: 1; }
.palette-txt b, .palette-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-txt small { color: var(--muted); }
.palette-side { flex: none; }
.palette-none { padding: 18px 8px; text-align: center; color: var(--muted); }
.palette-status:empty { display: none; }
.palette-keys { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; border-block-start: 1px solid var(--line); padding-block-start: 8px; }

/* type-ahead picker (client filters): looks like the other filter fields, a list opens under it */
.picker { position: relative; flex: 0 1 230px; min-inline-size: 170px; }
.picker .picker-ico { position: absolute; inset-inline-start: 10px; inset-block-start: calc((var(--ctl-h) - 15px) / 2); color: var(--muted); pointer-events: none; }
.picker-input { inline-size: 100%; padding-inline: 32px 30px; text-overflow: ellipsis; }
.picker-clear { position: absolute; inset-inline-end: 4px; inset-block-start: calc((var(--ctl-h) - 26px) / 2); inline-size: 26px; block-size: 26px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.picker-clear:hover { background: var(--panel-3); color: var(--ink); }
.picker-list { position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 4px); z-index: 60; min-inline-size: 100%; inline-size: max-content; max-inline-size: min(380px, 92vw); max-block-size: 320px; overflow: auto;
  margin: 0; padding: 4px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); }
.picker-opt { display: grid; padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer; }
.picker-opt small { color: var(--muted); font-size: 12px; }
.picker-opt.on { background: var(--accent-soft); }
.picker-opt[aria-selected="true"] .picker-l { font-weight: 700; }
.picker-all { color: var(--muted); }
.picker-none, .picker-more { padding: 8px 10px; color: var(--muted); font-size: 12.5px; }
.empty .row-actions.center { justify-content: center; }
/* the grouped app picker (new-client wizard, client page "Apps and settings") */
.app-group { display: grid; gap: 8px; }
.app-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px 18px; align-items: start; }
.app-row { display: grid; gap: 4px; min-inline-size: 0; }
.app-odoo { padding-inline-start: 50px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.app-mods { padding-inline-start: 50px; font-size: 12px; }
.app-mods summary { color: var(--muted); cursor: pointer; inline-size: max-content; max-inline-size: 100%; }
.app-mods-body { max-block-size: 220px; overflow: auto; margin-block-start: 4px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); }
.app-mods-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.app-mods-body li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; overflow-wrap: anywhere; }
.app-mods-body code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--muted); direction: ltr; unicode-bidi: isolate; }
.app-mods-head { margin-block: 6px 3px; font-weight: 600; color: var(--muted); }
.app-mods-head:first-child { margin-block-start: 0; }
.app-name { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.switch:has(input:disabled) { cursor: not-allowed; opacity: .65; }