/* =====================================================================
   Kasku — app.css
   Bootstrap 5.3 sudah menyediakan dark mode lewat [data-bs-theme].
   File ini hanya menambah token milik aplikasi dan komponen layout.
   ===================================================================== */

:root {
    --sidebar-width: 260px;
    --navbar-height: 60px;

    --kasku-income:   #198754;
    --kasku-expense:  #dc3545;
    --kasku-transfer: #6c757d;

    --radius-card: 12px;
    --radius-ctrl: 8px;
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
}

/* Angka nominal pakai font monospace supaya digitnya rata secara vertikal,
   yang membuat perbandingan antar baris jauh lebih mudah dibaca. */
.num {
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.card { border-radius: var(--radius-card); }
.form-control, .form-select, .btn, .input-group-text { border-radius: var(--radius-ctrl); }
.input-group > .form-control:not(:last-child),
.input-group > .input-group-text:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .form-control:not(:first-child),
.input-group > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ---------------------------------------------------------------------
   Halaman login
   --------------------------------------------------------------------- */
.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-tertiary-bg);
}

.auth-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 1.5rem;
}

.auth-card { border-radius: 16px; }

.auth-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.75rem;
    color: #fff;
    background: var(--bs-primary);
}

.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

/* ---------------------------------------------------------------------
   Shell aplikasi
   --------------------------------------------------------------------- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background-color: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .app-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        visibility: visible !important;
        transform: none !important;
    }
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    height: var(--navbar-height);
    padding: 0 1.25rem;
    font-weight: 600;
    font-size: 1.125rem;
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-primary);
}

.sidebar-nav {
    padding: .75rem;
    overflow-y: auto;
    flex: 1;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .875rem;
    margin-bottom: .125rem;
    border-radius: var(--radius-ctrl);
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: .9375rem;
    transition: background-color .15s ease, color .15s ease;
}

.sidebar-link:hover:not(.disabled) {
    background-color: var(--bs-secondary-bg);
}

.sidebar-link.active {
    background-color: var(--bs-primary);
    color: #fff;
}

.sidebar-link.disabled {
    opacity: .45;
    pointer-events: none;
}

.sidebar-link i { font-size: 1.0625rem; width: 1.25rem; }

.sidebar-divider {
    height: 1px;
    background-color: var(--bs-border-color);
    margin: .75rem .5rem;
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-navbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: var(--navbar-height);
    padding: 0 1.25rem;
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.navbar-title {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
}

.app-content {
    padding: 1.5rem 1.25rem 3rem;
    flex: 1;
    background-color: var(--bs-tertiary-bg);
}

@media (min-width: 992px) {
    .app-content { padding: 1.75rem 2rem 3rem; }
}

/* ---------------------------------------------------------------------
   Kartu rekening
   --------------------------------------------------------------------- */
.account-card {
    border-top: 3px solid var(--account-color, var(--bs-primary)) !important;
    border-radius: var(--radius-card);
}

.account-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.125rem;
    color: var(--account-color, var(--bs-primary));
    background-color: color-mix(in srgb, var(--account-color, #0d6efd) 14%, transparent);
}

/* ---------------------------------------------------------------------
   Kartu statistik
   --------------------------------------------------------------------- */
.stat-card { border-top: 3px solid var(--bs-primary) !important; }
.stat-card--success   { border-top-color: var(--kasku-income) !important; }
.stat-card--danger    { border-top-color: var(--kasku-expense) !important; }
.stat-card--secondary { border-top-color: var(--kasku-transfer) !important; }

.stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: .9375rem;
    color: var(--bs-secondary-color);
    background-color: var(--bs-secondary-bg);
    flex-shrink: 0;
}

.stat-value {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

@media (min-width: 1400px) {
    .stat-value { font-size: 1.5rem; }
}

/* ---------------------------------------------------------------------
   Grafik
   --------------------------------------------------------------------- */

/* Chart.js dengan maintainAspectRatio:false mengikuti tinggi induknya.
   Tanpa tinggi eksplisit di sini, canvas akan tumbuh tanpa batas pada
   setiap resize karena induk dan anak saling menunggu ukuran. */
.chart-box {
    position: relative;
    height: 240px;
}

.chart-box--tall { height: 300px; }

@media (min-width: 992px) {
    .chart-box--tall { height: 320px; }
}

.legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Tabel transaksi
   --------------------------------------------------------------------- */
.trx-table > :not(caption) > * > * { padding-top: .55rem; padding-bottom: .55rem; }
.trx-table tr:last-child > * { border-bottom-width: 0; }

.trx-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: .875rem;
    background-color: var(--bs-secondary-bg);
}

.min-w-0 { min-width: 0; }

/* ---------------------------------------------------------------------
   Pencarian cepat
   --------------------------------------------------------------------- */
.quick-search { position: relative; width: min(340px, 42vw); }

@media (max-width: 575.98px) {
    .quick-search { width: 100%; }
}

.quick-results {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 380px;
    overflow-y: auto;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-ctrl);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.quick-result {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    color: var(--bs-body-color);
    text-decoration: none;
    border-bottom: 1px solid var(--bs-border-color);
}

.quick-result:last-child { border-bottom: 0; }
.quick-result:hover { background-color: var(--bs-tertiary-bg); }

/* ---------------------------------------------------------------------
   Kalender
   --------------------------------------------------------------------- */
.calendar-grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 3px;
}

.calendar-grid th {
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-align: center;
    padding-bottom: .25rem;
}

.calendar-cell {
    vertical-align: top;
    border-radius: var(--radius-ctrl);
    /* Intensitas mengikuti besarnya pengeluaran hari itu */
    background-color: color-mix(in srgb, var(--kasku-expense) calc(var(--heat, 0) * 100%), var(--bs-tertiary-bg));
}

.calendar-cell.is-outside { opacity: .38; }

.calendar-cell.is-today { outline: 2px solid var(--bs-primary); outline-offset: -2px; }

.calendar-cell.is-selected {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
    background-color: var(--bs-primary-bg-subtle);
}

.calendar-link {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 72px;
    padding: .35rem .4rem;
    color: inherit;
    text-decoration: none;
}

.calendar-day { font-size: .8125rem; font-weight: 500; }

.calendar-amount {
    font-size: .625rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .calendar-link { min-height: 56px; padding: .25rem; }
    .calendar-amount { font-size: .5625rem; }
}

/* ---------------------------------------------------------------------
   Transfer
   --------------------------------------------------------------------- */
.effect-side {
    padding: .625rem .75rem;
    border-radius: var(--radius-ctrl);
    background-color: var(--bs-tertiary-bg);
}

.allocation-row { padding-bottom: .25rem; }

@media (max-width: 575.98px) {
    .allocation-row {
        border-bottom: 1px solid var(--bs-border-color);
        padding-bottom: .75rem;
        margin-bottom: .75rem !important;
    }
}

/* ---------------------------------------------------------------------
   Riwayat transaksi
   --------------------------------------------------------------------- */
.trx-row { cursor: pointer; }
.trx-row:hover { background-color: var(--bs-tertiary-bg); }

/* Baris pemisah tanggal.
   Sengaja TIDAK position:sticky: .table-responsive mengeset overflow-x,
   dan menurut spesifikasi CSS itu membuat overflow-y ikut terhitung
   'auto' — .table-responsive diam-diam jadi scroll container sendiri,
   sehingga elemen sticky menempel ke situ (yang tingginya mengikuti
   konten, jadi efeknya tidak terlihat) bukan ke halaman. */
.trx-daygroup th {
    background-color: var(--bs-secondary-bg);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    padding: .375rem .75rem;
    border-bottom: 0;
}

.table-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: start center;
    padding-top: 3rem;
    z-index: 5;
    background-color: color-mix(in srgb, var(--bs-body-bg) 55%, transparent);
    border-radius: var(--radius-card);
}

.detail-list dt {
    font-weight: 500;
    color: var(--bs-secondary-color);
    padding-block: .4rem;
}

.detail-list dd { padding-block: .4rem; margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Ikon kategori
   --------------------------------------------------------------------- */
.cat-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: .9375rem;
    color: var(--cat-color, var(--bs-primary));
    background-color: color-mix(in srgb, var(--cat-color, #0d6efd) 14%, transparent);
    flex-shrink: 0;
}

.cat-icon--lg {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 1.375rem;
}

/* ---------------------------------------------------------------------
   Pemilih warna & ikon
   --------------------------------------------------------------------- */
.color-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--swatch);
    cursor: pointer;
    border: 3px solid transparent;
    box-shadow: 0 0 0 1px var(--bs-border-color);
    transition: transform .12s ease;
}

.color-swatch:hover { transform: scale(1.08); }

.color-input:checked + .color-swatch {
    border-color: var(--bs-body-bg);
    box-shadow: 0 0 0 2px var(--swatch);
}

/* Fokus keyboard harus tetap terlihat: input aslinya disembunyikan
   oleh .btn-check, jadi cincin fokusnya dipindah ke label. */
.color-input:focus-visible + .color-swatch,
.icon-input:focus-visible + .icon-swatch {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: .5rem;
}

.icon-swatch {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    font-size: 1.125rem;
    border-radius: var(--radius-ctrl);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.icon-swatch:hover { background-color: var(--bs-secondary-bg); }

.icon-input:checked + .icon-swatch {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* ---------------------------------------------------------------------
   Utilitas
   --------------------------------------------------------------------- */
.text-income   { color: var(--kasku-income) !important; }
.text-expense  { color: var(--kasku-expense) !important; }
.text-transfer { color: var(--kasku-transfer) !important; }

/* Tombol yang sedang memproses: spinner muncul, label diredupkan */
.btn[data-loading].is-loading {
    pointer-events: none;
    position: relative;
    color: transparent !important;
}

.btn[data-loading].is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    color: #fff;
    animation: kasku-spin .6s linear infinite;
}

@keyframes kasku-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .btn[data-loading].is-loading::after { animation-duration: 2s; }
    .sidebar-link { transition: none; }
}

/* Cetak: sembunyikan navigasi */
@media print {
    .app-sidebar, .app-navbar, .toast-container, .theme-toggle { display: none !important; }
    .app-content { padding: 0; background: #fff; }
}

/* =====================================================================
   TEMA XEOKAS
   Mengambil identitas visual xeori.my.id: gelap kecokelatan dengan
   aksen emas, bernuansa medieval.

   Seluruh warna dikumpulkan di blok token di bawah. Untuk menyamakan
   persis dengan situs Anda, cukup ganti nilai hex di sini — tidak perlu
   menyentuh bagian lain berkas ini.
   ===================================================================== */

:root {
    /* Aksen emas */
    --xk-gold:        #d4a544;
    --xk-gold-bright: #f0c46a;
    --xk-gold-deep:   #a87b28;

    /* Netral kecokelatan */
    --xk-ink:         #1c1410;   /* paling gelap  */
    --xk-surface:     #241a15;
    --xk-raised:      #2e221b;
    --xk-line:        #3d2e24;

    /* Netral terang untuk mode terang */
    --xk-parchment:   #faf6ef;
    --xk-parchment-2: #f2ebdf;
    --xk-line-light:  #e2d7c4;

    --radius-card: 10px;
    --radius-ctrl: 7px;
}

/* ---------------------------------------------------------------------
   Tipografi

   Cinzel HANYA untuk logo, judul halaman, dan angka besar. Ia serif
   berkarakter kuat tapi lelah dibaca dalam kalimat panjang — teks
   antarmuka tetap memakai Inter supaya tetap terbaca jelas.
   --------------------------------------------------------------------- */
.sidebar-brand,
.navbar-title,
.auth-card h1,
.stat-value,
h1, h2, h3,
.h1, .h2, .h3 {
    font-family: 'Cinzel', Georgia, serif;
    letter-spacing: .02em;
}

.sidebar-brand,
.auth-card h1 {
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* Judul kartu dan label tetap Inter: ukurannya kecil, dan Cinzel pada
   ukuran kecil kehilangan keterbacaan justru di tempat yang paling
   sering dibaca sekilas. */
h4, h5, h6, .h4, .h5, .h6,
.card-header h2, .form-label, .navbar-title small {
    font-family: 'Inter', system-ui, sans-serif;
    text-transform: none;
    letter-spacing: 0;
}

body {
    font-size: 15px;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------
   Mode gelap — tampilan utama
   --------------------------------------------------------------------- */
[data-bs-theme="dark"] {
    --bs-body-bg:            var(--xk-ink);
    --bs-body-color:         #e8ddcc;
    --bs-emphasis-color:     #fdf8ef;
    --bs-secondary-color:    #a99880;
    --bs-secondary-bg:       var(--xk-raised);
    --bs-tertiary-bg:        var(--xk-surface);
    --bs-border-color:       var(--xk-line);

    --bs-primary:            var(--xk-gold);
    --bs-primary-rgb:        212, 165, 68;
    --bs-link-color:         var(--xk-gold-bright);
    --bs-link-hover-color:   #ffdb90;

    --kasku-income:          #7bb87a;
    --kasku-expense:         #d97a6c;
    --kasku-transfer:        #b9a68c;
}

[data-bs-theme="dark"] body {
    background-image:
        radial-gradient(900px 500px at 12% -10%, rgba(212,165,68,.07), transparent 60%),
        radial-gradient(700px 420px at 100% 0%, rgba(168,123,40,.05), transparent 55%);
    background-attachment: fixed;
}

[data-bs-theme="dark"] .card {
    background-color: var(--xk-surface);
    border: 1px solid var(--xk-line) !important;
}

[data-bs-theme="dark"] .app-sidebar,
[data-bs-theme="dark"] .app-navbar {
    background-color: var(--xk-surface);
    border-color: var(--xk-line);
}

[data-bs-theme="dark"] .app-content {
    background-color: var(--xk-ink);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--xk-ink);
    border-color: var(--xk-line);
    color: #e8ddcc;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--xk-gold);
    box-shadow: 0 0 0 .2rem rgba(212, 165, 68, .18);
}

[data-bs-theme="dark"] .table { --bs-table-color: #e8ddcc; }
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--xk-raised);
    border-color: var(--xk-line);
}
[data-bs-theme="dark"] .dropdown-item { color: #e8ddcc; }
[data-bs-theme="dark"] .dropdown-item:hover { background-color: var(--xk-surface); }

/* ---------------------------------------------------------------------
   Mode terang — perkamen, bukan putih menyilaukan
   --------------------------------------------------------------------- */
[data-bs-theme="light"] {
    --bs-body-bg:         #ffffff;
    --bs-body-color:      #2b211a;
    --bs-secondary-color: #6b5b4a;
    --bs-secondary-bg:    var(--xk-parchment-2);
    --bs-tertiary-bg:     var(--xk-parchment);
    --bs-border-color:    var(--xk-line-light);

    --bs-primary:         var(--xk-gold-deep);
    --bs-primary-rgb:     168, 123, 40;
    --bs-link-color:      #8a6420;
    --bs-link-hover-color:#6d4e17;

    --kasku-income:       #2f7d32;
    --kasku-expense:      #b5382c;
    --kasku-transfer:     #7a6a56;
}

[data-bs-theme="light"] .app-content { background-color: var(--xk-parchment); }

/* ---------------------------------------------------------------------
   Aksen emas pada elemen kunci
   --------------------------------------------------------------------- */
.sidebar-brand {
    color: var(--xk-gold);
    border-bottom: 1px solid var(--xk-line);
    gap: .5rem;
}

[data-bs-theme="light"] .sidebar-brand {
    color: var(--xk-gold-deep);
    border-bottom-color: var(--xk-line-light);
}

.sidebar-link.active {
    background-color: rgba(212, 165, 68, .16);
    color: var(--xk-gold-bright);
    border-left: 3px solid var(--xk-gold);
    padding-left: calc(.875rem - 3px);
}

[data-bs-theme="light"] .sidebar-link.active {
    background-color: rgba(168, 123, 40, .12);
    color: var(--xk-gold-deep);
    border-left-color: var(--xk-gold-deep);
}

.btn-primary {
    background-color: var(--xk-gold-deep);
    border-color: var(--xk-gold-deep);
    color: #fff8e8;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--xk-gold);
    border-color: var(--xk-gold);
    color: #1c1410;
}

[data-bs-theme="dark"] .btn-primary {
    background-color: var(--xk-gold);
    border-color: var(--xk-gold);
    color: #1c1410;
}

[data-bs-theme="dark"] .btn-primary:hover {
    background-color: var(--xk-gold-bright);
    border-color: var(--xk-gold-bright);
}

.btn-outline-secondary {
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Garis emas tipis di atas kartu statistik, menggantikan warna Bootstrap */
.stat-card { border-top-color: var(--xk-gold) !important; }
.stat-card--success   { border-top-color: var(--kasku-income) !important; }
.stat-card--danger    { border-top-color: var(--kasku-expense) !important; }
.stat-card--secondary { border-top-color: var(--kasku-transfer) !important; }

.stat-icon {
    color: var(--xk-gold);
    background-color: rgba(212, 165, 68, .12);
}

[data-bs-theme="light"] .stat-icon {
    color: var(--xk-gold-deep);
    background-color: rgba(168, 123, 40, .1);
}

/* ---------------------------------------------------------------------
   Halaman login
   --------------------------------------------------------------------- */
.auth-body {
    background-color: var(--xk-ink);
    background-image:
        radial-gradient(800px 460px at 50% -10%, rgba(212,165,68,.12), transparent 62%);
}

[data-bs-theme="light"] .auth-body {
    background-color: var(--xk-parchment);
    background-image:
        radial-gradient(800px 460px at 50% -10%, rgba(168,123,40,.10), transparent 62%);
}

.auth-card {
    border: 1px solid var(--bs-border-color) !important;
    border-top: 3px solid var(--xk-gold) !important;
}

.auth-logo {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    background: none;
    border-radius: 0;
}

.auth-card h1 { font-size: 1.6rem; }

/* ---------------------------------------------------------------------
   Angka

   Tetap monospace bertabular supaya digit rata secara vertikal — itu
   yang membuat kolom nominal mudah dibandingkan sekilas.
   --------------------------------------------------------------------- */
.num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.stat-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600;
    letter-spacing: -.02em;
}

/* Kontras teks sekunder dinaikkan dari bawaan Bootstrap: di atas latar
   cokelat gelap, abu-abu standarnya turun di bawah ambang keterbacaan. */
[data-bs-theme="dark"] .text-body-secondary { color: #a99880 !important; }
[data-bs-theme="light"] .text-body-secondary { color: #6b5b4a !important; }