/* FinHub — feature layout.
   Tokens, base elements (inputs, tables, buttons …) and shared components live in core/ui.css, loaded
   first. This file only arranges FinHub's own screens; it never redefines colours, radii or type —
   it reads the tokens. */

/* ---------- email / SMTP settings ---------- */
.smtp-mode { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 12px; font-size: var(--text-sm); background: var(--color-surface); transition: border-color var(--dur-fast), background var(--dur-fast); }
.smtp-mode.active { border-color: var(--color-brand); background: var(--color-brand-subtle); }
#view .panel form select { display: block; width: 100%; max-width: 280px; margin: 6px 0 12px; }
.smtp-dns .dns-rec { background: var(--color-surface-sunken); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); padding: 8px 10px; margin: 6px 0; }
.smtp-dns code { background: var(--color-surface-sunken); padding: 1px 5px; border-radius: 4px; font-size: var(--text-xs); color: var(--color-text); word-break: break-all; }

.shared-badge { display: inline-flex; vertical-align: -2px; color: var(--color-text-muted); cursor: default; }
.fam-badge { font-size: var(--text-xs); padding: 1px 7px; border-radius: var(--radius-sm); white-space: nowrap; background: var(--color-warning-subtle); color: var(--color-warning); }
.fam-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; padding: 4px 6px 4px 10px; background: var(--color-surface-sunken); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.fam-chip button { background: none; border: 0; color: var(--color-text-muted); padding: 0 3px; }
.fam-chip button:hover { color: var(--color-danger); }

/* ---------- dashboard ---------- */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); }
.dash-list { display: flex; flex-direction: column; }
.dash-row { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--color-border-subtle); font-size: var(--text-md); }
.dash-row:last-child { border-bottom: 0; }
.dash-row .dr-main { flex: 1; min-width: 0; }
.dash-row .dr-title { display: block; font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row .dr-sub { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 1px; }
.dash-row .dr-amt { font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); white-space: nowrap; }
a.dash-row { color: inherit; text-decoration: none; } a.dash-row:hover .dr-title { color: var(--color-brand); }
.attn { display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-surface-sunken); color: var(--color-text); text-decoration: none; font-size: var(--text-md); }
.attn:hover { background: var(--color-hover); text-decoration: none; }
.attn .attn-ico { width: 30px; height: 30px; border-radius: var(--radius-md); display: grid; place-items: center; flex-shrink: 0; }
.attn .attn-ico.warn { background: var(--color-warning-subtle); color: var(--color-warning); }
.attn .attn-ico.danger { background: var(--color-danger-subtle); color: var(--color-danger); }
.attn .attn-ico.info { background: var(--color-info-subtle); color: var(--color-info); }
.attn .attn-main { flex: 1; min-width: 0; } .attn .attn-sub { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.attn-list { display: grid; gap: var(--space-2); }
.ent-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.ent-card { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-4); cursor: pointer; transition: border-color var(--dur-fast); }
.ent-card:hover { border-color: var(--color-border-strong); }
.ent-card .name { font-weight: var(--weight-semibold); display: flex; align-items: center; gap: 8px; }
.ent-card .name::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ent-color, var(--color-brand)); }
.ent-card .type { color: var(--color-text-muted); font-size: var(--text-xs); text-transform: capitalize; }
.ent-card .nums { margin-top: 8px; font-size: var(--text-sm); color: var(--color-text-muted); display: flex; flex-direction: column; gap: 2px; }
.ent-card .nums b { font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); }

/* ---------- budgets ---------- */
.budget-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
.budget-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.budget-item .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.budget-item .cat { font-weight: var(--weight-semibold); }
.budget-item .ent { font-size: var(--text-xs); color: var(--color-text-muted); }
.bar { height: 6px; border-radius: var(--radius-full); background: var(--color-surface-sunken); overflow: hidden; }
.bar > div { height: 100%; border-radius: var(--radius-full); background: var(--color-success); transition: width .4s var(--ease); }
.bar > div.warn { background: var(--color-warning); } .bar > div.over { background: var(--color-danger); }
.budget-item .nums { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ---------- receipts & slips ---------- */
.rc-filebar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; font-size: var(--text-sm); }
.rc-preview { max-width: 100%; max-height: 240px; border-radius: var(--radius-md); border: 1px solid var(--color-border); display: block; margin: 0 auto 10px; }
.rc-status { font-size: var(--text-sm); color: var(--color-warning); min-height: 18px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.rc-status.done { color: var(--color-success); }
.att-link { text-decoration: none; }
.tx-slip-preview { margin: -4px 0 12px; }
.tx-slip-preview img { max-height: 160px; max-width: 100%; border-radius: var(--radius-md); border: 1px solid var(--color-border); display: block; }
.tx-slip-preview .file-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-text-secondary); background: var(--color-surface-sunken); border-radius: var(--radius-md); padding: 6px 10px; }
.slip-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); vertical-align: middle; cursor: pointer; margin-left: 4px; }
.slip-thumb:hover { border-color: var(--color-brand); }
.ocr-steps { display: flex; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---------- document status (legacy chips → badge look) ---------- */
.status-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: capitalize; background: var(--color-surface-sunken); color: var(--color-text-secondary); white-space: nowrap; }
.status-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-draft, .st-parked, .st-void, .st-expired { background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.st-sent, .st-building, .st-exploring { background: var(--color-info-subtle); color: var(--color-info); }
.st-paid, .st-accepted, .st-done, .st-invoiced { background: var(--color-success-subtle); color: var(--color-success); }
.st-declined, .st-cancelled, .st-overdue { background: var(--color-danger-subtle); color: var(--color-danger); }
.st-spark, .st-partial, .st-unpaid { background: var(--color-warning-subtle); color: var(--color-warning); }
.items-table td { padding: 4px; border-bottom: 0; }
.items-table .it-del, .de-line .it-del, .ri-line .it-del, .rcv-line .it-del { display: inline-grid; place-items: center; width: 28px; height: 28px; background: none; border: 0; color: var(--color-text-muted); border-radius: var(--radius-sm); }
.items-table .it-del:hover, .de-line .it-del:hover, .ri-line .it-del:hover, .rcv-line .it-del:hover { color: var(--color-danger); background: var(--color-danger-subtle); }
.inv-totals { text-align: right; margin-top: 10px; font-size: var(--text-md); color: var(--color-text-muted); }
.inv-totals b { color: var(--color-text); font-size: var(--text-lg); }

/* ---------- debts ---------- */
.plan-controls { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: flex-end; margin-bottom: 8px; }
.plan-controls label { font-size: var(--text-sm); font-weight: var(--weight-medium); display: grid; gap: 6px; }
.plan-controls input, .plan-controls select { min-width: 200px; }

/* ---------- tasks ---------- */
.task-add { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.task-add input[type=text] { flex: 1; min-width: 220px; }
.task-group h4 { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); margin: var(--space-5) 0 var(--space-2); }
.task-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 6px; }
.task-row.done { opacity: .55; } .task-row.done .t-title { text-decoration: line-through; }
.task-row .t-title { flex: 1; font-weight: var(--weight-medium); }
.task-row .t-due { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.task-row .t-due.overdue { color: var(--color-danger); font-weight: var(--weight-semibold); }
.prio { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.prio.high { background: var(--color-danger); } .prio.med { background: var(--color-warning); } .prio.low { background: var(--color-border-strong); }

/* ---------- ideas ---------- */
.idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.idea-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); cursor: pointer; transition: border-color var(--dur-fast); }
.idea-card:hover { border-color: var(--color-border-strong); }
.idea-card .i-title { font-weight: var(--weight-semibold); margin-bottom: 6px; }
.idea-card .i-body { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; max-height: 68px; overflow: hidden; white-space: pre-line; }
.idea-card .i-foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---------- calendar ---------- */
.cal-day { margin-bottom: var(--space-4); }
.cal-day h4 { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); margin: 0 0 6px; }
.cal-day h4.today { color: var(--color-brand); }
.cal-ev { display: flex; gap: 12px; align-items: baseline; padding: 9px 12px; margin-bottom: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-brand); border-radius: var(--radius-md); }
.cal-ev.google { border-left-color: var(--color-success); }
.cal-ev .ev-time { font-variant-numeric: tabular-nums; color: var(--color-text-muted); font-size: var(--text-sm); white-space: nowrap; min-width: 78px; }
.cal-ev .ev-title { font-weight: var(--weight-medium); flex: 1; }
.cal-ev .ev-meta { color: var(--color-text-muted); font-size: var(--text-xs); }

/* ---------- documents (paper preview stays paper-white in both themes) ---------- */
.doc-preview { min-height: 200px; max-height: 420px; overflow-y: auto; background: #fff; color: #1a2033; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px 22px; font-size: var(--text-md); line-height: 1.6; }
.doc-preview h1 { font-size: 20px; color: #12203c; border-bottom: 2px solid #2456d8; padding-bottom: 6px; margin: 0 0 10px; }
.doc-preview h2 { font-size: 14px; color: #2456d8; margin: 16px 0 6px; }
.doc-preview h3 { font-size: 13.5px; margin: 10px 0 4px; }
.doc-preview ul { margin: 4px 0; padding-left: 20px; } .doc-preview p { margin: 5px 0; } .doc-preview hr { border: 0; border-top: 1px solid #d5ddec; }

/* ---------- floating tools: assistant, phone, notes ---------- */
.chat-fab { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--color-brand); color: #fff; box-shadow: var(--shadow-md); transition: transform var(--dur-fast), background var(--dur-fast); }
.chat-fab:hover { background: var(--color-brand-hover); transform: translateY(-1px); }
/* the assistant button would cover a drawer's Save / Book buttons — step aside while one is open */
body:has(.drawer.open) .chat-fab { opacity: 0; pointer-events: none; }
/* on phones the bottom tab bar (z 60) would sit on a drawer's footer buttons (Save, Pay …) — hide it while one is open */
body:has(.drawer.open) .mobile-nav { display: none !important; }
.chat-drawer, .dialpad, .note-pad { position: fixed; right: 24px; z-index: 60; max-width: calc(100vw - 24px); background: var(--color-surface-raised); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); display: none; flex-direction: column; overflow: hidden; }
.chat-drawer { bottom: 84px; width: 390px; height: 560px; max-height: calc(100vh - 120px); }
.chat-drawer.open, .dialpad.open, .note-pad.open { display: flex; animation: fh-rise var(--dur-slow) var(--ease); }
.chat-head, .dp-head, .note-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--color-border); font-size: var(--text-md); }
.chat-head > span:first-child, .dp-head > span:first-child { display: flex; align-items: center; gap: 8px; }
.chat-model { color: var(--color-text-muted); font-size: var(--text-xs); }
.chat-close, .chat-clear, .note-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; background: none; border: 0; color: var(--color-text-muted); border-radius: var(--radius-sm); }
.chat-close:hover, .chat-clear:hover, .note-icon:hover { color: var(--color-text); background: var(--color-hover); }
.chat-msgs { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 86%; padding: 9px 13px; border-radius: var(--radius-lg); font-size: var(--text-md); line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.chat-msg.user { align-self: flex-end; background: var(--color-brand); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.bot { align-self: flex-start; background: var(--color-surface-sunken); border-bottom-left-radius: 4px; }
.chat-msg.thinking { color: var(--color-text-muted); font-style: italic; }
.chat-msg.error { background: var(--color-danger-subtle); color: var(--color-danger); }
.chat-hello { color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; padding: 20px 10px; line-height: 1.6; }
.chat-inputbar { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--color-border); }
.chat-inputbar input { flex: 1; min-width: 0; }
.chat-mic, .chat-lang { height: var(--control-h); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-md); padding: 0 10px; flex-shrink: 0; display: inline-grid; place-items: center; }
.chat-lang { font-size: 11px; font-weight: var(--weight-semibold); color: var(--color-text-secondary); padding: 0 8px; }
.chat-mic.listening { background: var(--color-danger); border-color: var(--color-danger); color: #fff; animation: mic-pulse 1.2s infinite; }
@keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(196, 48, 43, .45); } 50% { box-shadow: 0 0 0 6px rgba(196, 48, 43, 0); } }

.dialpad { bottom: 24px; width: 320px; z-index: 75; }
.dp-status { font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-sm); background: var(--color-surface-sunken); color: var(--color-text-muted); }
.dp-status.ready { background: var(--color-success-subtle); color: var(--color-success); }
.dp-status.calling, .dp-status.incall { background: var(--color-brand-subtle); color: var(--color-brand); }
.dp-status.error { background: var(--color-danger-subtle); color: var(--color-danger); }
.dp-body { padding: var(--space-4); display: flex; flex-direction: column; gap: 10px; }
.dp-display { width: 100%; text-align: center; height: 48px !important; font-size: 22px !important; letter-spacing: 1px; }
.dp-contact-search { position: relative; } .dp-contact-search input { width: 100%; }
.dp-contact-results { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; max-height: 132px; overflow-y: auto; }
.dp-contact-results button { text-align: left; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 7px 10px; color: var(--color-text); font-size: var(--text-sm); }
.dp-contact-results button:hover { border-color: var(--color-brand); }
.dp-contact-results .dp-cnum { color: var(--color-text-muted); font-size: var(--text-xs); }
.dp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dp-keys button { padding: 12px 0; font-size: 19px; font-weight: var(--weight-medium); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); line-height: 1; }
.dp-keys button:hover { background: var(--color-hover); }
.dp-keys button .dp-sub { display: block; font-size: 8px; letter-spacing: 1.5px; color: var(--color-text-muted); margin-top: 2px; font-weight: var(--weight-medium); }
.dp-actions, .dp-inc-actions { display: flex; gap: 8px; }
.dp-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border: 0; border-radius: var(--radius-md); font-weight: var(--weight-semibold); color: #fff; }
.dp-call, .dp-answer { background: var(--color-success); } .dp-hangup, .dp-reject { background: var(--color-danger); }
.dp-mute { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); flex: 0 0 auto; padding: 0 14px; }
.dp-mute.on { background: var(--color-warning); color: #1a2033; }
.dp-incoming { padding: var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-success-subtle); text-align: center; }
.dp-inc-who { font-weight: var(--weight-semibold); margin-bottom: 10px; }

.note-pad { bottom: 24px; width: 430px; height: 600px; max-height: calc(100vh - 90px); z-index: 70; }
.note-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.note-search { padding: 12px 14px 8px; } .note-search input { width: 100%; }
.note-list { flex: 1; overflow-y: auto; padding: 2px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.note-card { text-align: left; width: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 12px; color: var(--color-text); font: inherit; }
.note-card:hover { border-color: var(--color-border-strong); }
.note-card .n-title { font-weight: var(--weight-semibold); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-card .n-snip { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.45; max-height: 2.9em; overflow: hidden; }
.note-card .n-when { color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 6px; }
.note-empty { color: var(--color-text-muted); text-align: center; padding: 34px 16px; font-size: var(--text-sm); line-height: 1.7; }
.note-edit { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; overflow: hidden; }
.note-edit .n-back { align-self: flex-start; background: none; border: 0; color: var(--color-text-muted); font-size: var(--text-sm); padding: 2px 0; }
.note-edit .n-back:hover { color: var(--color-text); }
.note-edit .n-title-in { font-size: var(--text-lg) !important; font-weight: var(--weight-semibold); height: 40px !important; }
.note-edit .n-body-in { flex: 1; resize: none; line-height: 1.6; }
.note-editfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.note-when-lbl { color: var(--color-text-muted); font-size: var(--text-xs); }
.note-editfoot .actions { display: flex; align-items: center; gap: 10px; }

/* ---------- statement import ---------- */
.imp-summary { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 12px; }
.imp-summary b { color: var(--color-text); }
.imp-opening { background: var(--color-surface-sunken); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 12px; }
.imp-opening input[type=number] { width: 100%; max-width: 220px; }
.imp-opening-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 6px; line-height: 1.5; }
.imp-table-wrap { max-height: 340px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 6px; }
.imp-table { width: 100%; font-size: var(--text-sm); }
.imp-table th { position: sticky; top: 0; background: var(--color-surface); z-index: 1; padding: 7px 8px; }
.imp-table td { padding: 5px 8px; font-size: var(--text-sm); }
.imp-table tr.dup td { opacity: .5; }
.imp-table .imp-amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.imp-table select { height: 28px; font-size: var(--text-xs); max-width: 150px; }
.dup-tag { display: inline-block; font-size: 10px; color: var(--color-warning); background: var(--color-warning-subtle); border-radius: 4px; padding: 0 5px; margin-left: 4px; }
.pi-review td:first-child { box-shadow: inset 3px 0 0 var(--color-warning); }
.pi-review td { background: color-mix(in srgb, var(--color-warning-subtle) 60%, transparent); }

/* ---------- entity logo picker ---------- */
.logo-row { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.logo-preview { width: 96px; height: 72px; flex-shrink: 0; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--color-surface-sunken); color: var(--color-text-muted); font-size: var(--text-xs); overflow: hidden; padding: 6px; }
.logo-preview.has-img { border-style: solid; background: #fff; }
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* ---------- document editor (full-page quote / invoice / credit note) ---------- */
.doc-editor { max-width: 1000px; margin: 0 auto; padding-bottom: 84px; }
.de-head { margin-bottom: var(--space-5); }
.de-back { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.de-back:hover { color: var(--color-text); text-decoration: none; }
.de-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.de-title h2 { font-size: var(--text-2xl); letter-spacing: -.02em; }
.de-sub { color: var(--color-text-muted); font-size: var(--text-sm); }
.de-lock { margin-top: 12px; }
.de-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.de-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.de-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--space-4); flex-wrap: wrap; }
.de-card-head h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); display: flex; align-items: center; gap: 10px; }
.de-step { width: 22px; height: 22px; border-radius: 50%; background: var(--color-surface-sunken); color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); }
.de-hint { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-regular); }
.de-warn { color: var(--color-warning); font-size: var(--text-xs); }
.de-card label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.de-card label > input:not([type=checkbox]):not([type=radio]), .de-card label > select, .de-card label > textarea { display: block; width: 100%; margin-top: 6px; }
.de-card textarea { width: 100%; }
.de-card .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.de-manual { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.doc-editor [hidden], .modal [hidden] { display: none !important; }

.de-combo { position: relative; }
.de-combo-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; font-size: 0; }
.de-combo input { width: 100%; padding-left: 36px !important; margin-top: 0 !important; height: 40px !important; }
.de-combo-list, .gs-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 340px; overflow-y: auto; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 4px; }
.de-opt { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-md); line-height: 1.3; }
.de-opt:hover, .de-opt.hi { background: var(--color-hover); }
.de-opt-av { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--color-brand-subtle); color: var(--color-brand); font-weight: var(--weight-semibold); font-size: var(--text-xs); display: inline-flex; align-items: center; justify-content: center; }
.de-opt-new { color: var(--color-brand); font-weight: var(--weight-medium); border-top: 1px solid var(--color-border-subtle); margin-top: 4px; }
.de-opt-manual { color: var(--color-text-muted); font-size: var(--text-sm); }
.de-cust-card { display: flex; gap: 14px; align-items: center; margin-top: 12px; padding: 12px 14px; background: var(--color-surface-sunken); border-radius: var(--radius-lg); }
.de-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--color-brand-subtle); color: var(--color-brand); font-weight: var(--weight-semibold); display: flex; align-items: center; justify-content: center; }
.de-cust-body { flex: 1; min-width: 0; }
.de-cust-name { font-weight: var(--weight-semibold); font-size: var(--text-md); }
.de-cust-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 3px; }
.de-cust-acts { display: flex; gap: 6px; flex-shrink: 0; }

.de-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.de-details label { position: relative; }
.de-chips { display: flex; gap: 4px; margin-top: 6px; }
.de-chips button { height: 24px; padding: 0 8px; font-size: var(--text-xs); font-weight: var(--weight-medium); border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); }
.de-chips button:hover { color: var(--color-text); border-color: var(--color-border-strong); }

.de-items-card { padding-bottom: var(--space-4); container-type: inline-size; }
.de-lines-head, .de-line { display: grid; grid-template-columns: minmax(0, 1fr) 70px 116px 70px 92px 112px 28px; gap: 8px; align-items: center; }
.de-lines-head { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-medium); padding: 0 0 8px; border-bottom: 1px solid var(--color-border); }
.de-line { padding: 8px 0; border-bottom: 1px solid var(--color-border-subtle); }
.de-line .de-cell { margin: 0; }
.de-line input, .de-line select { margin-top: 0 !important; width: 100%; }
.de-line input.num { text-align: right; font-variant-numeric: tabular-nums; }
.de-cell-total { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); white-space: nowrap; padding-right: 4px; }
.de-novat .de-cell-tax { display: none; }
.de-novat .de-lines-head, .de-novat .de-line { grid-template-columns: minmax(0, 1fr) 70px 116px 70px 112px 28px; }
.de-nodisc .de-cell-disc { display: none !important; }
.de-nodisc .de-lines-head, .de-nodisc .de-line { grid-template-columns: minmax(0, 1fr) 70px 116px 92px 112px 28px; }
.de-nodisc.de-novat .de-lines-head, .de-nodisc.de-novat .de-line { grid-template-columns: minmax(0, 1fr) 70px 116px 112px 28px; }
.de-add { margin-top: 12px; width: 100%; border-style: dashed; background: transparent; box-shadow: none; color: var(--color-text-secondary); }
.de-add:hover { border-color: var(--color-brand); color: var(--color-brand); background: var(--color-brand-subtle); }
.de-cell-descr { position: relative; }

#deNotes details summary { cursor: pointer; font-size: var(--text-md); font-weight: var(--weight-semibold); list-style: none; display: flex; gap: 10px; align-items: center; }
#deNotes details summary::-webkit-details-marker { display: none; }
#deNotes details summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--color-text-muted); border-bottom: 1.5px solid var(--color-text-muted); transform: rotate(-45deg); transition: transform var(--dur); }
#deNotes details[open] summary::before { transform: rotate(45deg); }
#deNotes textarea { margin-top: 12px; }

.de-summary { margin: var(--space-4) 0 0 auto; max-width: 340px; padding-top: 6px; }
.de-sum-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: var(--text-md); color: var(--color-text-secondary); }
.de-sum-row b { color: var(--color-text); font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); }
.de-sum-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 4px; margin-top: 6px; border-top: 1px solid var(--color-border); font-weight: var(--weight-semibold); }
.de-sum-total b { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.de-sum-note { color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 8px; }
.de-switch { display: inline-flex !important; align-items: center; gap: 8px; cursor: pointer; font-size: var(--text-md); color: var(--color-text-secondary); font-weight: var(--weight-regular); margin: 0 !important; }
.de-switch input { display: none; }
.de-switch i { width: 34px; height: 20px; border-radius: var(--radius-full); background: var(--color-border-strong); position: relative; transition: background var(--dur); flex-shrink: 0; }
.de-switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: left var(--dur) var(--ease); }
.de-switch input:checked + i { background: var(--color-brand); }
.de-switch input:checked + i::after { left: 16px; }

.de-bar { position: sticky; bottom: calc(-1 * var(--space-10)); margin: var(--space-5) calc(-1 * var(--view-px)) calc(-1 * var(--space-10)); padding: 12px var(--view-px); z-index: 20;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--color-border); }
.de-bar-inner { max-width: 1000px; margin: 0 auto; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.de-bar-spacer { flex: 1; display: flex; align-items: center; justify-content: center; }
.de-bar-total { color: var(--color-text-muted); font-size: var(--text-sm); }
.de-bar-total b { color: var(--color-text); font-size: var(--text-lg); font-variant-numeric: tabular-nums; margin-left: 6px; }

.de-preview { width: 100%; height: min(72vh, 900px); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.de-done { text-align: center; padding: 6px 0; }
.de-done-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 10px; background: var(--color-success-subtle); color: var(--color-success); font-size: 0; }
.de-done p { color: var(--color-text-muted); margin: 8px 0 18px; }
.de-done-acts { display: flex; flex-direction: column; gap: 8px; }

@container (max-width: 700px) {
  .de-lines-head { display: none; }
  .de-line, .de-novat .de-line { grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 12px 0; position: relative; }
  .de-line .de-cell::before { content: attr(data-l); display: block; color: var(--color-text-muted); font-size: var(--text-xs); margin-bottom: 3px; }
  .de-cell-descr { grid-column: 1 / -1; padding-right: 32px; }
  .de-cell-total { text-align: left; font-size: var(--text-md); align-self: end; padding-bottom: 8px; }
  .de-line .it-del { position: absolute; top: 10px; right: 0; }
}
@container (max-width: 420px) { .de-line, .de-novat .de-line { grid-template-columns: 1fr 1fr; } }

/* ---------- receive payment / statements ---------- */
.pay-alloc-head { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 8px; font-size: var(--text-sm); }
.pay-alloc { border: 1px solid var(--color-border); border-radius: var(--radius-lg); max-height: 300px; overflow-y: auto; }
.pay-row { display: grid !important; grid-template-columns: 22px minmax(0, 1fr) auto 118px; gap: 10px; align-items: center; margin: 0 !important; padding: 10px 12px; border-bottom: 1px solid var(--color-border-subtle); cursor: pointer; }
.pay-row:last-child { border-bottom: 0; }
.pay-row.on { background: var(--color-brand-subtle); }
.pay-row .pa-doc { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; font-weight: var(--weight-medium); }
.pay-row .pa-doc .muted { font-size: var(--text-xs); font-weight: var(--weight-regular); }
.pay-row .pa-bal { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.pay-row .pa-amt { margin-top: 0 !important; text-align: right; }
.pay-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: var(--text-sm); color: var(--color-text-muted); }
.pay-sum b { color: var(--color-text); font-variant-numeric: tabular-nums; }
.pay-credit { color: var(--color-warning); }
.de-pay-table td { padding: 8px 6px; }
.stmt-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.stmt-controls label { margin: 0 !important; min-width: 150px; }
.stmt-chips { margin: 0 0 10px; }
.stmt-preview { height: min(58vh, 720px); }
.stmt-send { margin-top: 12px; }
.stmt-send summary { cursor: pointer; font-weight: var(--weight-semibold); font-size: var(--text-md); margin-bottom: 10px; }
.ss-list { max-height: 60vh; overflow-y: auto; }
.ss-totals { display: flex; gap: 18px; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 8px; }
.ss-totals b { color: var(--color-text); }
.modal-backdrop { z-index: 90; }   /* above the phone tab bar, the More sheet and the floating buttons */

/* ---------- inventory ---------- */
.inv-head { align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.inv-tabs { margin-bottom: 0; }
.inv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-low { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: var(--text-sm); }
.inv-chip { font-size: 10.5px; margin-left: 4px; }
.inv-row { cursor: pointer; }
.inv-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.inv-product .cards { margin-bottom: 14px; }
.inv-product .de-card { margin-bottom: 14px; }
.inv-serials { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.inv-sn { font-family: var(--font-mono); font-size: var(--text-xs); padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface-sunken); color: var(--color-text); }
.inv-sn.sold, .inv-sn.written_off { opacity: .5; text-decoration: line-through; }
.inv-sn.in_stock { border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border)); }
.inv-sn.picked { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.inv-serial-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.inv-h4 { margin: var(--space-4) 0 6px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.loc-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--color-border-subtle); }
.loc-row .loc-name { flex: 1; margin-top: 0 !important; }
.loc-row .check { margin: 0 !important; }
.loc-add { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.loc-add input { margin-top: 0 !important; }
.prod-incl { display: block; margin-top: 4px; font-weight: var(--weight-regular); font-size: var(--text-xs); color: var(--color-text-muted); }
.prod-serial { align-self: end; padding-bottom: 12px; }
.prod-opening summary, .prod-more summary { cursor: pointer; font-weight: var(--weight-medium); font-size: var(--text-sm); margin: 6px 0 10px; color: var(--color-brand); }
.prod-type { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: var(--space-2); }
.prod-type button { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); transition: border-color var(--dur-fast), background var(--dur-fast); }
.prod-type button .i { margin-top: 2px; color: var(--color-text-muted); }
.prod-type button b { display: block; font-weight: var(--weight-semibold); font-size: var(--text-md); }
.prod-type button .muted { font-size: var(--text-xs); }
.prod-type button:hover { border-color: var(--color-border-strong); }
.prod-type button.active { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.prod-type button.active .i { color: var(--color-brand); }
.opt { color: var(--color-text-muted); font-weight: var(--weight-regular); }
.form-block-title { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; margin: var(--space-5) 0 var(--space-2); }
.form-block-title:first-child { margin-top: 0; }
.modal textarea { display: block; width: 100%; margin-top: 6px; }
.combo-wrap { position: relative; }
.rcv-lines { border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-top: 4px; }
.rcv-line { display: grid; grid-template-columns: minmax(0, 1fr) 90px 130px 28px; gap: 10px; align-items: end; padding: 10px 12px; border-bottom: 1px solid var(--color-border-subtle); }
.rcv-line:last-child { border-bottom: 0; }
.rcv-line label { margin: 0 !important; }
.rcv-line .rcv-name { display: flex; flex-direction: column; align-self: center; }
.rcv-line .rcv-name .muted { font-size: var(--text-xs); }
.rcv-line .rl-sn-wrap { grid-column: 1 / -1; }
.inv-moves td { font-size: var(--text-sm); }
.cnt-scan input { font-size: 16px !important; }
.cnt-table textarea.cnt-sn { margin-top: 6px !important; font-family: var(--font-mono); font-size: var(--text-xs) !important; min-height: 32px; }
.cnt-table .cnt-qty { width: 96px; display: inline-block !important; margin: 0 !important; }
.cnt-line.cnt-done td:first-child b { color: var(--color-success); }
.cnt-flash td { background: var(--color-brand-subtle) !important; transition: background .3s; }
.it-plist { top: calc(100% - 2px); min-width: 320px; }
.it-plist-free { font-size: var(--text-xs); border-top: 1px solid var(--color-border-subtle); margin-top: 4px; }
.it-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; }
.it-meta:empty { display: none; }
.it-prod { font-size: var(--text-xs); color: var(--color-text-secondary); background: var(--color-surface-sunken); border-radius: var(--radius-sm); padding: 1px 8px; }
.it-unlink { background: none; border: 0; color: var(--color-text-muted); padding: 0 4px; }
.it-unlink:hover { color: var(--color-danger); }
.de-line .it-serials { flex: 1; min-width: 180px; height: 30px !important; font-size: var(--text-sm) !important; font-family: var(--font-mono); }
.it-restock { display: inline-flex !important; align-items: center; gap: 5px; font-size: var(--text-xs) !important; font-weight: var(--weight-regular) !important; }
#invQ { flex: 1; min-width: 240px; }

/* ---------- document designer ---------- */
.dd-entry { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-sunken); }
.dd-wrap { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; }
.dd-controls { max-height: 70vh; overflow-y: auto; padding-right: 6px; }
.dd-controls .kind-tabs { margin-bottom: 12px; }
.dd-controls .check { margin-bottom: 8px !important; font-size: var(--text-sm); }
.dd-note { font-size: var(--text-xs); margin: -4px 0 12px; color: var(--color-text-muted); }
.dd-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; }
.dd-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--color-border); }
.dd-sw.on { border-color: var(--color-text); }
.dd-swatches input[type=color] { width: 34px; height: 30px; padding: 0; border: 0; background: none; margin: 0 !important; }
.dd-type { margin-bottom: 10px; }
.dd-frame { height: min(68vh, 900px); }

/* ---------- recurring invoice editor ---------- */
.ri-sched { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ri-hint { font-size: var(--text-sm); margin: -4px 0 12px; color: var(--color-text-muted); }
.ri-lines-head, .ri-line { display: grid; grid-template-columns: minmax(0, 1fr) 60px 100px 60px 88px 100px 28px; gap: 6px; align-items: center; }
.ri-lines-head { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-medium); padding-bottom: 6px; border-bottom: 1px solid var(--color-border); }
.ri-line { padding: 6px 0; }
.ri-line input, .ri-line select { margin-top: 0 !important; width: 100%; }
.ri-line .num, .ri-tot { text-align: right; }
.ri-tot { font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); white-space: nowrap; }
.ri-foot { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 14px; }
.ri-total { color: var(--color-text-muted); } .ri-total b { color: var(--color-text); font-size: var(--text-lg); margin-left: 6px; }
.ri-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
.ri-mode { display: flex !important; gap: 8px; align-items: flex-start; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px; margin: 0 !important; cursor: pointer; }
.ri-mode:has(input:checked) { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.ri-mode > span { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
.ri-mode .muted { font-size: var(--text-xs); font-weight: var(--weight-regular); }

/* ---------- sign-in extras / self sign-up ---------- */
.auth-signup { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.auth-signup a { font-weight: var(--weight-medium); }
.su-wrap { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: var(--space-8) var(--space-4); background: var(--color-bg); }
.su-card { width: 1040px; max-width: 100%; }
.su-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-7); }
.su-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: var(--weight-bold); letter-spacing: -.02em; }
.su-brand img { width: 34px; height: 34px; object-fit: contain; }
.su-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-7); align-items: start; }
.su-main { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-7); }
.su-h1 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: -.02em; }
.su-h1 span { display: none; }
.su-lead { color: var(--color-text-muted); margin: 6px 0 var(--space-6); font-size: var(--text-md); }
.su-aside { position: sticky; top: var(--space-6); display: grid; gap: var(--space-3); }
.su-summary { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-5); }
.su-summary .sum-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--weight-medium); }
.su-summary .sum-plan { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 4px 0 2px; }
.su-summary .sum-plan b { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.su-summary .sum-price { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.su-summary .sum-desc { color: var(--color-text-muted); font-size: var(--text-sm); margin: 4px 0 var(--space-3); }
.su-summary ul { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 6px; font-size: var(--text-sm); }
.su-summary li { display: flex; gap: 8px; align-items: flex-start; } .su-summary li .i { color: var(--color-success); margin-top: 2px; }
.su-summary li.su-plus { color: var(--color-text-muted); }
.su-trust { font-size: var(--text-xs); color: var(--color-text-muted); display: grid; gap: 6px; padding: 0 var(--space-2); }
.su-trust div { display: flex; gap: 8px; align-items: center; }
.su-plans { display: grid; gap: 6px; margin: 0 0 var(--space-3); }
.su-plan-skel { height: 44px; border-radius: var(--radius-md); background: var(--color-surface-sunken); }
.su-plan { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; font: inherit; width: 100%; transition: border-color var(--dur-fast), background var(--dur-fast); }
.su-plan:hover { border-color: var(--color-border-strong); }
.su-plan.on { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.su-plan .radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); flex-shrink: 0; display: grid; place-items: center; }
.su-plan.on .radio { border-color: var(--color-brand); } .su-plan.on .radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand); }
.su-plan-name { font-weight: var(--weight-semibold); flex: 1; }
.su-plan-price { font-size: var(--text-sm); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.su-plan-desc, .su-plan ul { display: none; }
.su-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.su-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); }
.su-field i { font-style: normal; font-weight: var(--weight-regular); color: var(--color-text-muted); }
.su-field input { height: 40px; width: 100%; }
.su-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.su-check { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-secondary); }
.su-check input { margin-top: 2px; }
.su-btn { grid-column: 1 / -1; height: 42px; border: 0; border-radius: var(--radius-md); background: var(--color-brand); color: #fff; font-size: var(--text-md); font-weight: var(--weight-semibold); transition: background var(--dur-fast); }
.su-btn:hover { background: var(--color-brand-hover); }
.su-btn:disabled { opacity: .6; }
.su-small { grid-column: 1 / -1; color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.su-closed { background: var(--color-surface-sunken); border-radius: var(--radius-lg); padding: var(--space-4); }
.su-code { grid-column: 1 / -1; display: flex; gap: 8px; }
.su-code input { width: 48px; height: 56px; text-align: center; font-size: 24px; font-weight: var(--weight-semibold); padding: 0; }
#suStep2 .su-form { max-width: 460px; }
.su-error { margin-top: 12px; }
.su-ref { display: flex; gap: 8px; align-items: center; background: var(--color-success-subtle); border-radius: var(--radius-md); padding: 8px 12px; font-size: var(--text-sm); margin: 0 0 var(--space-4); }
.su-ref .i { color: var(--color-success); }

/* ---------- settings ---------- */
.set-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.set-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 1px; }
.set-nav a { display: flex; gap: 10px; align-items: center; height: 34px; padding: 0 10px; border-radius: var(--radius-md); color: var(--color-text-secondary); text-decoration: none; font-weight: var(--weight-medium); font-size: var(--text-md); }
.set-nav a .i { color: var(--color-text-muted); }
.set-nav a:hover { color: var(--color-text); background: var(--color-hover); text-decoration: none; }
.set-nav a.active { color: var(--color-brand); background: var(--color-brand-subtle); } .set-nav a.active .i { color: var(--color-brand); }
.set-nav .set-nav-group { font-size: 11px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin: var(--space-4) 10px 6px; }
.set-nav .set-nav-group:first-child { margin-top: 0; }
.set-body .panel { margin-bottom: var(--space-4); }
.set-sec[hidden] { display: none !important; }
.set-mobile-back { display: none; }
.prof-form label, .onb-card label { display: block; margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.prof-form label > input:not([type=checkbox]):not([type=radio]):not([type=file]), .onb-card label > input:not([type=checkbox]):not([type=radio]):not([type=file]),
.prof-form label > select, .onb-card label > select, .prof-form label > textarea, .onb-card label > textarea { display: block; width: 100% !important; max-width: none !important; margin: 6px 0 0 !important; }
.prof-form .grid2, .onb-card .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prof-logo { display: flex; gap: 14px; align-items: center; margin-bottom: var(--space-4); }
.prof-logo .logo-preview { width: 150px; height: 70px; }
.prof-logo label.btn { display: inline-flex !important; width: auto; margin: 0 !important; }
.prof-more { margin: 0 0 14px; }
.prof-more summary { cursor: pointer; color: var(--color-brand); font-weight: var(--weight-medium); font-size: var(--text-sm); margin-bottom: 10px; list-style: none; }
.prof-more summary::-webkit-details-marker { display: none; }
.prof-h { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text); }

.num-opt { display: flex !important; gap: 8px; align-items: center; font-weight: var(--weight-regular) !important; margin: 6px 0 10px !important; }
.num-opt b { font-weight: var(--weight-semibold); }
.num-auto { margin: 0 0 14px 26px; }
.num-auto.off { opacity: .45; pointer-events: none; }
.num-hint { font-size: var(--text-xs); margin: 4px 0 10px; color: var(--color-text-muted); }
.num-hint code { background: var(--color-surface-sunken); padding: 1px 5px; border-radius: 4px; }
.num-preview { background: var(--color-surface-sunken); border-radius: var(--radius-md); padding: 9px 12px; font-size: var(--text-sm); }
.de-num { position: relative; }
.de-gear { position: absolute; right: 6px; bottom: 5px; width: 26px; height: 26px; display: grid; place-items: center; background: none; border: 0; color: var(--color-text-muted); border-radius: var(--radius-sm); }
.de-gear:hover { color: var(--color-text); background: var(--color-hover); }
.de-num input { padding-right: 34px !important; }
.modal input[type=radio] { display: inline-block !important; width: auto !important; margin: 0 !important; flex: 0 0 auto; }

/* first-run profile */
.onb-wrap { position: fixed; inset: 0; z-index: 95; background: var(--color-bg); overflow-y: auto; padding: var(--space-8) var(--space-4); }
.onb-card { max-width: 720px; margin: 0 auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-7); }
.onb-card h2 { font-size: var(--text-2xl); text-align: left; }
.onb-card > .muted { text-align: left; margin: 6px 0 var(--space-6); }
.onb-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: var(--space-5); }

/* trial strip + notices (under the top bar) */
.plan-bar { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px var(--space-6); font-size: var(--text-sm); background: var(--color-brand-subtle); color: var(--color-text); border-bottom: 1px solid var(--color-border); }
.plan-bar .i { color: var(--color-brand); }
.plan-bar.urgent { background: var(--color-warning-subtle); } .plan-bar.urgent .i { color: var(--color-warning); }
.plan-bar a { font-weight: var(--weight-medium); }
#noticeBar:empty { display: none; }
#noticeBar { padding: var(--space-3) var(--space-6) 0; }
#noticeBar .fh-notice { margin: 0 auto var(--space-2); max-width: var(--content-max); }
.fh-notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: 10px 14px; border-radius: var(--radius-lg); background: var(--color-info-subtle); font-size: var(--text-sm); line-height: 1.5; text-align: left; color: var(--color-text); }
.fh-notice > .i { color: var(--color-info); margin-top: 2px; }
.fh-notice.lvl-warning { background: var(--color-warning-subtle); } .fh-notice.lvl-warning > .i { color: var(--color-warning); }
.fh-notice.lvl-maintenance { background: var(--color-danger-subtle); } .fh-notice.lvl-maintenance > .i { color: var(--color-danger); }
.fh-notice .fh-notice-body { flex: 1; min-width: 0; }
.fh-notice-x { display: inline-grid; place-items: center; width: 24px; height: 24px; background: none; border: 0; color: var(--color-text-muted); border-radius: var(--radius-sm); }
.fh-notice-x:hover { color: var(--color-text); background: var(--color-hover); }
.auth-card .fh-notice, .su-main .fh-notice { margin: 0 0 var(--space-4); }

/* global search results */
.gsearch .search-input input { height: 34px; border-radius: var(--radius-md) 0 0 var(--radius-md); }
.gsearch select { height: 34px; border-left: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--text-sm); color: var(--color-text-secondary); max-width: 118px; background-color: var(--color-surface-sunken); }
.gs-results { min-width: 340px; max-height: 440px; }
.gs-group { font-size: var(--text-xs); color: var(--color-text-muted); padding: 8px 10px 4px; font-weight: var(--weight-semibold); }
.gs-item { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-md); }
.gs-item .muted { font-size: var(--text-xs); }
.gs-item.hi, .gs-item:hover { background: var(--color-hover); }
.gs-amt { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: var(--weight-medium); }
.gs-empty { padding: 14px; color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }
.rep-h { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text); margin: 6px 0 12px; }

/* ---------- plan & billing ---------- */
.pl-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; margin-bottom: var(--space-4); }
.pl-head h2 { font-size: var(--text-2xl); margin: 2px 0 8px; }
.pl-usage { display: flex; flex-direction: column; gap: 10px; min-width: 240px; }
.pl-use div { display: flex; justify-content: space-between; font-size: var(--text-sm); margin-bottom: 4px; }
.pl-use span { color: var(--color-text-muted); }
.pl-use i { display: block; height: 6px; border-radius: var(--radius-full); background: var(--color-surface-sunken); overflow: hidden; }
.pl-use em { display: block; height: 100%; background: var(--color-brand); } .pl-use em.full { background: var(--color-warning); }
.pl-pending { background: var(--color-warning-subtle); border-radius: var(--radius-lg); padding: 10px 14px; margin-bottom: 12px; font-size: var(--text-md); display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pl-note { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 12px; }
.pl-table-wrap { overflow-x: auto; }
.pl-table { min-width: 620px; }
.pl-table th { font-size: var(--text-md); color: var(--color-text); vertical-align: top; padding: 14px 12px; width: 26%; white-space: normal; }
.pl-table th:first-child, .pl-table td:first-child { width: auto; }
.pl-table td { text-align: center; } .pl-table td:first-child { text-align: left; color: var(--color-text-secondary); }
.pl-table .cur { background: var(--color-brand-subtle); }
.pl-name { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.pl-price { margin: 4px 0; font-weight: var(--weight-semibold); font-size: var(--text-md); } .pl-price .muted { font-weight: var(--weight-regular); font-size: var(--text-xs); margin-left: 3px; }
.pl-desc { color: var(--color-text-muted); font-weight: var(--weight-regular); font-size: var(--text-xs); line-height: 1.4; min-height: 50px; margin-bottom: 8px; }
.pl-badge { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-medium); background: var(--color-brand); color: #fff; border-radius: var(--radius-sm); padding: 2px 8px; margin-bottom: 6px; }
.pl-yes { color: var(--color-success); } .pl-no { color: var(--color-text-muted); opacity: .6; }
.pl-head .status-chip { text-transform: none; }
.pl-adviser { display: flex; gap: 8px; align-items: flex-start; background: var(--color-success-subtle); border-radius: var(--radius-lg); padding: 10px 14px; margin-bottom: 12px; font-size: var(--text-md); }

/* ---------- help & support ---------- */
.sup-intro { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: var(--space-4); }
.sup-form { display: grid; gap: var(--space-3); } .sup-form label { display: grid; gap: 6px; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.sup-list tr.clickable { cursor: pointer; }
.sup-st { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-medium); background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.sup-st.warn { background: var(--color-warning-subtle); color: var(--color-warning); } .sup-st.ok { background: var(--color-success-subtle); color: var(--color-success); }
.sup-thread { display: grid; gap: 10px; }
.sup-msg { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 12px 14px; background: var(--color-surface); }
.sup-msg.you { background: var(--color-surface-sunken); border-color: transparent; margin-left: 40px; } .sup-msg.team, .sup-msg.assistant { margin-right: 40px; }
.sup-who { display: flex; gap: 8px; align-items: center; font-size: var(--text-sm); margin-bottom: 6px; } .sup-who .muted { margin-left: auto; font-size: var(--text-xs); }
.sup-body { white-space: pre-wrap; font-size: var(--text-md); line-height: 1.55; word-break: break-word; }
.sup-file { display: inline-flex; align-items: center; gap: 4px; margin: 8px 10px 0 0; font-size: var(--text-sm); }

/* ==========================================================================================
   Responsive feature tweaks
   ========================================================================================== */
@media (max-width: 1100px) {
  .de-bar-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
  .de-bar-spacer { grid-column: 1 / -1; order: -1; justify-content: space-between; }
  .de-bar .btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 1000px) {
  .dash-grid { grid-template-columns: 1fr; }
  .set-wrap { grid-template-columns: 1fr; }
  .set-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--color-border); padding-bottom: 8px; }
  .set-nav .set-nav-group { display: none; }
  .set-nav a { white-space: nowrap; flex-shrink: 0; }
  .su-layout { grid-template-columns: 1fr; }
  .su-aside { position: static; order: -1; }
}
@media (max-width: 900px) { .dd-wrap { grid-template-columns: 1fr; } .dd-controls { max-height: none; } }
@media (max-width: 767px) {
  #noticeBar { padding: var(--space-3) var(--space-4) 0; }
  .plan-bar { padding: 8px var(--space-4); }
  .ent-cards { grid-template-columns: 1fr 1fr; }
  .budget-list { grid-template-columns: 1fr; }
  .today-grid { grid-template-columns: 1fr !important; }
  .plan-controls input, .plan-controls select { min-width: 0; width: 100%; }
  .plan-controls label { flex: 1 1 100%; }
  .chat-drawer { right: 8px; left: 8px; width: auto; bottom: 150px; height: 64dvh; }
  .chat-fab { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
  .dialpad { right: 8px; left: 8px; bottom: 84px; width: auto; }
  .note-pad { right: 8px; left: 8px; bottom: 84px; width: auto; height: 72dvh; max-height: calc(100dvh - 150px); }
  .doc-editor { padding-bottom: 150px; }
  .de-card { padding: var(--space-4); }
  .de-card .grid2 { grid-template-columns: 1fr; }
  .de-cust-card { flex-wrap: wrap; } .de-cust-acts { width: 100%; } .de-cust-acts .btn { flex: 1; }
  .de-bar { margin: var(--space-5) calc(-1 * var(--view-px)) 0; padding: 10px var(--view-px); bottom: -28px; background: color-mix(in srgb, var(--color-surface) 97%, transparent); }
  .de-bar-inner { grid-template-columns: 1fr 1fr; }
  .de-summary { max-width: none; }
  .pay-row { grid-template-columns: 22px minmax(0, 1fr) 104px; }
  .pay-row .pa-bal { grid-column: 2; text-align: left; }
  .pay-row .pa-amt { grid-column: 3; grid-row: 1 / span 2; }
  .stmt-controls label { min-width: 0; flex: 1; }
  .rcv-line { grid-template-columns: 1fr 1fr 28px; } .rcv-line .rcv-name { grid-column: 1 / -1; }
  .it-plist { min-width: 0; }
  .de-dup { display: none; }
  .ri-sched, .ri-modes { grid-template-columns: 1fr 1fr; }
  .ri-lines-head { display: none; }
  .ri-line { grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--color-border-subtle); padding: 10px 0; }
  .ri-line .ri-descr { grid-column: 1 / -1; }
  .prof-form .grid2, .onb-card .grid2 { grid-template-columns: 1fr; }
  .onb-card { padding: var(--space-5) var(--space-4); }
  .su-wrap { padding: var(--space-5) var(--space-4); }
  .su-top { margin-bottom: var(--space-5); }
  .su-main { padding: var(--space-5) var(--space-4); }
  .su-form { grid-template-columns: 1fr; }
  .su-code input { width: 42px; height: 50px; font-size: 20px; }
  .prod-type { grid-template-columns: 1fr; }
  .sup-msg.you { margin-left: 12px; } .sup-msg.team, .sup-msg.assistant { margin-right: 12px; }
  .set-nav { margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4) 8px; }
}
@media (max-width: 430px) { .ent-cards { grid-template-columns: 1fr; } }

@media (max-width: 900px) { .bill-review { grid-template-columns: 1fr !important; } .bill-review iframe { height: 50vh !important; } }

/* settings: consistent form rhythm inside every section */
.set-body .panel > h3:not(:first-child), .set-body .panel form h3 { margin-top: var(--space-5); }
.set-body label:not(.check):not(.toggle):not(.btn):not(.smtp-mode):not(.num-opt) { display: grid; gap: 6px; margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-medium); max-width: 520px; }
.set-body label:not(.check) > input:not([type=checkbox]):not([type=radio]):not([type=file]), .set-body label:not(.check) > select, .set-body label:not(.check) > textarea { width: 100%; }
.set-body .check { margin-bottom: var(--space-3); }
.set-body .panel p.muted { font-size: var(--text-sm); }
.set-nav .set-chev { display: none; margin-left: auto; }
@media (max-width: 767px) {
  .set-wrap { gap: 0; }
  .set-wrap.at-root .set-body { display: none; }
  .set-wrap:not(.at-root) .set-nav { display: none; }
  .set-nav { flex-direction: column !important; overflow: visible !important; border: 0 !important; margin: 0 !important; padding: 0 !important; }
  .set-nav .set-nav-group { display: block !important; margin: var(--space-4) 4px var(--space-1); }
  .set-nav a { height: 48px; border-bottom: 1px solid var(--color-border-subtle); border-radius: 0; }
  .set-nav a.active { background: none; color: var(--color-text); } .set-nav a.active .i { color: var(--color-text-muted); }
  .set-nav .set-chev { display: inline-block; }
  .set-mobile-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-medium); }
}

/* ---------- payroll (assets/payroll.js) ---------- */
.pr-setup h3 { margin-bottom: var(--space-3); }
.pr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pr-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); }
.pr-steps li .muted { font-size: var(--text-sm); }
.pr-steps li.done { background: var(--color-surface-sunken); }
.pr-step-dot { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-brand-subtle); color: var(--color-brand); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.pr-steps li.done .pr-step-dot { background: var(--color-success-subtle); color: var(--color-success); }
.pr-runcard { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border-subtle); flex-wrap: wrap; }
.pr-runcard:first-of-type { border-top: 0; padding-top: 0; }
.pr-runcard-title { font-weight: var(--weight-semibold); }
.pr-attn { list-style: none; margin: 0; padding: 0; }
.pr-attn a { display: flex; align-items: center; gap: var(--space-2); padding: 10px 0; color: var(--color-text); text-decoration: none; border-top: 1px solid var(--color-border-subtle); }
.pr-attn li:first-child a { border-top: 0; padding-top: 0; }
.pr-attn a > span { flex: 1; }
.pr-attn a > .i:first-child { color: var(--color-warning); }
.pr-attn a:hover span { text-decoration: underline; }
.pr-rules { font-size: var(--text-xs); margin: var(--space-4) 0 0; display: flex; gap: 6px; align-items: center; }

/* employee editor */
.pr-editor { max-width: 1180px; padding-bottom: 96px; }
.pr-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-4); align-items: start; }
.pr-editor-grid > .de-main:only-child { grid-column: 1 / -1; }
.pr-side { position: sticky; top: var(--space-4); }
.pr-est-title { font-weight: var(--weight-semibold); }
.pr-est-net { font-size: 28px; font-weight: var(--weight-semibold); letter-spacing: -.02em; margin: var(--space-3) 0; font-variant-numeric: tabular-nums; }
.pr-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--space-3); margin: 0; font-size: var(--text-sm); }
.pr-kv dt { color: var(--color-text-secondary); }
.pr-kv dt small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.pr-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pr-kv .pr-kv-sep { border-top: 1px solid var(--color-border-subtle); padding-top: 6px; font-weight: var(--weight-medium); color: var(--color-text); }
.pr-toggles { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; }
.pr-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pr-files li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: var(--text-sm); }
.pr-files li .muted { font-size: var(--text-xs); }
.pr-editor .de-bar-inner.pr-bar { max-width: 1180px; padding-right: 64px; }
.pr-bar > input, .pr-bar > .muted { flex: 1; min-width: 200px; }
.pr-bar > .muted { font-size: var(--text-sm); }

/* pay run */
.pr-run .de-title .row { gap: var(--space-2); }
.pr-stepper { list-style: none; display: flex; gap: 0; margin: 0 0 var(--space-5); padding: 0; counter-reset: s; overflow-x: auto; }
.pr-stepper li { flex: 1; min-width: 110px; display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-text-muted); padding: 10px 12px 10px 0; position: relative; white-space: nowrap; }
.pr-stepper li::after { content: ''; flex: 1; height: 2px; background: var(--color-border); border-radius: 2px; margin-left: 4px; }
.pr-stepper li:last-child::after { display: none; }
.pr-stepper li > span { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-strong); font-size: var(--text-xs); font-weight: var(--weight-semibold); background: var(--color-surface); }
.pr-stepper li.done { color: var(--color-text-secondary); }
.pr-stepper li.done > span { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.pr-stepper li.done::after { background: var(--color-success); }
.pr-stepper li.current { color: var(--color-text); font-weight: var(--weight-semibold); }
.pr-stepper li.current > span { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.pr-run .alert { margin-bottom: var(--space-3); }
.pr-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: var(--space-4); }
.pr-cards .value { font-size: 19px; }
.pr-net-band { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-brand-subtle); color: var(--color-brand); margin-bottom: var(--space-4); }
.pr-net-band b { font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pr-slip { width: 100%; margin-bottom: var(--space-4); }
.pr-slip td, .pr-slip th { padding: 7px 4px; font-size: var(--text-sm); }
.pr-slip .pr-slip-h th { text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); padding-top: var(--space-4); border-bottom: 1px solid var(--color-border); }
.pr-slip .pr-slip-t td { font-weight: var(--weight-semibold); border-top: 1px solid var(--color-border); }
.pr-workings { margin-bottom: var(--space-4); }
.pr-workings .pr-kv { margin: var(--space-3) 0; }
.pr-dsec { border-top: 1px solid var(--color-border-subtle); padding-top: var(--space-4); }
.pr-dsec .section-head h3 { font-size: var(--text-md); }
.pr-inputs { list-style: none; margin: 0; padding: 0; }
.pr-inputs li { display: flex; gap: var(--space-3); align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-border-subtle); font-size: var(--text-sm); }
.pr-inputs li > span:first-child { flex: 1; min-width: 0; }
.pr-warns { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: 6px; }
.pr-warns li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--radius-md); font-size: var(--text-sm); background: var(--color-warning-subtle); color: var(--color-text); }
.pr-warns li .i { color: var(--color-warning); margin-top: 2px; flex-shrink: 0; }
.pr-warns li.error { background: var(--color-danger-subtle); }
.pr-warns li.error .i { color: var(--color-danger); }

/* settings */
.pr-settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.pr-subnav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--space-4); }
.pr-subnav a { padding: 8px 12px; border-radius: var(--radius-md); color: var(--color-text-secondary); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.pr-subnav a:hover { background: var(--color-hover); color: var(--color-text); }
.pr-subnav a.active { background: var(--color-brand-subtle); color: var(--color-brand); }
.pr-units { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.pr-unit-list { list-style: none; margin: 0; padding: 0; }
.pr-unit-list li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--color-border-subtle); font-size: var(--text-sm); }
.pr-prev { font-size: var(--text-sm); background: var(--color-surface-sunken); border-radius: var(--radius-md); padding: var(--space-3); }
.pr-prev:empty { display: none; }
.pr-prev ul { margin: 6px 0 0; padding-left: 18px; }
.pr-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); }
.pr-roles > div { display: grid; gap: 2px; padding: var(--space-3); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); font-size: var(--text-sm); }
.pr-roles .muted { font-size: var(--text-xs); }

/* audit */
.pr-diff { font-size: var(--text-xs); line-height: 1.5; }
.pr-diff s { color: var(--color-text-muted); }
.pr-reason { display: flex; gap: 6px; align-items: flex-start; font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 4px; font-style: italic; }
.pr-audit { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.pr-audit li { border-left: 2px solid var(--color-border); padding-left: var(--space-3); }
.pr-audit li .row { justify-content: space-between; font-size: var(--text-sm); }
.pr-audit li .row .muted { font-size: var(--text-xs); }

@media (max-width: 1000px) {
  .pr-editor-grid { grid-template-columns: minmax(0, 1fr); }
  .pr-side { position: static; order: -1; }
  .pr-settings { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .pr-subnav { flex-direction: row; overflow-x: auto; position: static; border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-2); }
  .pr-subnav a { white-space: nowrap; }
}
@media (max-width: 767px) {
  .pr-editor .de-bar-inner.pr-bar { padding-right: 0; }
  .pr-steps li { grid-template-columns: 28px minmax(0, 1fr); }
  .pr-steps li > :last-child { grid-column: 2; justify-self: start; }
  .pr-run .de-title .row { width: 100%; }
  .pr-stepper li { min-width: 0; font-size: 0; gap: 0; padding-right: 4px; }
  .pr-stepper li.current { font-size: var(--text-xs); gap: 6px; flex: 0 0 auto; padding-right: 8px; }
  .pr-stepper li::after { min-width: 10px; }
  #peDirective { grid-template-columns: minmax(0, 1fr) !important; }
}
.pr-settings .form-section > h4:has(+ .form-grid) { margin-bottom: var(--space-3); }

/* payroll phase 2: leave, loans */
.pr-leave-bal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.pr-lb { display: grid; gap: 2px; text-align: left; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; transition: border-color var(--dur-fast); }
.pr-lb:hover { border-color: var(--color-brand); }
.pr-lb span { font-size: var(--text-xs); color: var(--color-text-secondary); }
.pr-lb b { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.pr-lb b.neg, .pr-editor .neg, #lvBal .neg, .drawer .neg { color: var(--color-danger); }
.pr-leave-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.pr-leave-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 8px 0; border-top: 1px solid var(--color-border-subtle); font-size: var(--text-sm); }
.pr-seg { margin-bottom: var(--space-4); }

/* toggles keep their switch layout inside dialogs, editor cards and panels (whose labels are display:block) */
.modal label.toggle, .de-card label.toggle, .panel label.toggle, .drawer label.toggle { display: inline-flex; margin: 0; }
.toggle .track { display: inline-block; }
.pr-seg > button { flex: 0 0 auto; white-space: nowrap; }

/* payroll phase 3: reports */
.pr-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.pr-report-card { display: grid; gap: 6px; align-content: start; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface);
  color: var(--color-text); text-decoration: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.pr-report-card:hover { border-color: var(--color-brand); box-shadow: var(--shadow-sm); text-decoration: none; }
.pr-report-card > .i { color: var(--color-brand); width: 20px; height: 20px; }
.pr-report-card span { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.4; }
.pr-report-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-2) 0 var(--space-4); }
.pr-report-head h2 { font-size: var(--text-2xl); letter-spacing: -.02em; }
.pr-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.pr-filters #rfDates { display: inline-flex; gap: 6px; align-items: center; }
.pr-filters #rfDates[hidden] { display: none; }
.pr-total-line { font-size: var(--text-sm); }
.pr-total-line b { font-variant-numeric: tabular-nums; }
#rpTable .pos { color: var(--color-success); } #rpTable .neg { color: var(--color-danger); }
.dt td.num { white-space: nowrap; }

/* payroll phase 4: import, setup wizard */
.pr-im-sum { display: flex; gap: 6px; flex-wrap: wrap; }
.pr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-surface-sunken); border: 1px solid var(--color-border-subtle); font-size: var(--text-xs); margin: 2px 2px 2px 0; }
.pr-wizard { max-width: 860px; }
.pr-wz-steps li a { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.pr-wz-steps li a > span { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-strong); font-size: var(--text-xs); font-weight: var(--weight-semibold); background: var(--color-surface); }
.pr-wz-steps li.done a > span { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.pr-wz-steps li.current a > span { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.pr-wz-body h3 { font-size: var(--text-lg); margin-bottom: 4px; }
.pr-wz-body > p.muted { margin-top: 0; }
.pr-wz-list { margin: 0 0 var(--space-4); padding-left: 18px; display: grid; gap: 6px; font-size: var(--text-sm); }
.pr-wz-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
button.pr-report-card { text-align: left; font: inherit; cursor: pointer; }

/* payroll phase 4b: compliance */
.pr-report-key { border-color: var(--color-brand); background: var(--color-brand-subtle); }
.pr-probs { margin: 4px 0 0; padding-left: 18px; }
.pr-eti-box { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.pr-eti-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: var(--space-3); }
.pr-eti-head .muted { font-size: var(--text-xs); }

/* bookings (assets/bookings.js) */
.bk-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; vertical-align: middle; }
.bk-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-2); border-top: 1px solid var(--color-border-subtle); cursor: pointer; border-radius: var(--radius-md); }
.bk-row:first-of-type { border-top: 0; }
.bk-row:hover, .bk-row:focus-visible { background: var(--color-hover); outline: none; }
.bk-row-time { display: flex; flex-direction: column; min-width: 64px; font-variant-numeric: tabular-nums; }
.bk-row-time span, .bk-row-main span { color: var(--color-text-muted); font-size: var(--text-sm); }
.bk-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bk-row-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-row-side { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bk-setup .bk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.bk-steps li { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; }
.bk-steps li > div { flex: 1; display: flex; flex-direction: column; }
.bk-steps li > div span { color: var(--color-text-muted); font-size: var(--text-sm); }
.bk-steps li > .i { color: var(--color-warning); }
.bk-steps li.done > .i { color: var(--color-success); }
.bk-steps li.done b { color: var(--color-text-muted); text-decoration: line-through; }
.bk-share { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.bk-share > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.bk-share > div:first-child span { overflow-wrap: anywhere; }
.bk-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.bk-toolbar .seg > button { white-space: nowrap; }
.bk-datepick { position: relative; display: inline-flex; align-items: center; font-size: var(--text-lg); cursor: pointer; padding: 0 var(--space-2); }
.bk-datepick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.bk-grid { --gut: 56px; overflow: hidden; }
.bk-scroll { overflow: auto; max-height: calc(100vh - 250px); }
.bk-head, .bk-body { display: grid; grid-template-columns: var(--gut) repeat(var(--cols), minmax(150px, 1fr)); min-width: calc(var(--gut) + var(--cols) * 150px); }
.bk-head { border-bottom: 1px solid var(--color-border); background: var(--color-surface); position: sticky; top: 0; z-index: 6; }
.bk-colhead { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border-left: 1px solid var(--color-border-subtle); min-width: 0; }
.bk-colhead div { display: flex; flex-direction: column; min-width: 0; }
.bk-colhead b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-colhead div span { color: var(--color-text-muted); font-size: var(--text-xs); }
.bk-colhead.today b { color: var(--color-brand); }
.bk-gutter { position: relative; background: var(--color-surface); }
.bk-head .bk-gutter { position: sticky; left: 0; z-index: 7; }
.bk-body .bk-gutter { position: sticky; left: 0; z-index: 5; }
.bk-gutter span { position: absolute; right: 8px; transform: translateY(-50%); font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.bk-gutter span:first-child { transform: none; }
.bk-col { position: relative; border-left: 1px solid var(--color-border-subtle); cursor: copy;
  background-image: repeating-linear-gradient(to bottom, var(--color-border-subtle) 0 1px, transparent 1px 36px); }
.bk-col.drop { background-color: var(--color-brand-subtle); }
.bk-appt { position: absolute; border-radius: var(--radius-sm); padding: 3px 6px; overflow: hidden; cursor: pointer; font-size: var(--text-xs); line-height: 1.3;
  background: color-mix(in srgb, var(--c) 16%, var(--color-surface)); border-left: 3px solid var(--c); color: var(--color-text); box-shadow: var(--shadow-xs); z-index: 2; }
.bk-appt b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.bk-appt span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text-secondary); }
.bk-appt:hover, .bk-appt:focus-visible { box-shadow: var(--shadow-md); z-index: 3; outline: none; }
.bk-appt[draggable="true"] { cursor: grab; }
.bk-appt.s-pending { border-left-style: dashed; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, var(--color-surface)) 0 6px, var(--color-surface) 6px 12px); }
.bk-appt.s-completed { opacity: .72; }
.bk-appt.s-no_show b, .bk-appt.s-cancelled b { text-decoration: line-through; }
.bk-appt.s-arrived, .bk-appt.s-in_progress { box-shadow: inset 0 0 0 1px var(--c); }
.bk-off { position: absolute; left: 0; right: 0; z-index: 1; background: repeating-linear-gradient(45deg, var(--color-surface-sunken) 0 6px, transparent 6px 12px); border-top: 1px dashed var(--color-border-strong); border-bottom: 1px dashed var(--color-border-strong); cursor: pointer; }
.bk-off span { font-size: var(--text-xs); color: var(--color-text-muted); padding: 2px 6px; display: block; }
.bk-now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--color-danger); z-index: 4; pointer-events: none; }
.bk-now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger); }
.bk-hint { margin-top: var(--space-2); font-size: var(--text-sm); }
.bk-av { width: 28px; height: 28px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; object-fit: cover; }
.bk-av.lg { width: 56px; height: 56px; font-size: 16px; }
.bk-row-inline { display: inline-flex; gap: var(--space-2); align-items: center; }
.bk-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bk-mh { padding: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; border-bottom: 1px solid var(--color-border); }
.bk-md { min-height: 104px; padding: 6px; border-left: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-md:hover { background: var(--color-hover); }
.bk-md.out { background: var(--color-surface-sunken); color: var(--color-text-muted); }
.bk-md.today .bk-mdn { background: var(--color-brand); color: #fff; border-radius: var(--radius-full); padding: 0 7px; align-self: flex-start; }
.bk-mdn { font-weight: 600; font-size: var(--text-sm); }
.bk-mi { font-size: var(--text-xs); border-left: 3px solid var(--c); padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-more { font-size: var(--text-xs); color: var(--color-text-muted); }
.bk-dhead { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-3); }
.bk-when { display: flex; flex-direction: column; margin-bottom: var(--space-3); }
.bk-when b { font-size: var(--text-lg); }
.bk-when span { font-size: 20px; font-variant-numeric: tabular-nums; }
.bk-kv { display: grid; gap: 6px; }
.bk-kv > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.bk-kv > div > span { color: var(--color-text-muted); flex: none; }
.bk-kv > div > b { text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.bk-pre { white-space: pre-line; }
.bk-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.bk-sec { border-top: 1px solid var(--color-border-subtle); padding-top: var(--space-3); margin-top: var(--space-3); }
.bk-sec h4 { margin: 0 0 var(--space-2); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.bk-sec textarea, .bk-cust input { width: 100%; }
.bk-list { list-style: none; padding: 0; margin: 0; }
.bk-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 8px 0; border-top: 1px solid var(--color-border-subtle); }
.bk-list li:first-child { border-top: 0; }
.bk-tl { list-style: none; padding: 0 0 0 14px; margin: 0; border-left: 2px solid var(--color-border); }
.bk-tl li { position: relative; padding: 0 0 10px 8px; display: flex; flex-direction: column; }
.bk-tl li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-brand); }
.bk-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); max-height: 180px; overflow: auto; }
.bk-slots .chip { cursor: pointer; font-variant-numeric: tabular-nums; }
.bk-slots .chip.active { background: var(--color-brand); color: var(--color-brand-contrast); border-color: var(--color-brand); }
.bk-cust { position: relative; }
.bk-cres { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 260px; overflow: auto; }
.bk-cres:empty { display: none; }
.bk-cres button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: none; cursor: pointer; color: var(--color-text); }
.bk-cres button:hover, .bk-cres button:focus-visible { background: var(--color-hover); }
.bk-cres button span { color: var(--color-text-muted); font-size: var(--text-sm); }
.bk-chosen { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.bk-chosen > div { display: flex; flex-direction: column; }
.bk-checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: 6px; }
.bk-inline { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.bk-dt { display: flex; gap: 6px; }
.bk-dt input { min-width: 0; }
.bk-week { display: grid; gap: 6px; }
.bk-wrow { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; padding: 2px 0; }
.bk-wrow > .toggle { width: 140px; }
.bk-wt, .bk-wb { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bk-wrow input[type=time] { width: 112px; min-width: 0; }
.bk-wrow.off .bk-wt, .bk-wrow.off .bk-wb { opacity: .35; pointer-events: none; }
.bk-wb { color: var(--color-text-muted); font-size: var(--text-sm); }
.bk-settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.bk-stabs { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--space-4); }
.bk-stabs a { padding: 8px 12px; border-radius: var(--radius-md); color: var(--color-text-secondary); text-decoration: none; }
.bk-stabs a:hover { background: var(--color-hover); }
.bk-stabs a.active { background: var(--color-selected); color: var(--color-brand); font-weight: 600; }
.bk-banner { height: 64px; border-radius: var(--radius-md); object-fit: cover; }
.bk-click { cursor: pointer; }
.bk-click:hover { background: var(--color-hover); }
@media (max-width: 767px) {
  .bk-settings { grid-template-columns: 1fr; }
  .bk-stabs { flex-direction: row; overflow-x: auto; position: static; }
  .bk-stabs a { white-space: nowrap; }
  .bk-wrow { gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border-subtle); }
  .bk-wrow > .toggle { width: 100%; }
  .bk-md { min-height: 64px; }
  .bk-mi { display: none; }
  .bk-toolbar .spacer { display: none; }
}

/* debtors manager (assets/debtors.js; reuses .bk-* list / timeline styles) */
.dm-card-btn { text-align: left; cursor: pointer; font: inherit; color: inherit; border: 1px solid var(--color-border); }
.dm-card-btn:hover, .dm-card-btn.active { border-color: var(--color-brand); }
.dm-age { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-3); margin-bottom: var(--space-4); }
.dm-age-b { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); background: none; cursor: pointer; font: inherit; color: inherit; text-align: left; min-width: 0; }
.dm-age-b:hover { background: var(--color-hover); }
.dm-age-b.active { border-color: var(--color-brand); background: var(--color-selected); }
.dm-age-l { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.dm-age-bar { display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--color-surface-sunken); overflow: hidden; margin-top: 4px; }
.dm-age-bar i { display: block; height: 100%; background: var(--color-text-muted); }
.dm-age-bar i.t-warning { background: var(--color-warning); }
.dm-age-bar i.t-danger { background: var(--color-danger); }
.dm-filter { display: flex; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-3); }
.dm-od { color: var(--color-danger); }
.dm-mini { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.dm-h { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-md); }
.dm-preview { width: 100%; height: 420px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.dm-run { border-top: 1px solid var(--color-border-subtle); padding: var(--space-2) 0; }
.dm-run:first-child { border-top: 0; }
.dm-run summary { display: flex; justify-content: space-between; gap: var(--space-3); cursor: pointer; flex-wrap: wrap; }
.dm-stage { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.dm-stage summary { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; flex-wrap: wrap; }
.dm-stage[open] summary { margin-bottom: var(--space-3); }
.dm-stage .dm-days { width: 64px; }
.dm-stage textarea, .dm-stage .dm-subj { width: 100%; }
@media (max-width: 767px) { .dm-age { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* VAT201 returns (assets/vat.js) */
.vr-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.vr-due { display: flex; flex-direction: column; align-items: flex-end; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-warning-subtle); }
.vr-due.refund { background: var(--color-success-subtle); }
.vr-due span { font-size: var(--text-sm); color: var(--color-text-secondary); }
.vr-due b { font-size: 26px; }
.vr-due small { color: var(--color-text-muted); }
.vr-tab thead th { background: var(--color-surface-sunken); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: .05em; }
.vr-tab .vr-no { width: 56px; font-weight: 700; color: var(--color-text-secondary); }
.vr-tab .vr-total td { background: var(--color-selected); font-weight: 600; }
.vr-tab input.vr-in { width: 130px; text-align: right; }