/* =========================================================
   Bupot Coretax — tema "kaca cair" Teluk Bone
   ========================================================= */
:root {
  --abyss: #071a2b;
  --teluk: #0e4c6b;
  --nikel: #7fd6c9;
  --nikel-strong: #4fc3b4;
  --senja: #f2b880;
  --karang: #ff8a80;
  --ink: #eaf4f7;
  --ink-2: rgba(234, 244, 247, .72);
  --ink-3: rgba(234, 244, 247, .5);
  --glass: rgba(255, 255, 255, .075);
  --glass-2: rgba(255, 255, 255, .12);
  --glass-edge: rgba(255, 255, 255, .22);
  --glass-shade: rgba(3, 14, 26, .45);
  --r-lg: 26px;
  --r-md: 16px;
  --r-sm: 11px;
  --blur: blur(22px) saturate(170%);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font); color: var(--ink); background: var(--abyss);
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
/* ---------- latar aurora ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: radial-gradient(120% 90% at 10% 0%, #10405e 0%, transparent 55%),
              radial-gradient(90% 80% at 100% 100%, #2a1f5c 0%, transparent 60%),
              linear-gradient(160deg, #06192a, #081f35 50%, #0a1630); }
.aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.aurora i:nth-child(1) { width: 46vw; height: 46vw; left: -8vw; top: 18vh; background: #1b8f8a; animation: drift 38s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 38vw; height: 38vw; right: -6vw; top: -10vh; background: #3b4fb8; animation: drift 46s ease-in-out infinite alternate-reverse; }
.aurora i:nth-child(3) { width: 30vw; height: 30vw; left: 42vw; bottom: -12vh; background: #c98a4b; opacity: .28; animation: drift 52s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(6vw, -5vh) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } * { transition: none !important; } }

/* ---------- kaca ---------- */
.glass {
  position: relative; background: linear-gradient(155deg, var(--glass-2), var(--glass) 40%, rgba(255,255,255,.04));
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge); border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.05), 0 18px 50px var(--glass-shade);
}
.glass::before { /* kilau spekular */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.18), transparent 28%, transparent 72%, rgba(255,255,255,.06));
  mask: linear-gradient(#000, transparent 60%);
}

/* ---------- tata letak ---------- */
.shell { display: grid; grid-template-columns: 252px 1fr; gap: 20px; padding: 20px; min-height: 100vh; }
.rail { position: sticky; top: 20px; height: calc(100vh - 40px); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 18px; }
.brand img { width: 42px; height: 42px; border-radius: 50%; background: #fff; padding: 2px; }
.brand b { display: block; font-size: 15px; letter-spacing: -.01em; }
.brand small { color: var(--ink-3); font-size: 12px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: var(--ink-2); text-decoration: none; font-weight: 500; border: 1px solid transparent; }
.nav a svg { width: 19px; height: 19px; flex: none; opacity: .85; }
.nav a:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.nav a.on { color: var(--ink); background: linear-gradient(135deg, rgba(127,214,201,.22), rgba(127,214,201,.06)); border-color: rgba(127,214,201,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.nav .badge { margin-left: auto; font-size: 11.5px; background: var(--senja); color: #2a1a08; border-radius: 99px; padding: 1px 8px; font-weight: 700; }
.rail-foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; color: var(--ink-3); }
.rail-foot button { margin-top: 8px; width: 100%; }

main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.topbar { display: flex; align-items: center; gap: 16px; padding: 14px 20px; }
.topbar h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; font-weight: 700; }
.topbar .sub { color: var(--ink-3); font-size: 13px; }
.topbar .spacer { flex: 1; }
.period { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 99px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.14); }
.period span { font-size: 13px; color: var(--ink-2); }
.period select { width: auto; padding: 6px 30px 6px 12px; border-radius: 99px; }
.menu-btn { display: none; }

.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr); align-items: start; }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.panel { padding: 22px; }
.panel h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.01em; }
.panel h3 { margin: 18px 0 8px; font-size: 14.5px; color: var(--ink-2); font-weight: 600; }
.panel .hint { color: var(--ink-3); font-size: 13px; margin: 0 0 16px; }
.row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 14px; }
.row.r1 { grid-template-columns: 1fr; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.actions.end { justify-content: flex-end; }

/* ---------- form ---------- */
label.f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); font-weight: 500; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--ink); padding: 10px 13px; border-radius: var(--r-sm);
  background: rgba(3, 16, 30, .42); border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25); outline: none; transition: border-color .15s, box-shadow .15s;
}
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23b9d9df' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
select option { background: #0c2238; color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--nikel); box-shadow: 0 0 0 3px rgba(127,214,201,.22); }
input[readonly] { color: var(--ink-2); background: rgba(255,255,255,.04); }
input.num { text-align: right; }
input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--nikel-strong); padding: 0; }
input[type=file] { padding: 8px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }

/* Tom Select disesuaikan */
.ts-wrapper .ts-control { background: rgba(3,16,30,.42) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: var(--r-sm) !important; color: var(--ink) !important; padding: 9px 13px !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.25) !important; font-size: 15px; }
.ts-wrapper.focus .ts-control { border-color: var(--nikel) !important; box-shadow: 0 0 0 3px rgba(127,214,201,.22) !important; }
.ts-control input { color: var(--ink) !important; font-size: 15px !important; }
.ts-control .item { color: var(--ink); }
.ts-dropdown { background: rgba(12, 34, 56, .96) !important; backdrop-filter: blur(18px); border: 1px solid var(--glass-edge) !important; border-radius: 14px !important; color: var(--ink) !important; overflow: hidden; margin-top: 6px !important; box-shadow: 0 20px 40px rgba(0,0,0,.45); }
.ts-dropdown .option { padding: 9px 13px !important; }
.ts-dropdown .active { background: rgba(127,214,201,.18) !important; color: var(--ink) !important; }
.ts-dropdown .opt-sub { display: block; font-size: 12px; color: var(--ink-3); }

/* ---------- tombol ---------- */
.btn { font: inherit; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 16px; border-radius: 13px; color: var(--ink); text-decoration: none;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px rgba(0,0,0,.2); transition: transform .12s, background .15s; }
.btn:hover { background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .nav a:focus-visible, .seg button:focus-visible { outline: 2px solid var(--nikel); outline-offset: 2px; }
.btn svg { width: 17px; height: 17px; }
.btn.primary { color: #052826; border-color: rgba(190,255,245,.7); background: linear-gradient(160deg, #a9efe4, #5ccab9 60%, #3fb3a2); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 22px rgba(79,195,180,.35); }
.btn.primary:hover { background: linear-gradient(160deg, #bdf5ec, #6bd4c4 60%, #47bba9); }
.btn.warm { color: #2b1704; border-color: rgba(255,226,190,.7); background: linear-gradient(160deg, #ffd9ae, #f2b880 60%, #e29a57); }
.btn.danger { color: #ffd6d2; border-color: rgba(255,138,128,.45); background: linear-gradient(160deg, rgba(255,138,128,.25), rgba(255,138,128,.08)); }
.btn.ghost { background: transparent; box-shadow: none; border-color: rgba(255,255,255,.14); }
.btn.sm { padding: 6px 10px; font-size: 13px; border-radius: 10px; }
.btn.icon { padding: 7px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* segmented control */
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 15px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.12); flex-wrap: wrap; }
.seg button { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: 11px; padding: 8px 14px; cursor: pointer; }
.seg button.on { color: var(--ink); background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.07)); border-color: rgba(255,255,255,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }

/* ---------- lensa hasil hitung (elemen utama) ---------- */
.lens { padding: 26px 24px; position: sticky; top: 20px; overflow: hidden; border-radius: 30px;
  background: radial-gradient(120% 90% at 20% 0%, rgba(127,214,201,.28), transparent 60%), linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); }
.lens::after { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -70px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%); pointer-events: none; }
.lens .cap { color: var(--ink-2); font-size: 13.5px; }
.lens .amount { font-size: clamp(34px, 4.2vw, 50px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin: 6px 0 2px;
  background: linear-gradient(180deg, #ffffff, #bdeee6 70%, #8fdccf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lens .amount small { font-size: .45em; font-weight: 700; letter-spacing: 0; margin-right: 4px; -webkit-text-fill-color: var(--ink-2); }
.lens dl { display: grid; grid-template-columns: 1fr auto; gap: 9px 14px; margin: 20px 0 0; padding-top: 16px; border-top: 1px dashed rgba(255,255,255,.2); font-size: 14px; }
.lens dt { color: var(--ink-3); }
.lens dd { margin: 0; text-align: right; font-weight: 600; }
.lens .law { margin-top: 16px; font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.lens .chip { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: rgba(242,184,128,.18); color: var(--senja); border: 1px solid rgba(242,184,128,.4); }

/* ---------- statistik dashboard ---------- */
.stat { padding: 18px 20px; }
.stat .k { color: var(--ink-3); font-size: 13px; }
.stat .v { font-size: 28px; font-weight: 750; letter-spacing: -.03em; margin-top: 4px; }
.stat .s { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.stat.warm .v { color: var(--senja); }

/* ---------- tabel ---------- */
.tbl-wrap { overflow: auto; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.12); background: rgba(3,16,30,.25); max-height: 62vh; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.07); white-space: nowrap; }
th { position: sticky; top: 0; z-index: 1; background: rgba(13, 42, 64, .96); color: var(--ink-2); font-weight: 600; font-size: 12.5px; }
td.n, th.n { text-align: right; }
tbody tr:hover { background: rgba(255,255,255,.04); }
tfoot td { position: sticky; bottom: 0; background: rgba(13,42,64,.97); font-weight: 700; }
td .sub { display: block; font-size: 12px; color: var(--ink-3); }
td.wrap { white-space: normal; min-width: 220px; }
.empty { padding: 34px; text-align: center; color: var(--ink-3); }
.tag { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: rgba(127,214,201,.14); color: var(--nikel); border: 1px solid rgba(127,214,201,.3); }
.tag.w { background: rgba(242,184,128,.14); color: var(--senja); border-color: rgba(242,184,128,.35); }
.tag.e { background: rgba(255,138,128,.14); color: var(--karang); border-color: rgba(255,138,128,.35); }
td input.cell { padding: 6px 9px; font-size: 13px; min-width: 120px; }

/* ---------- modal & toast ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(2,10,20,.55); backdrop-filter: blur(6px); display: grid; place-items: center; z-index: 50; padding: 20px; animation: fade .18s ease; }
.modal { width: min(720px, 100%); max-height: 90vh; overflow: auto; padding: 24px; background: linear-gradient(160deg, rgba(30,70,96,.88), rgba(14,36,58,.92)); animation: pop .2s ease; }
.modal h2 { margin: 0 0 16px; font-size: 18px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.97) translateY(6px); opacity: 0; } }
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 60; }
.toast { padding: 12px 16px; border-radius: 14px; max-width: 380px; font-size: 14px; animation: pop .2s ease; background: linear-gradient(160deg, rgba(40,90,110,.92), rgba(16,44,66,.95)); border: 1px solid var(--glass-edge); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.toast.err { border-color: rgba(255,138,128,.6); }
.note { padding: 12px 14px; border-radius: 14px; font-size: 13.5px; background: rgba(242,184,128,.1); border: 1px solid rgba(242,184,128,.3); color: #f8dcc0; }
.note.info { background: rgba(127,214,201,.08); border-color: rgba(127,214,201,.28); color: #cdeee8; }
.demo-banner { padding: 9px 16px; border-radius: 14px; font-size: 13px; background: rgba(242,184,128,.12); border: 1px solid rgba(242,184,128,.35); color: #f8dcc0; }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login .card { width: min(420px, 100%); padding: 34px 30px; text-align: center; }
.login img { width: 78px; height: 78px; border-radius: 50%; background: #fff; padding: 3px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.login h1 { margin: 16px 0 4px; font-size: 24px; letter-spacing: -.02em; }
.login p { color: var(--ink-3); margin: 0 0 22px; font-size: 14px; }
.login form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.login .btn { justify-content: center; }

/* ---------- responsif ---------- */
@media (max-width: 1100px) { .g2 { grid-template-columns: 1fr; } .lens { position: relative; top: 0; } .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; padding: 12px; gap: 14px; }
  .rail { position: fixed; z-index: 40; left: 12px; top: 12px; bottom: 12px; height: auto; width: 260px; transform: translateX(-120%); transition: transform .25s ease; }
  .rail.open { transform: none; }
  .menu-btn { display: inline-flex; }
  .topbar { flex-wrap: wrap; padding: 12px 14px; }
  .topbar h1 { font-size: 19px; }
  .g3 { grid-template-columns: 1fr; }
  .panel { padding: 16px; }
}
@media (max-width: 520px) { .g4 { grid-template-columns: 1fr; } .period { width: 100%; justify-content: space-between; } }

/* tabel Desember: ringkas + kolom nama tetap terlihat saat digeser */
#ttab th, #ttab td { padding: 8px 8px; }
#ttab td input.cell { min-width: 0; width: 104px; padding: 6px 8px; font-size: 12.5px; }
#ttab th:first-child, #ttab td:first-child { position: sticky; left: 0; z-index: 2; background: rgba(13, 42, 64, .97); }
#ttab td[data-o] { font-weight: 600; }
#ttab td[data-o="pphDesember"] { color: var(--nikel); }
.period span { white-space: nowrap; }