*{box-sizing:border-box}
html.app-shell-page,html.app-shell-page body{height:100%;overflow:hidden}
body{margin:0;font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--bg);color:var(--fg);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
/* Tingkat judul dasar. Tanpa ini `h2` tanpa kelas memakai bawaan browser
   (1.5em = 21px) dan jadi lebih besar daripada judul halaman `.top h1` (20px).
   Aturan berkelas yang sudah ada tetap menang karena lebih spesifik. */
h1{font-size:20px;font-weight:700;line-height:1.25}
h2{font-size:17px;font-weight:600;line-height:1.3}
h3{font-size:15px;font-weight:600;line-height:1.35}
/* `bolder` bawaan browser menghitung 900 ketika induknya sudah 700, padahal
   fonts.css hanya memuat sampai 700 sehingga hurufnya disintesis. */
b,strong{font-weight:700}
/* `small` bawaan browser mengecilkan 0.8em dan bertumpuk bila induknya sudah
   kecil; batas bawah menjaga teks tetap terbaca. */
small{font-size:max(11px,.85em)}
/* Bypass Blocks (WCAG 2.4.1). Sidebar workspace IT Support memuat belasan
   tautan yang harus dilewati pengguna keyboard di setiap halaman. Tautan ini
   hanya muncul saat menerima fokus. */
.skip-link{
 position:fixed;z-index:200;top:8px;left:8px;transform:translateY(-200%);
 padding:10px 14px;border-radius:var(--control-radius);
 background:var(--accent);color:var(--accent-fg);font-size:13px;font-weight:600
}

/* Pemulihan email terlewat: pratinjau header dahulu, proses hanya pilihan operator. */
.recovery-layout{display:grid;gap:16px;max-width:1500px;margin:0 auto}
.recovery-guide{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);gap:24px;align-items:start}
.recovery-guide h2{margin:5px 0 7px;font-size:19px}
.recovery-guide p{max-width:860px;margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.recovery-guide ol{display:grid;gap:8px;margin:0;padding-left:20px;color:var(--muted);font-size:11.5px}
.recovery-form{display:grid;gap:18px}
.recovery-filter-grid{display:grid;grid-template-columns:minmax(240px,1.2fr) repeat(2,minmax(150px,.5fr));gap:12px}
.recovery-filter-grid .field{display:grid;align-content:start;gap:6px;min-width:0}
.recovery-filter-grid .field>span{color:var(--muted);font-size:11px;font-weight:700}
.recovery-filter-grid .field small{color:var(--muted);font-size:11px;line-height:1.45}
.recovery-query{grid-column:span 2}
.recovery-provider{grid-column:span 1}
.recovery-form-actions{display:flex;gap:8px;padding-top:2px}
.recovery-results{display:grid;gap:13px;padding-top:17px;border-top:1px solid var(--border)}
.recovery-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:11px}
.recovery-table{width:100%;min-width:900px;border:0}
.recovery-table th,.recovery-table td{padding:10px 12px;vertical-align:top}
.recovery-table td small{display:block;margin-top:3px;color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.recovery-table td:nth-child(1){width:54px;text-align:center}
.recovery-table td:nth-child(2){width:270px}
.recovery-table td:nth-child(4){width:145px}
.recovery-table td:nth-child(5){width:240px}
.recovery-process-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.recovery-process-bar p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}
.recovery-process-bar strong{color:var(--fg)}
@media(max-width:720px){
 .recovery-guide,.recovery-filter-grid{grid-template-columns:1fr}
 .recovery-query,.recovery-provider{grid-column:1}
 .recovery-form-actions,.recovery-process-bar{align-items:stretch;flex-direction:column}
 .recovery-form-actions .btn,.recovery-process-bar .btn{width:100%;text-align:center}
}

/* Header ID Tagihan mengikuti pola pengurutan tabel operasional lain. */
.master-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
}
.master-sort-link:hover,
.master-sort-link:focus-visible {
  color: var(--accent);
}
.master-sort-indicator {
  color: var(--muted);
  font-size:11px;
}
.master-table th[aria-sort] .master-sort-indicator {
  color: var(--accent);
}
/* Tautan pengurutan generik untuk tabel laporan dan operasional. */
.table-sort-link {
  display: inline-flex;
  align-items: center;
  justify-content: inherit;
  gap: 5px;
  color: inherit;
  text-decoration: none;
}
.ta-right .table-sort-link {
  justify-content: flex-end;
  width: 100%;
}
.table-sort-link:hover,
.table-sort-link:focus-visible {
  color: var(--accent);
}
.table-sort-indicator {
  color: var(--muted);
  font-size:11px;
}
th[aria-sort] .table-sort-indicator {
  color: var(--accent);
}
.skip-link:focus{transform:translateY(0)}
/* Fokus dipindahkan secara terprogram ke <main tabindex="-1">; outline di
   sekeliling seluruh area konten tidak menambah informasi apa pun. */
main:focus{outline:none}
.wrap{display:flex;height:100vh;overflow:hidden}
#app-sidebar{width:250px;flex:none;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column}
.sidebar-scroll{min-height:0;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;overscroll-behavior:contain}
.sidebar-backdrop,.mobile-nav,.mobile-bottom-nav{display:none}
.desktop-nav{
 position:fixed;z-index:70;top:28px;left:236px;display:grid;place-items:center;width:28px;height:28px;
 padding:0;border:2px solid var(--surface);border-radius:999px;background:var(--accent);color:var(--accent-fg);
 box-shadow:0 3px 10px rgba(37,99,235,.28);cursor:pointer;
 transition:left .2s ease,background .15s ease,transform .15s ease
}
.desktop-nav:hover{background:color-mix(in srgb,var(--accent) 82%,#000);transform:scale(1.06)}
.desktop-nav:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 28%,transparent);outline-offset:2px}
.brand{padding:15px;display:flex;align-items:center;gap:11px}
.logo{width:32px;height:32px;border-radius:var(--control-radius);background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;font-weight:700}
.brand-copy{display:grid;min-width:0}
.brand-copy strong{font-size:13px;font-weight:600;white-space:nowrap}
.brand-copy small{color:var(--faint);font-size:11px;white-space:nowrap}
.company-wrap{margin:0 14px 14px}
.company{margin:0;padding:9px 11px;border:1px solid var(--border);background:var(--surface-2);border-radius:9px;display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer}
.company-wrap summary::-webkit-details-marker{display:none}
.company .n{width:22px;height:22px;border-radius:6px;background:var(--surface-3);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--muted)}
.company-copy{flex:1;min-width:0}
.company-copy strong,.company-copy small{display:block}
.company-copy strong{font-size:12.5px;font-weight:600}
.company-copy small{overflow:hidden;color:var(--faint);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.company-menu{overflow:hidden;margin-top:6px;border:1px solid var(--border);border-radius:9px}
.company-option{display:block;padding:8px 11px;border-top:1px solid var(--border);font-size:12px}
.company-option:first-child{border-top:0}
.company-option.active{background:var(--accent-weak);color:var(--accent);font-weight:600}
.company-empty{padding:8px 11px;color:var(--muted);font-size:11px}
.workspace-switcher{display:flex;margin:0 14px 12px;padding:3px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2)}
.workspace-switcher form{display:flex;flex:1;min-width:0}
.workspace-switcher button{width:100%;min-height:30px;padding:5px 8px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:inherit;font-size:11px;font-weight:600;cursor:pointer}
.workspace-switcher button:hover{background:var(--surface-3);color:var(--fg)}
.workspace-switcher button.active{background:var(--accent);color:var(--accent-fg);box-shadow:0 1px 3px rgba(37,99,235,.25)}
.ui-icon,.nav-icon,.company-chevron,.user-chevron,.user-action-icon,.toggle-icon,.desktop-nav-icon,.mobile-nav-icon,.header-tool-icon{
 fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}
.company-chevron{width:16px;height:16px;flex:none;color:var(--faint);transition:transform .15s ease}
.company-wrap[open] .company-chevron{transform:rotate(180deg)}
.desktop-nav-icon,.mobile-nav-icon{display:block;width:18px;height:18px}
/* Ukuran ikon di dalam isi halaman. `ui-icon-text` menggantikan glyph yang
   dulu ditulis sebagai huruf, jadi ukurannya ikut teks di sekitarnya persis
   seperti huruf yang digantikannya. */
.ui-icon{width:18px;height:18px;flex:none}
.ui-icon-text{width:1.05em;height:1.05em;flex:none;vertical-align:-.14em}
/* Satu-satunya ikon pejal; sisanya bergaris seperti ikon navigasi. */
.ui-icon[data-icon="dot"]{fill:currentColor;stroke:none}
.desktop-nav-icon{transition:transform .2s ease}
.desktop-nav.is-collapsed .desktop-nav-icon{transform:rotate(180deg)}
.navlabel{padding:5px 15px;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
nav a{display:flex;align-items:center;gap:11px;padding:5px 10px;margin:1px 5px;border-radius:9px;color:var(--muted);font-weight:500}
nav .nav-icon{width:20px;height:20px;flex:none}
nav [data-icon="dashboard"]{color:var(--accent-text)}
nav [data-icon="inbox"]{color:#0284c7}
nav [data-icon="list"]{color:#4f46e5}
nav [data-icon="bell"]{color:var(--warn-text)}
nav [data-icon="budget"]{color:var(--teal-text)}
nav [data-icon="procurement"]{color:var(--purple-text)}
nav [data-icon="add-invoice"]{color:var(--warn-text)}
nav [data-icon="id-card"]{color:var(--accent-text)}
nav [data-icon="repeat"]{color:#0891b2}
nav [data-icon="saving"]{color:var(--ok-text)}
nav [data-icon="wallet"]{color:#e11d48}
nav [data-icon="cloud"]{color:#0284c7}
nav [data-icon="chart"]{color:var(--purple-text)}
nav [data-icon="task"]{color:var(--teal-text)}
nav [data-icon="invoice-list"]{color:#4f46e5}
nav [data-icon="invoice-id"]{color:var(--accent-text)}
nav [data-icon="infrastructure"]{color:#0891b2}
nav [data-icon="server"]{color:#0284c7}
nav [data-icon="api-monitor"]{color:var(--warn-text)}
nav [data-icon="configuration"]{color:#64748b}
nav [data-icon="deployment"]{color:var(--purple-text)}
nav [data-icon="database"]{color:var(--ok-text)}
nav [data-icon="backup"]{color:var(--accent-text)}
nav [data-icon="report"]{color:var(--purple-text)}
nav [data-icon="administration"]{color:#64748b}
nav [data-icon="inventory"]{color:var(--accent-text)}
nav [data-icon="asset-receipt"]{color:var(--teal-text)}
nav [data-icon="reconcile"]{color:#0891b2}
nav [data-icon="headset"]{color:#db2777}
nav [data-icon="worklog"]{color:#4f46e5}
nav [data-icon="depreciation"]{color:var(--warn-text)}
nav [data-icon="scan"]{color:var(--warn-text)}
nav [data-icon="boxes"]{color:#0284c7}
nav [data-icon="certificate"]{color:var(--purple-text)}
nav [data-icon="storage"]{color:var(--accent-text)}
nav [data-icon="shield-check"]{color:var(--ok-text)}
nav [data-icon="windows-policy"]{color:var(--accent-text)}
nav [data-icon="key"]{color:var(--warn-text)}
nav [data-icon="history"]{color:#64748b}
nav [data-icon="asset-report"]{color:var(--purple-text)}
nav [data-icon="support-report"]{color:#db2777}
nav [data-icon="combined-report"]{color:#4f46e5}
html[data-theme="dark"] nav [data-icon="dashboard"]{color:#60a5fa}
html[data-theme="dark"] nav [data-icon="inbox"]{color:#38bdf8}
html[data-theme="dark"] nav [data-icon="list"]{color:#818cf8}
html[data-theme="dark"] nav [data-icon="bell"]{color:#fbbf24}
html[data-theme="dark"] nav [data-icon="budget"]{color:#2dd4bf}
html[data-theme="dark"] nav [data-icon="procurement"]{color:#a78bfa}
html[data-theme="dark"] nav [data-icon="add-invoice"]{color:#fb923c}
html[data-theme="dark"] nav [data-icon="id-card"]{color:#60a5fa}
html[data-theme="dark"] nav [data-icon="repeat"]{color:#22d3ee}
html[data-theme="dark"] nav [data-icon="saving"]{color:#4ade80}
html[data-theme="dark"] nav [data-icon="wallet"]{color:#fb7185}
html[data-theme="dark"] nav [data-icon="cloud"]{color:#38bdf8}
html[data-theme="dark"] nav [data-icon="chart"]{color:#a78bfa}
html[data-theme="dark"] nav [data-icon="task"]{color:#2dd4bf}
html[data-theme="dark"] nav [data-icon="invoice-list"]{color:#818cf8}
html[data-theme="dark"] nav [data-icon="invoice-id"]{color:#60a5fa}
html[data-theme="dark"] nav [data-icon="infrastructure"]{color:#22d3ee}
html[data-theme="dark"] nav [data-icon="server"]{color:#38bdf8}
html[data-theme="dark"] nav [data-icon="api-monitor"]{color:#fb923c}
html[data-theme="dark"] nav [data-icon="configuration"]{color:#94a3b8}
html[data-theme="dark"] nav [data-icon="deployment"]{color:#a78bfa}
html[data-theme="dark"] nav [data-icon="database"]{color:#34d399}
html[data-theme="dark"] nav [data-icon="backup"]{color:#60a5fa}
html[data-theme="dark"] nav [data-icon="report"]{color:#a78bfa}
html[data-theme="dark"] nav [data-icon="administration"]{color:#94a3b8}
html[data-theme="dark"] nav [data-icon="inventory"]{color:#60a5fa}
html[data-theme="dark"] nav [data-icon="asset-receipt"]{color:#2dd4bf}
html[data-theme="dark"] nav [data-icon="reconcile"]{color:#22d3ee}
html[data-theme="dark"] nav [data-icon="headset"]{color:#f472b6}
html[data-theme="dark"] nav [data-icon="worklog"]{color:#818cf8}
html[data-theme="dark"] nav [data-icon="depreciation"]{color:#fb923c}
html[data-theme="dark"] nav [data-icon="scan"]{color:#fbbf24}
html[data-theme="dark"] nav [data-icon="boxes"]{color:#38bdf8}
html[data-theme="dark"] nav [data-icon="certificate"]{color:#a78bfa}
html[data-theme="dark"] nav [data-icon="storage"]{color:#60a5fa}
html[data-theme="dark"] nav [data-icon="shield-check"]{color:#34d399}
html[data-theme="dark"] nav [data-icon="windows-policy"]{color:#60a5fa}
html[data-theme="dark"] nav [data-icon="key"]{color:#fbbf24}
html[data-theme="dark"] nav [data-icon="history"]{color:#94a3b8}
html[data-theme="dark"] nav [data-icon="asset-report"]{color:#a78bfa}
html[data-theme="dark"] nav [data-icon="support-report"]{color:#f472b6}
html[data-theme="dark"] nav [data-icon="combined-report"]{color:#818cf8}
nav .nav-text{min-width:0}
nav a.active{background:var(--accent-weak);color:var(--accent);font-weight:600}
nav a:hover:not(.active){background:var(--surface-2)}
nav .badge{margin-left:auto;background:var(--accent);color:var(--accent-fg);font-size:11px;font-weight:600;padding:1px 7px;border-radius:9px}
nav .task-active-badge{background:var(--surface-2);border:1px solid var(--border);color:var(--muted);font-variant-numeric:tabular-nums}
nav a.active .task-active-badge{background:var(--surface);border-color:var(--accent);color:var(--accent)}
.toggle{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:3px}
.toggle button{display:flex;align-items:center;justify-content:center;gap:5px;flex:1;border:0;background:transparent;color:var(--muted);padding:6px;border-radius:6px;cursor:pointer;font-size:12px;font-family:inherit}
.toggle-icon{width:15px;height:15px;flex:none}
.toggle button.on{background:var(--surface);color:var(--fg);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.user-menu{position:relative}.user-menu>summary::-webkit-details-marker{display:none}.user-menu>summary{list-style:none}
.user{display:flex;align-items:center;gap:10px;margin:0;padding:5px 4px;border-radius:9px;cursor:pointer}.user:hover{background:var(--surface-2)}
.user .av{width:30px;height:30px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--muted)}
.user-copy{min-width:0;flex:1}.user-copy strong,.user-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-copy strong{font-size:12.5px}.user-copy small{margin-top:1px;color:var(--faint);font-size:11px;font-weight:400}.user-chevron{width:16px;height:16px;flex:none;color:var(--faint);transition:transform .15s ease}.user-menu[open] .user-chevron{transform:rotate(180deg)}
.user-popover{padding:10px}
.user-popover-title{padding:2px 4px 8px;color:var(--faint);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.user-action{display:grid;grid-template-columns:22px minmax(0,1fr);gap:7px;align-items:center;padding:8px;border-radius:8px}.user-action:hover{background:var(--surface-2)}.user-action strong,.user-action small{display:block}.user-action strong{font-size:11.5px}.user-action small{margin-top:1px;color:var(--faint);font-size:11px;font-weight:400}.user-preference{display:grid;gap:5px;margin-top:8px}.user-preference>span{color:var(--faint);font-size:11px}.user-preference .toggle button{padding:5px;font-size:11px}
.user-action-icon{width:18px;height:18px}
.sidebar-logout{margin-top:9px}
.sidebar-logout button{
 width:100%;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--muted);
 padding:7px 9px;font:600 11px/1.4 'IBM Plex Sans',system-ui,sans-serif;cursor:pointer
}
.sidebar-logout button:hover,.sidebar-logout button:focus-visible{border-color:var(--danger);color:var(--danger-text);background:color-mix(in srgb,var(--danger) 7%,var(--surface))}
.wrap > main{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden}
.top{position:sticky;z-index:60;top:0;display:flex;align-items:center;gap:12px;padding:10px 15px;border-bottom:1px solid var(--border);background:var(--surface);box-shadow:0 1px 0 var(--border)}
.top-title{min-width:0}
.top h1{margin:0;font-size:20px;letter-spacing:-.01em}
.top .sub{font-size:12px;color:var(--faint)}
.top .sp{flex:1}
.top-actions{display:flex;align-items:center;gap:8px;min-width:0}
.workspace-context-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 18px 0;padding:11px 14px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--fg)}
.workspace-context-banner form{flex:0 0 auto}
.top-tools{display:flex;align-items:center;gap:8px;flex:none}
.notification-live-region{display:flex;align-items:center}
.header-menu{position:relative}
.header-menu>summary::-webkit-details-marker{display:none}
.header-menu>summary{list-style:none}
.top-icon-button{position:relative;display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--muted);cursor:pointer}
.top-icon-button:hover,.header-menu[open]>.top-icon-button{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));background:var(--accent-weak);color:var(--accent)}
.header-tool-icon{width:19px;height:19px}
.notification-menu .header-tool-icon{color:var(--warn-text)}
html[data-theme="dark"] .notification-menu .header-tool-icon{color:#fbbf24}
.header-badge{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border:2px solid var(--surface);border-radius:999px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;line-height:1}
.header-popover{position:absolute;z-index:90;top:calc(100% + 9px);right:0;width:270px;border:1px solid var(--border);border-radius:var(--panel-radius);background:var(--surface);box-shadow:0 16px 40px rgba(16,24,40,.2)}
.notification-popover{width:min(370px,calc(100vw - 24px));overflow:hidden}
.notification-popover-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-bottom:1px solid var(--border)}
.notification-popover-head strong{font-size:13px}
.notification-popover-head span{color:var(--accent);font-size:11px;font-weight:600}
.notification-preview-list{max-height:330px;overflow-y:auto;overscroll-behavior:contain}
.notification-preview{display:grid;grid-template-columns:8px minmax(0,1fr);gap:9px;padding:11px 14px;border-bottom:1px solid var(--border)}
.notification-preview:hover{background:var(--surface-2)}
.notification-preview>span:last-child{min-width:0}
.notification-preview strong,.notification-preview small,.notification-preview time{display:block}
.notification-preview strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.notification-preview small{display:-webkit-box;overflow:hidden;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.notification-preview time{margin-top:4px;color:var(--faint);font-size:11px}
.notification-dot{width:7px;height:7px;margin-top:5px;border-radius:50%;background:var(--surface-3)}
.notification-preview.is-unread{background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.notification-preview.is-unread .notification-dot{background:var(--accent)}
.notification-preview.is-unread strong{color:var(--fg);font-weight:700}
.notification-preview-empty{padding:28px 14px;color:var(--faint);font-size:12px;text-align:center}
.notification-all-link{display:block;padding:11px 14px;color:var(--accent);font-size:12px;font-weight:700;text-align:center}
.notification-all-link:hover{background:var(--accent-weak)}
.top-user{min-width:176px;padding:4px 7px;border:1px solid transparent}
.top-user:hover,.top-user-menu[open]>.top-user{border-color:var(--border);background:var(--surface-2)}
.top-user .user-copy{max-width:150px}
.top-user-menu .user-popover{width:270px}
.content{padding:var(--page-padding) var(--page-padding);min-width:0}
.app-message{margin-bottom:12px;padding:10px 14px;border-color:var(--accent);background:var(--accent-weak);font-size:13px}
/* `a.btn` dan `button.btn` sebelumnya berbeda tinggi dalam satu baris aksi
   karena hanya salah satunya berperilaku sebagai kotak teks. inline-flex
   menyamakan keduanya tanpa mengubah markup. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:var(--control-radius);padding:9px 15px;font-weight:600;font-family:inherit;font-size:13px;line-height:1.25;cursor:pointer;text-align:center;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.btn-primary{background:var(--accent);color:var(--accent-fg)}
.btn-ghost{background:var(--surface-2);color:var(--fg);border:1px solid var(--border)}
.btn-link{background:transparent;color:var(--accent-text);padding:0;font-weight:600;cursor:pointer;border:0;font-family:inherit}
/* Sebelumnya .btn sama sekali tidak punya hover/focus/disabled global; tiap
   modul menambalnya sendiri atau tidak sama sekali. */
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost:hover{background:var(--surface-3);border-color:color-mix(in srgb,var(--muted) 40%,var(--border))}
.btn-link:hover{text-decoration:underline;text-underline-offset:2px}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn[disabled],.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn[disabled]:hover,.btn:disabled:hover,.btn[aria-disabled="true"]:hover{background:var(--accent)}
.btn-ghost[disabled]:hover,.btn-ghost:disabled:hover{background:var(--surface-2)}
/* Dipakai 21x di template tetapi kelas dasarnya tidak pernah didefinisikan,
   sehingga pesan kosong tampil sebagai teks lepas tanpa bentuk. */
.empty-state{padding:28px 22px;border:1px dashed var(--border);border-radius:var(--panel-radius);background:var(--surface-2);color:var(--muted);font-size:13px;text-align:center}
/* Dua varian badge yang dipakai laporan lisensi tanpa gaya apa pun. */
.badge-success{padding:2px 9px;border-radius:10px;font-weight:600;font-size:11px;white-space:nowrap;display:inline-block;background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok-text)}
.badge-danger{padding:2px 9px;border-radius:10px;font-weight:600;font-size:11px;white-space:nowrap;display:inline-block;background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger-text)}
/* Umpan balik baris. Sebelumnya hanya tabel Django Admin dan Admin IT yang
   punya; tabel tagihan, aset, kredensial, dan anggaran diam saat disorot. */
.tbl-wrap table tbody tr:hover{background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
/* Isyarat bahwa tabel masih bisa digeser. Bayangan tepi hanya muncul saat ada
   isi yang tersembunyi karena lapisan `local` ikut bergulir bersama isinya. */
.tbl-wrap,.asset-table-wrap,.admin-it-table-wrap,.sd-worklog-table-wrap,.master-table-wrap,.budget-worksheet-wrap{
 background:
  linear-gradient(to right,var(--surface) 32%,transparent) left center / 26px 100% no-repeat local,
  linear-gradient(to left,var(--surface) 32%,transparent) right center / 26px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(16,24,40,.16),transparent) left center / 13px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(16,24,40,.16),transparent) right center / 13px 100% no-repeat scroll;
}
/* auto-fit agar kartu ke-5 (Saving) mengalir rapi, tak memaksa 4 kolom sempit */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--panel-radius);padding:18px}
.metric-primary{border-color:color-mix(in srgb,var(--accent) 38%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 11%,var(--surface)),var(--surface))}.metric-primary b{color:var(--accent)}
.card .lbl{font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.card .big{font-size:26px;font-weight:700;margin-top:8px;letter-spacing:-.02em}
.card .meta{font-size:11.5px;color:var(--faint);margin-top:6px}
.card .meta.red{color:var(--danger-text)}
.month-summary-card{grid-column:span 2}
.next-month-card{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));background:color-mix(in srgb,var(--accent) 3%,var(--surface))}
.month-breakdown{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.month-breakdown div{display:flex;flex-direction:column;gap:4px;min-width:0}
.month-breakdown span{font-size:11px;color:var(--faint)}
.month-breakdown b{font-size:13px;overflow-wrap:anywhere}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--panel-radius);padding:18px;min-width:0}
.panel h3{margin:0 0 4px;font-size:14.5px}
.grid2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;margin-top:16px}
.report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.report-page .num{font-family:'IBM Plex Sans',system-ui,sans-serif;font-variant-numeric:tabular-nums}
.report-grid .panel{overflow-x:auto}
.report-summary{grid-template-columns:repeat(12,minmax(0,1fr))}
.report-summary-6>.card{grid-column:span 4}
.report-summary-7>.card{grid-column:span 3}
.report-summary-7>.card:nth-last-child(-n+3){grid-column:span 4}
.report-filter-panel{margin-bottom:12px}
.report-filter-result{margin-top:12px;padding-top:11px;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted)}
/* Selektor ganda diperlukan: `.filters{display:flex}` didefinisikan belakangan
   dan mengalahkan grid ini, sehingga delapan kontrol laporan berjejal dalam
   satu baris flex dengan lebar seadanya. */
.filters.report-filters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end;margin-bottom:0}
.report-filters>label{min-width:0}.report-filters>label[hidden]{display:none!important}
.report-period-mode{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0;padding:0 0 10px;border:0;border-bottom:1px solid var(--border)}
.report-period-mode legend{float:left;margin-right:14px;color:var(--muted);font-size:11px}.report-period-mode label{display:inline-flex;flex-direction:row;align-items:center;gap:6px;color:var(--fg);font-size:12px;cursor:pointer}.report-period-mode input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
.report-filter-actions{display:flex;align-items:center;gap:8px;grid-column:span 2}.report-filter-error{margin-top:10px;padding:9px 11px;border:1px solid color-mix(in srgb,var(--danger) 35%,var(--border));border-radius:8px;background:color-mix(in srgb,var(--danger) 7%,var(--surface));color:var(--danger-text);font-size:11.5px}
.report-section-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.report-section-nav a{padding:7px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:12px;font-weight:600}
.report-section-nav a:hover{border-color:var(--accent);color:var(--accent)}
.report-source-note{padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--border));border-radius:10px;background:var(--accent-weak);color:var(--muted);font-size:12px}
.report-source-note b{color:var(--fg)}
.report-readiness{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-top:10px;padding:11px 14px;border:1px solid color-mix(in srgb,var(--ok) 28%,var(--border));border-radius:10px;background:color-mix(in srgb,var(--ok) 5%,var(--surface));font-size:12px}.report-readiness.is-pending{border-color:color-mix(in srgb,var(--warn) 36%,var(--border));background:color-mix(in srgb,var(--warn) 6%,var(--surface))}.report-readiness b{display:block;margin-bottom:3px}.report-readiness span,.report-readiness small{color:var(--muted);line-height:1.45}.report-readiness small{white-space:nowrap}
.report-currency-note{font-size:12px;margin:10px 2px 0}
.report-section{scroll-margin-top:86px;margin-top:18px}
.report-flow-panel{margin-top:16px}
.report-reconciliation{margin-top:16px}.report-reconciliation h3{margin:0}.report-reconciliation p{margin:4px 0 0;color:var(--muted);font-size:11.5px}.report-reconciliation-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:13px;overflow:hidden;border:1px solid var(--border);border-radius:9px;background:var(--border)}.report-reconciliation-flow span{display:grid;gap:5px;padding:11px 12px;background:var(--surface-2)}.report-reconciliation-flow small{color:var(--muted);line-height:1.35}.report-reconciliation-flow .is-minus b{color:var(--danger-text)}.report-reconciliation-flow .is-plus b{color:var(--ok-text)}.report-reconciliation-flow .is-total{background:var(--accent-weak)}
.report-chart{display:flex;align-items:flex-end;gap:14px;height:190px;margin-top:18px;padding:0 6px}
.report-chart-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.report-chart-columns{width:100%;display:flex;align-items:flex-end;gap:3px;height:100%}
.report-chart-columns>div{flex:1;border-radius:5px 5px 0 0;min-height:2px}
.report-legend{display:flex;justify-content:flex-end;gap:16px;margin-top:12px;color:var(--muted);font-size:11.5px}
.report-legend span{display:flex;align-items:center;gap:6px}
.report-legend i{width:9px;height:9px;border-radius:3px}
.report-composition-bar{display:flex;height:14px;margin-top:18px;border-radius:999px;overflow:hidden;background:var(--surface-3)}
.report-composition-bar span{display:block;height:100%}
.report-composition-labels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:14px}
.report-composition-labels div{display:flex;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2)}
.report-composition-labels span{color:var(--muted);font-size:12px}
.report-section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:10px}
.report-section-heading h2{margin:0;font-size:17px}
.report-section-heading p{margin:3px 0 0;color:var(--muted);font-size:11.5px}
.report-usage-status{margin-top:9px;color:var(--warn-text);font-size:17px;font-weight:700;line-height:1.25}
.report-usage-empty{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.report-usage-empty.is-pending{border-color:color-mix(in srgb,var(--warn) 30%,var(--border));background:color-mix(in srgb,var(--warn) 4%,var(--surface))}
.report-usage-empty-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:var(--accent-weak);color:var(--accent);font-size:19px;font-weight:700}
.report-usage-empty strong{display:block;font-size:13px}
.report-usage-empty p{margin:4px 0 6px;color:var(--muted);font-size:11.5px;line-height:1.5}
.report-data-table{font-size:12px;line-height:1.4}
.report-analysis-table td{font-size:12px}.report-analysis-table td.num{font-size:12px}.report-analysis-table .badge-chip{font-size:11px}
.report-detail-table{table-layout:fixed}
.report-detail-table .invoice-main{width:44%}.report-detail-table .invoice-account{width:18%}.report-detail-table .invoice-due{width:11%;white-space:nowrap}.report-detail-table .invoice-status{width:12%}.report-detail-table .invoice-total{width:11%}.report-detail-table .invoice-action{width:4%}
.report-service-copy{display:block;min-width:0}.report-service-name{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.45}
.report-more{margin-top:16px}
.report-more summary{cursor:pointer;font-weight:600;color:var(--fg);list-style-position:inside}
.report-more[open] summary{padding-bottom:14px;border-bottom:1px solid var(--border)}
.report-drilldown{font-weight:700;color:var(--fg);text-decoration:none}.report-drilldown:hover,.report-drilldown:focus-visible{color:var(--accent);text-decoration:underline}.report-pagination{margin-top:12px}
.payment-match-box{margin-top:14px;padding:14px;border:1px solid #16a34a55;border-radius:var(--panel-radius);background:#16a34a0d;font-size:12px;line-height:1.5}
.payment-match-box>strong{display:block;color:var(--ok-text);font-size:13px}
.payment-match-box>p{margin:4px 0 0;color:var(--muted)}
.document-type-box{margin-top:14px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--panel-radius);background:var(--surface-2);display:grid;grid-template-columns:minmax(110px,.35fr) minmax(0,1fr);gap:12px;align-items:center}
.document-type-box strong{display:block;font-size:13px}.document-type-box p{margin:3px 0 0;color:var(--muted);font-size:11.5px}.document-type-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:7px;width:100%;min-width:0}.document-type-actions .btn{width:100%;min-width:0;white-space:normal}
.draft-pdf-upload{margin-top:14px;padding:13px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.draft-pdf-upload-empty{border-color:color-mix(in srgb,var(--accent) 42%,var(--border));background:var(--accent-weak)}
.draft-pdf-upload-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.draft-pdf-upload-heading strong{display:block;font-size:13px}.draft-pdf-upload-heading p{margin:3px 0 0;color:var(--muted);font-size:11.5px;line-height:1.45}
.draft-pdf-upload-form{display:grid;grid-template-columns:minmax(120px,.65fr) minmax(160px,1.2fr) auto;gap:10px;align-items:end;margin-top:12px}.draft-pdf-upload-form .field{gap:5px}.draft-pdf-upload-form .field>span{font-size:11px}.draft-pdf-native-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.draft-pdf-picker{display:flex;align-items:center;gap:9px;min-width:0;height:36px}.draft-pdf-pick-button{display:inline-flex;align-items:center;justify-content:center;flex:none;height:36px;box-sizing:border-box;padding:0 13px;cursor:pointer;white-space:nowrap;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--border));background:var(--surface)}.draft-pdf-pick-button:hover{border-color:var(--accent);background:var(--accent-weak)}.draft-pdf-native-input:focus+.draft-pdf-pick-button{outline:2px solid color-mix(in srgb,var(--accent) 30%,transparent);outline-offset:2px}.draft-pdf-filename{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}.draft-pdf-upload-form>button{height:36px;white-space:nowrap}.draft-pdf-upload>small{display:block;margin-top:7px;color:var(--muted);font-size:11px}.draft-pdf-no-access{margin:10px 0 0;color:var(--muted);font-size:11px}
.draft-pdf-list{display:grid;gap:5px;margin-top:10px;padding-top:9px;border-top:1px solid var(--border)}.draft-pdf-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;font-size:11px}.draft-pdf-list a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draft-pdf-list a small{flex:none;color:var(--muted)}
.payment-manual-choice{margin-top:12px;border-top:1px solid var(--border);padding-top:10px}.payment-manual-choice summary{cursor:pointer;font-weight:700;color:var(--accent)}.payment-manual-choice form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:9px;align-items:end}
.payment-match-title{margin-top:13px;font-weight:700;color:var(--fg)}
.payment-candidate{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:8px;padding:11px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface)}
.payment-candidate-main{min-width:0}
.payment-candidate .btn{white-space:nowrap;font-size:11.5px;padding:8px 11px}
.payment-no-match{margin-top:12px;padding:10px 11px;border:1px solid #d9770655;border-radius:8px;background:#d9770612;color:var(--warn-text)}
.payment-new-exception{margin-top:14px;padding:11px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);font-size:12px}
.payment-new-exception summary{cursor:pointer;font-weight:600;color:var(--warn-text)}
.payment-new-exception p{margin:8px 0;color:var(--muted)}
.payment-new-exception label{display:flex;flex-direction:column;gap:5px;color:var(--muted)}
.payment-new-exception textarea{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--fg);resize:vertical}
.payment-new-exception .btn{margin-top:9px;color:var(--warn-text)}
.reminder-match-box{border-color:#2563eb55;background:#2563eb0d}.reminder-match-box>strong{color:var(--accent)}
.reminder-link-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px;align-items:end}
/* Shared CSS survives HTMX swaps: response-specific style nonces do not. */
.inbox-history-list{display:grid;gap:8px;container-type:inline-size;container-name:inbox-history}
.inbox-history-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,200px) minmax(110px,max-content) 90px max-content;gap:16px;align-items:center;padding:12px 14px}
.inbox-history-row>*,.inbox-history-identity{min-width:0}
.inbox-history-main{display:flex;align-items:center;gap:10px;min-width:0}
.inbox-history-main .mono-badge{flex-shrink:0}
.inbox-history-identity{display:grid;gap:4px}
.inbox-history-title,.inbox-history-reference{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-history-title{font-size:12.5px;line-height:1.4}
.inbox-history-reference{font-size:11px;line-height:1.4}
.inbox-history-result{line-height:1.4;overflow-wrap:anywhere}
.inbox-history-result .badge-chip{white-space:normal}
.inbox-history-amount{font-weight:700;text-align:right;white-space:nowrap;font-size:13px}
.inbox-history-date{display:grid;gap:3px;font-size:11.5px;white-space:nowrap}
.inbox-history-action .btn{white-space:nowrap;padding:7px 11px;font-size:11.5px}
@container inbox-history (max-width:900px){
 .inbox-history-row{grid-template-columns:minmax(0,1fr) auto auto;gap:10px 14px}
 .inbox-history-main{grid-column:1/3}
 .inbox-history-action{grid-column:3;grid-row:1}
 .inbox-history-result{grid-column:1;grid-row:2}
 .inbox-history-amount{grid-column:2;grid-row:2}
 .inbox-history-date{grid-column:3;grid-row:2;text-align:right}
}
@container inbox-history (max-width:540px){
 .inbox-history-row{grid-template-columns:minmax(0,1fr) auto;gap:10px}
 .inbox-history-main{grid-column:1/-1}
 .inbox-history-result{grid-column:1;grid-row:2}
 .inbox-history-amount{grid-column:2;grid-row:2}
 .inbox-history-date{grid-column:1;grid-row:3;display:flex;align-items:center;gap:5px;text-align:left}
 .inbox-history-action{grid-column:2;grid-row:3;justify-self:end}
}
.review-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:start}
.review-grid>:nth-child(3){grid-column:span 2}
.invoice-search-picker{display:grid;gap:6px;min-width:0}.invoice-search-field{display:grid;gap:5px;color:var(--fg);font-size:12px;font-weight:600}.invoice-search-field input{width:100%;min-width:0;padding:9px 11px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-2);color:var(--fg);font:inherit;font-weight:400}.invoice-search-field input:focus{outline:2px solid color-mix(in srgb,var(--accent) 25%,transparent);border-color:var(--accent)}.invoice-search-status{min-height:17px;color:var(--muted);font-size:11px}.invoice-search-results{max-width:100%;max-height:240px;overflow:auto;border:1px solid var(--border);border-radius:8px;background:var(--surface);scrollbar-gutter:stable;overscroll-behavior:contain}.invoice-search-option{display:flex;align-items:center;gap:8px;min-width:max-content;padding:8px 10px;border-bottom:1px solid var(--border);cursor:pointer;white-space:nowrap}.invoice-search-option[hidden]{display:none!important}.invoice-search-option:last-child{border-bottom:0}.invoice-search-option:hover{background:var(--surface-2)}.invoice-search-option.is-selected{background:var(--accent-weak);color:var(--accent)}.invoice-search-option input{width:15px;height:15px;flex:none;accent-color:var(--accent)}.invoice-search-option-text{font-size:12px;white-space:nowrap}
.master-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:15px;padding:16px 18px}.master-intro p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.55}.master-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:15px;align-items:start}.master-list-panel{padding:15px;min-width:0}.filters.master-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px;align-items:end}.master-filters label{display:grid;gap:4px;color:var(--muted);font-size:11px}.master-filters input,.master-filters select{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--fg);padding:9px 11px}.master-filter-search{grid-column:span 2}.master-filter-actions{display:flex;align-items:center;gap:10px;grid-column:span 2;min-height:43px}.master-table-wrap{max-width:100%;overflow:auto}.master-table{width:100%;border-collapse:collapse;min-width:680px;font-variant-numeric:tabular-nums}.master-table th{text-align:left;color:var(--muted);font-size:11px;font-weight:600;padding:8px 10px;border-bottom:1px solid var(--border)}.master-table td{padding:12px 10px;border-bottom:1px solid var(--border);font-size:12px;vertical-align:top}.master-table tbody tr:last-child td{border-bottom:0}.master-name{font-weight:700}.master-name span{display:inline-block;margin-right:7px;padding:3px 6px;border-radius:6px;background:var(--accent-weak);color:var(--accent);font-size:11px}.master-meta,.master-ref{margin-top:4px;color:var(--muted);font-size:11px}.master-ref{font-family:'IBM Plex Mono',monospace}.master-form-panel{position:sticky;top:15px;padding:17px}.master-form-panel h3{margin:0 0 4px}.master-form{display:grid;gap:11px;margin-top:15px}.master-field{display:grid;gap:5px}.master-field label{font-size:11px;color:var(--muted)}.master-field input:not([type=checkbox]),.master-field select,.master-field textarea{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--fg);padding:9px 10px;font:inherit}.master-field textarea{resize:vertical}.master-field small{font-size:11px;color:var(--muted);line-height:1.4}.master-checkbox{grid-template-columns:auto 1fr;align-items:center}.master-checkbox label{grid-column:2;grid-row:1}.master-checkbox input{grid-column:1;grid-row:1}.master-checkbox small,.master-checkbox .errorlist{grid-column:1/-1}.master-actions{display:flex;gap:8px;margin-top:5px}.required{color:var(--danger-text)}
.resource-consumer-section{margin-top:18px;padding-top:17px;border-top:1px solid var(--border)}.resource-consumer-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.resource-consumer-heading p{margin:4px 0 0;font-size:11px;line-height:1.5}.resource-consumer-list{display:grid;margin-top:12px}.resource-consumer-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;padding:11px 0;border-bottom:1px solid var(--border)}.resource-consumer-main{display:grid;gap:3px;min-width:0}.resource-consumer-main strong{font-size:12px;overflow-wrap:anywhere}.resource-consumer-main>span,.resource-consumer-main>small{color:var(--muted);font-size:11px;line-height:1.45;overflow-wrap:anywhere}.resource-consumer-flags{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}.resource-consumer-flags .warning{background:#d977061a;color:var(--warn-text)}.resource-consumer-form{margin-top:13px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}.resource-consumer-note{margin:10px 0 0;color:var(--faint);font-size:11px;line-height:1.5}.btn-danger-soft{border-color:#dc262633;background:#dc26260d;color:var(--danger-text)}.empty-state.compact{padding:14px 4px;font-size:11px}
.draft-currency-unit{display:inline-flex;margin-left:4px;padding:2px 6px;border-radius:999px;background:var(--accent-weak);color:var(--accent);font-size:11px;line-height:1.4;vertical-align:middle}.draft-field-help{color:var(--faint);font-size:11px;line-height:1.4}.draft-currency-note{margin-top:12px;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:11px;line-height:1.5}.draft-currency-note[data-currency="USD"]{border-color:#2563eb44;background:var(--accent-weak)}.draft-currency-note b{color:var(--fg)}
.topup-review-box{margin-top:14px;padding:14px;border:1px solid #7c3aed55;border-radius:var(--panel-radius);background:#7c3aed0d;font-size:12px;line-height:1.5}.topup-review-box strong{display:block;color:var(--purple-text);font-size:13px}.topup-review-box p{margin:4px 0 0;color:var(--muted)}
.topup-status-field{margin-top:13px;display:grid;grid-template-columns:180px minmax(0,1fr);gap:5px 10px;align-items:center}.topup-status-field label{font-size:12px;color:var(--muted)}.topup-status-field select{width:100%;min-width:0}.topup-status-field span{grid-column:2;color:var(--muted);font-size:11px}
.inbox-financial-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 14px}.inbox-financial-item{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--control-radius);background:var(--surface)}.inbox-financial-item span{color:var(--muted);font-size:11px}.inbox-financial-item strong{font-size:14px}
.inbox-category-tabs{display:flex;gap:7px;margin:10px 0 14px;padding:3px;overflow-x:auto;scrollbar-width:thin}.inbox-category-tabs a{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:8px 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:11px;font-weight:600;text-decoration:none;white-space:nowrap}.inbox-category-tabs a:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));color:var(--fg)}.inbox-category-tabs a[aria-current="page"]{border-color:color-mix(in srgb,var(--accent) 70%,var(--border));background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent)}.inbox-category-tabs .badge-chip{min-width:22px;padding:2px 6px;text-align:center}
.inbox-category-tabs a.is-priority{border-color:color-mix(in srgb,var(--warn) 78%,var(--border));background:color-mix(in srgb,var(--warn) 9%,var(--surface));color:var(--warn-text);box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 18%,transparent)}.inbox-category-tabs a.is-priority:hover,.inbox-category-tabs a.is-priority[aria-current="page"]{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,var(--surface));color:var(--warn-text)}.inbox-category-priority{padding:2px 6px;border-radius:999px;background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn-text);font-size:11px;font-weight:700;letter-spacing:.025em;text-transform:uppercase}
.inbox-category-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 14px}.inbox-category-summary-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:var(--control-radius);background:var(--surface)}.inbox-category-summary-item span{color:var(--muted);font-size:11px}.inbox-category-summary-item strong{grid-column:2;grid-row:1/3;font-size:18px}.inbox-category-summary-item small{color:var(--faint);font-size:11px}
.inbox-queue-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;padding:3px 2px}.inbox-queue-heading>div{display:flex;flex-direction:column;gap:2px}.inbox-queue-heading>div span{color:var(--muted);font-size:11px}.inbox-queue-heading .btn{flex:0 0 auto;padding:7px 10px;font-size:11px}.inbox-selection-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;align-items:center;margin-bottom:8px;padding:10px 11px}.inbox-selection-toolbar[hidden],[data-inbox-selection-control][hidden]{display:none}.inbox-selection-toolbar label{display:flex;align-items:center;gap:7px;font-size:11px}.inbox-selection-toolbar .btn{padding:7px 10px;font-size:11px;white-space:nowrap}
.saving-stage-section{margin-top:18px}.saving-stage-section h2{margin:0;font-size:16px}.saving-stage-section>p{margin:4px 0 10px;font-size:12px}.saving-stage-panel{margin-top:10px;padding:14px 16px}.saving-stage-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--border);font-size:12px}.saving-stage-row{display:grid;grid-template-columns:minmax(150px,1fr) 150px 180px auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);font-size:12px}.saving-stage-row:last-child{border-bottom:0}.saving-stage-action{text-align:right}.saving-stage-action .btn{white-space:nowrap;font-size:11.5px}
.saving-flex-form{display:grid;grid-template-columns:150px 180px minmax(180px,1fr) auto;gap:8px;align-items:end;padding-top:12px;border-top:1px solid var(--border)}.saving-flex-form label{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:11px}.saving-flex-form input{width:100%;min-width:0;padding:8px 9px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--fg);font:inherit}
.saving-stage-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:10px}.saving-stage-toolbar p{margin:4px 0 0;font-size:12px}.saving-stage-search{width:min(360px,100%)}.saving-stage-search input{width:100%;box-sizing:border-box}.saving-accordion-list{display:grid;gap:9px}.saving-accordion{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}.saving-accordion[hidden]{display:none}.saving-accordion-summary{display:grid;grid-template-columns:minmax(280px,2fr) minmax(125px,.8fr) minmax(135px,.85fr) minmax(150px,1fr) minmax(110px,.7fr) 148px;align-items:center;gap:14px;padding:13px 16px;cursor:pointer;list-style:none}.saving-accordion-summary::-webkit-details-marker{display:none}.saving-accordion-summary:hover{background:var(--surface-2)}.saving-accordion[open]>.saving-accordion-summary{background:var(--surface-2);border-bottom:1px solid var(--border)}.saving-accordion-main{display:flex;align-items:center;gap:10px;min-width:0}.saving-accordion-copy{display:grid;gap:3px;min-width:0}.saving-accordion-copy strong{line-height:1.35;overflow-wrap:anywhere}.saving-accordion-copy>span,.saving-accordion-metric>span{color:var(--muted);font-size:11px;line-height:1.35}.saving-accordion-metric{display:grid;gap:3px;min-width:0}.saving-accordion-metric small,.saving-accordion-progress small{color:var(--faint);font-size:11px;text-transform:uppercase;letter-spacing:.04em}.saving-accordion-metric strong{font-size:12px;line-height:1.35}.saving-accordion-progress{display:grid;grid-template-columns:minmax(80px,1fr) auto;gap:4px 8px;align-items:center;min-width:0}.saving-accordion-progress small{grid-column:1/-1}.saving-accordion-progress progress{width:100%}.saving-accordion-progress>span{font-size:11px;color:var(--muted)}.saving-accordion-status{display:flex;align-items:center;justify-content:flex-end;gap:9px;min-width:0}.saving-accordion-chevron{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--border);border-radius:50%;color:var(--muted);font-size:17px;line-height:1;transition:transform .15s ease}.saving-accordion[open]>.saving-accordion-summary .saving-accordion-chevron{transform:rotate(180deg)}.saving-detail-slot{padding:0 16px 14px}.saving-detail-placeholder{padding:20px 0;color:var(--muted);font-size:12px;text-align:center}.saving-stage-detail .saving-stage-heading{padding-top:14px}.saving-stage-empty,.saving-stage-footnote{padding-top:12px;font-size:11px}.saving-stage-add{margin-top:12px}.saving-stage-add>summary{display:inline-flex;list-style:none}.saving-stage-add>summary::-webkit-details-marker{display:none}.saving-stage-add[open]>summary{margin-bottom:10px}.saving-search-empty{padding:18px;text-align:center;border:1px dashed var(--border);border-radius:12px}
.saving-summary-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.saving-accordion-summary:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 32%,transparent);outline-offset:-3px}.saving-due-warning{color:var(--warn-text)!important;font-weight:700}.saving-due-danger{color:var(--danger-text)!important;font-weight:700}.saving-stage-row.is-cancelled{opacity:.72}.saving-stage-row.is-cancelled .num strong{text-decoration:line-through}.saving-cancel-reason{color:var(--danger-text);font-size:11px}.saving-stage-action-stack{display:grid;justify-items:end;gap:7px}.saving-stage-correction{width:min(440px,100%);text-align:left}.saving-stage-correction>summary{cursor:pointer;color:var(--accent);font-size:11px;font-weight:700;list-style-position:inside}.saving-stage-correction-form,.saving-return-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:9px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}.saving-stage-correction-form label,.saving-return-form label{display:grid;gap:4px;color:var(--muted);font-size:11px}.saving-correction-reason,.saving-return-form label{grid-column:1/-1}.saving-correction-actions{display:flex;grid-column:1/-1;justify-content:flex-end;gap:7px}.saving-return-form .btn{grid-column:1/-1}.saving-activity{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}.saving-activity h3{margin:0;font-size:13px}.saving-activity-list{display:grid;margin-top:8px}.saving-activity-list article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:11px}.saving-activity-list article:last-child{border-bottom:0}.saving-activity-list small{color:var(--muted);white-space:nowrap}.saving-invoice-search{display:grid;gap:5px;margin-bottom:4px;padding-bottom:11px;border-bottom:1px solid var(--border)}.saving-invoice-search small{min-height:15px}
.duplicate-candidate form,.duplicate-candidate .btn{flex:none}
.row-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border)}
.dashboard-action-copy{flex:1;min-width:0}.dashboard-action-name{font-weight:600;line-height:1.45}.dashboard-action-name a{display:block;white-space:normal;overflow-wrap:anywhere}
.mono-badge{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;flex:none}
.badge-chip{padding:2px 9px;border-radius:10px;font-weight:600;font-size:11px;white-space:nowrap;display:inline-block}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;letter-spacing:.04em;color:var(--faint);text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--border)}
td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle}
tr.late{background:color-mix(in srgb,var(--danger) 6%,transparent)}
tr.late td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
.tbl-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:auto}
.invoice-list-wrap{container-type:inline-size}
.invoice-list-wrap .invoice-table{font-size:12px}
.invoice-list-wrap .invoice-table td{padding:7px;font-size:12px}
.invoice-list-wrap .invoice-table-server{table-layout:fixed}
.invoice-table-server .invoice-main{width:31%}
.invoice-table-server .invoice-account{width:16%}
.invoice-table-server .invoice-total{width:13%}
.invoice-table-server .invoice-due{width:10%}
.invoice-table-server .invoice-status{width:21%}
.invoice-table-server .invoice-action{width:9%}
/* Tabel versi Keuangan memuat tiga kolom tambahan (Tipe, Sebelum PPN, PPN).
   Tanpa lebar tetap, browser menjepit kolom layanan sampai ±110px sehingga
   nama layanan terpotong sementara nominal patah dua baris. */
.invoice-list-wrap .invoice-table-finance{table-layout:fixed}
.invoice-table-finance th,.invoice-table-finance td{overflow-wrap:anywhere}
.invoice-table-finance .invoice-main{width:18%}
.invoice-table-finance .invoice-account{width:12%}
.invoice-table-finance th:nth-child(3){width:13%}
.invoice-table-finance th:nth-child(4){width:9%}
.invoice-table-finance th:nth-child(5){width:7%}
.invoice-table-finance .invoice-total{width:10%}
.invoice-table-finance .invoice-due{width:8%}
.invoice-table-finance .invoice-status{width:14%}
.invoice-table-finance .invoice-action{width:9%}
.invoice-table-finance td .badge-chip{max-width:100%;padding:2px 7px;font-size:11px;white-space:normal;line-height:1.3}
.invoice-list-wrap .invoice-main{min-width:0}
.invoice-list-wrap .invoice-main-content{display:flex;align-items:flex-start;gap:10px;min-width:0}
.invoice-list-wrap .invoice-service-copy{display:block;min-width:0;flex:1}
.invoice-list-wrap .invoice-service-name{
 display:-webkit-box;font-size:12px;font-weight:600;line-height:1.4;
 -webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
 white-space:normal;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere
}
.invoice-list-wrap .invoice-provider-name,.invoice-list-wrap .invoice-workflow{font-size:12px}
.invoice-list-wrap .invoice-provider-name{display:block;margin-top:2px}
.invoice-list-wrap .invoice-table .badge-chip{font-size:12px}
.invoice-list-wrap .invoice-total-estimate{font-size:11px;font-weight:400;white-space:nowrap}
.invoice-list-wrap tr.late{background:color-mix(in srgb,var(--danger) 3%,transparent)}
.invoice-quick-views{display:flex;gap:7px;margin:14px 4px 10px;overflow-x:auto;scrollbar-width:thin}
.invoice-quick-view{display:inline-flex;align-items:center;gap:8px;flex:none;padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:11px;font-weight:600}
.invoice-quick-view strong{display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--surface-3);color:var(--fg);font-size:11px}
.invoice-quick-view:hover,.invoice-quick-view:focus-visible{border-color:var(--accent);color:var(--accent)}
.invoice-quick-view.is-active{border-color:var(--accent);background:var(--accent-weak);color:var(--accent)}
.invoice-results-toolbar{padding:8px 12px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.invoice-diagnostic-filter{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;padding:10px 12px;border:1px solid #d9770645;border-radius:10px;background:#d977060b;color:var(--warn-text);font-size:12px}.invoice-diagnostic-filter a{color:var(--accent);font-weight:700;white-space:nowrap}
@media(max-width:640px){.invoice-diagnostic-filter{align-items:flex-start;flex-direction:column}.invoice-diagnostic-filter a{white-space:normal}}
.invoice-default-order{margin:0;color:var(--muted);font-size:11px;line-height:1.4}
.invoice-default-order strong{color:var(--fg)}
.invoice-filter-primary{display:grid;grid-template-columns:minmax(230px,1.35fr) minmax(150px,.8fr) minmax(210px,1.2fr) minmax(150px,.8fr) auto auto;gap:10px;align-items:end;width:100%}
.invoice-filter-primary label,.invoice-filter-advanced-grid label{display:grid;gap:4px;min-width:0}
.invoice-filter-primary .app-control,.invoice-filter-advanced-grid .app-control{width:100%;min-width:0;box-sizing:border-box}
.invoice-filter-reset{display:inline-flex;align-items:center;align-self:end;min-height:43px;padding:0 2px;box-sizing:border-box;white-space:nowrap}
.invoice-filter-advanced{width:100%;padding-top:9px;border-top:1px solid var(--border)}
.invoice-filter-advanced>summary{display:flex;align-items:center;gap:8px;width:max-content;cursor:pointer;color:var(--accent);font-size:11px;font-weight:600;list-style-position:inside}
.invoice-filter-advanced>summary small{padding:2px 6px;border-radius:999px;background:var(--surface-3);color:var(--muted);font-size:11px}
.invoice-filter-advanced-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:10px}
.invoice-total-estimate abbr{text-decoration:none;border-bottom:1px dotted currentColor;cursor:help}
.invoice-due strong,.invoice-due small{display:block}
.invoice-due strong{font-size:11.5px;white-space:nowrap}
.invoice-due small{margin-top:2px;color:var(--muted);font-size:11px;white-space:nowrap}
.invoice-due.is-overdue strong,.invoice-due.is-overdue small,.invoice-due.is-due-today strong,.invoice-due.is-due-today small{color:var(--danger-text)}
.invoice-due.is-due-soon strong,.invoice-due.is-due-soon small{color:var(--warn-text)}
.invoice-status{min-width:0}
.invoice-status .badge-chip{margin-bottom:4px}
.invoice-workflow,.invoice-workflow-owner{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;column-gap:6px;line-height:1.35}
.invoice-workflow small,.invoice-workflow-owner small{color:var(--faint);font-size:11px;font-weight:500;line-height:1.5;text-transform:uppercase;letter-spacing:.04em}
.invoice-workflow-value{display:block;min-width:0;overflow-wrap:anywhere}
.invoice-workflow-owner{margin-top:2px;color:var(--muted);font-size:11px}
.invoice-row-action{padding:6px 9px;font-size:11px;white-space:nowrap}
.service-name-tooltip{
 position:fixed;z-index:1200;max-width:min(520px,calc(100vw - 24px));padding:9px 11px;
 border:1px solid var(--border);border-radius:8px;background:var(--fg);color:var(--surface);
 box-shadow:0 8px 24px rgba(0,0,0,.22);font-size:12px;line-height:1.45;
 overflow-wrap:anywhere;pointer-events:none
}
.subscription-list-wrap,.infra-list-wrap{container-type:inline-size}
.ta-right{text-align:right}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;align-items:end}
.filters label{display:flex;flex-direction:column;font-size:11px;color:var(--muted);gap:4px}
.filters select,.filters input,.field input,.field select,.field textarea{font-family:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--fg)}
/* Kotak isian filter setinggi 43px (.app-control) sedangkan tombolnya 35px,
   sehingga Terapkan tampak "melayang" di baris yang sama. */
.filters .btn,.report-filter-actions .btn,.master-filter-actions .btn,.procurement-filter-actions .btn,.budget-period-filter .btn,.history-filter .btn{min-height:43px}
.bar{height:8px;background:var(--surface-3);border-radius:6px;overflow:hidden}
.bar > span{display:block;height:100%;background:var(--accent);border-radius:6px}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;max-width:680px}
.field{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);min-width:0}
.field.full{grid-column:1/-1}
.field input,.field select,.field textarea{color:var(--fg)}
.muted{color:var(--muted)}
.dense td,.dense th{padding-top:7px;padding-bottom:7px}
.mobile-only,.mobile-label{display:none}
.pagination{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.infra-summary{margin-bottom:16px}
.infra-empty{text-align:center;padding:46px;color:var(--muted)}
.infra-empty>div{font-size:34px}
.infra-detail-grid,.infra-reconcile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.infra-section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.infra-section-title h2{margin:0;font-size:16px}.infra-section-title p{margin:3px 0 0;color:var(--muted);font-size:11.5px}
.infra-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;margin:4px 0 0}
.infra-facts div{padding:11px 0;border-bottom:1px solid var(--border);min-width:0}.infra-facts dt{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}.infra-facts dd{margin:4px 0 0;font-weight:600;overflow-wrap:anywhere}
.infra-note,.infra-safety-note{margin-top:14px;padding:12px 14px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);font-size:12px;color:var(--muted)}.infra-note p{margin:4px 0 0}.infra-safety-note{border-color:#2563eb35;background:var(--accent-weak)}
.infra-relations{display:grid;margin-top:4px}.infra-relation{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--border);min-width:0}.infra-relation:last-child{border-bottom:0}.infra-relation>div{min-width:0}.infra-relation strong,.infra-relation span,.infra-relation small{display:block}.infra-relation span{margin-top:3px;color:var(--muted);font-size:11px}.infra-relation small{margin-top:3px;color:var(--faint);font-size:11px}.infra-relation b{white-space:nowrap}
.infra-relation[href]:hover strong{color:var(--accent)}.infra-suggestion{padding:11px 12px;margin-top:8px;border:1px solid #d9770645!important;border-radius:9px;background:#d977060a}.infra-suggestion>span{color:var(--warn-text);font-weight:600;white-space:nowrap}
.infra-usage-panel{border-color:#0d948833}.infra-usage-panel strong{color:inherit}
.infra-cost-overview{margin-top:16px}.infra-overview-heading{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:10px}.infra-overview-heading h2{margin:0;font-size:16px}.infra-overview-heading p{margin:3px 0 0;color:var(--muted);font-size:11.5px}.infra-cost-summary{grid-template-columns:repeat(3,minmax(180px,1fr))}.infra-cost-summary .big{font-size:21px}
.infra-cost-warning{margin-top:12px;padding:11px 13px;border:1px solid #d9770645;border-radius:9px;background:#d977060d;color:var(--muted);font-size:11.5px}.infra-cost-warning strong{color:var(--warn-text)}.infra-cost-unallocated{color:var(--warn-text);font-size:11px}.infra-cost-alert{background:#d977061a;color:var(--warn-text)}
.infra-cost-completeness{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px;padding:12px 14px;border:1px solid #d9770655;border-radius:10px;background:#d977060d}.infra-cost-completeness strong,.infra-cost-completeness span{display:block}.infra-cost-completeness strong{color:var(--warn-text);font-size:13px}.infra-cost-completeness div>span{margin-top:3px;color:var(--muted);font-size:11.5px;line-height:1.45}
.infra-cost-completeness-text{min-width:0}
.infra-cost-todo{display:flex;flex-direction:column;gap:4px;margin:9px 0 0;padding:0;list-style:none}
.infra-cost-todo li{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;min-width:0}
.infra-cost-todo li>span,.infra-cost-todo li>a{display:inline;font-size:11.5px;font-weight:600;overflow-wrap:anywhere}
.infra-cost-todo li>a{color:var(--accent);text-decoration:none}
.infra-cost-todo li>a:hover,.infra-cost-todo li>a:focus-visible{text-decoration:underline}
.infra-cost-todo small{color:var(--muted);font-size:11px}
.infra-cost-todo-more{display:block;margin-top:6px;color:var(--muted);font-size:11px}
@media (max-width:640px){
 /* Kartu KPI infrastruktur tetap terbaca dua kolom di ponsel; satu kolom
    mendorong peringatan alokasi dan tabel resource hampir dua layar ke bawah. */
 .cards.infra-summary,.cards.infra-cost-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
 .cards.infra-summary .card,.cards.infra-cost-summary .card{padding:13px}
 .cards.infra-summary .big,.cards.infra-cost-summary .big{font-size:19px;margin-top:5px}
 .cards.infra-summary .lbl,.cards.infra-cost-summary .lbl{font-size:11px}
 .cards.infra-summary .meta,.cards.infra-cost-summary .meta{font-size:11px;line-height:1.35;margin-top:4px}
}
.infra-bulk-panel{margin-bottom:12px;padding:0;overflow:hidden}.infra-bulk-panel summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer;font-weight:700;list-style-position:inside}.infra-bulk-panel summary small{color:var(--muted);font-weight:500}.infra-bulk-panel[open] summary{border-bottom:1px solid var(--border)}.infra-bulk-fields{display:grid;grid-template-columns:minmax(160px,1fr) minmax(160px,1fr) minmax(230px,1.4fr) auto;align-items:end;gap:10px;padding:14px 16px}.infra-bulk-fields label,.infra-mapping-form label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:11px}.infra-mobile-select-all{display:none!important}.infra-bulk-fields select,.infra-bulk-fields textarea,.infra-mapping-form select,.infra-mapping-form textarea{width:100%;min-width:0;padding:8px 10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--fg);font:inherit}.infra-bulk-fields textarea,.infra-mapping-form textarea{resize:vertical}.infra-bulk-fields .btn:disabled{opacity:.5;cursor:not-allowed}.infra-select-cell{width:38px;text-align:center}.infra-select-cell input{width:16px;height:16px;accent-color:var(--accent)}.infra-cost{white-space:nowrap;font-size:11.5px}.infra-cost>span{font-size:11px}
.infra-mapping-panel{overflow:visible}.infra-mapping-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.infra-mapping-note,.infra-mapping-action,.infra-form-error{grid-column:1/-1}.infra-mapping-action{display:flex;justify-content:flex-end}.infra-form-error{color:var(--danger-text);font-size:11px}
.infra-cost-cards{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:10px;margin-top:14px}.infra-cost-cards>div{padding:13px;border:1px solid var(--border);border-radius:var(--panel-radius);background:var(--surface-2);min-width:0}.infra-cost-cards span,.infra-cost-cards strong,.infra-cost-cards small{display:block}.infra-cost-cards span{color:var(--muted);font-size:11px}.infra-cost-cards strong{margin-top:6px;font-size:17px;overflow-wrap:anywhere}.infra-cost-cards small{margin-top:5px;color:var(--faint);font-size:11px}.infra-cost-up{color:var(--danger-text)}.infra-cost-down{color:var(--ok-text)}
.infra-cost-trend{margin-top:18px;padding-top:15px;border-top:1px solid var(--border)}.infra-cost-trend h3{margin:0 0 12px;font-size:13px}.infra-cost-bars{display:grid;gap:8px}.infra-cost-bar-row{display:grid;grid-template-columns:44px minmax(100px,1fr) 130px;gap:10px;align-items:center;font-size:11px}.infra-cost-bar-row>span{color:var(--muted)}.infra-cost-bar-row>strong{text-align:right;font-size:11px}.infra-cost-bar-row meter{width:100%;height:10px;border:0;background:var(--surface-3);border-radius:999px;overflow:hidden}.infra-cost-bar-row meter::-webkit-meter-bar{background:var(--surface-3);border:0;border-radius:999px}.infra-cost-bar-row meter::-webkit-meter-optimum-value{background:var(--accent);border-radius:999px}.infra-cost-bar-row meter::-moz-meter-bar{background:var(--accent);border-radius:999px}
.infra-presence-note{margin:0 0 16px;padding:11px 13px;border:1px solid #2563eb35;border-radius:9px;background:var(--accent-weak);color:var(--muted);font-size:11.5px;line-height:1.5}.infra-presence-note strong{color:var(--fg)}.infra-presence-note-compact{margin:14px 0 0}.infra-status-stack{display:flex;align-items:flex-start;justify-content:flex-end;flex-wrap:wrap;gap:5px}.infra-presence-found{background:#2563eb17;color:var(--accent)}.infra-presence-missing{background:var(--surface-3);color:var(--muted)}.infra-provider-ok{background:#16a34a1a;color:var(--ok-text)}.infra-provider-warning{background:#d977061a;color:var(--warn-text)}.infra-reconcile-summary{grid-template-columns:repeat(3,minmax(200px,1fr));margin-bottom:16px}.infra-reconcile-summary .big{font-size:23px}.infra-reconcile-alerts{display:grid;gap:12px;margin-top:18px}.infra-reconcile-alerts>.infra-overview-heading{margin-bottom:0}.infra-reconcile-alert-panel h3{margin:0;font-size:14px}.infra-reconcile-action{color:var(--accent)!important;font-weight:600;white-space:nowrap}.infra-reconcile-alert-panel .infra-relation:hover .infra-reconcile-action{text-decoration:underline}
.infra-attention-number,.infra-cost-danger{color:var(--danger-text)!important}.infra-cost-safe{color:var(--ok-text)!important}.infra-budget-alerts{display:grid;margin-top:12px;border:1px solid #d9770640;border-radius:11px;overflow:hidden;background:var(--surface)}.infra-budget-alert{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px;border-bottom:1px solid var(--border)}.infra-budget-alert:last-child{border-bottom:0}.infra-budget-alert:hover{background:#d9770608}.infra-budget-alert span:first-child{min-width:0}.infra-budget-alert strong,.infra-budget-alert small{display:block}.infra-budget-alert small{margin-top:3px;color:var(--muted);font-size:11px}.infra-budget-alert-reasons{display:flex!important;flex-wrap:wrap;justify-content:flex-end;gap:5px}.infra-budget-alert-reasons b{padding:4px 7px;border-radius:999px;background:#d9770617;color:var(--warn-text);font-size:11px;white-space:nowrap}.infra-cost-badges{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px}.infra-budget-danger{background:#dc26261a;color:var(--danger-text)}.infra-budget-warning{background:#d977061a;color:var(--warn-text)}.infra-budget-safe{background:#16a34a1a;color:var(--ok-text)}
.infra-budget-progress{margin-top:14px;padding:13px;border:1px solid #16a34a40;border-radius:10px;background:#16a34a08}.infra-budget-progress>div:first-child,.infra-budget-progress-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px}.infra-budget-progress>div:first-child span,.infra-budget-progress-meta span{color:var(--muted)}.infra-budget-progress meter{display:block;width:100%;height:10px;margin:11px 0;border:0;background:var(--surface-3);border-radius:999px;overflow:hidden}.infra-budget-progress meter::-webkit-meter-bar{background:var(--surface-3);border:0;border-radius:999px}.infra-budget-progress meter::-webkit-meter-optimum-value{background:var(--ok);border-radius:999px}.infra-budget-progress meter::-moz-meter-bar{background:var(--ok);border-radius:999px}.infra-budget-progress.is-warning{border-color:#d9770645;background:#d9770609}.infra-budget-progress.is-warning meter::-webkit-meter-optimum-value{background:var(--warn)}.infra-budget-progress.is-warning meter::-moz-meter-bar{background:var(--warn)}.infra-budget-progress.is-danger{border-color:#dc262655;background:#dc262608}.infra-budget-progress.is-danger meter::-webkit-meter-optimum-value{background:var(--danger)}.infra-budget-progress.is-danger meter::-moz-meter-bar{background:var(--danger)}.infra-budget-explanations{display:grid;gap:6px;margin-top:12px}.infra-budget-explanations p{margin:0;padding:10px 12px;border-left:3px solid var(--warn);border-radius:0 8px 8px 0;background:#d977060b;color:var(--muted);font-size:11.5px}.infra-budget-explanations strong{color:var(--fg)}
.infra-budget-source{display:flex;flex-wrap:wrap;gap:4px 7px;margin:10px 0 0;padding-top:9px;border-top:1px solid var(--border);color:var(--muted);font-size:11px}.infra-budget-source strong{color:var(--fg)}.infra-budget-source span{flex-basis:100%;color:var(--faint)}
.infra-budget-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}.infra-budget-form label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:11px}.infra-budget-form label>small{color:var(--faint);line-height:1.45}.infra-input-prefix,.infra-input-suffix{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;background:var(--surface)}.infra-input-suffix{grid-template-columns:minmax(0,1fr) auto}.infra-input-prefix>span,.infra-input-suffix>span{padding:9px 10px;background:var(--surface-2);color:var(--muted);font-weight:700}.infra-input-prefix input,.infra-input-suffix input{width:100%;min-width:0;padding:9px 10px;border:0;background:transparent;color:var(--fg);font:600 13px 'IBM Plex Mono',monospace}.infra-input-prefix input:focus,.infra-input-suffix input:focus{outline:2px solid var(--accent-weak);outline-offset:-2px}.infra-budget-action{grid-column:1/-1;display:flex;justify-content:flex-end}.infra-budget-readonly{margin-top:4px}.infra-readonly-note{margin:12px 0 0;color:var(--muted);font-size:11.5px}.notification-cost-panel{max-width:850px;margin-bottom:16px}.notification-cost-row>span:first-child{min-width:0}.notification-cost-row>span:first-child strong,.notification-cost-row>span:first-child small{display:block}.notification-cost-row>span:first-child small{margin-top:3px;color:var(--muted);font-size:11px}.notification-cost-safe{display:flex;flex-direction:column;gap:4px;padding:18px 0 4px;color:var(--muted);font-size:11.5px}.notification-cost-safe strong{color:var(--ok-text);font-size:13px}
.allocation-layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:16px;align-items:start}.allocation-summary{position:sticky;top:88px}.allocation-facts{grid-template-columns:minmax(0,1fr)}.allocation-invoice-total{font-size:18px}.allocation-currency-note{margin-top:14px;padding:12px 14px;border:1px solid #2563eb35;border-radius:9px;background:var(--accent-weak);color:var(--muted);font-size:11.5px;line-height:1.55}.allocation-list{display:grid}.allocation-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,240px);gap:18px;align-items:center;padding:15px 0;border-bottom:1px solid var(--border)}.allocation-resource{display:flex;gap:11px;align-items:flex-start;min-width:0}.allocation-resource>div{min-width:0}.allocation-resource strong,.allocation-resource span,.allocation-resource small{display:block;overflow-wrap:anywhere}.allocation-resource span{margin-top:4px;color:var(--muted);font-size:11px}.allocation-resource small{margin-top:3px;color:var(--faint);font-size:11px}.allocation-field{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:11px}.allocation-field input{width:100%;min-width:0;padding:9px 10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--fg);font:600 13px 'IBM Plex Mono',monospace;text-align:right}.allocation-field input:focus{outline:2px solid var(--accent-weak);border-color:var(--accent)}.allocation-field input[readonly]{background:var(--surface-2);color:var(--muted)}.allocation-field small{color:var(--faint);font-size:11px;line-height:1.35}.allocation-field .allocation-field-error{color:var(--danger-text);font-weight:600}.allocation-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.allocation-totals>div{padding:13px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);min-width:0}.allocation-totals span,.allocation-totals strong{display:block}.allocation-totals span{color:var(--muted);font-size:11px}.allocation-totals strong{margin-top:6px;font-size:15px;overflow-wrap:anywhere}.allocation-totals .is-complete{border-color:#16a34a55;background:#16a34a0d}.allocation-totals .is-complete strong{color:var(--ok-text)}.allocation-totals .is-over{border-color:#dc262655;background:#dc26260d}.allocation-totals .is-over strong{color:var(--danger-text)}.allocation-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}.allocation-actions p{margin:0;font-size:11.5px}.allocation-actions .btn:disabled{opacity:.5;cursor:not-allowed}.allocation-status-ok{color:var(--ok-text)!important}.allocation-status-error,.allocation-error{color:var(--danger-text)!important}.allocation-error{margin-top:14px;padding:11px 13px;border:1px solid #dc262655;border-radius:9px;background:#dc26260d;font-size:12px}.allocation-empty strong{display:block;color:var(--fg);font-size:14px}.allocation-empty p{margin:5px auto 0;max-width:420px}.allocation-entry-panel p{font-size:12px;line-height:1.55}.allocation-entry-button{display:inline-block;margin-top:5px}.infra-allocation-link{display:inline-block!important;margin-top:7px!important;font-weight:600;font-size:11px;color:var(--accent)!important}.infra-allocation-link:hover{text-decoration:underline}
.infra-link-invoice{margin-top:14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);overflow:hidden}.infra-link-invoice summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;cursor:pointer;color:var(--accent);font-weight:700;list-style-position:inside}.infra-link-invoice summary small{color:var(--muted);font-size:11px;font-weight:500}.infra-link-invoice[open] summary{border-bottom:1px solid var(--border)}.infra-link-invoice-body{padding:14px}.infra-link-invoice-form{display:grid;grid-template-columns:minmax(190px,.65fr) minmax(300px,1.35fr) auto;gap:10px;align-items:end}.infra-link-invoice-form input,.infra-link-invoice-form select{width:100%;min-width:0;height:38px}.infra-link-invoice-form select{white-space:nowrap;text-overflow:ellipsis}.infra-link-invoice-form .btn{height:38px;white-space:nowrap}.infra-invoice-choice small{min-height:14px;color:var(--faint);font-size:11px}.infra-link-invoice-note{margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.5}.infra-link-invoice-empty{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:11.5px}.infra-link-invoice-empty strong{color:var(--fg)}

@container (max-width:1050px){
 .invoice-table{min-width:0;table-layout:fixed}
 .invoice-table th,.invoice-table td{overflow-wrap:anywhere}
 .invoice-table .invoice-status .badge-chip{max-width:100%;white-space:normal;text-align:center}
 .invoice-table .hide-tablet{display:none}
 .invoice-table .invoice-main{width:30%}
 .invoice-table .invoice-account{width:17%}
 .invoice-table .invoice-total{width:15%}
 .invoice-table .invoice-due{width:11%}
 .invoice-table .invoice-status{width:17%}
 .invoice-table .invoice-action{width:10%}
 .report-detail-table .invoice-main{width:40%}
 .report-detail-table .invoice-account{width:19%}
 .report-detail-table .invoice-total{width:14%}
 .report-detail-table .invoice-due{width:11%}
 .report-detail-table .invoice-status{width:12%}
 .report-detail-table .invoice-action{width:4%}
}

/* Daftar resource memiliki delapan kolom. Saat ruang konten tidak cukup, setiap
   resource menjadi kartu agar semua informasi tetap terlihat tanpa scroll jauh. */
@container (max-width:1050px){
 .infra-list-wrap{border:0;background:transparent;overflow:visible;margin-inline:0}
 .infra-table{display:block;min-width:0!important}.infra-table thead{display:none}
 .infra-table tbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:12px}
 .infra-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
 .infra-table td{display:block;padding:0;border:0;min-width:0}.infra-table .infra-main{grid-column:1}.infra-table .infra-status{grid-column:2;grid-row:1;text-align:right}.infra-table .infra-owner{grid-column:1/-1;grid-row:2;padding-bottom:10px;border-bottom:1px solid var(--border)}.infra-table .infra-type{grid-column:1;grid-row:3}.infra-table .infra-address{grid-column:2;grid-row:3;text-align:right;overflow-wrap:anywhere}.infra-table .infra-cost{grid-column:1/-1;grid-row:4;padding-top:9px;border-top:1px solid var(--border)}.infra-table .infra-seen{grid-column:1/-1;grid-row:5;color:var(--muted)}
 .infra-table tr.infra-row-mappable{grid-template-columns:auto minmax(0,1fr) auto}.infra-table .infra-row-mappable .infra-select-cell{grid-column:1;grid-row:1}.infra-table .infra-row-mappable .infra-main{grid-column:2}.infra-table .infra-row-mappable .infra-status{grid-column:3}.infra-table .infra-row-mappable .infra-owner{grid-column:2/-1}.infra-table .infra-row-mappable .infra-type{grid-column:2}.infra-table .infra-row-mappable .infra-address{grid-column:3}.infra-table .infra-row-mappable .infra-cost,.infra-table .infra-row-mappable .infra-seen{grid-column:2/-1}
}

/* Langganan juga berubah menjadi kartu berdasarkan lebar komponen, bukan hanya
   lebar layar. Ini tetap bekerja ketika sidebar desktop sedang dibuka. */
@container (max-width:1050px){
 .subscription-list-wrap{border:0;background:transparent;overflow:visible;margin-inline:0}
 .subscription-table{display:block;min-width:0!important}.subscription-table thead{display:none}
 .subscription-table tbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,390px),1fr));gap:12px}
 .subscription-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
 .subscription-table td{display:block!important;padding:0;border:0;min-width:0;text-align:left!important}
 .subscription-table .subscription-main{grid-column:1/-1;display:flex!important;padding-bottom:10px;border-bottom:1px solid var(--border)}
 .subscription-table .subscription-account{grid-column:1/-1;overflow-wrap:anywhere}
 .subscription-table .subscription-kind{grid-column:1}.subscription-table .subscription-schedule{grid-column:2;text-align:right!important}
 .subscription-table .subscription-amount{grid-column:1}.subscription-table .subscription-next{grid-column:2;text-align:right!important}
 .subscription-table .subscription-actions{grid-column:1/-1;padding-top:9px;border-top:1px solid var(--border)}
 .subscription-table .mobile-label{display:block;margin-bottom:2px;color:var(--faint);font-size:11px;font-family:'IBM Plex Sans',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em}
}

/* Sidebar desktop menyisakan ruang sempit pada laptop kecil. Susun pemeriksaan
   Kotak Masuk ke bawah sampai ruang tiga kolom benar-benar mencukupi. */
@media (min-width:1025px) and (max-width:1280px){
 .review-grid{grid-template-columns:minmax(0,1fr)!important}
 .review-grid>:nth-child(3){grid-column:auto}
 .review-grid > .panel[style*="sticky"]{position:static!important}
}
@media (min-width:1025px){
 #app-sidebar{
  overflow:hidden;transition:width .2s ease,transform .2s ease,border-color .2s ease,visibility 0s linear 0s
 }
 html.sidebar-collapsed #app-sidebar{
  width:72px;transform:none;visibility:visible;overflow:visible
 }
 html.sidebar-collapsed #app-sidebar .brand{justify-content:center;padding:20px 0 14px}
 html.sidebar-collapsed #app-sidebar .brand>div:last-child,
 html.sidebar-collapsed #app-sidebar .company-wrap,
 html.sidebar-collapsed #app-sidebar .workspace-switcher,
 html.sidebar-collapsed #app-sidebar .navlabel,
 html.sidebar-collapsed #app-sidebar .nav-text{display:none}
 html.sidebar-collapsed #app-sidebar nav a{
  position:relative;justify-content:center;gap:0;margin:2px 10px;padding:11px 0
 }
 html.sidebar-collapsed #app-sidebar nav .nav-icon{width:20px;height:20px}
 html.sidebar-collapsed #app-sidebar nav .badge{
  position:absolute;top:2px;right:3px;display:grid;place-items:center;min-width:17px;height:17px;
  margin:0;padding:0 4px;border-radius:9px;box-shadow:0 0 0 2px var(--surface);
  font-size:11px;line-height:1
 }
 html.sidebar-collapsed #app-sidebar nav .task-active-badge{
  border:0;background:var(--accent);color:var(--accent-fg)
 }
 html.sidebar-collapsed #app-sidebar nav .task-active-label{display:none}
 html.sidebar-collapsed .desktop-nav{left:58px}
 html.sidebar-collapsed .top{padding-left:28px}
}
.review-grid > *{min-width:0}

/* Batang tagihan per bulan. `<progress>` dipakai karena CSP melarang atribut
   style, sehingga tinggi batang harus datang dari atribut `value`. Varian
   vertikalnya mewarisi radius 999px dan lebar penuh dari `.csp-progress`, yang
   pada tinggi 150px berubah menjadi kapsul selebar kolom sehingga selisih antar
   bulan tidak terbaca. Aturan berikut mengembalikannya menjadi batang. */
/* Keterangan di kanan judul seksi. Sebelumnya `float:right` dari kelas hasil
   ekstraksi CSP; di layar sempit float itu membuatnya menimpa paragraf
   penjelasan di bawahnya. */
.dashboard-heading-meta{float:right;font-size:12px}
@media (max-width:720px){
 .dashboard-heading-meta{float:none;display:block;margin-top:4px;font-size:11.5px}
}
.chart-bars .csp-progress-vertical{
 width:42px;height:150px;border-radius:5px 5px 0 0;
 background:color-mix(in srgb,var(--muted) 7%,transparent);
 --tone:var(--accent)}
.chart-bars .csp-progress-vertical::-webkit-progress-bar{
 background:color-mix(in srgb,var(--muted) 7%,transparent);border-radius:5px 5px 0 0}
.chart-bars .csp-progress-vertical::-webkit-progress-value{
 background:var(--tone);border-radius:5px 5px 0 0}
.chart-bars .csp-progress-vertical::-moz-progress-bar{
 background:var(--tone);border-radius:5px 5px 0 0}
/* Bulan berjalan belum selesai; arsiran menandainya tanpa mengganti warna. */
.chart-bars .is-bulan-berjalan::-webkit-progress-value{
 background:repeating-linear-gradient(135deg,var(--tone) 0 4px,color-mix(in srgb,var(--tone) 38%,var(--surface)) 4px 8px)}
.chart-bars .is-bulan-berjalan::-moz-progress-bar{
 background:repeating-linear-gradient(135deg,var(--tone) 0 4px,color-mix(in srgb,var(--tone) 38%,var(--surface)) 4px 8px)}
.chart-bars .dashboard-month-link:hover .csp-progress-vertical{--tone:var(--accent-hover)}
.chart-bars .dashboard-month-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--control-radius)}
@media (max-width:1024px){
 body{overflow:hidden}
 .wrap{display:block;height:100dvh;overflow:hidden}
 #app-sidebar{
 position:fixed;z-index:1000;inset:0 auto 0 0;width:min(84vw,300px);height:100dvh;
  overflow:hidden;transform:translateX(-105%);visibility:hidden;
  transition:transform .2s ease,visibility 0s linear .2s;
  box-shadow:0 18px 45px rgba(16,24,40,.22)
 }
 body.nav-open #app-sidebar{transform:translateX(0);visibility:visible;transition-delay:0s}
 .sidebar-backdrop{
  display:block;position:fixed;z-index:999;inset:0;border:0;background:rgba(8,11,18,.42);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s
 }
 body.nav-open .sidebar-backdrop{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
 .wrap > main{width:100%;height:100dvh;overflow:auto}
 /* Kepala halaman lengket memakai dua baris di ponsel bila halaman punya
    tombol aksi. Tinggi tiap baris terkunci 44px oleh target sentuh, jadi yang
    bisa dipangkas hanya padding dan jarak antar-barisnya. */
 .top{z-index:60;align-items:flex-start;gap:8px;padding:10px 14px;flex-wrap:wrap}
 .mobile-nav{
  display:grid;place-items:center;width:38px;height:38px;flex:none;border:1px solid var(--border);
  border-radius:9px;background:var(--surface-2);color:var(--fg);cursor:pointer
 }
 .desktop-nav{display:none}
 .top-title{flex:1;padding-top:1px}
 .top h1{font-size:18px;line-height:1.25}
 .top .sub{font-size:11.5px;margin-top:2px}
 .top .sp{display:none}
 .top-tools{margin-left:auto}
 .top-actions{order:5;width:100%;flex-wrap:wrap;padding-left:48px}
 .top-actions:empty{display:none}
 .top-actions form{max-width:100%;flex-wrap:wrap!important}
 .top-actions input[type=text]{width:min(100%,260px)!important;max-width:100%}
 .cards,.grid2,.detail-grid,.review-grid{grid-template-columns:minmax(0,1fr)!important}
 .review-grid>:nth-child(3){grid-column:auto}
 .master-layout{grid-template-columns:minmax(0,1fr)}.master-form-panel{position:static}
 .infra-detail-grid,.infra-reconcile-grid{grid-template-columns:minmax(0,1fr)}
 .infra-cost-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
 .infra-reconcile-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
 .infra-bulk-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.infra-bulk-note{grid-column:1/-1}.infra-bulk-fields>.btn{justify-self:start}
 .infra-cost-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .allocation-layout{grid-template-columns:minmax(0,1fr)}.allocation-summary{position:static}.allocation-editor{overflow-x:hidden}
 .cards{gap:12px}
 .month-summary-card{grid-column:auto}
 .report-section{scroll-margin-top:150px}
 .report-composition-labels{grid-template-columns:minmax(0,1fr)}
 .report-summary>.card{grid-column:auto!important}
 .report-section-heading{align-items:flex-start}
 .payment-candidate{grid-template-columns:minmax(0,1fr)}
 .payment-candidate form,.payment-candidate .btn{width:100%}
 .duplicate-candidate{flex-direction:column}
 .duplicate-candidate form,.duplicate-candidate .btn{width:100%}
 .card,.panel{padding:15px;border-radius:var(--panel-radius);min-width:0}
 .card .big{font-size:23px}
 .form-grid{grid-template-columns:minmax(0,1fr);gap:13px;max-width:none}
 .field.full{grid-column:auto}
 .filters{align-items:stretch;gap:8px}
 .filters label{flex:1 1 100%;width:100%}
 .filters select,.filters input{width:100%;min-height:40px}
 .filters .btn{min-height:40px}
 .invoice-filter-primary{grid-template-columns:repeat(2,minmax(0,1fr))}
 .invoice-filter-search{grid-column:1/-1}
 .invoice-filter-primary .btn{width:100%}
 .invoice-filter-reset{min-height:40px;align-self:end;justify-self:start}
 .invoice-filter-advanced-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tbl-wrap{margin-inline:-2px;overscroll-behavior-inline:contain}
 .tbl-wrap table{min-width:680px}
 .panel{overflow-x:auto}
 .panel > table:not(.report-analysis-table){min-width:520px}
 .panel > .report-analysis-table{min-width:0}
 .detail-grid .panel{overflow-x:hidden}
 .detail-grid .panel > table{display:table;min-width:0;table-layout:fixed}
 .detail-grid .panel > table td:first-child{width:32%}
 .detail-grid td{overflow-wrap:anywhere}
 .row-item{gap:9px}
 .review-grid > .panel[style*="sticky"]{position:static!important}
 /* Batas lebar diletakkan pada kolomnya, bukan pada barisnya: dengan min-width
   di baris, elemennya sendiri yang melebar sehingga yang menggeser adalah panel
   dan isyarat tepi tidak pernah muncul. Dengan batas di kolom, baris inilah yang
   menggeser dan isyaratnya bekerja. */
.chart-bars .dashboard-month-link{min-width:100px}
.chart-bars{overflow-x:auto;scrollbar-width:thin;
 background:
  linear-gradient(to right,var(--surface) 30%,transparent) left center / 26px 100% no-repeat local,
  linear-gradient(to left,var(--surface) 30%,transparent) right center / 26px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(16,24,40,.16),transparent) left center / 13px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(16,24,40,.16),transparent) right center / 13px 100% no-repeat scroll}
 .saving-summary-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .saving-stage-toolbar{align-items:stretch;flex-direction:column}.saving-stage-search{width:100%}.saving-accordion-summary{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;padding:12px;gap:12px}.saving-accordion-main,.saving-accordion-progress{grid-column:1/-1}.saving-accordion-status{grid-column:2;justify-self:end;align-self:end}.saving-accordion-copy strong{white-space:normal}.saving-detail-slot{padding-inline:12px}.saving-stage-heading{align-items:flex-start}.saving-stage-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.saving-stage-row>div:nth-child(3){grid-column:1}.saving-stage-action{grid-column:1/-1}.saving-stage-action-stack,.saving-stage-action form,.saving-stage-action .btn{width:100%;justify-items:stretch}.saving-stage-correction{width:100%}
 .saving-flex-form{grid-template-columns:minmax(0,1fr)}.saving-flex-form .btn{width:100%}
}

@media (max-width:640px){
 .inbox-detail-mode .inbox-queue-column{display:none}
 .inbox-list-mode .inbox-preview-column,.inbox-list-mode .inbox-detail-column{display:none}
 .inbox-detail-mode .inbox-detail-column{order:1}
 .inbox-detail-mode .inbox-preview-column{order:2}
 .inbox-mobile-back{width:100%;margin-bottom:12px;text-align:center}
 .workspace-context-banner{align-items:stretch;flex-direction:column;margin:10px 12px 0}
 .workspace-context-banner form,.workspace-context-banner .btn{width:100%}
 .mobile-bottom-nav{
  position:fixed;z-index:80;inset:auto 0 0 0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  padding:6px 7px;
  border-top:1px solid var(--border);background:var(--surface);
  box-shadow:0 -5px 18px rgba(15,23,42,.09)
 }
 .mobile-bottom-nav a,.mobile-bottom-nav button{
  position:relative;display:grid;justify-items:center;align-content:center;gap:2px;
  min-width:0;min-height:47px;margin:0;padding:4px 2px;border:0;border-radius:9px;
  background:transparent;color:var(--muted);font:500 11px/1.2 'IBM Plex Sans',system-ui,sans-serif;
  cursor:pointer
 }
 .mobile-bottom-nav a.active,.mobile-bottom-nav a[aria-current=page]{
  background:var(--accent-weak);color:var(--accent);font-weight:700
 }
 .mobile-bottom-nav a:focus-visible,.mobile-bottom-nav button:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px
 }
 .mobile-bottom-icon{
  width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round
 }
 .mobile-bottom-badge{
  position:absolute;top:1px;left:calc(50% + 7px);display:grid;place-items:center;
  min-width:16px;height:16px;padding:0 4px;border:2px solid var(--surface);
  border-radius:var(--control-radius);background:var(--accent);color:var(--accent-fg);font-size:11px;line-height:1
 }
 .content{padding-bottom:67px}
 .wrap > main{scroll-padding-bottom:67px}
 /* Kepala halaman ikut bergulir di ponsel: bersama baris tombol aksinya ia
    memakan sampai 170px dari layar 844px bila terus menempel. Navigasi tetap
    tersedia lewat bilah bawah yang memang menetap. */
 .top{position:static;align-items:center}
 .top-title{align-self:center}
 .top h1{font-size:17px}
 .top .sub{display:none}
 .top-tools{gap:5px}
 .top-icon-button{width:36px;height:36px}
 .top-user{min-width:0;width:38px;height:38px;padding:3px;justify-content:center;border-color:var(--border);background:var(--surface-2)}
 .top-user .user-copy,.top-user .user-chevron{display:none}
 .top-user .av{width:30px;height:30px}
 .top-user-menu .user-popover{width:min(270px,calc(100vw - 24px))}
 .header-popover{right:0}
 .notification-menu .header-popover{right:-44px}
 .top-actions{padding-left:0}
 .top-actions>.btn{flex:1 1 auto}
 .master-intro{align-items:flex-start;flex-direction:column}.filters.master-filters{grid-template-columns:minmax(0,1fr)}.master-filter-search,.master-filter-actions{grid-column:1}.master-filter-actions{flex-wrap:wrap}.master-filters .btn{width:100%}.master-list-panel{padding:10px}
 .infra-facts{grid-template-columns:minmax(0,1fr)}
 .infra-cost-summary,.infra-bulk-fields,.infra-mapping-form,.infra-cost-cards,.infra-budget-form,.infra-link-invoice-form{grid-template-columns:minmax(0,1fr)}
 .infra-reconcile-summary{grid-template-columns:minmax(0,1fr)}.infra-detail-grid .infra-section-title{flex-wrap:wrap}.infra-detail-grid .infra-status-stack{width:100%;justify-content:flex-start}.infra-reconcile-alert-panel .infra-section-title{align-items:flex-start;flex-direction:column}.infra-reconcile-action{white-space:normal}
 .infra-mobile-select-all{display:flex!important;flex-direction:row!important;align-items:center;gap:8px!important}.infra-mobile-select-all input{width:16px;height:16px;accent-color:var(--accent)}
 .infra-bulk-note,.infra-mapping-note,.infra-mapping-action,.infra-form-error{grid-column:1}.infra-bulk-fields>.btn,.infra-mapping-action .btn,.infra-link-invoice-form .btn{width:100%}
 .infra-cost-bar-row{grid-template-columns:36px minmax(70px,1fr)}.infra-cost-bar-row>strong{grid-column:2;text-align:left;margin-top:-6px}.infra-overview-heading{align-items:flex-start}.infra-bulk-panel summary{align-items:flex-start;flex-direction:column}
 .infra-list-wrap{border:0;background:transparent;overflow:visible;margin-inline:0}
 .infra-table{display:block;min-width:0!important}.infra-table thead{display:none}.infra-table tbody{display:grid;gap:12px}
 .infra-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
 .infra-table td{display:block;padding:0;border:0;min-width:0}.infra-table .infra-main{grid-column:1}.infra-table .infra-status{grid-column:2;grid-row:1;text-align:right}.infra-table .infra-owner{grid-column:1/-1;grid-row:2;padding-bottom:10px;border-bottom:1px solid var(--border)}.infra-table .infra-type{grid-column:1;grid-row:3}.infra-table .infra-address{grid-column:2;grid-row:3;text-align:right;overflow-wrap:anywhere}.infra-table .infra-cost{grid-column:1/-1;grid-row:4;padding-top:9px;border-top:1px solid var(--border)}.infra-table .infra-seen{grid-column:1/-1;grid-row:5;color:var(--muted)}
 .infra-table tr.infra-row-mappable{grid-template-columns:auto minmax(0,1fr) auto}.infra-table .infra-row-mappable .infra-select-cell{grid-column:1;grid-row:1}.infra-table .infra-row-mappable .infra-main{grid-column:2}.infra-table .infra-row-mappable .infra-status{grid-column:3}.infra-table .infra-row-mappable .infra-owner{grid-column:2/-1}.infra-table .infra-row-mappable .infra-type{grid-column:2}.infra-table .infra-row-mappable .infra-address{grid-column:3}.infra-table .infra-row-mappable .infra-cost,.infra-table .infra-row-mappable .infra-seen{grid-column:2/-1}
 .infra-relation{grid-template-columns:minmax(0,1fr)}.infra-relation>b,.infra-relation>span{justify-self:start}
 .infra-budget-alert{align-items:flex-start;flex-direction:column}.infra-budget-alert-reasons{justify-content:flex-start}.infra-cost-badges{justify-content:flex-start}.infra-budget-progress>div:first-child,.infra-budget-progress-meta{align-items:flex-start;flex-direction:column;gap:4px}.infra-budget-action{grid-column:1}.infra-budget-action .btn{width:100%}
 .allocation-row{grid-template-columns:minmax(0,1fr);gap:12px}.allocation-totals{grid-template-columns:minmax(0,1fr)}.allocation-actions{align-items:stretch;flex-direction:column}.allocation-actions .btn{width:100%}.allocation-field input{text-align:left}.allocation-resource .mono-badge{width:32px;height:32px}.allocation-layout .panel{overflow-x:hidden}
 .saving-summary-cards{grid-template-columns:minmax(0,1fr)!important}.saving-stage-correction-form,.saving-return-form{grid-template-columns:minmax(0,1fr)}.saving-stage-correction-form label,.saving-return-form label,.saving-correction-reason,.saving-correction-actions,.saving-return-form .btn{grid-column:1}.saving-correction-actions{align-items:stretch;flex-direction:column}.saving-activity-list article{grid-template-columns:minmax(0,1fr);gap:3px}.saving-activity-list small{white-space:normal}
 .document-type-box{grid-template-columns:minmax(0,1fr);align-items:stretch}
 .draft-pdf-upload-form{grid-template-columns:minmax(0,1fr)}.draft-pdf-upload-form .btn{width:100%}
 .document-type-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .document-type-actions .btn{width:100%;white-space:normal}
 .payment-manual-choice form{grid-template-columns:minmax(0,1fr)}
 .payment-manual-choice .btn{width:100%}
 .reminder-link-form{grid-template-columns:minmax(0,1fr)}.reminder-link-form .btn{width:100%}
 .topup-status-field{grid-template-columns:minmax(0,1fr)}.topup-status-field span{grid-column:1}.inbox-financial-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
 .invoice-filter-primary,.invoice-filter-advanced-grid{grid-template-columns:minmax(0,1fr)}
 .invoice-filter-search{grid-column:1}
 .invoice-filter-reset{justify-self:start}
 .invoice-quick-views{margin-inline:-2px;padding-bottom:3px}
 .invoice-list-wrap{border:0;background:transparent;overflow:visible;margin-inline:0}
 .invoice-results-toolbar{margin-bottom:10px;border:1px solid var(--border);border-radius:9px}
 .invoice-table{display:block;min-width:0!important}
 .invoice-table thead{display:none}
 .invoice-table tbody{display:grid;gap:12px}
 .invoice-table tr{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;
  padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px
 }
 .invoice-table td{display:block;padding:0;border:0;min-width:0}
 .invoice-table .invoice-main,
 .invoice-table .invoice-account,
 .invoice-table .invoice-total,
 .invoice-table .invoice-due,
 .invoice-table .invoice-status,
 .invoice-table .invoice-action{
  width:auto!important;max-width:none
 }
 .invoice-table .invoice-main{grid-column:1/-1;grid-row:1}
 .invoice-table .invoice-main > span:last-child{min-width:0}
 .invoice-table .invoice-main a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .report-detail-table .report-service-name{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere}
 .invoice-table .invoice-status{display:grid;grid-template-columns:auto minmax(0,1fr);grid-column:1/-1;grid-row:2;align-items:start;gap:6px 10px;text-align:left}
 .invoice-table .invoice-status .badge-chip{grid-row:1/3;margin:0}
 .invoice-table .invoice-workflow,.invoice-table .invoice-workflow-owner{grid-column:2}
 .invoice-table .invoice-account{grid-column:1/-1;grid-row:3;padding-bottom:10px;border-bottom:1px solid var(--border)}
 .invoice-table .invoice-total{grid-column:1;grid-row:4}
 .invoice-table .invoice-due{grid-column:2;grid-row:4;text-align:right}
 .invoice-table .invoice-action{grid-column:1/-1;grid-row:5;width:100%}
 .invoice-table .invoice-empty{grid-column:1/-1;text-align:center}
 .invoice-table .invoice-action:empty{display:none}
 .invoice-table .invoice-action form{width:100%}
 .invoice-table .invoice-action .invoice-row-action{display:block;width:100%;min-height:40px;padding:9px 13px;text-align:center}
 .invoice-table .invoice-action button{
  width:100%;min-height:40px;padding:9px 13px;border:1px solid var(--border);
  border-radius:9px;background:var(--surface-2)
 }
 .report-detail-table .invoice-action .btn-link{
  display:block;width:100%;min-height:40px;padding:9px 13px;text-align:center;
  border:1px solid var(--border);border-radius:9px;background:var(--surface-2)
 }
 .mobile-only,.mobile-label{display:inline}
 .desktop-only{display:none}
 .mobile-label{display:block;margin-bottom:2px;color:var(--faint);font-size:11px;font-family:'IBM Plex Sans',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em}
 .pagination{align-items:stretch}
 .pagination .pagination-summary{flex:1 1 100%}
 .pagination .btn{flex:1;text-align:center;white-space:nowrap}
}

@media (min-width:641px) and (max-width:1024px){
 .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .filters label{flex:1 1 calc(33.333% - 8px);width:auto}
 .filters.master-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.infra-presence-manual{background:#7c3aed18;color:var(--purple-text)}
.infra-manual-form-panel{max-width:920px;margin-inline:auto;padding:0;overflow:hidden}
.infra-manual-form-intro{display:flex;gap:13px;align-items:flex-start;padding:18px 20px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.infra-manual-form-icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:9px;background:var(--accent-weak);color:var(--accent);font-size:21px;font-weight:700}
.infra-manual-form-intro h2{margin:0;font-size:16px}.infra-manual-form-intro p{margin:4px 0 0;color:var(--muted);font-size:11.5px;line-height:1.5}
.infra-manual-form{padding:20px}.infra-manual-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 18px}
.infra-manual-field input:not([type=checkbox]),.infra-manual-field select,.infra-manual-field textarea{width:100%;min-width:0;box-sizing:border-box}
.infra-manual-field textarea{resize:vertical}.infra-manual-field small{color:var(--faint);font-size:11px;line-height:1.4}.infra-manual-field-wide{grid-column:1/-1}
.infra-manual-checkbox{justify-content:center}.infra-manual-checkbox-control{display:flex;align-items:center;gap:8px;color:var(--fg)}.infra-manual-checkbox-control input{width:16px;height:16px;accent-color:var(--accent)}.infra-manual-checkbox-control b{font-weight:600}
.infra-manual-form-error{grid-column:1/-1}.infra-manual-guidance{display:flex;gap:8px;margin-top:18px;padding:11px 13px;border:1px solid #d9770640;border-radius:9px;background:#d977060c;color:var(--muted);font-size:11px;line-height:1.5}.infra-manual-guidance strong{flex:none;color:var(--warn-text)}
.infra-manual-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
@media (max-width:640px){.infra-manual-form-grid{grid-template-columns:minmax(0,1fr)}.infra-manual-field-wide,.infra-manual-form-error{grid-column:1}.infra-manual-form-panel{overflow:hidden}.infra-manual-form{padding:15px}.infra-manual-form-intro{padding:15px}.infra-manual-guidance{flex-direction:column}.infra-manual-actions .btn{width:100%}}

/* Berlaku menyeluruh, bukan hanya untuk sidebar: hover tombol navigasi memakai
   transform:scale, popover header dan kartu memakai transition tersendiri.
   Durasi 0.01ms dipakai alih-alih `none` agar event transitionend/animationend
   tetap terpicu dan skrip yang menunggunya tidak menggantung. */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  transition-duration:.01ms!important;
  scroll-behavior:auto!important
 }
}

/* Anggaran bulanan FinOps */
.budget-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.budget-card-head .lbl{margin:0}.budget-state{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:600;white-space:nowrap;background:var(--surface-3);color:var(--muted)}.budget-state.safe{background:#16a34a1a;color:var(--ok-text)}.budget-state.warning{background:#d977061a;color:var(--warn-text)}.budget-state.danger{background:#dc26261a;color:var(--danger-text)}.budget-delta-safe{color:var(--ok-text)}.budget-delta-danger{color:var(--danger-text)}.budget-card-cta{font-size:11.5px;font-weight:600;margin-top:8px}
.budget-guidance{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:15px;padding:16px 18px}.budget-guidance p{margin:5px 0 0;color:var(--muted);font-size:11.5px;line-height:1.55}.budget-layout{display:grid;grid-template-columns:minmax(235px,280px) minmax(0,1fr);gap:15px;align-items:start}.budget-list-panel{position:sticky;top:82px;padding:14px}.budget-period-filter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;padding-bottom:13px;border-bottom:1px solid var(--border)}.budget-period-filter label{display:grid;gap:5px;color:var(--muted);font-size:11px}.budget-period-filter input{width:100%;min-width:0;box-sizing:border-box}.budget-list{display:grid;gap:7px;margin-top:12px}.budget-list-item{display:grid;gap:5px;padding:11px;border:1px solid var(--border);border-radius:9px;color:var(--fg);text-decoration:none}.budget-list-item:hover,.budget-list-item.active{border-color:var(--accent);background:var(--accent-weak)}.budget-list-item>span:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px}.budget-list-item small{color:var(--muted);font-size:11px}.budget-list-item .num{font:600 13px/1.3 'IBM Plex Mono',monospace}.budget-new{display:flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;margin:16px 0 4px;text-align:center;white-space:nowrap}.danger-text{color:var(--danger-text)!important}.success-text{color:var(--ok-text)!important}.budget-main{display:grid;gap:15px;min-width:0}.budget-status-head{display:flex;align-items:center;justify-content:space-between;gap:18px}.budget-status-head h2{margin:5px 0 3px;font-size:18px}.budget-status-head p{margin:0;color:var(--muted);font-size:11px}.eyebrow{color:var(--accent);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.budget-status{padding:5px 10px;border-radius:12px;font-size:11px;font-weight:700;white-space:nowrap}.budget-status-draft{background:var(--surface-2);color:var(--muted)}.budget-status-submitted{background:#d9770618;color:var(--warn-text)}.budget-status-approved{background:#16a34a18;color:var(--ok-text)}.budget-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.budget-summary-grid .card{display:grid;gap:8px}.budget-summary-grid .card>span{color:var(--muted);font-size:11px}.budget-summary-grid .card>b{font:700 19px/1.2 'IBM Plex Mono',monospace}.budget-summary-grid .card>small{color:var(--muted);font-size:11px;line-height:1.45}.budget-summary-grid .budget-over{border-color:#dc262650;background:#dc262608}.budget-editor{padding:18px}.budget-section-heading,.budget-detail-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.budget-section-heading h2,.budget-detail-heading h3{margin:0 0 4px}.budget-section-heading p,.budget-detail-heading p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}.budget-header-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-top:17px}.budget-field{display:grid;align-content:start;gap:5px;min-width:0}.budget-field>label{color:var(--muted);font-size:11px}.budget-field input:not([type=checkbox]),.budget-field select,.budget-field textarea{width:100%;min-width:0;box-sizing:border-box}.budget-field small{color:var(--faint);font-size:11px;line-height:1.4}.budget-field-wide{grid-column:1/-1}.budget-detail-heading{align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}.budget-detail-list{display:grid;gap:10px;margin-top:12px}.budget-detail-row{display:grid;grid-template-columns:140px minmax(170px,1.25fr) minmax(160px,1fr) minmax(135px,.8fr) minmax(150px,1fr) minmax(130px,.75fr) 42px;gap:9px;align-items:end;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}.budget-detail-catatan{grid-column:2/7}.budget-remove{grid-column:7;grid-row:1;width:42px;overflow:hidden;color:var(--danger-text)}.budget-delete-native{display:none}.budget-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.budget-editor>.budget-actions{margin-top:18px;padding-top:15px;border-top:1px solid var(--border)}.budget-readonly h3,.budget-workflow h3{margin:0 0 4px}.budget-readonly-list{display:grid;margin-top:12px}.budget-readonly-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--border)}.budget-readonly-list span{display:grid;gap:3px}.budget-readonly-list small{color:var(--muted);font-size:11px}.budget-readonly-list .num{font-family:'IBM Plex Mono',monospace}.budget-workflow{display:flex;align-items:center;justify-content:space-between;gap:18px}.budget-workflow p{margin:0;color:var(--muted);font-size:11px}
.budget-guidance-actions{display:grid;justify-items:end;gap:8px;flex:none}

@media (max-width:1280px){.budget-detail-row{grid-template-columns:repeat(3,minmax(0,1fr)) 42px}.budget-detail-catatan{grid-column:1/4}.budget-remove{grid-column:4;grid-row:1}.budget-detail-nominal{grid-column:3}.budget-detail-nama{grid-column:1/3}}
@media (max-width:720px){.budget-guidance,.budget-status-head,.budget-workflow{align-items:flex-start;flex-direction:column}.budget-layout{grid-template-columns:minmax(0,1fr)}.budget-list-panel{position:static}.budget-summary-grid{grid-template-columns:minmax(0,1fr)}.budget-header-fields{grid-template-columns:minmax(0,1fr)}.budget-field-wide{grid-column:1}.budget-detail-row{grid-template-columns:minmax(0,1fr) 42px}.budget-detail-row .budget-field{grid-column:1}.budget-detail-catatan,.budget-detail-nama,.budget-detail-nominal{grid-column:1}.budget-remove{grid-column:2;grid-row:1}.budget-actions,.budget-actions form,.budget-actions .btn{width:100%}.budget-period-filter{grid-template-columns:minmax(0,1fr)}.budget-period-filter .btn{width:100%}}

/* Polesan form anggaran: mengikuti komponen input modern dan selalu muat di panel. */
.budget-guidance,.budget-list-panel,.budget-main>.panel,.budget-editor,.budget-summary-grid .card{padding:15px}.budget-layout{grid-template-columns:minmax(210px,250px) minmax(0,1fr);gap:15px}.budget-editor{overflow:hidden}.budget-header-fields{gap:12px 15px;margin-top:15px}.budget-detail-heading{margin-top:16px;padding-top:15px}.budget-detail-row{grid-template-columns:minmax(120px,.7fr) minmax(190px,1.35fr) minmax(160px,1fr) minmax(135px,.72fr) 38px;gap:10px;align-items:end;padding:10px}.budget-detail-row [hidden]{display:none!important}.budget-detail-jenis{grid-column:1;grid-row:1}.budget-detail-reference{grid-column:2;grid-row:1;min-width:0}.budget-detail-nama{grid-column:3;grid-row:1}.budget-detail-nominal{grid-column:4;grid-row:1}.budget-detail-catatan{grid-column:1/5;grid-row:2}.budget-remove{grid-column:5;grid-row:1;width:38px;min-width:38px;padding:10px 7px;font-size:0}.budget-remove::before{content:'';display:inline-block;width:19px;height:19px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E") center/contain no-repeat;vertical-align:-.14em;vertical-align:middle;}.budget-reference-placeholder{display:flex;align-items:center;min-height:43px;padding:10px 12px;border:1px dashed var(--border);border-radius:10px;color:var(--faint);background:var(--surface);font-size:11px}.budget-period-filter input,.budget-field input:not([type=checkbox]),.budget-field select,.budget-field textarea{display:block;width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--fg);padding:10px 12px;font:400 13px/1.4 'IBM Plex Sans',system-ui,sans-serif;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.budget-period-filter input,.budget-field input:not([type=checkbox]),.budget-field select{min-height:43px}.budget-field textarea{min-height:78px;resize:vertical}.budget-detail-catatan input{min-height:43px}.budget-period-filter input:hover,.budget-field input:not([type=checkbox]):hover,.budget-field select:hover,.budget-field textarea:hover{border-color:color-mix(in srgb,var(--muted) 55%,var(--border))}.budget-period-filter input:focus,.budget-field input:not([type=checkbox]):focus,.budget-field select:focus,.budget-field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}.budget-field input:disabled,.budget-field select:disabled,.budget-field textarea:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
.budget-bulk-form{display:grid;gap:10px}.budget-bulk-controls{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--border)}.budget-bulk-controls label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}.budget-list-entry{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px;align-items:center}.budget-list-entry>.budget-list-item{grid-column:2}.budget-list-entry>input{margin:0}.budget-return-notice{border-color:#d9770650;background:#d9770608}.budget-return-notice p{margin:8px 0;white-space:pre-wrap}.budget-return-notice small{color:var(--muted)}.budget-return-form{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:7px 10px;align-items:end;min-width:min(100%,560px)}.budget-return-form label{grid-column:1/-1;color:var(--muted);font-size:11px}.budget-return-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--fg);padding:10px 12px;resize:vertical}.budget-return-form textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}

@media (max-width:1280px){.budget-detail-row{grid-template-columns:minmax(120px,.7fr) minmax(190px,1.3fr) minmax(135px,.75fr) 38px}.budget-detail-jenis{grid-column:1}.budget-detail-reference{grid-column:2}.budget-detail-nominal{grid-column:3}.budget-detail-nama{grid-column:1/3;grid-row:2}.budget-detail-catatan{grid-column:1/4;grid-row:3}.budget-remove{grid-column:4;grid-row:1}}
@media (max-width:720px){.budget-layout{grid-template-columns:minmax(0,1fr)}.budget-detail-row{grid-template-columns:minmax(0,1fr) 38px}.budget-detail-jenis,.budget-detail-reference,.budget-detail-nama,.budget-detail-nominal,.budget-detail-catatan{grid-column:1;grid-row:auto}.budget-remove{grid-column:2;grid-row:1}.budget-guidance,.budget-list-panel,.budget-main>.panel,.budget-editor,.budget-summary-grid .card{padding:15px}}
@media (max-width:720px){.budget-return-form{grid-template-columns:minmax(0,1fr)}.budget-return-form label{grid-column:1}.budget-list-entry>.budget-list-item{min-width:0}}

/* Login aplikasi operasional, terpisah dari panel Django Admin. */
.login-page{min-height:100vh;background:var(--bg)}
.login-shell{display:grid;grid-template-columns:minmax(320px,1.05fr) minmax(360px,.95fr);min-height:100vh;overflow:visible}
.login-intro{position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:48px clamp(36px,6vw,88px);background:#0f1b35;color:#fff}
.login-intro::before{content:'';position:absolute;inset:-25% -20% auto auto;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,#2563eb66 0,transparent 68%);pointer-events:none}
.login-intro::after{content:'';position:absolute;right:8%;bottom:-140px;width:360px;height:360px;border:1px solid #ffffff1f;border-radius:50%;box-shadow:0 0 0 70px #ffffff08,0 0 0 140px #ffffff05;pointer-events:none}
.login-brand{position:relative;z-index:1;display:flex;align-items:center;gap:12px;font-weight:700}.login-brand .logo{width:38px;height:38px;background:#3778f6}
.login-intro>div:nth-child(2){position:relative;z-index:1;max-width:620px}.login-eyebrow{margin:0 0 13px;color:#91b4ff;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.login-intro h1{max-width:580px;margin:0;font-size:clamp(32px,4.2vw,58px);line-height:1.05;letter-spacing:-.035em}.login-intro h1+p{max-width:540px;margin:22px 0 0;color:#c1cce0;font-size:15px;line-height:1.7}.login-security-note{position:relative;z-index:1;margin:0;color:#8fa0bc;font-size:11.5px}
.login-card{align-self:center;width:min(440px,calc(100% - 48px));margin:auto;padding:36px;border:1px solid var(--border);border-radius:var(--panel-radius);background:var(--surface);box-shadow:0 22px 60px rgba(15,23,42,.10)}
.login-card h2{margin:0;font-size:24px;letter-spacing:-.02em}.login-card h2+p{margin:7px 0 0;color:var(--muted);font-size:12.5px}.login-form{display:grid;gap:16px;margin-top:26px}.login-form label{display:grid;gap:6px;color:var(--fg);font-size:12px;font-weight:600}.login-form input:not([type=hidden]){width:100%;min-height:45px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface-2);color:var(--fg);padding:10px 12px;font:400 14px/1.4 'IBM Plex Sans',system-ui,sans-serif}.login-form input:hover{border-color:color-mix(in srgb,var(--muted) 48%,var(--border))}.login-form input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak);background:var(--surface)}.login-submit{width:100%;min-height:45px;margin-top:3px}.login-error{margin-top:18px;padding:11px 12px;border:1px solid #dc262644;border-radius:9px;background:#dc26260d;color:var(--danger-text);font-size:12px}.login-field-error{color:var(--danger-text);font-weight:500}.login-help{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--border);color:var(--muted);font-size:11px;line-height:1.55}.login-help a{color:var(--accent-text);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.login-alternative{display:flex;align-items:center;gap:10px;margin:19px 0;color:var(--faint);font-size:11px}.login-alternative::before,.login-alternative::after{content:"";height:1px;flex:1;background:var(--border)}.login-regarmarket{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:45px;border:1px solid var(--border);background:var(--surface);color:var(--fg);font-weight:600}.login-regarmarket:hover{border-color:#f08120;background:color-mix(in srgb,#f08120 7%,var(--surface))}.login-regarmarket-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--control-radius);background:#f08120;color:#1a1205;font-size:13px;font-weight:700}
@media (max-width:720px){.login-shell{grid-template-columns:minmax(0,1fr)}.login-intro{min-height:230px;padding:28px 24px}.login-intro>div:nth-child(2){margin:40px 0 25px}.login-intro h1{font-size:30px}.login-intro h1+p{display:none}.login-security-note{display:none}.login-card{width:min(440px,calc(100% - 28px));margin:22px auto;padding:24px}.login-page{background:linear-gradient(#0f1b35 0 230px,var(--bg) 230px)}}

/* Pengajuan Layanan: pipeline kebutuhan sebelum menjadi invoice. */
.procurement-guidance,.procurement-state-panel{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px}.procurement-guidance p,.procurement-state-panel p{margin:4px 0 0;color:var(--muted);font-size:11.5px;line-height:1.5}.procurement-mode-badge{background:var(--accent-weak);color:var(--accent)}
.procurement-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:15px 0}.procurement-summary .card{display:grid;align-content:start;gap:8px;padding:18px}.procurement-summary .card>span{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:12.5px}.procurement-summary .card>span .ui-icon{color:var(--faint)}.procurement-summary b{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1}.procurement-summary small{color:var(--faint);font-size:11.5px;line-height:1.4}
.procurement-list-panel{padding:15px}.procurement-view-tabs{display:flex;gap:8px;padding-bottom:12px}.procurement-view-tabs a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:11.5px;font-weight:700}.procurement-view-tabs a span{display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--surface-3);color:var(--fg);font-size:11px}.procurement-view-tabs a.is-active{border-color:var(--accent);background:var(--accent-weak);color:var(--accent)}.procurement-filters{display:grid;grid-template-columns:minmax(220px,1fr) 210px 170px auto;gap:10px;align-items:end;padding:12px 0 14px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.procurement-filters>input[type=hidden]{display:none}.procurement-filters label{display:grid;gap:5px;color:var(--muted);font-size:11px}.procurement-filters input,.procurement-filters select{width:100%;min-width:0;box-sizing:border-box}.procurement-filter-actions{display:flex;align-items:center;gap:7px}
.procurement-list{display:grid}.procurement-list-head,.procurement-row{display:grid;grid-template-columns:minmax(300px,1fr) 110px 190px 145px 48px;gap:13px;align-items:center}.procurement-list-head{padding:11px 0 8px;border-bottom:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.procurement-list-head span:nth-child(4),.procurement-list-head span:last-child{text-align:right}.procurement-row{padding:14px 0;border-bottom:1px solid var(--border);color:var(--fg)}.procurement-row:last-child{border-bottom:0}.procurement-row-main{display:grid;gap:3px;min-width:0}.procurement-row-main strong{overflow-wrap:anywhere}.procurement-row-main small{color:var(--muted);font-size:11px}.procurement-code{color:var(--accent);font:600 11px/1.3 'IBM Plex Mono',monospace}.procurement-row>div:not(.procurement-row-main){display:grid;gap:4px;font-size:11.5px}.procurement-row-amount{text-align:right;font-weight:700}.procurement-row-amount small{display:block;color:var(--muted);font-size:11px}.procurement-row-action{color:var(--accent);font-size:11px;font-weight:600;text-align:right}.procurement-empty{display:grid;gap:5px;padding:32px 10px}.procurement-empty span{color:var(--muted)}
.procurement-status{display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:4px 9px;border-radius:999px;background:var(--surface-3);color:var(--muted);font-size:11px;font-weight:700}.procurement-status-approved,.procurement-status-completed{background:#16a34a1a;color:var(--ok-text)}.procurement-status-rejected,.procurement-status-cancelled{background:#dc26261a;color:var(--danger-text)}.procurement-status-review_operasional,.procurement-status-wait_manager,.procurement-status-wait_director,.procurement-status-wait_finance{background:#d977061a;color:var(--warn-text)}
.procurement-form-intro{padding:15px;margin-bottom:15px}.procurement-form-intro p{margin:4px 0 0;color:var(--muted);font-size:11.5px}.procurement-flow{display:flex;align-items:center;gap:6px;margin-top:12px;overflow-x:auto}.procurement-flow span{flex:0 0 auto;padding:6px 9px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:11px;font-weight:600}.procurement-flow span.is-current{border-color:var(--accent);background:var(--accent-weak);color:var(--accent)}.procurement-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;padding:15px}.procurement-field{display:grid;align-content:start;gap:5px;min-width:0}.procurement-field label{color:var(--muted);font-size:11px}.procurement-field input,.procurement-field select,.procurement-field textarea,.procurement-workflow-panel textarea,.procurement-link-invoice input,.procurement-link-invoice select{display:block;width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--fg);padding:10px 12px;font:400 13px/1.4 'IBM Plex Sans',system-ui,sans-serif}.procurement-field input,.procurement-field select{min-height:43px}.procurement-field textarea{resize:vertical}.procurement-field small,.procurement-link-invoice small{color:var(--faint);font-size:11px;line-height:1.4}.procurement-wide{grid-column:1/-1}.procurement-form-actions{display:flex;gap:8px;padding-top:14px;border-top:1px solid var(--border)}
.procurement-section-title{display:flex;align-items:center;gap:10px;margin-top:4px;padding:12px 0 2px;border-top:1px solid var(--border)}.procurement-section-title:first-of-type{border-top:0}.procurement-section-title>span{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--accent-weak);color:var(--accent);font-weight:700}.procurement-section-title>div{display:grid}.procurement-section-title small{color:var(--muted);font-size:11px}.procurement-items{display:grid;gap:12px}.procurement-item-row{display:grid;grid-template-columns:minmax(220px,2fr) repeat(3,minmax(110px,1fr));gap:12px;margin:0;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}.procurement-item-row legend{padding:0 7px;color:var(--muted);font-size:11px;font-weight:600}.procurement-item-description{grid-column:span 2}.procurement-check{align-self:end}.procurement-check label{display:flex;align-items:center;gap:8px;min-height:42px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--fg)}.procurement-check input{width:auto;min-height:0}.procurement-estimate-summary{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:13px 14px;border:1px solid var(--accent);border-radius:12px;background:var(--accent-weak)}.procurement-estimate-summary>div{display:grid;gap:3px}.procurement-estimate-summary span{color:var(--accent);font-weight:700}.procurement-estimate-summary small{max-width:520px;color:var(--muted);line-height:1.45}
.procurement-state-panel{align-items:flex-start}.procurement-state-panel h2{margin:5px 0 0;font-size:20px}.procurement-state-panel>div>small{display:block;margin-top:4px;color:var(--muted);font-size:11px}.procurement-detail-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr);gap:15px;align-items:start;margin-top:15px}.procurement-detail-grid>div,.procurement-detail-grid>aside{display:grid;gap:15px}.procurement-detail-panel,.procurement-invoice-panel,.procurement-workflow-panel,.procurement-history-panel{padding:15px}.procurement-detail-panel h3,.procurement-invoice-panel h3,.procurement-workflow-panel h3,.procurement-history-panel h3{margin:0}.procurement-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:12px 0 0}.procurement-facts>div{padding:10px 0;border-top:1px solid var(--border)}.procurement-facts dt{color:var(--muted);font-size:11px}.procurement-facts dd{margin:4px 0 0;font-size:12.5px;font-weight:600;overflow-wrap:anywhere}.procurement-copy-block{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}.procurement-copy-block>span{color:var(--muted);font-size:11px}.procurement-copy-block p{margin:5px 0 0;font-size:12px;line-height:1.55}
.procurement-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:11px;border-bottom:1px solid var(--border)}.procurement-section-heading p{margin:3px 0 0;color:var(--muted);font-size:11px}.procurement-invoice-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}.procurement-invoice-row>div{display:grid;gap:3px;min-width:0}.procurement-invoice-row strong{overflow-wrap:anywhere}.procurement-invoice-row span,.procurement-invoice-row small{color:var(--muted);font-size:11px}.procurement-link-invoice{margin-top:13px;padding-top:12px;border-top:1px solid var(--border)}.procurement-link-invoice summary{cursor:pointer;color:var(--accent);font-size:11.5px;font-weight:700}.procurement-link-invoice form{display:grid;gap:10px;margin-top:12px}.procurement-link-invoice label{display:grid;gap:5px;color:var(--muted);font-size:11px}
.procurement-current-owner{display:grid;gap:3px;margin-top:12px;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}.procurement-current-owner span,.procurement-current-owner small{color:var(--muted);font-size:11px;line-height:1.45}.procurement-workflow-panel form{display:grid;gap:9px;margin-top:12px}.procurement-workflow-panel textarea{resize:vertical}.procurement-note{color:var(--muted);font-size:11.5px;line-height:1.5}.procurement-reject{margin-top:15px;padding-top:12px;border-top:1px solid var(--border)}.procurement-reject summary{cursor:pointer;color:var(--danger-text);font-size:11px;font-weight:600}.procurement-reject .btn,.procurement-cancel{color:var(--danger-text)}.procurement-cancel{width:100%;margin-top:10px}.procurement-history-row{display:grid;grid-template-columns:10px minmax(0,1fr);gap:9px;padding:11px 0;border-bottom:1px solid var(--border)}.procurement-history-row:last-child{border-bottom:0}.procurement-history-row>span{width:8px;height:8px;margin-top:4px;border-radius:50%;background:var(--accent)}.procurement-history-row>div{display:grid;gap:2px}.procurement-history-row small{color:var(--muted);font-size:11px}.procurement-history-row p{margin:3px 0 0;color:var(--muted);font-size:11px;line-height:1.45}
@media(max-width:1024px){.procurement-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.procurement-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.procurement-list-head,.procurement-row{grid-template-columns:minmax(240px,1fr) 105px 165px 130px}.procurement-list-head span:last-child,.procurement-row-action{display:none}.procurement-detail-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:720px){.procurement-guidance,.procurement-state-panel{align-items:flex-start;flex-direction:column}.procurement-filters,.procurement-form,.procurement-facts,.procurement-item-row{grid-template-columns:minmax(0,1fr)}.procurement-wide,.procurement-item-description{grid-column:1}.procurement-list-head{display:none}.procurement-row{grid-template-columns:minmax(0,1fr) auto;padding:14px}.procurement-row-main{grid-column:1/-1}.procurement-row>div:nth-child(2){grid-column:1}.procurement-row>div:nth-child(3){grid-column:2;grid-row:2}.procurement-row-amount{grid-column:1/-1;text-align:left}.procurement-filter-actions,.procurement-filter-actions .btn,.procurement-form-actions,.procurement-form-actions .btn{width:100%}.procurement-filter-actions,.procurement-form-actions{flex-direction:column}.procurement-estimate-summary{display:grid}.procurement-invoice-row{grid-template-columns:minmax(0,1fr)}}

/* Target sentuh mobile: kontrol penting mengikuti ukuran nyaman 44px tanpa
   membesarkan tampilan desktop atau input file tersembunyi. */
@media (max-width:720px) {
  .btn,
  button,
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not(.draft-pdf-native-input),
  select,
  nav a,
  .company,
  .user,
  .user-action,
  .report-section-nav a {
    min-height:44px;
    box-sizing:border-box;
  }

  .btn,
  .report-section-nav a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

/* Kontrak form lintas-domain.
   Gunakan komponen components/form_field.html atau wrapper app-field untuk
   setiap form baru. Class ini mencegah template kembali ke tampilan mentah
   widget Django dan tetap selaras pada Billing, Finance, Asset, Service Desk. */
.app-form{display:grid;gap:18px}
.app-form-section{padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--panel-shadow)}
.app-form-section>header{margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid var(--border)}
.app-form-section>header h2,.app-form-section>header h3{margin:0}
.app-form-section>header p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.55}
.app-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 18px}
.app-field{display:grid;align-content:start;gap:6px;min-width:0}
.app-field-wide{grid-column:1/-1}
.app-field>label{color:var(--muted);font-size:11.5px;font-weight:600}
.app-required{color:var(--danger-text)}
.app-control{display:block;width:100%;min-width:0;min-height:43px;box-sizing:border-box;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--fg);padding:10px 12px;font:400 13px/1.4 'IBM Plex Sans',system-ui,sans-serif;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
textarea.app-control{min-height:92px;resize:vertical}
select.app-control{padding-right:34px}
.app-control:hover{border-color:color-mix(in srgb,var(--muted) 55%,var(--border))}
.app-control:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.app-control:disabled,.app-control[readonly]{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
.app-control::placeholder{color:var(--faint)}
.app-choice-control{width:17px;height:17px;accent-color:var(--accent)}
.app-help{color:var(--faint);font-size:11px;line-height:1.45}
.app-field-errors,.app-form-errors{color:var(--danger-text);font-size:11px;line-height:1.45}
.app-field-errors ul,.app-form-errors ul{margin:0;padding-left:17px}
.app-field.has-error .app-control{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 10%,transparent)}
.app-form-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;padding-top:15px;border-top:1px solid var(--border)}
.app-filter{display:grid;align-items:end;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.app-filter .app-field>label{font-size:11px}
@media(max-width:720px){.app-form-section{padding:15px}.app-form-grid{grid-template-columns:minmax(0,1fr)}.app-field-wide{grid-column:1}.app-form-actions{align-items:stretch;flex-direction:column}.app-form-actions .btn{width:100%}}
.inbox-loading,
.invoice-results-loading {
  position: fixed;
  z-index: 4500;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--panel-shadow);
  font-size: 12px;
  font-weight: 600;
}

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: block;
}

#inbox-app[aria-busy="true"] {
  cursor: progress;
}

#invoice-results[aria-busy="true"] {
  cursor: progress;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
[x-cloak]{display:none!important}

/* CSP-safe semantic tones and data visualisations. Dynamic values are carried
   by HTML attributes; visual state is selected only through finite classes. */
.tone-success{--tone:#16a34a;--tone-soft:#16a34a1a;--tone-text:var(--ok-text)}
.tone-accent{--tone:#2563eb;--tone-soft:#2563eb1a;--tone-text:var(--accent-text)}
.tone-danger{--tone:#dc2626;--tone-soft:#dc26261a;--tone-text:var(--danger-text)}
.tone-warning{--tone:#d97706;--tone-soft:#d977061a;--tone-text:var(--warn-text)}
.tone-purple{--tone:#7c3aed;--tone-soft:#7c3aed1a;--tone-text:var(--purple-text)}
.tone-teal{--tone:#0d9488;--tone-soft:#0d94881a;--tone-text:var(--teal-text)}
.tone-cyan{--tone:#0e7490;--tone-soft:#0891b21a;--tone-text:var(--cyan-text)}
.tone-muted{--tone:#6b7280;--tone-soft:var(--surface-3);--tone-text:var(--muted)}
.badge-chip.tone-success,.badge-chip.tone-accent,.badge-chip.tone-danger,
.badge-chip.tone-warning,.badge-chip.tone-purple,.badge-chip.tone-teal,
.badge-chip.tone-cyan,.badge-chip.tone-muted{background:var(--tone-soft);color:var(--tone-text)}
.mono-badge.tone-success,.mono-badge.tone-accent,.mono-badge.tone-danger,
.mono-badge.tone-warning,.mono-badge.tone-purple,.mono-badge.tone-teal,
.mono-badge.tone-cyan,.mono-badge.tone-muted{background:var(--tone);color:#fff}
.text-tone{color:var(--tone-text,var(--tone))}
.border-tone{border-color:var(--tone)}
.panel.is-critical{border-color:var(--danger)}
.panel.is-selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-weak)}
.compact-panel{padding:14px}
.mono-badge-sm{width:28px;height:28px}
.invoice-due.is-overdue{color:var(--danger-text);font-weight:600}
.csp-progress{display:block;width:100%;height:8px;border:0;border-radius:999px;overflow:hidden;background:var(--surface-3);accent-color:var(--tone,var(--accent))}
.csp-progress::-webkit-progress-bar{background:var(--surface-3);border-radius:999px}
.csp-progress::-webkit-progress-value{background:var(--tone,var(--accent));border-radius:999px}
.csp-progress::-moz-progress-bar{background:var(--tone,var(--accent));border-radius:999px}
.csp-progress-vertical{width:100%;height:145px;writing-mode:vertical-lr;direction:rtl}
.csp-stacked-chart{display:block;width:100%;height:10px}
.csp-chart-fill{fill:var(--tone)}
.confidence-copy{font-size:11px;font-weight:600;color:var(--tone-text,var(--tone));text-align:right;margin-top:3px}
.score-copy{font-size:11px;font-weight:600;color:var(--tone-text,var(--tone))}
/* Error pages keep authorization failures consistent with the application UI. */
.error-page {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
}

.error-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 64px);
}

.error-card {
  width: min(100%, 620px);
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  background: var(--surface);
  box-shadow: var(--panel-shadow);
  text-align: center;
}

.error-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.error-brand span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight:700;
}

.error-code {
  color: var(--accent);
  font-size: clamp(64px, 12vw, 112px);
  font-weight:700;
  letter-spacing: -.06em;
  line-height: .9;
}

.error-card h1 {
  margin: 22px 0 10px;
}

.error-card > p {
  margin: 0 auto;
  max-width: 48ch;
  color: var(--muted);
}

.error-reason {
  margin-top: 18px !important;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--fg) !important;
}

.error-actions {
  margin: 28px 0 18px;
}

.error-card small {
  display: block;
  color: var(--muted);
  line-height: 1.5;
}

.master-intro-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.id-review-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 16px 18px;
}
.id-review-intro p {
  max-width: 850px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.id-review-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.id-review-summary article {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
}
.id-review-summary span,
.id-review-summary small {
  color: var(--muted);
  font-size: 11px;
}
.id-review-summary strong { font-size: 24px; }
.id-review-panel { padding: 15px; }
.id-review-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}
.id-review-filters label,
.id-review-link-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
}
.id-review-search { grid-column: span 2; }
.id-review-filter-actions {
  display: flex;
  align-items: end;
  gap: 10px;
}
.id-review-table-wrap { overflow: auto; }
.id-review-table {
  width: 100%;
  min-width: 1050px;
  border-collapse: collapse;
}
.id-review-table th {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  text-align: left;
}
.id-review-table td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  vertical-align: top;
}
.id-review-table td > span,
.id-review-table td > small {
  display: block;
  margin-top: 4px;
}
.id-review-title {
  display: block;
  color: var(--fg);
  font-weight: 700;
}
.id-review-link-form {
  display: grid;
  grid-template-columns: minmax(210px, 1.4fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 7px;
  min-width: 540px;
}
.id-review-link-form .btn { height: 38px; }

@media (max-width: 1024px) {
  .id-review-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .id-review-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .id-review-intro { align-items: flex-start; flex-direction: column; }
  .id-review-summary,
  .id-review-filters { grid-template-columns: minmax(0, 1fr); }
  .id-review-search { grid-column: 1; }
  .id-review-filter-actions { align-items: center; }
}

.email-body-preview {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}

.email-body-preview summary {
  padding: 12px 14px;
  cursor: pointer;
  color: var(--fg);
  font-weight: 700;
}

.email-body-source {
  padding: 0 14px 10px;
  color: var(--muted);
  font-size: 12px;
}

.email-body-content {
  max-height: 360px;
  overflow: auto;
  padding: 14px;
  border-top: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Budget currency controls and dynamic references keep one stable grid. */
.budget-detail-row {
  grid-template-columns:
    minmax(120px, .75fr) minmax(190px, 1.35fr) minmax(160px, 1fr)
    minmax(105px, .55fr) minmax(135px, .72fr) 38px;
  align-items: start;
}

.budget-detail-jenis { grid-column: 1; grid-row: 1; }
.budget-detail-reference { grid-column: 2; grid-row: 1; min-width: 0; }
.budget-detail-nama { grid-column: 3; grid-row: 1; }
.budget-detail-currency { grid-column: 4; grid-row: 1; }
.budget-detail-nominal { grid-column: 5; grid-row: 1; }
.budget-detail-catatan { grid-column: 1 / 6; grid-row: 2; }
.budget-remove { grid-column: 6; grid-row: 1; }

.budget-detail-reference,
.budget-detail-reference > .budget-field,
.budget-reference-placeholder {
  min-height: 88px;
}

.budget-reference-placeholder {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
}

.budget-reference-placeholder > span {
  display: flex;
  align-items: center;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface);
}

@media (max-width: 1280px) {
  .budget-detail-row {
    grid-template-columns:
      minmax(120px, .7fr) minmax(190px, 1.3fr)
      minmax(100px, .55fr) minmax(135px, .75fr) 38px;
  }
  .budget-detail-jenis { grid-column: 1; }
  .budget-detail-reference { grid-column: 2; }
  .budget-detail-currency { grid-column: 3; }
  .budget-detail-nominal { grid-column: 4; }
  .budget-detail-nama { grid-column: 1 / 3; grid-row: 2; }
  .budget-detail-catatan { grid-column: 3 / 5; grid-row: 2; }
  .budget-remove { grid-column: 5; grid-row: 1; }
}

@media (max-width: 720px) {
  .budget-detail-row { grid-template-columns: minmax(0, 1fr) 38px; }
  .budget-detail-jenis,
  .budget-detail-reference,
  .budget-detail-nama,
  .budget-detail-currency,
  .budget-detail-nominal,
  .budget-detail-catatan { grid-column: 1; grid-row: auto; }
  .budget-remove { grid-column: 2; grid-row: 1; }
}

/* Copying a monthly budget is a deliberate preview, not a blind duplicate. */
.budget-copy-source {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.budget-copy-source > strong { font-size: 12px; }
.budget-copy-source > p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.budget-copy-source .btn { width: 100%; white-space: normal; }
.budget-prepare-all-form { display: grid; }
.budget-copy-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--faint);
  font-size:11px;
  text-align: center;
}
.budget-copy-divider::before,
.budget-copy-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.budget-copy-page {
  display: grid;
  gap: 15px;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}

.budget-copy-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.budget-copy-intro h2 { margin: 5px 0; }
.budget-copy-intro p {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.budget-copy-form { padding: 18px; }
.budget-copy-header-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.budget-copy-header-fields .budget-field-wide { grid-column: 1 / -1; }
.budget-copy-header-fields input,
.budget-copy-header-fields textarea,
.budget-copy-edit-field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border:1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--fg);
  padding: 9px 10px;
}
.budget-copy-header-fields input:focus,
.budget-copy-header-fields textarea:focus,
.budget-copy-edit-field input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
.budget-copy-table-wrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 16px;
}
.budget-copy-table { width: 100%; min-width: 1120px; border-collapse: collapse; }
.budget-copy-table th,
.budget-copy-table td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.budget-copy-table th { background: var(--surface-2); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.budget-copy-table th:nth-child(1) { width: 48px; }
.budget-copy-table th:nth-child(2) { width: 28%; }
.budget-copy-table th:nth-child(3) { width: 15%; }
.budget-copy-table th:nth-child(4) { width: 115px; }
.budget-copy-table th:nth-child(5) { width: 140px; }
.budget-copy-table th:nth-child(6) { width: 185px; }
.budget-copy-table th:nth-child(7) { width: 20%; }
.budget-copy-table tbody tr:last-child td { border-bottom: 0; }
.budget-copy-table td { font-size: 12px; }
.budget-copy-table td > small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.budget-copy-service { display: flex; align-items: center; gap: 10px; }
.budget-provider-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.budget-copy-detail { overflow-wrap: anywhere; line-height: 1.4; }
.budget-copy-account { overflow-wrap: anywhere; }
.budget-copy-date input { max-width: 110px; font-variant-numeric: tabular-nums; }
.budget-copy-amount input { text-align: right; font-variant-numeric: tabular-nums; }
.budget-copy-amount small { text-align: right; }
.budget-copy-table .budget-status { display: inline-block; white-space: normal; }
.budget-worksheet-total { background: var(--accent-weak); }
.budget-worksheet-table .budget-worksheet-total th,
.budget-worksheet-table .budget-worksheet-total td { border-top: 2px solid var(--border-strong); padding-top: 14px; padding-bottom: 14px; }
.budget-worksheet-total th small { display: block; margin-top: 4px; font-weight: normal; text-transform: none; }
.budget-worksheet-total .num strong { font-size: 14px; white-space: nowrap; }
.budget-copy-row {
  background: var(--surface);
}
.budget-copy-row:hover {
  background: color-mix(in srgb, var(--accent-weak) 40%, var(--surface));
}
.budget-copy-row.is-disabled { opacity: .58; cursor: not-allowed; }
.budget-copy-row.is-skipped:not(.is-disabled) { opacity: .62; }
.budget-copy-toggle,
.budget-copy-detail,
.budget-copy-value,
.budget-copy-edit-field { display: grid; gap: 4px; min-width: 0; }
.budget-copy-toggle {
  justify-items: start;
  color: var(--muted);
  font-size:11px;
  font-weight: 700;
  text-transform: uppercase;
}
.budget-copy-edit-field label {
  color: var(--muted);
  font-size:11px;
  font-weight: 600;
}
.budget-copy-edit-field small { color: var(--muted); font-size:11px; }
.budget-copy-detail small,
.budget-copy-value small { color: var(--muted); font-size: 11px; }
.budget-copy-value {
  justify-items: end;
  font-family: 'IBM Plex Mono', monospace;
  text-align: right;
}
.budget-copy-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-2);
}
.budget-copy-note p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.budget-copy-form > .budget-actions {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
  .budget-copy-intro { flex-direction: column; }
  .budget-copy-header-fields { grid-template-columns: minmax(0, 1fr); }
  .budget-copy-header-fields .budget-field-wide { grid-column: 1; }
  .budget-copy-value {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }
}

/* ID Tagihan: daftar memakai lebar halaman penuh, sedangkan form dikerjakan
   dalam dialog besar agar isi dan deskripsi tabel tidak terjepit. */
.master-layout-full { display: block; }
.master-intro-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.master-form-dialog {
  width: min(1180px, calc(100vw - 32px));
  max-width: none;
  height: min(900px, calc(100dvh - 32px));
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius:var(--panel-radius);
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}
.master-form-dialog::backdrop {
  background: rgba(3, 8, 18, .72);
  backdrop-filter: blur(3px);
}
.master-form-dialog-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}
.master-form-dialog-header {
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.master-form-dialog-header h2 { margin: 2px 0 5px; }
.master-form-dialog-header p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.master-form-dialog-kicker {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.master-dialog-close {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius:var(--panel-radius);
  background: var(--surface-2);
  color: var(--fg);
  font: inherit;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.master-dialog-close:hover { border-color: var(--accent); color: var(--accent); }
.master-form-dialog-content {
  min-height: 0;
  padding: 20px 22px 28px;
  overflow: auto;
}
/* Form Saving standalone dibatasi 760px; di dalam dialog gunakan seluruh
   ruang konten, termasuk ketika HTMX menampilkan ulang error validasi. */
#saving-dialog-content > .panel {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}
.master-form-dialog-section {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-2);
}
.master-form-dialog-section + .master-form-dialog-section { margin-top: 18px; }
.master-form-expanded {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}
.master-form-expanded .master-field:has(textarea),
.master-form-expanded .master-checkbox,
.master-form-expanded .master-actions,
.master-form-expanded > .form-errors {
  grid-column: 1 / -1;
}
.master-form-expanded .master-actions {
  position: sticky;
  bottom: -1px;
  z-index: 1;
  margin: 5px -18px -18px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 13px 13px;
  background: var(--surface-2);
}
.master-form-dialog .resource-consumer-section { margin-top: 18px; }
.master-form-dialog .resource-consumer-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.master-form-dialog .resource-consumer-form button { align-self: end; }

/* Langganan memakai pola dialog ID Tagihan. Gaya disimpan di bundle utama
   karena isi form dimuat melalui HTMX dan nonce style dari respons parsial
   tidak boleh menjadi syarat agar grid tetap bekerja. */
.recurring-form {
  max-width: 1100px;
  margin-inline: auto;
}
.master-form-dialog .recurring-form {
  max-width: none;
  margin-inline: 0;
}
.recurring-form > .recurring-info {
  margin-bottom: 15px;
}
.recurring-form-layout {
  margin-top: 0;
}
.recurring-field-wide,
.recurring-preview {
  grid-column: 1 / -1;
}
.recurring-info {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--accent-weak);
  font-size: 12px;
  line-height: 1.55;
}
.recurring-preview {
  margin-top: 2px;
  margin-bottom: 0;
}
.recurring-help {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.recurring-error {
  display: block;
  grid-column: 1 / -1;
  color:var(--danger-text);
  font-size: 11px;
}
.recurring-actions {
  flex-wrap: wrap;
}
.recurring-empty {
  padding: 36px 12px;
  color: var(--muted);
  text-align: center;
}
.recurring-form.panel .master-actions {
  position: static;
  margin: 5px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}

@media (max-width: 720px) {
  .master-intro { align-items: stretch; flex-direction: column; }
  .master-intro-actions { justify-content: flex-start; }
  .master-form-dialog {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .master-form-dialog-header,
  .master-form-dialog-content { padding-left: 14px; padding-right: 14px; }
  .master-form-expanded,
  .master-form-dialog .resource-consumer-form { grid-template-columns: 1fr; }
  .master-form-expanded .master-field { grid-column: 1; }
  .recurring-actions .btn { flex: 1; }
}

/* Composer Anggaran memakai hampir seluruh viewport agar rincian keputusan
   tidak terjepit oleh daftar anggaran di sebelah kiri. */
.budget-form-dialog {
  width: calc(100vw - 12px);
  height: calc(100dvh - 12px);
  border-radius:var(--panel-radius);
}
.budget-form-dialog-content {
  padding: 16px 18px 24px;
}
.budget-form-dialog .budget-editor {
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.budget-form-dialog .budget-header-fields {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.budget-form-dialog .budget-field-wide {
  grid-column: 1 / -1;
}
.budget-form-dialog .budget-detail-row {
  grid-template-columns:
    minmax(150px, .7fr)
    minmax(260px, 1.45fr)
    minmax(210px, 1fr)
    minmax(115px, .55fr)
    minmax(165px, .75fr)
    42px;
  gap: 12px;
  padding: 14px;
}
.budget-form-dialog .budget-detail-jenis { grid-column: 1; grid-row: 1; }
.budget-form-dialog .budget-detail-reference { grid-column: 2; grid-row: 1; }
.budget-form-dialog .budget-detail-nama { grid-column: 3; grid-row: 1; }
.budget-form-dialog .budget-detail-currency { grid-column: 4; grid-row: 1; }
.budget-form-dialog .budget-detail-nominal { grid-column: 5; grid-row: 1; }
.budget-form-dialog .budget-detail-catatan { grid-column: 1 / 6; grid-row: 2; }
.budget-form-dialog .budget-remove {
  grid-column: 6;
  grid-row: 1;
  align-self: start;
  width: 42px;
  margin-top: 20px;
}
.budget-dialog-actions {
  position: sticky;
  bottom: -24px;
  z-index: 2;
  margin: 18px 0 -24px !important;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
}
.budget-empty-review,
.budget-draft-summary {
  display: grid;
  justify-items: start;
  gap: 10px;
}
.budget-empty-review h2,
.budget-draft-summary h3 {
  margin: 0;
}
.budget-empty-review p,
.budget-draft-summary p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.budget-readonly-list {
  gap: 10px;
}
.budget-readonly-list > .budget-review-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-2);
}
.budget-review-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.budget-review-main h4,
.budget-review-main p {
  margin: 0;
}
.budget-review-main h4 {
  font-size: 14px;
}
.budget-review-kind {
  width: max-content;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent-weak);
  color: var(--accent);
  font-size:11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.budget-review-main > p,
.budget-review-meta {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.budget-review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.budget-review-purpose {
  padding-top: 5px;
  color: var(--fg) !important;
}
.budget-review-warning {
  color:var(--warn-text) !important;
}
.budget-review-amount {
  display: grid;
  justify-items: end;
  gap: 4px;
  white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace;
}
.budget-review-amount small {
  color: var(--muted);
  font: 11px/1.4 'IBM Plex Sans', system-ui, sans-serif;
}
.budget-decision-summary {
  display: grid;
  gap: 15px;
}
.budget-decision-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.budget-decision-heading h3 {
  margin: 5px 0 0;
}
.budget-decision-heading p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  text-align: right;
}
.budget-decision-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.budget-decision-metrics article {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.budget-decision-metrics span,
.budget-decision-metrics small {
  color: var(--muted);
  font-size:11px;
}
.budget-decision-metrics b {
  font: 700 18px/1.2 'IBM Plex Mono', monospace;
}
.budget-decision-metrics .budget-decision-warning {
  border-color: color-mix(in srgb, #d97706 45%, var(--border));
  background: color-mix(in srgb, #d97706 8%, var(--surface-2));
}
.budget-decision-note {
  padding-top: 13px;
  border-top: 1px solid var(--border);
}
.budget-decision-note p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.6;
}
.budget-change-review {
  display: grid;
  gap: 12px;
  padding-top: 2px;
  border-top: 1px solid var(--border);
}
.budget-change-review .budget-detail-heading {
  margin-top: 0;
  padding-top: 13px;
  border-top: 0;
}
.budget-change-table-wrap,
.budget-worksheet-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius:var(--panel-radius);
}
.budget-change-table,
.budget-worksheet-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
}
/* 1000/1040px muat di area konten laptop 1440px bersama sidebar, sehingga
   kolom Aksi tidak lagi terpotong di tepi kanan dan harus digeser. */
.budget-worksheet-table {
  min-width: 1000px;
  table-layout: fixed;
}
.budget-worksheet-table th:nth-child(1) { width: 18%; }
.budget-worksheet-table th:nth-child(2) { width: 10%; }
.budget-worksheet-table th:nth-child(3) { width: 13%; }
.budget-worksheet-table th:nth-child(4) { width: 15%; }
.budget-worksheet-table th:nth-child(5) { width: 15%; }
.budget-worksheet-table th:nth-child(6) { width: 15%; }
.budget-worksheet-table th:nth-child(7) { width: 14%; }
.budget-change-table th,
.budget-change-table td,
.budget-worksheet-table th,
.budget-worksheet-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.budget-change-table tr:last-child td,
.budget-worksheet-table tr:last-child td { border-bottom: 0; }
.budget-change-table th,
.budget-worksheet-table th {
  background: var(--surface-2);
  color: var(--muted);
  font-size:11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.budget-change-table td,
.budget-worksheet-table td { font-size: 11px; }
.budget-change-table td > small,
.budget-worksheet-table td > small,
.budget-worksheet-table td > strong + small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}
.budget-worksheet-table td > strong {
  display: block;
  min-width: 0;
}
.budget-worksheet-table td:nth-child(n+3) .num {
  white-space: nowrap;
}
.budget-worksheet-table td:last-child .btn {
  display: flex;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.budget-change-status {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size:11px;
  font-weight: 700;
}
.budget-change-baru .budget-change-status { background: #2563eb1a; color: var(--accent); }
.budget-change-berubah .budget-change-status { background: #d977061a; color: var(--warn-text); }
.budget-change-dihapus .budget-change-status { background: #dc26261a; color: var(--danger-text); }
.budget-worksheet { display: grid; gap: 14px; }
.budget-worksheet .budget-section-heading h2 { margin: 5px 0 4px; }
.budget-worksheet-actions { display: flex; justify-content: flex-end; }
.budget-worksheet-pending { background: color-mix(in srgb, var(--surface-2) 65%, transparent); }
.budget-back-link {
  display: inline-flex;
  margin-top: 9px;
}
.budget-period-panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.budget-period-panel .budget-period-filter {
  width: min(100%, 430px);
  flex: 0 0 auto;
  padding: 0;
  border-bottom: 0;
}
.budget-period-panel > p {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
}
.budget-copy-source-wide {
  margin-top: 0;
  padding: 15px;
  border-top: 1px solid var(--border);
}
.budget-copy-source-wide .budget-prepare-all-form {
  justify-self: start;
}
.budget-copy-source-wide .budget-prepare-all-form .btn {
  width: auto;
}
.budget-copy-alternatives {
  color: var(--muted);
  font-size: 11px;
}
.budget-copy-alternatives summary {
  width: fit-content;
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}
.budget-copy-alternatives > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.budget-copy-alternatives .btn { width: auto; }
.budget-worksheet-form { gap: 12px; }
.budget-bulk-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.budget-bulk-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  font-weight: 600;
}
.budget-bulk-toolbar > span {
  color: var(--muted);
  font-size: 11px;
}
.budget-bulk-toolbar .btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.budget-worksheet-selectable { min-width: 1040px; }
.budget-worksheet-selectable th:nth-child(1) { width: 4%; }
.budget-worksheet-selectable th:nth-child(2) { width: 17%; }
.budget-worksheet-selectable th:nth-child(3) { width: 9%; }
.budget-worksheet-selectable th:nth-child(4) { width: 12%; }
.budget-worksheet-selectable th:nth-child(5) { width: 15%; }
.budget-worksheet-selectable th:nth-child(6) { width: 15%; }
.budget-worksheet-selectable th:nth-child(7) { width: 15%; }
.budget-worksheet-selectable th:nth-child(8) { width: 13%; }
.budget-select-column {
  text-align: center !important;
  vertical-align: middle !important;
}
.budget-select-column .app-choice-control { margin: 0; }

@media (max-width: 1024px) {
  .budget-period-panel {
    align-items: stretch;
    flex-direction: column;
  }
  .budget-period-panel .budget-period-filter { width: 100%; }
  .budget-period-panel > p { text-align: left; }
  .budget-bulk-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .budget-bulk-toolbar > span { grid-column: 1; grid-row: 2; }
  .budget-bulk-toolbar .btn { grid-column: 2; grid-row: 1 / 3; }
}

@media (max-width: 640px) {
  .budget-bulk-toolbar { grid-template-columns: minmax(0, 1fr); }
  .budget-bulk-toolbar > span,
  .budget-bulk-toolbar .btn { grid-column: 1; grid-row: auto; }
  .budget-bulk-toolbar .btn { width: 100%; }
}

/* Pada laptop 1280/1366px enam kolom membuat pilihan mata uang terpotong dan
   baris rincian tampak keluar dari panel. Pecah rincian menjadi dua baris
   lebih awal; dialog tetap lebar, tetapi setiap kontrol memperoleh ruang baca. */
@media (max-width: 1280px) {
  .budget-form-dialog .budget-header-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .budget-form-dialog .budget-detail-row {
    grid-template-columns: minmax(130px, .65fr) minmax(220px, 1.3fr) minmax(180px, 1fr) minmax(150px, .7fr) 42px;
  }
  .budget-form-dialog .budget-detail-jenis { grid-column: 1; }
  .budget-form-dialog .budget-detail-reference { grid-column: 2; }
  .budget-form-dialog .budget-detail-nama { grid-column: 3; }
  .budget-form-dialog .budget-detail-currency { grid-column: 4; }
  .budget-form-dialog .budget-detail-nominal { grid-column: 1 / 3; grid-row: 2; }
  .budget-form-dialog .budget-detail-catatan { grid-column: 3 / 5; grid-row: 2; }
  .budget-form-dialog .budget-remove { grid-column: 5; }
}

/* Tablet sempit sudah memerlukan susunan satu kolom. Menunggu hingga 720px
   membuat grid desktop bocor secara horizontal pada viewport 768/800px. */
@media (max-width: 1024px) {
  .budget-decision-heading {
    display: grid;
  }
  .budget-decision-heading p {
    text-align: left;
  }
  .budget-decision-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .budget-form-dialog {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  .budget-form-dialog-content {
    padding: 14px 14px 22px;
  }
  .budget-form-dialog .budget-header-fields,
  .budget-form-dialog .budget-detail-row {
    grid-template-columns: minmax(0, 1fr) 42px;
  }
  .budget-form-dialog .budget-header-fields > *,
  .budget-form-dialog .budget-detail-row .budget-field,
  .budget-form-dialog .budget-detail-reference,
  .budget-form-dialog .budget-detail-nama,
  .budget-form-dialog .budget-detail-currency,
  .budget-form-dialog .budget-detail-nominal,
  .budget-form-dialog .budget-detail-catatan {
    grid-column: 1;
    grid-row: auto;
  }
  .budget-form-dialog .budget-remove {
    grid-column: 2;
    grid-row: 1;
  }
  .budget-dialog-actions {
    bottom: -22px;
    margin: 16px 0 -22px !important;
    padding: 12px 0;
  }
  .budget-readonly-list > .budget-review-item {
    grid-template-columns: minmax(0, 1fr);
  }
  .budget-review-amount {
    justify-items: start;
  }
}
/* Filter kompleks tetap terbuka pada desktop, tetapi diringkas menjadi disclosure
   pada layar kecil agar hasil utama tampil lebih cepat. */
.responsive-filter-panel > summary {
  display: none;
}

/* Langganan berulang: status, aksi ringkas, dan halaman aturan. */
.subscription-status-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.subscription-status-tabs a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:999px;color:var(--muted);text-decoration:none;background:var(--surface)}
.subscription-status-tabs a span{min-width:20px;padding:1px 6px;border-radius:999px;text-align:center;font-size:11px;background:var(--surface-2)}
.subscription-status-tabs a:hover,.subscription-status-tabs a.active{border-color:var(--accent);color:var(--fg);background:var(--accent-weak)}
.subscription-identity{min-width:0;line-height:1.35}.subscription-identity>a{white-space:normal;overflow-wrap:anywhere}
.subscription-next .badge-chip{margin-top:5px}
.row-action-menu{position:relative;display:inline-block}
.row-action-menu>summary{list-style:none;cursor:pointer;padding:6px 10px;border:1px solid var(--border);border-radius:8px;font-weight:600;color:var(--fg)}
.row-action-menu>summary::-webkit-details-marker{display:none}
.row-action-menu>div{position:absolute;z-index:20;right:0;top:calc(100% + 5px);min-width:150px;padding:6px;border:1px solid var(--border);border-radius:var(--panel-radius);background:var(--surface);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.row-action-menu a,.row-action-menu button{display:block;width:100%;padding:8px 10px;border:0;border-radius:7px;background:transparent;color:var(--fg);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.row-action-menu a:hover,.row-action-menu button:hover{background:var(--surface-2)}
.subscription-detail-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}
.subscription-detail-hero h2{margin:4px 0 6px}.subscription-detail-hero p{margin:0;color:var(--muted);max-width:760px}
.subscription-detail-actions,.subscription-secondary-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.subscription-detail-actions form{margin:0}
.subscription-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
.subscription-detail-list{margin:0}.subscription-detail-list>div{display:grid;grid-template-columns:minmax(130px,38%) minmax(0,1fr);gap:14px;padding:10px 0;border-bottom:1px solid var(--border)}
.subscription-detail-list>div:last-child{border-bottom:0}.subscription-detail-list dt{color:var(--muted)}.subscription-detail-list dd{margin:0;overflow-wrap:anywhere}
.subscription-management-panel{margin-bottom:16px}.subscription-audit-list{margin-top:14px;border-top:1px solid var(--border)}
.subscription-audit-list article{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.subscription-audit-list article span{overflow-wrap:anywhere}.subscription-audit-list article small{color:var(--muted);white-space:nowrap}

@media(max-width:720px){
 .subscription-detail-hero{display:block}.subscription-detail-actions{margin-top:14px}
 .subscription-detail-grid{grid-template-columns:1fr}
 .subscription-audit-list article{grid-template-columns:1fr;gap:3px}.subscription-audit-list article small{white-space:normal}
}
@media (max-width: 640px) {
  .responsive-filter-panel {
    padding: 0 !important;
    overflow: hidden !important;
  }
  .responsive-filter-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    cursor: pointer;
    color: var(--fg);
    font-weight: 700;
    list-style-position: inside;
  }
  .responsive-filter-panel > summary small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-align: right;
  }
  .responsive-filter-panel[open] > summary {
    border-bottom: 1px solid var(--border);
  }
  .responsive-filter-panel > .responsive-filter-content {
    margin: 0;
    padding: 14px;
  }
  .responsive-filter-panel > .report-filter-result {
    margin: 0;
    padding: 0 14px 14px;
  }

  .id-billing-table-wrap {
    overflow: visible;
  }
  .id-billing-table {
    display: block;
    min-width: 0;
  }
  .id-billing-table thead {
    display: none;
  }
  .id-billing-table tbody {
    display: grid;
    gap: 12px;
  }
  .id-billing-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 11px 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
  }
  .id-billing-table td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .id-billing-table .id-billing-main {
    grid-column: 1 / -1;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .id-billing-table .id-billing-purpose {
    grid-column: 1;
  }
  .id-billing-table .id-billing-history {
    grid-column: 2;
    text-align: right;
  }
  .id-billing-table .id-billing-action {
    grid-column: 1 / -1;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .id-billing-table .id-billing-action:empty {
    display: none;
  }
  .id-billing-table .id-billing-action .btn {
    width: 100%;
    text-align: center;
  }
  .id-billing-table .empty-state {
    grid-column: 1 / -1;
    text-align: center;
  }
  .filters.report-filters {
    grid-template-columns: minmax(0, 1fr);
  }
  .report-period-mode,
  .report-filter-actions {
    grid-column: 1;
  }
  .report-period-mode {
    align-items: flex-start;
    flex-direction: column;
  }
  .report-period-mode legend {
    float: none;
    margin: 0 0 7px;
  }
  .report-filter-actions,
  .report-filter-actions .btn {
    width: 100%;
  }
  .report-filter-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .report-readiness {
    flex-direction: column;
    gap: 6px;
  }
  .report-readiness small {
    white-space: normal;
  }
  .report-reconciliation-flow {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .filters.report-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .report-reconciliation-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Composer anggaran: baris ringkas, bantuan kontekstual, dan total langsung. */
.budget-detail-row[hidden] {
  display: none !important;
}
.budget-detail-list {
  gap: 8px;
}
.budget-detail-row {
  gap: 8px;
  padding: 8px;
}
.budget-detail-reference,
.budget-detail-reference > .budget-field,
.budget-reference-placeholder {
  min-height: 0;
}
.budget-detail-summary {
  display: grid;
  min-width: 190px;
  gap: 2px;
  justify-items: end;
}
.budget-detail-summary span,
.budget-detail-summary small {
  color: var(--muted);
  font-size: 11px;
}
.budget-detail-summary strong {
  color: var(--fg);
  font: 700 16px/1.3 'IBM Plex Mono', monospace;
}
.budget-detail-summary.is-warning strong,
.budget-detail-summary.is-warning small {
  color: var(--warn-text);
}
.budget-label-with-tip {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 16px;
}
.budget-label-with-tip label,
.budget-label-with-tip > span {
  color: var(--muted);
  font-size: 11px;
}
.budget-help-tip {
  position: relative;
  display: inline-grid;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin-left: 3px;
  padding: 0;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--accent);
  cursor: help;
  font-size:11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.budget-help-tip::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  left: 0;
  display: none;
  width: max-content;
  max-width: min(300px, 70vw);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
  color: var(--fg);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
}
.budget-help-tip:hover::after,
.budget-help-tip:focus-visible::after {
  display: block;
}

/* Badge status harus tetap berada di kolomnya pada tabel anggaran. */
.budget-worksheet-table .budget-status {
  max-width: 100%;
  box-sizing: border-box;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}
.budget-worksheet-table th:nth-child(1) { width: 17%; }
.budget-worksheet-table th:nth-child(2) { width: 13%; }
.budget-worksheet-table th:nth-child(3) { width: 12%; }
.budget-worksheet-table th:nth-child(4) { width: 15%; }
.budget-worksheet-table th:nth-child(5) { width: 15%; }
.budget-worksheet-table th:nth-child(6) { width: 15%; }
.budget-worksheet-table th:nth-child(7) { width: 13%; }
.budget-worksheet-selectable th:nth-child(1) { width: 4%; }
.budget-worksheet-selectable th:nth-child(2) { width: 16%; }
.budget-worksheet-selectable th:nth-child(3) { width: 13%; }
.budget-worksheet-selectable th:nth-child(4) { width: 11%; }
.budget-worksheet-selectable th:nth-child(5) { width: 15%; }
.budget-worksheet-selectable th:nth-child(6) { width: 15%; }
.budget-worksheet-selectable th:nth-child(7) { width: 14%; }
.budget-worksheet-selectable th:nth-child(8) { width: 12%; }

@media (max-width: 1024px) {
  .budget-detail-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .budget-detail-summary {
    min-width: 0;
    justify-items: start;
  }
}

/* Pusat notifikasi: status baca eksplisit dan panel memenuhi area kerja. */
.notification-preview-form {
  margin: 0;
}
.notification-preview-form .notification-preview {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.notification-preview-form .notification-preview:not(.is-unread) .notification-dot {
  visibility: hidden;
}
.notification-page {
  display: grid;
  width: 100%;
  gap: 16px;
}
.notification-page .notification-cost-panel,
.notification-list-panel,
.notification-overview {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.notification-overview {
  display: grid;
  gap: 16px;
}
.notification-overview-head,
.notification-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.notification-overview-head h2,
.notification-list-head h2 {
  margin: 4px 0;
}
.notification-overview-head p,
.notification-list-head p {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}
.notification-overview-head form {
  flex: none;
}
.notification-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.notification-summary-grid article {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.notification-summary-grid span,
.notification-summary-grid small {
  color: var(--muted);
  font-size: 11px;
}
.notification-summary-grid strong {
  font: 700 22px/1.2 'IBM Plex Mono', monospace;
}
.notification-filters {
  display: flex;
  gap: 8px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}
.notification-filters .is-active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: var(--accent-weak);
  color: var(--accent);
}
.notification-list-panel {
  padding: 0;
  overflow: hidden;
}
.notification-list-head {
  padding: 17px 18px;
  border-bottom: 1px solid var(--border);
}
.notification-list {
  display: grid;
}
.notification-list-form {
  margin: 0;
}
.notification-list-row {
  display: grid;
  width: 100%;
  grid-template-columns: 10px minmax(0, 1fr) minmax(120px, auto);
  gap: 12px;
  align-items: start;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.notification-list-form:last-child .notification-list-row {
  border-bottom: 0;
}
.notification-list-row:hover,
.notification-list-row:focus-visible {
  outline: 0;
  background: var(--surface-2);
}
.notification-list-row:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.notification-list-row.is-unread {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.notification-list-indicator {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: transparent;
}
.notification-list-row.is-unread .notification-list-indicator {
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 13%, transparent);
}
.notification-list-content {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.notification-list-title {
  font-size: 13px;
  font-weight: 700;
}
.notification-list-message {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.notification-list-meta {
  display: flex;
  gap: 5px 12px;
  flex-wrap: wrap;
  margin-top: 3px;
  color: var(--faint);
  font-size: 11px;
}
.notification-list-meta > span:not(:first-child)::before,
.notification-list-meta time::before {
  content: '\00b7';
  margin-right: 12px;
}
.notification-list-action {
  display: grid;
  justify-items: end;
  gap: 5px;
  white-space: nowrap;
}
.notification-list-action b {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size:11px;
}
.notification-list-row.is-unread .notification-list-action b {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  color: var(--danger-text);
}
.notification-list-action small {
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}
.notification-list-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 42px 18px;
  color: var(--muted);
  text-align: center;
}
.notification-list-empty strong {
  color: var(--fg);
}
.notification-list-empty span {
  font-size: 11.5px;
}

@media (max-width: 720px) {
  .notification-overview-head,
  .notification-list-head {
    align-items: stretch;
    flex-direction: column;
  }
  .notification-overview-head .btn,
  .notification-overview-head form {
    width: 100%;
  }
  /* Tiga ubin ringkasan dua kolom; ubin ganjil terakhir selebar baris. */
  .notification-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .notification-summary-grid article:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .notification-summary-grid strong {
    font-size: 20px;
  }
  .notification-filters,
  .notification-filters .btn {
    width: 100%;
  }
  .notification-filters .btn {
    text-align: center;
  }
  .notification-list-row {
    grid-template-columns: 10px minmax(0, 1fr);
    padding: 13px 14px;
  }
  .notification-list-action {
    grid-column: 2;
    justify-items: start;
  }
}

/* Pencarian dropdown ringan untuk seluruh workspace SERVER. Select native
   tetap menyimpan nilai form; panel dipindahkan ke body agar tidak terpotong
   card, tabel, modal, atau container yang memakai overflow. */
.app-search-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.app-search-select[hidden],
.app-search-select-panel[hidden] {
  display: none !important;
}
/* HTMX settle dapat mengembalikan class dari HTML server setelah enhance().
   Penanda data tetap ada; batasi pada wrapper agar select tanpa JS tetap tampil. */
.app-search-select > select[data-search-select-ready="true"],
.app-search-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.app-search-select-trigger {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 38px 9px 12px;
  overflow: hidden;
  border:1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.app-search-select-trigger.has-value {
  color: var(--fg);
}
.app-search-select-trigger:hover:not(:disabled) {
  border-color: var(--accent);
}
.app-search-select-trigger:focus-visible,
.app-search-select[aria-expanded="true"] .app-search-select-trigger,
.app-search-select.is-invalid .app-search-select-trigger {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  outline-offset: 1px;
}
.app-search-select.is-invalid .app-search-select-trigger {
  border-color: var(--danger);
}
.app-search-select-trigger:disabled {
  cursor: not-allowed;
  opacity: .58;
}
.app-search-select-value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-search-select-indicator {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.app-search-select[aria-expanded="true"] .app-search-select-indicator {
  transform: translateY(-25%) rotate(225deg);
}
.app-search-select-panel {
  position: fixed;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  overflow: hidden;
  border:1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .22);
}
.app-search-select-search {
  flex: none;
  padding: 7px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.app-search-select-input {
  width: 100%;
  min-width: 0;
}
.app-search-select-list {
  display: grid;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px;
}
.app-search-select-option {
  display: grid;
  width: 100%;
  gap: 2px;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.app-search-select-option small {
  color: var(--muted);
  font-size:11px;
}
.app-search-select-option:hover:not(:disabled),
.app-search-select-option.active,
.app-search-select-option:focus-visible {
  background: var(--surface-2);
  outline: none;
}
.app-search-select-option[aria-selected="true"] {
  background: var(--accent-weak);
  color: var(--accent);
  font-weight: 700;
}
.app-search-select-option:disabled {
  cursor: not-allowed;
  opacity: .5;
}
.app-search-select-status {
  flex: none;
  margin: 0;
  padding: 6px 10px 8px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size:11px;
}
.app-search-select-empty {
  padding: 20px 10px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

@media (max-width: 720px) {
  .app-search-select-panel {
    max-width: calc(100vw - 16px);
  }
  .inbox-category-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inbox-selection-toolbar{grid-template-columns:minmax(0,1fr) auto}
  .inbox-selection-toolbar .muted{grid-column:2}
  .inbox-selection-toolbar .btn{width:100%}
}

@media (max-width: 640px) {
  .inbox-category-summary{grid-template-columns:minmax(0,1fr)}
  .inbox-queue-heading{align-items:flex-start}
}

/* Kartu KPI di ponsel. Satu kolom penuh membuat empat sampai tujuh kartu
   memakan dua layar sebelum isi utama halaman terlihat; dua kolom ringkas
   mengikuti pola yang sudah dipakai kartu Infrastruktur. Ukuran angka ikut
   lebar kartu (cqw) supaya nominal panjang seperti "Rp 422.860.957" tetap
   muat tanpa terpotong. */
@media (max-width:640px){
 .cards,.procurement-summary,.infra-reconcile-summary,.saving-summary-cards,.id-review-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
 .cards>.card,.procurement-summary>.card,.id-review-summary>article{padding:13px;container-type:inline-size}
 .card .lbl,.procurement-summary .card>span,.id-review-summary>article>span{font-size:11px}
 .card .big,.cards.infra-summary .big,.cards.infra-cost-summary .big,.procurement-summary .card>b,.id-review-summary strong{margin-top:5px;font-size:clamp(14px,10cqw,19px);overflow-wrap:anywhere}
 .card .meta,.cards.infra-summary .meta,.cards.infra-cost-summary .meta,.procurement-summary .card>small,.id-review-summary small{margin-top:4px;font-size:11px;line-height:1.35}
 .cards>.month-summary-card{grid-column:1/-1}
}

/* Penanda buka/tutup yang seragam. Beberapa <details> memakai list-style
   none tanpa pengganti sehingga tidak terlihat bisa dibuka, sedangkan yang
   lain memakai segitiga bawaan browser yang berbeda dari chevron di tempat
   lain. */
.infra-bulk-panel>summary,.responsive-filter-panel>summary{list-style:none;justify-content:flex-start}
.infra-bulk-panel>summary::-webkit-details-marker,.responsive-filter-panel>summary::-webkit-details-marker{display:none}
.infra-bulk-panel>summary>:nth-child(2),.responsive-filter-panel>summary>:nth-child(2){margin-left:auto}
.infra-bulk-panel>summary::after,.responsive-filter-panel>summary::after{
 content:'';flex:none;width:1em;height:1em;margin-left:10px;background:currentColor;color:var(--muted);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E") center/contain no-repeat;
 transition:transform .15s ease
}
.infra-bulk-panel[open]>summary::after,.responsive-filter-panel[open]>summary::after{transform:rotate(180deg)}
@media (max-width:640px){
 /* Di ponsel judul dan keterangan panel pemetaan massal bertumpuk; chevron
    tetap di kanan, sejajar tengah keduanya. */
 .infra-bulk-panel>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px}
 .infra-bulk-panel>summary>small{margin-left:0}
 .infra-bulk-panel>summary::after{grid-column:2;grid-row:1/3;margin-left:0}
}

/* Tautan halaman tanpa kelas tombol tampil sebagai teks biasa di ID Tagihan,
   sedangkan halaman lain memakai .btn-ghost. */
.pagination>a:not(.btn){display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:7px 12px;border:1px solid var(--border);border-radius:var(--control-radius);background:var(--surface);color:var(--fg);font-size:12px;font-weight:600}
.pagination>a:not(.btn):hover,.pagination>a:not(.btn):focus-visible{border-color:var(--accent);color:var(--accent)}
.pagination>span{color:var(--muted);font-size:12px}

/* Baris pemetaan alias di Rekonsiliasi: pilihan resource dan tombolnya
   sejajar dalam satu baris; tombol per baris memakai gaya ghost agar puluhan
   tombol biru tidak bersaing dengan aksi utama halaman. */
.infra-relation-with-action>div:last-child{display:grid;gap:8px;justify-items:end}
.infra-relation-with-action .filters{margin:0;flex-wrap:nowrap;align-items:center;gap:8px}
.infra-relation-with-action .filters .app-control{width:min(340px,100%);min-width:0}
.infra-relation-with-action .filters .btn{white-space:nowrap}
.infra-relation-with-action .btn-ghost{color:var(--accent-text)}
.infra-relation-with-action .infra-allocation-link{margin-top:0!important}
@media (max-width:640px){
 .infra-relation-with-action>div:last-child{justify-items:stretch}
 .infra-relation-with-action .filters{flex-wrap:wrap}
 .infra-relation-with-action .filters .app-control,.infra-relation-with-action .filters .btn{width:100%}
 /* Baris tagihan di Ringkasan: lima potongan (badge, nama, chip, nominal,
    tautan) dalam satu baris flex menyisakan ~60px untuk nama layanan sehingga
    terpotong per suku kata. Di ponsel disusun bertingkat di kanan badge. */
 .dashboard-action-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 10px;align-items:start}
 .dashboard-action-row>.mono-badge{grid-row:1}
 .dashboard-action-row>.dashboard-action-copy,.dashboard-action-row>.badge-chip,.dashboard-action-row>.csp-s-bec0ecd23b{grid-column:2}
 .dashboard-action-row>.badge-chip{justify-self:start;white-space:normal}
 .dashboard-action-row>.csp-s-bec0ecd23b{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;text-align:left}
}
:root .information-layout { display: grid; gap: 16px; max-width: 1200px; margin-inline: auto; }
.information-panel { padding: 22px; margin-bottom: 16px; overflow-wrap: anywhere; }
.information-panel h2 { font-size: 18px; margin: 0 0 12px; }
.information-panel h3 { font-size: 16px; margin-top: 20px; }
.information-panel p { line-height: 1.6; }
.information-field { display: grid; gap: 8px; margin-bottom: 18px; }
.information-check { display: flex; align-items: flex-start; gap: 12px; margin-block: 16px; line-height: 1.5; }
.information-check input { flex: 0 0 auto; margin-top: 4px; width: 18px; height: 18px; }
.information-rule { border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin: 20px 0; min-width: 0; }
.information-rule legend { padding-inline: 8px; }
.information-actions, .information-inbox-action { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.information-inbox-action { margin-block: 16px; }
.information-summary { display: grid; grid-template-columns: minmax(130px, .35fr) minmax(0, 1fr); gap: 12px; }
.information-summary dd { margin: 0; overflow-wrap: anywhere; }
.information-panel .errorlist { color: var(--danger); }
@media (max-width: 560px) {
  .information-panel { padding: 16px; }
  .information-summary { grid-template-columns: 1fr; gap: 6px; }
  .information-summary dd { margin-bottom: 12px; }
}