/**
 * Suka Duit - Application Styles
 *
 * @author      Tri Wicaksono
 * @copyright   Copyright (c) 2026 Tri Wicaksono
 * @product     Suka Duit
 * @license     Commercial License
 */

:root {
    --accent-h: 158;
    --accent-s: 78%;
    --accent-l: 40%;
    --font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --size-scale: 1;
    /* Paksa kontrol native (tombol file, scrollbar, dropdown) ikut mode APP,
       bukan mode OS. Tanpa ini, iPad/iPhone dark mode bikin tombol "Choose File"
       jadi abu gelap di tengah UI yang lagi light. daisyUI punya
       @media (prefers-color-scheme: dark) { :root { color-scheme: dark } }
       yang menang atas rule di bawah, jadi :root di sini wajib (spesifisitas
       sama, tapi sumbernya lebih akhir -> menang). */
    color-scheme: light;
}
[x-cloak] { display: none !important; }
html {
    font-size: calc(16px * var(--size-scale, 1));
}
html.dark {
    color-scheme: dark;
}
body {
    font-family: var(--font-family);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'tnum';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.chart-box { position: relative; height: 180px; }
input[inputmode="numeric"] { -webkit-user-select: text; font-feature-settings: 'tnum'; }
.sd-amount { font-feature-settings: 'tnum'; }

/* Accent utility classes using CSS variables */
.accent-bg       { background-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l, 40%)); }
.accent-gradient { background: linear-gradient(135deg, hsl(var(--accent-h), var(--accent-s), 55%), hsl(var(--accent-h), var(--accent-s), 40%)); }
.accent-bg-soft  { background-color: hsl(var(--accent-h), 65%, 96%); }
.accent-text     { color: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l, 40%) - 8%)); }
.accent-border   { border-color: hsl(var(--accent-h), var(--accent-s), 84%); }

.dark .accent-bg-soft { background-color: hsla(var(--accent-h), var(--accent-s), 40%, 0.15) !important; }
.dark .accent-text    { color: hsl(var(--accent-h), var(--accent-s), 65%) !important; }
.dark .accent-border  { border-color: hsla(var(--accent-h), var(--accent-s), 45%, 0.3) !important; }

/* Tombol "Choose File" di <input type="file">.
   Wajib ditulis di sini, BUKAN sebagai class di markup: varian `file:`
   cuma bisa nge-generate utility Tailwind, sedangkan .accent-bg-soft/.accent-text
   itu class custom -> `file:accent-bg-soft` menghasilkan 0 rule dan tombolnya
   jatuh ke default browser. Warna diambil dari accent yang sama dengan
   .accent-bg-soft/.accent-text supaya ikut ganti tema & mode. */
input[type="file"]::file-selector-button {
    background-color: hsl(var(--accent-h), 65%, 96%);
    color: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l, 40%) - 8%));
}
.dark input[type="file"]::file-selector-button {
    background-color: hsla(var(--accent-h), var(--accent-s), 40%, 0.15);
    color: hsl(var(--accent-h), var(--accent-s), 65%);
}

/* Custom Checkbox System (Anti-Bug Dark Mode & Pixel-Perfect Alignment) */
.sd-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
.sd-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.sd-check-box {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.375rem;
    border: 1.5px solid #cbd5e1;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.dark .sd-check-box {
    border-color: #475569;
    background-color: #1e293b;
}
.sd-check:hover .sd-check-box,
.sd-check-pill:hover .sd-check-box {
    border-color: hsl(var(--accent-h), var(--accent-s), 65%);
}
.sd-check input[type="checkbox"]:checked + .sd-check-box,
.sd-check-pill input[type="checkbox"]:checked + .sd-check-box {
    background-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l, 40%));
    border-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l, 40%));
}
.sd-check-box svg {
    width: 0.75rem;
    height: 0.75rem;
    color: #ffffff;
    display: none;
    stroke-width: 3;
}
.sd-check input[type="checkbox"]:checked + .sd-check-box svg,
.sd-check-pill input[type="checkbox"]:checked + .sd-check-box svg {
    display: block;
}

.sd-check-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.sd-check-pill input[type="checkbox"],
.sd-check-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.dark .sd-check-pill {
    border-color: #334155;
    background-color: #1e293b;
    color: #94a3b8;
}
.sd-check-pill:has(input:checked),
.sd-check-pill.is-active {
    border-color: hsl(var(--accent-h), var(--accent-s), 65%) !important;
    background-color: hsl(var(--accent-h), 65%, 96%) !important;
    color: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l, 40%) - 8%)) !important;
}
.dark .sd-check-pill:has(input:checked),
.dark .sd-check-pill.is-active {
    border-color: hsla(var(--accent-h), var(--accent-s), 45%, 0.4) !important;
    background-color: hsla(var(--accent-h), var(--accent-s), 40%, 0.15) !important;
    color: hsl(var(--accent-h), var(--accent-s), 65%) !important;
}

/* Pure CSS Zero-Flicker Collapsible Sidebar */
#app-sidebar {
    width: 16rem;
    height: 100vh;
    height: 100dvh;
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#app-sidebar-spacer {
    width: 16rem;
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-collapsed #app-sidebar,
.sidebar-collapsed #app-sidebar-spacer {
    width: 4.5rem; /* 72px */
}
.sidebar-text {
    transition: opacity 0.15s ease, max-width 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    max-width: 200px;
    opacity: 1;
}
.sidebar-collapsed .sidebar-text {
    max-width: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: none !important;
}
.sidebar-collapsed .sidebar-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
}
.sidebar-collapsed .sidebar-cta-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    justify-content: center !important;
}
.sidebar-collapsed .sidebar-cta-btn {
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 0.75rem !important;
}
.sidebar-collapsed .sidebar-cta-btn > span {
    width: 2.5rem !important;
    height: 2.5rem !important;
    background: transparent !important;
}
.sidebar-collapsed .sidebar-nav {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}
.sidebar-collapsed .sidebar-item {
    justify-content: center !important;
    padding: 0.5rem 0 !important;
    gap: 0 !important;
}
.sidebar-collapsed .sidebar-footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    justify-content: center !important;
}
.sidebar-collapsed .sidebar-footer-btn {
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 0.75rem !important;
}
.sidebar-collapsed .sidebar-footer-btn .sidebar-collapse-icon {
    left: 50% !important;
    transform: translate(-50%, -50%) rotate(180deg) !important;
}

/* Sidebar Footer Toggle Button Styling & Hover Consistency */
.sidebar-footer-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569; /* text-slate-600 */
    background-color: transparent;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}
.sidebar-footer-btn .sidebar-collapse-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.dark .sidebar-footer-btn {
    color: #94a3b8; /* text-slate-400 */
}
.sidebar-footer-btn:hover {
    background-color: #f1f5f9; /* slate-100 */
    border-color: #e2e8f0; /* slate-200 */
    color: #0f172a !important; /* text-slate-900 */
}
.dark .sidebar-footer-btn:hover {
    background-color: #27272a; /* zinc-800 */
    border-color: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
}

/* Fixed top navbar (seperti bottom bar) — offset selebar sidebar di desktop.
   Pakai CSS murni, bukan class Tailwind (inset-x-0/pt-14 gak ada di build). */
.app-header { left: 0; right: 0; transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.app-header-offset { margin-top: 3.5rem; } /* 56px = h-14, dorong konten di bawah navbar fixed */
@media (min-width: 768px) {
    .app-header { left: 16rem; }
    .sidebar-collapsed .app-header { left: 4.5rem; }
}

/* ── Mode standalone (Add to Home Screen) ──
   Di mode ini halaman mengisi seluruh layar, jadi area status bar iOS harus
   "dimiliki" header — bukan dibiarkan kosong nampilin body. Header TETAP di
   top:0, tingginya yang ditambah setinggi safe-area, jadi warna header nyambung
   sampai atas (kaya app native).
   Di-scope ke standalone doang: nilai env() memang 0 di mode browser, tapi
   kalau dipasang global ia bisa ikut berubah waktu scroll (toolbar Safari yang
   mengambang) dan bikin header lompat-lompat. */
@media (display-mode: standalone), (display-mode: fullscreen) {
    .app-header { padding-top: env(safe-area-inset-top, 0px); height: calc(3.5rem + env(safe-area-inset-top, 0px)); }
    .app-header-offset { margin-top: calc(3.5rem + env(safe-area-inset-top, 0px)); }
    .sd-theme-fab { top: calc(1rem + env(safe-area-inset-top, 0px)); }
}
html.sd-standalone .app-header { padding-top: env(safe-area-inset-top, 0px); height: calc(3.5rem + env(safe-area-inset-top, 0px)); }
html.sd-standalone .app-header-offset { margin-top: calc(3.5rem + env(safe-area-inset-top, 0px)); }
html.sd-standalone .sd-theme-fab { top: calc(1rem + env(safe-area-inset-top, 0px)); }

/* ── Responsive Panel Transitions (mobile=slide, desktop=scale) ── */
.tp-enter { transition: transform 0.24s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease-out; }
.tp-leave { transition: transform 0.18s ease-in, opacity 0.12s ease-in; }
@media (max-width: 639px) {
    .tp-from { transform: translateY(100%); }
    .tp-to   { transform: translateY(0); }
}
@media (min-width: 640px) {
    .tp-from { opacity: 0; transform: scale(0.95); }
    .tp-to   { opacity: 1; transform: scale(1); }
}

/* ── iOS keyboard: bottom-sheet ikut VISUAL viewport ──
   Pas keyboard iOS naik, window.innerHeight TIDAK nyusut — cuma
   visualViewport.height yang nyusut. Wrapper `fixed inset-0` jadi lebih
   tinggi dari area yang keliatan, sheet (items-end) nempel ke bawah LAYOUT
   viewport, dan muncul CELAH antara sheet & keyboard yang nampilin konten
   halaman belakang (keluhan "bottomnya bolong").
   --vvh / --vv-top di-set dari JS (lihat __SD_VV_SYNC di bawah), jadi
   wrapper pas persis sama area yang keliatan -> sheet otomatis duduk
   tepat di atas keyboard. */
.tp-modal-wrap {
    top: var(--vv-top, 0px);
    bottom: auto;
    height: var(--vvh, 100dvh);
}
/* Sheet gak boleh lebih tinggi dari area yang keliatan: max-h-[85vh] itu
   85% LAYOUT viewport, masih lebih tinggi dari area pas keyboard naik.
   Scoped ke mobile — desktop tetap pakai max-h-[85vh] yang lama.

   --vv-gap (di-set dari JS, lihat write() di bawah) = tinggi zona bawah yang
   "dipakai" Safari sendiri di iOS 26: bar alamat mengambang + bar aksesori
   keyboard. Padding-nya bikin:
     - PERMUKAAN sheet tetap nutup sampai dasar layout viewport, jadi bottom
       nav halaman gak kelihatan & gak bisa di-tap di celah itu;
     - ISI sheet berhenti di atas zona Safari, jadi tombol simpan gak duduk
       di balik bar alamat Safari. */
@media (max-width: 639px) {
    .tp-modal-wrap > div:not(.absolute) {
        max-height: 100%;
    }
    /* Padding bottom buat BOTTOM SHEET modal utama (bukan dropdown fixed/floating).
       Jaga jarak dasar komponen + safe-area + --vv-gap pas keyboard/Safari bar aktif */
    .tp-modal-wrap.items-end > div:not(.absolute):not(.fixed):not([class*="fixed"]) {
        padding-bottom: calc(1.75rem + var(--vv-gap, 0px) + env(safe-area-inset-bottom, 0px));
    }
}

/* ── iOS: cegah AUTO-ZOOM waktu input di-fokus ──
   Safari iOS men-zoom halaman kalau input yg di-fokus font-size-nya < 16px.
   Zoom itu bikin halaman "berubah" (keluhan user) DAN bikin geometri
   visualViewport melenceng, jadi sheet berhenti nggak pas di atas keyboard
   (celah "bottomnya bolong" ikut muncul lagi walau var-nya udah fresh).
   `maximum-scale=1` di meta viewport TIDAK cukup: Safari >= 10
   mengabaikannya (alasan aksesibilitas), jadi font-size inputnya yang
   di-floor. max(16px, 1em) = minimal 16px tapi hormati yg udah lebih besar.
   Input yang MEMANG besar (nominal: text-xl) dikecualikan biar gak mengecil. */
@media (max-width: 639px) {
    input:not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl),
    textarea:not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl),
    select:not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl) {
        /* !important WAJIB: telemetri device nunjukin ada input yg tetap
           15.12px (=0.875rem text-sm x 1.08) walau rule ini ada. Artinya di
           Safari ada rule lain yg menang (Tailwind utility / urutan sheet).
           Tanpa !important, floor-nya kadang kalah -> auto-zoom balik. */
        font-size: max(16px, 1em) !important;
    }
}
/* Scrim: tahan gesture scroll biar halaman di belakang gak ikut kebawa.
   Tap tetap jalan (@click="close()") — touch-action cuma matiin pan/zoom. */
.tp-modal-wrap > .absolute {
    touch-action: none;
    overscroll-behavior: contain;
}
/* Scroll lock dobel (html + body). Body doang gak cukup: body punya
   `overflow-x-hidden`, jadi overflow-nya gak ke-propagate ke viewport dan
   halaman tetap bisa di-scroll. */
html.sd-scroll-locked,
body.sd-scroll-locked { overflow: hidden !important; }

/* Modal: body modal sendiri tetap boleh scroll (sheet panjang), tapi
   jangan sampai scroll-nya nular ke halaman belakang. `contain` bikin
   rantai overscroll berhenti di modal, bukan diteruskan ke <html>. */
.tp-modal-wrap,
.tp-modal-wrap .sd-sheet,
.tp-modal-wrap > div[class*="overflow-y-auto"],
.tp-modal-wrap > div[class*="max-h-"] {
    overscroll-behavior: contain;
}
/* Modal body: kalau konten lebih tinggi dari layar, dia yang scroll. */
.tp-modal-wrap .sd-sheet {
    -webkit-overflow-scrolling: touch;
}

/* Modal Center Alignment (Viewport Center 50vw / 50vh) */
@media (min-width: 768px) {
    .tp-modal-wrap,
    .modal-wrap {
        align-items: center !important;
        justify-content: center !important;
        padding: 1.5rem !important;
    }
}

/* Universal Focus Ring using Active Accent Theme */
input:focus, select:focus, textarea:focus {
    --tw-ring-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l, 42%)) !important;
    border-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l, 42%)) !important;
}

::selection { background: hsl(var(--accent-h), var(--accent-s), 50%); color: white; }

/* Sleek scrollbar */
::-webkit-scrollbar { -webkit-appearance: none; width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Input tanggal */
input[type="date"] {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    color-scheme: light;
}
.dark input[type="date"],
html.dark input[type="date"] {
    color-scheme: dark;
}
input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    min-width: 0;
}
input[type="date"]::-webkit-datetime-edit {
    min-width: 0;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    display: block;
    opacity: 0.7;
    cursor: pointer;
    font-size: 16px;
    width: 18px;
    height: 18px;
    margin-left: auto;
    padding: 2px;
    transition: opacity 0.15s ease, transform 0.1s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    transform: scale(1.08);
}
.dark input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.85;
}
/* Hidden/transparent date inputs should never bleed native indicator */
input[type="date"].opacity-0::-webkit-calendar-picker-indicator,
input[type="date"][style*="opacity: 0"]::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    pointer-events: none;
}

/* ==========================================================================
   Global Dark Mode Styles & Overrides (True Neutral Dark / Charcoal Theme)
   ========================================================================== */
html.dark {
    background-color: #09090b !important;
}
html.dark body {
    background-color: #09090b !important;
    color: #f4f4f5 !important;
}

/* Cards, containers & surfaces */
.dark .bg-white {
    background-color: #18181b !important;
}
.dark .bg-white\/95,
.dark .bg-white\/90,
.dark .bg-white\/85 {
    background-color: rgba(24, 24, 27, 0.92) !important;
}
.dark .bg-slate-50,
.dark .bg-slate-50\/50,
.dark .bg-slate-50\/80,
.dark .bg-slate-100\/70,
.dark .bg-slate-100\/80 {
    background-color: #121215 !important;
}
.dark .bg-slate-100 {
    background-color: #27272a !important;
}
.dark .hover\:bg-slate-50:hover,
.dark .hover\:bg-slate-100:hover,
.dark .hover\:bg-slate-100\/80:hover {
    background-color: #27272a !important;
}
.dark .hover\:bg-slate-200:hover,
.dark .hover\:bg-slate-200\/80:hover {
    background-color: #3f3f46 !important;
}

/* Borders & dividers */
.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-200\/50,
.dark .border-slate-200\/60,
.dark .border-slate-200\/70,
.dark .border-slate-200\/80,
.dark .border-slate-300,
.dark .border-slate-700,
.dark .border-slate-700\/50,
.dark .border-slate-700\/60,
.dark .border-slate-700\/80,
.dark .border-slate-800,
.dark .hover\:border-slate-300:hover {
    border-color: rgba(255, 255, 255, 0.07) !important;
}
/* Colored borders — subtle dark variants */
.dark .border-blue-100,
.dark .border-blue-200,
.dark .border-blue-200\/80,
.dark .border-blue-300 {
    border-color: rgba(59, 130, 246, 0.2) !important;
}
.dark .border-amber-100,
.dark .border-amber-200,
.dark .border-amber-200\/80,
.dark .border-amber-300 {
    border-color: rgba(245, 158, 11, 0.2) !important;
}
.dark .border-emerald-100,
.dark .border-emerald-200,
.dark .border-emerald-200\/80,
.dark .border-emerald-300 {
    border-color: rgba(16, 185, 129, 0.2) !important;
}
.dark .border-rose-100,
.dark .border-rose-200,
.dark .border-rose-200\/80,
.dark .border-rose-300,
.dark .border-red-200,
.dark .border-red-200\/80 {
    border-color: rgba(244, 63, 94, 0.2) !important;
}
.dark .border-violet-100,
.dark .border-violet-200,
.dark .border-purple-100,
.dark .border-purple-200 {
    border-color: rgba(139, 92, 246, 0.2) !important;
}
.dark .border-cyan-100,
.dark .border-cyan-200,
.dark .border-teal-100,
.dark .border-teal-200 {
    border-color: rgba(6, 182, 212, 0.2) !important;
}
.dark .border-indigo-100,
.dark .border-indigo-200 {
    border-color: rgba(99, 102, 241, 0.2) !important;
}
.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.dark .divide-slate-100\/80 > :not([hidden]) ~ :not([hidden]),
.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
.dark .divide-slate-700\/60 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* Text Colors */
.dark .text-slate-900,
.dark .text-slate-800 {
    color: #fafafa !important;
}
.dark .text-slate-700 {
    color: #e4e4e7 !important;
}
.dark .text-slate-600 {
    color: #d4d4d8 !important;
}
.dark .text-slate-500 {
    color: #a1a1aa !important;
}
.dark .text-slate-400 {
    color: #a1a1aa !important;
}
.dark .text-slate-300 {
    color: #71717a !important;
}

/* Inputs, selects, and textareas */
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark select,
.dark textarea {
    background-color: #121215 !important;
    border-color: #27272a !important;
    color: #fafafa !important;
}
.dark input::placeholder,
.dark textarea::placeholder {
    color: #71717a !important;
}

/* Soft action buttons & badges (Edit, Hapus, Category count badges, etc.) */
.dark .bg-emerald-50,
.dark .bg-emerald-50\/40,
.dark .bg-emerald-50\/80 {
    background-color: rgba(16, 185, 129, 0.12) !important;
}
.dark .hover\:bg-emerald-100:hover {
    background-color: rgba(16, 185, 129, 0.22) !important;
}
.dark .text-emerald-700 {
    color: #34d399 !important;
}
.dark .bg-rose-50,
.dark .bg-rose-50\/40,
.dark .bg-rose-50\/80 {
    background-color: rgba(244, 63, 94, 0.12) !important;
}
.dark .hover\:bg-rose-100:hover {
    background-color: rgba(244, 63, 94, 0.22) !important;
}
.dark .text-rose-700,
.dark .text-rose-600 {
    color: #fb7185 !important;
}
.dark .bg-blue-50,
.dark .bg-blue-50\/40,
.dark .bg-blue-50\/80 {
    background-color: rgba(59, 130, 246, 0.12) !important;
}
.dark .hover\:bg-blue-100:hover {
    background-color: rgba(59, 130, 246, 0.22) !important;
}
.dark .text-blue-600,
.dark .text-blue-500 {
    color: #60a5fa !important;
}
.dark .bg-amber-50,
.dark .bg-amber-50\/40,
.dark .bg-amber-50\/80 {
    background-color: rgba(245, 158, 11, 0.12) !important;
}
.dark .text-amber-600,
.dark .text-amber-500 {
    color: #fbbf24 !important;
}
.dark .bg-violet-50,
.dark .bg-violet-50\/40,
.dark .bg-violet-50\/80,
.dark .bg-purple-50,
.dark .bg-purple-50\/40,
.dark .bg-purple-50\/80 {
    background-color: rgba(139, 92, 246, 0.14) !important;
}
.dark .text-violet-600,
.dark .text-violet-500,
.dark .text-purple-600,
.dark .text-purple-500 {
    color: #a78bfa !important;
}
.dark .bg-indigo-50,
.dark .bg-indigo-50\/40,
.dark .bg-indigo-50\/80 {
    background-color: rgba(99, 102, 241, 0.14) !important;
}
.dark .text-indigo-600,
.dark .text-indigo-500 {
    color: #818cf8 !important;
}
.dark .bg-pink-50,
.dark .bg-pink-50\/40,
.dark .bg-pink-50\/80 {
    background-color: rgba(236, 72, 153, 0.14) !important;
}
.dark .text-pink-600,
.dark .text-pink-500 {
    color: #f472b6 !important;
}
.dark .bg-cyan-50,
.dark .bg-cyan-50\/40,
.dark .bg-cyan-50\/80 {
    background-color: rgba(6, 182, 212, 0.14) !important;
}
.dark .text-cyan-600,
.dark .text-cyan-500 {
    color: #22d3ee !important;
}
.dark .bg-teal-50,
.dark .bg-teal-50\/40,
.dark .bg-teal-50\/80 {
    background-color: rgba(20, 184, 166, 0.14) !important;
}
.dark .text-teal-600,
.dark .text-teal-500 {
    color: #2dd4bf !important;
}
.dark .bg-brand-50,
.dark .bg-brand-50\/40,
.dark .bg-brand-50\/80 {
    background-color: hsla(var(--accent-h), var(--accent-s), 40%, 0.15) !important;
}
.dark .text-brand-600,
.dark .text-brand-500 {
    color: hsl(var(--accent-h), var(--accent-s), 65%) !important;
}

/* Modal / Popups & Dropdown Menus */
.dark .sd-sheet {
    background-color: #18181b !important;
    border-color: #27272a !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}
.dark [x-show="open"].bg-white,
.dark [x-show="open"].bg-white\/95,
.dark [x-show="catDropdownOpen"].bg-white,
.dark [x-show="walletDropdownOpen"].bg-white {
    background-color: #18181b !important;
    border-color: #27272a !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8) !important;
}

/* Modal Category & Wallet Dropdown Items */
.dark .divide-slate-50 > :not([hidden]) ~ :not([hidden]) {
    border-color: #27272a !important;
}
.dark [x-show="catDropdownOpen"] button:hover,
.dark [x-show="walletDropdownOpen"] button:hover {
    background-color: #27272a !important;
}

/* Clickable row hover / active states */
.dark .sd-clickable:hover::after {
    opacity: 0.08;
}
.dark .hover\:bg-slate-50\/80:hover {
    background-color: #27272a !important;
}

/* Soft Category Badge Backgrounds in Dark Mode */
.dark [style*="background:rgba("],
.dark [style*="background: rgba("] {
    filter: brightness(0.95) saturate(1.2);
}