@import url("./brand-tokens.css");
/* LADENINE portal - "industrial premium". Tokens live in brand-tokens.css; no hardcoded theme colors here. */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-md);line-height:var(--lh-body);font-weight:var(--fw-regular);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;line-height:var(--lh-tight);letter-spacing:var(--tracking-tight);font-weight:var(--fw-bold)}
p{margin:0}
a{color:var(--accent-text)}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
hr{border:0;border-top:1px solid var(--border);margin:var(--sp-5) 0}
code{font-family:var(--font-mono);font-size:.92em}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:var(--sp-3);top:-60px;z-index:100;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);font-weight:var(--fw-bold);text-decoration:none;transition:top var(--t-fast) var(--ease)}
.skip-link:focus{top:var(--sp-3)}
.icon{flex:none;vertical-align:middle}
.num,.tabular{font-variant-numeric:tabular-nums}
.muted{color:var(--text-muted)}
.hide-mobile{display:unset}

/* ---------- Shell: sidebar ---------- */
.shell{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;z-index:30;width:var(--sidebar-w);display:flex;flex-direction:column;padding:var(--sp-4) var(--sp-3);background:var(--bg);border-right:1px solid var(--border);transition:width var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.brand{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-2) var(--sp-5);color:var(--text);text-decoration:none;font-size:var(--fs-md);font-weight:var(--fw-black);letter-spacing:.14em;min-width:0}
.brand>span{display:block;min-width:0;line-height:1.15;white-space:nowrap}
.brand small{display:block;margin-top:5px;color:var(--text-faint);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);font-weight:var(--fw-medium)}
.brand-mark{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font-size:20px;font-weight:var(--fw-black)}
.official-brand-logo{width:40px;height:40px;object-fit:contain;flex-shrink:0;border-radius:8px;mix-blend-mode:multiply;background:#fff}
[data-theme=dark] .official-brand-logo{mix-blend-mode:normal;background:transparent}
[data-theme=dark] .official-brand-logo.logo-invertible{mix-blend-mode:screen}
.side-nav{display:grid;gap:2px;align-content:start;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 2px var(--sp-4);scrollbar-width:thin}
.side-nav a,.side-nav .nav-item{position:relative;display:flex;align-items:center;gap:var(--sp-3);min-height:var(--h-control);padding:0 var(--sp-3);border-radius:var(--r-sm);color:var(--text-muted);text-decoration:none;font-size:13.5px;font-weight:var(--fw-medium);white-space:nowrap;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.side-nav a .icon,.side-nav .nav-item .icon{color:var(--text-faint);transition:color var(--t-fast) var(--ease)}
.side-nav a:hover{background:var(--surface);color:var(--text)}
.side-nav a:hover .icon{color:var(--text)}
.side-nav a.active{background:var(--accent-soft);color:var(--text);font-weight:var(--fw-bold)}
.side-nav a.active .icon{color:var(--accent-text)}
.side-nav a.active::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.side-nav a.muted-link,.side-nav .nav-soon{opacity:.55;cursor:default;pointer-events:none;color:var(--text-faint)}
.side-nav a small,.side-nav .nav-soon-label{margin-left:auto;font-size:var(--fs-2xs);color:var(--text-faint);letter-spacing:.04em;text-transform:uppercase;font-weight:var(--fw-bold)}
.side-nav a .nav-ext{margin-left:auto;font-size:12px;line-height:1;color:var(--text-faint);transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.side-nav a:hover .nav-ext,.side-nav a:focus-visible .nav-ext{color:var(--accent-text);transform:translate(1px,-1px)}
.nav-group{display:grid;gap:2px;min-width:0}
.nav-sub{display:grid;gap:2px;padding-left:12px}
.side-nav .nav-parent{cursor:default;color:var(--text-muted)}
.meter-quick{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.meter-quick input{max-width:9rem}
tr.is-missing{background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
.page-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 var(--sp-5);padding:4px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-sunken)}
.page-tabs a{display:inline-flex;align-items:center;min-height:var(--h-control);padding:0 var(--sp-4);border-radius:var(--r-sm);color:var(--text-muted);font-size:var(--fs-sm);font-weight:var(--fw-bold);text-decoration:none}
.page-tabs a:hover{background:var(--surface);color:var(--text)}
.page-tabs a.active{background:var(--accent);color:var(--on-accent)}
.customer-hero{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.customer-hero-meta{display:flex;flex-wrap:wrap;gap:12px 20px}
.meter-quick{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.meter-quick input[type=number]{width:7.5rem}
.meter-quick input[name=reset_note]{min-width:8rem;flex:1}
.change-log{display:grid;gap:10px}
.change-log small{display:block;color:var(--text-muted)}
.nav-label{padding:var(--sp-5) var(--sp-3) var(--sp-2);color:var(--text-faint);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);font-weight:var(--fw-bold);text-transform:uppercase}
.nav-group:first-child>.nav-label,.nav-label:first-child{padding-top:var(--sp-2)}
.side-logout{margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--border)}
.text-button{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:var(--h-control);padding:0 var(--sp-3);border:0;border-radius:var(--r-sm);background:none;color:var(--text-muted);font-size:13.5px;font-weight:var(--fw-medium);text-align:left;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.text-button:hover{background:var(--red-bg);color:var(--red-text)}
.drawer-backdrop{display:none}
.mobile-nav{display:none}
.page-content{animation:page-in .28s var(--ease) both}
@keyframes page-in{from{opacity:.01}to{opacity:1}}

/* ---------- Shell: main + topbar ---------- */
.main-area{margin-left:var(--sidebar-w);min-height:100vh;min-width:0;transition:margin-left var(--t-base) var(--ease)}
.topbar{position:sticky;top:0;z-index:20;height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:0 var(--sp-6);background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.top-actions{display:flex;align-items:center;gap:var(--sp-2);flex:none}
.mobile-menu{display:none}
.icon-button{position:relative;display:inline-grid;place-items:center;width:var(--h-control);height:var(--h-control);border:1px solid transparent;border-radius:var(--r-sm);background:none;color:var(--text-muted);text-decoration:none;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.icon-button:hover{background:var(--surface);border-color:var(--border);color:var(--text)}
.bell i{position:absolute;right:2px;top:2px;min-width:18px;height:18px;padding:0 4px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-size:10px;font-style:normal;font-weight:var(--fw-black);line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.user-chip{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--h-control);padding:0 var(--sp-3) 0 6px;border:1px solid var(--border);border-radius:var(--r-pill);color:var(--text);text-decoration:none;font-size:var(--fs-sm);font-weight:var(--fw-medium);transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.user-chip:hover{background:var(--surface);border-color:var(--border-strong)}
.user-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar,.user-chip img{width:28px;height:28px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text);font-weight:var(--fw-black);font-size:var(--fs-sm)}
.page-content{max-width:var(--content-max);margin:0 auto;padding:var(--sp-6) var(--sp-6) 72px;overflow-x:hidden}
.page-back{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin:0 0 var(--sp-3);padding:0 var(--sp-3);border:1px solid var(--border);border-radius:var(--r-pill);color:var(--text-muted);font-size:var(--fs-sm);font-weight:var(--fw-medium);text-decoration:none;transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.page-back:hover,.page-back:focus-visible{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-text)}

/* ---------- Page heading, grid, cards ---------- */
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.page-heading>div{min-width:0}
.page-heading h1{font-size:clamp(24px,2.4vw,30px);font-weight:var(--fw-black);letter-spacing:-.03em;margin:0 0 6px}
.page-heading p{color:var(--text-muted);font-size:var(--fs-md);line-height:1.6;overflow-wrap:anywhere;max-width:70ch}
.eyebrow{margin-bottom:var(--sp-2);color:var(--accent-text);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tracking-label);text-transform:uppercase}
.grid{display:grid;gap:var(--sp-4)}
.columns{grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr)}
.split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:var(--sp-4)}
.card,.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow);min-width:0}
.card{margin-bottom:var(--sp-4)}
.card h2{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.card h3{font-size:var(--fs-md)}
.card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.card-head>div{min-width:0}
.card p.subtle,.subtle{margin-top:6px;color:var(--text-muted);font-size:var(--fs-sm);line-height:1.6}
.text-link{color:var(--accent-text);text-decoration:none;font-size:var(--fs-sm);font-weight:var(--fw-bold);white-space:nowrap}
.text-link:hover{text-decoration:underline}
.stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:var(--sp-4)}
.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.form-subtitle{margin:var(--sp-5) 0 var(--sp-3);font-size:var(--fs-md);font-weight:var(--fw-bold);letter-spacing:var(--tracking-tight)}
.form-subtitle small{color:var(--text-muted);font-weight:var(--fw-medium)}
.stat{display:flex;flex-direction:column;gap:6px;padding:var(--sp-4) var(--sp-5)}
.stat>span{color:var(--text-muted);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tracking-label);text-transform:uppercase}
.stat>strong{display:block;font-size:clamp(22px,2.1vw,30px);font-weight:var(--fw-black);letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat>small{color:var(--text-faint);font-size:var(--fs-xs);line-height:1.45}
.stat.is-accent{border-color:var(--accent-line);background:linear-gradient(180deg,var(--accent-soft),transparent 70%),var(--surface)}
.stat.is-accent>strong{color:var(--accent-text)}
.stat.is-danger>strong{color:var(--red-text)}
.stat.is-success>strong{color:var(--green-text)}

/* ---------- Buttons ---------- */
.button,.button-secondary,.button-danger,.button-ghost{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--h-control);padding:0 var(--sp-4);border:1px solid transparent;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:var(--fw-bold);line-height:1.2;letter-spacing:.005em;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.button{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.button:active{background:var(--accent-press);border-color:var(--accent-press);transform:scale(.98)}
.button-secondary{background:transparent;border-color:var(--border-strong);color:var(--text)}
.button-secondary:hover{background:var(--surface-sunken);border-color:var(--accent-line);color:var(--text)}
.button-secondary:active{transform:scale(.98)}
.button-danger{background:var(--red-bg);border-color:var(--red-line);color:var(--red-text)}
.button-danger:hover{background:var(--red);border-color:var(--red);color:#fff}
.button-ghost{background:transparent;color:var(--text-muted)}
.button-ghost:hover{background:var(--surface);color:var(--text)}
.button-lg{min-height:var(--h-control-lg);padding:0 var(--sp-5);font-size:var(--fs-md)}
.button-small{min-height:32px;padding:0 var(--sp-3);font-size:var(--fs-xs)}
.button-block{display:flex;width:100%}
:is(.button,.button-secondary,.button-danger,.button-ghost):disabled,:is(.button,.button-secondary,.button-danger,.button-ghost)[aria-disabled=true],[aria-disabled=true].button{opacity:.45;cursor:not-allowed;transform:none;pointer-events:none}
.is-loading{position:relative;cursor:progress;pointer-events:none;opacity:.85}
.is-loading::before{content:"";width:14px;height:14px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.button-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));align-items:stretch;gap:var(--sp-2)}
.button-grid>.button,.button-grid>.button-secondary,.button-grid>.button-danger{width:100%;min-width:0;white-space:normal}
.page-heading>.button-grid{width:min(100%,360px);grid-template-columns:repeat(2,minmax(0,1fr))}
.actions{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:var(--fs-sm)}
th{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border);color:var(--text-muted);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.09em;text-align:left;text-transform:uppercase;white-space:nowrap}
td{padding:var(--sp-3);border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
tbody tr{transition:background-color var(--t-fast) var(--ease)}
tbody tr:hover{background:var(--surface-sunken)}
tr:last-child td{border-bottom:0}
td a{color:var(--accent-text);font-weight:var(--fw-bold);text-decoration:none}
td a:hover{text-decoration:underline}
td small{color:var(--text-muted)}
th.numeric,td.numeric{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.numeric{font-weight:var(--fw-bold)}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border:1px solid var(--gray-line);border-radius:var(--r-pill);background:var(--gray-bg);color:var(--gray-text);font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:currentColor}
.badge.paid,.badge.confirmed,.badge.verified,.badge.active,.badge.published,.badge.success{background:var(--green-bg);border-color:var(--green-line);color:var(--green-text)}
.badge.unpaid,.badge.due_today,.badge.orange{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-text)}
.badge.overdue,.badge.rejected,.badge.danger{background:var(--red-bg);border-color:var(--red-line);color:var(--red-text)}
.badge.pending,.badge.partial,.badge.tax_pending,.badge.auto-verified,.badge.warning{background:var(--yellow-bg);border-color:var(--yellow-line);color:var(--yellow-text)}
.badge.meter-status-match{background:var(--green-bg);border-color:var(--green-line);color:var(--green-text)}
.badge.meter-status-check{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-text)}
.badge.meter-status-waiting{background:var(--yellow-bg);border-color:var(--yellow-line);color:var(--yellow-text)}
.meter-customer-cell{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.meter-customer-value{font-variant-numeric:tabular-nums;font-weight:var(--fw-bold)}
.meter-needs-check{border-color:var(--accent-line)}
.badge.void,.badge.draft,.badge.inactive,.badge.neutral,.badge.meter-status-admin{background:var(--gray-bg);border-color:var(--gray-line);color:var(--gray-text)}
.badge-action{display:inline-flex;align-items:center;gap:4px;min-height:28px;margin-left:var(--sp-2);padding:0 var(--sp-3);border:1px solid var(--accent);border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);font-size:var(--fs-xs);font-weight:var(--fw-bold);white-space:nowrap;transition:background-color var(--t-fast) var(--ease)}
tr.row-link:hover .badge-action{background:var(--accent-hover);text-decoration:none}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.field{display:grid;gap:6px;min-width:0;align-content:start}
.field.full{grid-column:1/-1}
.field>label,.field>.label{color:var(--text);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.shell input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=color]),.shell select,.shell textarea,.auth-card input:not([type=checkbox]):not([type=radio]):not([type=hidden]){width:100%;min-height:var(--h-control-lg);padding:10px 14px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background-color:var(--bg);color:var(--text);font-size:var(--fs-md);line-height:1.4;outline:none;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.shell textarea,.auth-card textarea{min-height:104px;resize:vertical}
.shell select{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355555d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
[data-theme=dark] .shell select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a5a5ae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.shell input::placeholder,.shell textarea::placeholder,.auth-card input::placeholder{color:var(--text-faint);opacity:1}
.shell input:hover:not(:disabled),.shell select:hover:not(:disabled),.shell textarea:hover:not(:disabled){border-color:var(--text-faint)}
.shell input:focus,.shell select:focus,.shell textarea:focus,.auth-card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
.shell input[readonly]{background-color:var(--surface-sunken)}
.shell :is(input,select,textarea):disabled{opacity:.55;cursor:not-allowed;background-color:var(--surface-sunken)}
.shell input[type=file]{width:100%;padding:8px;border:1px dashed var(--border-strong);border-radius:var(--r-sm);background:var(--bg);color:var(--text-muted);font-size:var(--fs-sm);line-height:1.5;overflow:hidden}
.shell input[type=file]::file-selector-button{margin-right:var(--sp-3);padding:8px 14px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font:inherit;font-weight:var(--fw-bold);cursor:pointer;transition:border-color var(--t-fast) var(--ease)}
.shell input[type=file]::file-selector-button:hover{border-color:var(--accent)}
.shell input[type=file].sr-only{width:1px;height:1px;padding:0;border:0}
.shell input[type=checkbox],.shell input[type=radio],.auth-card input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--accent);flex:none}
.shell input[type=color]{width:56px;height:var(--h-control-lg);padding:4px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--bg)}
.field small,.help{color:var(--text-muted);font-size:var(--fs-xs);line-height:1.55}
.help{margin-top:var(--sp-2)}
.field-error,.field small.field-error{display:block;margin-top:4px;color:var(--red-text)!important;font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1.45}
[aria-invalid=true]{border-color:var(--red)!important;box-shadow:0 0 0 3px var(--red-bg)!important}
.checkbox-row{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--h-touch);color:var(--text);font-size:var(--fs-sm);cursor:pointer}
.checkbox-row.field{margin:0}
.form-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--sp-2);margin-top:var(--sp-5)}
fieldset{min-width:0}
.home-section{margin:var(--sp-1) 0;padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md)}
.home-section legend{padding:0 var(--sp-2);font-size:var(--fs-md);font-weight:var(--fw-bold)}
.rich-toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.rich-toolbar button,.rich-toolbar select{min-height:36px;padding:0 var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--bg);color:var(--text)}
.rich-toolbar button:hover{border-color:var(--accent)}
.rich-editor{min-height:250px;padding:var(--sp-4);border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--bg);color:var(--text);line-height:1.65;outline:none}
.rich-editor:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.inline-form{display:inline-flex;align-items:center;gap:6px}
.search{flex:1;max-width:360px}
.filter-row{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4)}
input::-ms-reveal,input::-ms-clear{display:none;width:0;height:0}
.password-control input::-webkit-credentials-auto-fill-button,.password-control input::-webkit-strong-password-auto-fill-button{visibility:hidden;pointer-events:none;position:absolute;right:0;width:0;margin:0}
.password-control{position:relative;display:block;width:100%;min-width:0}
.password-control>input{padding-right:52px!important}
.password-eye{position:absolute;z-index:1;right:2px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;margin:0;padding:0;border:0;border-radius:calc(var(--r-sm) - 2px);background:transparent;color:var(--text-muted);cursor:pointer;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.password-eye:hover,.password-eye:focus-visible{background:var(--accent-soft);color:var(--accent-text)}
.password-eye:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.password-eye svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.password-eye .eye-closed{display:none}
.password-eye[aria-pressed=true] .eye-open{display:none}
.password-eye[aria-pressed=true] .eye-closed{display:block}

/* Repeatable rows: start with one row, "+ Tambah ...", remove per row */
.repeater{display:grid;gap:var(--sp-3)}
.repeater-list{display:grid;gap:var(--sp-3)}
.repeater-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-3);align-items:end;padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg)}
.repeater-row[hidden]{display:none}
.repeater-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);min-width:0}
.repeater-fields .full{grid-column:1/-1}
.repeater-row.is-single{grid-template-columns:minmax(0,1fr) auto}
.repeater-remove{min-width:var(--h-control-lg);padding:0 var(--sp-3)}
.repeater-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.repeater-count{color:var(--text-muted);font-size:var(--fs-xs)}
.repeater-add[hidden]{display:none}
.repeater + .field{margin-top:var(--sp-4)}

/* Segmented toggles: PPh, cara bayar, filter tab. Active state is solid orange, never a white block. */
.segmented,.pay-toggle,.invoice-status-tabs,.mr-tabs,.settings-nav,.lp-device-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;max-width:100%;padding:4px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-sunken)}
.pay-toggle{margin-bottom:var(--sp-4)}
.pay-toggle label,.segmented label{position:relative;display:block;cursor:pointer}
.pay-toggle input,.segmented input{position:absolute;opacity:0;pointer-events:none}
.pay-toggle span,.segmented label>span,.invoice-status-tabs a,.mr-tabs a,.mr-tabs .button-secondary,.settings-nav a,.lp-device-tabs a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--h-control);padding:0 var(--sp-4);border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--text-muted);font-size:var(--fs-sm);font-weight:var(--fw-bold);text-decoration:none;white-space:nowrap;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.pay-toggle label:hover span,.segmented label:hover>span,.invoice-status-tabs a:hover,.mr-tabs a:hover,.settings-nav a:hover,.lp-device-tabs a:hover{background:var(--surface);color:var(--text)}
.pay-toggle input:checked+span,.segmented input:checked+span,.invoice-status-tabs a.active,.mr-tabs a[aria-current=page],.settings-nav a.active,.lp-device-tabs .active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pay-toggle input:focus-visible+span,.segmented input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.invoice-status-tabs{margin:2px 0 var(--sp-5)}
.settings-nav{margin:0 0 var(--sp-5)}

/* ---------- Notices, empty states, details ---------- */
.notice{margin:0 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md);font-size:var(--fs-sm)}
.notice.success{background:var(--green-bg);border-color:var(--green-line);color:var(--green-text)}
.notice.error{background:var(--red-bg);border-color:var(--red-line);color:var(--red-text)}
.notice ul{margin:6px 0 0;padding-left:18px}
.empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--sp-6) var(--sp-4);color:var(--text-muted);font-size:var(--fs-sm);text-align:center}
.empty strong{display:block;color:var(--text);font-size:var(--fs-md)}
.empty-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:var(--sp-2);border:1px dashed var(--border-strong);border-radius:var(--r-md);color:var(--text-faint)}
.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.detail{padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);min-width:0}
.detail span{display:block;margin-bottom:6px;color:var(--text-muted);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.09em;text-transform:uppercase}
.detail strong{display:block;font-size:var(--fs-md);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.status-banner{margin-bottom:var(--sp-3);padding:var(--sp-4);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-sm);background:var(--bg)}
.status-banner strong{font-size:var(--fs-md)}
.status-banner p{margin-top:6px;color:var(--text-muted);font-size:var(--fs-sm)}
.activity{display:grid}
.activity-item{display:flex;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--border);font-size:var(--fs-sm)}
.activity-item:last-child{border-bottom:0}
.activity-dot{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--accent)}
.activity-item small{display:block;margin-top:4px;color:var(--text-muted)}
.notice-row{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4);border-bottom:1px solid var(--border);color:var(--text);text-decoration:none;transition:background-color var(--t-fast) var(--ease)}
.notice-row:hover{background:var(--surface-sunken)}
.notice-row.unread{background:var(--accent-soft)}
.notice-row small{display:block;margin-top:5px;color:var(--text-muted)}
.detail-list{display:grid}

/* Pagination */
.pagination{padding-top:var(--sp-4);color:var(--text-muted);font-size:var(--fs-xs)}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.pager ul{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none}
.pager a,.pager span.page{display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 var(--sp-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-size:var(--fs-sm);font-weight:var(--fw-bold);text-decoration:none;font-variant-numeric:tabular-nums}
.pager a:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.pager span.current{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pager span.disabled{opacity:.4}

/* ---------- Auth pages (login, lupa, reset, ganti sandi pertama) ---------- */
/* HP (<768): app-like, logo kecil di atas, form penuh lebar dengan margin 20px */
.auth-page{min-height:100vh;min-height:100dvh;margin:0;background:var(--bg);color:var(--text)}
.auth-shell{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.auth-stage{padding:16px 76px 0 20px}
.auth-stage-inner{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.auth-stage .brand{padding:0;min-height:44px;gap:10px;font-size:var(--fs-sm)}
.auth-stage .brand .official-brand-logo{width:36px;height:36px;background:transparent}
.auth-stage-kicker{display:none;margin:0;color:var(--accent-text);font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:var(--tracking-label)}
.auth-stage-title{display:none;margin:0;font-size:var(--fs-2xl);font-weight:var(--fw-black);letter-spacing:var(--tracking-tight);line-height:var(--lh-tight);text-wrap:balance}
.auth-stage-copy{display:none;margin:0;color:var(--text-muted);font-size:var(--fs-md);line-height:1.6}
.auth-main{flex:1 0 auto;display:flex;flex-direction:column;padding:28px 20px calc(24px + env(safe-area-inset-bottom,0px))}
.auth-card{position:relative;width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.auth-card::before{content:"";position:absolute;left:36px;top:-1px;width:48px;height:3px;border-radius:0 0 3px 3px;background:var(--accent);display:none}
.auth-card h1{margin:0 0 6px;font-size:28px;font-weight:var(--fw-black);letter-spacing:-.03em;line-height:1.15}
.auth-card>p{margin:0 0 var(--sp-5);color:var(--text-muted);font-size:var(--fs-md);line-height:1.6}
.auth-card>p.help{margin:0 0 var(--sp-4);font-size:var(--fs-sm)}
.auth-card>form:not(.auth-logout){margin-top:var(--sp-5)}
.auth-card .form-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
.auth-card .field>label,.auth-card label{font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.auth-card .field{margin-bottom:var(--sp-4)}
.auth-card .form-grid .field{margin-bottom:0}
.auth-card .checkbox-row{font-weight:var(--fw-medium)}
.auth-card input:not([type=checkbox]):not([type=radio]):not([type=hidden]){min-height:var(--h-control-lg)}
.auth-card input:not([type=checkbox]):not([type=radio]):hover{border-color:var(--text-faint)}
.auth-card input:not([type=checkbox]):not([type=radio]):focus{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent)}
.auth-card input[type=checkbox]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.auth-card input:-webkit-autofill,.auth-card input:-webkit-autofill:hover{-webkit-text-fill-color:var(--text);caret-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--bg) inset;box-shadow:0 0 0 1000px var(--bg) inset;transition:background-color 100000s ease-out 0s}
.auth-card input:-webkit-autofill:focus{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--bg) inset,0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent);box-shadow:0 0 0 1000px var(--bg) inset,0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent)}
.auth-card input:autofill{filter:none}
.auth-card .form-actions{margin-top:var(--sp-5)}
.auth-card .form-actions .button{width:100%;height:var(--h-control);min-height:var(--h-control);padding:0 var(--sp-4);font-size:var(--fs-md);font-weight:var(--fw-bold)}
.auth-card .field small.help{display:block;margin-top:6px;color:var(--text-muted);font-size:var(--fs-xs);line-height:1.5}
.auth-card .login-kicker{margin-bottom:var(--sp-2)}
.password-page .auth-logout{margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid var(--border)}
.auth-card a:not(.brand){color:var(--accent-text);font-weight:var(--fw-bold);text-decoration:none;border-radius:4px}
.auth-card a:not(.brand):hover{text-decoration:underline}
.login-kicker{margin:0 0 var(--sp-2);color:var(--accent-text);font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:var(--tracking-label)}
.login-footer{margin-top:var(--sp-4);text-align:center}
.login-footer>a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-2)}
.login-footer .help{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);line-height:1.6}
.auth-logout{margin-top:var(--sp-4);text-align:center}
.auth-logout .text-button{display:inline-flex;justify-content:center;width:auto;min-height:44px;padding:0 var(--sp-4)}
.auth-logout .text-button svg{width:18px;height:18px}
.auth-theme{position:fixed;top:16px;right:20px;z-index:5}
/* Tablet (768-1023): header ringkas (logo + judul) di atas kartu 440px */
@media(min-width:768px){
  .auth-shell{justify-content:center;padding:72px 24px 48px}
  .auth-stage{padding:0 0 var(--sp-5);text-align:center}
  .auth-stage-inner{align-items:center;max-width:440px;margin:0 auto}
  .auth-stage .brand{font-size:var(--fs-md)}
  .auth-stage .brand .official-brand-logo{width:40px;height:40px}
  .auth-stage-title{display:block}
  .auth-main{flex:none;align-items:center;padding:0}
  .auth-card{width:min(440px,100%);padding:36px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-pop);box-shadow:var(--shadow)}
  .auth-card::before{display:block}
  .auth-theme{top:24px;right:24px}
}
/* Desktop (>=1024): 2 kolom 50/50, panel brand kiri, kartu form kanan */
@media(min-width:1024px){
  .auth-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0}
  .auth-stage{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:var(--sp-7);text-align:left;background:var(--surface);border-right:1px solid var(--border)}
  .auth-stage::before{content:"";position:absolute;right:-150px;bottom:-170px;width:440px;height:440px;border:1px solid var(--accent-line);border-radius:50%;opacity:.7;pointer-events:none}
  .auth-stage::after{content:"";position:absolute;left:-140px;top:-140px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft) 0%,transparent 70%);pointer-events:none}
  .auth-stage-inner{position:relative;z-index:1;width:100%;max-width:420px;margin:0;align-items:flex-start;gap:var(--sp-4)}
  .auth-stage .brand{margin-bottom:var(--sp-6)}
  .auth-stage .brand .official-brand-logo{width:48px;height:48px}
  .auth-stage-kicker{display:inline-flex;align-items:center;gap:10px}
  .auth-stage-kicker::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--accent)}
  .auth-stage-title{font-size:clamp(36px,3.3vw,46px)}
  .auth-stage-copy{display:block;max-width:34ch;font-size:var(--fs-lg)}
  .auth-main{justify-content:center;padding:var(--sp-7) var(--sp-6)}
  .auth-card{width:min(400px,100%);padding:40px 36px 36px}
}

/* ---------- Lists, filters, popovers ---------- */
.list-filters{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr)) auto;gap:var(--sp-3);align-items:end;margin-bottom:var(--sp-4)}
.list-filters .field{margin:0}
.filter-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.invoice-list-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--sp-3);align-items:center;margin-bottom:var(--sp-4)}
.customer-invoice-toolbar{grid-template-columns:minmax(0,1fr) auto}
.invoice-search{position:relative;display:block;min-width:0}
.shell .invoice-search input{padding-right:52px}
.invoice-search button{position:absolute;right:4px;top:4px;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-muted);transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.invoice-search button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.invoice-search button:hover{background:var(--accent-soft);color:var(--accent-text)}
.filter-panel{position:relative}
.filter-panel>summary{list-style:none;cursor:pointer}
.filter-panel>summary::-webkit-details-marker{display:none}
.filter-panel>summary svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.filter-panel[open]>summary{border-color:var(--accent);color:var(--accent-text)}
.filter-popover{position:absolute;z-index:15;top:calc(100% + 8px);right:0;width:min(540px,calc(100vw - 40px));padding:var(--sp-4);border-radius:var(--r-md);background:var(--surface-pop);box-shadow:var(--shadow-pop);border:1px solid var(--border);animation:pop-in var(--t-base) var(--ease)}
.filter-popover .form-grid{gap:var(--sp-3)}
.filter-popover-actions{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-4)}
@keyframes pop-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.actions-column{width:68px;text-align:right}
.row-action-menu{position:relative;display:inline-block}
.row-action-menu>summary{display:grid;place-items:center;width:36px;height:36px;list-style:none;border:1px solid var(--border);border-radius:var(--r-sm);background:transparent;color:var(--text-muted);font-size:20px;line-height:1;cursor:pointer;transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.row-action-menu>summary:hover{border-color:var(--border-strong);background:var(--surface)}
.row-action-menu>summary::-webkit-details-marker{display:none}
.row-action-popover{position:absolute;z-index:16;right:0;top:calc(100% + 6px);width:190px;padding:4px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-pop);box-shadow:var(--shadow-pop);text-align:left;animation:pop-in var(--t-fast) var(--ease)}
.row-action-popover.is-fixed{position:fixed;z-index:60;right:auto;top:auto}
.row-action-popover form{margin:0}
.row-action-popover>a,.row-action-popover button{display:block;width:100%;min-height:40px;padding:10px var(--sp-3);border:0;border-radius:8px;background:none;color:var(--text);font-size:var(--fs-sm);font-weight:var(--fw-medium);text-align:left;text-decoration:none;cursor:pointer}
.row-action-popover>a:hover,.row-action-popover button:hover{background:var(--accent-soft);text-decoration:none}
.row-action-popover .row-action-danger{color:var(--red-text)}
.row-action-popover .row-action-danger:hover{background:var(--red-bg)}
tr.row-link{position:relative;cursor:pointer}
tr.row-link:hover>td,tr.row-link:focus-within>td{background:var(--accent-soft)}
tr.row-link:hover{box-shadow:inset 3px 0 0 var(--accent)}
.row-link-target{color:var(--text);font-weight:var(--fw-bold);text-decoration:none}
tr.row-link .row-link-target{color:var(--text)}
.row-link-target::after{content:"";position:absolute;inset:0;z-index:1}
.row-link-target:focus-visible{outline:none}
tr.row-link:has(.row-link-target:focus-visible){outline:2px solid var(--focus);outline-offset:-2px}
tr.row-link :is(details,form,button,.row-action-menu){position:relative;z-index:2}
tr.row-link details[open]{z-index:5}
.invoice-table th.numeric,.invoice-table td.numeric{text-align:right;white-space:nowrap}
.invoice-table th,.invoice-table td{vertical-align:top}
.invoice-table td{line-height:1.4}
.invoice-table td[data-label="Invoice"],.invoice-table td[data-label="Nomor"]{min-width:13.5rem}
.invoice-table .row-link-target,.invoice-table td[data-label="Invoice"],.invoice-table td[data-label="Nomor"]{font-variant-numeric:tabular-nums}
.invoice-table .row-link-target{display:block;width:max-content;max-width:100%;color:var(--text);font-weight:var(--fw-bold);line-height:1.35;white-space:nowrap;overflow-wrap:normal;word-break:keep-all}
.invoice-table td[data-label="Invoice"] small,.invoice-table td[data-label="Nomor"] small{display:block;margin-top:4px;line-height:1.35}
.invoice-table td[data-label="Pelanggan"]{min-width:9.5rem;overflow-wrap:break-word;word-break:normal}
.invoice-table td[data-label="Periode"],.invoice-table td[data-label="Tanggal"],.invoice-table td[data-label="Jatuh tempo"]{white-space:nowrap}
.invoice-status-cell,.invoice-table td[data-label="Status"]{white-space:nowrap}
.invoice-status-cell .badge,.invoice-status-cell .badge-action,.invoice-table td[data-label="Status"] .badge,.invoice-table td[data-label="Status"] .badge-action{margin-left:0;vertical-align:middle}
.invoice-status-cell .badge-action,.invoice-table td[data-label="Status"] .badge-action{margin-left:var(--sp-2)}
.invoice-table td.actions-column{vertical-align:top;text-align:right}

/* ---------- Documents, payments, accounts ---------- */
.document-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.document-card{display:grid;align-content:start;gap:var(--sp-3);min-width:0;padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg)}
.document-card>div:first-child{display:grid;gap:6px}
.document-card strong{font-size:var(--fs-md)}
.document-card small{color:var(--text-muted);font-size:var(--fs-xs)}
.document-copy{display:flex;align-items:flex-start;gap:var(--sp-3);min-width:0}
.document-copy>div{display:grid;gap:6px;min-width:0}
.document-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-text);font-size:16px}
.document-copy .eyebrow{margin:0}
.document-actions{display:flex;flex-wrap:wrap;gap:6px}
.upload-form{display:grid;gap:var(--sp-2);align-items:end}
.manual-entry{margin-top:var(--sp-4);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg)}
.manual-entry summary{color:var(--accent-text);font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer}
.manual-entry[open] summary{margin-bottom:var(--sp-4)}
.payment-detail-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);align-items:start}
.payment-history-row{display:grid;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
.payment-history-row:last-of-type{border-bottom:0}
.payment-history-row>div:first-child{display:grid;gap:6px}
.payment-history-row small{color:var(--text-muted);font-size:var(--fs-xs);line-height:1.55}
.compact-empty{padding:var(--sp-5) var(--sp-3)}
.transaction-form{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--border)}
.transaction-form h3{margin:0 0 6px;font-size:var(--fs-md)}
.transaction-form>.subtle{margin:0 0 var(--sp-4)!important}
.transaction-form .form-grid{gap:var(--sp-3)}
.portal-user-row{display:grid;grid-template-columns:minmax(110px,.75fr) minmax(0,2fr) auto;align-items:center;gap:var(--sp-4);padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
.portal-user-identity{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.portal-user-identity>div{min-width:0}
.portal-user-identity strong{display:block;font-size:var(--fs-sm)}
.portal-user-identity small{display:block;margin-top:4px;color:var(--text-muted);font-size:var(--fs-xs);overflow-wrap:anywhere}
.portal-user-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2) var(--sp-3);min-width:0}
.portal-user-fields>div{min-width:0}
.portal-user-fields>div>span{display:block;margin-bottom:3px;color:var(--text-muted);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase}
.portal-user-fields>div>strong{display:block;overflow-wrap:anywhere;font-size:var(--fs-xs)}
.portal-user-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.account-add-disclosure{margin-top:var(--sp-4)}
.account-add-disclosure>summary{display:flex;align-items:center;width:max-content;max-width:100%;min-height:var(--h-control);padding:0 var(--sp-4);border:1px solid var(--border-strong);border-radius:var(--r-sm);color:var(--text);background:transparent;font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer;list-style:none}
.account-add-disclosure>summary::-webkit-details-marker{display:none}
.account-add-disclosure>summary:hover{border-color:var(--accent-line);background:var(--surface-sunken)}
.account-add-disclosure[open]>summary{margin-bottom:var(--sp-4)}
.account-add-disclosure form{padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg)}
.account-readonly{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin:0 0 var(--sp-4)}
.account-readonly>div{min-width:0;padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg)}
.account-readonly span{display:block;margin-bottom:5px;color:var(--text-muted);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase}
.account-readonly strong{display:block;font-size:var(--fs-sm);overflow-wrap:anywhere}
.account-security-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--border)}
.account-security-actions p{margin-top:5px}
.account-management-layout{align-items:start}
.profile-avatar-preview{margin:5px 0 var(--sp-5)}
.avatar-large,.profile-avatar-preview img{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;object-fit:cover;object-position:center;background:var(--accent-soft);color:var(--accent-text);font-weight:var(--fw-black);font-size:35px}
.profile-avatar-preview img[hidden],.profile-avatar-preview [hidden]{display:none!important}
.logout-card{border-color:var(--red-line)}
.logout-card form{margin-top:var(--sp-4)}
.profile-avatar-row{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.profile-avatar-row .profile-avatar-preview{margin:0;flex:none}
.profile-avatar-row .field{flex:1;min-width:0}
.profile-access{display:grid;gap:0;margin:0}
.profile-access>div{display:grid;grid-template-columns:minmax(84px,.4fr) minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px solid var(--border)}
.profile-access>div:last-child{border-bottom:0}
.profile-access dt{color:var(--text-muted);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.profile-access dd{margin:0;color:var(--text);font-size:var(--fs-sm);font-weight:var(--fw-bold);overflow-wrap:normal;word-break:normal}
.profile-access-title{margin:var(--sp-4) 0 var(--sp-2);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.perm-full{margin:0}
.perm-groups{display:grid;gap:var(--sp-2);margin:0;padding:0;list-style:none}
.perm-groups li{display:grid;gap:4px}
.perm-module{color:var(--text-muted);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.perm-chips{display:flex;flex-wrap:wrap;gap:4px}
.perm-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface-sunken);color:var(--text);font-size:var(--fs-2xs);font-weight:var(--fw-bold);white-space:nowrap}
.setup-steps{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-4);padding:0;list-style:none;counter-reset:none}
.setup-steps li{display:flex;align-items:center;gap:var(--sp-2);flex:1 1 150px;min-width:0;padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text-muted);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.setup-steps li span{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--surface-sunken);color:var(--text-muted);font-size:var(--fs-xs)}
.setup-steps li.is-current{border-color:var(--accent);color:var(--text)}
.setup-steps li.is-current span{background:var(--accent);color:var(--on-accent)}
.setup-steps li.is-done span{background:var(--green-bg);color:var(--green-text)}
.setup-actions{justify-content:space-between}
.setup-actions .setup-actions-end{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-left:auto}
.setup-saved{display:grid;gap:var(--sp-2);margin:0 0 var(--sp-4);padding:0;list-style:none}
.setup-saved li{padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-sunken);font-size:var(--fs-sm);overflow-wrap:break-word}
.password-generate{display:flex;gap:var(--sp-2)}
.password-generate input{flex:1;min-width:0}
.summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);align-items:start}
.summary-grid>.card{margin-bottom:0}
.summary-grid>.summary-wide{grid-column:1/-1}
.summary-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.summary-list>li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-2) var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
.summary-list>li:last-child{border-bottom:0}
.summary-list>li>div{min-width:0}
.summary-list strong{display:block;font-size:var(--fs-sm);overflow-wrap:break-word}
.summary-list small{display:block;margin-top:2px;color:var(--text-muted);font-size:var(--fs-xs);line-height:1.5}
.summary-list .actions{flex:none}
.summary-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-4);margin:0}
.summary-fields>div{min-width:0}
.summary-fields dt{color:var(--text-muted);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase}
.summary-fields dd{margin:2px 0 0;font-size:var(--fs-sm);overflow-wrap:break-word;word-break:normal}
.summary-fields .full{grid-column:1/-1}
@media(max-width:1023px){.summary-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:767px){.setup-steps{flex-wrap:nowrap;gap:6px}.setup-steps li{flex:1 1 0;gap:6px;padding:6px 8px;font-size:var(--fs-xs);line-height:1.25}.setup-steps li span{width:22px;height:22px}.profile-avatar-row{flex-direction:column;align-items:flex-start}.summary-fields{grid-template-columns:minmax(0,1fr)}.setup-actions{flex-direction:column-reverse;align-items:stretch}.form-actions.setup-actions>a{flex:none;width:100%}.setup-actions .setup-actions-end{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%;margin-left:0}.setup-actions .setup-actions-end>*{width:100%;min-height:var(--h-touch)}}
.template-preview{width:100%;height:300px;border:1px solid var(--border);border-radius:var(--r-md)}
.corp-hero-image-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr);gap:36px;align-items:center}
.corp-hero-image{width:100%;max-height:390px;object-fit:cover;border-radius:var(--r-lg)}

/* ---------- Charts ---------- */
.payment-stats{margin-bottom:var(--sp-4)}
.chart-card .card-head{align-items:flex-start}
.year-picker{display:flex;align-items:center;gap:var(--sp-2)}
.year-picker label{color:var(--text-muted);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase}
.year-picker select{width:auto!important;min-height:var(--h-control)!important}
.chart-scroll{width:100%;overflow:hidden}
.invoice-chart{display:block;width:100%;height:auto;max-height:310px;overflow:visible}
.chart-gridline{stroke:var(--border);stroke-width:1}
.chart-axis-label,.chart-month-label{fill:var(--text-muted);font:9px var(--font)}
.chart-month-label{font-size:10px}
.chart-line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chart-point{fill:var(--bg);stroke:var(--accent);stroke-width:2}
.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:170px;padding:var(--sp-5);border:1px dashed var(--border-strong);border-radius:var(--r-md);text-align:center}
.chart-empty-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);font-size:20px}
.chart-empty strong{margin-top:10px;font-size:var(--fs-sm)}
.chart-empty p{margin-top:5px;color:var(--text-muted);font-size:var(--fs-xs)}
.dashboard-pending{margin:0 0 var(--sp-4)}
.bars{display:flex;align-items:stretch;gap:var(--sp-3);height:190px;padding-top:var(--sp-2);border-bottom:1px solid var(--border)}
.bars>div{flex:1;min-width:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:6px;justify-items:center}
.bar-track{display:flex;align-items:flex-end;justify-content:center;width:100%;min-height:0}
.bars .bar{display:block;width:100%;max-width:44px;min-height:3px;border-radius:6px 6px 0 0;background:var(--border-strong);transition:height var(--t-slow) var(--ease),background-color var(--t-fast) var(--ease)}
.bars>div:last-child .bar,.bars .bar.is-current{background:var(--accent)}
.bars>div:hover .bar{background:var(--accent-hover)}
.bars small{padding-bottom:6px;color:var(--text-muted);font-size:var(--fs-xs);font-weight:var(--fw-medium)}
.kv{display:grid;margin:0}
.kv>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
.kv>div:last-child{border-bottom:0}
.kv dt{color:var(--text-muted);font-size:var(--fs-sm)}
.kv dd{margin:0;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;text-align:right}
a.stat-link{color:inherit;text-decoration:none;transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
a.stat-link:hover{border-color:var(--accent-line);background:var(--surface-sunken)}
a.stat-link.is-danger{border-color:var(--red-line)}
.dash-row{margin-bottom:var(--sp-4)}

/* ---------- Skeleton loading ---------- */
.skeleton,.skeleton-line{display:block;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--skeleton-a) 25%,var(--skeleton-b) 50%,var(--skeleton-a) 75%);background-size:200% 100%;animation:skeleton 1.6s ease-in-out infinite}
.skeleton-line{height:12px;margin:8px 0}
.skeleton-block{height:88px}
@keyframes skeleton{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- Sticky primary action (mobile) ---------- */
.sticky-cta{display:none}

/* ---------- HP & tablet (<1200): app shell, floating bottom nav, drawer ---------- */
@media(max-width:1199px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .columns,.split,.acct-split{grid-template-columns:1fr}
  .page-content{padding:var(--sp-5) var(--sp-5) 108px}
  .topbar{height:56px;padding:0 var(--sp-5);gap:var(--sp-2)}
  .document-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .list-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sidebar{width:min(300px,86vw);transform:translateX(-105%);padding-bottom:calc(var(--sp-4) + env(safe-area-inset-bottom,0px));box-shadow:none;z-index:40}
  body.nav-open .sidebar{transform:translateX(0);box-shadow:var(--shadow-pop)}
  body.nav-open .drawer-backdrop{display:block;position:fixed;inset:0;z-index:35;border:0;background:var(--overlay)}
  .main-area{margin-left:0}
  .mobile-menu{display:none}
  .user-name{display:none}
  .user-chip{padding:0 3px;min-height:var(--h-touch);border-color:transparent}
  .icon-button{width:var(--h-touch);height:var(--h-touch)}
  body.customer-portal .sidebar,body.customer-portal .drawer-backdrop{display:none!important}
  .mobile-nav{position:fixed;z-index:30;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(5,1fr);height:64px;padding:4px;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-pop)}
  .mobile-nav a,.mobile-nav .nav-more{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:44px;border:0;background:none;color:var(--text-muted);text-decoration:none;font:inherit;border-radius:14px;transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
  .mobile-nav a:active,.mobile-nav .nav-more:active{transform:scale(.98)}
  .mobile-nav small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;font-weight:var(--fw-medium)}
  .mobile-nav a.active,.mobile-nav a.is-accent{color:var(--accent-text)}
  .mobile-nav a.active .icon,.mobile-nav a.is-accent .icon{color:var(--accent-text)}
  .mobile-nav a.active small{font-weight:var(--fw-bold)}
  .mobile-nav .dot{position:absolute;top:8px;left:calc(50% + 6px);width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);box-sizing:content-box}
  .sticky-cta{position:sticky;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:14;display:block}
  .form-actions.is-sticky,.settings-save.is-sticky{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) thead,.is-stack thead{display:none}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table),.page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody,.is-stack,.is-stack tbody{display:block;width:100%}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody,.is-stack tbody{display:grid;gap:var(--sp-3)}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody tr,.page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody tr:hover,.is-stack tbody tr,.is-stack tbody tr:hover{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-4);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);box-shadow:none}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td,.is-stack tbody td{display:flex;flex-direction:column;justify-content:flex-start;gap:3px;min-width:0;padding:0;border:0;overflow-wrap:break-word;word-break:normal;font-size:var(--fs-sm);text-align:left}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td::before,.is-stack tbody td::before{content:attr(data-label);color:var(--text-muted);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td[data-label=""]::before,.is-stack tbody td[data-label=""]::before{display:none}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td:first-child,.page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td:nth-child(2):not([data-label=Periode]):not([data-label=Total]):not([data-label=Sisa]),.is-stack tbody td:first-child,.is-stack tbody td:nth-child(2):not([data-label=Periode]):not([data-label=Total]):not([data-label=Sisa]){grid-column:1/-1}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td:first-child,.is-stack tbody td:first-child{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td.numeric,.is-stack tbody td.numeric{text-align:left}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td.actions-column,.page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td[data-label=Aksi],.is-stack tbody td.actions-column,.is-stack tbody td[data-label=Aksi]{grid-column:1/-1;width:auto;align-items:flex-start;flex-direction:row;justify-content:flex-end}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td.actions-column::before,.page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td[data-label=Aksi]::before,.is-stack tbody td.actions-column::before,.is-stack tbody td[data-label=Aksi]::before{display:none}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td>br,.is-stack tbody td>br{display:none}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td .badge,.is-stack tbody td .badge{align-self:flex-start}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td[colspan],.is-stack tbody td[colspan]{display:block;grid-column:1/-1}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td[colspan]::before,.is-stack tbody td[colspan]::before{display:none}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tbody td[colspan] .empty,.is-stack tbody td[colspan] .empty{padding:var(--sp-5) var(--sp-2)}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tr.row-link:hover,.is-stack tr.row-link:hover{box-shadow:none}
  .page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tr.row-link:hover>td,.page-content table:not(.no-stack):not(.mr-table):not(.mr-parts-table):not(.lp-list-table) tr.row-link:focus-within>td,.is-stack tr.row-link:hover>td,.is-stack tr.row-link:focus-within>td{background:transparent}
  .invoice-table tbody td .badge-action{margin:0;align-self:flex-start}
  .invoice-table td[data-label="Invoice"],.invoice-table td[data-label="Nomor"]{min-width:0}
  .invoice-table .row-link-target{width:auto;max-width:100%}
  .invoice-status-cell,.invoice-table td[data-label="Status"]{white-space:normal;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
}

/* ---------- Phone (<768) ---------- */
@media(max-width:767px){
  body{font-size:15px}
  .topbar{padding:0 var(--sp-3)}
  .page-content{padding:var(--sp-4) var(--sp-4) 108px}
  .page-heading{align-items:flex-start;flex-direction:column;margin-bottom:var(--sp-4)}
  .page-heading h1{font-size:24px}
  .page-heading>.button-grid,.page-heading>.actions,.customer-greeting-actions{width:100%}
  .page-heading>.actions>*{flex:1}
  .card{padding:var(--sp-4)}
  .stats{gap:var(--sp-3)}
  .stat{padding:var(--sp-3) var(--sp-4)}
  .stat>strong{font-size:22px}
  .form-grid,.repeater-fields{grid-template-columns:minmax(0,1fr)}
  .field.full{grid-column:auto}
  .detail-grid,.document-grid,.payment-detail-columns,.account-readonly,.portal-user-fields{grid-template-columns:minmax(0,1fr)}
  .portal-user-row{grid-template-columns:1fr;justify-items:start}
  .portal-user-actions{justify-content:flex-start}
  .account-security-actions{align-items:flex-start;flex-direction:column}
  .button,.button-secondary,.button-danger,.button-ghost{min-height:var(--h-touch)}
  .button-small{min-height:var(--h-touch);padding:0 var(--sp-4)}
  .badge-action{min-height:var(--h-touch);padding:0 var(--sp-4)}
  .shell input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.shell select,.shell textarea,.auth-card input:not([type=checkbox]):not([type=hidden]){font-size:16px}
  .form-actions{gap:var(--sp-3)}
  .form-actions>:is(.button,.button-secondary,.button-danger){flex:1 1 140px}
  .form-actions.setup-actions:not(.form-actions-sticky)>:is(.button,.button-secondary,.button-danger,.button-ghost){flex:0 0 auto;min-height:var(--h-touch)}
  .form-actions.is-sticky,.settings-save.is-sticky{position:sticky;bottom:0;z-index:12;margin:0 calc(var(--sp-4) * -1);padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--border)}
  body.customer-portal .form-actions.is-sticky,body.customer-portal .settings-save.is-sticky{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .list-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
  .list-filters>.field:first-child,.list-filters>.filter-actions{grid-column:1/-1}
  .filter-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .filter-actions .button,.filter-actions .button-secondary{width:100%}
  .invoice-list-toolbar{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2)}
  .invoice-list-toolbar>.invoice-search{grid-column:1/-1}
  .invoice-list-toolbar:not(.customer-invoice-toolbar)>.filter-panel{grid-column:1;grid-row:2}
  .invoice-list-toolbar:not(.customer-invoice-toolbar)>.invoice-create-button{grid-column:2;grid-row:2}
  .customer-invoice-toolbar>.filter-panel{grid-column:1/-1;grid-row:2;justify-self:start}
  .filter-popover{position:fixed;z-index:50;top:auto;left:var(--sp-4);right:var(--sp-4);bottom:calc(var(--sp-4) + env(safe-area-inset-bottom,0px));width:auto;max-height:min(70vh,480px);overflow:auto}
  .filter-popover .form-grid{grid-template-columns:1fr}
  .filter-popover-actions{display:grid;grid-template-columns:1fr 1fr}
  .invoice-status-tabs,.settings-nav,.mr-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none}
  .invoice-status-tabs::-webkit-scrollbar,.settings-nav::-webkit-scrollbar{display:none}
  .invoice-status-tabs a,.settings-nav a{flex:1 0 auto;min-height:var(--h-touch)}
  .pay-toggle{display:flex;width:100%}
  .pay-toggle label{flex:1}
  .pay-toggle span{width:100%;min-height:var(--h-touch);white-space:normal;text-align:center}
  .corp-hero-image-layout{grid-template-columns:1fr}
  .corp-hero-image{max-height:250px}
  .filter-row{flex-wrap:wrap}
  .search{max-width:none;min-width:100%}
  .inline-form{flex-direction:column;align-items:stretch}
  .repeater-row{grid-template-columns:1fr;align-items:stretch}
  .repeater-remove{width:100%}
  .payment-stats{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--sp-3);grid-template-columns:none}
  .payment-stats .stat{min-width:72%;scroll-snap-align:start;flex:none}
}
@media(max-width:379px){
  .stats,.payment-stats{grid-template-columns:1fr}
  .page-heading>.button-grid{grid-template-columns:1fr}
  .list-filters{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .is-loading::before{animation:none;border-right-color:currentColor}
  .page-content{animation:none}
}

.side-nav a{position:relative}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:auto;padding:0 5px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:var(--fw-bold);line-height:1}
.counter-photo{display:block;width:100%;max-width:480px;height:auto;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg)}
.counter-card .button,.counter-prompt .button{margin-top:var(--sp-3)}
.counter-prompt .card-head{align-items:flex-start;gap:var(--sp-4)}
.reminder-history{margin-top:var(--sp-3)}
@media(max-width:639px){
  .counter-prompt .card-head{flex-direction:column}
  .counter-prompt .button{width:100%}
}

/* ---------- Print ---------- */
/* ---------- Grouping, filters, meter grid, parts ---------- */
.view-toggle{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-sunken)}
.view-toggle-btn{min-height:36px;padding:0 14px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-muted);font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.view-toggle-btn.is-active{background:var(--surface);color:var(--text);box-shadow:0 1px 0 var(--border)}
.filter-bar,.live-filter{display:flex;flex-wrap:wrap;align-items:end;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.filter-bar .field{margin:0;min-width:140px}
.filter-bar .filter-search,.filter-bar .search{flex:1 1 180px;min-width:160px}
.filter-label{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);padding-bottom:10px}
.chip-filter{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.customer-group{margin:0 0 var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.customer-group-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);min-height:56px;padding:var(--sp-4);cursor:pointer;list-style:none}
.customer-group-head::-webkit-details-marker{display:none}
.customer-group-title{font-size:18px;font-weight:var(--fw-bold)}
.customer-group-meta{color:var(--text-muted);font-size:var(--fs-sm);margin-right:auto}
.customer-group-body{padding:0 var(--sp-4) var(--sp-4);border-top:1px solid var(--border)}
.customer-group-foot,.customer-group-actions{margin:var(--sp-3) 0 0}
.customer-group.is-action{border-color:var(--accent-line)}
.meter-progress{margin-top:var(--sp-3)}
.meter-progress-bar{height:6px;border-radius:var(--r-pill);background:var(--surface-sunken);overflow:hidden}
.meter-progress-bar>i{display:block;height:100%;background:var(--accent)}
.meter-ending{max-width:9rem;text-align:right;font-variant-numeric:tabular-nums}
.meter-ending.is-low{border-color:var(--red)!important;color:var(--red-text)}
.meter-table td small{display:block}
.heading-tools{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.password-generate{display:flex;gap:8px;align-items:center}
.password-generate input{flex:1}
.password-generate .button-secondary{flex:none;min-height:var(--h-control)}
.field-static{display:flex;align-items:center;min-height:var(--h-control-lg);margin:0;padding:10px 14px;border:1px dashed var(--border-strong);border-radius:var(--r-sm);background:var(--surface-sunken);color:var(--text);font-size:var(--fs-md)}
.field .checkbox-row{min-height:var(--h-control)}
.web-consent-static{gap:10px;flex-wrap:wrap;font-size:var(--fs-sm)}
.web-consent-logo{display:block;flex:none;width:auto;max-width:96px;height:28px;object-fit:contain}
.summary-fields .web-consent-logo{display:inline-block;vertical-align:middle;margin-right:8px}
.more-settings{margin:0}
.more-settings>summary{display:inline-flex;align-items:center;gap:6px;min-height:32px;color:var(--text-muted);font-size:var(--fs-xs);font-weight:var(--fw-bold);cursor:pointer;list-style:none}
.more-settings>summary::-webkit-details-marker{display:none}
.more-settings>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform var(--t-fast) var(--ease)}
.more-settings[open]>summary::before{transform:rotate(45deg)}
.more-settings>summary:hover{color:var(--text)}
.more-settings>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.more-settings[open]>summary{margin-bottom:4px}
.title-dot{display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--accent);vertical-align:middle;flex:none}
@media(max-width:420px){.password-generate{flex-wrap:wrap}.password-generate .button-secondary{width:100%}}
.mr-issue-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2) var(--sp-4)}
.mr-parts-head,.mr-part-row{display:grid;grid-template-columns:minmax(90px,.8fr) minmax(140px,1.4fr) 72px minmax(110px,.9fr) minmax(110px,.8fr) minmax(90px,.7fr) 36px;gap:8px;align-items:center}
.mr-parts-head{margin:0 0 8px;color:var(--text-muted);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase}
.mr-part-row{margin:0 0 8px}
.mr-part-row .field{margin:0}
.mr-remove-part{width:32px;height:32px;padding:0;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text-muted);font-size:18px;line-height:1}
.searchable-field{position:relative}
.searchable-filter{margin-bottom:6px}
@media(max-width:767px){
  .mr-issue-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mr-parts-head{display:none}
  .mr-part-row{grid-template-columns:minmax(0,1fr);padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md)}
  .meter-table thead{display:none}
  .meter-table tr,.meter-table td{display:block;width:100%}
  .meter-table tr{padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:var(--sp-3)}
  .filter-bar{flex-direction:column;align-items:stretch}
  .heading-tools{width:100%}
}

@media print{
  :root,[data-theme=dark]{--bg:#fff;--surface:#fff;--surface-raised:#fff;--surface-sunken:#f6f6f7;--border:#ccc;--border-strong:#bbb;--text:#111;--text-muted:#333;--text-faint:#555;--accent-text:#a02d00;color-scheme:light}
  body{background:#fff;color:#111}
  .sidebar,.topbar,.mobile-nav,.drawer-backdrop,.notice,.no-print,.mr-no-print,form,.skip-link,.view-toggle{display:none!important}
  .main-area{margin:0}
  .page-content{padding:0}
  .split{display:block}
  .card{box-shadow:none;border:1px solid #ccc;background:#fff;color:#111;break-inside:avoid}
  .document-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .detail{background:#f7f7f7}
}

/* ---------- Multi-meter (4 meter per mesin), kirim ke portal, gateway ---------- */
.page-header-actions,.heading-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.meter-slots{display:grid;grid-template-columns:repeat(4,minmax(7.5rem,1fr));gap:var(--sp-3)}
.meter-slots.is-single{grid-template-columns:minmax(7.5rem,11rem)}
.meter-slot{display:flex;flex-direction:column;gap:2px;min-width:0}
.meter-slot-label{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text)}
.meter-slot-opening{color:var(--text-muted);font-size:11px;font-variant-numeric:tabular-nums}
.meter-slot-usage{color:var(--text-muted);font-size:11px}
.meter-slot-usage b{color:var(--text);font-variant-numeric:tabular-nums}
.meter-slot .meter-ending{max-width:none;width:100%}
.meter-slot .meter-ending.is-low~.meter-slot-usage b{color:var(--red-text)}
.meter-total{white-space:nowrap;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.meter-entry-table thead th,.meter-table thead th,.portal-table thead th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.meter-stack-line{display:flex;justify-content:flex-end;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.meter-stack-line small{color:var(--text-muted);font-size:11px}
.meter-stack-total{display:block;margin-top:2px;font-weight:var(--fw-bold)}
.meter-customer-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:2px}
.meter-customer-line small{color:var(--text-muted)}
.meter-quick-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.meter-quick-slots [hidden]{display:none}
.gateway-choice{display:grid;gap:var(--sp-3);margin:var(--sp-3) 0}
.gateway-choice label{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md)}
.gateway-choice label.is-disabled{opacity:.6}
.mr-month-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
@media (max-width:1024px){.meter-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .meter-entry-table thead{display:none}
  .meter-entry-table,.meter-entry-table tbody,.meter-entry-table tr,.meter-entry-table td{display:block;width:100%}
  .meter-entry-table tr{padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:var(--sp-3)}
  .meter-entry-table td{border:0;padding:var(--sp-2) 0}
  .meter-slots,.meter-slots.is-single{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mr-month-summary{grid-template-columns:1fr}
  .meter-stack-line{justify-content:flex-start}
}