:root {
  color-scheme: light;
  --bg: #f6f3f1;
  --panel: #ffffff;
  --ink: #1f1a24;
  --ink-2: #3d3642;
  --muted: #71697a;
  --line: #e8e1e5;
  --line-2: #f1ecef;
  --brand: #7a2e5c;
  --brand-ink: #5e2146;
  --brand-soft: #f7ebf2;
  --rose: #c07a80;
  --side: #26141f;
  --side-2: #3a2130;
  --ok: #147a3b;
  --ok-soft: #e7f6ec;
  --warn: #b45309;
  --warn-soft: #fdf3e3;
  --bad: #b91c1c;
  --bad-soft: #fdecec;
  --info: #1d4ed8;
  --info-soft: #e8efff;
  --surface:var(--panel); --surface-2:var(--line-2); --on-brand:#fff;
  --control-border:#918795; --border:var(--control-border); --hover-surface:var(--brand-soft);
  --focus-ring:var(--brand); --focus-halo:color-mix(in srgb,var(--brand) 18%,transparent);
  --nav-text:#e3d5de; --nav-muted:#c6b5c1; --nav-heading:#fff;
  --nav-active:color-mix(in srgb,var(--rose) 24%,var(--side)); --overlay:rgba(24,16,23,.6);
  --confirmed:#7a2e5c; --confirmed-soft:#f7ebf2; --on-success:#fff; --on-error:#fff;
  --wa:#177b3b; --wa-hover:#12632f; --on-wa:#fff;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(31, 26, 36, .05), 0 4px 16px rgba(31, 26, 36, .05);
  --interaction-duration: 180ms;
  --interaction-ease: ease-out;
  --interaction-shadow: 0 3px 12px rgba(31, 26, 36, .10);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans Tamil", "Helvetica Neue", Arial, sans-serif;
}

/* Financial reconciliation keeps independent verification separate from ERP consistency. */
.fr-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 16px; }
.fr-heading h3 { font-size:22px; }
.fr-heading p, .fr-layout .card-h p, .fr-overall .card-h p { margin:4px 0 0; }
.fr-overall { margin-bottom:16px; }
.fr-summary { grid-template-columns:repeat(3,minmax(0,1fr)); padding:0 16px 16px; gap:12px; }
.fr-summary .kpi { box-shadow:none; border:1px solid var(--line-2); background:var(--panel); padding:16px; }
.fr-summary .kpi .value { color:var(--ink); font-size:23px!important; margin:6px 0; }
.fr-layout { display:grid; grid-template-columns:minmax(0,2.15fr) minmax(260px,1fr); gap:16px; align-items:start; }
.fr-layout>section,.fr-layout>div { min-width:0; }
.fr-progress-heading,.fr-progress-counts { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.fr-progress-heading strong { font-size:13px; }
.fr-progress progress { width:100%; height:7px; margin:12px 0 8px; accent-color:var(--brand); }
.fr-progress-methods { list-style:none; margin:10px 0; padding:0; }
.fr-progress-methods li { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid var(--line-2); font-size:12px; }
.fr-progress-methods small { display:block; font-size:10px; margin-top:3px; }
.fr-progress-methods .badge { white-space:normal; text-align:right; flex:none; }
.fr-progress .fr-status-values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.fr-progress .fr-status-values>div { display:block; min-width:0; padding:0; border:0; }
.fr-progress .fr-status-values dt { font-size:11px; }
.fr-progress .fr-status-values dd { text-align:left; margin-top:4px; overflow-wrap:anywhere; }
.fr-consistency-line { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.fr-integrity-checks { margin-top:16px; }
.fr-integrity-checks .reconciliation-metrics { margin-top:0; }
#financial-consistency-details>summary { display:inline-block; margin-top:10px; color:var(--sd-primary-text,var(--brand)); }
.fr-main,.fr-aside { display:grid; gap:16px; min-width:0; align-items:start; align-content:start; }
.fr-transactions { grid-column:1/-1; min-width:0; }
.fr-layout .fr-transactions table.t.fr-transaction-table td[data-label="Date"],.fr-layout .fr-transactions table.t.fr-transaction-table td[data-label="Invoice"],.fr-layout .fr-transactions table.t.fr-transaction-table td[data-label="Status"] { white-space:nowrap; }
.fr-transactions .fr-transaction-table td[data-label="Date"] { font-size:11px; }
.fr-transaction-pagination { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; border-top:1px solid var(--line-2); }
.fr-transaction-pagination>div>small { display:block; margin-top:3px; }
.fr-transaction-pagination>div { order:1; }
.fr-transaction-pagination [data-transaction-status] { flex-basis:100%; order:3; }
.fr-transaction-pagination [data-transaction-status]:empty { display:none; }
.fr-transaction-pagination label.fr-page-size { display:flex; flex-direction:row; align-items:center; gap:8px; margin:0; white-space:nowrap; font-size:12px; }
.fr-page-size select { width:70px; }
.fr-page-buttons { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-left:auto; order:2; }
.fr-layout .card { box-shadow:var(--shadow); }
.fr-layout .card-h { padding:16px; gap:12px; align-items:start; }
.fr-layout .card-h h3 { font-size:15px; }
.fr-mode { width:170px; flex:none; margin:0; }
.fr-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; padding:0 16px 12px; }
.fr-actions [data-latest] { margin-right:auto; }
.fr-note { margin:10px 16px 14px; }
.fr-table { font-size:12px; table-layout:fixed; width:100%; }
.fr-layout table.t.fr-table th { width:auto; font-size:11px; color:var(--muted); background:var(--line-2); text-transform:none; letter-spacing:0; }
.fr-layout table.t.fr-table td,.fr-layout table.t.fr-table th { padding:10px 8px; overflow-wrap:anywhere; white-space:normal; }
.fr-table small { display:block; font-size:10px; margin-top:3px; }
.fr-table .badge { white-space:normal; }
.fr-status-values { margin:16px 0; }
.fr-status-values>div { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-2); }
.fr-status-values dt { color:var(--muted); font-size:12px; }
.fr-status-values dd { margin:0; text-align:right; font-weight:700; }
.fr-history-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; width:100%; border:0; border-bottom:1px solid var(--line); padding:12px 0; text-align:left; color:var(--ink); background:transparent; font:inherit; cursor:pointer; }
.fr-history-row:hover { background:var(--surface-2); }
.fr-history-row small { display:block; font-size:11px; color:var(--muted); margin-top:4px; }
.fr-history-row>span:last-child { font-size:12px; }
.fr-pager { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px; }
.fr-entry { border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin:12px 0; min-width:0; }
.fr-entry legend { font-weight:600; padding:0 6px; }
.fr-entry-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.fr-entry [data-settlement-fields] { grid-column:1/-1; }
.fr-entry [hidden] { display:none; }
.fr-entry input[type=checkbox] { width:auto; }
.fr-warning { color:var(--warn); background:var(--warn-soft); padding:12px; border-radius:var(--radius); }
.fr-customer-ledgers { margin-top:20px; }
.report-benefits { margin-top:16px; }
.report-benefits .reconciliation-activity-grid { margin-top:0!important; align-items:start; }
#financial-consistency-details>summary { cursor:pointer; font-size:12px; color:var(--muted); }
#financial-consistency-details[open]>summary { margin-bottom:10px; }
.fr-customer-ledgers>p { margin:6px 0 14px; }
.fr-operating-filters { margin-bottom:16px; }
.fr-heading { margin:4px 0 12px; }
.fr-heading h3 { font-size:21px; }
.fr-overall .card-h,.fr-layout .card-h { padding:13px 16px; }
.fr-summary { padding-bottom:14px; }
.fr-summary .kpi { padding:13px 16px; }
.fr-summary .kpi .value { font-size:22px!important; }
.fr-status-values { margin:9px 0; }
.fr-status-values>div { padding:10px 0; }
.fr-layout [data-verification-status]>p { margin:9px 0 0; }
.fr-layout table.t.fr-table td,.fr-layout table.t.fr-table th { padding:8px; }
.fr-history-row { gap:6px; padding:10px 0; }
.fr-ledger-summaries { display:grid; gap:12px; }
.fr-ledger-details>summary { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; font-weight:600; list-style:none; }
.fr-ledger-details>summary::-webkit-details-marker { display:none; }
.fr-ledger-details>summary::after { content:'+'; color:var(--sd-primary-text,var(--brand)); font-size:20px; }
.fr-ledger-details[open]>summary::after { content:'−'; }
.fr-ledger-details>summary small { display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:400; }
.fr-ledger-details>summary:focus-visible { outline:2px solid var(--focus-ring); outline-offset:-3px; border-radius:var(--radius); }
.fr-ledger-details #wallet-funding-summary { border:0; margin-top:0!important; box-shadow:none; }
.fr-ledger-details #financial-activity-cards { padding:0 14px 14px; }
.fr-ledger-details .reconciliation-activity-grid { margin-top:0!important; }
.payment-verification-modal { width:min(100%,760px); max-width:760px!important; }
.payment-verification-modal .modal-b { padding:16px 20px; }
.payment-verification-modal .modal-f { padding:12px 20px; background:var(--panel); flex:none; }
.payment-verification-modal [hidden] { display:none!important; }
.pv-context,.pv-method-heading,.pv-method-nav,.pv-method-buttons,.pv-footer-row,.pv-footer-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.pv-context>div { display:grid; gap:3px; }
.pv-context { padding-bottom:14px; border-bottom:1px solid var(--line); }
.pv-method-nav { padding:14px 0; align-items:flex-end; }
.pv-method-nav .f { margin:0; }
.pv-method-buttons { flex:none; padding-bottom:1px; }
.pv-method-buttons .btn { width:32px; padding:6px; }
.pv-method-heading { margin-bottom:10px; flex-wrap:wrap; }
.pv-method-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.pv-method-summary>div { display:grid; gap:5px; background:var(--line-2); border-radius:8px; padding:10px 12px; }
.pv-method-summary span { color:var(--muted); font-size:11px; }
.pv-method-summary strong { font-size:16px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.pv-entry-status { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin:10px 0; }
.payment-verification-modal .fr-entry { border:0; padding:0; margin:0; }
.payment-verification-modal .fr-entry legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.payment-verification-modal .fr-entry-grid { gap:10px 14px; }
.payment-verification-modal .f { font-size:12px; }
.payment-verification-modal textarea { min-height:54px; resize:vertical; }
.pv-cash-result { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; grid-column:1/-1; padding:10px 12px; border-radius:8px; background:var(--surface-2); }
.pv-settlement-toggle,.pv-confirm { margin:0; padding:10px 0; }
.pv-settlement-toggle { grid-column:1/-1; }
.pv-confirm input { flex:none; }
.pv-advanced { border-top:1px solid var(--line); padding:10px 0; }
.pv-advanced summary { font-size:12px; color:var(--muted); cursor:pointer; }
.pv-advanced[open] summary { margin-bottom:10px; }
.pv-digest { overflow-wrap:anywhere; }
.pv-footer { width:100%; display:grid; gap:8px; }
.pv-footer .f { margin:0; }
.pv-footer [data-error]:empty { display:none; }
.pv-footer [data-error] { color:var(--bad); font-size:12px; }
.pv-footer-row { flex-wrap:wrap; }
.pv-footer-actions { margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.pv-footer [data-ready-summary] { flex:1; min-width:150px; }
@media(max-width:640px) {
  .fr-transactions .fr-transaction-table colgroup { display:none; }
  .fr-layout .fr-transactions table.t.fr-transaction-table td[data-label] { white-space:normal; }
  .fr-transaction-pagination { gap:10px; padding:12px; }
  .fr-transaction-pagination>div { flex-basis:100%; order:-1; }
  .fr-page-buttons { width:100%; justify-content:flex-end; }
  .payment-verification-modal .modal-b,.payment-verification-modal .modal-f { padding:12px; }
  .pv-method-summary>div { padding:8px; }
  .pv-method-summary strong { font-size:14px; }
  .pv-method-nav { gap:8px; }
  .pv-method-buttons { gap:4px; }
  .pv-footer-actions { width:100%; }
  .fr-ledger-details #financial-activity-cards { padding:0 10px 10px; }
}
@media(max-width:1100px) { .fr-layout { grid-template-columns:minmax(0,1fr); } }
@media(max-width:1100px) { .fr-layout .fr-transactions table.t.fr-transaction-table td[data-label] { white-space:normal; } }
@media(max-width:640px) {
  .fr-summary,.fr-aside,.fr-entry-grid { grid-template-columns:minmax(0,1fr); }
  .fr-heading { align-items:flex-start; flex-wrap:wrap; }
  .fr-layout .card-h { flex-wrap:wrap; }
  .fr-mode { width:100%; }
  .fr-table thead { display:none; }
  .fr-table,.fr-table tbody,.fr-table tr,.fr-table td { display:block; width:100%; }
  .fr-table tr { padding:8px 12px; border-bottom:1px solid var(--line); }
  .fr-table td { border:0; padding:4px 0; text-align:left; }
  .fr-table td[data-label]::before { content:attr(data-label) ': '; color:var(--muted); font-size:11px; }
  .fr-table td.num { text-align:left; }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c171b; --panel: #292229; --surface: #292229; --surface-2: #332b32;
  --ink: #f4edf2; --ink-2: #e0d4dd; --muted: #bfb0bc;
  --line: #544650; --line-2: #3d323b;
  --control-border: color-mix(in srgb, var(--muted) 60%, var(--panel));
  --brand: #efa3ca; --brand-ink: #ffd2e9; --brand-soft: #462b3d; --on-brand: #321124;
  --ok: #83d6a0; --ok-soft: #183e2b; --warn: #f5c07c; --warn-soft: #45351e;
  --bad: #ff9b9b; --bad-soft: #4d292e; --info: #a6bdff; --info-soft: #283654;
  --confirmed:#efa3ca; --confirmed-soft:#462b3d; --on-success:#183e2b; --on-error:#321124;
  --wa:var(--ok); --wa-hover:var(--ok-soft); --on-wa:var(--ok-soft);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--sd-primary-text,var(--brand)); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.grid { display: grid; gap: 16px; align-items: stretch; }
.grid > .card, .grid > .kpi { align-self: stretch; }
.row:has(> .card) { align-items: stretch; }
.grid > *, .stack > *, .card, .card-b, .card-h > *, .row > * { min-width: 0; }
.row > *, .page-head > *, .card-h > * { max-width: 100%; }
.card-h { flex-wrap: wrap; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
/* Customer details retain the narrow profile/wide history columns, but their
   cards now participate in shared rows rather than independent vertical stacks. */
.customer-detail-cards { grid-auto-flow: row dense; }
.customer-detail-cards > .stack { display: contents; }
.customer-profile-column > .card { grid-column: 1; align-self: stretch; }
.customer-history-column > .card { grid-column: 2 / span 2; align-self: stretch; }
@media (max-width: 860px) {
  .customer-profile-column > .card, .customer-history-column > .card { grid-column: auto; }
}
.sales-daily, .sales-summary-cards { margin-block-start: 1rem; }
.sales-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 640px) {
  .sales-summary-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- shell ---------- */
.business-logo { display:inline-grid; place-items:center; flex:none; overflow:hidden; vertical-align:middle; }
.business-logo img { width:100%; height:100%; object-fit:contain; filter:none; mix-blend-mode:normal; }
.business-logo :is(img,span)[hidden] { display:none; }
.brandmark .business-logo.has-business-logo, .login-brand .business-logo.has-business-logo, :root[data-palette] .login-brand .business-logo.has-business-logo, .hero .business-logo.has-business-logo { background:transparent; }
.business-logo-preview { display:flex; align-items:center; min-height:96px; }
.settings-business-logo { width:96px; height:96px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); color:var(--ink); font-size:36px; }
.invoice-business-logo { width:64px; height:64px; margin-bottom:8px; color:#222; background:#f0f0f0; font-size:28px; }
.invoice.thermal .invoice-business-logo { width:40px; height:40px; margin-bottom:5px; font-size:22px; }
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--side); color: var(--nav-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brandmark { padding: 18px 18px 14px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.07); }
.brandmark .logo { width: 34px; height: 34px; border-radius: 10px; background: var(--brand); display: grid; place-items: center; font-weight: 700; color: var(--on-brand); font-size: 15px; }
.brandmark b { display: block; font-size: 14px; color: var(--nav-heading); }
.brandmark span { font-size: 11px; color: var(--nav-muted); }
.nav { padding: 10px 10px; overflow-y: auto; flex: 1; }
.nav .sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--nav-muted); padding: 14px 10px 6px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--nav-text); font-weight: 500; }
.nav a:hover { background: var(--side-2); text-decoration: none; }
.nav a.active { background: var(--nav-active); color: var(--nav-heading); box-shadow: inset 3px 0 0 var(--rose); }
.nav svg { width: 18px; height: 18px; flex: none; opacity: .9; }
.side-foot { padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.07); font-size: 12px; color: var(--nav-muted); flex-wrap: nowrap; gap: 4px; }
.side-foot b { color: var(--nav-heading); font-weight: 600; }
.profile-menu { position: relative; flex: 1; min-width: 0; }
.profile-trigger { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--nav-text);
  font: inherit; text-align: left; cursor: pointer; }
.profile-trigger:hover, .profile-trigger[aria-expanded="true"] { background: var(--side-2); }
.profile-trigger:focus-visible, .profile-popover button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.profile-identity { min-width: 0; display: block; }
.profile-identity b, .profile-identity span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.profile-popover { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 95;
  width: min(210px, calc(100vw - 28px)); padding: 5px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); box-shadow: 0 12px 32px rgba(0,0,0,.2); }
.profile-popover[hidden] { display: none; }
.profile-popover button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 7px; background: transparent; color: var(--ink); font: 400 13px var(--font);
  text-align: left; cursor: pointer; }
.profile-popover button:hover { background: var(--line-2); }
.profile-popover svg { width: 16px; height: 16px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { min-height: 60px; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 24px; position: sticky; top: 0; z-index: 20; }
.topbar h1 { font-size: 18px; font-weight: 600; }
.page-title-slot { display: flex; align-items: center; min-width: 0; flex: 1 1 160px; }
.page-heading-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.page-back { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px; background: var(--brand-soft); color: var(--sd-primary-text,var(--brand)); }
.page-back:hover { background: var(--line-2); color: var(--brand-ink); text-decoration: none; }
.page-back:active { background: var(--brand-soft); }
.page-back:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.page-title-slot h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.page-head.page-content-actions { justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.page-content-actions > .row { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.page-content-actions > .row:first-child:not(:last-child) { margin-right: auto; }
.page-content-actions .avatar { flex-shrink: 0; }
.notification-anchor { position: relative; }
.topbar-tools { display:flex; align-items:center; gap:4px; flex-shrink:0; }
#theme-toggle [data-theme-icon]:not([hidden]) { display:flex; }
#theme-toggle:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.notification-count { position: absolute; top: -4px; right: -5px; min-width: 17px; height: 17px;
  padding: 0 3px; border-radius: 9px; background: var(--bad); color: var(--on-error); font-size: 10px;
  line-height: 17px; text-align: center; }
.notification-count[hidden], .notification-panel[hidden] { display: none; }
.notification-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(360px, 88vw);
  max-height: min(460px, 75vh); overflow-y: auto; z-index: 100; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.16); }
.notification-heading { padding: 12px 14px; font-weight: 600; border-bottom: 1px solid var(--line); }
.notification-item { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 11px 14px;
  border: 0; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--ink);
  text-align: left; cursor: pointer; }
.notification-item:hover, .notification-item:focus-visible { background: var(--line-2); }
.notification-item.unread { border-left: 3px solid var(--brand); }
.notification-item span { font-size: 12px; }
.notification-item small { color: var(--ink-2); }
.topbar .menu-btn { display: none; }
.content { padding: 22px 24px 40px; width: 100%; min-width: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head > .row:last-child { margin-left: auto; justify-content: flex-end; flex-wrap: wrap; }
.invoice-filter-controls > .search { flex: 1 1 220px; }
.invoice-list-card { max-inline-size:84rem; container:invoice-list / inline-size; }
.invoice-list-card > .table-wrap:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
table.t.invoice-list-table { width:max-content; max-inline-size:100%; --table-cell-x:14px; }
table.t.invoice-list-table th.table-compact, table.t.invoice-list-table th.num { width:auto; }
.invoice-list-reference { inline-size:12rem; overflow-wrap:anywhere; }
.invoice-list-reference [data-benefits] { margin-block-start:4px; max-inline-size:100%; height:auto; min-height:28px; padding:4px 10px; white-space:normal; text-align:left; }
.invoice-customer-name { inline-size:fit-content; max-inline-size:14rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
table.t.invoice-list-table td.invoice-list-date { white-space:normal; min-inline-size:6.5rem; max-inline-size:10rem; }
.invoice-list-date > span { display:inline-block; white-space:nowrap; }
@container invoice-list (max-width:60rem) {
  table.t.invoice-list-table { --table-cell-x:10px; }
  .invoice-customer-name { max-inline-size:11rem; }
}
@container invoice-list (max-width:40rem) {
  table.t.invoice-list-table { --table-cell-x:8px; }
}
.grid.invoice-list-summary { grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); }
.invoice-list-summary .kpi { overflow-wrap:anywhere; }
.page-head h2 { font-size: 20px; }
.appointment-page-head { display:grid; grid-template-columns:max-content minmax(0,1fr) max-content; gap:8px; margin-bottom:10px; }
.appointment-page-head > .row.appointment-toolbar-actions { margin-left:0; gap:6px; flex-wrap:nowrap; }
.appointment-page-head > .appointment-status-summary { min-width:0; justify-content:center; margin:0; padding:0; }
@media(max-width:1199px) {
  .appointment-page-head { grid-template-columns:minmax(0,1fr) max-content; }
  .appointment-page-head > .appointment-status-summary { grid-column:1 / -1; grid-row:2; justify-content:flex-start; }
}
@media(max-width:699px) {
  .appointment-page-head { grid-template-columns:minmax(0,1fr); }
  .appointment-page-head > .row.appointment-toolbar-actions { grid-row:3; justify-content:flex-start; flex-wrap:wrap; }
}
.appointment-date-nav { flex-wrap:nowrap; gap:6px; min-width:0; }
.appointment-date-nav .btn { flex:none; min-height:34px; height:34px; }
.appointment-date-nav .icon-btn { width:34px; padding:0; }
.appointment-date-nav sd-date { width:156px; flex:0 1 156px; min-width:120px; }
.appointment-status-summary { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:0 0 10px; padding:2px 0; }
.appointment-status-filter { display:inline-flex; align-items:center; gap:5px; min-height:34px; padding:3px 7px; border:1px solid transparent; border-radius:99px; background:transparent; color:var(--ink-2); font:inherit; font-size:12px; font-weight:400; cursor:pointer; }
.appointment-status-filter:hover { background:var(--line-2); }
.appointment-status-filter[aria-pressed=true] { border-color:var(--brand); background:var(--brand-soft); }
.appointment-status-filter:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.appointment-filter-note { margin:0 0 10px; }
.appointment-list-table { table-layout:auto; }
table.t.appointment-list-table thead th { text-align:center; }
table.t.appointment-list-table th.num { width:auto; }
table.t.appointment-list-table tbody td:last-child { padding-right:12px; }
.appointment-list-value { display:block; width:fit-content; max-width:100%; margin-inline:auto; text-align:left; }
.appointment-list-stylist { display:block; min-width:0; max-width:100%; contain:inline-size; }
.appointment-list-stylist-group { display:flex; align-items:center; gap:6px; }
.appointment-list-stylist-group > .dot { flex:none; }
.appointment-list-stylist-group > span:last-child { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:1023px) {
  table.t.appointment-list-table { min-width:48rem; }
  table.t.appointment-list-table.has-branch { min-width:56rem; }
}

.account-settings { max-width: 64rem; }
.account-settings .account-tabs { flex-wrap: wrap; overflow: visible; gap: 0 4px; margin-bottom: 0; }
.account-tabs [role="tab"] { white-space: normal; text-align: left; border-radius: 6px 6px 0 0; }
.account-tabs [role="tab"]:hover { background: var(--brand-soft); color: var(--brand-ink); }
.account-tabs [role="tab"]:focus-visible, .account-settings [role="tabpanel"]:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
.account-settings [role="tabpanel"][hidden] { display: none; }
.account-settings p { margin: 6px 0 0; overflow-wrap: anywhere; }
.account-settings section > .btn { margin-top: 10px; }
.account-appearance { border: 0; padding: 0; margin: 0; min-width: 0; }
.account-appearance legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.account-appearance label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.account-appearance input { width: 18px; height: 18px; accent-color: var(--brand); }
.attendance-correction-history { display: grid; gap: 12px; padding-left: 20px; margin: 8px 0; overflow-wrap: anywhere; }
#attendance-correction-error { color: var(--bad); }
#attendance-correction-form [hidden], #attendance-save[hidden] { display: none; }
@media (max-width: 600px) {
  .account-settings .account-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .account-tabs [role="tab"] { padding: 8px 10px; }
}

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 400 13px var(--font); cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--hover-surface); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primary:hover { background: var(--sd-primary-hover,var(--brand-ink)); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: var(--on-success); }
.btn.danger { color: var(--bad); border-color: #f1c9c9; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--line-2); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.btn.lg { height: 46px; font-size: 15px; padding: 0 20px; }
.btn.wa { background: var(--wa); border-color: var(--wa); color: var(--on-wa); }
.btn.wa:hover { background: var(--wa-hover); }
.btn svg { width: 16px; height: 16px; }
.service-variant-option { display:grid; grid-template-columns:minmax(0,1fr) 10ch 10ch; gap:12px; text-align:left; }
.service-variant-option > :not(:first-child) { text-align:right; }
.icon-btn { width: 32px; height: 32px; padding: 0; }

label.f { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 400; color: var(--ink-2); }
label.f.inline { flex-direction: row; align-items: center; gap: 8px; }
input, select, textarea { font: 14px var(--font); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; height: 38px; padding: 0 11px; width: 100%; min-width: 0; }
textarea { height: auto; min-height: 76px; padding: 9px 11px; resize: vertical; }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--brand); }
input[type=color] { padding: 3px; width: 48px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--focus-halo); }
.password-field { display: block; position: relative; width: 100%; }
.password-field input { padding-right: 43px; }
.password-toggle { position: absolute; top: 1px; right: 1px; width: 38px; height: 36px; padding: 0; border: 0;
  border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.password-toggle:hover { background: var(--line-2); color: var(--ink); }
.password-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -3px; }
.password-toggle svg { width: 18px; height: 18px; pointer-events: none; }
.search { position: relative; }
.search input { padding-left: 34px; }
.search::before { content: ""; position: absolute; left: 11px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2371697a' stroke-width='2.2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.seg { display: inline-flex; background: var(--line-2); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font: 400 12.5px var(--font); color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.customers-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.customers-filters > #toolbar-new { margin-left: auto; }
.customers-search { flex: 2 1 20rem; min-width: min(100%,20rem); }
.customers-status { flex: 0 0 150px; }
.customers-filters input, .customers-filters select, .customers-filters > .btn { height: 38px; }
.customer-sort { margin: 0; min-width: 0; flex: 1 1 14rem; max-width: 20rem; white-space: nowrap; }
.customer-sort select { flex: 1; min-width: 0; }
.card-b.customer-filter-panel { border: 1px solid var(--line); border-radius: 9px; margin: 0 12px 12px; padding: 12px; container: customer-filters / inline-size; }
.customer-filter-panel[hidden] { display: none; }
.customer-filter-chevron { display: inline-flex; transform: rotate(90deg); }
#customer-filters-toggle[aria-expanded="true"] .customer-filter-chevron { transform: rotate(-90deg); }
#customer-filters-toggle:focus-visible, .customer-filter-panel button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.customer-filter-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.customer-filter-header h3 { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.customer-filter-header h3 svg { width: 17px; height: 17px; color: var(--sd-primary-text,var(--brand)); }
.customer-filter-header [hidden] { display: none; }
.customer-filter-header .btn { color: var(--sd-primary-text,var(--brand)); }
.customer-filter-sections { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.customer-filter-section { min-width: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.customer-filter-section > h3 { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: var(--surface-2); color: var(--brand-ink); font-size: 12px; font-weight: 600; }
.customer-filter-section > h3 svg { width: 16px; height: 16px; flex: none; color: var(--sd-primary-text,var(--brand)); }
.customer-filter-section-body { display: grid; gap: 12px; padding: 12px; align-items: start; }
.customer-filter-group { display: grid; gap: 5px; min-width: 0; }
.customer-filter-title { font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--ink-2); }
.customer-filter-controls { display: grid; align-content: end; min-width: 0; }
.customer-filter-controls label.f { font-weight: 400; color: var(--muted); }
.customer-filter-range .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.customer-filter-range .customer-filter-controls { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); column-gap: 8px; align-items: center; }
.customer-filter-range-separator { color: var(--muted); }
.customer-filter-range .customer-filter-errors { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 8px; }
.customer-filter-errors { display: grid; min-width: 0; }
.customer-filter-errors:not(:has(.customer-filter-error:not(:empty))) { display: none; }
.customer-filter-error:empty { display: none; }
.customer-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: 12px; }
.customer-filter-buttons { margin-left: auto; }
.customer-filter-help summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--muted); border-radius: 50%; }
.customer-filter-help summary::-webkit-details-marker { display: none; }
.customer-filter-help summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.customer-filter-help[open] { flex-basis: 100%; }
.customer-filter-help p { margin: .375rem 0 0; }
@container customer-filters (min-width: 48rem) {
  .customer-filter-sections { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@container customer-filters (min-width: 38rem) {
  .customer-filter-section-body { grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; }
  .customer-filter-section:has(.customer-filter-status) .customer-filter-section-body { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
.customer-filter-error { color: var(--bad); }
.branch-phone-error { color: var(--bad); }
.phone-control { display: grid; gap: 10px; min-width: 0; }
#brf .span3 { grid-column: 1 / -1; }
.f input.branch-phone-invalid { border-color: var(--bad); outline: 1px solid var(--bad); }
.activity-row-action { border: 0; padding: 0; background: none; color: var(--sd-primary-text,var(--brand)); font: inherit; text-align: left; cursor: pointer; }
.activity-row-action:hover { text-decoration: underline; }
.activity-row-action:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: .2rem; }
#financial-activity-cards section { min-width: 0; }
.financial-summary-grid, .reconciliation-metrics { display: grid; gap: .75rem; }
.reconciliation-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.financial-summary-cell { min-width: 0; padding: .75rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2, #faf9fb); display: flex; flex-direction: column; gap: .5rem; overflow-wrap: anywhere; }
.financial-summary-value, .financial-mode-values dd { text-align: right; font-variant-numeric: tabular-nums; }
.financial-summary-value { font-size: 1.05rem; }
.financial-summary-total { background: var(--surface-2); border-color: var(--line); }
.financial-summary-total .financial-summary-value { font-weight: 600; color: var(--sd-primary-text,var(--brand)); }
.reconciliation-count { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.reconciliation-count > span:first-child { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.wallet-funding-sections { display: grid; gap: 1rem; }
.wallet-funding-sections > section { min-width: 0; }
.wallet-funding-sections > section + section { border-top: 1px solid var(--line-2); padding-top: 1rem; }
.wallet-funding-sections h4 { margin: 0; font-size: .9rem; font-weight: 600; }
.wallet-funding-sections p { margin: .35rem 0 .75rem; }
.wallet-money-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.wallet-balances-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.financial-mode-values { margin: 0; display: grid; gap: .35rem; }
.financial-mode-values > div { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.financial-mode-values dd { margin: 0 0 0 auto; }
.wallet-subsection-heading { justify-content: space-between; margin-bottom: .75rem; flex-wrap: wrap; }
#wallet-funding-summary .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .reconciliation-metrics, .wallet-balances-grid { grid-template-columns: minmax(0, 1fr); }
}
#financial-activity-cards table.t .num { text-align: right; }
#financial-activity-cards tr:has([data-activity]):hover { background: var(--surface-2); }
#financial-activity-cards tr:has([data-activity]) { cursor: pointer; }
#financial-activity-cards [data-activity-detail] { border-top: 1px solid var(--line); overflow-anchor: none; }
#financial-activity-cards [data-activity-detail][hidden] { display: none; }
.customers-filters .seg { flex: 0 1 auto; max-width: 100%; flex-wrap: nowrap; align-items: center; overflow-x: auto; }
.customers-filters .seg button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; height: 32px; padding: 0 10px; line-height: 18px; border: 1px solid transparent; font-weight: 500; white-space: nowrap; }
.customers-filters .seg button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
@media (max-width: 540px) {
  .customers-search { flex-basis: 100%; max-width: none; }
  .customers-filters .seg { flex-basis: 100%; }
}

/* ---------- cards ---------- */
.card { background: var(--sd-card,var(--panel)); color:var(--sd-card-foreground,var(--ink)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-h { padding: 14px 16px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-h h3 { font-size: 14.5px; font-weight: 600; }
.card-b { padding: 16px; }
.card-b.flush { padding: 0; }
/* Option B: compact upper Dashboard only; secondary summaries retain their styling. */
.dashboard-heading { margin-bottom: 12px; gap: 12px; }
.dashboard-greeting { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dashboard-heading h2 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.dashboard-heading .muted { font-size: 12px; margin-top: 3px; }
.dashboard-greeting-accent { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); }
.dashboard-greeting-accent svg { width: 19px; height: 19px; }
.dashboard-range { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.dashboard-presets { display: flex; gap: 4px; flex-wrap: wrap; max-width: 100%; }
.dashboard-presets button { font: inherit; font-size: 12px; line-height: 1.3; min-height: 32px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-2); background: var(--panel); cursor: pointer; transition: background-color var(--interaction-duration), border-color var(--interaction-duration), box-shadow var(--interaction-duration); }
.dashboard-presets button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); box-shadow: 0 1px 3px rgba(31,26,36,.10); }
.dashboard-presets button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.dashboard-presets button:active { box-shadow: inset 0 0 0 1px var(--brand-ink); }
.dashboard-custom-range { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.dashboard-custom-range:empty { display: none; }
.dashboard-custom-range .f { width: 150px; margin: 0; }
.dashboard-custom-range input, .dashboard-custom-range .btn { height: 34px; }
.dashboard-kpi-layout { container: dashboard-kpis / inline-size; }
.dashboard-view .dashboard-primary-kpis {
  margin-top: 1rem;
  gap: .75rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  align-content: start;
}
/* A usable card needs about 14rem for icon, padding and readable financial
   content. Thresholds include the gaps; no auto-fit three-column state. */
@container dashboard-kpis (min-width: 28.75rem) {
  .dashboard-view .dashboard-primary-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container dashboard-kpis (min-width: 58.25rem) {
  .dashboard-view .dashboard-primary-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.dashboard-primary-kpis .kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: start; gap: .625rem; padding: .75rem; box-shadow: 0 1px 3px rgba(31,26,36,.04); }
.dashboard-kpi-content { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.dashboard-view .dashboard-primary-kpis .label { font-size: 12px; font-weight: 500; line-height: 1.45; }
.dashboard-view .dashboard-primary-kpis .value { font-size: clamp(20px, 1.7vw, 25px); font-weight: 400; margin: 0; line-height: 1.25; overflow-wrap: anywhere; }
.dashboard-view .dashboard-primary-kpis .sub { font-size: .75rem; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.dashboard-kpi-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; color: var(--sd-primary-text,var(--brand)); background: var(--brand-soft); }
.dashboard-kpi-icon svg { width: 18px; height: 18px; }
.dashboard-kpi-icon.collections, .dashboard-kpi-icon.profit { color: var(--ok); background: var(--ok-soft); }
.dashboard-kpi-icon.outstanding, .dashboard-kpi-icon.cogs { color: var(--warn); background: var(--warn-soft); }
.dashboard-kpi-icon.average { color: var(--info); background: var(--info-soft); }
@media (hover:hover) and (pointer:fine) { .dashboard-presets button:not([aria-pressed="true"]):hover { background: var(--brand-soft); border-color: var(--brand); } }
@media (max-width: 600px) {
  .dashboard-heading h2 { font-size: 19px; }
  .dashboard-custom-range { width: 100%; }
  .dashboard-custom-range .f { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion:reduce) { .dashboard-presets button { transition: none; } }
.kpi { padding: 16px; }
.kpi .label { font-size: 12px; color: var(--muted); font-weight: 400; }
.kpi .value { font-size: 26px; font-weight: 400; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi .sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.kpi .badge { max-width: 100%; white-space: normal; }
.advance-detail-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 16px; }
.advance-detail-summary > div { min-width: 0; }
.advance-detail-summary dt, .advance-detail-meta dt { color: var(--muted); font-size: 12px; font-weight: 600; }
.advance-detail-summary dd { margin: 4px 0 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.advance-detail-outstanding dd { color: var(--ink); font-weight: 750; }
.advance-detail-meta { margin: 0 0 12px; }
.advance-detail-meta dd { margin: 3px 0 0; font-size: 13px; font-weight: 600; }
.advance-recovery-heading { margin: 16px 0 8px; font-size: 14px; }
.advance-recovery-empty { padding: 8px 0 4px; }
.supplier-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: 0; }
.supplier-detail-grid > div { min-width: 0; }
.supplier-detail-grid .span2 { grid-column: 1 / -1; }
.supplier-detail-grid dt { color: var(--muted); font-size: 12px; font-weight: 600; }
.supplier-detail-grid dd { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) { .supplier-detail-grid { grid-template-columns: 1fr; } }
.payroll-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); }
.payroll-metric { min-width: 0; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); }
.payroll-metric span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.payroll-metric b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payroll-review { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 16px 0; padding: 7px 10px; border: 1px solid var(--warn-soft); border-radius: 8px; background: var(--warn-soft); color: var(--ink-2); font-size: 12px; }
.payroll-integrity-warning { margin: 10px 16px; padding: 9px 12px; border: 1px solid var(--warn-soft); border-radius: 8px; background: var(--warn-soft); color: var(--ink-2); font-size: 13px; display: grid; gap: 5px; }
.payroll-integrity-warning .badge { justify-self: start; }
.payroll-history-table tr[aria-current="true"] { background: var(--surface-2, #faf7f9); }
.payroll-table td { padding-top: 8px; padding-bottom: 8px; }
.delta.up { color: var(--ok); font-weight: 600; }
.delta.down { color: var(--bad); font-weight: 600; }
.empty { padding: 32px 16px; text-align: center; color: var(--muted); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; }
/* Category service tables share one column grid; other ERP tables retain their defaults. */
table.t.service-catalogue-table { table-layout:fixed; min-width:920px; }
table.t.service-catalogue-table th:nth-child(1) { width:44%; }
table.t.service-catalogue-table th:nth-child(2) { width:9%; }
table.t.service-catalogue-table th:nth-child(3) { width:12%; }
table.t.service-catalogue-table th:nth-child(4) { width:6%; }
table.t.service-catalogue-table th:nth-child(5) { width:8%; }
table.t.service-catalogue-table th:nth-child(6) { width:7%; }
table.t.service-catalogue-table th:nth-child(7) { width:8%; }
table.t.service-catalogue-table th:nth-child(8) { width:6%; }
table.t.service-catalogue-table td:is(:first-child,:nth-child(3),:nth-child(6),:nth-child(7)) { white-space:normal; overflow-wrap:anywhere; }
table.t.service-catalogue-table td:last-child .btn { min-width:28px; padding:6px; }
@media(max-width:860px) {
 table.t.service-catalogue-table { table-layout:auto; min-width:0; }
 table.t.service-catalogue-table th:nth-child(n) { width:auto; }
 table.t.service-catalogue-table td:nth-child(3) { white-space:nowrap; overflow-wrap:normal; }
}
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 500; padding: var(--table-cell-y, 10px) var(--table-cell-x, 12px); border-bottom: 1px solid var(--line); background: var(--surface-2); position: sticky; top: 0; }
table.t td { padding: var(--table-cell-y, 10px) var(--table-cell-x, 12px); border-bottom: 1px solid var(--line-2); vertical-align: middle; }
/* Semantic alignment must outrank the default header style. Headers, body and
   totals remain in one native table, including inside scrolling wrappers. */
table.t th.num, table.t td.num, table.t th.r, table.t td.r { text-align: right; font-variant-numeric: tabular-nums; }
table.t th.table-action, table.t td.table-action { text-align: right; }
table.t td.table-action > .row { justify-content: flex-end; }
table.t td.num input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
/* Intrinsic sizing hints: short columns keep their content width; unsized
   descriptive columns receive the remaining table width. These are not
   fixed percentages of the finished layout and may grow for large values. */
table.t th.num, table.t th.r, table.t th.table-action,
table.t th.table-compact, table.t col.table-compact { width: 1%; }
table.t th.num, table.t th.r, table.t td.num, table.t td.r,
table.t .table-compact, table.t .table-action { white-space: nowrap; }
table.t th.table-action-center, table.t td.table-action-center { text-align: center; }
table.t th.table-action-center { width: 1%; white-space: nowrap; }
table.t td.table-action-center { white-space: nowrap; }
/* The heading is the single alignment source for every body/footer cell.
   Keep these before responsive card layouts, which intentionally use local labels. */
table.t th[data-column-align="left"], table.t td[data-column-align="left"] { text-align:left; }
table.t th[data-column-align="center"], table.t td[data-column-align="center"] { text-align:center; }
table.t th[data-column-align="right"], table.t td[data-column-align="right"] { text-align:right; }
table.t :is(th,td)[data-column-type="numeric"] { font-variant-numeric:tabular-nums; }
/* Alignment must not prescribe column widths or override local wrapping/card layouts. */
:where(table.t) :where(th,td)[data-column-type="date"] { white-space:nowrap; }
:where(table.t) :where(th,td):is([data-column-type="short"],[data-column-type="numeric"],[data-column-type="actions"],[data-column-type="selection"]) { white-space:nowrap; overflow-wrap:normal; }
:where(table.t) :where(th,td)[data-column-type="status"] { overflow-wrap:normal; }
:where(table.t) th[data-column-type="status"] { white-space:nowrap; }
table.t td[data-column-type="actions"] > :is(.row,.qualification-actions) { justify-content:flex-end; }
table.t td[data-column-align="center"] > .row { justify-content:center; }
table.t td[data-column-type="actions"][data-column-align="center"] > .row { justify-content:center; }
:where(table.t) :where(th,td)[data-column-type="text"] { overflow-wrap:anywhere; }
:where(table.t) th[data-column-type="text"] { overflow-wrap:normal; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr.click { cursor: pointer; }
table.t tbody tr.click:hover td { background: var(--hover-surface); }
table.t tfoot td { font-weight: 700; border-top: 1px solid var(--line); background: var(--surface-2); }
table.t.payroll-table, table.t.payroll-history-table { text-align: left; }
table.t.payroll-table .payroll-center, table.t.payroll-history-table .payroll-center { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.t.payroll-table { table-layout: fixed; min-width: 64rem; }
table.t.payroll-table th { width: auto; }
table.t.payroll-table :is(th,td) { padding-left: 10px; padding-right: 10px; }
table.t.payroll-table td.num .small { white-space: normal; overflow-wrap: anywhere; }
table.t.payroll-table [data-ot-override] { max-width: 100%; height: auto; min-height: 28px; white-space: normal; }
table.t.payroll-table [data-payroll-profile] { max-width: 100%; height: auto; min-height: 28px; white-space: normal; overflow-wrap: anywhere; text-align: left; justify-content: flex-start; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 400; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.confirmed { background:var(--confirmed-soft); color:var(--confirmed); }
.badge.brand { background: var(--brand-soft); color: var(--sd-primary-text,var(--brand)); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--sd-primary-text,var(--brand)); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.staff-photo { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--line-2); }
.form-section { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--panel); }
.form-section > h3 { margin: 0 0 12px; }
#product-usage-editor > .table-wrap + [data-add] { margin-top: 5px; }
.service-usage-table .t td { vertical-align: top; }
.service-usage-table [data-scope] { min-width: 175px; }
.service-usage-quantities { display: grid; grid-template-columns: repeat(2, 90px); gap: 6px 10px; }
.service-usage-quantities .f { min-width: 0; gap: 3px; margin: 0; font-size: 12px; white-space: normal; }
.service-usage-quantities input { width: 90px; }
.service-usage-table .usage-error { display: block; max-width: 190px; white-space: normal; color: var(--bad); }
.service-usage-table [aria-invalid="true"] { border-color: var(--bad); }
.service-checklist { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 8px; max-height: 230px; overflow: auto; padding: 2px; }
.service-checklist label { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; background: var(--bg); }
.detail-list { display: grid; grid-template-columns: minmax(120px,.75fr) minmax(0,1.25fr); gap: 9px 14px; }
.detail-list b { color: var(--muted); font-size: 12px; }
@media (max-width: 640px) { .detail-list { grid-template-columns: 1fr; gap: 4px; } .detail-list span { margin-bottom: 8px; } .form-section { padding: 12px; } }

/* ---------- modal / toast ---------- */
.modal-bg { position: fixed; inset: 0; background: var(--overlay); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 5vh 16px; overflow-y: auto; animation: fade .12s; }
.modal { background: var(--panel); border-radius: 14px; width: 100%; max-width: 560px; max-height: 90dvh; display: flex; flex-direction: column; min-width: 0; box-shadow: 0 20px 60px rgba(0,0,0,.25); animation: pop .15s; }
.modal.wide { max-width: 860px; }
.modal-bg:has(.new-category-dialog) { align-items: center; }
.new-category-dialog { max-width: 440px; }
.new-category-dialog #category-error { color: var(--bad); }
.confirmation-dialog { max-width: 440px; }
.confirmation-dialog #confirmation-error { color: var(--bad); }
.modal.xwide { max-width: 1100px; }
.modal-h { padding: 16px 20px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; }
.modal-h h3 { font-size: 16px; }
.modal-b { padding: 18px 20px; overflow: auto; min-height: 0; }
.kpi:has(.calculation-info) { position:relative; }
.calculation-info { position:absolute !important; top:.5rem; right:.5rem; z-index:3 !important; border:0; border-radius:50%; background:var(--surface,#fff); color:var(--muted); padding:.2rem; line-height:1; cursor:pointer; }
.kpi:has(.calculation-info) .label { padding-inline-end:1rem; }
.calculation-header-action { border:0; background:transparent; color:var(--sd-primary-text,var(--brand)); font:inherit; font-size:12px; cursor:pointer; padding:.25rem; margin-inline-start:auto; }
.calculation-info:focus-visible,.calculation-header-action:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.modal-bg:has(.calculation-modal) { align-items:center; }
.calculation-modal { width:min(100%,46rem); max-height:90dvh; }
.calculation-rules { margin:0; }
.calculation-rules dt { font-size:12px; color:var(--ink-2); margin-block-start:.75rem; font-weight:600; }
.calculation-rules dd { margin:.25rem 0 .75rem; font-size:13px; line-height:1.5; }
.calculation-warning { border:1px solid var(--line); background:var(--surface-2); padding:.5rem .75rem; margin-block:.75rem; border-radius:var(--radius,8px); font-size:12px; }
@media (prefers-reduced-motion:reduce) { .modal-bg:has(.calculation-modal),.calculation-modal { animation:none; } }
.modal-h, .modal-f { flex-shrink: 0; }
.modal-f { padding: 14px 20px; border-top: 1px solid var(--line-2); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } }
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.2); font-weight: 500; max-width: 380px; animation: pop .15s; }
.toast.bad { background: var(--bad); }
.toast.ok { background: #14532d; }

/* ---------- login ---------- */
.login-page {
  --login-bg:var(--bg); --login-card:var(--panel); --login-ink:var(--ink); --login-muted:var(--muted);
  --login-line:var(--control-border); --login-soft:var(--surface-2); --login-accent:var(--brand-ink); --login-accent-2:var(--brand-ink);
  min-height:100vh; color:var(--login-ink); background:var(--login-bg);
  display:grid; grid-template-rows:minmax(0,1fr) auto; position:relative; overflow:hidden; isolation:isolate;
}
.login-main { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 48px 24px 36px; z-index: 2; }
.login-brand { display: flex; align-items: center; gap: 16px; }
.login-logo { width: 62px; height: 62px; border-radius: 15px; display: grid; place-items: center; color: #fff; font-size: 28px; font-weight: 750;
  background: var(--brand); box-shadow: var(--shadow); }
.login-brand strong { display: block; font-size: 33px; line-height: 1.05; letter-spacing: -.035em; }
.login-brand > div > span { display: block; color: var(--login-muted); font-size: 17px; margin-top: 5px; letter-spacing: .01em; }
.login-card { width: min(100%, 550px); padding: 42px 40px 26px; border-radius: 17px; background: var(--login-card);
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.login-heading { text-align: center; margin-bottom: 34px; }
.login-heading h1 { font-size: 34px; font-weight: 600; letter-spacing: -.025em; }
.login-heading p { color: var(--login-muted); font-size: 16px; margin: 10px 0 0; }
.login-form-fields { display: flex; flex-direction: column; gap: 16px; }
.login-field { display: flex; flex-direction: column; gap: 7px; color: var(--login-ink); font-weight: 650; font-size: 13px; }
.login-input-wrap { display: block; position: relative; }
.login-input-wrap input { height: 58px; padding: 0 48px 0 52px; border-radius: 11px; border: 1px solid var(--login-line); background: transparent; color: var(--login-ink); font-size: 16px; }
.login-input-wrap input::placeholder { color: var(--login-muted); opacity: 1; font-weight:300; }
.login-input-wrap input:focus { border-color: var(--login-accent-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--login-accent) 15%, transparent); }
.login-input-icon { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: grid; color: var(--login-muted); pointer-events: none; }
.login-input-icon svg { width: 22px; height: 22px; }
.login-input-wrap .password-toggle { top: 10px; right: 9px; width: 38px; height: 38px; color: var(--login-muted); }
.login-input-wrap .password-toggle:hover { background: var(--login-soft); color: var(--login-ink); }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 2px 0 4px; }
.login-remember { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; color: var(--login-muted); font-size: 14px; }
.login-remember input { width: 18px; height: 18px; flex: none; accent-color: var(--login-accent); }
.login-link { border: 0; padding: 4px 0; background: transparent; color: var(--login-accent); font: 400 14px var(--font); cursor: pointer; }
.login-link:hover { text-decoration: underline; }
.login-link:focus-visible, .login-theme-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.login-submit { width: 100%; height: 55px; border-radius: 11px; margin-top: 2px; font-size: 16px; background: var(--brand); border: 0; box-shadow: var(--interaction-shadow); }
.login-submit:hover { background: var(--sd-primary-hover); }
.login-submit:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.login-submit.loading { cursor: wait; }
.login-submit:disabled { opacity: .68; transform: none; }
.login-card-divider { height: 1px; margin: 27px 0 19px; background: var(--line); }
.login-theme-toggle { margin: 0 auto; min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; background: transparent; color: var(--login-muted); font: 400 13px var(--font); cursor: pointer; border-radius: 9px; padding: 6px 12px; }
.login-theme-toggle:hover { color: var(--login-ink); background: var(--login-soft); }
.login-theme-toggle svg { width: 18px; height: 18px; }
.login-footer { z-index: 2; min-height: 88px; padding: 20px 24px; border-top: 1px solid color-mix(in srgb, var(--login-line) 65%, transparent); background: var(--login-card); display: grid; place-items: center; }
.login-features { width: min(100%, 840px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.login-features span { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--login-muted); font-size: 13px; font-weight: 550; white-space: nowrap; }
.login-features svg { width: 23px; height: 23px; color: var(--login-accent); flex: none; }
.login-botanical { position: absolute; width: 150px; height: 280px; z-index: 1; opacity: .3; pointer-events: none;
  background: no-repeat center/contain url("./botanical-corner.svg"); }
.login-botanical-left { left: -8px; top: 18px; }
.login-botanical-right { right: -8px; bottom: 18px; transform: rotate(180deg); }
.login-page[data-theme="dark"] .login-botanical { opacity: .25; filter: saturate(1.35) brightness(1.15); }
.password-change-card { max-width: 520px; }
.password-change-card .login-form-fields > label.f { color: var(--login-ink); gap: 7px; }
.password-change-card input { height: 48px; background: transparent; color: var(--login-ink); border-color: var(--login-line); }
.password-change-card .password-toggle { top: 6px; }

/* ---------- charts ---------- */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding-top: 10px; overflow-x: auto; }
.bars .b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.bars .b i { display: block; width: 100%; max-width: 34px; background: var(--sd-chart-1,var(--brand)); border-radius: 5px 5px 2px 2px; min-height: 2px; position: relative; }
.bars .b i:hover { filter: brightness(1.15); }
.bars .b span { font-size: 10.5px; color: var(--muted); white-space: normal; text-align: center; line-height: 1.2; height: 2.4em; flex-shrink: 0; }
.bars .b { min-width: 24px; }
.revenue-trend .bars {
  display: grid;
  grid-template-columns: repeat(var(--revenue-points, 1), minmax(0, 1fr));
  gap: var(--revenue-gap, .25rem);
  width: 100%;
  max-width: none;
  margin-inline: 0;
  overflow-x: hidden;
  padding-inline: .75rem;
  box-sizing: border-box;
}
.revenue-trend .bars .b { min-width: 0; }
.revenue-trend .bars .b i { width: min(100%, var(--revenue-bar-width, 100%)); max-width: none; }
.revenue-trend .bars .b span { white-space: nowrap; }
.hbar > * { min-width: 0; overflow-wrap: anywhere; }
.hbar { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; }
.hbar .track { height: 10px; background: var(--line-2); border-radius: 99px; overflow: hidden; }
.hbar .fill { height: 100%; background: var(--brand); border-radius: 99px; }

/* Shared DD/MM/YYYY date fields; the native dialog stays above scrolling panels. */
sd-date { display:inline-grid; grid-template-columns:minmax(0,1fr) 36px; width:100%; max-width:100%; min-width:0; vertical-align:middle; }
sd-date > input { width:100%; min-width:0; border-top-right-radius:0; border-bottom-right-radius:0; }
.date-input-toggle { display:grid; place-items:center; align-self:stretch; padding:0; border:1px solid var(--line); border-left:0; border-radius:0 var(--radius) var(--radius) 0; color:var(--ink); background:var(--surface-2,var(--panel)); cursor:pointer; }
.date-input-toggle:hover:not(:disabled) { background:var(--line); }
.date-input-toggle:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.date-input-toggle:disabled { opacity:.6; cursor:default; }
.date-input-error { grid-column:1/-1; color:var(--bad); font-size:11px; line-height:1.4; margin-top:3px; }
sd-date > input[aria-invalid="true"] { border-color:var(--bad); }
.date-calendar { position:fixed; inset:auto; margin:0; width:min(292px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); overflow:auto; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--ink); font:inherit; box-shadow:0 8px 28px #0003; }
.date-calendar::backdrop { background:transparent; }
.date-calendar-toolbar { display:grid; grid-template-columns:30px minmax(0,1fr) 68px 30px; gap:4px; align-items:center; }
.date-calendar-toolbar select,.date-calendar-toolbar input { min-width:0; width:100%; font-size:12px; padding:6px 4px; height:34px; }
.date-calendar button { font:inherit; color:var(--ink); background:var(--surface-2,var(--panel)); border:1px solid var(--line); border-radius:6px; cursor:pointer; }
.date-calendar-toolbar button { height:34px; padding:0; font-size:21px; }
.date-calendar button:not([aria-selected="true"]):hover:not(:disabled) { background:var(--line); }
.date-calendar button:focus-visible { outline:2px solid var(--focus-ring); outline-offset:1px; }
.date-calendar-month { margin:8px 0; text-align:center; font-size:13px; font-weight:600; }
.date-calendar-grid [role="row"] { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; margin:2px 0; }
.date-calendar-grid [role="columnheader"] { text-align:center; font-size:11px; color:var(--muted); padding:4px 0; }
.date-calendar-grid button { height:34px; min-width:0; padding:0; font-size:12px; border-color:transparent; }
.date-calendar-grid button.outside { color:var(--muted); }
.date-calendar-grid button[aria-selected="true"] { background:var(--brand); color:var(--on-brand,#fff); border-color:var(--ink); font-weight:700; }
.date-calendar-grid button:disabled { opacity:.45; cursor:default; }
.date-calendar-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.date-calendar-footer button { min-height:34px; padding:5px 10px; font-size:12px; }

/* ---------- appointments calendar ---------- */
.cal-wrap { overflow: auto; max-height: calc(100vh - 210px); border-top: 1px solid var(--line-2); }
.cal { display: grid; position: relative; min-width: 100%; --calendar-half-hour: 30px; --calendar-half-line: #f1ebef; --calendar-hour-line: var(--calendar-half-line); }
.cal .hdr { position: sticky; top: 0; z-index: 3; background: var(--panel); border-bottom: 1px solid var(--line); padding: 10px 8px; font-weight: 400; font-size: 13px; display: flex; gap: 8px; align-items: center; border-left: 1px solid var(--line-2); }
.cal .corner { position: sticky; left: 0; z-index: 4; background: var(--panel); border-bottom: 1px solid var(--line); }
.cal .times { position: sticky; left: 0; z-index: 2; background: var(--panel); }
.cal .tlabel { height: 60px; font-size: 11px; color: var(--muted); text-align: right; padding: 0 8px; transform: translateY(-7px); }
.cal .col { position: relative; border-left: 1px solid var(--line-2); cursor: copy;
  background: repeating-linear-gradient(180deg,
    transparent 0 calc(var(--calendar-half-hour) - 1px),
    var(--calendar-half-line) calc(var(--calendar-half-hour) - 1px) var(--calendar-half-hour),
    transparent var(--calendar-half-hour) calc(var(--calendar-half-hour) * 2 - 1px),
    var(--calendar-hour-line) calc(var(--calendar-half-hour) * 2 - 1px) calc(var(--calendar-half-hour) * 2));
}
.cal .appt { position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 5px 8px; font-size: 12px; overflow: hidden; cursor: pointer; border-left: 4px solid; background: var(--panel); box-shadow: 0 1px 4px rgba(0,0,0,.08); line-height: 1.3; }
.cal .appt:hover { box-shadow: 0 4px 14px rgba(0,0,0,.14); z-index: 5; }
.cal .appt b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .appt .s { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .appt.st-cancelled, .cal .appt.st-noshow { opacity: 1; text-decoration: line-through; }
.cal .appt.st-completed { background: var(--ok-soft); }
.cal .appt.st-arrived { background: var(--warn-soft); }
.cal .now { position: absolute; left: 0; right: 0; height: 2px; background: var(--bad); z-index: 3; pointer-events: none; }

/* ---------- POS ---------- */
.main:has(.pos-catalog) { height: 100dvh; min-height: 0; }
.main:has(.pos-catalog) > .topbar { flex-shrink: 0; }
.content:has(.pos-catalog) { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; }
.pos-catalog, .pos-catalog #catalog-step, .pos-catalog #catalog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pos-catalog #catalog-card > .card-h, .pos-catalog #barcode-form { flex-shrink: 0; }
.pos-catalog #tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
.pos-catalog #tabs button { flex-shrink: 0; white-space: nowrap; }
.pos-catalog-body { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: .75rem; }
.pos-catalog #cats { flex-shrink: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }
.pos-catalog #cats .chip { flex-shrink: 0; white-space: nowrap; }
/* Keep keyboard rings inside horizontally scrolling controls, not clipped at their edges. */
.pos-catalog :is(#cats .chip, #tabs button):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -3px; }
.pos-catalog :is(#cats .chip.on, #tabs button.on):focus-visible { outline-color: var(--focus-ring); }
.pos-catalog-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; overflow-anchor: none; scrollbar-gutter: stable; }
.pos-catalog-scroll:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.pos-catalog .pos-next-bar { position: static; flex-shrink: 0; }
/* With insufficient height for navigation and content, use one document scroll
   instead of trapping the catalog in an unusably small nested viewport. */
@media (max-height: 32rem) {
  .main:has(.pos-catalog) { height: auto; min-height: 100dvh; }
  .pos-catalog-scroll { overflow: visible; }
}
.pos-step[hidden] { display: none; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; padding: 2px; }
.pos-next-bar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 12px 2px; background: var(--bg); }
.tile { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 10px 11px; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 3px; min-height: 72px; }
.tile:hover { border-color: var(--rose); background: var(--hover-surface); }
.tile.selected { border-color: var(--brand); background: var(--brand-soft); }
.tile.selected:hover { border-color: var(--brand); background: var(--brand-soft); }
.tile[data-add] { position: relative; padding: 0; }
.tile-body { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; min-height: 72px; padding: 10px 11px; border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tile-body:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.tile.selected .tile-top { padding-right: 84px; }
.tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
.tile-top b { min-width: 0; overflow-wrap: anywhere; }
.tile-quantity { display: inline-flex; align-items: center; flex: none; border: 1px solid var(--brand); border-radius: 8px; background: var(--panel); color: var(--sd-primary-text,var(--brand)); }
.tile[data-add] .tile-quantity { position: absolute; top: 7px; right: 7px; z-index: 1; }
.tile-quantity button { width: 30px; height: 30px; border: 0; background: transparent; color: inherit; font: 400 16px var(--font); cursor: pointer; }
.tile-quantity button:disabled { opacity: .35; cursor: not-allowed; }
.tile-quantity button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.tile-count { min-width: 19px; text-align: center; color: var(--ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile b { font-size: 13px; font-weight: 400; line-height: 1.25; }
.tile .p { margin-top: auto; font-weight: 400; color: var(--sd-primary-text,var(--brand)); font-variant-numeric: tabular-nums; }
.tile.oos { opacity: .45; }
.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) 64px 92px 28px; gap: 8px; padding: 10px 0; border-bottom: 1px dashed var(--line); align-items: start; }
.cart-line input, .cart-line select { height: 30px; font-size: 13px; padding: 0 7px; }
.cart-line .nm { font-weight: 400; font-size: 13px; }

.pos-bill-shell { display: grid; gap: 12px; min-width: 0; }
.pos-bill-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr); gap: 12px; align-items: start; }
.pos-bill-content { gap: 12px; }
.pos-bill-content, .pos-bill-layout > *, .pos-bill .card-b { min-width: 0; }
.pos-bill .card { box-shadow: none; }
.pos-bill .card-h, .pos-bill .card-b { padding: 12px; }
.pos-bill .pos-customer-card > .card-b { padding: 10px 12px; }
.pos-customer-row { display: flex; align-items: flex-start; gap: 8px; }
.pos-customer-row > #pos-back { flex: none; }
.pos-customer-row > #cust { flex: 1; min-width: 0; }
.pos-customer-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.pos-customer-controls > * { min-width: 0; }
.pos-customer-controls input, .pos-customer-row > #pos-back, .pos-customer-controls > .btn { height: 38px; }
.pos-bill .card-h h3, .pos-bill .card-b h3 { font-size: 13px; margin: 0; }
.pos-bill .card-b h3 { margin-bottom: 12px; }
.pos-bill-summary { position: sticky; top: 12px; }
.pos-bill-summary > .card-h { border-bottom: 0; padding-bottom: 0; }
.pos-bill-summary > .card-b { gap: 10px; }
.pos-bill .totals { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; font-size: 12px; }
.pos-bill-summary .totals .grand { color: var(--sd-primary-text,var(--brand)); font-size: 22px; padding: 8px 0 4px; margin-top: 4px; border-top: 1px solid var(--line); }
.pos-bill .btn { min-height: 34px; font-size: 12px; }
.pos-workspace-tabs { display: flex; border-bottom: 1px solid var(--line); padding: 0; }
.pos-workspace-tabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 12px; padding: 12px 8px; cursor: pointer; }
.pos-workspace-tabs button:last-child { border-right: 0; }
.pos-workspace-tabs button[aria-selected="true"] { background: var(--brand); color: var(--on-brand, #fff); }
.pos-workspace-tabs button[aria-selected="false"] { background: var(--surface-2); }
.pos-workspace-tabs button[aria-selected="false"]:hover { color: var(--brand-ink); }
.pos-workspace-tabs button:first-child { border-radius: 10px 0 0 0; }
.pos-workspace-tabs svg { width: 16px; height: 16px; flex: none; }
.pos-workspace-tabs button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -3px; }
.pos-workspace-tabs button[aria-selected="true"]:focus-visible { outline-color: var(--focus-ring); }
.pos-package-catalogue { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin-top: 12px; }
.pos-package-guidance { grid-column: 1 / -1; margin: 0 0 8px; }
.pos-package-card { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pos-package-card.selected { border-color: var(--brand); background: var(--brand-soft); }
.pos-package-card .tile-quantity { align-self: start; margin-top: auto; }
.pos-package-card h4, .pos-package-card p { margin: 0; overflow-wrap: anywhere; }
.pos-package-card .row { align-items: start; flex-wrap: wrap; gap: 6px; }
.pos-package-card .btn { align-self: start; margin-top: auto; }
.pos-package-catalogue > [role="alert"], .pos-package-catalogue > [role="status"], .pos-package-catalogue > .empty { grid-column: 1 / -1; }
.pos-bill .pos-item-columns, .pos-bill .cart-line { display: grid; grid-template-columns: minmax(0, 1fr) 64px 46px 76px 76px 84px 30px; gap: 8px; align-items: start; }
.pos-item-columns { color: var(--muted); font-size: 10px; padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.pos-item-columns > :nth-child(n+3) { text-align: right; }
.pos-item-columns .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pos-bill [role="tabpanel"][hidden], .pos-bill #pos-note-editor[hidden], .pos-bill .pos-customer-search[hidden] { display: none; }
.pos-bill .cart-line { padding: 12px 0; font-size: 12px; border-bottom: 1px solid var(--line-2); }
.pos-bill .cart-line > * { min-width: 0; }
.pos-line-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 11px; color: var(--muted); }
.pos-bill input[data-f="discount"][aria-invalid="true"] { border-color: var(--bad); outline: 1px solid var(--bad); }
.pos-line-field [data-discount-error] { color: var(--bad); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.pos-line-field [data-discount-error][hidden] { display: none; }
.pos-column-field > span, .pos-line-amount > span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pos-bill .cart-line input, .pos-bill .cart-line select, .pos-payment-row input:not([type=checkbox]), .pos-payment-row select { height: 34px; width: 100%; min-width: 0; font-size: 12px; padding: 6px; }
.pos-bill .pos-column-field input { text-align: right; }
.pos-bill .cart-line input[readonly] { background: transparent; border-color: transparent; padding-right: 0; }
.pos-item-options { display: flex; align-items: end; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.pos-item-options .pos-line-field { flex: 1 1 100px; }
.pos-bill .cart-line [data-del] { min-height: 30px; width: 30px; height: 30px; padding: 5px; }
.pos-item-type { text-transform: capitalize; font-size: 10px; padding: 3px 6px; margin-top: 6px; }
.pos-bill .nm { overflow-wrap: anywhere; font-size: 12px; }
.pos-line-amount { text-align: right; padding-top: 9px; white-space: nowrap; }
.pos-items-card #pos-add-item { margin-top: 12px; }
.pos-quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pos-quick-actions .btn { justify-content: start; text-align: left; height: auto; min-height: 46px; padding: 8px; gap: 7px; min-width: 0; }
.pos-quick-actions svg { width: 17px; height: 17px; color: var(--sd-primary-text,var(--brand)); flex: none; }
.pos-quick-actions small { display: block; font-size: 9px; color: var(--muted); font-weight: 400; margin-top: 3px; }
.pos-bill #clear { align-self: start; padding: 0; min-height: 28px; font-size: 11px; color: var(--muted); }
.pos-payment-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 6px; margin: 10px 0; }
.pos-bill #pay h4 { margin: 0; font-size: 12px; }
.pos-bill #pay p { margin: 6px 0; font-size: 10px; }
.pos-loyalty-details { font-size: 10px; }
.pos-loyalty-details summary { cursor: pointer; }
.pos-payment-methods .btn { flex-direction: column; gap: 4px; padding: 7px 3px; min-height: 48px; font-size: 11px; overflow-wrap: anywhere; }
.pos-payment-methods svg { width: 16px; height: 16px; }
.pos-method-active { border-color: var(--brand); background: var(--brand-soft); color: var(--sd-primary-text,var(--brand)); }
.pos-payment-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pos-payment-reference { grid-column: 1 / -1; }
.pos-save-actions { display: grid; grid-template-columns: minmax(60px, 1fr) minmax(0, 3fr); gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.pos-save-actions .btn { height: 42px; min-height: 42px; }
.pos-save-actions #save-print { font-size: 13px; }
.pos-save-actions #save-qr { grid-column: 1 / -1; grid-row: 2; }
.pos-customer-search { margin-bottom: 10px; }
.pos-bill .cust-card { background: transparent; padding: 0; flex-wrap: wrap; align-items: center; }
.pos-bill .cust-card .grow { min-width: 150px; overflow-wrap: anywhere; }
.pos-bill .cust-card .avatar { width: 38px; height: 38px; font-size: 18px; }
.pos-customer-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pos-customer-actions svg { width: 14px; height: 14px; }
.pos-bill #cust .small { font-size: 11px; }
@media (max-width: 1200px) and (min-width: 901px) {
  .pos-bill .pos-item-columns, .pos-bill .cart-line { grid-template-columns: minmax(0, 1fr) 55px 40px 64px 64px 70px 28px; gap: 5px; }
  .pos-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pos-bill-layout { grid-template-columns: minmax(0, 1fr); }
  .pos-bill-summary { position: static; }
}
@media (max-width: 600px) {
  .pos-customer-controls { grid-template-columns: minmax(0, 1fr); }
  .pos-customer-controls > .btn { justify-self: end; }
  .pos-customer-controls input, .pos-customer-row > #pos-back, .pos-customer-controls > .btn { height: 44px; }
  .pos-bill .btn, .pos-workspace-tabs button { min-height: 44px; }
  .pos-bill #clear, .pos-bill .pos-save-actions #save-print { min-height: 44px; height: 44px; }
  .pos-bill .card-h { flex-wrap: wrap; gap: 8px; }
  .pos-workspace-tabs button { font-size: 11px; gap: 4px; padding: 8px 4px; }
  .pos-workspace-tabs svg { width: 14px; height: 14px; }
  .pos-bill .pos-item-columns { display: none; }
  .pos-bill .cart-line { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; position: relative; padding: 12px 0; }
  .pos-bill .cart-line > .pos-item-name { grid-column: 1 / -1; padding-right: 44px; }
  .pos-bill .cart-line > .pos-item-category { grid-column: 1 / -1; }
  .pos-bill .cart-line > .pos-line-amount { grid-column: 1 / -1; padding-top: 0; display: flex; justify-content: space-between; }
  .pos-column-field > span, .pos-line-amount > span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .pos-bill .cart-line > .pos-item-remove { position: absolute; right: 0; top: 12px; }
  .pos-bill .cart-line [data-del] { width: 44px; height: 44px; min-height: 44px; }
  .pos-bill .cart-line input, .pos-bill .cart-line select, .pos-payment-row input:not([type=checkbox]), .pos-payment-row select { height: 44px; }
  .pos-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos-customer-actions { width: 100%; }
}
.totals { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; font-size: 13.5px; }
.totals .grand { font-size: 22px; font-weight: 750; color: var(--ink); }
.pay-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.cust-card { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; }
.dropdown { position: absolute; left: 0; right: 0; top: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); z-index: 30; max-height: 280px; overflow-y: auto; margin-top: 4px; }
.dropdown div { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--line-2); }
.dropdown div:hover, .dropdown div.on { background: var(--brand-soft); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 10px 14px; font: 400 13.5px var(--font); color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button.on { color: var(--sd-primary-text,var(--brand)); border-bottom-color: var(--brand); }
.tabs { max-width: 100%; min-width: 0; }
.tabs button { flex-shrink: 0; }
.modal.service-import-dialog { max-width:680px; }
.service-import-dialog .modal-h { align-items:flex-start; gap:12px; }
.service-import-heading { min-width:0; }
.service-import-heading h3 { display:flex; align-items:center; gap:8px; font-weight:500; }
.service-import-heading h3 svg { width:20px; height:20px; flex:none; }
.service-import-heading p { margin:4px 0 0; }
.service-import-dialog .modal-f { background:var(--panel); }
.service-import-dialog [hidden] { display:none !important; }
.service-import-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 4px; padding:0; }
.service-import-steps li { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.service-import-steps li > span { display:grid; place-items:center; width:24px; height:24px; flex:none; border:1px solid var(--line); border-radius:50%; }
.service-import-steps [aria-current=step] { color:var(--sd-primary-text,var(--brand)); font-weight:500; }
.service-import-steps [aria-current=step] > span { background:var(--brand-soft); border-color:var(--brand); }
.service-import-step { display:grid; gap:14px; min-width:0; }
.service-import-template { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
.service-import-template h4 { font-weight:500; font-size:14px; }
.service-import-file-icon svg,.service-import-upload-icon svg { width:24px; height:24px; color:var(--sd-primary-text,var(--brand)); }
.service-import-upload { position:relative; display:grid; justify-items:center; gap:10px; padding:20px 12px; border:1px dashed var(--line); border-radius:10px; background:var(--bg); text-align:center; }
.service-import-upload-icon { display:inline-flex; transform:rotate(180deg); }
.service-import-upload h4 { font-size:14px; font-weight:500; }
.service-import-file { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.service-import-selected { display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--line); }
.service-import-selected > div { flex:1; min-width:0; overflow-wrap:anywhere; }
.service-import-selected small { display:block; }
.service-import-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.service-import-stats > div { padding:10px 8px; border:1px solid var(--line); border-radius:8px; }
.service-import-stats span { display:block; font-size:16px; font-weight:500; }
.service-import-stats small { color:var(--muted); }
.service-import-review { overflow:visible; }
.service-import-review table.t { table-layout:auto; }
.service-import-review table.t th.num { width:auto; }
.service-import-success { display:grid; gap:10px; padding:12px 0; }
.service-import [data-step-heading]:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; }
@media(max-width:480px) {
  .service-import-template { grid-template-columns:24px minmax(0,1fr); }
  .service-import-template > button { grid-column:2; justify-self:start; }
  .service-import-selected { flex-wrap:wrap; }
  .service-import-selected > div { flex-basis:100%; }
  .service-import-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.service-import { gap: 12px; min-width: 0; }
.service-import p, .service-import h4 { margin: 0; }
.service-import-review { min-width: 0; }
.service-import-review td { overflow-wrap: anywhere; }
@media(max-width:640px) {
  .service-import-review table.t, .service-import-review tbody, .service-import-review tr, .service-import-review td { display: block; width: 100%; }
  .service-import-review thead { display: none; }
  .service-import-review tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .service-import-review table.t td { padding: 5px 8px; border: 0; text-align: left; }
  .service-import-review td::before { content: attr(data-label) ': '; color: var(--muted); font-weight: 500; }
  .service-import .row { align-items: stretch; }
  .service-import input[type=file] { max-width: 100%; min-width: 0; }
}
@media(max-width:480px) {
  .service-import .row { flex-direction: column; }
  .service-import .row > .btn { align-self: flex-start; }
}
/* Mobile tab strips stay swipeable without a second line beside the active underline. */
@media (max-width: 768px) {
  :is(.tabs, .scrollable-tabs, [role="tablist"], .pos-catalog #tabs) {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  :is(.tabs, .scrollable-tabs, [role="tablist"], .pos-catalog #tabs)::-webkit-scrollbar { display: none; }
  :is(.tabs, .scrollable-tabs, [role="tablist"], .pos-catalog #tabs) > :is(button, a, [role="tab"]) {
    flex-shrink: 0;
    white-space: nowrap;
    margin-bottom: 0;
  }
  :is(.tabs, .scrollable-tabs, [role="tablist"], .pos-catalog #tabs) > :focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -3px;
  }
  .account-settings .account-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
}
.inventory-tabs { overflow-y: hidden; }
.inventory-tabs button { margin-bottom: 0; }
.stock-filter-controls > .search { flex: 1 1 240px; }
.stock-filter-controls > select { flex: 0 1 180px; width: 180px; }
.stock-filter-controls > .btn { flex-shrink: 0; height: 38px; }
.product-unit-settings { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.product-unit-group { display:flex; flex-direction:column; gap:10px; padding:12px; border:1px solid var(--line); border-radius:9px; }
.product-unit-group h3 { font-size:13px; margin:0; }
.product-unit-group p { margin:0; }
.product-unit-group [hidden] { display:none; }
.product-unit-input { display:flex; align-items:stretch; min-width:0; }
.product-unit-input > input { min-width:0; flex:1; width:0; border-radius:9px 0 0 9px; }
.product-unit-input > span { display:flex; align-items:center; padding:0 10px; border:1px solid var(--line); border-left:0; border-radius:0 9px 9px 0; background:var(--line-2); font-weight:400; }
.product-unit-error { color:var(--bad); }
.product-unit-error:empty { display:none; }
.product-unit-advanced { margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.product-unit-advanced > summary { cursor:pointer; font-size:13px; font-weight:600; }
.product-unit-advanced > .stack { margin-top:12px; }
@media(max-width:700px) { .product-unit-settings { grid-template-columns:1fr; } }
.valuation-toolbar, .valuation-controls { align-items: flex-end; }
.valuation-controls { flex-wrap: nowrap; }
.valuation-summary { flex: 1 1 220px; margin-left: auto; text-align: right; }
.reports-tabs { overflow-y: hidden; }
.reports-tabs button { margin-bottom: 0; }
.report-filter-row { align-items: flex-end; }
.report-filter-row > label.f > input, .report-filter-row > label.f > select { height: 36px; }
.reports-period-bar { align-items: center; flex-wrap: wrap; }
.reports-period-bar .seg { max-width: 100%; }
.reports-period-bar .seg button { white-space: nowrap; }
.reports-period-summary { font-variant-numeric: tabular-nums; }
.modal.report-range-dialog { max-width: 28rem; }
.modal-bg:has(.report-range-dialog) { align-items: center; }
.report-range-dialog p { margin: 0 0 .75rem; }
.report-range-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.report-range-dialog .period-error { color: var(--bad); margin-top: .75rem; }
@media (max-width: 400px) { .report-range-fields { grid-template-columns: minmax(0, 1fr); } }
.report-pagination { gap: 8px 16px; }
.report-pagination-meta, .report-pagination-actions { gap: 8px; }
.report-pagination-meta label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.report-pagination-actions { flex-wrap: nowrap; }
.report-pagination-actions > span { white-space: nowrap; }
@media (max-width: 540px) {
  .report-pagination-actions { flex-wrap: wrap; gap: 6px; }
}
.settings-tabs, .settings-subtabs { flex-wrap: wrap; overflow: visible; }
.settings-subtabs { gap: 2px; margin-bottom: 14px; }
.settings-subtabs button { padding: 8px 12px; font-size: 13px; }
.settings-form { max-width: 900px; }
.settings-form.card, .settings-branch-info.card { box-shadow: none; }
.settings-branch-info { max-width:900px; margin-top:16px; font-size:13px; }
.settings-form .card-h h3, .settings-branch-info h3 { font-size:14px; font-weight:600; margin:0; }
.settings-branch-info dl { margin:0 0 10px; }
.settings-branch-info dl > div { display:flex; flex-wrap:wrap; gap:4px 20px; padding:6px 0; border-bottom:1px solid var(--line); }
.settings-branch-info dt { flex:1 1 220px; }
.settings-branch-info dd { margin:0; overflow-wrap:anywhere; }
.payroll-settings { margin-bottom: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.payroll-settings summary { cursor: pointer; font-size: 13px; font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 5px 12px; font: 400 12.5px var(--font); cursor: pointer; color: var(--ink-2); }
.chip.on { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.appointment-service-section { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; }
.appointment-service-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; max-height: 190px; overflow: auto; }
.appointment-service { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.appointment-service.on { border-color: var(--brand); background: var(--line-2); }
.appointment-service:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.appointment-service-check { flex: 0 0 18px; width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 4px; display: grid; place-items: center; font-size: 12px; }
.appointment-service.on .appointment-service-check { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.appointment-service-info { display: grid; gap: 2px; min-width: 0; }
.appointment-service-name { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 540px) { .appointment-service-list { grid-template-columns: minmax(0, 1fr); } }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 400; }

/* ---------- access control ---------- */
.role-key { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; margin-top: 2px; }
.role-permission-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 4px; }
.permission-search { max-width: 520px; }
.permission-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; align-items: start; flex-shrink: 0; gap: 12px; max-height: min(54vh, 620px); overflow-y: auto; padding: 2px; }
.pos-barcode { display:flex; align-items:end; gap:14px; padding:14px 18px; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--brand) 5%, transparent); }
.pos-barcode label { display:flex; flex-direction:column; gap:2px; min-width:185px; }
.pos-barcode input { min-height:44px; font-size:1rem; letter-spacing:.03em; }
.permission-group { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; align-self: start; min-block-size: max-content; }
.permission-group summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; background: var(--line-2); }
.permission-group summary::-webkit-details-marker { display: none; }
.permission-group summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.permission-group-toggle { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.permission-chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
.permission-group[open] .permission-chevron { transform: rotate(225deg); }
.permission-group-actions { display: flex; justify-content: flex-end; gap: 5px; padding: 8px 10px 0; }
.permission-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 8px 10px 11px; }
.permission-option { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border-radius: 8px; cursor: pointer; min-width: 0; }
.permission-option:hover { background: var(--surface-2); }
.permission-option input { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.permission-option span { min-width: 0; }
.permission-option b { display: block; font-size: 12.5px; font-weight: 400; }
.permission-option small { color: var(--muted); display: block; overflow-wrap: anywhere; margin-top: 1px; }
.role-active { padding: 10px 12px; background: var(--line-2); border-radius: 9px; }

/* ---------- invoice print ---------- */
.invoice-detail .modal-b { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.invoice-preview { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.invoice-preview-frame { position: relative; margin: 0 auto; overflow: hidden; }
.invoice-preview-frame > .invoice { position: absolute; top: 0; left: 0; width: 760px; max-width: none; margin: 0; transform-origin: top left; }
.invoice { background: #fff; color: #111; font-size: 12.5px; padding: 24px; max-width: 760px; margin: 0 auto; }
.invoice h2 { font-size: 20px; }
.invoice table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.invoice th, .invoice td { padding: 6px 6px; border-bottom: 1px solid #e5e5e5; text-align: left; vertical-align: top; }
.invoice th { font-size: 11px; text-transform: uppercase; color: #555; border-bottom: 1.5px solid #222; }
.invoice .r { text-align: right; }
.invoice .tot td { border: 0; padding: 3px 6px; }
.invoice .big td { font-size: 16px; font-weight: 800; border-top: 1.5px solid #222; padding-top: 8px; }
.invoice.thermal { max-width: 80mm; padding: 6px; font-size: 11px; font-family: "Courier New", monospace; }
.invoice.thermal h2 { font-size: 15px; }
.invoice.thermal th, .invoice.thermal td { padding: 2px 1px; }
.invoice-verification-qr { margin: 12px auto 4px; text-align: center; break-inside: avoid; page-break-inside: avoid; }
.invoice-verification-qr img { display: block; width: 34mm; height: 34mm; max-width: 128px; max-height: 128px; margin: 0 auto 3px; image-rendering: pixelated; }
.invoice-verification-qr b { display: block; font-size: 10px; color: #111; }
.invoice-payment-qr { margin: 12px auto 8px; padding: 8px 0; text-align: center; border-top: 1px dashed #777; border-bottom: 1px dashed #777; break-inside: avoid; page-break-inside: avoid; }
.invoice-payment-qr img { display: block; width: 42mm; height: 42mm; max-width: 160px; max-height: 160px; margin: 4px auto; image-rendering: pixelated; }
.invoice-payment-qr b, .invoice-payment-qr span, .invoice-qr-title { display: block; color: #111; }
.invoice-payment-qr span { font-size: 10px; font-weight: 700; }
.manual-payment-qr span { overflow-wrap: anywhere; }
.manual-payment-qr img { width: 50mm; height: 50mm; max-width: 190px; max-height: 190px; }
.thermal .manual-payment-qr img { width: 42mm; height: 42mm; max-width: 160px; max-height: 160px; }
.invoice-qr-title { font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.invoice-qr-fallback { min-height: 34mm; display: grid; place-items: center; border: 1px dashed #777; margin: 0 auto 4px; max-width: 34mm; font-size: 9px; }
.public-page { background: var(--bg); padding: 24px 12px; }
.public-shell { max-width: 760px; margin: 0 auto; }

.invoice-verification-page { max-width: 1120px; }
.invoice-verification-page #verification-result { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 24px; display: grid; gap: 16px; }
.verification-brand { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: -24px -24px 4px; padding: 22px 24px; border-bottom: 1px solid var(--line); color: var(--brand-ink); }
.verification-brand-name { display: flex; align-items: center; gap: 12px; font-size: 21px; min-width: 0; overflow-wrap: anywhere; }
.verification-brand-mark { background: var(--brand-soft); color: var(--sd-primary-text,var(--brand)); border-radius: 50%; width: 48px; height: 48px; display: grid; place-items: center; font-size: 28px; flex: none; }
.verification-card { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--panel); min-width: 0; }
.verification-card h2 { font-size: 16px; margin-bottom: 16px; }
.verification-badge { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 12px; font-weight: 800; }
.verification-head { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 20px; }
.verification-head h1 { font-size: 28px; margin: 12px 0 4px; }
.verification-head p { margin: 0; }
.verification-number { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.verification-number > span, .verification-number > b { display: block; }
.verification-number > b { margin: 6px 0; }
.verification-number > div { display: flex; align-items: center; justify-content: end; gap: 8px; font-size: 12px; }
.verification-number svg { width: 16px; height: 16px; color: var(--sd-primary-text,var(--brand)); }
.verification-salon { display: flex; align-items: center; gap: 14px; background: var(--surface-2); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.verification-salon h2 { margin: 0 0 4px; color: var(--brand-ink); overflow-wrap: anywhere; }
.verification-symbol, .verification-meta > div > svg, .verification-customer-name svg { width: 42px; height: 42px; padding: 10px; background: var(--brand-soft); color: var(--sd-primary-text,var(--brand)); border-radius: 50%; flex: none; }
.verification-symbol svg { width: 100%; height: 100%; }
.verification-salon > .verification-symbol { padding: 6px; }
.verification-branch { display: flex; align-items: center; gap: 10px; min-width: 100px; }
.verification-branch svg { width: 22px; height: 22px; color: var(--sd-primary-text,var(--brand)); }
.verification-branch b { display: block; }
.verification-meta { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; }
.verification-meta > div { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-width: 0; }
.verification-meta span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.verification-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.verification-sidebar { display: grid; gap: 16px; min-width: 0; }
.verification-items .table-wrap { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.verification-items .t { table-layout: fixed; width: 100%; }
.verification-items .t th { background: var(--surface-2); font-size: 11px; padding: 12px 10px; }
.verification-items .t td { padding: 16px 10px; font-size: 13px; overflow-wrap: anywhere; white-space: normal; }
.verification-items table.t th:first-child { width: 42%; }
.verification-items table.t th:nth-child(2) { width: 10%; }
.verification-items table.t th:nth-child(3), .verification-items table.t th:nth-child(4) { width: 24%; }
.verification-items table.t th { text-transform: none; letter-spacing: 0; }
.verification-items table.t td.r, .verification-items table.t th.r { white-space: normal; overflow-wrap: anywhere; }
.verification-totals { margin-top: 16px; padding: 16px; background: var(--surface-2); border-radius: 10px; }
.verification-totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 13px; }
.verification-totals > div > b { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.verification-totals > .verification-total { border-top: 1px solid var(--line); margin: 10px -4px 8px; padding: 14px 4px; font-size: 22px; font-weight: 750; color: var(--brand-ink); }
.verification-refunds { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; font-size: 12px; }
.verification-refunds h3 { margin-bottom: 8px; }
.verification-customer-name { display: flex; align-items: center; gap: 12px; overflow-wrap: anywhere; }
.verification-customer-context { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; display: grid; gap: 4px; }
.verification-customer-context > b { font-size: 12px; margin-bottom: 8px; }
.verification-feedback .f { margin: 0; }
.verification-feedback form { display: grid; gap: 14px; }
.verification-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.verification-stars { color: var(--sd-primary-text,var(--brand)); font-size: 27px; letter-spacing: 3px; white-space: nowrap; }
.verification-rating select { width: 100px; min-height: 44px; }
.verification-feedback textarea { min-height: 96px; resize: vertical; }
.verification-feedback button { min-height: 44px; justify-self: start; }
.verification-feedback [role="alert"] { color: var(--bad); font-size: 12px; }
.verification-feedback input:focus-visible, .verification-feedback select:focus-visible, .verification-feedback textarea:focus-visible, .verification-feedback button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.verification-help { border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 14px; min-width: 0; }
.verification-help h2 { font-size: 14px; color: var(--brand-ink); margin: 0 0 4px; }
.verification-help p { font-size: 12px; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.verification-footer { text-align: center; padding: 20px 12px 8px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .invoice-verification-page #verification-result { padding: 12px; border-radius: 16px; gap: 12px; }
  .verification-brand { margin: -12px -12px 0; padding: 16px 12px; gap: 10px; }
  .verification-brand-name { font-size: 15px; gap: 8px; }
  .verification-brand-mark { width: 34px; height: 34px; font-size: 21px; }
  .verification-brand > .small { display: none; }
  .verification-card { padding: 14px; }
  .verification-head { display: block; margin-bottom: 16px; }
  .verification-head h1 { font-size: 23px; }
  .verification-head p { font-size: 12px; }
  .verification-number { text-align: left; display: grid; grid-template-columns: minmax(0,1fr) auto; margin-top: 16px; font-size: 12px; }
  .verification-number > b { grid-column: 1; margin: 4px 0 0; }
  .verification-number > div { grid-column: 2; grid-row: 1 / 3; }
  .verification-salon { flex-wrap: wrap; padding: 12px; gap: 10px; }
  .verification-salon h2 { font-size: 13px; }
  .verification-salon > .grow { min-width: 0; flex-basis: calc(100% - 52px); }
  .verification-branch { width: 100%; }
  .verification-meta { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .verification-meta > div { gap: 6px; padding: 10px 8px; font-size: 11px; overflow-wrap: anywhere; }
  .verification-meta > div > svg { width: 28px; height: 28px; padding: 6px; }
  .verification-meta span { font-size: 10px; }
  .verification-layout { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .verification-sidebar { display: contents; }
  .verification-customer { order: 1; }
  .verification-customer-context { display: none; }
  .verification-items { order: 2; }
  .verification-feedback { order: 3; }
  .verification-items .t th { font-size: 10px; padding: 10px 5px; }
  .verification-items .t td { font-size: 11px; padding: 12px 5px; }
  .verification-totals { padding: 12px; }
  .verification-totals > div { font-size: 12px; }
  .verification-totals > .verification-total { font-size: 20px; }
}
#print-root { display: none; }
@media print {
  body > *:not(#print-root):not(.invoice-verification-page) { display: none !important; }
  #print-root { display: block; position: static; width: 100%; }
  .invoice-preview-frame > .invoice { position: static; transform: none; }
  .invoice-verification-page, .invoice-verification-page #verification-result { display: block; padding: 0; margin: 0; border: 0; box-shadow: none; max-width: none; }
  .invoice-verification-page #verification-result > :not(.invoice) { display: none !important; }
  .invoice { max-width: none; padding: 0; }
  .invoice thead { display: table-header-group; }
  .invoice tr, .invoice-footer { break-inside: avoid; }
  body { background: #fff; padding: 0; }
  @page { margin: 8mm; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .pos-barcode { align-items:stretch; flex-direction:column; gap:8px; }
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 250px; z-index: 90; transform: translateX(-100%); transition: transform .2s; }
  .side.open { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); }
  .topbar { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; padding: 8px 16px; }
  .page-title-slot { display: contents; }
  .topbar .menu-btn { display: inline-flex; grid-column: 1; grid-row: 1; width: 28px; padding: 0; }
  .page-title-slot > .page-heading-line { grid-column: 2; grid-row: 1; }
  .topbar .topbar-tools { grid-column: 3; grid-row: 1; justify-self: end; }
  .topbar #branch-sel, .topbar > .badge { grid-column: 1 / 3; grid-row: 2; }
  .topbar-new-bill { grid-column: 3; grid-row: 2; white-space: nowrap; }
  .topbar #branch-sel { width: 100% !important; max-width: none !important; }
  .content { padding: 16px; }
  .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
  .span2 { grid-column: auto; }
  .login-main { padding: 36px 20px 28px; }
  .login-card { max-width: 520px; }
  .login-botanical { opacity: .22; width: 120px; height: 224px; }
  .login-features { gap: 10px; }
  .login-features span { flex-direction: column; gap: 4px; font-size: 11px; text-align: center; }
  .permission-groups { grid-template-columns: 1fr; max-height: 52vh; }
  .hide-sm { display: none !important; }
  .dashboard-stock-table { table-layout: fixed; }
  .dashboard-stock-table td { overflow-wrap: anywhere; white-space: normal; }
  .dashboard-stock-table .badge { display: inline-block; max-width: 100%; white-space: normal; }
  .payroll-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { height: auto; min-height: 60px; flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  .topbar h1 { font-size: 16px; }
  .page-back { width: 40px; height: 40px; flex-basis: 40px; }
  .topbar #branch-sel { order: 4; width: 100% !important; max-width: none !important; }
  .topbar .icon-btn { flex-shrink: 0; }
  .card-h, .card-b, .kpi { padding: 12px; }
  .card-h h3 { overflow-wrap: anywhere; }
  .hbar { grid-template-columns: minmax(80px, 1fr) minmax(24px, 1fr) auto; gap: 6px; }
  .modal-bg { padding: 12px 10px; }
  .modal { max-height: calc(100dvh - 24px); }
  .modal-h, .modal-b, .modal-f { padding: 12px; }
  .modal-h { gap: 8px; }
  .modal-h h3 { min-width: 0; overflow-wrap: anywhere; }
  .modal-h .icon-btn { flex-shrink: 0; }
  .toasts { right: 12px; left: 12px; }
  .toast { max-width: 100%; overflow-wrap: anywhere; }
  .permission-list { grid-template-columns: minmax(0, 1fr); }
  .kpi .value { font-size: 21px; }
  .payroll-summary { padding: 8px 10px; gap: 6px; }
  .payroll-metric { padding: 6px 8px; }
  .payroll-metric b { font-size: 14px; }
  .payroll-review { margin: 8px 10px 0; }
  .cart-line { grid-template-columns: minmax(0, 1fr) 54px 80px 26px; }
  .cart-line .nm { overflow-wrap: anywhere; }
  .cart-line > :first-child { grid-column: 1 / -1; }
  .cart-line > [data-f="qty"] { grid-column: 2; }
  .cart-line > input[readonly] { grid-column: 3; }
  .cart-line > [data-del] { grid-column: 4; }
  .pos-next-bar { flex-wrap: wrap; gap: 8px; }
  .login-main { justify-content: flex-start; gap: 18px; padding: 25px 14px 24px; }
  .login-logo { width: 49px; height: 49px; border-radius: 13px; font-size: 23px; }
  .login-brand { gap: 12px; }
  .login-brand strong { font-size: 26px; }
  .login-brand > div > span { font-size: 14px; margin-top: 2px; }
  .login-card { padding: 29px 20px 21px; border-radius: 15px; }
  .login-heading { margin-bottom: 25px; }
  .login-heading h1 { font-size: 28px; }
  .login-heading p { font-size: 14px; }
  .login-input-wrap input { height: 54px; }
  .login-input-wrap .password-toggle { top: 8px; }
  .login-options { align-items: flex-start; }
  .login-footer { min-height: 74px; padding: 13px 8px; }
  .login-features { grid-template-columns: repeat(5, minmax(58px, 1fr)); gap: 3px; }
  .login-features span { white-space: normal; font-size: 9px; line-height: 1.15; }
  .login-features svg { width: 20px; height: 20px; }
  .login-botanical { display: none; }
}
/* Dashboard navigation preserves existing card and chart dimensions. */
.dashboard-action { cursor: pointer; }
.kpi.dashboard-action { position: relative; transition: transform var(--interaction-duration) var(--interaction-ease), box-shadow var(--interaction-duration) var(--interaction-ease), border-color var(--interaction-duration) var(--interaction-ease), background-color var(--interaction-duration) var(--interaction-ease); }
.dashboard-card-link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.kpi.dashboard-action a:not(.dashboard-card-link), .kpi.dashboard-action button { position: relative; z-index: 2; }
.dashboard-card-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.dashboard-action:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.dashboard-view .kpi.dashboard-action .label { padding-right: 18px; }
.dashboard-card-link::after { content: '→'; position: absolute; right: 12px; bottom: 12px; color: var(--sd-primary-text,var(--brand)); opacity: 0; transform: translateX(-2px); transition: opacity var(--interaction-duration) var(--interaction-ease), transform var(--interaction-duration) var(--interaction-ease); }
.dashboard-view .kpi.dashboard-action:focus-within { border-color: var(--brand); box-shadow: var(--interaction-shadow); }
.dashboard-view .kpi.dashboard-action:focus-within .dashboard-card-link::after { opacity: 1; transform: none; }
.dashboard-view .kpi.dashboard-action:active, .dashboard-view .kpi.dashboard-action.is-navigating { transform: none; background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.dashboard-view .hbar.dashboard-action { border-radius: 6px; transition: background-color var(--interaction-duration) var(--interaction-ease); }
.dashboard-view .hbar.dashboard-action .fill, .dashboard-view .bars i.dashboard-action { transition: filter var(--interaction-duration) var(--interaction-ease); }
.dashboard-view .bars i:not(.dashboard-action):hover { filter: none; }
.dashboard-view .hbar.dashboard-action:focus-visible, .dashboard-view .hbar.dashboard-action:active { background: var(--brand-soft); }
.dashboard-view .bars i.dashboard-action:focus-visible { outline-offset: 3px; filter: brightness(1.12); }
.dashboard-view tr.dashboard-action td { transition: background-color var(--interaction-duration) var(--interaction-ease); }
.dashboard-view tr.dashboard-action td:first-child { position: relative; padding-right: 24px; }
.dashboard-row-cue { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity var(--interaction-duration) var(--interaction-ease); }
.dashboard-view tr.dashboard-action:focus-within td, .dashboard-view tr.dashboard-action:active td { background: var(--brand-soft); }
.dashboard-view tr.dashboard-action:focus-within .dashboard-row-cue { opacity: 1; }
.dashboard-view a:not(.dashboard-card-link):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 3px; }
.dashboard-view .card-h a { transition: color var(--interaction-duration) var(--interaction-ease); }
.dashboard-view a:not(.dashboard-card-link):active { color: var(--brand-ink); background: var(--brand-soft); }
.dashboard-chart-tooltip { position: fixed; z-index: 100; max-width: min(300px, calc(100vw - 16px)); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); box-shadow: var(--interaction-shadow); font-size: 12px; line-height: 1.4; pointer-events: none; overflow-wrap: anywhere; }
.navigation-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px 16px; color: var(--muted); font-size: 12px; }
.navigation-spinner { width: 14px; height: 14px; flex: 0 0 14px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: navigation-spin .8s linear infinite; }
@keyframes navigation-spin { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
  .dashboard-view .kpi.dashboard-action:hover { transform: translateY(-1px); border-color: var(--brand); box-shadow: var(--interaction-shadow); }
  .dashboard-view .kpi.dashboard-action:hover .dashboard-card-link::after { opacity: 1; transform: none; }
  .dashboard-view .kpi.dashboard-action:active { transform: none; box-shadow: inset 0 0 0 1px var(--brand); }
  .dashboard-view .hbar.dashboard-action:hover, .dashboard-view tr.dashboard-action:hover td { background: var(--brand-soft); }
  .dashboard-view .hbar.dashboard-action:hover .fill, .dashboard-view .bars i.dashboard-action:hover { filter: brightness(1.12); }
  .dashboard-view tr.dashboard-action:hover .dashboard-row-cue { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-view .dashboard-action, .dashboard-view .dashboard-action *, .dashboard-card-link::after, .navigation-spinner { transition: none !important; animation: none !important; }
  .dashboard-view .kpi.dashboard-action { transform: none !important; }
}
.navigation-context { margin: 0 0 8px; }
.reports-view .hbar.dashboard-action { border-radius: 6px; transition: background-color var(--interaction-duration) var(--interaction-ease); }
.reports-view .hbar.dashboard-action .fill, .reports-view .bars i.dashboard-action { transition: filter var(--interaction-duration) var(--interaction-ease); }
.reports-view .hbar.dashboard-action:focus-visible, .reports-view .hbar.dashboard-action:active { background: var(--brand-soft); }
.reports-view .bars i.dashboard-action:focus-visible { outline-offset: 3px; filter: brightness(1.12); }
@media (hover: hover) and (pointer: fine) {
  .reports-view .hbar.dashboard-action:hover { background: var(--brand-soft); }
  .reports-view .hbar.dashboard-action:hover .fill, .reports-view .bars i.dashboard-action:hover { filter: brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .reports-view .dashboard-action, .reports-view .dashboard-action * { transition: none !important; }
}

/* Shared surfaces follow appearance; printed invoices and QR codes retain white paper. */
:root[data-theme="dark"] :is(input, select, textarea, .modal, .tile,
  .tile-quantity, .dropdown, .chip, .appointment-service, .cal .hdr, .cal .corner, .cal .times, .cal .appt) {
  background: var(--panel);
}
:root[data-theme="dark"] :is(table.t th, table.t tfoot td, .payroll-metric) { background: var(--surface-2); }
/* A table selector inside :is() would also raise button-hover specificity. */
:root[data-theme="dark"] :where(.btn:hover, .tile:hover),
:root[data-theme="dark"] table.t tbody tr.click:hover td { background: var(--hover-surface); }
:root[data-theme="dark"] :is(.payroll-review, .payroll-integrity-warning, .cal .appt.st-arrived) { background: var(--warn-soft); }
:root[data-theme="dark"] .cal .appt.st-completed { background: var(--ok-soft); }
:root[data-theme="dark"] .cal .appt:is(.st-cancelled, .st-noshow) { opacity: 1; color: var(--muted); background: var(--surface-2); }
:root[data-theme="dark"] .cal { --calendar-half-line: color-mix(in srgb, var(--ink) 8%, transparent); --calendar-hour-line: color-mix(in srgb, var(--ink) 18%, transparent); }
:root[data-theme="dark"] :is(.btn.primary, .chip.on) { background: var(--brand); color: var(--on-brand); }
:root[data-theme="dark"] .btn.ok { background: var(--ok); color: var(--on-success); }
/* Pair foregrounds with their actual state surface. Keep decorative separators
   subdued; only meaningful control boundaries need the stronger border token. */
:root[data-theme="dark"] :where(.btn, .chip, input, select, textarea, .appointment-service, .dashboard-presets button) { border-color: var(--control-border); }
:root[data-theme="dark"] .btn.ghost { border-color: transparent; }
:root[data-theme="dark"] .btn.danger { border-color: var(--bad); }
:root[data-theme="dark"] :is(.btn.primary, .chip.on) { border-color: var(--brand); }
:root[data-theme="dark"] .seg button.on,
:root[data-theme="dark"] .dashboard-presets button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
:root[data-theme="dark"] :is(.chip.on, .seg button.on) { box-shadow: none; }
:root[data-theme="dark"] .appointment-service.on .appointment-service-check { color: var(--on-brand); }
:root[data-theme="dark"] .appointment-service.on { background: var(--brand-soft); border-color: var(--brand); }
:root[data-theme="dark"] .nav .sec { color: var(--muted); }
:root[data-theme="dark"] .login-link { color: var(--sd-primary-text,var(--brand)); }
:root[data-theme="dark"] .tile.oos { opacity: 1; color: var(--muted); border-style: dashed; }
:root[data-theme="dark"] .tile.oos .p { color: var(--muted); }
:root[data-theme="dark"] :where(.chip:not(.on):hover, .seg button:not(.on):hover, .tabs button:hover) { background: var(--brand-soft); color: var(--ink); }
:root[data-theme="dark"] .btn.primary:hover:enabled,
:root[data-theme="dark"] .chip.on:hover:enabled { background: var(--sd-primary-hover,var(--brand-ink)); color: var(--on-brand); }
:root[data-theme="dark"] .btn.wa { background: var(--ok); border-color: var(--ok); color: var(--ok-soft); }
:root[data-theme="dark"] :is(.btn.ok, .btn.wa):hover:enabled { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
:root[data-theme="dark"] :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
:root[data-theme="dark"] :where(input, select, textarea):focus { border-color: var(--brand); }
:root[data-theme="dark"] :is(input, select, textarea)[aria-invalid="true"],
:root[data-theme="dark"] input.branch-phone-invalid { border-color: var(--bad); }
:root[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
:root[data-theme="dark"] :is(button, .btn, .chip, .seg button, .tabs button, input, select, textarea):disabled {
  opacity: 1; color: var(--muted); background: var(--surface-2); border-color: var(--control-border); border-style: dashed; cursor: not-allowed;
}
:root[data-theme="dark"] :is(input, textarea):disabled { -webkit-text-fill-color: var(--muted); }
:root[data-theme="dark"] .search::before {
  background: var(--muted);
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .notification-count { color: var(--on-error); }
:root[data-theme="dark"] .toast { color: var(--bg); }
:root[data-theme="dark"] .toast.ok { color: #fff; }
:root[data-theme="dark"] .invoice {
  color-scheme: light;
  --ink: #111; --ink-2: #3d3642; --muted: #555; --panel: #fff;
  --brand: #7a2e5c; --brand-ink: #5e2146; --brand-soft: #f7ebf2;
  --line: #e8e1e5; --line-2: #f1ecef;
}
@media print {
  :root[data-theme="dark"] {
    color-scheme: light;
    --bg: #fff; --panel: #fff; --ink: #1f1a24; --ink-2: #3d3642; --muted: #71697a;
    --line: #e8e1e5; --line-2: #f1ecef; --brand: #7a2e5c; --brand-ink: #5e2146; --brand-soft: #f7ebf2;
  }
}

/* Staff performance enhancement: scoped layout only; existing theme and financial components. */
.staff-performance-dashboard { display:grid; gap:14px; min-width:0; }
.staff-performance-dashboard .performance-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.staff-performance-dashboard .kpi { padding:14px; min-width:0; }
.staff-performance-dashboard .kpi .value { font-size:21px; overflow-wrap:anywhere; }
.staff-performance-dashboard .performance-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.staff-performance-dashboard .performance-pair > *, .staff-performance-dashboard .card-h > * { min-width:0; }
.staff-performance-dashboard .card-h { flex-wrap:wrap; gap:8px; }
.staff-performance-dashboard .card-h select { width:auto; max-width:100%; }
.staff-performance-dashboard .performance-filters { display:flex; flex-wrap:wrap; gap:12px; }
.staff-performance-dashboard .performance-filters .f { flex:1; min-width:0; max-width:320px; }
.staff-performance-dashboard .performance-chart .bars { overflow:visible; gap:2px; padding-bottom:24px; }
.staff-performance-dashboard .performance-chart .b { position:relative; min-width:0; }
.staff-performance-dashboard .performance-chart .b span { position:absolute; bottom:-24px; font-size:10px; white-space:nowrap; }
.staff-performance-dashboard .performance-chart .b:first-child span { left:0; }
.staff-performance-dashboard .performance-chart .b:last-child span { right:0; }
.staff-performance-dashboard .performance-chart .b:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.staff-performance-dashboard .performance-ranking { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.staff-performance-dashboard .performance-ranking li { display:flex; gap:10px; align-items:center; }
.staff-performance-dashboard .performance-rank { flex:0 0 26px; text-align:center; background:var(--brand-soft); color:var(--brand-ink); border-radius:8px; padding:5px; font-weight:700; }
.staff-performance-dashboard .performance-rank-content { min-width:0; flex:1; overflow-wrap:anywhere; }
.staff-performance-dashboard .performance-job { display:block; }
.staff-performance-dashboard progress { appearance:none; height:7px; width:100%; border:0; border-radius:8px; overflow:hidden; background:var(--line); }
.staff-performance-dashboard progress::-webkit-progress-bar { background:var(--line); }
.staff-performance-dashboard progress::-webkit-progress-value { background:var(--sd-chart-1); border-radius:8px; }
.staff-performance-dashboard progress::-moz-progress-bar { background:var(--sd-chart-1); }
.staff-performance-dashboard table.t.performance-table { width:100%; table-layout:fixed; }
.staff-performance-dashboard table.t.performance-table td,.staff-performance-dashboard table.t.performance-table th { white-space:normal; overflow-wrap:anywhere; padding:10px 8px; }
.staff-performance-dashboard table.t.performance-table th { width:auto; }
.staff-performance-dashboard table.t.performance-table .btn { white-space:normal; }
.staff-performance-dashboard .performance-data { margin:12px 0; }
.staff-performance-dashboard .performance-data > div { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding:7px 0; }
.staff-performance-dashboard .performance-data dt { overflow-wrap:anywhere; }
.staff-performance-dashboard .performance-data dd { margin:0; text-align:right; flex-shrink:0; }
@media(max-width:1000px) { .staff-performance-dashboard .performance-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:768px) { .staff-performance-dashboard .performance-pair { grid-template-columns:minmax(0,1fr); } }
@media(max-width:1100px) {
 .staff-performance-dashboard table.t.performance-table,.staff-performance-dashboard table.t.performance-table tbody,.staff-performance-dashboard table.t.performance-table tfoot { display:block; }
 .staff-performance-dashboard table.t.performance-table thead { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
 .staff-performance-dashboard table.t.performance-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); padding:10px; }
 .staff-performance-dashboard table.t.performance-table td { display:block; width:auto!important; border:0; text-align:left; min-width:0; }
 .staff-performance-dashboard table.t.performance-table td::before { content:attr(data-label); display:block; font-size:11px; color:var(--muted); }
 .staff-performance-dashboard table.t.performance-table tfoot td:first-child { grid-column:1/-1; font-weight:700; }
}
@media(max-width:360px) { .staff-performance-dashboard .performance-kpis { grid-template-columns:minmax(0,1fr); } }

.staff-performance-dashboard { overflow-wrap:anywhere; }
.staff-performance-dashboard .performance-initials { display:grid; place-items:center; flex:0 0 28px; height:28px; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink); font-size:11px; font-weight:700; }
.staff-performance-dashboard .performance-data > div { flex-wrap:wrap; }
.staff-performance-dashboard .performance-data dd { max-width:100%; margin-left:auto; overflow-wrap:anywhere; }
.staff-performance-dashboard [data-performance-invoice] { white-space:normal; max-width:100%; overflow-wrap:anywhere; margin:3px; }

.staff-performance-dashboard .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Performance interactions use the same surfaces and accent as existing controls. */
.staff-performance-dashboard .performance-kpi-action { font:inherit; color:var(--ink); text-align:left; cursor:pointer; width:100%; }
.staff-performance-dashboard .performance-kpi-action:hover { border-color:var(--brand); }
.staff-performance-dashboard .performance-kpi-action:focus-visible,
.staff-performance-dashboard .performance-rank-link:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; }
.staff-performance-dashboard .performance-rank-link { padding:2px 0; border:0; border-radius:3px; background:transparent; box-shadow:none; color:inherit; font:inherit; text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.staff-performance-dashboard .performance-rank-link:hover,
.staff-performance-dashboard .performance-rank-link[aria-pressed="true"] { color:var(--sd-primary-text,var(--brand)); text-decoration:underline; text-underline-offset:3px; }

.staff-performance-dashboard .performance-table-header { flex-wrap:wrap; gap:10px 16px; align-items:center; }
.staff-performance-dashboard .performance-table-tools { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px; margin-left:auto; max-width:100%; }
.staff-performance-dashboard .performance-table-tools select { width:auto; max-width:100%; min-width:0; height:32px; font-size:12px; color:var(--ink-2); }
.staff-performance-dashboard .performance-table-tools .btn { height:32px; }
.staff-performance-dashboard .performance-role-filter { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-block:8px; }
.staff-performance-dashboard .performance-pagination { flex-wrap:wrap; gap:10px; }
.staff-performance-dashboard .performance-pagination .report-pagination-actions { flex-wrap:wrap; gap:6px; }
.staff-performance-dashboard .performance-pagination [aria-current=page] { background:var(--brand-soft); border-color:var(--brand); color:var(--sd-primary-text,var(--brand)); font-weight:700; }
.pos-payment-row .pos-payment-error { grid-column:1/-1; color:var(--bad); overflow-wrap:anywhere; }
.pos-cash-breakdown { grid-column:1/-1; }
.pos-cash-breakdown .inline { display:flex; align-items:center; gap:6px; min-height:44px; }
.pos-cash-breakdown input[type=checkbox] { width:16px; height:16px; padding:0; flex:none; }

.staff-performance-dashboard #performance-table-card { scroll-margin-block-start:8rem; }
.staff-performance-dashboard .performance-table-focus,
.staff-performance-dashboard tr.performance-table-focus > td { background:var(--brand-soft); }
.staff-performance-dashboard .performance-target-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.staff-performance-dashboard .performance-target-grid > div { min-width:0; overflow-wrap:anywhere; }
.performance-target-settings { min-width:0; }
.performance-target-settings [hidden] { display:none !important; }
.performance-target-settings .performance-target-history { padding:0; }
.performance-target-history table { table-layout:auto; }
.performance-target-history th,.performance-target-history td { overflow-wrap:anywhere; white-space:normal; }
.performance-target-history table.t th { white-space:nowrap; }
.performance-target-history table.t th.num { width:auto; }
.performance-target-history .target-history-description { display:block; margin-top:3px; white-space:normal; overflow-wrap:anywhere; }
@media(max-width:860px) {
 .performance-target-history table,.performance-target-history tbody { display:block; }
 .performance-target-history thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .performance-target-history tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:10px 12px; gap:8px 12px; border-bottom:1px solid var(--line); }
 .performance-target-history table.t td { padding:0; border:0; text-align:left; }
 .performance-target-history td::before { content:attr(data-label); display:block; font-size:11.5px; font-weight:500; color:var(--muted); margin-bottom:2px; }
 .performance-target-history td:first-child,.performance-target-history td:last-child { grid-column:1/-1; }
}
.performance-target-settings select,.performance-target-settings input { max-width:100%; min-width:0; }
@media(max-width:390px) { .staff-performance-dashboard .performance-target-grid { grid-template-columns:minmax(0,1fr); } }

/* Settings navigation wraps rather than creating nested two-axis scrollers. */
.settings-tabs button, .settings-subtabs button { margin-bottom:0; }
.settings-tabs button, .settings-subtabs button { white-space:normal; text-align:left; }

/* Attendance configuration: full-width cards and compact, aligned field groups. */
.attendance-settings { width:100%; min-width:0; gap:12px; }
.attendance-settings [hidden] { display:none !important; }
.attendance-settings .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.attendance-settings .card-b.stack { gap:12px; }
.attendance-settings .card-h, .attendance-settings .card-b { padding:14px 16px; }
.attendance-settings p, .attendance-settings h4 { margin:0; }
.attendance-settings h4 { font-size:13px; padding-top:4px; }
.attendance-settings :is(.attendance-form-grid,.attendance-rule-row,.attendance-salary-grid) { display:grid; gap:12px 16px; align-items:end; }
.attendance-settings .attendance-form-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.attendance-settings .attendance-rule-row { grid-template-columns:minmax(0,240px) minmax(0,340px); }
.attendance-settings .attendance-salary-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); align-items:start; }
.attendance-settings .attendance-method { padding-top:0; }
.attendance-settings .attendance-duration { font-size:12px; font-weight:400; color:var(--ink-2); }
.attendance-settings .attendance-duration legend { padding:0; margin-bottom:5px; }
.attendance-settings .attendance-duration-inputs { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:264px; gap:8px; }
.attendance-settings .attendance-duration-inputs label { flex-direction:row; align-items:center; gap:6px; font-weight:400; }
.attendance-settings .attendance-duration-inputs input { flex:1; padding:0 7px; }
.attendance-settings .attendance-checkbox { min-height:38px; margin:0; font-weight:400; }
.attendance-settings .attendance-checkbox input { flex-shrink:0; }
.attendance-settings :is(input,select) { height:38px; }
.attendance-settings input[type=checkbox] { height:16px; }
.attendance-settings :is([name=hourly_amount],[name=multiplier],[name=rounding_minutes]) { max-width:160px; }
.attendance-settings .f small { font-weight:400; line-height:1.4; }
@media(max-width:600px) {
 .attendance-settings .attendance-rule-row { grid-template-columns:minmax(0,1fr); align-items:start; }
 .attendance-settings .attendance-method { padding-top:0; }
 .attendance-settings .card-h, .attendance-settings .card-b { padding:12px; }
}

/* Attendance policy groups share one save operation, with optional advanced previews. */
.attendance-policy { gap:16px; min-width:0; }
.attendance-hours-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.attendance-hours-fields { display:grid; gap:16px; align-content:start; }
.attendance-policy .card-h p { margin-top:5px; font-weight:400; }
.attendance-policy .attendance-duration { width:100%; max-width:264px; }
.attendance-policy .attendance-week-start { max-width:264px; }
.attendance-advanced summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; cursor:pointer; list-style:none; border-radius:var(--radius); }
.attendance-advanced summary::-webkit-details-marker { display:none; }
.attendance-advanced summary .small { display:block; margin-top:5px; font-weight:400; }
.attendance-advanced summary::after { content:'⌄'; font-size:20px; flex-shrink:0; transition:transform .16s ease; color:var(--ink-2); }
.attendance-advanced[open] summary::after { transform:rotate(180deg); }
.attendance-advanced summary:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.attendance-policy-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px; }
.attendance-policy-actions [role=alert] { flex:1 1 240px; }
@media(min-width:1200px) { .attendance-policy .attendance-form-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:700px) { .attendance-hours-cards { grid-template-columns:minmax(0,1fr); } }
@media(max-width:600px) { .attendance-advanced summary { padding:12px; } .attendance-policy-actions .btn { width:100%; } }
@media(prefers-reduced-motion:reduce) { .attendance-advanced summary::after { transition:none; } }

/* Attendance designations share the existing form dimensions and theme. */
.attendance-role-picker{position:relative;min-width:0;display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-2)}
.attendance-role-trigger{display:grid;grid-template-columns:minmax(0,1fr) 16px;width:100%;min-width:0;gap:10px;align-items:center;text-align:left;height:38px;padding:0 11px;font-size:14px;font-weight:400;border-radius:9px;background:var(--panel)}
.attendance-role-trigger span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attendance-role-options{position:absolute;top:100%;left:0;width:100%;min-width:0;z-index:20;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.attendance-role-options[hidden]{display:none}
.attendance-role-options label{display:flex;align-items:center;gap:8px;padding:7px 2px;font-size:13px;overflow-wrap:anywhere}
.attendance-role-options input[type=checkbox]{flex:0 0 auto;width:16px;height:16px}
.attendance-role-list{max-height:220px;max-height:min(220px,40vh);overflow-y:auto;margin-block:5px}
#attendance-role-review{margin-top:12px;overflow-wrap:anywhere}
#attendance-role-review p{margin:6px 0}
#attendance-role-review .attendance-checkbox{display:flex;align-items:flex-start;gap:8px;margin-top:8px}
#attendance-role-review input{flex:0 0 auto;width:16px;height:16px}

/* Native disclosure controls retain form state and the existing assignment-history interaction. */
.attendance-settings .attendance-hours-cards{display:contents}
.attendance-settings,.attendance-settings .attendance-policy{gap:10px}
.attendance-accordion{min-width:0}
.attendance-accordion > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;list-style:none;cursor:pointer;border-radius:var(--radius);font-size:14px;font-weight:600}
.attendance-accordion > summary::-webkit-details-marker{display:none}
.attendance-accordion > summary::after{content:'›';flex:0 0 auto;color:var(--ink-2);font-size:20px;line-height:1;transition:transform .18s ease}
.attendance-accordion[open] > summary::after{transform:rotate(90deg)}
.attendance-accordion > summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.attendance-accordion > .card-b{border-top:1px solid var(--line);min-width:0}
.attendance-settings .f,.attendance-settings input,.attendance-settings select,.attendance-settings textarea,.attendance-settings .small,.attendance-settings .muted{font-weight:400}
.attendance-settings input::placeholder,.attendance-settings textarea::placeholder{font-weight:300}
.attendance-section-description{display:block;margin:0 0 10px;font-weight:400;grid-column:1/-1}
.attendance-policy-actions{margin-top:12px}
.attendance-policy-actions > p:first-child{flex-basis:100%;margin:0}
@supports(interpolate-size:allow-keywords){
 .attendance-accordion{interpolate-size:allow-keywords}
 .attendance-accordion::details-content{block-size:0;opacity:0;overflow:clip;transition:block-size .18s ease,opacity .18s ease}
 .attendance-accordion[open]::details-content{block-size:auto;opacity:1;overflow:visible}
}
@media(max-width:600px){.attendance-accordion > summary{padding:12px}}
@media(prefers-reduced-motion:reduce){.attendance-accordion > summary::after,.attendance-accordion::details-content{transition:none}}

/* Settings uses the existing main-navigation breakpoint, with URL-backed destinations. */
.settings-mobile-nav,.attendance-explanation-mobile{display:none}
.settings-navigation-backdrop{justify-content:flex-end;align-items:stretch;padding:0;animation:none}
.settings-navigation-drawer{width:min(380px,calc(100vw - 20px));height:100dvh;max-height:100dvh;margin:0;border-radius:var(--radius) 0 0 var(--radius);display:flex;flex-direction:column;background:var(--panel);box-shadow:var(--shadow);animation:none}
.settings-navigation-drawer .modal-h{flex:0 0 auto}
.settings-navigation-drawer .modal-h .icon-btn{width:40px;height:40px}
.settings-navigation-drawer .modal-b{flex:1;overflow-y:auto;min-height:0;padding:12px}
.settings-drawer-group{border-bottom:1px solid var(--line);padding:4px 0}
.settings-drawer-category{display:flex;border-radius:8px}
.settings-drawer-category.active{background:var(--brand-soft)}
.settings-drawer-group button{font:inherit;font-size:13px;text-align:left;color:var(--ink);border:0;border-radius:8px;background:transparent;min-height:42px;padding:10px 12px;cursor:pointer;overflow-wrap:anywhere}
.settings-drawer-category button:first-child{flex:1;min-width:0;font-weight:600}
.settings-drawer-category button[data-expand]{flex:0 0 40px;text-align:center}
.settings-drawer-group > div[id] > button{display:block;width:100%;padding-left:24px}
.settings-drawer-group [hidden]{display:none}
.settings-drawer-group button:hover,.settings-drawer-group [aria-current=page]{background:var(--brand-soft);color:var(--brand-ink)}
.settings-drawer-group [aria-current=page]{border-inline-start:3px solid var(--brand);font-weight:600}
.settings-drawer-group button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
@media(max-width:860px){
 .settings-mobile-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 40px;align-items:center;gap:8px;margin-bottom:12px}
 .settings-mobile-nav select{width:100%;min-width:0;height:40px;font-size:13px;padding:8px;border-radius:8px;color:var(--ink);background:var(--panel);border:1px solid var(--line)}
 .settings-mobile-nav select[hidden]{display:none}
 .settings-mobile-nav .icon-btn{width:40px;height:40px;padding:9px}
 .settings-mobile-nav.single-section{grid-template-columns:minmax(0,1fr) 40px}
 .settings-tabs,.settings-subtabs{display:none}
 .attendance-explanation-desktop{display:none}
 .attendance-explanation-mobile{display:block;font-size:12px;color:var(--muted)}
 .attendance-explanation-mobile > summary{cursor:pointer;padding:4px 0;width:fit-content}
 .attendance-explanation-mobile p{margin:6px 0;line-height:1.5}
}
@media(max-width:540px){
 .settings-mobile-nav{grid-template-columns:minmax(0,1fr) 40px}
 .settings-mobile-nav select[aria-label="Settings category"]{grid-column:1;grid-row:1}
 .settings-mobile-nav button{grid-column:2;grid-row:1}
 .settings-mobile-nav select[aria-label="Settings section"]{grid-column:1/-1;grid-row:2}
}

/* Presentation hierarchy: ordinary records stay regular; totals and alerts retain emphasis. */
h1,h2,h3,h4,h5,h6 { font-weight:600; }
input::placeholder,textarea::placeholder { font-weight:300; color:var(--muted); opacity:1; }
select:not(:disabled):has(option[data-placeholder]:checked),
.attendance-role-trigger[data-placeholder="true"] #attendance-role-summary { font-weight:300; color:var(--muted); }
select option { font-weight:400; color:var(--ink); }
select option[data-placeholder] { font-weight:300; color:var(--muted); }
table.t tbody td,table.t tbody td :is(b,strong,.badge) { font-weight:400; }
table.t tbody :is([role="alert"],.bad,.warn) :is(b,strong),
table.t tbody tr:is(.total,.grand,.big) :is(td,b,strong) { font-weight:600; }
.small,.muted { font-weight:400; }
[data-overtime] .card-h h3,.performance-ranking b,.performance-ranking .performance-rank-link { font-weight:400; }
.attendance-settings :is(label,small),.performance-target-settings small { font-weight:400; }

select:disabled option[data-placeholder] { font-weight:400; color:inherit; }

.payroll-metric b,.staff-performance-dashboard .performance-target-grid b { font-weight:400; }

/* Overtime uses one compact authorized queue; reviews stay beside their record. */
.overtime-view { min-width:0; }
.overtime-view [hidden] { display:none!important; }
.overtime-view #ot-self-container:empty { display:none; }
.overtime-heading { flex-wrap:wrap; align-items:flex-end; gap:12px; }
.overtime-heading h3 { margin:0; align-self:center; }
.overtime-filters { display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; min-width:0; }
.overtime-filters .f { flex:1 1 120px; width:130px; max-width:180px; min-width:0; }
.overtime-filters :is(input,select) { height:34px; font-size:13px; }
.overtime-policy-note { margin:10px 16px; }
.overtime-table { table-layout:auto; }
.overtime-table .overtime-record td { border-bottom:1px solid var(--line); }
.overtime-table .overtime-record td:first-child { width:28%; overflow-wrap:anywhere; }
.overtime-name { font-weight:400; }
.overtime-table .badge { white-space:normal; }
.overtime-table .overtime-review>td { padding:0; border-bottom:1px solid var(--line); }
.overtime-review-panel { padding:14px 16px; background:var(--surface-2,var(--line-2)); }
.overtime-review-heading { display:flex; justify-content:space-between; align-items:start; gap:12px; margin-bottom:12px; }
.overtime-review-heading h4 { margin:0; font-size:14px; font-weight:400; overflow-wrap:anywhere; }
.overtime-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.overtime-summary>div { padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); min-width:0; overflow-wrap:anywhere; }
.overtime-duration { font-size:16px; font-weight:500; margin:3px 0; font-variant-numeric:tabular-nums; }
.overtime-compliance { margin:10px 0; }
.overtime-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 20px; margin:12px 0; }
.overtime-facts>div { min-width:0; overflow-wrap:anywhere; }
.overtime-facts dt { font-size:12px; color:var(--muted); font-weight:400; }
.overtime-facts dd { margin:2px 0 0; font-weight:400; }
.overtime-facts .overtime-note { grid-column:1/-1; }
.overtime-actions { display:flex; flex-wrap:wrap; gap:8px; padding-top:12px; border-top:1px solid var(--line); }
.overtime-history { margin:0; padding-left:20px; }
.overtime-history li { padding:8px 0; border-bottom:1px solid var(--line); }
.overtime-history p { margin:4px 0; }
.overtime-view #ot-pagination { flex-wrap:wrap; gap:10px; }
.overtime-view #ot-pagination .report-pagination-actions { flex-wrap:wrap; }
.overtime-view #ot-pagination [aria-current="page"] { background:var(--brand-soft); border-color:var(--brand); color:var(--brand-ink); }
@media(max-width:1000px) { .overtime-filters { width:100%; } .overtime-filters .f { max-width:none; } }
@media(max-width:1000px) {
 .overtime-table,.overtime-table tbody { display:block; }
 .overtime-table colgroup { display:none; }
 .overtime-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .overtime-table .overtime-record { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; padding:12px; border-bottom:1px solid var(--line); }
 .overtime-table .overtime-record td { width:auto!important; padding:0; border:0; text-align:left; white-space:normal; min-width:0; }
 .overtime-table .overtime-record td:nth-child(2),.overtime-table .overtime-record td:last-child { text-align:right; }
 .overtime-table .overtime-record td[data-label]:not(:first-child)::before { content:attr(data-label); display:block; color:var(--muted); font-size:11.5px; font-weight:500; }
 .overtime-table .overtime-review { display:block; }
 .overtime-table .overtime-review>td { display:block; width:auto; }
 .overtime-review-panel { padding:12px; }
 .overtime-facts { grid-template-columns:minmax(0,1fr); }
 .overtime-actions .btn { flex:1 1 auto; }
 .overtime-record .btn,.overtime-view #ot-pagination .btn { min-height:36px; }
}
@media(max-width:390px) { .overtime-summary { grid-template-columns:minmax(0,1fr); } }

/* Stocktake list: shared native column geometry, compact toolbar/actions. */
.stocktakes-toolbar { min-height:54px; padding:8px 16px; }
table.stocktakes-table :is(th,td).stocktake-center { text-align:center; font-variant-numeric:tabular-nums; }
.stocktakes-table .stocktake-row-action { height:40px; min-width:116px; }

/* Attendance settings: five compact groups, with one unified scope control. */
.attendance-control-chevron{display:flex;width:16px;height:16px;align-items:center;justify-content:center;pointer-events:none;border:0;background:none;box-shadow:none;padding:0;transform:rotate(90deg)}
.attendance-control-chevron svg{display:block;width:16px;height:16px}
.attendance-scope-select{position:relative}
.attendance-scope-select select{appearance:none;padding-right:37px;background:var(--panel)}
.attendance-scope-select > .attendance-control-chevron{position:absolute;right:11px;bottom:11px}
.attendance-settings-review .attendance-accordion > summary{font-weight:500}
.attendance-settings-review .attendance-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.attendance-settings-review .attendance-subsection{min-width:0;display:grid;gap:12px}
.attendance-settings-review .attendance-subsection + .attendance-subsection{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.attendance-settings-review .attendance-related-grid > .attendance-subsection + .attendance-subsection{border-top:0;border-left:1px solid var(--line);padding:0 0 0 16px;margin:0}
.attendance-settings-review .attendance-subsection h4,.attendance-settings-review h3{font-weight:500}
.attendance-settings-review .attendance-hours-fields{grid-template-columns:repeat(2,minmax(0,264px));gap:16px}
.attendance-settings-review #attendance-salary .card-b > .attendance-subsection{border-top:1px solid var(--line);padding-top:14px}
.attendance-settings-review .attendance-policy-actions{margin-top:0;padding:4px 0}
.attendance-settings-review .attendance-difference-disclosure summary{cursor:pointer;font-weight:400;padding:6px 0}
.attendance-difference-role{padding:6px 0;border-top:1px solid var(--line-2)}
.attendance-mixed-marker{display:block;font-weight:400;margin-top:4px;line-height:1.4}
.attendance-change-review{display:grid;gap:14px;margin:14px 0}
.attendance-change-review h4{margin:0 0 7px;font-weight:500}
.attendance-change-review dl{margin:0;display:grid;gap:6px}
.attendance-change-review dl > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.attendance-change-review dd{margin:0;overflow-wrap:anywhere}
@media(max-width:700px){
 .attendance-settings-review .attendance-related-grid,.attendance-settings-review .attendance-hours-fields{grid-template-columns:minmax(0,1fr)}
 .attendance-settings-review .attendance-related-grid > .attendance-subsection + .attendance-subsection{border-left:0;border-top:1px solid var(--line);padding:14px 0 0;margin:0}
}
.attendance-role-options label[hidden]{display:none}
.attendance-settings-review .attendance-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1200px){.attendance-settings-review .attendance-form-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.attendance-settings-review .attendance-form-grid{grid-template-columns:minmax(0,1fr)}}
/* Purchase documents use ordinary data typography and compact receiving history. */
.purchase-product-name,.purchase-document,.purchase-document :is(b,strong){font-weight:400}
.purchase-document h4{font-size:14px;font-weight:500;margin:0}
.purchase-document{display:grid;gap:14px;min-width:0}
.purchase-row-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:230px;min-width:150px}
.receiving-summary{border:1px solid var(--line);border-radius:var(--radius);padding:12px;display:grid;gap:10px}
.receiving-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.purchase-history-filters{align-items:end;display:grid;grid-template-columns:minmax(160px,2fr) minmax(130px,1fr) minmax(120px,1fr) minmax(120px,1fr) auto;gap:10px}
.purchase-history-filters .f{margin:0}
.purchase-history-scope{padding:8px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.receipt-totals{text-align:right;font-variant-numeric:tabular-nums}
.receipt-history-table td{overflow-wrap:anywhere}
@media(max-width:1050px){.purchase-history-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.purchase-history-filters .history-search{grid-column:1/-1}}
@media(max-width:640px){
 .receiving-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .receipt-history-table thead,.receipt-lines thead{display:none}
 .receipt-history-table tbody,.receipt-lines tbody{display:block}
 .receipt-history-table tr,.receipt-lines tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:10px;border-bottom:1px solid var(--line)}
 table.t.receipt-history-table td,table.t.receipt-lines td{display:block;border:0;padding:0;text-align:left;white-space:normal;min-width:0}
 .receipt-history-table td::before,.receipt-lines td::before{content:attr(data-label);display:block;color:var(--muted);font-size:11px;font-weight:500;margin-bottom:4px}
 .receipt-history-table td.table-action{display:flex;align-items:end;justify-content:flex-end;flex-direction:column}
 .receipt-history-table .btn{min-height:36px;min-width:80px}
}
@media(max-width:370px){.purchase-history-filters{grid-template-columns:minmax(0,1fr)}.receiving-summary-grid{grid-template-columns:minmax(0,1fr)}}
.purchase-order-modal .modal-f{flex-wrap:wrap}.purchase-order-modal .modal-f .btn{max-width:100%;white-space:normal}

/* Private employee identity uses the existing profile and theme primitives. */
.identity-documents{margin-top:12px}.identity-document{display:grid;grid-template-columns:minmax(110px,.3fr) minmax(0,1fr);gap:8px;padding:10px 0;border-top:1px solid var(--line)}.identity-document .row{flex-wrap:wrap}.identity-documents button,.identity-document span{font-weight:400}.identity-document .row{min-width:0}@media(max-width:640px){.identity-document{grid-template-columns:minmax(0,1fr)}}
/* Staff-wise qualifications; shared theme, no appointment or payroll styling. */
.staff-qualifications .card-h{flex-wrap:wrap;gap:12px}.staff-qualifications .card-h p{margin:4px 0 0}.staff-qualifications .card-h>.f{max-width:240px;min-width:160px;margin:0}.qualification-filters{display:grid;grid-template-columns:minmax(180px,2fr) repeat(3,minmax(125px,1fr));gap:12px}.qualification-filters .f{min-width:0;margin:0}table.t.qualification-summary-table{table-layout:auto;width:auto;min-width:880px;max-width:1040px}table.t.qualification-summary-table th{font-weight:500}table.t.qualification-summary-table td,table.t.qualification-summary-table button{font-weight:400}table.t.qualification-summary-table th:first-child{width:180px}table.t.qualification-summary-table th:nth-child(2){width:150px}table.t.qualification-summary-table th:nth-child(3){width:150px}table.t.qualification-summary-table th:nth-child(4){width:280px}table.t.qualification-summary-table th:last-child{width:140px}table.t.qualification-summary-table td{overflow-wrap:anywhere;vertical-align:middle;max-width:280px}table.t.qualification-summary-table th,table.t.qualification-summary-table td{text-align:left}.staff-qualifications [data-qualification-list]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.qualification-category-summary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}table.t.qualification-summary-table td[data-column-type="actions"]>.qualification-actions{justify-content:flex-start;gap:6px;flex-wrap:nowrap}.qualification-actions .btn{min-height:36px;min-width:52px}.qualification-dialog{min-width:0}.qualification-dialog>p{margin:6px 0 12px}.qualification-dialog .f{margin-bottom:12px}.qualification-check{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:8px;min-height:36px;font-weight:400;overflow-wrap:anywhere}.qualification-check input{width:16px;height:16px;margin:0}.qualification-select-all{padding:8px 0;border-bottom:1px solid var(--line)}.qualification-category{border-bottom:1px solid var(--line);padding:8px 0}.qualification-category summary{font-weight:500;cursor:pointer;padding:5px 0;overflow-wrap:anywhere}.qualification-category summary span{font-weight:400}.qualification-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;padding:8px 0}.qualification-options>.qualification-check:first-child{grid-column:1/-1}.qualification-view-group{padding:8px 0;border-bottom:1px solid var(--line)}.qualification-view-group h4{font-weight:500;margin:0 0 8px}.qualification-view-group ul{margin:0;padding-left:18px}.qualification-view-group li{padding:4px 0;overflow-wrap:anywhere;font-weight:400}.qualification-view-group li>.muted{margin-left:8px}[data-qualification-error]{color:var(--bad);padding:10px 0}
@media(max-width:1000px){.qualification-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.qualification-filters{grid-template-columns:minmax(0,1fr)}.staff-qualifications .card-h>.f{max-width:none;width:100%}.staff-qualifications .report-pagination{flex-wrap:wrap;gap:10px}.qualification-options{grid-template-columns:minmax(0,1fr)}}

.qualification-category-line{display:flex;gap:4px;min-width:0}.qualification-category-names{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qualification-category-more{flex:none;white-space:nowrap;font-weight:400}

/* Compact multi-service filter, using the current service catalogue. */
.qualification-service-filter{position:relative;min-width:0}.qualification-service-filter summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-weight:400;background:var(--panel)}.qualification-service-filter summary::-webkit-details-marker{display:none}.qualification-service-filter summary span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qualification-service-filter summary svg{flex-shrink:0;width:16px;height:16px;transform:rotate(90deg)}.qualification-service-options{position:absolute;z-index:35;top:100%;left:0;width:min(360px,100%);min-width:0;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}[data-filter-service-list]{max-height:240px;overflow-y:auto;margin-bottom:8px}.qualification-service-filter summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.toast:has(.toast-dismiss){display:flex;align-items:flex-start;gap:12px}.toast-dismiss{border:0;background:transparent;color:inherit;font:inherit;min-width:32px;min-height:32px;cursor:pointer;padding:0;flex-shrink:0}.toast-dismiss:focus-visible{outline:2px solid currentColor;outline-offset:2px}.toast.bad,:root[data-theme="dark"] .toast.bad{background:var(--bad-soft);color:var(--bad);border:1px solid var(--bad)}

.toast-icon{border:1px solid currentColor;border-radius:50%;min-width:20px;height:20px;text-align:center;line-height:18px;flex-shrink:0;font-weight:600}.toast:has(.toast-dismiss)>span:not(.toast-icon){flex:1}

#stocktake-reload[hidden]{display:none}
/* Daily attendance: presentation only; authoritative states/durations come from attendance API. */
.attendance-daily { overflow:hidden; }
.attendance-toolbar { min-height:54px; padding:8px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); }
.attendance-toolbar-start { display:flex; align-items:center; flex-wrap:wrap; gap:14px; min-width:0; }
.attendance-toolbar sd-date { width:158px; flex:none; }
.attendance-toolbar .btn { min-height:34px; height:34px; padding:0 10px; font-weight:400; white-space:nowrap; }
.attendance-present { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; white-space:nowrap; }
.attendance-present > span { width:6px; height:6px; border-radius:50%; background:var(--ok); }
.attendance-table { width:100%; table-layout:fixed; }
.attendance-table :is(th,td) { padding:10px 9px; vertical-align:middle; overflow-wrap:anywhere; }
table.t.attendance-table th[data-column-type] { font-weight:500; font-size:12px; width:auto; }
.attendance-table tbody td { font-weight:400; }
.attendance-table tbody tr { height:64px; }
.attendance-person-name { display:flex; align-items:center; gap:7px; font-weight:400; line-height:1.35; }
.attendance-person-name .dot { flex:none; }
.attendance-designation { display:block; margin:3px 0 0 16px; line-height:1.25; }
.attendance-time,[data-worked] { white-space:nowrap; font-variant-numeric:tabular-nums; }
.attendance-next-day { display:block; font-size:11px; }
.attendance-row-details { margin-top:2px; font-size:11px; }
.attendance-row-details summary { cursor:pointer; color:var(--muted); }
.attendance-row-details span { display:block; padding-top:3px; }
.attendance-actions { display:flex; align-items:center; justify-content:flex-end; gap:5px; flex-wrap:wrap; }
.attendance-actions .btn { min-height:32px; height:32px; padding:0 8px; font-size:12px; white-space:nowrap; font-weight:400; }
.attendance-status { display:inline-flex; align-items:center; color:var(--muted); max-width:100%; }
.attendance-status > span { font-size:12px; border-radius:6px; padding:5px 7px; background:var(--line-2); }
.attendance-status select { width:100%; max-width:120px; min-width:0; height:32px; padding:0 20px 0 7px; font-size:12px; font-weight:400; }
.attendance-status.ok :is(select,span) { color:var(--ok); background-color:var(--ok-soft); }
.attendance-status.info :is(select,span) { color:var(--info); background-color:var(--info-soft); }
.attendance-status.warn :is(select,span) { color:var(--warn); background-color:var(--warn-soft); }
.attendance-status.bad :is(select,span) { color:var(--bad); background-color:var(--bad-soft); }
.attendance-status.brand :is(select,span) { color:var(--sd-primary-text,var(--brand)); background-color:var(--brand-soft); }
@media(max-width:1100px) {
 .attendance-table,.attendance-table tbody { display:block; }
 .attendance-table colgroup,.attendance-table thead { display:none; }
 .attendance-table tbody tr { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 14px; height:auto; padding:14px; border-bottom:1px solid var(--line); }
 .attendance-table tbody tr:last-child { border-bottom:0; }
 .attendance-table tbody td { display:block; min-width:0; padding:0; border:0; }
 .attendance-table td::before { content:attr(data-label); display:block; font-size:11px; color:var(--muted); margin-bottom:4px; font-weight:400; }
 .attendance-table .attendance-person { grid-column:1 / -1; }
 .attendance-table .attendance-person::before { display:none; }
 table.t.attendance-table td[data-label=Actions] { grid-column:1 / -1; text-align:left; }
 .attendance-actions { justify-content:flex-start; }
 .attendance-actions .btn { height:36px; min-height:36px; }
}
@media(max-width:460px) {
 .attendance-toolbar { padding:10px; flex-wrap:wrap; }
 .attendance-toolbar-start { flex:1; gap:8px; }
 .attendance-toolbar sd-date { width:150px; }
 .attendance-table tbody tr { grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; }
 .attendance-toolbar #attendance-export { margin-left:auto; }
}
.attendance-daily .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Contents are descriptive metadata; the stock-counting unit is fixed. */
.product-quantity-settings { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 12px; border-top:1px solid var(--line); padding-top:12px; min-width:0; }
.product-quantity-settings h3 { grid-column:1/-1; font-size:13px; font-weight:500; margin:0; }
.product-quantity-settings > [role=alert], .product-quantity-legacy { grid-column:1/-1; margin:0; }
.product-quantity-settings > [role=alert]:empty { display:none; }
.product-quantity-settings .f { min-width:0; }
@media(max-width:700px) { .product-quantity-settings { grid-template-columns:1fr; } }
.wa-nav-toggle { display:flex; align-items:center; gap:10px; width:100%; border:0; border-radius:8px; padding:8px 10px; background:transparent; color:var(--nav-text); font:500 13px var(--font); text-align:left; cursor:pointer; }
.wa-nav-toggle:hover { background:var(--side-2); }
.wa-nav-toggle:focus-visible { outline:2px solid var(--sidebar-ring,var(--focus-ring)); outline-offset:-2px; }
.wa-nav-chevron { margin-left:auto; }
.wa-nav-toggle[aria-expanded="false"] .wa-nav-chevron { transform:rotate(-90deg); }
#whatsapp-children a { padding-left:28px; font-weight:400; }
.wa-page-tabs { margin-bottom:12px; }
.wa-page-tabs a { display:inline-flex; align-items:center; flex:none; padding:9px 14px; color:var(--muted); border-bottom:2px solid transparent; text-decoration:none; font-weight:400; }
.wa-page-tabs a.on { border-bottom-color:var(--brand); color:var(--ink); }
.wa-page-tabs a:focus-visible { outline:2px solid var(--focus-ring); outline-offset:-3px; }
.wa-inbox { display:grid; grid-template-columns:minmax(240px,31%) minmax(0,1fr); height:calc(100dvh - 205px); min-height:430px; max-height:900px; border:1px solid var(--line); border-radius:10px; background:var(--panel); overflow:hidden; }
.wa-list-pane,.wa-detail-pane { min-width:0; min-height:0; display:flex; flex-direction:column; }
.wa-inbox [hidden] { display:none !important; }
.wa-inbox .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.wa-list-pane { border-right:1px solid var(--line); }
.wa-list-tools { display:grid; gap:8px; padding:12px; border-bottom:1px solid var(--line); }
.wa-list-tools input,.wa-list-tools select { height:34px; font-size:12.5px; }
#wa-list { overflow:auto; flex:1; min-height:0; }
.wa-conversation { display:flex; flex-direction:column; gap:4px; width:100%; min-width:0; padding:12px; text-align:left; background:transparent; color:var(--ink); border:0; border-bottom:1px solid var(--line-2); font:400 13px var(--font); cursor:pointer; }
.wa-conversation:hover,.wa-conversation.on { background:var(--brand-soft); }
.wa-conversation:focus-visible { outline:2px solid var(--focus-ring); outline-offset:-3px; }
.wa-conversation-line { display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; }
.wa-conversation-line>span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-preview { display:block; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.wa-list-footer { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:10px; border-top:1px solid var(--line); }
.wa-detail-head { display:flex; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); }
.wa-detail-head h3 { margin:0 0 4px; font-weight:400; overflow-wrap:anywhere; }
.wa-detail-status { display:flex; flex-wrap:wrap; gap:6px; padding:8px 14px; }
.wa-list-back { display:none; }
.wa-messages { flex:1; overflow-y:auto; overflow-x:hidden; min-height:100px; padding:10px 14px; overscroll-behavior:contain; }
.wa-message { display:flex; flex-direction:column; gap:6px; padding:9px 11px; margin:0 auto 10px 0; max-width:82%; width:fit-content; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; }
.wa-message.outgoing { margin-right:0; margin-left:auto; background:var(--surface-2); }
.wa-message-text { white-space:pre-wrap; overflow-wrap:anywhere; font-weight:400; font-size:13px; line-height:1.45; }
.wa-message-meta { display:flex; flex-wrap:wrap; gap:5px 10px; color:var(--muted); font-size:11px; }
.wa-message-meta.bad,.wa-inbox .bad,.wa-inbox+.bad { color:var(--bad); }
.wa-message-meta.ok { color:var(--ok); }
.wa-message-status { display:inline-flex; align-items:center; gap:4px; }
.wa-message-ticks { width:20px; height:12px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.wa-message-ticks.read { color:var(--sd-primary-text,var(--brand)); }
.wa-composer { border-top:1px solid var(--line); padding:10px 14px; }
.wa-composer textarea { display:block; resize:vertical; min-height:62px; max-height:160px; padding:9px 11px; }
.wa-composer textarea:read-only { opacity:.8; }
.wa-composer-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin:8px 0; }
.wa-composer p { margin:4px 0 0; overflow-wrap:anywhere; }
#wa-older { align-self:center; margin:2px 0 6px; }
.wa-customer-results { display:grid; gap:6px; margin-top:10px; }
.wa-customer-results button { justify-content:flex-start; height:auto; min-height:34px; white-space:normal; text-align:left; }
.wa-template-parameters { display:grid; grid-template-columns:minmax(75px,25%) minmax(0,1fr); gap:5px 10px; font-size:12px; }
.wa-template-parameters dt { color:var(--muted); }
.wa-template-parameters dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.wa-template-preview { padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; }
@media(max-width:1000px) { .wa-inbox { grid-template-columns:minmax(215px,33%) minmax(0,1fr); }.wa-message { max-width:95%; } }
@media(max-width:700px) { .wa-inbox { grid-template-columns:minmax(0,1fr); height:calc(100dvh - 210px); min-height:400px; }.wa-list-pane { border-right:0; }.wa-detail-pane { display:none; }.wa-inbox.has-conversation .wa-list-pane { display:none; }.wa-inbox.has-conversation .wa-detail-pane { display:flex; }.wa-list-back { display:inline-flex; }.wa-detail-head,.wa-detail-status,.wa-composer { padding:9px; }.wa-messages { padding:9px; }.wa-composer-actions .btn { padding:0 10px; font-size:12px; } }

/* Permanent customer invoice; operational assignments never enter its markup. */
.invoice { font-family:var(--font); line-height:1.5; overflow-wrap:anywhere; }
.invoice-header { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; padding-bottom:18px; border-bottom:1px solid #e5e5e5; }
.invoice-business { flex:1; min-width:0; }
.invoice-business h2 { font-size:22px; line-height:1.25; margin:0 0 7px; font-weight:700; }
.invoice-business > div { font-size:12px; color:#555; }
.invoice-reference { text-align:right; flex:0 1 230px; min-width:0; }
.invoice-reference h1 { font-size:25px; line-height:1.2; letter-spacing:.08em; margin:0 0 9px; font-weight:700; }
.invoice-reference > div { font-size:12px; }
.invoice-customer { padding:10px 0 6px; font-size:12px; font-weight:400; }
.invoice .invoice-items { table-layout:fixed; margin-top:14px; }
.invoice .invoice-items th { border-bottom:1px solid #222; color:#555; font-size:10px; letter-spacing:.04em; padding:9px 5px; }
.invoice .invoice-items th:first-child { width:44%; }
.invoice .invoice-items td { padding:14px 5px; }
.invoice .invoice-items .invoice-item-name strong { display:block; font-size:18px; font-weight:700; line-height:1.35; }
.invoice .invoice-items .invoice-line-amount { font-weight:600; }
.invoice .r { white-space:nowrap; overflow-wrap:normal; }
.invoice td small { display:block; font-size:10px; color:#555; font-weight:400; }
.invoice-summary { display:flex; justify-content:flex-end; margin-top:16px; }
.invoice-summary .tot { width:min(100%,370px); margin:0; }
.invoice .tot td { padding:4px 0 4px 12px; }
.invoice .tot td:first-child { padding-left:0; }
.invoice .big td { font-size:22px; font-weight:700; padding-top:9px; padding-bottom:9px; }
.invoice-balance { font-weight:700; }
.invoice-statutory { margin-top:20px; padding-top:10px; border-top:1px solid #e5e5e5; color:#555; font-size:10px; line-height:1.55; }
.invoice-statutory h3 { margin:0 0 3px; font-size:10px; font-weight:600; }
.invoice-footer { display:flex; align-items:center; gap:22px; margin-top:18px; padding-top:12px; }
.invoice-footer .invoice-verification-qr { flex:none; margin:0; }
.invoice-footer .invoice-verification-qr img { width:27mm; height:27mm; }
.invoice-footer .invoice-qr-fallback { min-height:0; border:0; font-size:10px; }
.invoice-thanks { min-width:0; flex:1; font-size:12px; color:#444; }
.invoice-loyalty { margin-bottom:8px; }
.invoice-generated { font-size:10px; color:#555; margin-top:5px; }
.invoice-void { border:1px solid #b91c1c; color:#b91c1c; text-align:center; font-weight:700; padding:5px; margin-bottom:12px; }
.invoice-verification-page { max-width:820px; }
.invoice-verification-page #verification-result { display:block; background:transparent; padding:0; border:0; box-shadow:none; }
.invoice-verification-page #verification-result > .verification-badge { margin:14px 0; }
.invoice.thermal { font-family:var(--font); }
.invoice.thermal .invoice-header { display:block; padding-bottom:10px; }
.invoice.thermal .invoice-reference { text-align:left; margin-top:10px; }
.invoice.thermal .invoice-reference h1 { font-size:18px; }
.invoice.thermal .invoice-business h2 { font-size:17px; }
.invoice.thermal .invoice-items thead { display:none; }
.invoice.thermal .invoice-items tbody { display:block; }
.invoice.thermal .invoice-items tr { display:flex; flex-wrap:wrap; justify-content:space-between; padding:10px 0; border-bottom:1px solid #e5e5e5; }
.invoice.thermal .invoice-items td { display:block; padding:3px; border:0; text-align:left; font-size:11px; }
.invoice.thermal .invoice-items .invoice-item-name { width:100%; }
.invoice.thermal .invoice-items .invoice-item-name strong { font-size:15px; }
.invoice.thermal .invoice-items td[data-label]::before { content:attr(data-label); display:block; color:#555; font-size:9px; }
.invoice.thermal .invoice-footer { display:block; }
.invoice.thermal .invoice-thanks { margin-top:10px; }
@media screen and (max-width:520px) {
  .invoice-verification-page .invoice { padding:16px; }
  .invoice-verification-page .invoice-header { gap:12px; }
  .invoice-verification-page .invoice-business h2 { font-size:17px; }
  .invoice-verification-page .invoice-reference { flex-basis:125px; }
  .invoice-verification-page .invoice-reference h1 { font-size:19px; }
  .invoice-verification-page .invoice-reference > div { font-size:10px; }
  .invoice-verification-page .invoice-items th { font-size:8px; padding:7px 2px; }
  .invoice-verification-page .invoice-items td { font-size:10px; padding:10px 2px; }
  .invoice-verification-page .invoice-items .invoice-item-name strong { font-size:15px; }
  .invoice-verification-page .invoice-items thead { display:none; }
  .invoice-verification-page .invoice-items tbody { display:block; }
  .invoice-verification-page .invoice-items tr { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0; border-bottom:1px solid #e5e5e5; }
  .invoice-verification-page .invoice-items td { display:block; border:0; padding:0; font-size:11px; }
  .invoice-verification-page .invoice-items .invoice-item-name { width:100%; }
  .invoice-verification-page .invoice-items td[data-label]::before { content:attr(data-label); display:block; font-size:9px; color:#555; }
  .invoice-verification-page .invoice-items td:last-child { margin-left:auto; }
  .invoice-verification-page .invoice-footer { gap:12px; }
}

/* Keep the deduction input and its reset action in the existing bill summary. */
.pos-round-off-row { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:12px; row-gap:3px; }
.pos-round-off-row label { margin:0; }
.pos-round-off-row input { grid-column:2; width:7rem; max-width:100%; text-align:right; }
.pos-round-off-row .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.pos-round-off-reset { grid-column:2; justify-self:end; border:0; background:none; color:var(--sd-primary-text,var(--brand)); padding:0; font:inherit; font-size:12px; cursor:pointer; }
.pos-round-off-reset:disabled { opacity:.5; cursor:default; }
.pos-round-off-error { grid-column:1 / -1; color:var(--bad); }

/* Full monthly goals share the existing report surfaces and currency alignment. */
.staff-performance-dashboard .performance-goal-values { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; margin:8px 0; }
.staff-performance-dashboard .performance-goal-values dt { min-width:0; color:var(--muted); overflow-wrap:anywhere; }
.staff-performance-dashboard .performance-goal-values dd { min-width:0; margin:0; text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.staff-performance-dashboard .performance-row-goal + .performance-row-goal { border-top:1px solid var(--line); padding-top:8px; margin-top:8px; }
.staff-performance-dashboard .performance-goal-cell { min-width:0; white-space:normal; }
.staff-performance-dashboard .performance-goal-cell .performance-goal-values { gap:3px 6px; }
.performance-target-settings #target-scheduled { padding:10px; border:1px solid var(--line); border-radius:var(--radius,8px); background:var(--panel); }
.performance-target-settings #target-scheduled .inline { display:flex; align-items:flex-start; gap:8px; }
.performance-target-settings #target-scheduled input[type=checkbox] { width:16px; height:16px; flex:none; }

/* Unified staff profile only; the modal header and footer stay outside its scroll area. */
.staff-profile-dialog .modal-h,.staff-profile-dialog .modal-f { flex:none; }
.staff-profile-dialog .modal-b { padding-top:0; }
.staff-profile-dialog .staff-profile-summary { position:sticky;top:0;z-index:2;background:var(--panel);padding-top:14px;margin-bottom:14px;border-bottom:1px solid var(--line-2); }
.staff-profile-dialog .staff-profile-summary .row { align-items:center; }
.staff-profile-dialog .staff-profile-summary h3 { overflow-wrap:anywhere; }
.staff-profile-dialog .staff-profile-summary .staff-photo { width:48px;height:48px;object-fit:cover; }
.staff-profile-dialog .staff-profile-summary .tabs { margin:10px 0 0; }
.staff-profile-dialog [data-profile-action] { display:contents; }
.staff-profile-dialog .staff-profile-goals { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.staff-profile-dialog .staff-profile-goals span { display:block;font-size:12px;color:var(--muted); }
.staff-profile-dialog .staff-profile-goals b { display:block;font-size:20px;overflow-wrap:anywhere; }
.staff-profile-dialog .staff-profile-version + .staff-profile-version { border-top:1px solid var(--line-2);margin-top:12px;padding-top:12px; }
.staff-profile-dialog .table-wrap { max-width:100%; }
@media(max-width:480px) { .staff-profile-dialog .modal-b { padding-inline:12px; } .staff-profile-dialog .detail-list { grid-template-columns:minmax(0,1fr); } .staff-profile-dialog .modal-f { flex-wrap:wrap; } }
.staff-profile-dialog .staff-profile-month { max-width:180px;margin-top:10px; }
.staff-profile-dialog .staff-profile-progress { display:block;width:100%;height:12px;margin-top:14px;accent-color:var(--brand); }
.staff-profile-dialog .staff-profile-payroll tr[aria-current=true] { background:var(--brand-soft); }
.staff-profile-dialog .staff-profile-revisions summary { cursor:pointer; }

/* Only monthly performance history owns this wider, left-aligned column grid. */
.staff-profile-dialog .staff-performance-history-card { min-width:0; }
.staff-profile-dialog table.t.staff-performance-history { min-width:50rem; table-layout:auto; }
.staff-profile-dialog .staff-performance-history :is(th,td) { padding:12px 14px; }
.staff-profile-dialog .staff-performance-history :is(th,td):nth-child(3),
.staff-profile-dialog .staff-performance-history :is(th,td):nth-child(4),
.staff-profile-dialog .staff-performance-history :is(th,td):nth-child(5) { white-space:nowrap; }
.staff-profile-dialog .staff-performance-history :is(th,td):nth-child(2),
.staff-profile-dialog .staff-performance-history :is(th,td):nth-child(6) { white-space:normal; overflow-wrap:anywhere; }
.staff-profile-dialog .staff-performance-history-scroll:focus-visible { outline:2px solid var(--focus-ring); outline-offset:-2px; }

/* Staff workspace refinements reuse existing table, tabs and profile styles. */
table.t.attendance-table :is(th,td)[data-column-align="left"][data-column-type="numeric"] { text-align:left; }
table.t.payroll-table td { padding-top:10px; padding-bottom:10px; }
.payroll-staff-line { display:flex; align-items:center; flex-wrap:wrap; gap:0 4px; }
.payroll-staff-line [data-payroll-profile] { flex:0 1 auto; }
.payroll-staff-designation { overflow-wrap:anywhere; }
.staff-finance-subtabs { margin-bottom:14px; }
.staff-profile-summary-main { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; min-width:0; }
.staff-profile-summary-main .staff-profile-employee { flex:1; min-width:0; flex-wrap:nowrap; align-items:center; }
.staff-profile-summary-main .staff-profile-employee > div:last-child { min-width:0; }
.staff-profile-summary-main [data-photo-frame] { flex:none; }
.staff-profile-summary-main .staff-profile-month { margin:0; flex:0 0 180px; }
.staff-identity-layout { display:grid; grid-template-columns:minmax(0,1fr) 120px; align-items:start; gap:20px; }
.staff-identity-content { min-width:0; }
.staff-identity-photo :is(.staff-photo,.avatar) { width:120px; height:120px; border:1px solid var(--line); border-radius:9px; object-fit:cover; }
.staff-identity-photo .avatar { font-size:36px; }
@media(max-width:640px) {
 .staff-profile-summary-main { flex-wrap:wrap; }
 .staff-profile-summary-main .staff-profile-employee { flex-basis:100%; }
 .staff-profile-summary-main .staff-profile-month { margin-left:auto; }
 .staff-identity-layout { grid-template-columns:minmax(0,1fr); }
}

/* Schedule cards grow with their fields and inline day checklist; only the modal body scrolls. */
.working-schedule-help { margin-bottom:12px; }
.working-schedule-add { margin-top:12px; }
.working-schedule-add.is-empty { text-align:center; margin:0 0 20px; }
.working-schedule-empty { text-align:center; padding:24px 16px 16px; max-width:520px; margin:auto; }
.working-schedule-empty h4 { margin:12px 0 8px; }
.working-schedule-empty p { margin:0; }
.working-schedule-empty-icon { display:inline-flex; color:var(--sd-primary-text,var(--brand)); }
.working-schedule-empty-icon svg { width:32px; height:32px; }
.working-schedule-error { margin-bottom:12px; }
.working-schedule-periods .schedule-period { display:grid; gap:12px; padding:12px; border:1px solid var(--line-2); border-radius:var(--radius); min-width:0; }
.schedule-period-header,.schedule-period-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.schedule-period-header > b { font-size:13px; }
.schedule-period-actions .inline { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.schedule-period-actions input { margin:0; }
.schedule-period-hours,.schedule-period-dates { display:grid; gap:12px; min-width:0; align-items:start; }
.schedule-period-hours { grid-template-columns:1.2fr 1fr 1fr; }
.schedule-period-dates { grid-template-columns:repeat(2,minmax(0,1fr)); }
.schedule-period .f { display:flex; flex-direction:column; gap:5px; min-width:0; font-size:12px; font-weight:400; color:var(--ink-2); }
.schedule-period .f > input { height:38px; min-width:0; }
.schedule-period sd-date { align-self:start; }
.schedule-period sd-date > input { height:38px; }
.schedule-days { min-width:0; }
.schedule-days summary { display:flex; align-items:center; justify-content:space-between; min-height:38px; padding:8px 11px; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; font-size:13px; list-style:none; background:var(--panel); }
.schedule-days summary::-webkit-details-marker { display:none; }
.schedule-days summary::after { content:'⌄'; margin-left:8px; }
.schedule-days summary:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.schedule-days-options { border:1px solid var(--line); border-radius:var(--radius); margin-top:5px; padding:8px; background:var(--panel); }
.schedule-days-actions { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
.schedule-days-options [role="group"] { display:grid; gap:6px; }
.schedule-days-options label { display:flex; align-items:center; gap:7px; font-size:12px; cursor:pointer; }
.schedule-days-options input { margin:0; }
@media(max-width:640px) {
 .schedule-period-hours,.schedule-period-dates { grid-template-columns:minmax(0,1fr); }
 .schedule-period-header,.schedule-period-actions { gap:8px; flex-wrap:wrap; }
}

/* Keep the native staff-photo picker centered in its existing 38px field. */
#staff-photo-file { padding:7px 11px; }

/* Compact, permission-preserving identity content and import status presentation. */
.staff-identity-readonly .staff-identity-fields { gap:12px; }
.staff-identity-field { padding:4px 0; }
.staff-identity-field b { display:block; font-size:12px; color:var(--ink-2); margin-bottom:3px; }
.staff-identity-readonly .staff-identity-reveal { margin-top:8px; }
.staff-identity-readonly .identity-documents { margin-top:10px; }
.staff-identity-readonly .identity-document { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:start; gap:8px; padding:8px 0; }
.staff-identity-readonly .identity-document-label { font-size:12px; font-weight:500; padding-top:5px; }
.staff-identity-readonly :is(.identity-document-content,.identity-document-entry,.identity-document-actions) { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; }
.staff-identity-readonly .identity-document-actions .btn { max-width:100%; }
.staff-identity-readonly .identity-document-note { margin:6px 0 0; font-size:11px; }
.service-import-notice { display:grid; gap:12px; padding:12px; border:1px solid var(--line); border-radius:10px; min-width:0; }
.service-import-notice.ok { background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 30%,var(--line)); }
.service-import-notice.warn { background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 30%,var(--line)); }
.service-import-notice.bad { background:var(--bad-soft); border-color:color-mix(in srgb,var(--bad) 30%,var(--line)); }
.service-import-status-heading { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:start; gap:10px; }
.service-import-status-heading h4 { font-size:14px; font-weight:600; }
.service-import-status-heading p { margin-top:3px; }
.service-import-status-icon { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1px solid currentColor; font-weight:600; flex:none; }
.service-import-notice.ok .service-import-status-icon { color:var(--ok); }
.service-import-notice.warn .service-import-status-icon,.service-import-category-heading { color:var(--warn); }
.service-import-notice.bad .service-import-status-icon,.service-import-category-error { color:var(--bad); }
.service-import-facts { display:grid; gap:5px; margin:0; padding:0; list-style:none; font-size:12px; }
.service-import-facts li { overflow-wrap:anywhere; }
.service-import-category-heading { display:flex; align-items:center; gap:8px; }
.service-import-result-stats > div { background:var(--panel); padding:8px; min-width:0; }
.service-import-result-stats .ok > span { color:var(--ok); }
.service-import-result-stats .warn > span { color:var(--warn); }
.service-import-result-stats .bad > span { color:var(--bad); }
.service-import-result-stats span { font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.service-import-saved { margin-top:10px!important; }
.service-import-steps :is(.is-complete,.is-warning,.is-error) > span { background:var(--panel); }
.service-import-steps .is-complete { color:var(--ok); }
.service-import-steps .is-complete > span { border-color:var(--ok); background:var(--ok-soft); }
.service-import-steps .is-warning { color:var(--warn); }
.service-import-steps .is-warning > span { border-color:var(--warn); background:var(--warn-soft); }
.service-import-steps .is-error { color:var(--bad); }
.service-import-steps .is-error > span { border-color:var(--bad); background:var(--bad-soft); }
@media(max-width:640px) {
 .staff-identity-readonly .identity-document { grid-template-columns:minmax(0,1fr); gap:4px; }
 .staff-identity-readonly .identity-document-label { padding-top:0; }
}

/* Keep photo removal beside the preview, above the existing native file field. */
.staff-photo-edit-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.staff-photo-edit-preview { display:flex; align-items:center; min-width:0; }
.staff-photo-edit-row > .btn.danger { flex:none; background:transparent; }
.staff-photo-edit-row > .btn.danger:hover { background:var(--bad-soft); }
#staff-photo-remove[hidden] { display:none; }

/* Match Attendance name text while reusing native button keyboard activation. */
.attendance-person-name .attendance-profile-link { padding:0; border:0; border-radius:3px; background:transparent; box-shadow:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.attendance-person-name .attendance-profile-link:hover { color:var(--sd-primary-text,var(--brand)); }
.attendance-person-name .attendance-profile-link:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
/* Compact preview inside the existing attendance settings card. */
.overtime-payment-preview { width:100%; table-layout:fixed; }
.overtime-payment-preview caption { text-align:left; padding:0 0 6px; }
.overtime-payment-preview th,.overtime-payment-preview td { text-align:left; padding:6px 10px; overflow-wrap:anywhere; }

/* Optional original-service evidence uses the existing checkout controls. */
.delayed-billing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; }
.delayed-billing-grid .f { min-width:0; margin:0; }
.delayed-billing-grid input,.delayed-billing-grid select { min-width:0; max-width:100%; }
#delayed-billing .row { gap:8px; align-items:center; }
#delayed-billing input[type=checkbox] { width:auto; flex:none; }
#delayed-billing p { margin:0; }
@media(max-width:600px) { .delayed-billing-grid { grid-template-columns:minmax(0,1fr); } }

#delayed-billing [hidden] { display:none!important; }

/* Keep recovery controls compact inside the existing payroll dialog. */
#advance-recovery-form [hidden] { display:none!important; }
#advance-recovery-form p { margin:0; }
#advance-recovery-form table { table-layout:auto; }
#advance-recovery-form td { white-space:nowrap; }

.payroll-table [data-advance-recovery] { padding:0; border:0; font:inherit; min-height:28px; }
/* Group booking editors share the existing modal, input and table styles. */
.group-editor .grid > *, .group-editor .f { min-width: 0; }
.group-editor input, .group-editor select, .group-editor textarea { max-width: 100%; }
.group-editor .row { flex-wrap: wrap; }
@media(max-width:600px) { .group-editor .grid { grid-template-columns: minmax(0,1fr); } }

.group-table table { min-width: 660px; }

/* Monthly appointments reuse existing surfaces and focus tokens. */
.appointment-month { padding:12px; }
.appointment-month-summary { gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.appointment-month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.appointment-month-weekday { padding:6px 2px; text-align:center; font-size:12px; color:var(--muted); }
.appointment-month-cell { min-width:0; min-height:105px; padding:8px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.appointment-month-cell time { font-weight:600; }
.appointment-month-cell:hover,.appointment-month-cell.selected { background:var(--brand-soft); }
.appointment-month-cell[aria-current=date] { border-color:var(--brand); }
.appointment-month-cell:focus-visible { outline:2px solid var(--focus-ring); outline-offset:1px; }
.appointment-month-count { font-size:12px; overflow-wrap:anywhere; }
.month-short-label { display:none; text-decoration:none; }
@media(max-width:600px){.appointment-month{padding:6px}.appointment-month-grid{gap:2px}.appointment-month-cell{padding:4px 2px;min-height:85px;gap:4px}.appointment-month-count{font-size:11px}.month-full-label{display:none}.month-short-label{display:inline}.appointment-month-title{font-size:14px}}

.appointment-date-nav.is-month { flex-wrap:wrap; }
.appointment-month-title { white-space:nowrap; }
.appointment-month-count { overflow-wrap:normal; }
@media(max-width:380px){.appointment-month-count{font-size:10px}}

/* Appointments share the established horizontal tabs and table typography. */
.appointment-submenu button.on { font-weight:500; }
.group-booking-list h2 { font-size:18px; font-weight:500; }
.group-booking-list h3 { font-size:15px; font-weight:500; }
.group-filter-form { display:grid; grid-template-columns:minmax(160px,1.5fr) repeat(2,minmax(110px,1fr)) repeat(2,minmax(135px,1fr)) auto; align-items:end; gap:10px; padding:12px; }
.group-filter-form > * { min-width:0; }
.group-filter-form .f { margin:0; }
.group-filter-form sd-date { width:100%; min-width:0; }
.group-booking-list-table table { table-layout:fixed; min-width:900px; }
.group-booking-list-table :is(th,td) { padding:10px 12px; vertical-align:top; overflow-wrap:anywhere; }
.group-booking-list-table th { text-transform:none; letter-spacing:0; }
.group-booking-list-table td { font-weight:400; }
.group-booking-empty .row { justify-content:center; flex-wrap:wrap; }
@media(max-width:1150px){.group-filter-form{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.group-filter-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.group-filter-form{grid-template-columns:minmax(0,1fr)}}

@media(max-width:650px){.appointment-submenu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}#view .tabs.appointment-submenu > button{white-space:normal;line-height:1.35;padding:10px 8px;min-width:0}.appointment-submenu button:only-child{grid-column:1/-1}}
/* Attendance reporting is scoped to its own controls and calendar. */
.attendance-calendar-controls,.attendance-calendar-filters,.attendance-month-heading,.attendance-month-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.attendance-calendar-controls{justify-content:space-between;margin-bottom:12px}
.attendance-calendar-filters{align-items:flex-end}
.attendance-calendar-filters .f{margin:0;min-width:140px;max-width:260px}
.attendance-calendar-filters input[type=search]{margin-bottom:4px}
.attendance-month{padding:16px;min-width:0}
.attendance-month-heading{justify-content:space-between;margin-bottom:12px}
.attendance-month-heading h3{margin:0;font-size:16px}
.attendance-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line);border-radius:var(--radius,8px);overflow:hidden}
.attendance-weekday{text-align:center;padding:8px 2px;background:var(--surface);font-size:12px}
.attendance-month-day{min-width:0;min-height:120px;padding:8px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;border:0;border-radius:0;color:var(--ink);background:var(--surface);font:inherit;font-size:13px;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.attendance-month-day:hover,.attendance-month-day.selected{background:var(--brand-soft,var(--bg))}
.attendance-month-day:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}
.attendance-day-number{font-weight:600;margin-bottom:4px}
.attendance-month-note{margin:12px 0 0}
@media(max-width:680px){.attendance-month{padding:8px}.attendance-month-day{padding:5px 3px;min-height:110px;font-size:11px}.attendance-month-day small{font-size:10px}.attendance-calendar-filters{width:100%;gap:8px}.attendance-calendar-filters .f{min-width:120px;flex:1}.attendance-calendar-controls .tabs{max-width:100%}}


.attendance-calendar-status-compact{display:none}
@media(max-width:680px){.attendance-calendar-status-full{display:none}.attendance-calendar-status-compact{display:inline}}

/* Stock request and transfer tables keep intrinsic columns within their scrolling region. */
table.t.stock-workflow-table { width:max-content; max-inline-size:100%; table-layout:auto; }

/* Reports receipt presentation; shared charts and unrelated tables retain their layouts. */
.sales-daily .bars .b { min-width:40px; }
.sales-daily .bars .b span { white-space:nowrap; }
table.t.report-daily-table { width:max-content; min-width:368px; table-layout:auto; }
table.t.report-daily-table th:nth-child(1) { min-width:120px; }
table.t.report-daily-table th:nth-child(2) { min-width:108px; }
table.t.report-daily-table th:nth-child(3) { min-width:140px; }
table.t.report-daily-table :is(th,td) { white-space:nowrap; }
table.t.collection-receipts-table { width:max-content; max-width:100%; table-layout:auto; }
table.t.collection-receipts-table :is(th,td):is(:first-child,:nth-child(2),:nth-child(4),:nth-child(5),:last-child) { white-space:nowrap; }
table.t.collection-receipts-table :is(th,td):nth-child(3),table.t.collection-receipts-table :is(th,td):nth-child(6) { min-width:160px; max-width:250px; overflow-wrap:anywhere; }
.collection-view-controls { display:flex; flex-wrap:wrap; gap:8px; padding-block:8px; }
.report-receipt-link { padding:0; border:0; background:transparent; color:var(--sd-primary-text,var(--brand)); font:inherit; text-align:left; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.receipt-staff-more summary { width:max-content; color:var(--sd-primary-text,var(--brand)); cursor:pointer; }
.receipt-staff-more ul { margin:6px 0 0; padding-left:18px; }

.stock-nav-toggle { display:flex; align-items:center; gap:10px; width:100%; border:0; border-radius:8px; padding:8px 10px; background:transparent; color:var(--nav-text); font:500 13px var(--font); text-align:left; cursor:pointer; }
.stock-nav-toggle:hover { background:var(--side-2); }
.stock-nav-toggle:focus-visible { outline:2px solid var(--sidebar-ring,var(--focus-ring)); outline-offset:-2px; }
.stock-nav-chevron { margin-left:auto; }
.stock-nav-toggle[aria-expanded="false"] .stock-nav-chevron { transform:rotate(-90deg); }
#stock-children a { padding-left:28px; font-weight:400; }
table.t.daily-stock-table { width:max-content; min-width:100%; max-width:none; table-layout:auto; }
table.t.daily-stock-table th { min-width:80px; }
table.t.daily-stock-table :is(th,td) { white-space:nowrap; overflow-wrap:normal; }
table.t.daily-stock-table [data-daily-column="Product"],table.t.daily-stock-table [data-daily-column="Branch"],table.t.daily-stock-table [data-daily-column="Recorded by"] { min-width:150px; max-width:240px; white-space:normal; overflow-wrap:break-word; }
table.t.daily-stock-table [data-daily-column="Notes"],table.t.daily-stock-table [data-daily-column="Balance notes"] { min-width:220px; max-width:300px; white-space:normal; overflow-wrap:break-word; }

/* Expense history owns its widths and alignment; other tables retain semantic defaults. */
table.t.expense-history-table { table-layout:fixed; width:100%; min-width:880px; }
table.t.expense-history-all-branches { min-width:980px; }
table.t.expense-history-table th { width:auto; }
table.t.expense-history-table :is(th,td) { text-align:left; }
table.t.expense-history-table .expense-details { white-space:normal; overflow-wrap:anywhere; }
table.t.expense-history-table td[data-column-type="actions"] > .row { justify-content:flex-start; flex-wrap:wrap; }
table.t.expense-history-table .badge { max-width:100%; white-space:normal; overflow-wrap:anywhere; }