/* ==========================================================================
   LifeOS Pro: Strategic Life & Financial Operating System
   Custom Responsive, Mobile-First & Multi-Theme Stylesheet
   ========================================================================== */

/* ==========================================================================
   THEME DEFINITIONS (5 Executive Themes)
   ========================================================================== */

/* 1. Midnight Slate (Default) */
:root,
html[data-theme="slate"] {
    --bg-main: #020617;        /* Slate 950 */
    --bg-header: rgba(15, 23, 42, 0.92);
    --bg-card: rgba(15, 23, 42, 0.85);
    --bg-card-solid: #0f172a;
    --bg-input: #020617;
    --border-color: rgba(51, 65, 85, 0.5);
    --border-hover: rgba(100, 116, 139, 0.5);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --nav-bg: rgba(15, 23, 42, 0.92);
    --nav-border: rgba(51, 65, 85, 0.4);
    --accent-emerald: #10b981;
    --accent-indigo: #6366f1;
    --card-shadow: none;
}

/* 2. OLED Pure Black */
html[data-theme="oled"] {
    --bg-main: #000000;
    --bg-header: rgba(0, 0, 0, 0.95);
    --bg-card: rgba(10, 10, 10, 0.95);
    --bg-card-solid: #0a0a0a;
    --bg-input: #000000;
    --border-color: #262626;
    --border-hover: #404040;
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --nav-bg: rgba(0, 0, 0, 0.96);
    --nav-border: #262626;
    --accent-emerald: #10b981;
    --accent-indigo: #818cf8;
    --card-shadow: 0 0 15px -3px rgba(0, 0, 0, 0.8);
}

/* 3. Agri Forest (Polytunnel & Organic) */
html[data-theme="forest"] {
    --bg-main: #02140d;
    --bg-header: rgba(4, 30, 20, 0.94);
    --bg-card: rgba(6, 40, 27, 0.9);
    --bg-card-solid: #06281b;
    --bg-input: #02170e;
    --border-color: rgba(16, 185, 129, 0.25);
    --border-hover: rgba(52, 211, 153, 0.45);
    --text-primary: #ecfdf5;
    --text-secondary: #a7f3d0;
    --text-muted: #6ee7b7;
    --nav-bg: rgba(4, 26, 17, 0.96);
    --nav-border: rgba(16, 185, 129, 0.2);
    --accent-emerald: #34d399;
    --accent-indigo: #14b8a6;
    --card-shadow: 0 4px 20px -2px rgba(2, 20, 13, 0.6);
}

/* 4. Cyber Indigo (Night Owl & Tech) */
html[data-theme="cyber"] {
    --bg-main: #060914;
    --bg-header: rgba(15, 23, 46, 0.94);
    --bg-card: rgba(15, 23, 46, 0.9);
    --bg-card-solid: #0f172e;
    --bg-input: #090e1f;
    --border-color: rgba(99, 102, 241, 0.25);
    --border-hover: rgba(129, 140, 248, 0.45);
    --text-primary: #f8fafc;
    --text-secondary: #c7d2fe;
    --text-muted: #818cf8;
    --nav-bg: rgba(9, 14, 31, 0.96);
    --nav-border: rgba(99, 102, 241, 0.2);
    --accent-emerald: #06b6d4;
    --accent-indigo: #6366f1;
    --card-shadow: 0 4px 20px -2px rgba(6, 9, 20, 0.7);
}

/* 5. Executive Light Mode */
html[data-theme="light"] {
    --bg-main: #f8fafc;
    --bg-header: rgba(255, 255, 255, 0.94);
    --bg-card: #ffffff;
    --bg-card-solid: #ffffff;
    --bg-input: #f1f5f9;
    --border-color: #e2e8f0;
    --border-hover: #cbd5e1;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --nav-bg: rgba(255, 255, 255, 0.96);
    --nav-border: #e2e8f0;
    --accent-emerald: #059669;
    --accent-indigo: #4f46e5;
    --card-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   BASE & COMPONENT RESETS
   ========================================================================== */

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 16px));
    transition: background-color 0.25s ease, color 0.25s ease;
}

header {
    background: var(--bg-header) !important;
    border-bottom-color: var(--border-color) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Glassmorphism Card Style */
.glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--card-shadow);
    transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.25s ease;
}

.glass-card:hover {
    border-color: var(--border-hover);
}

/* ==========================================================================
   EXECUTIVE DAYLIGHT (LIGHT MODE) COMPREHENSIVE RE-ARCHITECTED STYLING
   ========================================================================== */

/* 1. Base Body & Overall Background */
html[data-theme="light"] body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* 2. Glassmorphism Cards: Crisp Pure White with Subtle Elevation */
html[data-theme="light"] .glass-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
}
html[data-theme="light"] .glass-card:hover {
    border-color: #cbd5e1 !important;
}

/* 3. Global Text Rules (Preserves White Text in Colored Buttons & Badges!) */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .text-white:not(button):not(.fab-quick-add):not(.report-type-btn):not(.goal-horizon-tab):not([class*="bg-"]):not([data-theme-btn] *):not(#toastContainer *) {
    color: #0f172a !important;
}

html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200 {
    color: #1e293b !important;
}
html[data-theme="light"] .text-slate-300 {
    color: #334155 !important;
}
html[data-theme="light"] .text-slate-400 {
    color: #475569 !important;
}
html[data-theme="light"] .text-slate-500 {
    color: #64748b !important;
}
html[data-theme="light"] .text-slate-600 {
    color: #64748b !important;
}

/* Vibrant Accent Text High-Contrast Overrides */
html[data-theme="light"] .text-emerald-400 {
    color: #059669 !important;
}
html[data-theme="light"] .text-emerald-300 {
    color: #047857 !important;
}
html[data-theme="light"] .text-indigo-400 {
    color: #4f46e5 !important;
}
html[data-theme="light"] .text-rose-400 {
    color: #e11d48 !important;
}
html[data-theme="light"] .text-amber-400 {
    color: #d97706 !important;
}

/* CRITICAL: Preserve Pure White Text and Icons on Primary Colored Buttons & Badges */
html[data-theme="light"] button.bg-emerald-600,
html[data-theme="light"] button.bg-indigo-600,
html[data-theme="light"] button.bg-gradient-to-r,
html[data-theme="light"] button[type="submit"],
html[data-theme="light"] .fab-quick-add,
html[data-theme="light"] .goal-horizon-tab.bg-indigo-600,
html[data-theme="light"] .report-type-btn.bg-emerald-600,
html[data-theme="light"] .report-type-btn.bg-indigo-600,
html[data-theme="light"] .report-type-btn.bg-amber-600 {
    color: #ffffff !important;
}

html[data-theme="light"] button.bg-emerald-600 *,
html[data-theme="light"] button.bg-indigo-600 *,
html[data-theme="light"] button.bg-gradient-to-r *,
html[data-theme="light"] button[type="submit"] *,
html[data-theme="light"] .fab-quick-add * {
    color: #ffffff !important;
}

/* 4. Elimination of Black/Dark Boxes across Containers */
html[data-theme="light"] [class*="bg-slate-950"],
html[data-theme="light"] [class*="bg-slate-900"] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* Badges, tags, and small utility pills (Slate 800) */
html[data-theme="light"] [class*="bg-slate-800"] {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

html[data-theme="light"] [class*="border-slate-800"],
html[data-theme="light"] [class*="border-slate-700"] {
    border-color: #e2e8f0 !important;
}

html[data-theme="light"] [class*="divide-slate-800"] > :not([hidden]) ~ :not([hidden]) {
    border-color: #f1f5f9 !important;
}

/* 5. Time-Blocks: No Black/Dark Green Boxes */
html[data-theme="light"] #timeBlocksList .glass-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] #timeBlocksList .glass-card:hover {
    border-color: #cbd5e1 !important;
}

/* Completed Time-Block: Fresh Soft Mint with Deep Emerald Text */
html[data-theme="light"] #timeBlocksList [class*="bg-emerald-950"],
html[data-theme="light"] #timeBlocksList .glass-card.border-emerald-500\/40,
html[data-theme="light"] #timeBlocksList [class*="border-emerald-500"] {
    background-color: #f0fdf4 !important;
    border-color: #86efac !important;
}

html[data-theme="light"] #timeBlocksList [class*="bg-emerald-950"] .text-emerald-300,
html[data-theme="light"] #timeBlocksList [class*="border-emerald-500"] .text-emerald-300 {
    color: #166534 !important;
}

html[data-theme="light"] #timeBlocksList .bg-emerald-500 {
    background-color: #10b981 !important;
    color: #ffffff !important;
}
html[data-theme="light"] #timeBlocksList .bg-emerald-500 i {
    color: #ffffff !important;
}

html[data-theme="light"] #timeBlocksList .bg-slate-800 {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}

/* 6. Habits Tracker: Clean Checkboxes and Heatmap */
html[data-theme="light"] #habitsList .glass-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

/* Completed Habit: Soft Mint Card */
html[data-theme="light"] #habitsList [class*="bg-emerald-950"] {
    background-color: #f0fdf4 !important;
    border-color: #86efac !important;
}

html[data-theme="light"] #habitsList [class*="bg-emerald-950"] .text-emerald-300 {
    color: #166534 !important;
}

/* Unchecked Habit Checkbox: Crisp White Box with Slate Border */
html[data-theme="light"] #habitsList .bg-slate-900 {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
}

/* Checked Habit Checkbox: Vibrant Emerald with White Checkmark */
html[data-theme="light"] #habitsList .bg-emerald-500 {
    background-color: #10b981 !important;
    color: #ffffff !important;
}
html[data-theme="light"] #habitsList .bg-emerald-500 i {
    color: #ffffff !important;
}

/* Habit Streak Badge */
html[data-theme="light"] #habitsList [class*="bg-amber-500"] {
    background-color: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

/* Mini-Heatmap Dots in Light Mode */
html[data-theme="light"] .heatmap-dot.empty {
    background-color: #f1f5f9 !important;
    border: 1px dashed #cbd5e1 !important;
    color: #94a3b8 !important;
}
html[data-theme="light"] .heatmap-dot.done {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

/* 7. Strategic Goals & Sliders */
html[data-theme="light"] #goalsCardsGrid .glass-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

/* Completed Goal: Soft Mint Card */
html[data-theme="light"] #goalsCardsGrid [class*="bg-emerald-950"] {
    background-color: #f0fdf4 !important;
    border-color: #86efac !important;
}

html[data-theme="light"] #goalsCardsGrid [class*="bg-emerald-950"] h3 {
    color: #0f172a !important;
}

/* Range Slider in Light Mode */
html[data-theme="light"] input[type="range"] {
    background: #e2e8f0 !important;
}
html[data-theme="light"] input[type="range"]::-webkit-slider-thumb {
    background: #10b981 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

/* 8. Financial Health Dashboard & Cards */
html[data-theme="light"] #view-finance .glass-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

/* Net Savings Hero Card */
html[data-theme="light"] #view-finance [class*="border-emerald-500"] {
    border-color: #a7f3d0 !important;
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%) !important;
}

/* Category Budgets & Savings Pots Bars */
html[data-theme="light"] #categoryBudgetsList > div {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] #categoryBudgetsList .bg-slate-900,
html[data-theme="light"] #savingsPotsGrid .bg-slate-900 {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

/* Transfer Button */
html[data-theme="light"] button[onclick*="openTransferModal"] {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}
html[data-theme="light"] button[onclick*="openTransferModal"]:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* 9. Reports & KPI Preview Cards */
html[data-theme="light"] #reportPreviewContainer .glass-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] #reportPreviewContainer [class*="bg-slate-950"] {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] #reportPreviewContainer [class*="bg-slate-950"] .text-white {
    color: #0f172a !important;
}

/* 10. Forms, Inputs, Selects & Textareas */
html[data-theme="light"] input:not([type="checkbox"]):not([type="range"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
}

html[data-theme="light"] input:not([type="checkbox"]):not([type="range"]):focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
    background-color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #94a3b8 !important;
}

/* 11. Modals & Dialogs */
html[data-theme="light"] .modal-backdrop {
    background-color: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(6px) !important;
}

html[data-theme="light"] [id^="modal"] > div.relative {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="light"] [id^="modal"] h3 {
    color: #0f172a !important;
}

html[data-theme="light"] [id^="modal"] .border-b,
html[data-theme="light"] [id^="modal"] .border-t {
    border-color: #f1f5f9 !important;
}

html[data-theme="light"] [id^="modal"] button[type="button"][onclick*="closeModal"] {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] [id^="modal"] button[type="button"][onclick*="closeModal"]:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Transaction Type Toggles (Expense vs Income) */
html[data-theme="light"] #formTransaction .grid.grid-cols-2 {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] #btnTypeExpense.bg-rose-500\/20 {
    background-color: #ffe4e6 !important;
    border: 1px solid #fecdd3 !important;
    color: #e11d48 !important;
}
html[data-theme="light"] #btnTypeIncome.bg-emerald-500\/20 {
    background-color: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #059669 !important;
}

/* Security Lock Screen in Light Theme */
html[data-theme="light"] #securityLockScreen {
    background-color: rgba(241, 245, 249, 0.96) !important;
}
html[data-theme="light"] #securityLockScreen > div {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}
html[data-theme="light"] #securityLockScreen h2 {
    color: #0f172a !important;
}

/* Deposit Pot Name in Modal 6 */
html[data-theme="light"] #depositPotName {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

/* 12. Tables & Data Grids */
html[data-theme="light"] thead {
    background-color: #f8fafc !important;
    border-bottom: 2px solid #e2e8f0 !important;
}
html[data-theme="light"] thead th {
    color: #475569 !important;
}
html[data-theme="light"] tbody tr {
    border-bottom: 1px solid #f1f5f9 !important;
}
html[data-theme="light"] tbody tr:hover {
    background-color: #f8fafc !important;
}

/* 13. Header & Bottom Navigation */
html[data-theme="light"] header {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] header button {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

html[data-theme="light"] .bottom-nav {
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .bottom-nav-item {
    color: #64748b !important;
}

html[data-theme="light"] .bottom-nav-item.active {
    color: #059669 !important;
}

html[data-theme="light"] .bottom-nav-item.active .nav-icon-container {
    background: rgba(16, 185, 129, 0.12) !important;
}

/* 14. Tab Switchers (Goal Horizons & Report Types) */
html[data-theme="light"] #view-goals .bg-slate-900.p-1,
html[data-theme="light"] #view-reports .bg-slate-900.p-1 {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .goal-horizon-tab,
html[data-theme="light"] .report-type-btn {
    color: #64748b !important;
}

html[data-theme="light"] .goal-horizon-tab.bg-indigo-600,
html[data-theme="light"] .report-type-btn.bg-emerald-600,
html[data-theme="light"] .report-type-btn.bg-indigo-600,
html[data-theme="light"] .report-type-btn.bg-amber-600 {
    color: #ffffff !important;
}

/* 15. SVG Adherence Circle in Today View */
html[data-theme="light"] circle[stroke="#1e293b"] {
    stroke: #e2e8f0 !important;
}
html[data-theme="light"] #adherencePercent {
    color: #0f172a !important;
}

/* 16. THEME PREVIEWS IN MODAL: PRESERVE EXACT SWATCH COLORS */
html[data-theme="light"] [data-theme-btn="slate"] {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
}
html[data-theme="light"] [data-theme-btn="slate"] * {
    color: #ffffff !important;
}
html[data-theme="light"] [data-theme-btn="slate"] .text-slate-400 {
    color: #94a3b8 !important;
}

html[data-theme="light"] [data-theme-btn="oled"] {
    background-color: #000000 !important;
    border: 1px solid #27272a !important;
}
html[data-theme="light"] [data-theme-btn="oled"] * {
    color: #ffffff !important;
}
html[data-theme="light"] [data-theme-btn="oled"] .text-zinc-400 {
    color: #a1a1aa !important;
}

html[data-theme="light"] [data-theme-btn="forest"] {
    background-color: #02140d !important;
    border: 1px solid #064e3b !important;
}
html[data-theme="light"] [data-theme-btn="forest"] * {
    color: #ffffff !important;
}
html[data-theme="light"] [data-theme-btn="forest"] .text-emerald-400\/70 {
    color: #6ee7b7 !important;
}

html[data-theme="light"] [data-theme-btn="cyber"] {
    background-color: #060914 !important;
    border: 1px solid #1e1b4b !important;
}
html[data-theme="light"] [data-theme-btn="cyber"] * {
    color: #ffffff !important;
}
html[data-theme="light"] [data-theme-btn="cyber"] .text-indigo-400\/70 {
    color: #a5b4fc !important;
}

/* Light Theme Preview Button in Modal */
html[data-theme="light"] [data-theme-btn="light"] {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
}
html[data-theme="light"] [data-theme-btn="light"] * {
    color: #0f172a !important;
}
html[data-theme="light"] [data-theme-btn="light"] .text-slate-400 {
    color: #64748b !important;
}

/* 17. System Info Badges in More View */
html[data-theme="light"] #view-more .bg-slate-900\/70 {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

/* 18. Toast Notifications */
html[data-theme="light"] .toast-item {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

/* Custom Sleek Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Mobile Sticky Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--nav-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--nav-border);
    z-index: 50;
    display: flex;
    justify-content: space-around;
    align-items: center;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: 100%;
    color: var(--text-secondary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item:active {
    transform: scale(0.92);
}

.bottom-nav-item.active {
    color: #10b981;
}

.bottom-nav-item.active .nav-icon-container {
    background: rgba(16, 185, 129, 0.15);
    border-radius: 9999px;
    padding: 4px 12px;
}

/* Quick Add Floating Action Button (FAB) */
.fab-quick-add {
    position: fixed;
    bottom: calc(5rem + env(safe-area-inset-bottom, 16px));
    right: 1.25rem;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.5), 0 8px 10px -6px rgba(16, 185, 129, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 45;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
}

.fab-quick-add:active {
    transform: scale(0.9) rotate(45deg);
}

.fab-quick-add:hover {
    transform: scale(1.08);
}

/* Habit Mini-Heatmap Matrix */
.heatmap-dot {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    transition: transform 0.15s ease;
}

.heatmap-dot:active {
    transform: scale(0.85);
}

.heatmap-dot.done {
    background-color: #10b981;
    color: #022c22;
}

.heatmap-dot.empty {
    background-color: rgba(30, 41, 59, 0.5);
    color: #64748b;
    border: 1px dashed rgba(51, 65, 85, 0.8);
}

/* Slider Track & Thumb Styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: #1e293b;
    height: 8px;
    border-radius: 9999px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #10b981;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
    border: 2px solid #ffffff;
}

/* Toast Notifications */
#toastContainer {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast-item {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-radius: 0.75rem;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    font-size: 0.875rem;
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-item.success {
    border-color: #10b981;
}

.toast-item.error {
    border-color: #ef4444;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Transitions */
.modal-backdrop {
    background-color: rgba(2, 6, 23, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.25s ease;
}

/* Print Styles */
@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
        padding-bottom: 0 !important;
    }
    .bottom-nav, .fab-quick-add, header, #toastContainer {
        display: none !important;
    }
}