/* Scalpia POS — dashboard, reports and settings: owned by the "office" screen agent of the native redesign; builds on web/ui/native.css (read its guide). */
/* Screens: Settings (grouped list → sub-pages), Dashboard (period chips, KPI tiles, chart, ranked rows), Reports (types list →
   report page), Shifts (rows, open / close pages, denomination steppers), Z report and the sync refusals. Phone < 700px. */

/* ── Settings ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.main.settings-page{padding-bottom:var(--space-8)}
.settings-group-title{margin:0;padding:var(--space-5) var(--space-4) var(--space-2);font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-semibold);letter-spacing:0;color:var(--primary)}
.settings-nav .settings-group-title:first-child{padding-top:var(--space-3)}
.settings-row{min-height:var(--row-h-2)}
.settings-row .list-leading{color:var(--text-muted)}
.settings-row .list-leading svg{width:var(--icon);height:var(--icon)}
.settings-row .list-title{font-weight:var(--weight-regular)}
.settings-language{position:relative;cursor:pointer}
.settings-language select{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;font-size:var(--text-lg)}
.settings-language:focus-within{box-shadow:inset 0 0 0 2px var(--focus)}
.settings-logout,.settings-logout .list-leading{color:var(--danger-fg)}
.settings-logout .list-chevron{display:none}
.settings-bar{display:flex;align-items:center;gap:var(--space-2);min-height:var(--app-bar-h);background:var(--surface)}
.settings-bar h2{flex:1 1 auto;min-width:0;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-xl);line-height:var(--leading-xl);font-weight:var(--weight-semibold);letter-spacing:0}
.settings-bar .settings-save{flex:none;display:inline-flex;align-items:center;gap:var(--space-1);min-height:40px;padding:0 var(--space-5)}
.settings-bar .settings-save svg{width:20px;height:20px}
.settings-back{display:none}
.settings-body{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.settings-body>.panel{margin-bottom:var(--space-4)}
.settings-help{margin:var(--space-2) 0;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.settings-inline-action{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch);padding:0 var(--space-3)}
.settings-inline-action svg{width:20px;height:20px}
.settings-actions{margin:var(--space-2) 0}
.settings-actions .list-row{color:var(--text)}
.settings-actions .list-leading{color:var(--primary)}
.printer-list:empty{display:none}
.printer-list .list-row{gap:var(--space-3)}
.settings-body .sync-list{display:flex;flex-direction:column}
.settings-body .sync-list:empty{display:none}
.settings-body .sync-command .list-title{font-size:var(--text-md)}
.settings-body .field-group{margin:0}
.settings-body .field-group-title:empty{display:none}
/* Reasons: one group per type, "+ Tambah" in its head, the reasons as rows. */
.reasons-panel{display:flex;flex-direction:column}
.reason-group-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.reason-group-head .settings-group-title{padding-left:0}
.reason-group-head .text-button{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--touch);padding:0 var(--space-3)}
.reason-group-head .text-button svg{width:20px;height:20px}
.reason-group .list-group{border-radius:var(--radius-md);overflow:hidden}
.reason-hidden .list-title{color:var(--text-muted)}
.reason-hidden .list-subtitle{font-style:italic}
.reason-group-head{align-items:flex-end}
.settings-body .list-leading svg,.rejections-panel svg{width:var(--icon);height:var(--icon)}
.settings-body .list-trailing strong{font-size:var(--text-lg)}
.settings-empty{margin:0;padding:var(--space-4) 0;color:var(--text-muted);font-size:var(--text-md)}
/* Sync refusals (Settings › Data & sync): one row each — number and kind, translated reason, date and till; amount and state right. */
.rejections-panel{display:flex;flex-direction:column;margin-top:var(--space-2)}
.rejections-panel .settings-group-title{padding-left:0}
.rejections-panel .settings-help{margin-top:0}
.refusal-row{align-items:flex-start;min-height:var(--row-h-2)}
.refusal-row .list-subtitle{white-space:normal}
.refusal-reason{color:var(--danger-fg)}
.refusal-trailing{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1);text-align:right}
.refusal-trailing small{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--text-muted)}
.refusal-trailing .tag{font-size:var(--text-xs)}
/* Refused commands of this till (sync pill dialog and the shift close): plain rows, text actions. */
.sync-rejected .sync-command{padding:var(--space-3) 0;border-bottom:1px solid var(--border)}
.sync-rejected .sync-command .actions{display:flex;gap:var(--space-2);margin-top:var(--space-2)}

/* Phone: the list, or one page full screen with its own app bar (the shell's app bar steps aside). */
@media(max-width:699px){
 .main.settings-page{padding:0 0 var(--space-8)}
 .settings-page.is-home .settings-detail,.settings-page.has-detail .settings-nav{display:none}
 .settings-nav .list-group{box-shadow:0 -1px 0 var(--border),0 1px 0 var(--border)}
 body:has(.settings-page.has-detail) .topbar{display:none}
 /* Offline: the strip stays above the page's own bar and scrolls away (sticky under the hidden app bar it covered ←). */
 body:has(.settings-page.has-detail) .offline-bar{position:static}
 .settings-bar{position:sticky;top:0;z-index:5;padding:0 var(--space-1);box-shadow:0 1px 0 var(--border)}
 .settings-back{display:grid;color:var(--text)}
 .settings-bar .settings-save,.settings-bar .settings-save:hover{min-height:var(--touch);padding:0 var(--space-3);border:0;background:transparent;color:var(--primary);font-size:var(--text-md);font-weight:var(--weight-bold);letter-spacing:.5px;text-transform:uppercase}
 .settings-body{padding:0 var(--space-4)}
 .settings-body>.panel,.settings-body .panel{margin-left:calc(-1 * var(--space-4));margin-right:calc(-1 * var(--space-4));border-left:0;border-right:0;border-radius:0}
 .settings-body .list-group{margin-left:calc(-1 * var(--space-4));margin-right:calc(-1 * var(--space-4));box-shadow:0 -1px 0 var(--border),0 1px 0 var(--border)}
 .settings-body .field-group-body>.list-group{margin-left:calc(-1 * var(--space-4))}
 .settings-actions,.settings-body .sync-list,.reason-group .list-group{margin-left:calc(-1 * var(--space-4));margin-right:calc(-1 * var(--space-4));border-radius:0;box-shadow:0 -1px 0 var(--border),0 1px 0 var(--border)}
 .settings-body .field-group+.field-group{border-top:0}
}
/* Wider screens: list and page side by side (list-detail). */
@media(min-width:700px){
 .settings-layout{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:var(--space-6);align-items:start}
 .settings-nav{position:sticky;top:var(--space-4);overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding-bottom:var(--space-2)}
 .settings-nav .settings-row{min-height:var(--row-h)}
 .settings-nav .settings-row[aria-current=page]{background:var(--nav-indicator);color:var(--tonal-fg)}
 .settings-nav .settings-row[aria-current=page] .list-leading{color:var(--tonal-fg)}
 .settings-detail{min-width:0;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
 .settings-bar{padding:var(--space-2) var(--space-4) var(--space-2) var(--space-6);border-bottom:1px solid var(--border)}
 .settings-body{padding:var(--space-2) var(--space-6) var(--space-6)}
 .settings-body .field-group-body{max-width:640px}
 .settings-actions,.reason-group .list-group{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
}

/* ── Dashboard ────────────────────────────────────────────────────────────────────────────────────────────────────── */
.dashboard-page .dashboard-filters{margin-bottom:var(--space-3)}
.dashboard-page .report-ranges{gap:var(--space-2);padding-bottom:2px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin:0 0 var(--space-4)}
.kpi-grid .stat{container-type:inline-size;display:flex;flex-direction:column;gap:var(--space-1);min-width:0;padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.kpi-grid .stat-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-muted)}
.kpi-grid .stat-value{margin:0;overflow-wrap:anywhere;font-size:var(--text-2xl);line-height:var(--leading-2xl);font-weight:var(--weight-bold);letter-spacing:0;font-variant-numeric:tabular-nums}
.kpi-grid .stat-foot{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-muted)}
/* An amount is never cut (UXT c4 N1): 2 columns while the working area is narrow (tablet portrait, 1024), one token step down
   when a card is still narrow (a 9-digit "Rp 373.500.000" in 4 columns), and it wraps as the last resort. */
@container (max-width:199px){.kpi-grid .stat-value{font-size:var(--text-xl);line-height:var(--leading-xl)}}
@media(min-width:700px) and (max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dash-section{min-width:0;margin:0 0 var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--touch);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4)}
.dash-head h2{margin:0;min-width:0;font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-semibold);letter-spacing:0;color:var(--primary)}
.dash-head .text-button{flex:none;min-height:40px;padding:0 var(--space-3);font-size:var(--text-md)}
.dash-meta{flex:none;padding-right:var(--space-2);font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}
.dash-section .list-group{box-shadow:inset 0 1px 0 var(--border)}
.dash-section .list-trailing{font-size:var(--text-md)}
.dash-empty{margin:0;padding:var(--space-3) var(--space-4) var(--space-4);font-size:var(--text-md);color:var(--text-muted)}
.dash-ok{color:var(--success-fg)}
.dash-rank{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--tonal-bg);color:var(--tonal-fg);font-size:var(--text-md);font-weight:var(--weight-semibold)}
.dash-section .table-wrap{border-top:1px solid var(--border)}
/* 7-day chart: one column per day, the value above in short form, the bar in a fixed track, today in the primary colour. */
.dashboard-page .chart{display:flex;align-items:stretch;gap:var(--space-2);height:auto;padding:var(--space-2) var(--space-4) var(--space-4)}
.dashboard-page .chart-column{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);min-width:0}
.dashboard-page .chart-value{min-height:var(--leading-xs);margin:0;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:clip;font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}
.chart-track{display:flex;align-items:flex-end;justify-content:center;width:100%;height:120px}
.dashboard-page .chart-bar{width:70%;max-width:36px;margin:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:color-mix(in srgb,var(--primary) 35%,var(--surface))}
.dashboard-page .chart-column.is-today .chart-bar{background:var(--primary)}
.dashboard-page .chart-column.is-today .chart-label,.dashboard-page .chart-column.is-today .chart-value{color:var(--text);font-weight:var(--weight-semibold)}
.dashboard-page .chart-label{margin:0;font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-muted)}
@media(min-width:900px){
 .main.dashboard-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--space-4);align-content:start;align-items:start}
 .dashboard-page>*{grid-column:1/-1}
 .dashboard-page>.dash-section{grid-column:auto}
 .dashboard-page>.dash-section:last-child{grid-column:1/-1}
}
@media(max-width:699px){
 .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
 .kpi-grid .stat{padding:var(--space-3)}
 .kpi-grid .stat-value{font-size:var(--text-xl);line-height:var(--leading-xl)}
 .dash-section{margin:0 calc(-1 * var(--space-4)) var(--space-2);border:0;border-radius:0;box-shadow:0 -1px 0 var(--border),0 1px 0 var(--border)}
 .dashboard-page .chart{gap:var(--space-1);padding:var(--space-2) var(--space-3) var(--space-4)}
 .dash-section .panel{margin:0}
}

/* ── Shifts ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
.shifts-page .dash-head h2{color:var(--primary)}
.shift-current .list-group{box-shadow:inset 0 1px 0 var(--border)}
.shift-fact{min-height:var(--touch)}
.shift-fact .list-title{font-size:var(--text-md);font-weight:var(--weight-regular);color:var(--text-muted)}
.shift-fact .list-trailing{font-size:var(--text-lg)}
.shift-hint{margin:0;padding:var(--space-3) var(--space-4) 0;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.shift-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:var(--space-2);padding:var(--space-4)}
.shift-actions button{min-height:var(--touch);font-size:var(--text-md);font-weight:var(--weight-semibold)}
.shift-row .list-leading svg{width:var(--icon);height:var(--icon)}
.shift-row .tag{font-size:var(--text-xs)}
/* Opening cash: the amount is the screen's hero (big, tabular), the button full width (Buka shift / Buka kasir). */
.cash-hero .tf-box{min-height:88px;align-items:flex-end}
.cash-hero .tf-box>label{top:var(--space-3);font-size:var(--text-md);line-height:var(--leading-md)}
.cash-hero .tf-box>input,.shift-gate-card .cash-hero .tf-box>input{padding-top:calc(var(--space-6) + var(--leading-md));padding-bottom:var(--space-3);font-size:var(--text-amount);line-height:var(--leading-amount);font-weight:var(--weight-bold)}
.cash-hero.tf-money .tf-prefix{padding-top:calc(var(--space-6) + var(--leading-md));padding-bottom:var(--space-3);font-size:var(--text-xl);line-height:var(--leading-amount)}
.shift-open-hint{margin:0 0 var(--space-4);font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.shift-open-grid{grid-template-columns:minmax(0,1fr)}
.shift-gate-card .form-grid{grid-template-columns:minmax(0,1fr)}
.shift-gate-submit{min-height:var(--fab-size)}
@media(max-width:699px){
 .main.shifts-page{padding-top:var(--space-2)}
 .shift-gate{padding:0}
 .shift-gate-card{border:0;border-radius:0;box-shadow:none;background:transparent;padding:var(--space-6) var(--space-4)}
 .shift-gate-icon{width:var(--touch);height:var(--touch);border-radius:50%;background:var(--tonal-bg);color:var(--tonal-fg)}
 .shift-gate-card h2{font-size:var(--text-xl);line-height:var(--leading-xl)}
 .shift-gate-card>p{font-size:var(--text-md);line-height:var(--leading-md)}
}
/* Close: expected / counted / difference rows, then the notes and coins as list rows with − count + steppers (48 px). */
.close-summary{display:flex;flex-direction:column;margin:0 0 var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.close-summary>div{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--touch);padding:var(--space-2) var(--space-4);font-variant-numeric:tabular-nums}
.close-summary>div+div{border-top:1px solid var(--border)}
.close-summary span{font-size:var(--text-md);color:var(--text-muted)}
.close-summary strong{font-size:var(--text-lg)}
.close-summary [data-sign=over]{color:var(--success-fg)}
.close-summary [data-sign=short]{color:var(--danger-fg)}
.shift-facts{margin-top:0}
.shift-note{margin:0 0 var(--space-4);font-size:var(--text-md);color:var(--text-muted)}
.modal .denomination-grid{margin:0 0 var(--space-4);padding:0;border:0;border-radius:0}
.modal .denomination-grid legend{float:left;width:100%;padding:0 0 var(--space-1);font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-semibold);color:var(--primary)}
.modal .denomination-grid legend+p{clear:both;margin:0 0 var(--space-2);font-size:var(--text-xs)}
.modal .denomination-rows{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 var(--space-6);margin:0}
.modal .denomination-row{grid-template-columns:minmax(0,1fr) var(--touch) 72px var(--touch);gap:var(--space-2);min-height:64px;padding:var(--space-2) 0;border-bottom:1px solid var(--border)}
.modal .denomination-label{align-items:flex-start;gap:2px}
.modal .denomination-value{text-align:left;font-size:var(--text-lg);line-height:var(--leading-lg)}
.modal .denomination-total{text-align:left;font-size:var(--text-xs);line-height:var(--leading-xs)}
.modal .denomination-step{width:var(--touch);height:var(--touch);min-width:var(--touch);min-height:var(--touch);border-radius:50%;background:var(--tonal-bg);color:var(--tonal-fg)}
.modal .denomination-row input{min-height:var(--touch);height:var(--touch);padding:0 var(--space-2);border:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--field-bg);box-shadow:inset 0 -1px 0 var(--field-line);text-align:center;font-size:var(--text-lg);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.modal .denomination-row input:focus{outline:0;box-shadow:inset 0 -2px 0 var(--primary)}
.modal .denomination-sum{margin-top:0;padding:var(--space-3) 0;border-top:0;font-size:var(--text-md)}
.modal .close-slips{padding:0;border:0;border-radius:0}
.modal .close-slips legend{padding:0 0 var(--space-1);font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--primary)}
@media(max-width:699px){.modal .denomination-rows{grid-template-columns:minmax(0,1fr)}}
/* Z report on screen: the printed document on a paper sheet; Bagikan · Cetak pinned at the bottom of the page. */
.z-paper{max-width:420px;margin:0 auto var(--space-4);padding:var(--space-5) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow-1)}
.z-paper .receipt{max-width:none;margin:0;padding:0;border:0;box-shadow:none}
.z-actions{position:sticky;bottom:calc(-1 * var(--modal-pad));display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin:var(--space-4) calc(-1 * var(--modal-pad)) calc(-1 * var(--modal-pad));padding:var(--space-3) var(--modal-pad) calc(var(--space-3) + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface)}
.z-actions button{min-height:var(--touch)}
@media(max-width:699px){.modal .z-paper{margin-left:calc(-1 * var(--space-2));margin-right:calc(-1 * var(--space-2))}}
.modal .denomination-row input{-moz-appearance:textfield;appearance:textfield}
.modal .denomination-row input::-webkit-inner-spin-button,.modal .denomination-row input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.modal .close-slips{margin-top:var(--space-4)}

/* ── Reports ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
.report-back{display:none}
.report-types-title{padding-left:0}
.report-type-row .list-leading{color:var(--primary)}
.report-type-row .list-leading svg{width:var(--icon);height:var(--icon)}
.reports-page .report-filters .report-ranges{gap:var(--space-2)}
@media(max-width:699px){
 body:has(.reports-page.is-report) .topbar{display:none}
 .main.reports-page.is-report{padding-top:0}
 .report-back{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--space-2);min-height:var(--app-bar-h);margin:0 calc(-1 * var(--space-4)) var(--space-3);padding:0 var(--space-1);background:var(--surface);box-shadow:0 1px 0 var(--border)}
 .report-back .icon-button{color:var(--text)}
 .report-back h2{flex:1 1 auto;min-width:0;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-xl);line-height:var(--leading-xl);font-weight:var(--weight-semibold);letter-spacing:0}
 .reports-page.is-home .page-heading{display:none}
 .main.reports-page{position:relative}
 .reports-page.is-report .page-heading.only-more:not(.more-open){position:absolute;top:var(--space-1);right:var(--space-1);z-index:6;float:none;margin:0}
 .reports-page.is-report .report-back{padding-right:var(--fab-size)}
 .reports-page .report-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2)}
 .reports-page .report-filters .report-ranges{grid-column:1/-1;order:-1;display:flex}
 .reports-page .report-filters .field:has(select),.reports-page .report-filters>button{grid-column:1/-1}
 .reports-page .report-filters .field{min-width:0}
 .reports-page.is-report [role=tabpanel]>.panel-head h2{display:none}
 .report-types{margin:0 calc(-1 * var(--space-4));box-shadow:0 -1px 0 var(--border),0 1px 0 var(--border)}
 .reports-page .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Printers found and the charges presets (Catalog › Taxes): rows, the action named on the right. */
.printer-pick{color:var(--primary);font-weight:var(--weight-semibold)}
.charges-preset-help{margin:0;padding:var(--space-3) var(--space-4)}
.charges-preset .list-group{box-shadow:inset 0 1px 0 var(--border)}
.charges-preset .settings-row{min-height:var(--row-h)}
.charges-preset .list-leading{color:var(--primary)}
/* Receipt cards on a 360 px phone: a refund / "already refunded" flag makes the title two lines; the amount stays on the first line,
   level with the receipt number, instead of floating between the two (the chevron keeps the same top). */
@media (max-width:400px){
 .as-cards tr:has([data-receipt-number]){align-items:flex-start}
}
/* F12-2 « Pertes » (Reports › Losses): the cost first, the help line under the figures; corrected payments under a Console receipt. */
.losses-report .stats{margin-bottom:var(--space-2)}
.losses-help{margin:0;font-size:var(--text-sm)}
.receipt-corrections .list-row span:first-child{min-width:0;overflow-wrap:anywhere}
/* F03-3 Console › Integrations: three groups of rows (API keys, webhooks, delivery log), the state on the right of each row,
   the alert banner on top; a key or secret shown once: notice, read-only field, copy action. */
.integrations-body{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.integrations-row .list-subtitle{overflow-wrap:anywhere}
.integrations-add .list-leading{color:var(--primary)}
.integrations-alerts{display:flex;flex-direction:column;gap:var(--space-1);margin:0 0 var(--space-3)}
.integrations-alerts p{margin:0}
.integrations-once{margin:0 0 var(--space-3)}
.integrations-copy{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch);margin:var(--space-2) 0 0}
.integrations-state{margin:0 0 var(--space-2)}
.integrations-loading{margin:var(--space-4) 0}
.integrations-secret textarea{overflow-wrap:anywhere;word-break:break-all}
/* F13-3: Console › Comptes et folios, Créances (web/accounts.mjs). */
.accounts-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2) var(--space-4)}
.accounts-page .accounts-body{display:flex;flex-direction:column;gap:var(--space-3)}
.accounts-row .amount.is-credit{color:var(--success-fg)}
.accounts-chips .chip{min-height:var(--touch)}
/* F13-2 (fiche 13): the till's accounts — picker at « Compte » (full screen on a phone, side panel from 700 px), limit sheet, signature,
   statement paper (web/accounts.mjs). Tokens only. */
.account-screen{position:fixed;inset:0;z-index:var(--z-fullscreen);display:flex;flex-direction:column;background:var(--surface);color:var(--text);overflow:hidden}
.account-bar{flex:none;display:flex;align-items:center;gap:var(--space-1);min-height:var(--app-bar-h);padding:var(--space-1) var(--space-2);border-bottom:1px solid var(--border)}
.account-bar strong{font-size:var(--text-xl);line-height:var(--leading-xl);font-weight:var(--weight-semibold)}
.account-bar:not(:has(button)) strong{padding-left:var(--space-2)}
.account-search{flex:none;padding:var(--space-2) var(--space-4) 0}
.account-results{flex:1;min-height:0;overflow:auto;padding:0 var(--space-4) var(--space-4)}
.account-results>p{margin:var(--space-4) 0}
.account-add{flex:none;padding:0 var(--space-4)}
.account-add .list-row{min-height:var(--touch)}
.account-confirm{flex:none;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--border);background:var(--surface)}
.account-confirm[hidden]{display:none}
.account-confirm-body{display:flex;flex-direction:column;gap:var(--space-1)}
.account-confirm-body span{color:var(--text-muted)}
.account-confirm-actions{display:flex;gap:var(--space-2)}
.account-confirm-actions button,.limit-screen .account-confirm button,.signature-screen .account-confirm button{flex:1;min-height:var(--touch)}
.account-pick-row{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:var(--row-h);padding:var(--space-2) var(--space-4);border:0;background:transparent;color:var(--text);text-align:left}
.account-pick-row.is-selected{background:var(--tonal-bg);color:var(--tonal-fg)}
.account-pick-row .list-trailing.is-due{color:var(--danger-fg)}
.statement-paper{margin:0 0 var(--space-3);padding:var(--space-3);overflow:auto;white-space:pre;font-family:monospace;font-size:var(--text-sm);line-height:var(--leading-md);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);color:var(--text)}
.signature-pad{display:block;width:100%;height:auto;aspect-ratio:8/3;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);color:var(--text);touch-action:none}
.signature-image{display:block;max-width:100%;height:auto;margin:var(--space-2) 0}
@media (min-width:700px){.account-screen{inset:0 0 0 auto;width:min(420px,100vw);border-left:1px solid var(--border);box-shadow:var(--shadow-3)}.signature-screen{width:min(560px,100vw)}}
/* F13-5: pad de signature sur l'écran client (index.html?mode=display) */
.cd-sign{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--space-3);width:min(720px,100%);margin:0 auto;overflow:auto}
.cd-sign h1{font-size:var(--text-2xl)}
.cd-sign .cd-statement{max-height:30vh;font-size:var(--text-md)}
.cd-sign-hint{margin:0;color:var(--text-muted)}
.cd-sign-actions{display:flex;gap:var(--space-3);justify-content:flex-end}
.cd-sign-actions button{min-height:var(--touch);padding:0 var(--space-5);border-radius:var(--radius-lg);font-weight:700}

/* F05-3: till outage banner (plugin l10n_id) under the app bar; wraps on a phone, never cut. */
.fiscal-outage-bar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-8);background:var(--warning-bg);color:var(--warning-fg);border-bottom:1px solid var(--border);font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.fiscal-outage-bar .ui-icon{flex:none;width:18px;height:18px}
@media(max-width:650px){.fiscal-outage-bar{padding:var(--space-2) var(--space-4)}}
.fiscal-page .fiscal-secret textarea{font-family:monospace;word-break:break-all}

/* F05-4: fiscal document identifiers and class labels stay readable on a phone. */
.fiscal-paper .list-title,.fiscal-paper .list-subtitle{white-space:normal;overflow-wrap:anywhere}

/* F07-3: Réglages › Types de commande — a row opens the editor, the arrows sort, the switch turns the type on or off. */
.order-type-row{gap:var(--space-2)}
.order-type-open{flex:1 1 auto;min-width:0;display:flex;align-items:center;min-height:var(--row-h);padding:0;border:0;background:transparent;color:inherit;text-align:left;font:inherit}
.order-type-tools{display:flex;align-items:center;gap:var(--space-1)}
.order-type-tools .icon-button[disabled]{opacity:.35}
.order-type-tools .switch-text{display:none}
@media(max-width:650px){.order-type-open .list-subtitle{white-space:normal}}