/* Mobile viewport fix - prevents scrolling and fills screen */
html, body {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Ensure container fills viewport on mobile */
.container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

:root {
    --base-bg-color: #e0e5ec;
    --font-color: #555;
    --shadow-light: rgba(255, 255, 255, 0.9);
    --shadow-dark: rgba(163, 177, 198, 0.6);
    --shadow-light-inset: rgba(255, 255, 255, 0.5); 

    --expense-color: #cc3300;
    --income-color: #949e34;
    --submit-color: #595959;
}

/* --- APP MODE: Lock Screen Scrolling --- */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden; /* Stop the whole page from bouncing */
    overscroll-behavior: none; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--base-bg-color);
    color: var(--font-color);
    display: flex;
    justify-content: center;
}

.container {
    width: 100%;
    /* Increased max-width to fill more of the screen */
    max-width: 420px; 
    height: 100dvh; /* Dynamic Height for mobile */
    display: flex;
    flex-direction: column;
    padding: 15px;
    /* Adds safe space at the top for Notches/Status Bars */
    padding-top: max(30px, env(safe-area-inset-top)); 
    box-sizing: border-box;
    overflow-y: auto; 
    scrollbar-width: none;
}
.container::-webkit-scrollbar { display: none; }

h1 {
    text-align: center;
    font-weight: 600;
    color: #4b607f;
    margin-bottom: 20px;
}

/* --- Calculator Styles --- */
.calculator {
    background-color: var(--base-bg-color);
    border-radius: 30px;
    padding: 20px;
    box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    /* THIS IS THE FIX: Centers the calculator vertically in the container */
    margin: auto; 
}

.calculator-grid {
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
        "controls controls controls controls"
        "display  display  display  display"
        "notes    notes    notes    tax"
        "c        percent  multiply divide"
        "seven    eight    nine     plus"
        "four     five     six      minus"
        "one      two      three    equals"
        "dot      zero     backspace equals";
}

/* NEW: Define the area for the toggle */
.tax-toggle-area {
    grid-area: tax;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Aligns toggle to bottom of cell */
}

.control-row { grid-area: controls; display: flex; align-items: stretch; gap: 10px; }
.display-area  { grid-area: display; }
.notes-area    { grid-area: notes; }

.keypad-key[data-value="C"] { grid-area: c; }
.keypad-key[data-value="%"] { grid-area: percent; }
.keypad-key[data-value="×"] { grid-area: multiply; }
.keypad-key[data-value="÷"] { grid-area: divide; }
.keypad-key[data-value="7"] { grid-area: seven; }
.keypad-key[data-value="8"] { grid-area: eight; }
.keypad-key[data-value="9"] { grid-area: nine; }
.keypad-key[data-value="+"] { grid-area: plus; }
.keypad-key[data-value="4"] { grid-area: four; }
.keypad-key[data-value="5"] { grid-area: five; }
.keypad-key[data-value="6"] { grid-area: six; }
.keypad-key[data-value="-"] { grid-area: minus; }
.keypad-key[data-value="1"] { grid-area: one; }
.keypad-key[data-value="2"] { grid-area: two; }
.keypad-key[data-value="3"] { grid-area: three; }
.keypad-key[data-value="="] { grid-area: equals; height: auto; }
.keypad-key[data-value="0"] { grid-area: zero; }
.keypad-key[data-value="."] { grid-area: dot; }
.keypad-key[data-value="⌫"] { grid-area: backspace; }

.date-picker-wrapper {
    background-color: var(--base-bg-color); 
    border-radius: 10px;
    box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light-inset);
    text-align: center; 
    cursor: pointer; 
    position: relative;
    width: 60px;
    height: 60px;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
    flex-shrink: 0;
}
.date-day { display: block; font-size: 20px; font-weight: 700; color: var(--font-color); line-height: 1.1; }
.date-month { display: block; font-size: 11px; font-weight: 500; text-transform: uppercase; color: var(--font-color); opacity: 0.8; }
.date-picker-wrapper input { display: none; }

.icon-button {
    border: none; 
    background: var(--base-bg-color);
    width: 60px;
    height: 60px;
    border-radius: 10px; 
    display: flex;
    justify-content: center; 
    align-items: center; 
    cursor: pointer; 
    flex-shrink: 0;
    box-shadow: none; 
    transition: all 0.1s ease-in-out;
}
.icon-button:active {
    box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light);
}
.icon-button svg { fill: var(--font-color); width: 24px; height: 24px; }

.display-area {
    display: flex; 
    align-items: center; 
    background-color: #EBE1D6; 
    transition: box-shadow 0.3s ease; 
    box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light-inset);
    border-radius: 15px; 
    padding: 10px 15px;
}
.currency-display { font-size: 20px; font-weight: 600; color: var(--font-color); opacity: 0.7; margin-right: 10px; }
.main-display {
    font-size: 42px;
    font-weight: 700;
    text-align: right;
    width: 100%;
    color: var(--font-color);
    overflow-x: auto;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to left, black 90%, transparent);
    mask-image: linear-gradient(to left, black 90%, transparent);
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.main-display::-webkit-scrollbar { display: none; }

.notes-area { 
    padding: 0; 
    background-color: #EBE1D6;
    box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light-inset); 
    border-radius: 10px; 
}
#notes-input {
    width: 100%; 
    border: none; 
    background: transparent; 
    padding: 12px 15px; 
    font-size: 14px;
    color: var(--font-color); 
    overflow-x: auto; 
    white-space: nowrap; 
    box-sizing: border-box;
}
#notes-input:focus { outline: none; }

.keypad-key {
    height: 60px; 
    border-radius: 15px; 
    border: none; 
    background-color: var(--base-bg-color);
    box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
    font-size: 20px; 
    color: var(--font-color); 
    cursor: pointer; 
    transition: all 0.1s ease-in-out;
}
.keypad-key:active { 
    box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light); 
    font-size: 19px; 
}
.keypad-key.flat { background-color: var(--base-bg-color); box-shadow: none; border: none; }
.keypad-key.flat:active { box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light-inset); }

.action-bar { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 15px; 
    margin-top: 20px; 
}
.action-bar button {
    padding: 15px; 
    font-size: 16px; 
    font-weight: 600; 
    border: none; 
    border-radius: 15px; 
    color: white; 
    cursor: pointer;
    box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
    transition: all 0.1s ease-in-out;
}
.action-bar button:active { transform: scale(0.95); }
.action-bar button.active-mode {
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3), inset -2px -2px 5px rgba(255,255,255,0.2);
    transform: scale(0.98);
}
#expense-btn { background-color: var(--expense-color); }
#income-btn { background-color: var(--income-color); }
#submit-btn { background-color: var(--submit-color); }

/* --- Currency Modal --- */
.modal-overlay {
    display: none;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center; align-items: center; z-index: 1000;
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    padding: 40px 0; box-sizing: border-box;
}
.modal-content {
    background-color: var(--base-bg-color);
    padding: 20px; border-radius: 20px;
    width: 90%; max-width: 320px;
    box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
}
.currency-list { list-style: none; padding: 0; margin: 0; max-height: 60vh; overflow-y: auto; }
.currency-list li {
    padding: 15px; font-size: 18px; font-weight: 500; border-radius: 10px; cursor: pointer;
    transition: all 0.2s ease-in-out; color: var(--font-color);
}
.currency-list li:not(:last-child) { margin-bottom: 10px; }
.currency-list li:hover { background-color: #d1d9e6; }
.currency-list li:active { box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light); transform: scale(0.98); }

/* --- Glow Effects --- */
.expense-glow {
    box-shadow: inset 2px 2px 5px var(--shadow-dark), 
                inset -2px -2px 5px var(--shadow-light-inset),
                inset 0 0 6px 1px var(--expense-color);
}
.income-glow {
    box-shadow: inset 2px 2px 5px var(--shadow-dark), 
                inset -2px -2px 5px var(--shadow-light-inset),
                inset 0 0 6px 1px var(--income-color);
}

/* --- Custom Category Selector --- */
.custom-select-container { position: relative; flex-grow: 1; width: 0; user-select: none; }
.select-selected {
    background-color: var(--base-bg-color);
    border-radius: 10px; padding: 8px 12px; color: var(--font-color);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px var(--shadow-light-inset);
    text-align: center; transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 15px; font-weight: 700; line-height: 1.3; white-space: normal;
    cursor: pointer; min-height: 44px; display: flex; justify-content: center; align-items: center;
}
.select-item {
    color: var(--font-color); padding: 12px 16px; cursor: pointer; border-radius: 10px;
    margin: 5px; font-size: 16px; line-height: 1.3; text-align: center;
}
.select-item:hover { background-color: #d1d9e6; }
.select-hide { display: none; }
.select-items {
    max-height: 70vh; overflow-y: auto;
    -ms-overflow-style: none; scrollbar-width: none;
}
.select-items::-webkit-scrollbar { display: none; }
.keypad-key.key-pressed { box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light); font-size: 19px; }
.action-bar button.key-pressed { transform: scale(0.95); }

/* --- Flatpickr Fix --- */
.calculator > .flatpickr-calendar {
    top: 85px !important; left: 50% !important; transform: translateX(-50%) !important;
    background: var(--base-bg-color); border: none; border-radius: 15px;
    box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
}

/* --- Full Screen Menu --- */
.menu-trigger { position: fixed; top: 20px; left: 20px; z-index: 1000; width: 50px; height: 50px; border-radius: 12px; }
.fullscreen-menu {
    position: fixed; top: 0; left: -100%; width: 100%; height: 100%;
    background-color: var(--base-bg-color); z-index: 2000;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.fullscreen-menu.open { left: 0; }
.menu-close-btn { position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; border-radius: 12px; }
.menu-items { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; }
.menu-link {
    font-size: 24px; font-weight: 600; color: var(--font-color); text-decoration: none;
    padding: 15px 40px; border-radius: 20px; transition: all 0.2s ease;
    width: 200px; text-align: center; background-color: var(--base-bg-color);
    box-shadow: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
}
.menu-link:active, .menu-link:hover {
    color: #4b607f; box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
    transform: scale(0.98);
}

/* --- Currency Menu --- */
.menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--base-bg-color); z-index: 2100; 
    display: flex; justify-content: center; align-items: center; flex-direction: column;
}
.hidden { display: none !important; }
.menu-content { width: 100%; max-width: 350px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.currency-input {
    background-color: var(--base-bg-color); border: none; border-radius: 10px;
    color: var(--font-color); font-size: 1.5rem; font-weight: 600; text-align: center;
    padding: 15px; width: 100px; text-transform: uppercase; outline: none;
    box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light-inset);
}
.currency-input:focus { box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light-inset); }
.currency-input::placeholder { color: #999; font-weight: 400; }
.currency-row { margin-bottom: 15px; width: 100%; display: flex; justify-content: center; }
.menu-label { font-size: 0.9rem; color: #4b607f; font-weight: 600; margin-bottom: 8px; display: block; text-align: center; }
.small-text { font-size: 0.8rem; color: #888; margin-top: 20px; text-align: center; }
.menu-divider { border: 0; height: 1px; background: rgba(0,0,0,0.1); margin: 20px auto; width: 60%; }

/* --- Transactions Timeline --- */
.timeline-wrapper {
    /* Fits remaining height */
    flex-grow: 1;
    overflow-y: auto;
    padding-bottom: 80px; 
    -ms-overflow-style: none; scrollbar-width: none;
}
.timeline-wrapper::-webkit-scrollbar { display: none; }
.date-header {
    display: flex; align-items: center; margin: 25px 0 15px 0;
    color: #8898aa; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
}
.date-header::before, .date-header::after { content: ""; flex: 1; height: 1px; background-color: rgba(0,0,0,0.05); }
.date-header span { padding: 0 15px; }
.transaction-row {
    position: relative; margin-bottom: 25px; overflow: hidden; cursor: pointer; min-height: 80px;
}
.trans-content {
    position: relative; background-color: var(--base-bg-color); z-index: 2;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 5px 0; display: flex; flex-direction: column; align-items: center;
}
.transaction-row.open .trans-content { transform: translateX(-120px); }
.trans-amount-home { font-size: 1.8rem; font-weight: 700; margin-bottom: 2px; }
.trans-expense { color: var(--expense-color); }
.trans-income { color: var(--income-color); }
.trans-meta { font-size: 0.85rem; color: #8898aa; margin-bottom: 2px; }
.trans-cat-pill {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    color: #fff; margin-top: 4px; opacity: 0.8;
}
.trans-note {
    font-size: 0.8rem; font-style: italic; color: #aab; margin-top: 2px;
    max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trans-actions {
    position: absolute; top: 0; right: 0; height: 100%; width: 120px;
    display: flex; align-items: center; justify-content: center; gap: 10px; z-index: 1;
}
.action-icon-btn {
    width: 45px; height: 45px; border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light);
    transition: all 0.2s;
}
.action-icon-btn svg { width: 20px; height: 20px; fill: var(--font-color); }
.btn-edit { background-color: #e0e5ec; color: #555; }
.btn-delete { background-color: #ffe0e0; color: #cc3300; }
.btn-delete svg { fill: #cc3300; }
.action-icon-btn:active { transform: scale(0.95); }

/* --- Header Nav --- */
.header-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 0 5px; flex-shrink: 0; }
.nav-link { font-size: 1rem; font-weight: 600; color: #4b607f; text-decoration: none; width: 60px; }
.nav-title { font-size: 1.2rem; font-weight: 600; color: #4b607f; text-align: center; flex-grow: 1; margin: 0; }
.month-picker-btn {
    width: 60px; height: 60px; background-color: var(--base-bg-color); border-radius: 10px;
    box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    cursor: pointer; transition: all 0.1s;
}
.month-picker-btn:active { box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light); }
.month-name { font-size: 16px; font-weight: 700; color: var(--font-color); }
.month-year { font-size: 10px; font-weight: 500; color: #888; }
.back-to-top {
    position: fixed; bottom: 30px; right: 30px; width: 45px; height: 45px;
    background-color: var(--base-bg-color); border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
    color: var(--font-color); cursor: pointer; opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease, transform 0.2s; z-index: 100;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:active { transform: scale(0.95); box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light); }
.flatpickr-calendar {
    position: fixed !important; top: 20% !important; left: 50% !important;
    transform: translateX(-50%) !important;
    box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light) !important;
    z-index: 9999 !important;
}
.nav-btn-main {
    width: 60px; height: 60px; background-color: var(--base-bg-color); border-radius: 10px;
    box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
    display: flex; justify-content: center; align-items: center; text-decoration: none;
    color: #4b607f; font-weight: 700; font-size: 0.9rem; transition: all 0.1s;
}
.nav-btn-main:active { box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light); transform: scale(0.98); }
.btn-clear-filter {
    display: none; background: none; border: none; color: #cc3300;
    font-size: 0.8rem; font-weight: 700; cursor: pointer; margin-top: 5px; text-decoration: underline;
}

/* --- DASHBOARD STYLES --- */

/* Header */
.dash-header { margin-bottom: 20px; flex-shrink: 0; }
.time-menu {
    display: flex; justify-content: center; align-items: center;
    background-color: var(--base-bg-color); border-radius: 15px;
    padding: 5px; gap: 5px;
}
.time-btn {
    border: none; background: transparent; color: #8898aa;
    font-size: 0.75rem; font-weight: 700; padding: 10px 5px;
    width: auto; min-width: 45px; border-radius: 10px; cursor: pointer;
    transition: all 0.2s; text-align: center;
}
.time-btn.active {
    color: #4b607f; background-color: var(--base-bg-color);
    box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light);
}
.date-nav {
    display: flex; justify-content: center; align-items: center;
    gap: 15px; margin-top: 10px; padding: 0;
}
.nav-arrow {
    background: none; border: none; font-size: 1.2rem; color: #8898aa; cursor: pointer; padding: 10px;
}
.nav-arrow:active { transform: scale(0.9); color: #4b607f; }
.current-date-label {
    font-size: 1.1rem; font-weight: 700; color: #4b607f; text-transform: uppercase; letter-spacing: 1px;
}

/* Dashboard Carousel */
.carousel-wrapper {
    position: relative; width: 100%; flex-grow: 1; display: flex; flex-direction: column;
}
.carousel-container {
    width: 100%; overflow: hidden; margin-top: 0; flex-grow: 1;
    display: flex; flex-direction: column; justify-content: center; /* Vertically center the stats */
}
.carousel-track {
    display: flex; width: 100%; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
/* --- UPDATED: Carousel Slide (Added Padding) --- */
.carousel-slide {
    min-width: 100%; 
    scroll-snap-align: center;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 10px 45px; /* <--- NEW: 45px side padding keeps data away from arrows */
    box-sizing: border-box; /* Ensures padding doesn't break width */
}
/* Boosted sizes for dashboard numbers */
.stat-block { text-align: center; margin-bottom: 30px; }
.stat-label {
    display: block; font-size: 0.8rem; font-weight: 700; color: #8898aa;
    margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase;
}
.stat-value { font-size: 2rem; font-weight: 700; }
.stat-value.large { font-size: 3.5rem; }
.val-green { color: var(--income-color); }
.val-red { color: var(--expense-color); }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; padding-bottom: 20px;}
.dot {
    width: 8px; height: 8px; border-radius: 50%; background-color: #ccc; transition: all 0.2s;
}
.dot.active { background-color: #4b607f; transform: scale(1.2); }

/* --- UPDATED: Desktop Carousel Arrows (Cleaner) --- */
.carousel-arrow {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    background: transparent; /* Removed white circle for cleaner look */
    border: none; 
    border-radius: 50%;
    width: 40px; 
    height: 40px; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    cursor: pointer; 
    color: #b0bccf; /* Softer Grey */
    z-index: 10;
    font-size: 1.5rem;
    transition: all 0.2s;
}
.carousel-arrow:hover { 
    color: #4b607f; /* Darker Blue on hover */
    background: rgba(0,0,0,0.05); /* Subtle circle on hover */
    transform: translateY(-50%) scale(1.1);
}
.carousel-arrow.left { left: 0; }
.carousel-arrow.right { right: 0; }

@media (hover: none) and (pointer: coarse) {
    .carousel-arrow { display: none; }
}
/* --- UPDATED: Calendar Heatmap Styling --- */
.calendar-wrapper {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    /* NEW: Scroll logic for Year view */
    max-height: 280px; /* Fits roughly 1 month comfortably */
    overflow-y: auto;  /* Allows scrolling for Year view */
    padding-right: 5px; /* Avoid scrollbar covering dots */
    position: relative;
}

/* Custom Scrollbar for neatness */
.calendar-wrapper::-webkit-scrollbar { width: 4px; }
.calendar-wrapper::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-top: 5px;
}

/* NEW: Sticky Header */
.calendar-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    position: sticky;
    top: 0;
    background-color: var(--base-bg-color); /* Hide items sliding under */
    z-index: 10;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.cal-day-header {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #8898aa;
}

/* ... Keep existing .cal-day styles and heatmap colors ... */
.cal-day {
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    background-color: #e0e5ec;
    box-shadow: 2px 2px 4px var(--shadow-dark), -2px -2px 4px var(--shadow-light);
    cursor: default;
}

/* Heatmap Colors - Monochromatic Red (10 Levels) */
.day-zero { opacity: 0.5; box-shadow: inset 1px 1px 3px var(--shadow-dark), inset -1px -1px 3px var(--shadow-light); color: #aaa; }
.day-l1 { background-color: #ffebee; color: #b71c1c; border: 1px solid rgba(0,0,0,0.05); }
.day-l2 { background-color: #ffcdd2; color: #b71c1c; }
.day-l3 { background-color: #ef9a9a; color: #b71c1c; }
.day-l4 { background-color: #e57373; color: white; }
.day-l5 { background-color: #ef5350; color: white; }
.day-l6 { background-color: #f44336; color: white; }
.day-l7 { background-color: #e53935; color: white; }
.day-l8 { background-color: #c62828; color: white; }
.day-l9 { background-color: #b71c1c; color: white; }
.day-l10 { background-color: #7f0000; color: white; transform: scale(1.1); z-index: 2; box-shadow: 2px 2px 6px rgba(0,0,0,0.3); }
.day-future { opacity: 0.1; pointer-events: none; }

/* Level 1: Barely there */
.day-l1 { background-color: #ffebee; color: #b71c1c; border: 1px solid rgba(0,0,0,0.05); }

/* Level 2-3: Light Pink */
.day-l2 { background-color: #ffcdd2; color: #b71c1c; }
.day-l3 { background-color: #ef9a9a; color: #b71c1c; }

/* Level 4-6: Medium Red */
.day-l4 { background-color: #e57373; color: white; }
.day-l5 { background-color: #ef5350; color: white; }
.day-l6 { background-color: #f44336; color: white; }

/* Level 7-8: Standard Red */
.day-l7 { background-color: #e53935; color: white; }
.day-l8 { background-color: #c62828; color: white; }

/* Level 9-10: Deep Intense Red */
.day-l9 { background-color: #b71c1c; color: white; }
.day-l10 { 
    background-color: #7f0000; /* Super Dark */
    color: white; 
    transform: scale(1.1); 
    z-index: 2; 
    box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
}

.day-future { opacity: 0.1; pointer-events: none; }

/* Disabled State for Menu Buttons */
.time-btn.disabled {
    opacity: 0.2;
    pointer-events: none; /* Prevents clicking */
    cursor: not-allowed;
}
/* --- Floating Action Button (FAB) & Menu --- */
#fab-btn {
    position: fixed;       /* This is the key: removes it from grid layout */
    bottom: 30px;          /* Distance from bottom of screen */
    right: 30px;           /* Distance from right of screen */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #007bff; /* Blue color */
    color: white;
    border: none;
    font-size: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 9999;         /* Ensures it sits on top of everything */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

#fab-btn:active {
    transform: scale(0.90);
}

#fab-menu {
    position: fixed;       /* Floats above content */
    bottom: 100px;         /* Sits just above the button */
    right: 30px;
    background-color: white;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    padding: 10px;
    z-index: 9999;
    
    /* Hiding mechanism */
    display: none;         
    flex-direction: column;
    gap: 8px;
    min-width: 160px;
}

/* This class shows the menu via JS */
#fab-menu.show {
    display: flex;
}

#fab-menu a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
    padding: 12px;
    display: block;
    background: #f9f9f9;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
}

/* --- Step 2: Tax Toggle Styling --- */
.tax-toggle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Pushes toggle to bottom to align with buttons */
    cursor: pointer;
    width: 100%;
    height: 100%; 
    padding-bottom: 8px; /* Fine-tune vertical alignment */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.tax-label {
    font-size: 10px;
    font-weight: 700;
    color: #8898aa; /* Muted grey for clean look */
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
    margin-bottom: 6px;
    transition: color 0.3s ease;
}

.tax-switch {
    width: 48px;
    height: 26px;
    background-color: var(--base-bg-color);
    border-radius: 13px;
    position: relative;
    /* Neumorphic "Pressed In" look for the track */
    box-shadow: inset 2px 2px 5px var(--shadow-dark), 
                inset -2px -2px 5px var(--shadow-light-inset);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.tax-knob {
    width: 22px;
    height: 22px;
    background-color: #f0f0f3; 
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    /* Pop-out shadow for the knob */
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), background-color 0.3s;
}

/* --- Active State (When Toggled On) --- */
.tax-toggle-container.active .tax-switch {
    background-color: #003366; /* Dark Rich Blue */
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5); /* Deeper shadow for depth */
}

.tax-toggle-container.active .tax-knob {
    transform: translateX(22px); /* Slides Right */
    background-color: #ffffff;   /* Bright white knob */
}

.tax-toggle-container.active .tax-label {
    color: #003366; /* Label turns blue too */
}