/* Shared component layer for admin + customer portal. Loaded after portal.css (and customer-portal.css).
   Only layout: spacing, grid, alignment, size. Colors, radius and type come from brand-tokens.css. */

/* ---------- Page header: small orange label, title, one-line description, actions right ---------- */
.page-heading{align-items:flex-end;gap:var(--sp-3) var(--sp-5)}
.page-heading>div:first-child{flex:1 1 320px}
.page-heading h1{font:var(--type-title);letter-spacing:-.03em;margin:0}
.page-heading .eyebrow{margin-bottom:6px}
.page-heading p{margin-top:6px}
.page-heading>:not(:first-child){flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--sp-2);max-width:100%}
.page-heading>.button-grid{display:grid}
.page-heading .form-actions{margin:0}
.page-heading .heading-tools{gap:var(--sp-2)}

/* ---------- Cards: one radius, one padding, equal height per row ---------- */
.card,.stat,.customer-group,.portal-group,.portal-filter,.portal-summary-card{border-radius:var(--radius-card)}
.card-head{margin-bottom:var(--sp-4)}
.card-head h2{font:var(--type-subtitle);letter-spacing:-.01em}
.card-head .eyebrow{margin-bottom:4px}
:is(.grid,.split,.columns,.summary-grid)>.card{margin-bottom:0}
:is(.grid,.split,.columns)>.card{height:100%}
:is(.split,.columns){margin-bottom:var(--sp-4)}
.grid.stats,.kpi-grid{align-items:stretch}
.stat{justify-content:flex-start;min-height:100%}
.stat>strong{font:var(--type-number);letter-spacing:-.03em}
.stat>small{margin-top:auto}
.detail-grid{gap:var(--sp-3)}
.detail{border-radius:var(--radius-control)}

/* ---------- Buttons: 10px radius, primary/secondary/ghost/danger, sm/md ---------- */
.button,.button-secondary,.button-danger,.button-ghost{border-radius:var(--radius-control)}
.button .icon,.button-secondary .icon,.button-ghost .icon,.button-danger .icon{width:var(--icon-sm);height:var(--icon-sm)}
.button-small{gap:6px}
.actions,.form-actions,.heading-tools{row-gap:var(--sp-2)}
.form-actions{padding-top:var(--sp-2)}
.card>form>.form-actions:last-child,.card>.form-actions:last-child{margin-bottom:0}

/* ---------- Badges: pill + dot ---------- */
.badge{border-radius:var(--radius-badge);min-height:22px;padding:0 9px;font-size:var(--fs-xs);letter-spacing:.005em}
.badge::before{width:6px;height:6px}

/* ---------- Tables: small uppercase head, right-aligned numbers, compact actions ---------- */
.table-wrap{border-radius:var(--radius-control)}
th{height:40px;vertical-align:middle;font-size:var(--fs-2xs);letter-spacing:.08em}
td{padding:12px var(--sp-3);line-height:1.45}
td.numeric,th.numeric{text-align:right;font-variant-numeric:tabular-nums}
td.actions-column,th.actions-column{text-align:right;white-space:nowrap}
td.actions-column>:is(form,.button,.button-secondary,.button-small,a){display:inline-flex;vertical-align:middle}
td:is(.actions-column,[data-label="Aksi"])>:is(a,form,button,span)+:is(a,form,button){margin-left:6px}
td[data-label="Aksi"]:last-child{text-align:right;white-space:nowrap}

/* ---------- Forms: label above input, 2 columns desktop, 1 column phone ---------- */
.form-grid{gap:var(--sp-4) var(--sp-5)}
.field{gap:6px}
.field>label,.field>.label{line-height:1.35}
.shell :is(input,select,textarea){border-radius:var(--radius-control)}
.form-actions{justify-content:flex-end}

/* ---------- Filter bar: one row desktop, wraps at 768-1024, "Filter" button on phones ---------- */
.portal-filter{margin-bottom:var(--sp-4);padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);background:var(--surface)}
.portal-filter>summary{display:none}
.card .portal-filter{margin:0 0 var(--sp-4);padding:0;border:0;background:none}
.card>.portal-filter:last-child{margin-bottom:0}
.card.mr-filter-card{padding:var(--sp-3) var(--sp-4)}
.portal-filter-form.filter-bar,.ui-filter .filter-bar{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:var(--sp-3);margin:0}
.ui-filter .filter-bar .field,.portal-filter-form .field{flex:1 1 150px;min-width:0;margin:0}
.ui-filter .filter-bar .field>label:not(.sr-only),.portal-filter-form .field>label:not(.sr-only){font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.ui-filter .filter-bar .filter-search,.portal-filter-form .filter-search{flex:1.6 1 200px}
.ui-filter .filter-bar :is(input:not([type=checkbox]):not([type=radio]),select),.portal-filter-form :is(input:not([type=checkbox]):not([type=radio]),select){min-height:40px!important;padding-top:8px!important;padding-bottom:8px!important;font-size:var(--fs-sm)!important}
.ui-filter .filter-bar>.button-secondary,.ui-filter .filter-bar>.button,.ui-filter .filter-bar>.chip-filter{flex:none;min-height:40px}
.ui-filter .filter-label{align-self:center;padding:0;flex:none}
.portal-filter-actions{display:flex;gap:var(--sp-2);align-items:center;flex:0 0 auto}
.portal-filter-actions>*{min-height:40px}
.portal-filter-dot{display:inline-block;width:7px;height:7px;margin-left:4px;border-radius:50%;background:var(--accent)}
/* Searchable customer picker: search box + select side by side so the row stays aligned */
.filter-bar .searchable-field,.ui-filter .filter-bar .field.searchable-field{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:6px;flex:1.8 1 300px;min-width:260px}
.ui-filter .filter-bar .field:not(.searchable-field):not(.filter-search){min-width:110px}
.filter-bar .searchable-field>label{grid-column:1/-1}
.filter-bar .searchable-field .searchable-filter{margin:0}
.chip-filter{min-height:40px;border-radius:var(--radius-control)}
.ui-filter+.meter-progress,.portal-filter-body>.meter-progress{margin-top:var(--sp-3)}
@media(min-width:768px) and (max-width:1024px){
  .portal-filter-form.filter-bar,.ui-filter .filter-bar{flex-wrap:wrap}
  .ui-filter .filter-bar .field,.portal-filter-form .field{flex:1 1 calc(33.333% - var(--sp-3))}
  .ui-filter .filter-bar .filter-search,.portal-filter-form .filter-search,.ui-filter .filter-bar .field.searchable-field{flex-basis:calc(66.666% - var(--sp-3))}
  .portal-filter-actions{margin-left:auto}
}
@media(max-width:767px){
  .portal-filter,.card .portal-filter{padding:0;border:0;background:none}
  .portal-filter>summary{display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer;min-height:40px}
  .portal-filter>summary::-webkit-details-marker{display:none}
  .portal-filter[open]>summary{margin-bottom:var(--sp-3)}
  .portal-filter-body{padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}
  .card .portal-filter-body{padding:0;border:0;background:none}
  .card.mr-filter-card{padding:var(--sp-3)}
  .portal-filter-form.filter-bar,.ui-filter .filter-bar{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
  .ui-filter .filter-bar .field,.portal-filter-form .field,.ui-filter .filter-bar .field.searchable-field{flex:none;min-width:0}
  .ui-filter .filter-bar .field.searchable-field,.filter-bar .searchable-field{grid-template-columns:minmax(0,1fr);row-gap:6px}
  .portal-filter-actions{justify-content:flex-end}
  .ui-filter .filter-bar>:is(.button,.button-secondary){align-self:flex-end}
  .ui-filter .filter-bar>.chip-filter{align-self:flex-start}
}

/* ---------- Tabs (segmented) ---------- */
.invoice-status-tabs,.segmented,.mr-tabs,.settings-nav,.page-tabs,.view-toggle{border-radius:var(--radius-card)}
.invoice-status-tabs a,.mr-tabs a,.settings-nav a,.page-tabs a,.view-toggle-btn{border-radius:var(--radius-control)}
.view-toggle-btn{min-height:34px}

/* ---------- Accordion groups (customer / year / machine) ---------- */
.customer-group{margin-bottom:var(--sp-3);box-shadow:var(--shadow-sm)}
.customer-group-head{gap:var(--sp-2) var(--sp-3);min-height:56px;padding:var(--sp-3) var(--sp-5)}
.customer-group-head:hover{background:var(--surface-sunken)}
.customer-group-head::after{content:"";flex:none;width:8px;height:8px;margin-left:var(--sp-1);border-right:1.75px solid var(--text-faint);border-bottom:1.75px solid var(--text-faint);transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--t-fast) var(--ease)}
.customer-group[open]>.customer-group-head::after{transform:rotate(225deg) translate(-2px,-2px)}
.customer-group-title{font:var(--type-subtitle);letter-spacing:-.01em}
.customer-group-body{padding:var(--sp-2) var(--sp-5) var(--sp-4)}
.customer-group-foot,.customer-group-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:var(--sp-3) 0 0}
.customer-group-actions+.customer-group-foot{margin-top:var(--sp-2)}
/* Invoice list: filter and groups are their own blocks, not nested inside another card */
.card.invoice-list-card{padding:0;border:0;background:none;box-shadow:none}
.invoice-list-card>.invoice-status-tabs{margin:0 0 var(--sp-4)}
.invoice-list-card>[data-view-panel=all]:not(.pagination){padding:var(--sp-2) var(--sp-4);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}

/* ---------- Empty state ---------- */
.empty{gap:6px;padding:var(--sp-6) var(--sp-4)}
.empty-icon{width:44px;height:44px;border-radius:var(--radius-control)}
.empty>span:not(.empty-icon){color:var(--text-muted);font-size:var(--fs-sm)}

/* ---------- Modal ---------- */
.ui-modal{width:min(560px,calc(100vw - 24px));max-height:90dvh;padding:0;border:0;border-radius:var(--radius-card);background:var(--surface-pop);color:var(--text);box-shadow:var(--shadow-pop)}
.ui-modal::backdrop{background:var(--overlay)}
.ui-modal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}
.ui-modal-head h2{font:var(--type-subtitle)}
.ui-modal-body{padding:var(--sp-5);overflow:auto}
.ui-modal-foot{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border)}

/* ---------- Sidebar: tidy groups, same icon size, clear active item ---------- */
.side-nav .icon{width:var(--icon-md);height:var(--icon-md)}
.side-nav a,.side-nav .nav-item{min-height:38px}
.nav-label{padding:var(--sp-4) var(--sp-3) var(--sp-1)}
.nav-sub{padding-left:var(--sp-2)}
.side-nav a.active::before{left:-12px}

/* ---------- Icons ---------- */
.icon{stroke-width:var(--icon-stroke)}

/* ---------- Focus & motion ---------- */
:is(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-control)}
.row-link-target:focus-visible{outline:none}
.customer-group-head:focus-visible,.portal-group-head:focus-visible{outline-offset:-2px}
@media(prefers-reduced-motion:reduce){.customer-group-head::after{transition:none}}

/* ---------- Customer portal: app-like on phones, rows become cards, touch targets >= 40px ---------- */
.customer-portal :is(.button,.button-secondary,.button-danger,.button-ghost,.badge-action){min-height:40px}
.customer-portal .button-small{min-height:40px}
.customer-portal .badge-action{min-height:32px}

/* ---------- Tablet & phone ---------- */
@media(max-width:1199px){
  .page-content{padding-inline:var(--sp-5)}
  .card.portal-list-card{padding:0;border:0;background:none;box-shadow:none;overflow:visible}
  .portal-list-card table tbody tr,.portal-list-card table tbody tr:hover{background:var(--surface)!important;border-radius:var(--radius-card)!important}
  .customer-portal .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td.invoice-status-cell{grid-column:1/-1;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--sp-2);text-align:left}
  .customer-portal .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td.invoice-status-cell::before{flex-basis:100%}
  .customer-portal .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td.invoice-status-cell .badge{align-self:center}
  .customer-portal .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td.invoice-status-cell .badge-action{min-height:40px;margin-left:auto;padding:0 var(--sp-4);align-self:center}
}
@media(max-width:767px){
  .page-content{padding-inline:var(--sp-4)}
  .page-heading{gap:var(--sp-3)}
  .page-heading>div:first-child{flex-basis:auto}
  .page-heading>:not(:first-child){width:100%;justify-content:flex-start}
  .page-heading>.view-toggle{width:auto}
  .page-heading .heading-tools>.button{flex:1 1 auto}
  .customer-group-head{padding:var(--sp-3) var(--sp-4)}
  .customer-group-body{padding:var(--sp-2) var(--sp-3) var(--sp-3)}
  .customer-group-meta{flex-basis:100%;order:3;margin:0}
  .customer-group-head .badge{margin-left:auto}
  .form-grid{gap:var(--sp-4)}
  .card-head{margin-bottom:var(--sp-3)}
  .invoice-list-card>[data-view-panel=all]:not(.pagination){padding:0;border:0;background:none}
}

/* ================================================================
   STANDAR TOMBOL & LAYOUT FORM TAGIHAN (admin + portal)
   Tinggi 40px (sm 32px), radius 10px, ikon 16px.
   Hierarki: 1 utama oranye per area · sekunder bergaris · ghost (Batal/Reset) · danger hanya hapus/tolak.
   ================================================================ */
.button,.button-secondary,.button-danger,.button-ghost,.button-success{box-sizing:border-box;min-height:40px;padding:0 var(--sp-4);border-radius:10px;font-size:var(--fs-sm);gap:var(--sp-2);width:auto;flex:none}
.button-small,.customer-portal .button-small{min-height:32px;padding:0 var(--sp-3);font-size:var(--fs-xs);border-radius:10px}
.button .icon,.button-secondary .icon,.button-ghost .icon,.button-danger .icon,.button-success .icon,.button svg,.button-secondary svg,.button-ghost svg,.button-danger svg{width:16px;height:16px;flex:none}
.button-ghost{border-color:transparent;background:transparent;color:var(--text-muted)}
.button-ghost:hover{background:var(--surface-sunken);color:var(--text)}
.button-danger{background:var(--red-bg);border-color:var(--red-line);color:var(--red-text)}
.button-success{background:var(--green);border-color:var(--green);color:#fff}
.button-success:hover{filter:brightness(.92)}
[data-theme=dark] .button-success{color:#0b0b0c}
.button.button-success{background:var(--green);border-color:var(--green);color:#fff}
[data-theme=dark] .button.button-success{color:#0b0b0c}
.button-block{display:flex;width:100%}
.button-grid>.button,.button-grid>.button-secondary,.button-grid>.button-danger{width:auto}
.page-heading>.button-grid{display:flex;flex-wrap:wrap;width:auto;justify-content:flex-end}
.page-heading .heading-tools,.card-head>.actions,.customer-hero>.button-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.page-heading .heading-tools form{margin:0;display:inline-flex}
.button-group{display:inline-flex;align-items:stretch}
.button-group>:is(a,button){border-radius:0;margin:0}
.button-group>:is(a,button):first-child{border-radius:10px 0 0 10px}
.button-group>:is(a,button):last-child{border-radius:0 10px 10px 0}
.button-group>:is(a,button):only-child{border-radius:10px}
.button-group>:is(a,button)+:is(a,button){margin-left:-1px}
.customer-hero>.button-group{align-self:flex-start}
.customer-hero>.button-group:not(.button-group-wrap){flex-wrap:nowrap;gap:0}
.filter-bar :is(.button,.button-secondary,.button-ghost,.button-small),.portal-filter-actions :is(.button,.button-secondary,.button-ghost,.button-small),.mr-filter-toolbar :is(.button,.button-secondary,.button-ghost,.button-small),.media-filter :is(.button,.button-secondary,.button-ghost,.button-small){min-height:40px}
.portal-filter-actions{display:flex;align-items:flex-end;gap:var(--sp-2)}
.form-grid>.form-actions{grid-column:1/-1}
.form-actions{justify-content:flex-end}

/* Aksi baris tabel: 1 tombol utama kecil + menu ⋮ */
td.actions-column,th.actions-column{width:1%;white-space:nowrap}
.row-actions{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px}
.row-actions form{margin:0;display:inline-flex}
.row-action-menu>summary{width:32px;height:32px;border-radius:10px}
.row-action-popover{z-index:30}

/* Form tagihan: 3 kartu dokumen sejajar, sama lebar */
.invoice-doc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.invoice-doc-card{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--bg)}
.invoice-doc-card>label{font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.invoice-doc-card>label em{margin-left:6px;color:var(--text-muted);font-size:var(--fs-xs);font-style:normal;font-weight:var(--fw-medium)}
.invoice-doc-card>small{color:var(--text-muted);font-size:var(--fs-xs);line-height:1.5}
.invoice-doc-card input[type=file]{width:100%;min-height:40px}
.doc-slot.is-ready{border-color:var(--accent-line);background:var(--accent-soft)}
.doc-slot.is-error{border-color:var(--red-line,var(--border))}
.doc-file{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-width:0}
.doc-file strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm)}
.doc-file-actions{display:flex;flex:none;gap:6px}
.doc-file-actions .button-small{height:40px;min-height:40px}
.doc-slot .field-error{margin:0}
.doc-slot>[data-doc-hint]{color:var(--text-muted);font-size:var(--fs-xs);line-height:1.5}

/* Detail invoice admin: kiri rincian, kanan ringkasan sticky */
.invoice-admin-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:var(--sp-4);align-items:start}
.invoice-admin-main,.invoice-admin-side{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.invoice-admin-main>.card,.invoice-admin-side>.card{margin:0}
.invoice-admin-side{position:static}
.summary-card{border-color:var(--accent-line)}
.summary-rows{display:grid;gap:0;margin:0}
.summary-rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);padding:10px 0;border-bottom:1px solid var(--border)}
.summary-rows dt{color:var(--text-muted);font-size:var(--fs-sm)}
.summary-rows dd{margin:0;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;text-align:right}
.summary-rows .is-due{border-bottom:0;margin-top:var(--sp-2);padding:var(--sp-3);border-radius:var(--radius-control);background:var(--accent-soft)}
.summary-rows .is-due dt{color:var(--accent-text);font-weight:var(--fw-bold)}
.summary-rows .is-due dd{color:var(--accent-text);font-size:var(--fs-xl);font-weight:var(--fw-black)}
.summary-rows .is-due.is-clear{background:var(--green-bg)}
.summary-rows .is-due.is-clear :is(dt,dd){color:var(--green-text)}
.summary-card .help{margin:var(--sp-3) 0 0}
.invoice-notes{display:grid;gap:4px;margin:var(--sp-4) 0 0;padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--bg)}
.invoice-notes-label{margin:0;color:var(--text-muted);font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1.4}
.invoice-notes p{margin:0;color:var(--text);font-size:var(--fs-sm);line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.txn-item{padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
.txn-item:last-of-type{border-bottom:0}
.txn-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-2)}
.txn-meta{margin:4px 0 0;color:var(--text-muted);font-size:var(--fs-xs);line-height:1.5;overflow-wrap:anywhere}
.txn-item .actions{margin-top:var(--sp-2)}
.txn-review{display:grid;gap:var(--sp-2);margin-top:var(--sp-2)}
.awaiting-card{border-color:var(--yellow-line);background:var(--yellow-bg);margin-bottom:var(--sp-4)}
.awaiting-card .card-head h2{margin:0}
.awaiting-item{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:var(--sp-4);align-items:center;padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface)}
.awaiting-item+.awaiting-item{margin-top:var(--sp-3)}
.awaiting-info>strong{font-size:var(--fs-xl);font-weight:var(--fw-black);font-variant-numeric:tabular-nums}
.awaiting-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin:var(--sp-2) 0 0}
.awaiting-meta dt{color:var(--text-muted);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase}
.awaiting-meta dd{margin:2px 0 0;font-size:var(--fs-sm)}
.awaiting-proof{display:grid;gap:var(--sp-2)}
.awaiting-actions{display:flex;gap:var(--sp-2);align-items:center;justify-content:flex-end}
.awaiting-actions form{margin:0}
.history-fold{padding:0}
.history-fold>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:var(--sp-3) var(--sp-5);cursor:pointer;list-style:none}
.history-fold>summary::-webkit-details-marker{display:none}
.history-fold>summary::after{content:"▾";color:var(--text-muted);transition:transform var(--t-fast) var(--ease)}
.history-fold[open]>summary::after{transform:rotate(180deg)}
.history-fold .history-body{padding:0 var(--sp-5) var(--sp-4)}
.modal-form .form-grid{gap:var(--sp-3)}
.modal-form>.subtle{margin:0 0 var(--sp-3)}
.ui-modal.ui-modal-wide{width:min(680px,calc(100vw - 24px))}
.ui-modal-foot .button,.ui-modal-foot .button-ghost,.ui-modal-foot .button-danger{min-width:96px}
.is-new-row>td{background:var(--accent-soft)}

/* Aksi form di kanan bawah: Batal · Simpan Draft · Simpan/Kirim */
.form-actions-sticky{display:flex;justify-content:flex-end;gap:var(--sp-2)}

@media(max-width:1024px){
  .invoice-doc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doc-file{flex-wrap:wrap;align-items:flex-start}
  .doc-file-actions{width:100%}
  .doc-file-actions .button-small{flex:1 1 0}
}
@media(max-width:1023px){
  .invoice-admin-grid{grid-template-columns:minmax(0,1fr)}
  .invoice-admin-side{position:static;max-height:none;overflow:visible;order:-1}
  .awaiting-item{grid-template-columns:minmax(0,1fr)}
  .awaiting-actions{justify-content:flex-start}
}
@media(max-width:767px){
  .invoice-doc-grid{grid-template-columns:minmax(0,1fr)}
  .form-actions-sticky{position:sticky;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:12;flex-direction:column-reverse;align-items:stretch;margin:var(--sp-5) calc(var(--sp-4) * -1) calc(var(--sp-4) * -1);padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--border);border-radius:0 0 var(--radius-card) var(--radius-card)}
  .form-actions-sticky>:is(.button,.button-secondary,.button-ghost,.button-danger){width:100%;flex:none;height:auto;min-height:40px;white-space:normal}
  .form-actions:not(.form-actions-sticky)>:is(.button,.button-secondary,.button-danger,.button-ghost){flex:1 1 140px}
  .page-heading .heading-tools>:is(.button,.button-secondary,form){flex:1 1 auto}
  .page-heading .heading-tools form>button{width:100%}
  .customer-hero>.button-group{width:100%}
  .customer-hero>.button-group>:is(a,button){flex:1 1 0}
  .card-head>.actions,.card-head>:is(.button,.button-secondary){width:100%}
  .card-head>.actions>:is(.button,.button-secondary){flex:1 1 0}
  .awaiting-actions>:is(.button,.button-danger),.awaiting-actions form{flex:1 1 0}
  .awaiting-actions form>button{width:100%}
  .row-actions{justify-content:flex-start;width:100%}
  .row-actions>:is(a,form){flex:1 1 auto}
  .row-actions form>button{width:100%}
  .ui-modal-foot{flex-direction:column-reverse}
  .ui-modal-foot>*{width:100%}
  .ui-modal.ui-modal-wide .form-grid{grid-template-columns:minmax(0,1fr)}
}

/* Header detail Pelanggan + tab Arsip File */
.customer-hero>div:first-child{flex:1 1 480px;min-width:0}
.customer-hero-meta{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-7,32px);margin-top:var(--sp-3)}
.customer-hero-meta>div{display:grid;gap:2px;min-width:0}
.customer-hero-meta>div>span{color:var(--text-muted);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase}
.customer-hero-meta>div>strong{font-size:var(--fs-sm);font-weight:var(--fw-semibold,600);line-height:1.4}
.customer-hero-meta small{color:var(--text-muted);font-weight:var(--fw-medium)}
.customer-hero>.button-group{flex:none;flex-wrap:nowrap}
.customer-hero>.button-group>:is(a,button){min-width:150px;justify-content:center;white-space:nowrap}
.archive-upload .card-head{margin-bottom:var(--sp-3)}
.archive-form{align-items:start}
.file-drop{position:relative;display:flex;align-items:center;gap:var(--sp-2);min-height:40px;padding:0 var(--sp-3);border:1px dashed var(--border-strong,var(--border));border-radius:10px;background:var(--surface-sunken,var(--bg));color:var(--text-muted);cursor:pointer;transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.file-drop:hover,.file-drop:focus-within{border-color:var(--accent);background:var(--accent-soft)}
.file-drop>svg,.file-drop>.icon{width:16px;height:16px;flex:none}
.file-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.file-drop-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm)}
.file-drop.has-file{border-style:solid;color:var(--text)}
.file-drop.has-file .file-drop-name{font-weight:var(--fw-semibold,600)}
.file-drop-action{flex:none;color:var(--accent-text);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.archive-filter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-4)}
.archive-filter :is(select,input[type=search]){box-sizing:border-box;min-height:40px;height:40px;padding:0 var(--sp-3);font-size:var(--fs-sm);border-radius:10px;width:auto;margin:0}
.archive-filter select{min-width:170px}
.archive-filter input[type=search]{flex:1 1 220px;max-width:320px;min-width:0}
.archive-groups>.empty{margin:0}
.archive-group{margin-bottom:var(--sp-2);box-shadow:none;border:1px solid var(--border);background:var(--surface)}
.archive-group:last-child{margin-bottom:0}
.archive-group-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);min-height:56px;padding:var(--sp-3) var(--sp-4);cursor:pointer;list-style:none}
.archive-group-head::-webkit-details-marker{display:none}
.archive-group-main{display:grid;gap:2px;flex:1 1 220px;min-width:0}
.archive-group-main .customer-group-title{font-size:var(--fs-md,16px);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.archive-group-meta{color:var(--text-muted);font-size:var(--fs-xs);line-height:1.4}
.archive-group-head>.badge{flex:none}
.archive-group[open]>.archive-group-head{border-bottom:1px solid var(--border)}
.archive-group>.customer-group-body{padding:var(--sp-3) var(--sp-4) var(--sp-4);border-top:0}
.archive-group-general{border-style:dashed}
.archive-checks{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--sp-3);flex:0 1 auto}
.archive-check{display:inline-flex;align-items:center;gap:5px;color:var(--text-muted);font-size:var(--fs-2xs,11px);font-weight:var(--fw-medium,500);white-space:nowrap}
.archive-check::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--border-strong);flex:none}
.archive-check.is-ok{color:var(--text)}
.archive-check.is-ok::before{background:var(--green)}
.archive-check.is-na{opacity:.55}
.archive-check.is-na::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--border-strong)}
.archive-table .button-small{height:32px;min-height:32px}
.archive-title{overflow-wrap:anywhere}
.archive-table td.nowrap,.archive-table th{white-space:nowrap}
.archive-table td{font-variant-numeric:tabular-nums}
.field .file-drop,.file-drop{font-weight:var(--fw-medium,500);font-size:var(--fs-sm)}
.customer-hero>.button-group{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr}
.customer-hero>.button-group>:is(a,button){min-width:160px}@media(max-width:767px){
  .customer-hero-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
  .customer-hero>.button-group{display:grid;width:100%}
  .customer-hero>.button-group>:is(a,button){min-width:0}
  .archive-filter select,.archive-filter input[type=search]{width:100%;max-width:none;flex:1 1 100%}
  .archive-filter>:is(.button-secondary,.button-ghost){flex:1 1 0}
  .archive-upload .form-actions .button{width:100%}
  .archive-group-head{padding:var(--sp-3)}
  .archive-group-main{flex-basis:calc(100% - 140px)}
  .archive-checks{flex-basis:100%}
  .archive-group>.customer-group-body{padding:var(--sp-2) var(--sp-3) var(--sp-3)}
}

/* ================================================================
   TAGIHAN: menunggu verifikasi PPh, kartu dokumen ringkas, PPh di Catat pembayaran, periode Bulan + Tahun
   ================================================================ */
.badge.tax_review{background:var(--yellow-bg);border-color:var(--yellow-line);color:var(--yellow-text)}
.invoice-table td[data-label="Sisa"] small,td[data-label="Sisa"] small{display:block;margin-top:2px;color:var(--yellow-text);font-size:var(--fs-2xs);font-weight:var(--fw-medium);white-space:normal}
@media(min-width:768px){.is-action-row>td{background:color-mix(in srgb,var(--yellow-bg) 55%,transparent)}}
@media(max-width:767px){.page-content tbody tr.is-action-row,.page-content tbody tr.is-action-row:hover{border-left:4px solid var(--yellow)!important}}
.tax-review-banner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);margin:0 0 var(--sp-4);padding:var(--sp-4);border:1px solid var(--yellow-line);border-left:4px solid var(--yellow);border-radius:var(--r-md);background:var(--yellow-bg);color:var(--yellow-text)}
.tax-review-banner>div{display:grid;gap:2px;min-width:0;flex:1 1 320px}
.tax-review-banner strong{font-size:var(--fs-md);color:var(--text)}
.tax-review-banner p{margin:0;font-size:var(--fs-sm)}
.invoice-paid-banner.is-review{border-color:var(--yellow-line);background:var(--yellow-bg);color:var(--yellow-text)}
.invoice-paid-banner.is-review>span{background:var(--yellow)}
.document-actions{align-items:center}
.document-actions :is(.button-secondary,.button-ghost).button-small{min-height:32px;height:32px;padding:0 var(--sp-3)}
.document-card .upload-form{grid-template-columns:minmax(0,1fr);padding-top:var(--sp-3);border-top:1px dashed var(--border)}
.document-card .upload-form .field{margin:0;min-width:0}
.document-card .upload-form .button-small{width:100%}
.document-card .upload-form .field>span{display:block;margin-bottom:4px;color:var(--text-muted);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.document-card .upload-form input[type=file]{width:100%;min-width:0}
.link-button{display:inline;padding:0;border:0;background:none;color:var(--accent-text);font:inherit;font-weight:var(--fw-bold);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.link-button:hover{color:var(--accent)}
.admin-tax-block{display:grid;gap:var(--sp-3);margin:var(--sp-4) 0;padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface-sunken,var(--bg))}
.admin-tax-block>legend{padding:0 var(--sp-2);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.admin-tax-block .segmented{justify-self:start}
.admin-tax-block .segmented label>span{min-height:32px}
.admin-tax-fields{margin:0;padding:0;border:0}
.admin-tax-block .help{margin:0}
.period-field{margin:0;padding:0;border:0;min-width:0}
.period-field>legend{display:block;margin-bottom:6px;padding:0;font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.period-inputs{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--sp-2)}
.period-field>small{display:block;margin-top:4px;color:var(--text-muted);font-size:var(--fs-xs)}
#pembayaran .card-head,#pph .card-head{align-items:center;flex-wrap:wrap;gap:var(--sp-2)}
#pembayaran .card-head .actions{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.txn-upload{font-size:var(--fs-xs)}
.pay-record-summary{display:grid;gap:4px;margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:10px;background:var(--surface-sunken)}
.pay-record-summary p{margin:0;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.pay-record-summary [data-summary-rest]{font-weight:var(--fw-bold)}
.pay-record-summary.is-over{border-color:var(--red-line);background:var(--red-bg)}
.pay-record-warning{color:var(--red-text);font-weight:var(--fw-bold)}
.txn-review .field{margin:0}
.txn-review .actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.txn-review .actions>:is(a,button){min-height:32px}
#pembayaran .card-head .button,#pph .card-head>.button{min-height:40px}
@media(max-width:1023px){
  .txn-review .actions{justify-content:flex-start}
}
@media(max-width:767px){
  .tax-review-banner .button{width:100%}
  .admin-tax-block .segmented{display:flex;width:100%}
  .admin-tax-block .segmented label{flex:1}
  .admin-tax-block .segmented label>span{width:100%}
  .txn-review .actions{display:flex;flex-direction:column-reverse;align-items:stretch}
  .txn-review .actions>:is(a,button){width:100%;min-height:40px}
  .pay-record-summary{padding:var(--sp-3)}
}
/* ---- Tata letak 2/3 + 1/3, tumpukan kartu, daftar info ---- */
.layout-main-aside{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:var(--sp-4);align-items:start}
.stack{display:grid;gap:var(--sp-4);min-width:0}
.stack>.card{margin-bottom:0}
.check-list{display:grid;gap:var(--sp-2);margin:0 0 var(--sp-3);padding:0;list-style:none;font-size:var(--fs-sm)}
.check-list li{position:relative;padding-left:22px}
.check-list li::before{content:"";position:absolute;left:2px;top:.35em;width:10px;height:6px;border-left:1.75px solid var(--accent-text);border-bottom:1.75px solid var(--accent-text);transform:rotate(-45deg)}
.info-list{display:grid;gap:0;margin:var(--sp-3) 0 0}
.info-list>div{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px solid var(--border);font-size:var(--fs-sm)}
.info-list>div:last-child{border-bottom:0}
.info-list dt{color:var(--text-muted)}
.info-list dd{margin:0;font-weight:var(--fw-bold);text-align:right;font-variant-numeric:tabular-nums}
.code-block{display:block;margin-top:var(--sp-2);padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-sunken);font-size:var(--fs-xs);line-height:1.5;word-break:break-all}
.link-list{display:grid;gap:var(--sp-2);margin:var(--sp-2) 0 0;padding:0;list-style:none;font-size:var(--fs-sm)}

/* ---- Integrasi ---- */
.integration-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);align-items:stretch}
.integration-card{display:flex;flex-direction:column;margin-bottom:0}
.integration-card>form{display:flex;flex-direction:column;flex:1}
.integration-card>form>.form-actions{margin-top:auto;padding-top:var(--sp-4)}
.integration-card .card-head{align-items:flex-start}
.integration-test{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border)}
.choice-list{display:grid;gap:var(--sp-2)}
.choice{display:flex;align-items:flex-start;gap:var(--sp-3);min-height:var(--h-control);padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);cursor:pointer}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.choice:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.choice.is-disabled{cursor:not-allowed;opacity:.6}
.choice input{margin-top:3px;accent-color:var(--accent)}
.choice-body{display:grid;gap:2px}
.choice-body small{color:var(--text-muted);font-size:var(--fs-xs)}
.copy-field{display:flex;gap:var(--sp-2)}
.copy-field input{flex:1;min-width:0;background:var(--surface-sunken);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:var(--fs-xs)}
.copy-field .button-secondary{flex:none}
.gateway-summary{margin-bottom:var(--sp-4)}
.gateway-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-2)}
.gateway-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-4);padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-sunken)}
.integration-card>form.gateway-toggle{flex:none}
.switch{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:40px;padding:0 var(--sp-2) 0 0;border:0;background:transparent;color:var(--text);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer}
.switch-track{position:relative;display:inline-block;width:44px;height:24px;border-radius:999px;background:var(--gray-line);transition:background-color .15s ease}
.switch-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s ease}
.switch[aria-checked=true] .switch-track{background:var(--accent)}
.switch[aria-checked=true] .switch-thumb{transform:translateX(20px)}
.switch:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
.switch:disabled{opacity:.5;cursor:not-allowed}
.gateway-toggle .help{flex:1 1 200px;margin:0}
.secret-field .secret-clear{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:var(--fs-xs);color:var(--text-muted)}

/* ---- Tabel: header lengket di layar lebar ---- */
@media(min-width:768px){
  .page-content .table-wrap.is-scroll{max-height:min(70vh,720px);overflow:auto}
  .page-content .table-wrap thead th{position:sticky;top:0;z-index:1;background:var(--surface)}
}
@media(max-width:1023px){
  .layout-main-aside,.integration-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---- Halaman › Beranda › Urutan & tampil ---- */
.section-order{display:grid;gap:var(--sp-2);margin:var(--sp-3) 0 0;padding:0;list-style:none;counter-reset:sec}
.section-order-item{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:var(--sp-3);min-height:52px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);counter-increment:sec}
.section-order-item::before{content:counter(sec);display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-pill);background:var(--surface-sunken);color:var(--text-muted);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.section-order-item:has(input[type=checkbox]:not(:checked)) .section-order-name strong{color:var(--text-faint)}
.section-order-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2);min-width:0}
.section-order-name .text-link{font-size:var(--fs-xs)}
.section-order-move{display:inline-flex;gap:var(--sp-1)}
.section-order-move .button-small{width:32px;min-width:32px;padding:0;justify-content:center}
.icon.is-flipped{transform:rotate(180deg)}
.section-order-item.is-moved{border-color:var(--accent)}
@media(max-width:575px){
  .section-order-item{grid-template-columns:28px minmax(0,1fr) auto;row-gap:var(--sp-2)}
  .section-order-item .toggle-inline{grid-column:2}
}

/* ---- Pindahan gaya inline ---- */
.staff-reset{margin-top:var(--sp-5)}
button.notice-row{width:100%;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer}
.sync-table tr.is-mismatch td{color:var(--red-text);font-weight:var(--fw-bold)}

/* ---- Aksi tabel: Ubah & Hapus sejajar, tinggi sama 32px ---- */
td:is(.actions-column,[data-label="Aksi"]) form{display:inline-flex;margin:0}
td:is(.actions-column,[data-label="Aksi"]) :is(a,button):is(.button,.button-secondary,.button-danger,.button-small){min-height:32px;height:32px}

/* ---- Perawatan Sistem: ukuran penyimpanan per kategori ---- */
.notice.warning{background:var(--yellow-bg);border-color:var(--yellow-line);color:var(--yellow-text)}
.storage-warning{display:flex;align-items:flex-start;gap:8px;margin:0 0 var(--sp-3);font-size:var(--fs-xs);line-height:1.45}
.storage-warning .icon{flex:none;margin-top:1px}
.storage-list dd{font-variant-numeric:tabular-nums}
.storage-list .storage-total{border-top:1px solid var(--border);padding-top:var(--sp-2)}
.storage-list .storage-total :is(dt,dd){font-weight:var(--fw-bold);color:var(--text)}
.storage-meter{height:8px;margin:var(--sp-3) 0 var(--sp-2);border-radius:999px;background:var(--surface-sunken);border:1px solid var(--border);overflow:hidden}
.storage-meter>span{display:block;height:100%;border-radius:inherit;background:var(--green-text)}
.storage-meter.is-warn>span{background:var(--yellow-text)}
.storage-caption{margin:0;font-size:var(--fs-xs)}
.storage-limit-form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3)}
.storage-limit-form label{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-muted,inherit)}
.storage-limit-form input{width:96px;min-height:32px;height:32px;padding:0 var(--sp-2)}
.storage-limit-form .field-error{flex-basis:100%;margin:0}

/* Perawatan Sistem: opsi email backup + panduan simpan di luar server */
.backup-email-form{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--border)}
.backup-email-form .check-row{display:flex;align-items:flex-start;gap:10px;flex:1 1 320px;min-width:0;cursor:pointer}
.backup-email-form .check-row input{width:18px;height:18px;margin-top:3px;accent-color:var(--accent)}
.backup-guide{margin-top:var(--sp-4);padding:14px 16px;border:1px dashed var(--border);border-radius:12px}
.backup-guide h3{margin:0 0 6px;font-size:15px}
.backup-guide ol{margin:8px 0;padding-left:20px}
.backup-guide li{margin:4px 0}