/* ============================================================
   Muara — UI emesys (turunan emesys Core · DNA BIGS)
   Navy memimpin · gold = "denyut" (hemat, satu per layar) ·
   aksen app = Teal Payau.
   Hanya lapisan visual: seluruh kelas Bootstrap & perilaku tetap sama.

   Ketentuan responsif mengikuti SRD Bagian 6.3 (RSP-01 s/d RSP-10).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* —— Brand emesys (navy #182C61 · gold #FBC531) —— */
    --navy: #182c61;
    --navy-900: #101f47;
    --navy-800: #1f356f;
    --navy-700: #2a4488;
    --navy-100: #e7ecf7;
    --gold: #fbc531;
    --gold-600: #e6a91a;
    --gold-100: #fef3d3;

    /* —— Ink & netral (undertone navy) —— */
    --ink-900: #0e1b33;
    --ink-700: #33415e;
    --ink-500: #5c6a88;
    --ink-300: #99a6be;
    --line: #e2e8f1;
    --paper: #ffffff;
    --mist: #f4f7fb;

    /* —— Semantik (status) —— */
    --success: #1e9e6a; --success-bg: #e3f5ec;
    --warning: #e8841a; --warning-bg: #fceedd;
    --danger: #d64242;  --danger-bg: #fbe6e6;
    --info: #2e6bd6;    --info-bg: #e6eefb;

    /*
     * —— Aksen aplikasi = Teal Payau ——
     * Tiap aplikasi ekosistem punya aksennya sendiri (wa-bigs = Koral).
     * Teal dipilih untuk tambak: air payau, dan cukup jauh dari
     * --success agar tidak tertukar dengan penanda status.
     */
    --app-accent: #0e7c8b;
    --app-accent-600: #0a6472;
    --app-accent-bg: #e2f1f4;

    /* —— Radius & elevasi (bayangan undertone navy) —— */
    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
    --sh-1: 0 1px 3px rgba(24, 44, 97, .06);
    --sh-2: 0 6px 18px rgba(24, 44, 97, .08);
    --sh-3: 0 16px 40px rgba(24, 44, 97, .12);

    /* —— Tipografi —— */
    --font-display: 'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* —— Alias yang dipakai markup lama —— */
    --tm-accent: var(--app-accent);
    --tm-accent-hover: var(--app-accent-600);
    --tm-accent-soft: var(--app-accent-bg);
    --tm-ink: var(--ink-900);
    --tm-line: var(--line);
    --tm-ground: var(--mist);
    --tm-neg: var(--danger);
    --tm-pos: var(--success);

    --nav-w: 264px;
    --bar-h: 60px;
}

/* ---------------------------------------------------------------- dasar */

body {
    font-family: var(--font-body);
    background: var(--mist);
    color: var(--ink-700);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    color: var(--ink-900);
    font-weight: 600;
    letter-spacing: -.01em;
}
h1.h4 { font-size: 1.32rem; font-weight: 700; }

a { color: var(--navy-700); text-decoration: none; }
a:hover { color: var(--navy); }

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(24, 44, 97, .18);
    border-radius: var(--r-sm);
}

.text-body-secondary { color: var(--ink-500) !important; }
.text-body-tertiary { color: var(--ink-300) !important; }

/* Label kelompok di atas judul layar */
.kicker {
    font-family: var(--font-display);
    font-size: .69rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--ink-300);
}

/* ------------------------------------------------------------- bilah atas */

.app-bar {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    z-index: 1030;
}
.app-bar > div { min-height: var(--bar-h); }

/* Brand lockup emesys: wordmark Poppins 800 + titik emas "denyut" */
.app-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--ink-900);
    font-family: var(--font-display);
    font-weight: 700;
}
.app-brand:hover { color: var(--ink-900); }

.app-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    background: var(--navy);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .95rem;
    flex: none;
    letter-spacing: -.02em;
}

.app-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -.02em;
    display: inline-flex;
    align-items: flex-start;
}
/* Titik emas hanya sekali di layar — inilah "denyut" emesys */
.app-name::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    margin-left: 3px;
    margin-top: 3px;
    flex: none;
}

/*
 * Deskriptor di samping merek, dipisah garis tipis dan bukan tanda baca.
 * Begitu layar menyempit deskriptornya disembunyikan; kalau pemisahnya
 * berupa titik atau tanda hubung, tandanya akan tertinggal menggantung.
 */
.app-sub {
    font-size: .78rem;
    font-weight: 400;
    color: var(--ink-300);
    padding-left: .62rem;
    border-left: 1px solid var(--line);
    white-space: nowrap;
}

.btn-nav {
    border: 0;
    background: none;
    color: var(--ink-700);
    border-radius: var(--r-sm);
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.btn-nav:hover { background: var(--mist); color: var(--navy); }
.btn-nav.dropdown-toggle::after { margin-left: .4rem; opacity: .4; }

.avatar {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--navy-100);
    color: var(--navy);
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 700;
    flex: none;
}

.dropdown-menu {
    border: 1px solid var(--line);
    box-shadow: var(--sh-2);
    border-radius: var(--r-md);
    padding: .35rem;
    font-size: .875rem;
}
.dropdown-item { border-radius: var(--r-sm); padding: .45rem .65rem; }
.dropdown-item:hover { background: var(--mist); color: var(--navy); }
.dropdown-header { padding: .5rem .65rem; }
.dropdown-divider { border-color: var(--line); }

/* --------------------------------------------------------------- kerangka */

.app-body { display: flex; align-items: stretch; }

/*
 * Sidebar navy — tanda tangan emesys. Menu di atas latar gelap membuat
 * area kerja putih terasa lebih terang dan fokus ke data.
 */
.app-side {
    background: var(--navy-900);
    color: rgba(255, 255, 255, .82);
    border-right: 0;
}

@media (min-width: 992px) {
    .app-side {
        width: var(--nav-w);
        flex: none;
        padding: .6rem 0 1.5rem;
        position: sticky;
        top: var(--bar-h);
        align-self: flex-start;
        /*
         * !important WAJIB di sini. Bootstrap memaksa
         * `.offcanvas-lg { background-color: transparent !important }`
         * begitu lebar layar melewati lg, sehingga latar navy hilang dan
         * teks putih menu jatuh di atas latar putih — tidak terbaca.
         */
        background-color: var(--navy-900) !important;
        /* Panel navy selalu setinggi layar, walau menunya pendek */
        min-height: calc(100vh - var(--bar-h));
        max-height: calc(100vh - var(--bar-h));
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .22) transparent;
    }
    .app-side::-webkit-scrollbar { width: 8px; }
    .app-side::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .16);
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    .offcanvas-lg.offcanvas-start.app-side { visibility: visible; }
}

/* Kepala off-canvas di layar kecil ikut gelap */
.app-side .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.app-side .offcanvas-title { color: #fff; font-family: var(--font-display); font-size: 1rem; }
.app-side .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .7; }

.app-main {
    flex: 1 1 auto;
    min-width: 0;               /* RSP-02 — cegah anak melebarkan halaman */
    padding: 1.5rem 1.65rem 3.5rem;
    max-width: 1520px;
}

.side-group {
    font-family: var(--font-display);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(255, 255, 255, .38);
    font-weight: 600;
    padding: 1.1rem 1.15rem .4rem;
}
.side-group:first-child { padding-top: .5rem; }

.side-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .8rem;
    margin: 2px .65rem;
    border-radius: var(--r-md);
    color: rgba(255, 255, 255, .82);
    min-height: 40px;
    font-size: .875rem;
    font-weight: 500;
    background: transparent;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s, color .15s;
}
.side-link:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
}

/* Item aktif: latar terang + garis emas di kiri — pola emesys */
.side-link.active {
    background: #2a3a57;
    border-color: transparent;
    box-shadow: inset 3px 0 0 var(--gold);
    color: #fff;
    font-weight: 600;
}
.side-link.active:hover { background: #2a3a57; color: #fff; }

.side-link.disabled { color: rgba(255, 255, 255, .35); cursor: default; }
.side-link.disabled:hover { background: none; border-color: transparent; }

.side-ikon {
    width: 1.2rem;
    text-align: center;
    font-size: .95rem;
    flex: none;
    opacity: .7;
}
.side-link.active .side-ikon { opacity: 1; color: var(--gold); }

/* Penanda tautan yang membuka tab baru */
.side-baru {
    margin-left: auto;
    font-size: .72rem;
    opacity: .45;
    flex: none;
}

/* ---------------------------------------------------------------- kartu */

.panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    overflow: hidden;
}

.panel > .panel-head {
    padding: .85rem 1.15rem .7rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--ink-500);
}

.panel > .panel-body { padding: 1.15rem; }
.panel > .panel-body.py-2 { padding-top: .7rem; padding-bottom: .7rem; }

/* ---------------------------------------------------------------- tabel */

.table {
    font-size: .845rem;
    --bs-table-bg: transparent;
    margin-bottom: 0;
    color: var(--ink-900);
}

.table > thead > tr > th {
    background: var(--paper);
    font-family: var(--font-display);
    font-size: .715rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 600;
    color: var(--ink-500);
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
    padding: .7rem .65rem;
    vertical-align: bottom;
}

.table > tbody > tr > td {
    padding: .68rem .65rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    color: var(--ink-900);
}
.table > tbody > tr:last-child > td { border-bottom: 0; }

.table-hover > tbody > tr:hover > * {
    background: var(--mist);
    --bs-table-accent-bg: transparent;
}

.table > tfoot > tr > td {
    background: var(--mist);
    border-top: 1px solid var(--line);
    border-bottom: 0;
    font-weight: 600;
    color: var(--ink-900);
    padding: .7rem .65rem;
}

.table-responsive { border-radius: var(--r-lg); }
.table-responsive > .table.bg-white {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-1);
}

/*
 * Angka memakai JetBrains Mono — di ekosistem emesys huruf mono dipakai
 * untuk data yang harus dibaca tepat digit demi digit. Di aplikasi ini
 * itu berarti rupiah dan kilogram.
 */
.angka {
    font-family: var(--font-mono);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    letter-spacing: -.02em;
}
th.angka { font-family: var(--font-display); font-size: .715rem; text-align: right; letter-spacing: .03em; }

.saldo-negatif { color: var(--danger); font-weight: 500; }
.text-success { color: var(--success) !important; }

.baris-saldo-awal { background: var(--app-accent-bg) !important; font-weight: 600; }
.baris-saldo-awal > td { color: var(--app-accent-600); }

.table tbody tr td[colspan] {
    color: var(--ink-500);
    text-align: center;
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
}

/* ------------------------------------------------------------ kartu angka */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: .85rem;
    background: transparent;
    border: 0;
    margin-bottom: 1.25rem;
}

.tile {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    padding: 1rem 1.1rem 1.05rem;
}

.tile .lbl {
    font-family: var(--font-display);
    font-size: .69rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-500);
    font-weight: 600;
}

.tile .val {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.42rem;
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: 1.2;
    margin-top: .35rem;
    color: var(--ink-900);
}

.tile .sub { font-size: .745rem; color: var(--ink-300); margin-top: .2rem; }

/* Kartu utama ditandai garis atas aksen aplikasi */
.tile[style*="border-top"] {
    border-top: 1px solid var(--line) !important;
    box-shadow: var(--sh-1), inset 0 3px 0 var(--app-accent);
}

/* ---------------------------------------------------------------- tombol */

.btn {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .855rem;
    padding: .55rem .95rem;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition: background .15s, border-color .15s, filter .15s;
}
.btn-sm { font-size: .785rem; padding: .38rem .7rem; border-radius: var(--r-sm); }

.btn-primary {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus { background: var(--navy-700); border-color: var(--navy-700); }

.btn-outline-secondary {
    background: var(--paper);
    color: var(--navy);
    border-color: var(--line);
}
.btn-outline-secondary:hover {
    background: var(--mist);
    border-color: var(--ink-300);
    color: var(--navy);
}

.btn-outline-warning { background: var(--warning-bg); color: var(--warning); border-color: transparent; }
.btn-outline-warning:hover { background: #f9e2c6; color: var(--warning); }

.btn-secondary { background: var(--ink-500); border-color: var(--ink-500); }
.btn-danger { background: var(--danger); border-color: var(--danger); }

.btn-link { color: var(--navy-700); font-weight: 500; font-family: var(--font-body); }
.btn-link:hover { color: var(--navy); text-decoration: underline; }

/*
 * CTA emas — "denyut" emesys. SATU per layar, hanya untuk tindakan utama
 * pembuatan data ("+ Panen Baru", "+ Transaksi").
 *
 * Kelasnya dipasang eksplisit di markup, bukan dipilih lewat posisi
 * (`div:first-of-type` dan sejenisnya). Selektor berbasis struktur akan
 * berpindah sendiri begitu tata letak berubah, dan denyutnya bisa
 * mendarat di tombol yang salah.
 */
.btn-emas {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
}
.btn-emas:hover,
.btn-emas:focus {
    background: var(--gold-600);
    border-color: var(--gold-600);
    color: var(--navy);
}

/* ----------------------------------------------------------------- form */

.form-label {
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 500;
    color: var(--ink-700);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: .35rem;
}

.form-control,
.form-select {
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink-900);
    border-radius: var(--r-md);
    padding: .55rem .8rem;
    font-size: .875rem;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(24, 44, 97, .12);
}
.form-control::placeholder { color: var(--ink-300); }

.form-control[readonly] {
    background: var(--mist);
    border-style: dashed;
    color: var(--ink-500);
}

/* Isian angka ikut memakai mono agar sejajar dengan tampilannya di tabel */
.form-control.angka { font-family: var(--font-mono); }

.form-text { font-size: .765rem; color: var(--ink-500); }
.invalid-feedback { font-size: .78rem; color: var(--danger); }
.is-invalid { border-color: var(--danger) !important; }

.form-check-input:checked { background-color: var(--navy); border-color: var(--navy); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(24, 44, 97, .12); }

.table .form-control-sm,
.table .form-select-sm {
    font-size: .8rem;
    padding: .3rem .5rem;
    border-radius: var(--r-sm);
}

/* ------------------------------------------------------- pil status */

/* Lencana bergaya pil emesys — latar semantik lembut, teks berwarna sama */
.badge {
    font-family: var(--font-display);
    font-size: .69rem;
    font-weight: 600;
    padding: .3em .7em;
    border-radius: var(--r-pill);
    letter-spacing: .01em;
}
.text-bg-light { background: var(--mist) !important; color: var(--ink-500) !important; border: 0 !important; }
.text-bg-success { background: var(--success-bg) !important; color: var(--success) !important; }
.text-bg-warning { background: var(--warning-bg) !important; color: var(--warning) !important; }
.text-bg-danger { background: var(--danger-bg) !important; color: var(--danger) !important; }
.text-bg-secondary { background: var(--navy-100) !important; color: var(--navy-700) !important; }
.text-bg-dark { background: var(--navy) !important; color: #fff !important; }

/* --------------------------------------------------------------- pesan */

.alert {
    border: 1px solid transparent;
    border-radius: var(--r-md);
    padding: .85rem 1.05rem;
    font-size: .875rem;
    margin-bottom: 1.25rem;
}
.alert-success { background: var(--success-bg); color: #14663f; border-color: #c6e8d7; }
.alert-danger  { background: var(--danger-bg);  color: #9c2727; border-color: #f2cccc; }
.alert-warning { background: var(--warning-bg); color: #8a4c07; border-color: #f5d9b4; }
.alert-info    { background: var(--info-bg);    color: #1c4b9c; border-color: #c9dbf6; }
.alert-secondary { background: var(--mist); color: var(--ink-500); border-color: var(--line); }
.alert-link { font-weight: 600; text-decoration: underline; }

/* ------------------------------------------------------------ kemajuan */

.progress { background: var(--line); border-radius: var(--r-pill); }
.progress-bar { background: var(--app-accent); }
.progress-bar.bg-success { background: var(--success) !important; }

/* --------------------------------------------------- daftar rincian */

.list-group-item {
    border-color: var(--line);
    padding: .7rem 1.15rem;
    font-size: .875rem;
    color: var(--ink-900);
}

/* --------------------------------------------------------- halaman masuk */

/* Latar navy bergradasi — pintu masuk seluruh aplikasi emesys */
.login-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(1200px 600px at 50% -10%, var(--navy-800), var(--navy-900));
}

.login-card {
    background: var(--paper);
    border: 0;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    padding: 34px 30px 30px;
    width: 100%;
    max-width: 380px;
}
.login-card .app-mark { width: 38px; height: 38px; font-size: 1.05rem; }
.login-merek {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -.02em;
    color: var(--ink-900);
    line-height: 1.15;
}
.login-card .btn-primary { border-radius: var(--r-md); padding: .65rem; font-size: .92rem; }

/* ------------------------------------------------------------- penomoran */

.pagination { margin-bottom: 0; gap: .25rem; }
.page-link {
    color: var(--navy-700);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: .82rem;
    padding: .32rem .68rem;
}
.page-link:hover { background: var(--mist); color: var(--navy); }
.active > .page-link { background: var(--navy); border-color: var(--navy); color: #fff; }
.disabled > .page-link { color: var(--ink-300); }

/* ------------------------------------------------------- telepon genggam */

@media (max-width: 991.98px) {
    .app-side { width: 84vw; max-width: 300px; }
    .app-main { padding: 1.2rem 1rem 2.5rem; }
}

@media (max-width: 575.98px) {
    .app-main { padding: .9rem .75rem 2rem; }
    h1.h4 { font-size: 1.18rem; }

    /* RSP-10 — di bawah 16px, iOS Safari memperbesar tampilan saat fokus */
    .form-control,
    .form-select,
    input,
    select,
    textarea {
        font-size: 16px !important;
        min-height: 44px;
    }
    .table .form-control-sm,
    .table .form-select-sm { min-height: 40px; }

    /* RSP-04 — sasaran sentuh minimal 44px */
    .btn { min-height: 44px; }
    .btn-nav { min-height: 44px; min-width: 44px; }
    .btn-link { min-height: auto; }
    .side-link { min-height: 44px; }

    .tiles { grid-template-columns: 1fr 1fr; gap: .65rem; }
    .tile { padding: .8rem .85rem; }
    .tile .val { font-size: 1.12rem; }

    .table > thead > tr > th,
    .table > tbody > tr > td { padding: .6rem .5rem; }
    .angka { font-size: .78rem; }

    /* Kolom pertama dibekukan agar acuan baris tidak hilang saat digeser */
    .table-beku td:first-child,
    .table-beku th:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--paper);
        box-shadow: 1px 0 0 var(--line);
    }
    .table-beku tfoot td:first-child { background: var(--mist); }
    .table-hover > tbody > tr:hover > td:first-child { background: var(--mist); }
}

/* ------------------------------------------------------------------ cetak */

@media print {
    .app-side,
    .app-bar,
    .d-print-none,
    .pagination { display: none !important; }

    .app-main { padding: 0; max-width: none; }
    body { background: #fff; font-size: 11pt; color: #000; }
    .panel, .tile { border-color: #bbb; box-shadow: none; break-inside: avoid; }
    .tiles { gap: .4rem; }
    a { color: inherit; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}