/* =====================================================================
   PORTAL KEUANGAN — FKIP UNIVERSITAS SAMAWA
   Identitas visual mengikuti logo FKIP UNSA:
   biru royal (teks logo) · merah api (lambang) · biru langit (latar logo)
   ===================================================================== */
:root {
  --pk-navy-950: #071338;
  --pk-navy-900: #0b1c52;
  --pk-navy-800: #12287a;
  --pk-blue:     #1d3fd6;   /* biru royal logo */
  --pk-blue-600: #1834b3;
  --pk-blue-100: #e6ecff;
  --pk-red:      #d8291c;   /* merah lambang */
  --pk-red-100:  #fdecea;
  --pk-sky:      #86d2f2;   /* biru langit logo */
  --pk-sky-100:  #eaf7fd;
  --pk-gold:     #f2a50c;
  --pk-green:    #12a170;

  --bg:      #f2f5fb;
  --card:    #ffffff;
  --ink:     #0f1a33;
  --ink-2:   #33405c;
  --muted:   #6b7690;
  --line:    #e3e8f2;
  --line-2:  #eef1f7;
  --radius:  14px;
  --shadow-sm: 0 1px 2px rgba(15, 26, 51, .05);
  --shadow:    0 1px 2px rgba(15, 26, 51, .04), 0 8px 24px -12px rgba(15, 26, 51, .14);
  --sb-w: 268px;
  --sb-mini: 76px;
  --tb-h: 64px;

  --bs-primary: var(--pk-blue);
  --bs-primary-rgb: 29, 63, 214;
  --bs-danger-rgb: 216, 41, 28;
  --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--bg);
  --bs-border-color: var(--line);
  --bs-link-color: var(--pk-blue);
  --bs-link-color-rgb: 29, 63, 214;
  --bs-link-hover-color: var(--pk-blue-600);
}
[data-bs-theme="dark"] {
  --bg:     #0b1222;
  --card:   #121b30;
  --ink:    #e7ecf7;
  --ink-2:  #c3cbe0;
  --muted:  #8e99b5;
  --line:   #23304d;
  --line-2: #1a2540;
  --pk-blue-100: #1a2a5c;
  --pk-red-100:  #3a1a1a;
  --pk-sky-100:  #10283a;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--bg);
  --bs-border-color: var(--line);
  --bs-secondary-bg: #18223b;
  --bs-tertiary-bg: #152039;
  --bs-primary: #5b7bff;
  --bs-primary-rgb: 91, 123, 255;
  --bs-link-color: #8aa2ff;
  --bs-link-color-rgb: 138, 162, 255;
}

* { -webkit-font-smoothing: antialiased; }
body { background: var(--bg); color: var(--ink); font-size: .925rem; }
a { text-decoration: none; }
.num, .table td.num, .table th.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fw-800 { font-weight: 800; }
.text-muted { color: var(--muted) !important; }
.small-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }

/* ---------------- Tombol ---------------- */
.btn { font-weight: 600; border-radius: 10px; }
.btn-primary { --bs-btn-bg: var(--pk-blue); --bs-btn-border-color: var(--pk-blue); --bs-btn-hover-bg: var(--pk-blue-600); --bs-btn-hover-border-color: var(--pk-blue-600); --bs-btn-active-bg: var(--pk-navy-800); box-shadow: 0 6px 16px -8px rgba(29,63,214,.7); }
.btn-danger { --bs-btn-bg: var(--pk-red); --bs-btn-border-color: var(--pk-red); --bs-btn-hover-bg: #b81f14; --bs-btn-hover-border-color: #b81f14; }
.btn-success { --bs-btn-bg: var(--pk-green); --bs-btn-border-color: var(--pk-green); --bs-btn-hover-bg: #0d8a5f; --bs-btn-hover-border-color: #0d8a5f; }
.btn-soft { background: var(--pk-blue-100); color: var(--pk-blue); border: 0; }
.btn-soft:hover { background: var(--pk-blue); color: #fff; }
.btn-soft-danger { background: var(--pk-red-100); color: var(--pk-red); border: 0; }
.btn-soft-danger:hover { background: var(--pk-red); color: #fff; }
.btn-soft-success { background: #e5f6ef; color: var(--pk-green); border: 0; }
.btn-soft-success:hover { background: var(--pk-green); color: #fff; }
[data-bs-theme="dark"] .btn-soft-success { background: #12352a; }
.btn-light { --bs-btn-bg: var(--card); --bs-btn-border-color: var(--line); --bs-btn-color: var(--ink-2); --bs-btn-hover-bg: var(--line-2); --bs-btn-hover-border-color: var(--line); }
.btn-icon-sm { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; }
.btn-group-act { display: inline-flex; gap: 4px; flex-wrap: nowrap; }

/* ---------------- Layout utama ---------------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sb-w); z-index: 1040;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(134,210,242,.18) 0%, transparent 55%),
    radial-gradient(90% 50% at 100% 100%, rgba(216,41,28,.16) 0%, transparent 60%),
    linear-gradient(180deg, var(--pk-navy-900) 0%, var(--pk-navy-950) 100%);
  color: #c9d3f0; display: flex; flex-direction: column; transition: width .25s ease, transform .25s ease;
  border-right: 1px solid rgba(255,255,255,.04);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.07); }
.brand-logo { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px -6px rgba(134,210,242,.6); }
.brand-logo img { width: 36px; height: 36px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; overflow: hidden; }
.brand-text strong { font-size: 1.1rem; font-weight: 800; letter-spacing: .02em; }
.brand-text small { color: var(--pk-sky); font-weight: 600; font-size: .72rem; letter-spacing: .01em; }
.side-nav { flex: 1; overflow-y: auto; padding: 8px 12px 16px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.nav-head { padding: 16px 12px 6px; font-size: .67rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6f80b4; white-space: nowrap; }
.nav-link-s { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 1px 0; border-radius: 10px; color: #c2cceb; font-weight: 500; position: relative; white-space: nowrap; transition: background .15s, color .15s; }
.nav-link-s i { font-size: 1.08rem; width: 22px; text-align: center; color: #8b9ad0; transition: color .15s; }
.nav-link-s:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link-s:hover i { color: var(--pk-sky); }
.nav-link-s.active { background: linear-gradient(90deg, rgba(134,210,242,.2), rgba(134,210,242,.04)); color: #fff; font-weight: 600; }
.nav-link-s.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--pk-sky); box-shadow: 0 0 12px var(--pk-sky); }
.nav-link-s.active i { color: var(--pk-sky); }
.nl-text { overflow: hidden; text-overflow: ellipsis; }
.nl-badge { margin-left: auto; background: var(--pk-red); color: #fff; font-size: .68rem; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 6px; }
.side-foot { padding: 12px 16px 16px; border-top: 1px solid rgba(255,255,255,.07); }
.sf-ta { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: #9fb0e0; background: rgba(255,255,255,.05); padding: 8px 12px; border-radius: 10px; white-space: nowrap; overflow: hidden; }

.main { flex: 1; margin-left: var(--sb-w); min-width: 0; display: flex; flex-direction: column; transition: margin .25s ease; }
.topbar { position: sticky; top: 0; z-index: 1030; height: var(--tb-h); display: flex; align-items: center; gap: 12px; padding: 0 24px; background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); }
.btn-icon { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); display: inline-grid; place-items: center; font-size: 1.15rem; transition: all .15s; }
.btn-icon:hover { color: var(--pk-blue); border-color: var(--pk-blue); }
.tb-crumb { color: var(--muted); font-size: .85rem; }
.tb-crumb a { color: var(--muted); }
.tb-crumb .bi-chevron-right { font-size: .7rem; margin: 0 4px; }
.ta-pill { border: 1px solid var(--line); background: var(--pk-sky-100); color: var(--pk-navy-800); font-weight: 700; font-size: .85rem; border-radius: 999px; padding: 7px 14px; display: inline-flex; align-items: center; gap: 6px; }
[data-bs-theme="dark"] .ta-pill { color: var(--pk-sky); }
.notif-dot { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; border-radius: 10px; background: var(--pk-red); color: #fff; font-size: .65rem; font-weight: 700; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--card); }
.notif-menu { width: 360px; max-width: 92vw; border-radius: 14px; overflow: hidden; }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item { display: flex; gap: 12px; padding: 12px 16px; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.notif-item:hover { background: var(--line-2); }
.notif-item.unread { background: var(--pk-blue-100); }
.ni-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: var(--pk-blue-100); color: var(--pk-blue); display: grid; place-items: center; }
.notif-item.unread .ni-icon { background: var(--pk-blue); color: #fff; }
.ni-body { display: flex; flex-direction: column; font-size: .83rem; line-height: 1.35; min-width: 0; }
.ni-body small { color: var(--muted); }
.ni-body em { color: var(--muted); font-style: normal; font-size: .72rem; margin-top: 2px; }
.user-chip { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--card); padding: 4px 12px 4px 4px; border-radius: 999px; color: var(--ink); }
.user-chip img, .user-chip .avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.avatar { display: grid; place-items: center; background: linear-gradient(135deg, var(--pk-blue), var(--pk-red)); color: #fff; font-weight: 700; }
.user-chip b { font-size: .84rem; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip small { color: var(--muted); font-size: .72rem; }

.content { padding: 24px; flex: 1; }
.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 16px 24px; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; margin: 0; display: flex; align-items: center; gap: 10px; }
.page-title i { color: var(--pk-blue); background: var(--pk-blue-100); width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; }
.page-sub { color: var(--muted); margin: 6px 0 0 50px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Sidebar mini (desktop) */
.sb-mini .sidebar { width: var(--sb-mini); }
.sb-mini .main { margin-left: var(--sb-mini); }
.sb-mini .brand-text, .sb-mini .nl-text, .sb-mini .nav-head span, .sb-mini .sf-ta span { display: none; }
.sb-mini .brand { justify-content: center; padding-inline: 0; }
.sb-mini .nav-link-s { justify-content: center; padding: 10px 0; }
.sb-mini .nl-badge { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; font-size: .6rem; }
.sb-mini .nav-head { padding: 10px 0 2px; border-top: 1px solid rgba(255,255,255,.06); margin-top: 6px; }
.sb-mini .sf-ta { justify-content: center; }
.sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); width: var(--sb-w) !important; }
  .main, .sb-mini .main { margin-left: 0 !important; }
  .sb-open .sidebar { transform: none; }
  .sb-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(7,19,56,.5); z-index: 1035; }
  .sb-mini .brand-text, .sb-mini .nl-text, .sb-mini .nav-head span, .sb-mini .sf-ta span { display: initial; }
  .sb-mini .nav-link-s { justify-content: flex-start; padding: 9px 12px; }
  .content { padding: 16px; }
  .topbar { padding: 0 16px; }
  .page-sub { margin-left: 0; }
}

/* ---------------- Kartu ---------------- */
.card { --bs-card-bg: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--line); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-header h5, .card-header .card-title { margin: 0; font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-header h5 i { color: var(--pk-blue); }
.card-body { padding: 20px; }
.card-footer { background: transparent; border-top: 1px solid var(--line); padding: 14px 20px; }

/* KPI */
.kpi { position: relative; overflow: hidden; padding: 18px 20px; height: 100%; }
.kpi .k-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 14px; }
.kpi .k-label { color: var(--muted); font-size: .8rem; font-weight: 600; }
.kpi .k-value { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .k-foot { font-size: .78rem; color: var(--muted); margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kpi::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: currentColor; opacity: .05; }
.tone-blue  { color: var(--pk-blue); }  .tone-blue .k-icon  { background: var(--pk-blue-100); color: var(--pk-blue); }
.tone-red   { color: var(--pk-red); }   .tone-red .k-icon   { background: var(--pk-red-100); color: var(--pk-red); }
.tone-green { color: var(--pk-green); } .tone-green .k-icon { background: #e5f6ef; color: var(--pk-green); }
.tone-gold  { color: var(--pk-gold); }  .tone-gold .k-icon  { background: #fdf3dc; color: #c9850a; }
.tone-sky   { color: #1b8fc4; }         .tone-sky .k-icon   { background: var(--pk-sky-100); color: #1b8fc4; }
.tone-navy  { color: var(--pk-navy-800); } .tone-navy .k-icon { background: #e8ebf5; color: var(--pk-navy-800); }
[data-bs-theme="dark"] .tone-green .k-icon { background: #12352a; }
[data-bs-theme="dark"] .tone-gold .k-icon { background: #3a2e10; }
[data-bs-theme="dark"] .tone-navy .k-icon { background: #1c2747; color: #9fb0e0; }
[data-bs-theme="dark"] .tone-navy { color: #9fb0e0; }
.kpi .k-value, .kpi .k-label { color: var(--ink); }
.kpi .k-label { color: var(--muted); }

.hero-card { border: 0; color: #fff; background:
    radial-gradient(70% 120% at 100% 0%, rgba(134,210,242,.35) 0%, transparent 60%),
    radial-gradient(60% 100% at 0% 100%, rgba(216,41,28,.35) 0%, transparent 60%),
    linear-gradient(120deg, var(--pk-navy-900), var(--pk-blue)); }
.hero-card .hc-sub { color: #cfe0ff; }
.hero-card .hc-stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 10px 14px; }
.hero-card .hc-stat small { color: #cfe0ff; display: block; font-size: .72rem; }
.hero-card .hc-stat b { font-size: 1.05rem; }

/* Badge status */
.badge-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.badge-status i { font-size: .8rem; }
.bs-secondary { background: #eef0f4; color: #5c6476; }
.bs-warning { background: #fff4dc; color: #a86a00; }
.bs-success { background: #e2f6ee; color: #0c8a5e; }
.bs-danger  { background: var(--pk-red-100); color: #b61f14; }
.bs-info    { background: var(--pk-sky-100); color: #11709c; }
.bs-primary { background: var(--pk-blue-100); color: var(--pk-blue); }
.bs-dark    { background: #e4e6ec; color: #222; }
.bs-light   { background: var(--line-2); color: var(--ink-2); }
[data-bs-theme="dark"] .bs-secondary { background: #262f45; color: #b6bfd6; }
[data-bs-theme="dark"] .bs-warning { background: #3b2e0e; color: #ffc861; }
[data-bs-theme="dark"] .bs-success { background: #10362a; color: #58d6a4; }
[data-bs-theme="dark"] .bs-danger { color: #ff8a80; }
[data-bs-theme="dark"] .bs-info { color: #7fd2f5; }
[data-bs-theme="dark"] .bs-primary { color: #a9bbff; }

/* Tabel */
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .7rem .8rem; border-bottom-color: var(--line-2); vertical-align: middle; }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; background: var(--line-2); border-bottom: 1px solid var(--line) !important; white-space: nowrap; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--pk-sky-100); }
.table tfoot td, .table tfoot th { font-weight: 800; background: var(--line-2); }
.td-title { font-weight: 600; color: var(--ink); }
.td-sub { font-size: .78rem; color: var(--muted); }
.table-wrap { overflow-x: auto; }
div.dt-container .dt-search input, div.dt-container .dt-length select { border-radius: 9px; }
div.dt-container { font-size: .88rem; }
div.dt-container .dt-paging .page-link { border-radius: 8px !important; margin: 0 2px; }
.dt-top, .dt-bottom { padding: 12px 16px; }

/* Form */
.form-control, .form-select { border-radius: 10px; border-color: var(--line); background-color: var(--card); }
.form-control:focus, .form-select:focus { border-color: var(--pk-blue); box-shadow: 0 0 0 .2rem rgba(29,63,214,.12); }
.form-label { font-weight: 600; font-size: .85rem; color: var(--ink-2); }
.form-text { color: var(--muted); }
.req::after { content: " *"; color: var(--pk-red); }
.input-group-text { background: var(--line-2); border-color: var(--line); color: var(--muted); font-weight: 600; }
.input-rupiah { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ts-wrapper .ts-control { border-radius: 10px; border-color: var(--line); background: var(--card); }
.ts-dropdown { border-radius: 10px; }
[data-bs-theme="dark"] .ts-control, [data-bs-theme="dark"] .ts-dropdown { background: var(--card) !important; color: var(--ink); }
[data-bs-theme="dark"] .ts-control input { color: var(--ink) !important; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.filter-bar > div { min-width: 150px; }
.filter-bar .form-label { font-size: .74rem; margin-bottom: 4px; color: var(--muted); }

/* Tab pills */
.nav-pills-pk { gap: 6px; flex-wrap: wrap; }
.nav-pills-pk .nav-link { border-radius: 10px; color: var(--ink-2); font-weight: 600; background: var(--card); border: 1px solid var(--line); padding: 7px 14px; font-size: .86rem; }
.nav-pills-pk .nav-link.active { background: var(--pk-blue); border-color: var(--pk-blue); color: #fff; }
.nav-pills-pk .nav-link .badge { margin-left: 4px; }

/* Lainnya */
.progress-thin { height: 7px; border-radius: 6px; background: var(--line-2); }
.empty-state { text-align: center; padding: 40px 16px; color: var(--muted); }
.empty-state .es-icon { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 20px; background: var(--pk-blue-100); color: var(--pk-blue); display: grid; place-items: center; font-size: 2rem; }
.empty-state h6 { color: var(--ink); font-weight: 700; }
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 18px 44px; }
.timeline .tl-dot { position: absolute; left: 4px; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); display: grid; place-items: center; font-size: .7rem; color: var(--muted); }
.timeline li.done .tl-dot { background: var(--pk-green); border-color: var(--pk-green); color: #fff; }
.timeline li.now .tl-dot { background: var(--pk-blue); border-color: var(--pk-blue); color: #fff; box-shadow: 0 0 0 5px var(--pk-blue-100); }
.timeline li.fail .tl-dot { background: var(--pk-red); border-color: var(--pk-red); color: #fff; }
.timeline b { display: block; font-size: .88rem; }
.timeline small { color: var(--muted); }
.dl-grid { display: grid; grid-template-columns: 170px 1fr; gap: 8px 16px; font-size: .9rem; }
.dl-grid dt { color: var(--muted); font-weight: 500; }
.dl-grid dd { margin: 0; font-weight: 600; }
@media (max-width: 575.98px) { .dl-grid { grid-template-columns: 1fr; } .dl-grid dd { margin-bottom: 8px; } }
.mini-stat { border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; height: 100%; }
.mini-stat small { color: var(--muted); display: block; font-size: .75rem; }
.mini-stat b { font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.list-clean { list-style: none; margin: 0; padding: 0; }
.list-clean li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.list-clean li:last-child { border-bottom: 0; }
.approval-card { border-left: 4px solid var(--pk-gold); }
.report-card { transition: transform .15s, box-shadow .15s; color: var(--ink); display: block; height: 100%; }
.report-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -16px rgba(29,63,214,.45); color: var(--ink); }
.report-card .rc-icon { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; background: var(--pk-blue-100); color: var(--pk-blue); margin-bottom: 14px; }
.report-card h6 { font-weight: 700; }
.report-card p { color: var(--muted); font-size: .84rem; margin: 0; }
.chart-box { position: relative; height: 300px; }
.chart-box.sm { height: 240px; }
.modal-content { border-radius: 16px; border: 0; background: var(--card); }
.modal-header { border-bottom: 1px solid var(--line); }
.modal-footer { border-top: 1px solid var(--line); }
.dropdown-menu { border-color: var(--line); border-radius: 12px; --bs-dropdown-bg: var(--card); --bs-dropdown-link-active-bg: var(--pk-blue); }
.swal2-popup { border-radius: 18px !important; font-family: var(--bs-body-font-family) !important; }
.sticky-sum { position: sticky; top: calc(var(--tb-h) + 16px); }
.rincian-table td { padding: .4rem !important; }
.rincian-table .form-control, .rincian-table .form-select { padding: .35rem .5rem; font-size: .85rem; }

/* ===================== HALAMAN AUTH ===================== */
.auth-body { background: var(--bg); }
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(150deg, var(--pk-navy-950) 0%, var(--pk-navy-800) 55%, var(--pk-blue) 100%); padding: 48px; display: flex; }
.ah-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(80% 70% at 30% 40%, #000 30%, transparent 80%); }
.ah-glow { position: absolute; border-radius: 50%; filter: blur(70px); }
.ah-glow.g1 { width: 380px; height: 380px; background: rgba(134,210,242,.45); top: -80px; right: -60px; }
.ah-glow.g2 { width: 340px; height: 340px; background: rgba(216,41,28,.45); bottom: -100px; left: -80px; }
.ah-inner { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; max-width: 620px; gap: 40px; }
.ah-brand { display: flex; align-items: center; gap: 14px; }
.ah-logo { width: 64px; height: 64px; border-radius: 18px; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px -10px rgba(134,210,242,.8); }
.ah-logo img { width: 54px; }
.ah-brand b { display: block; font-size: 1.15rem; font-weight: 800; }
.ah-brand small { color: var(--pk-sky); font-weight: 600; }
.ah-kicker { display: inline-flex; gap: 8px; align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.ah-copy h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: 18px 0 14px; }
.ah-copy h1 em { font-style: normal; color: var(--pk-sky); }
.ah-copy p { color: #c9d6f5; font-size: 1.02rem; max-width: 520px; }
.ah-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 520px; }
.ah-stats div { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .88rem; backdrop-filter: blur(4px); }
.ah-stats i { color: var(--pk-sky); font-size: 1.15rem; }
.auth-panel { display: grid; place-items: center; padding: 32px 20px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h2 { font-weight: 800; letter-spacing: -.02em; }
.auth-badge { display: inline-flex; gap: 6px; align-items: center; background: var(--pk-sky-100); color: var(--pk-navy-800); padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.input-icon .form-control { padding-left: 42px; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); padding: 6px 8px; }
.auth-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; font-size: .86rem; font-weight: 600; }
.auth-foot { text-align: center; color: var(--muted); font-size: .76rem; margin-top: 26px; }
@media (max-width: 991.98px) { .auth-wrap { grid-template-columns: 1fr; } .auth-hero { display: none; } }

/* Halaman publik */
.public-top { background: linear-gradient(120deg, var(--pk-navy-900), var(--pk-blue)); color: #fff; padding: 28px 0 90px; }
.public-top .pt-brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.public-top .pt-brand img { width: 48px; background: #fff; border-radius: 12px; padding: 4px; }
.public-main { margin-top: -64px; padding-bottom: 48px; }

/* Cetak */
@media print {
  .sidebar, .topbar, .footer, .page-actions, .no-print, .dt-top, .dt-bottom, .btn { display: none !important; }
  .main { margin: 0 !important; }
  .content { padding: 0 !important; }
  .card { box-shadow: none !important; border: 0 !important; }
  body { background: #fff !important; }
}