/* Manajemen Material GKS - tampilan web
   Sistem desain: navy #0B2A5B (utama), biru #1E5AA8, amber untuk "keluar", sudut 14px, bayangan tipis. */
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 400; src: url('../fonts/PlusJakartaSans_400Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 500; src: url('../fonts/PlusJakartaSans_500Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 600; src: url('../fonts/PlusJakartaSans_600SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 700; src: url('../fonts/PlusJakartaSans_700Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 800; src: url('../fonts/PlusJakartaSans_800ExtraBold.ttf') format('truetype'); font-display: swap; }

:root {
  --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-font-size: .94rem;
  --bs-body-line-height: 1.5;
  --bs-body-bg: #F4F6FB;
  --bs-body-color: #10203A;
  --bs-primary: #0B2A5B;
  --bs-primary-rgb: 11, 42, 91;
  --bs-link-color: #1E5AA8;
  --bs-link-hover-color: #0B2A5B;
  --bs-border-color: #E3E9F3;
  --gks-navy: #0B2A5B;
  --gks-blue: #1E5AA8;
  --gks-sky: #3D8BE0;
  --gks-tint: #E9F0FB;
  --gks-amber: #D97706;
  --gks-amber-tint: #FFF2DD;
  --gks-green: #1E8E5A;
  --gks-green-tint: #E3F6EC;
  --gks-red: #C62828;
  --gks-red-tint: #FDECEC;
  --gks-text-2: #3B4A63;
  --gks-muted: #6B7A94;
  --gks-line: #E3E9F3;
  --gks-radius: 14px;
  --gks-shadow: 0 1px 2px rgba(16,32,58,.04), 0 6px 20px rgba(16,32,58,.05);
  --sidebar-w: 252px;
}
html { scroll-behavior: smooth; }
body { font-family: var(--bs-body-font-family); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6,.fw-bold { font-weight: 700; }
a { text-decoration: none; }
:focus-visible { outline: 3px solid rgba(30,90,168,.35); outline-offset: 2px; border-radius: 8px; }
.muted { color: var(--gks-muted); }
.money { font-weight: 700; color: var(--gks-blue); white-space: nowrap; }
.stock-neg { color: var(--gks-red); font-weight: 700; }
.wrap-text { white-space: normal; overflow-wrap: anywhere; }

/* ---------- Tombol ---------- */
.btn { border-radius: 10px; font-weight: 600; padding: .55rem 1rem; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn-primary { --bs-btn-bg: #0B2A5B; --bs-btn-border-color: #0B2A5B; --bs-btn-hover-bg: #143C7E; --bs-btn-hover-border-color: #143C7E; --bs-btn-active-bg: #0B2A5B; --bs-btn-active-border-color: #0B2A5B; --bs-btn-disabled-bg: #0B2A5B; --bs-btn-disabled-border-color: #0B2A5B; box-shadow: 0 1px 2px rgba(11,42,91,.25); }
.btn-outline-primary { --bs-btn-color: #0B2A5B; --bs-btn-border-color: #B9C8E3; --bs-btn-hover-bg: #E9F0FB; --bs-btn-hover-color: #0B2A5B; --bs-btn-hover-border-color: #0B2A5B; --bs-btn-active-bg: #E9F0FB; --bs-btn-active-color: #0B2A5B; --bs-btn-active-border-color: #0B2A5B; }
.btn-outline-secondary { --bs-btn-color: #3B4A63; --bs-btn-border-color: #D3DCEC; --bs-btn-hover-bg: #F1F5FB; --bs-btn-hover-color: #0B2A5B; --bs-btn-hover-border-color: #B9C8E3; }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: #E3E9F3; --bs-btn-hover-bg: #F1F5FB; --bs-btn-hover-border-color: #D3DCEC; }
.btn-link-danger { color: var(--gks-red); background: none; border: 0; padding: .4rem .2rem; font-weight: 600; }
.btn-link-danger:hover { text-decoration: underline; color: #9B1C1C; }
.btn-icon { width: 30px; height: 30px; min-height: 0 !important; min-width: 0 !important; padding: 0 !important; font-size: .8rem; line-height: 1; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; opacity: .9; }
.btn-icon + .btn-icon, .btn-icon + form, form + .btn-icon { margin-left: 1.1rem; }
td.actions { white-space: nowrap; }
.btn.is-busy { pointer-events: none; opacity: .8; }

/* ---------- Form ---------- */
.form-label { font-weight: 600; font-size: .83rem; color: var(--gks-text-2); margin-bottom: .35rem; }
.form-label .req { color: var(--gks-red); }
.form-control, .form-select { border-radius: 10px; padding: .62rem .85rem; border-color: #D3DCEC; background-color: #fff; }
.form-control::placeholder { color: #9AA7BD; }
.form-control:focus, .form-select:focus { border-color: var(--gks-blue); box-shadow: 0 0 0 .22rem rgba(30,90,168,.14); }
.input-group-text { background: #F1F5FB; border-color: #D3DCEC; color: var(--gks-text-2); border-radius: 0 10px 10px 0; }
.form-hint { font-size: .78rem; color: var(--gks-muted); margin-top: .3rem; }
.search-box { position: relative; }
.search-box > i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--gks-muted); pointer-events: none; }
.search-box .form-control { padding-left: 2.4rem; }

/* ---------- Kartu & tabel ---------- */
.card { border: 1px solid var(--gks-line); border-radius: var(--gks-radius); box-shadow: var(--gks-shadow); background: #fff; }
.card-title { font-weight: 800; color: var(--gks-navy); font-size: 1.02rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.card-head .card-title { margin: 0; }
.link-more { font-size: .84rem; font-weight: 700; color: var(--gks-blue); white-space: nowrap; }
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .8rem 1rem; border-bottom-color: var(--gks-line); }
.table thead th { background: #F6F8FC; color: var(--gks-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; border-bottom: 1px solid var(--gks-line); white-space: nowrap; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #F6F9FE; }
.table-responsive { border-radius: var(--gks-radius); }
.table tfoot th { background: #F6F8FC; border-top: 1px solid var(--gks-line); }
.row-link { cursor: pointer; }
.chev { color: #B4C0D6; }

/* ---------- Lencana & segmen ---------- */
.badge { font-weight: 700; letter-spacing: .01em; border-radius: 8px; padding: .38em .7em; }
.badge-in { background: var(--gks-tint); color: var(--gks-blue); }
.badge-out { background: var(--gks-amber-tint); color: var(--gks-amber); }
.badge-proj { background: var(--gks-navy); color: #fff; }
.seg { display: inline-flex; background: #E4EAF5; border-radius: 12px; padding: 4px; gap: 2px; }
.seg a, .seg button { border: 0; background: transparent; padding: .45rem .95rem; border-radius: 9px; font-weight: 700; color: var(--gks-text-2); font-size: .85rem; }
.seg .on { background: #fff; color: var(--gks-navy); box-shadow: 0 1px 3px rgba(16,32,58,.12); }
.chip { display: inline-flex; align-items: center; gap: .35rem; background: #fff; border: 1px solid var(--gks-line); border-radius: 999px; padding: .3rem .85rem; font-weight: 600; font-size: .82rem; color: var(--gks-text-2); }
.chip.on { background: var(--gks-navy); border-color: var(--gks-navy); color: #fff; }

/* ---------- Tata letak ---------- */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: linear-gradient(180deg, #0B2A5B 0%, #0A2450 100%); color: #fff; display: flex; flex-direction: column; z-index: 1030; transition: transform .2s; }
.sidebar .brand { display: flex; align-items: center; gap: .75rem; padding: 1.15rem 1.25rem 1rem; }
.sidebar .brand img { width: 42px; height: 42px; border-radius: 11px; background: #fff; padding: 2px; }
.sidebar .brand span { font-weight: 800; line-height: 1.15; font-size: .95rem; letter-spacing: .01em; }
.sidebar nav { flex: 1; overflow-y: auto; padding: .5rem .8rem; }
.sidebar .nav-link { color: #B9CBE8; display: flex; align-items: center; gap: .8rem; padding: .62rem .9rem; border-radius: 10px; font-weight: 600; font-size: .9rem; margin-bottom: 2px; }
.sidebar .nav-link i { font-size: 1.1rem; width: 1.2rem; text-align: center; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar .nav-link.active { background: #fff; color: var(--gks-navy); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.sidebar .nav-label { text-transform: uppercase; font-size: .66rem; letter-spacing: .1em; color: #7F98C4; padding: 1rem .9rem .35rem; font-weight: 700; }
.sidebar .user-box { padding: .9rem 1.1rem 1.1rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.content { margin-left: var(--sidebar-w); min-height: 100vh; }
.topbar { display: none; }
.main { padding: 1.6rem 2rem 3rem; max-width: 1240px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.55rem; font-weight: 800; color: var(--gks-navy); margin: 0; letter-spacing: -.01em; }
.page-head .sub { color: var(--gks-muted); margin: .15rem 0 0; font-size: .9rem; }
.page-head .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.page-head .btn-light { border-color: #D3DCEC; }
.tabbar, .sheet-wrap { display: none; }
.sticky-actions { display: flex; gap: .5rem; }

/* ---------- Notifikasi (toast) ---------- */
.toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .6rem; width: min(420px, calc(100vw - 2rem)); pointer-events: none; }
.gks-toast { pointer-events: auto; background: #fff; border: 1px solid var(--gks-line); border-left: 5px solid var(--gks-green); border-radius: 12px; box-shadow: 0 12px 32px rgba(16,32,58,.18); padding: .8rem .9rem; display: flex; gap: .7rem; align-items: flex-start; animation: toastIn .25s ease-out; }
.gks-toast.err { border-left-color: var(--gks-red); }
.gks-toast i.ic { font-size: 1.25rem; color: var(--gks-green); line-height: 1.2; }
.gks-toast.err i.ic { color: var(--gks-red); }
.gks-toast .msg { flex: 1; font-weight: 600; font-size: .9rem; }
.gks-toast button { border: 0; background: none; color: var(--gks-muted); font-size: 1.2rem; line-height: 1; padding: 0 .2rem; }
.gks-toast.hide { opacity: 0; transform: translateY(-8px); transition: all .25s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---------- Beranda ---------- */
.hello { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.hello h2 { font-size: 1.3rem; font-weight: 800; color: var(--gks-navy); margin: 0; }
.hello .date { color: var(--gks-muted); font-weight: 600; font-size: .88rem; }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-bottom: 1.1rem; }
.quick a { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid transparent; font-weight: 800; color: var(--gks-navy); box-shadow: var(--gks-shadow); transition: transform .12s, box-shadow .12s; }
.quick a:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,32,58,.12); }
.quick a .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; flex: none; }
.quick a small { display: block; font-weight: 500; color: var(--gks-muted); font-size: .78rem; margin-top: .1rem; }
.quick .q-in { background: #fff; border-color: #CFE0F7; } .quick .q-in .ico { background: var(--gks-tint); color: var(--gks-blue); }
.quick .q-out { background: #fff; border-color: #F6DDB4; } .quick .q-out .ico { background: var(--gks-amber-tint); color: var(--gks-amber); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; margin-bottom: 1.1rem; }
.stat-card { padding: 1rem 1.1rem; flex-direction: row; align-items: center; gap: .85rem; }
.stat-card .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; flex: none; }
.ico-blue { background: var(--gks-tint); color: var(--gks-blue); } .ico-amber { background: var(--gks-amber-tint); color: var(--gks-amber); }
.ico-green { background: var(--gks-green-tint); color: var(--gks-green); } .ico-red { background: var(--gks-red-tint); color: var(--gks-red); }
.stat-card .n { font-size: 1.5rem; font-weight: 800; color: var(--gks-navy); line-height: 1.1; }
.stat-card .l { color: var(--gks-muted); font-size: .78rem; font-weight: 600; }
.activity { list-style: none; margin: 0; padding: 0; }
.activity li a { display: flex; gap: .8rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--gks-line); color: inherit; }
.activity li:last-child a { border-bottom: 0; padding-bottom: 0; }
.activity .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.activity .t { font-weight: 700; line-height: 1.25; }
.activity .s { color: var(--gks-muted); font-size: .82rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.activity .r { margin-left: auto; text-align: right; font-size: .78rem; color: var(--gks-muted); white-space: nowrap; flex: none; }
.empty-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .32rem .8rem; font-weight: 700; font-size: .82rem; background: var(--gks-red-tint); color: var(--gks-red); max-width: 100%; }

/* ---------- Daftar transaksi (kartu di HP) ---------- */
.tx-list { display: none; }
.tx-card { display: block; background: #fff; border: 1px solid var(--gks-line); border-radius: 14px; padding: .9rem 1rem; margin-bottom: .65rem; color: inherit; box-shadow: var(--gks-shadow); }
.tx-card:active { background: #F6F9FE; }
.tx-card .top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .45rem; }
.tx-card .no { font-weight: 800; color: var(--gks-navy); }
.tx-card .date { color: var(--gks-muted); font-size: .8rem; font-weight: 600; }
.tx-card .who { font-weight: 700; line-height: 1.3; }
.tx-card .sum { color: var(--gks-text-2); font-size: .86rem; margin-top: .2rem; }
.tx-card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; padding-top: .55rem; border-top: 1px dashed var(--gks-line); font-size: .8rem; color: var(--gks-muted); }

/* ---------- Kondisi kosong ---------- */
.empty-state { text-align: center; padding: 2.6rem 1rem; }
.empty-state .ico { width: 64px; height: 64px; border-radius: 20px; background: var(--gks-tint); color: var(--gks-blue); display: grid; place-items: center; font-size: 1.9rem; margin: 0 auto 1rem; }
.empty-state h6 { font-weight: 800; color: var(--gks-navy); margin-bottom: .25rem; }
.empty-state p { color: var(--gks-muted); margin-bottom: 1rem; }

/* ---------- Detail transaksi ---------- */
.detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.detail-head .grow { flex: 1; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: .55rem 1rem; margin: 0; }
.kv dt { color: var(--gks-muted); font-weight: 500; }
.kv dd { margin: 0; font-weight: 700; }


/* ---------- Kolom ketik + saran ---------- */
.combo { position: relative; }
.combo-input { padding-right: 2.4rem; }
.combo-clear { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--gks-muted); font-size: 1.4rem; line-height: 1; padding: .2rem .55rem; display: none; }
.combo.has-value .combo-clear { display: block; }
.combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1055; background: #fff; border: 1px solid var(--gks-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(11,42,91,.2); max-height: min(46vh, 320px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.combo-item { padding: .7rem .9rem; border-bottom: 1px solid #EEF2F8; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; cursor: pointer; }
.combo-item:last-child { border-bottom: 0; }
.combo-item.active, .combo-item:hover { background: #E9F0FB; }
.combo-empty { padding: .8rem .9rem; color: var(--gks-muted); font-size: .88rem; }

/* ---------- Pemilih rentang tanggal ---------- */
.flatpickr-calendar { font-family: var(--bs-body-font-family); border-radius: 14px; box-shadow: 0 12px 34px rgba(11,42,91,.22); z-index: 1060 !important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: #0B2A5B; border-color: #0B2A5B; color: #fff; }
.flatpickr-day.inRange { background: #E9F0FB; border-color: #E9F0FB; box-shadow: -5px 0 0 #E9F0FB, 5px 0 0 #E9F0FB; }
.flatpickr-day.today { border-color: #1E5AA8; }
.flatpickr-months .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday { color: #0B2A5B; fill: #0B2A5B; font-weight: 700; }
.range-field input.form-control[readonly] { background-color: #fff; cursor: pointer; }
.col-range { flex: 1 1 280px; max-width: 360px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; margin-bottom: 1rem; }
.filter-bar > * { min-width: 0; }
.filter-bar .f-grow { flex: 1 1 220px; max-width: 360px; }

/* ---------- Ramah HP ---------- */
@media (max-width: 991.98px) {
  html { -webkit-text-size-adjust: 100%; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.no-bottom-nav { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .page-head { display: none; }
  .topbar { display: flex; align-items: center; gap: .65rem; background: var(--gks-navy); color: #fff; padding: .7rem 1rem; padding-top: calc(.7rem + env(safe-area-inset-top)); position: sticky; top: 0; z-index: 1020; }
  .topbar h1 { font-size: 1.02rem; margin: 0; font-weight: 700; flex: 1; }
  .topbar .btn-light { padding: .4rem .7rem; }
  .topbar .btn-primary { --bs-btn-bg: #fff; --bs-btn-color: #0B2A5B; --bs-btn-border-color: #fff; --bs-btn-hover-bg: #E9F0FB; --bs-btn-hover-color: #0B2A5B; --bs-btn-hover-border-color: #E9F0FB; --bs-btn-active-bg: #E9F0FB; --bs-btn-active-color: #0B2A5B; box-shadow: none; padding: .4rem .75rem; }
  .main { padding: 1rem .9rem 1.5rem; }
  .content { margin-left: 0; }
  .sidebar { display: none; }
  body.no-bottom-nav .tabbar { display: none; }
  body.no-bottom-nav .sticky-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; background: #fff; border-top: 1px solid var(--gks-line); padding: .65rem .9rem calc(.65rem + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(11,42,91,.08); }
  body.no-bottom-nav .sticky-actions .btn-primary { flex: 1; }
  .toast-stack { top: calc(.6rem + env(safe-area-inset-top)); right: .6rem; left: .6rem; width: auto; }
  .stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767.98px) {
  body { font-size: 1rem; }
  .btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
  .btn-sm { min-height: 40px; min-width: 40px; }
  .form-control, .form-select { min-height: 46px; font-size: 16px; }
  .card-body { padding: 1rem; }
  .quick a { padding: .85rem .9rem; gap: .7rem; }
  .quick a .ico { width: 42px; height: 42px; font-size: 1.3rem; }
  .stat-card { padding: .8rem .9rem; gap: .7rem; }
  .stat-card .n { font-size: 1.3rem; }
  .filter-bar > * { flex: 1 1 100%; max-width: none !important; }
  .filter-bar > .btn { width: 100%; }
  .seg { display: flex; width: 100%; }
  .seg a, .seg button { flex: 1; text-align: center; padding: .6rem .4rem; }
  .col-range { flex: 1 1 100%; max-width: none; }
  form .col-auto { flex: 1 0 46%; width: auto; }
  form .col-auto .btn { width: 100%; }
  .kv { grid-template-columns: 96px 1fr; }
  .detail-head .grow { flex: 1 0 100%; height: 0; }
  .detail-head > .btn-primary, .detail-head > .btn-outline-secondary { flex: 1 1 40%; }

  /* daftar transaksi: tabel desktop diganti kartu */
  .tx-table { display: none; }
  .tx-list { display: block; }

  /* tabel lain -> kartu berlabel (label diisi otomatis oleh app.js) */
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tfoot, table.stack tr, table.stack td, table.stack th { display: block; width: 100%; }
  table.stack tbody tr { background: #fff; border: 1px solid var(--gks-line); border-radius: 12px; margin-bottom: .6rem; padding: .35rem 0; }
  table.stack td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 0 !important; padding: .3rem .9rem; text-align: right !important; overflow-wrap: anywhere; }
  table.stack td::before { content: attr(data-label); color: var(--gks-muted); font-weight: 600; font-size: .78rem; text-align: left; flex: 0 0 34%; }
  table.stack td[data-label=""]::before { display: none; }
  table.stack td[data-label=""] { justify-content: flex-end; }
  table.stack tfoot tr { display: flex; justify-content: space-between; align-items: center; background: var(--gks-tint); border-radius: 12px; padding: .65rem .9rem; margin-top: .4rem; }
  table.stack tfoot th { width: auto; padding: 0; background: transparent; border: 0; }
  table.stack tfoot th[colspan] + th:empty { display: none; }
  .stack-card, .card.stack-card { border: 0; background: transparent; box-shadow: none; }
  .stack-card > .table-responsive, .stack-card > .card-body, .stack-card .card-body > .table-responsive { padding: 0 !important; overflow: visible; }
  .row-link:active { background: #F3F7FD; }

  .modal-dialog { margin: 0; max-width: none; min-height: 100%; }
  .modal-content { min-height: 100vh; border-radius: 0; border: 0; }
  .modal-body { flex: 1; }
  .flatpickr-calendar { width: min(100vw - 24px, 340px); }
  .flatpickr-day { height: 42px; line-height: 42px; max-width: none; }
  .dayContainer { width: 100%; min-width: 0; max-width: none; }
  .flatpickr-innerContainer, .flatpickr-rContainer, .flatpickr-days { width: 100%; }
}
@media (max-width: 420px) { .quick { gap: .6rem; } .quick a small { display: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }


/* ===== Tab bar HP + lembar bawah (bottom sheet) ===== */
@media (max-width: 991.98px) {
  .tabbar { display: grid; grid-template-columns: 1fr 1fr 76px 1fr 1fr; align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-top: 1px solid var(--gks-line); box-shadow: 0 -6px 24px rgba(11,42,91,.07); }
  .tabbar .tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: #7C8AA3; font-size: .68rem; font-weight: 600; letter-spacing: .01em; padding: 0; -webkit-tap-highlight-color: transparent; }
  .tabbar .tab i { font-size: 1.4rem; line-height: 1; transition: transform .15s; }
  .tabbar .tab:active i { transform: scale(.88); }
  .tabbar .tab.on { color: var(--gks-navy); font-weight: 800; }
  .tabbar .tab.on::before { content: ""; position: absolute; top: 0; left: 50%; width: 30px; height: 3px; margin-left: -15px; border-radius: 0 0 4px 4px; background: var(--gks-navy); }
  .tabbar .tab-fab-slot { position: relative; }
  .tabbar .tab-fab { position: absolute; left: 50%; top: -22px; margin-left: -29px; width: 58px; height: 58px; border-radius: 50%; border: 4px solid #fff; background: linear-gradient(180deg, #1B4A94 0%, #0B2A5B 100%); color: #fff; display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 8px 20px rgba(11,42,91,.38); transition: transform .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
  .tabbar .tab-fab i { transition: transform .2s; }
  .tabbar .tab-fab:active { transform: scale(.93); box-shadow: 0 4px 12px rgba(11,42,91,.35); }
  body.sheet-open .tabbar .tab-fab i { transform: rotate(45deg); }
  .tabbar .fab-label { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font-size: .68rem; font-weight: 700; color: var(--gks-navy); }

  .sheet-wrap { display: block; position: fixed; inset: 0; z-index: 1040; visibility: hidden; pointer-events: none; }
  .sheet-wrap.open { visibility: visible; pointer-events: auto; }
  .sheet-backdrop { position: absolute; inset: 0; background: rgba(8,30,68,.5); opacity: 0; transition: opacity .22s; }
  .sheet-wrap.open .sheet-backdrop { opacity: 1; }
  .sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 22px 22px 0 0; padding: .55rem 1rem calc(1rem + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -12px 40px rgba(8,30,68,.28); }
  .sheet-wrap.open .sheet { transform: none; }
  .sheet.dragging { transition: none; }
  .sheet-handle { width: 42px; height: 5px; border-radius: 3px; background: #D3DCEC; margin: 0 auto .85rem; touch-action: none; }
  .sheet-title { font-weight: 800; color: var(--gks-navy); font-size: 1.1rem; margin: 0 .25rem .75rem; }
  .sheet-label { text-transform: uppercase; font-size: .66rem; letter-spacing: .09em; color: var(--gks-muted); font-weight: 700; margin: 1rem .35rem .4rem; }
  .sheet-opt { display: flex; align-items: center; gap: .9rem; padding: .95rem 1rem; border-radius: 16px; border: 1px solid var(--gks-line); margin-bottom: .6rem; color: var(--gks-navy); font-weight: 800; background: #fff; }
  .sheet-opt:active { background: #F3F7FD; }
  .sheet-opt .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; flex: none; }
  .sheet-opt small { display: block; color: var(--gks-muted); font-weight: 500; font-size: .8rem; }
  .sheet-opt .go { margin-left: auto; color: #B4C0D6; }
  .sheet-user { display: flex; align-items: center; gap: .8rem; padding: .35rem .35rem .8rem; }
  .sheet-user .avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--gks-navy); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; flex: none; }
  .sheet-user .nm { font-weight: 800; color: var(--gks-navy); line-height: 1.2; }
  .sheet-user .rl { color: var(--gks-muted); font-size: .82rem; }
  .sheet-list { border: 1px solid var(--gks-line); border-radius: 16px; overflow: hidden; }
  .sheet-item { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; color: var(--gks-text-2); font-weight: 600; border-bottom: 1px solid var(--gks-line); background: #fff; }
  .sheet-item:last-child { border-bottom: 0; }
  .sheet-item i.l { width: 1.4rem; text-align: center; font-size: 1.15rem; color: var(--gks-blue); }
  .sheet-item .go { margin-left: auto; color: #B4C0D6; font-size: .9rem; }
  .sheet-item.on { background: var(--gks-tint); color: var(--gks-navy); font-weight: 800; }
  .sheet-item:active { background: #F3F7FD; }
  .sheet-item.danger, .sheet-item.danger i.l { color: var(--gks-red); }
  body.sheet-open { overflow: hidden; }
}


/* ===== Tombol tambah (daftar transaksi, HP) ===== */
.cta-add { display: none; }
@media (max-width: 991.98px) {
  .topbar .btn { display: none; }
  .cta-add { display: flex; align-items: center; gap: .9rem; width: 100%; margin-bottom: 1rem; padding: .85rem 1rem; border-radius: 16px; background: linear-gradient(180deg, #164582 0%, #0B2A5B 100%); color: #fff; font-weight: 800; font-size: 1.02rem; box-shadow: 0 8px 20px rgba(11,42,91,.28); -webkit-tap-highlight-color: transparent; transition: transform .12s, box-shadow .12s; }
  .cta-add:active { transform: scale(.985); box-shadow: 0 4px 12px rgba(11,42,91,.28); color: #fff; }
  .cta-add:hover { color: #fff; }
  .cta-add .plus { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.16); display: grid; place-items: center; font-size: 1.5rem; flex: none; }
  .cta-add small { display: block; font-weight: 500; color: #C7D6F0; font-size: .78rem; margin-top: 1px; }
  .cta-add .go { margin-left: auto; color: #9FB6DC; }
}

/* ===== Halaman masuk / pengaturan awal ===== */
.auth-wrap { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(900px 420px at 50% -8%, #2257A8 0%, #0B2A5B 52%, #071C42 100%); }
.auth-top { flex: 0 0 auto; text-align: center; padding: calc(2.2rem + env(safe-area-inset-top)) 1.5rem 1.6rem; color: #fff; }
.auth-top .logo { width: 84px; height: 84px; background: #fff; border-radius: 22px; padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.35); margin-bottom: 1rem; }
.auth-top h1 { font-size: 1.35rem; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.auth-top p { color: #B9CBE8; margin: .3rem 0 0; font-size: .92rem; }
.auth-panel { flex: 1 0 auto; background: #fff; border-radius: 26px 26px 0 0; padding: 1.6rem 1.4rem calc(1.4rem + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.2); display: flex; flex-direction: column; }
.auth-panel .inner { width: 100%; max-width: 380px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; }
.auth-panel h2 { font-size: 1.25rem; font-weight: 800; color: var(--gks-navy); margin: 0 0 .2rem; }
.auth-panel .lead-sm { color: var(--gks-muted); margin-bottom: 1.3rem; font-size: .92rem; }
.field-ico { position: relative; margin-bottom: 1rem; }
.field-ico > i.lead { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #8C9AB3; font-size: 1.1rem; pointer-events: none; }
.field-ico .form-control { height: 54px; padding-left: 2.9rem; font-size: 16px; border-radius: 14px; }
.field-ico .pw-toggle { right: .4rem; }
.field-ico .form-control:focus + .pw-toggle, .field-ico:focus-within > i.lead { color: var(--gks-blue); }
.auth-btn { height: 54px; border-radius: 14px; font-size: 1.02rem; font-weight: 800; width: 100%; margin-top: .3rem; }
.auth-alert { display: flex; gap: .6rem; align-items: flex-start; background: var(--gks-red-tint); color: #9B1C1C; border: 1px solid #F5C6C6; border-radius: 12px; padding: .7rem .85rem; margin-bottom: 1rem; font-weight: 600; font-size: .9rem; animation: shake .35s; }
.auth-help { text-align: center; color: var(--gks-muted); font-size: .85rem; margin-top: 1.2rem; }
.auth-foot { text-align: center; color: #9AA7BD; font-size: .75rem; padding-top: 1.4rem; margin-top: auto; }
.pw-field { position: relative; }
.pw-field .form-control { padding-right: 3rem; }
.pw-toggle { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--gks-muted); padding: .6rem .7rem; font-size: 1.15rem; }
@keyframes shake { 0%,100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@media (min-width: 768px) {
  .auth-wrap { justify-content: center; align-items: center; padding: 2rem; }
  .auth-top { padding: 0 0 1.4rem; }
  .auth-panel { flex: 0 0 auto; width: 100%; max-width: 440px; border-radius: 24px; padding: 2rem; box-shadow: 0 30px 70px rgba(0,0,0,.4); }
}
@media (max-height: 620px) { .auth-top { padding-top: calc(1rem + env(safe-area-inset-top)); padding-bottom: .9rem; } .auth-top .logo { width: 54px; height: 54px; border-radius: 14px; margin-bottom: .5rem; } .auth-top p { display: none; } .auth-top h1 { font-size: 1.1rem; } }