/* ============================================================
   Obsidian Finance — merged component styles
   Extracted & de-duplicated from the six raw_ui/*.html <style> blocks.
   Tailwind utility classes remain resolved by the Tailwind CDN + the
   shared tailwind.config declared in index.php; this file only holds
   the custom CSS the designs relied on.
   ============================================================ */

/* ---- Material Symbols base (union of every variant used) ---- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}
.fill-icon {
    font-variation-settings: 'FILL' 1;
}

/* ---- Base body treatment ---- */
body {
    background-color: #131313;
    color: #e2e2e2;
    -webkit-tap-highlight-color: transparent;
    -ms-overflow-style: none;
    scrollbar-width: none;
    min-height: max(884px, 100dvh);
}

/* ---- Scrollbar hiding utilities ---- */
.no-scrollbar::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar,
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Minimalist global scrollbar ---- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #000000; }
::-webkit-scrollbar-thumb { background: #262626; border-radius: 2px; }

/* ---- Cards / depth layers ---- */
.obsidian-card {
    background-color: #0A0A0A;
    border-bottom: 1px solid #262626;
}
.tonal-layer {
    background-color: #0A0A0A;
    border: 1px solid #262626;
}

/* ---- Donut animation (dashboard) ---- */
.donut-segment { transition: stroke-dashoffset 1s ease-out; }

/* ---- Drag handle (manage categories) ---- */
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }

/* ---- iOS-style toggle (manage categories) ---- */
.ios-toggle:checked + .ios-toggle-dot {
    transform: translateX(100%);
    background-color: #ffffff;
}
.ios-toggle:checked ~ .ios-toggle-bg {
    background-color: #4ae176;
}

/* ---- Icon / swatch active states (new category) ---- */
.active-swatch {
    outline: 2px solid #e2e2e2;
    outline-offset: 2px;
}
.active-icon {
    background-color: #e2e2e2 !important;
    color: #131313 !important;
}

/* ---- Segmented pill active (quick add) ---- */
.active-pill {
    background-color: #e2e2e2;
    color: #000000;
}

/* ---- Focus treatment for obsidian inputs (quick add) ---- */
input:focus {
    outline: none;
    border-color: #e2e2e2 !important;
}

/* ---- Reconcile input ring ---- */
.active-ring:focus-within { border-color: #e2e2e2; }

/* ---- Number input spinner removal (reconcile) ---- */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] { -moz-appearance: textfield; }

/* ---- Safe-area padding helper (spending breakdown) ---- */
.custom-safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* ============================================================
   SPA screen switching (added for the single-page architecture)
   Only the .active screen is rendered — zero page reloads.
   ============================================================ */
.app-screen { display: none; }
.app-screen.active { display: block; }

/* Tiny fade so screen swaps feel intentional, not abrupt */
.app-screen.active { animation: screen-in 0.18s ease-out; }
@keyframes screen-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Toast for API feedback */
#toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%) translateY(20px);
    z-index: 90;
    max-width: 90vw;
    padding: 12px 20px;
    border-radius: 9999px;
    background-color: #e2e2e2;
    color: #131313;
    font-family: 'Geist', 'Inter', sans-serif;
    font-size: 13px;
    letter-spacing: 0.03em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.error { background-color: #ffb4ab; color: #690005; }