/* =========================================================
   LPPM REMUNERASI — THEME
   Konsep: "Ledger Institusional" — dana penelitian dicatat,
   dilacak, dan disalurkan seperti buku besar keuangan kampus.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    /* ---- Palette ---- */
    --ink:        #1C2438;
    --ink-soft:   #4B5468;
    --paper:      #F5F6F3;
    --surface:    #FFFFFF;
    --border:     #DEE2DD;
    --navy:       #1E3A5F;
    --navy-dark:  #14283F;
    --gold:       #B8863B;
    --gold-soft:  #E8D9BC;
    --teal:       #2F7B63;
    --clay:       #B4472F;
    --amber:      #C9963C;

    /* ---- Bootstrap variable overrides (cascades to all existing components) ---- */
    --bs-primary: var(--navy);
    --bs-primary-rgb: 30, 58, 95;
    --bs-secondary: var(--ink-soft);
    --bs-success: var(--teal);
    --bs-success-rgb: 47, 123, 99;
    --bs-danger: var(--clay);
    --bs-danger-rgb: 180, 71, 47;
    --bs-warning: var(--amber);
    --bs-warning-rgb: 201, 150, 60;
    --bs-info: var(--navy);
    --bs-body-bg: var(--paper);
    --bs-body-color: var(--ink);
    --bs-body-font-family: 'IBM Plex Sans', sans-serif;
    --bs-border-radius: .5rem;
    --bs-border-color: var(--border);
    --bs-link-color: var(--navy);
    --bs-link-hover-color: var(--gold);
}

body {
    background-color: var(--paper);
    color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.font-mono, code, .badge, .kode-tracking {
    font-family: 'IBM Plex Mono', monospace;
}

/* ---- Eyebrow label: dipakai untuk keterangan kecil di atas judul section ---- */
.eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}

/* ---- Navbar ---- */
.navbar.bg-dark {
    background-color: var(--navy-dark) !important;
    border-bottom: 3px solid var(--gold);
}
.navbar-brand { font-family: 'Fraunces', serif; font-weight: 600; letter-spacing: -.01em; }
.navbar-dark .nav-link { font-size: .92rem; }
.navbar-dark .nav-link:hover { color: var(--gold-soft); }

/* ---- Cards ---- */
.card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    box-shadow: none;
    border-radius: .65rem;
}

/* ---- Buttons ---- */
.btn-primary {
    background-color: var(--navy);
    border-color: var(--navy);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}
.btn-outline-primary { color: var(--navy); border-color: var(--navy); }
.btn-outline-primary:hover { background-color: var(--navy); border-color: var(--navy); }
.btn-outline-secondary { color: var(--ink-soft); border-color: var(--border); }

/* ---- Tables: gaya buku besar (ledger) ---- */
.table {
    --bs-table-bg: transparent;
    font-size: .92rem;
}
.table thead th {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border-bottom: 2px solid var(--ink);
    background-color: transparent !important;
    font-weight: 600;
}
.table td { border-color: var(--border); vertical-align: middle; }
.table-hover tbody tr:hover { background-color: #FBF7EE; }

/* ---- Badge status ---- */
.badge { font-weight: 500; letter-spacing: .02em; padding: .4em .65em; border-radius: .35rem; }

/* =========================================================
   SIGNATURE ELEMENT — "Tabung Pool" (Pool Vessel)
   Visual literal: dana sebagai cairan yang mengisi tabung.
   ========================================================= */
.pool-vessel-wrap {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.pool-vessel svg { display: block; }
.pool-vessel .liquid {
    transition: height 1.2s cubic-bezier(.22,1,.36,1), y 1.2s cubic-bezier(.22,1,.36,1);
}
.pool-ledger-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .85rem 0;
    border-bottom: 1px solid var(--border);
}
.pool-ledger-line:first-child { padding-top: 0; }
.pool-ledger-line .label {
    font-size: .82rem;
    color: var(--ink-soft);
}
.pool-ledger-line .value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.15rem;
    font-weight: 600;
}
.pool-ledger-line .value.tersedia { color: var(--teal); }
.pool-ledger-line .value.terpakai { color: var(--clay); }

/* ---- Step tracker (cek status) ---- */
.step-tracker { display: flex; }
.step-tracker .step { flex: 1; text-align: center; position: relative; }
.step-tracker .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px; right: -50%; width: 100%; height: 2px;
    background: var(--border); z-index: 0;
}
.step-tracker .step.done:not(:last-child)::after { background: var(--gold); }
.step-tracker .dot {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto .5rem; position: relative; z-index: 1;
    background: var(--surface); border: 2px solid var(--border); color: var(--ink-soft);
    font-family: 'IBM Plex Mono', monospace; font-size: .8rem; font-weight: 600;
}
.step-tracker .step.done .dot { background: var(--navy); border-color: var(--navy); color: #fff; }
.step-tracker .step-label { font-size: .78rem; color: var(--ink-soft); }
.step-tracker .step.done .step-label { color: var(--ink); font-weight: 600; }

/* ---- Sidebar admin ---- */
.sidebar { background: var(--navy-dark) !important; }
.sidebar a.active, .sidebar a:hover { background: rgba(255,255,255,.08); }
.sidebar h5 { font-family: 'Fraunces', serif; }

/* ---- Auth focus visibility (aksesibilitas) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .pool-vessel .liquid { transition: none; }
}

@media (max-width: 767px) {
    .pool-vessel-wrap { flex-direction: column; }
}