/* Styles for budget_calculator.ejs will go here */ 


    :root {
        /* Legacy colors - keeping for backward compatibility */
        --primary: #666;
        --secondary: #3498db;
        --accent: #33b5e5;
        --light-gray: #f2f2f2;
        --medium-gray: #e0e0e0;
        --dark-gray: #757575;
        --common-blue: #458fda;
        --budget-bg-offwhite: #f7f9fc;

        /* New Design System Colors */
        --bg-page: #f3f4f6;
        --bg-card: #ffffff;
        --border-subtle: #e5e7eb;
        --text-main: #111827;
        --text-muted: #6b7280;

        /* Border Radius */
        --radius-lg: 16px;
        --radius-md: 12px;
        --radius-sm: 8px;

        /* Shadows */
        --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.08);
        --shadow-hover: 0 8px 20px rgba(15, 23, 42, 0.08);

        /* Modal font sizes - centralized control */
        --modal-font-size: clamp(11px, 1.1vw, 14px);
        --modal-font-size-small: clamp(10px, 0.95vw, 12px);
        --modal-font-size-large: clamp(12px, 1.2vw, 15px);

        /* Budget table input font size - single place to control all dropdowns/inputs */
        --budget-input-font-size: 14px;
    }
    
    /* Keep original body styles but maybe scope them later if needed */
    /* body {
        font-family: Arial, sans-serif;
        color: #333;
        background-color: #f9f9f9;
        line-height: 1.6;
        padding: 1rem;
    } */

    /* Set off-white background for the monthly budget tab like saved plans tab */
    #monthly-budget-tab {
        background: var(--budget-bg-offwhite) !important;
        padding: 20px !important;
    }

    /* Style the budget container like saved plans sections */
    .budget-container-wrapper {

        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(18, 38, 63, 0.06);
        padding: 20px;
        margin-bottom: 20px;
    }

    /* ========================================
       BUDGET TABS
       ======================================== */

    .budget-tabs {
        display: flex;
        gap: 4px;
        margin-bottom: 16px;
        border-bottom: 2px solid #e5e7eb;
        padding-bottom: 0;
    }

    .budget-tab {
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 500;
        color: #6b7280;
        background: transparent;
        border: none;
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .budget-tab:hover {
        color: #3b82f6;
        background: rgba(59, 130, 246, 0.05);
    }

    .budget-tab.active {
        color: #3b82f6;
        border-bottom-color: #3b82f6;
        font-weight: 600;
    }

    .budget-tab i {
        font-size: 13px;
    }

    /* Tab Panels */
    .budget-tab-panel {
        display: none;
    }

    .budget-tab-panel.active {
        display: block;
    }

    /* ========================================
       BUDGET EDITING BAR
       Matches the Personal Profile "Editing plan" style
       ======================================== */

    .budget-editing-bar {
        padding: 14px 20px;
        border-bottom: 1px solid #dde2ee;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: nowrap;
        margin-bottom: 16px;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
    }

    .budget-editing-label {
        font-size: 13px;
        color: #6b7280;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .budget-editing-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #22c55e;
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
        flex-shrink: 0;
    }

    .budget-editing-link {
        font-weight: 500;
        color: #2f7af8;
        cursor: pointer;
        text-decoration: none;
        margin-left: 6px;
    }

    .budget-editing-link:hover {
        text-decoration: underline;
        color: #1f5dcc;
    }

    .budget-stop-editing-btn {
        border-radius: 999px;
        border: none;
        padding: 7px 16px;
        font-size: 13px;
        font-weight: 500;
        background: rgba(248, 113, 113, 0.9);
        color: #fdf2f2;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 2px 8px rgba(185, 28, 28, 0.25);
        transition: background 0.18s ease-out, box-shadow 0.18s ease-out, transform 0.1s ease-out;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .budget-stop-editing-btn:hover {
        background: #ef4444;
        box-shadow: 0 4px 12px rgba(185, 28, 28, 0.3);
        transform: translateY(-1px);
    }

    .budget-stop-editing-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(185, 28, 28, 0.3);
    }

    /* ========================================
       NEW UNIFIED BUDGET LAYOUT SYSTEM
       ======================================== */

    /* Main budget container with min/max width constraints */
    .budget-container {
        min-width: 700px;
        max-width: 1300px;
        margin: 0 auto;
        font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    /* Row 1: Header with title and action buttons */
    .budget-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 18px;
    }

    .budget-title-group {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-width: 0;
    }

    .budget-title-pill {
        width: 46px;
        height: 46px;
        border-radius: 999px;
        background: #5a87ea;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 22px;
        font-weight: 700;
        flex-shrink: 0;
    }

    .budget-title {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.03em;
        color: var(--text-main);
    }

    .budget-subtitle {
        margin: 2px 0 0;
        font-size: 13px;
        color: var(--text-muted);
    }

    .budget-header-actions {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
    }

    /* Row 2: Quick Actions toolbar */
    .budget-toolbar {
        display: flex;
        align-items: center;
        margin-bottom: 22px;
        gap: 12px;
        flex-wrap: wrap;
    }

    .budget-toolbar-label {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--text-muted);
        font-weight: 600;
    }

    .budget-toolbar-buttons {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
    }

    .budget-toolbar-options {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        font-size: 13px;
        color: var(--text-muted);
    }

    .budget-toolbar-options input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

    .budget-toolbar-options label {
        cursor: pointer;
    }

    /* Row 3: Budget panel containing all expense sections */
    .budget-panel {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-soft);
        padding: 16px 18px 18px;
        border: 1px solid rgba(148, 163, 184, 0.25);
        width: 100%;
    }

    /* ========================================
       NEW BUTTON STYLING SYSTEM
       ======================================== */

    /* Ghost button style for header and toolbar */
    .btn-ghost {
        background: rgba(255, 255, 255, 0.8) !important;
        color: var(--text-main) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 999px !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        cursor: pointer;
        transition: box-shadow 0.12s ease, transform 0.12s ease, background-color 0.12s ease;
        backdrop-filter: blur(8px);
        white-space: nowrap;
    }

    .btn-ghost:hover {
        background: #ffffff !important;
        box-shadow: var(--shadow-hover);
        transform: translateY(-1px);
    }

    .btn-ghost i {
        font-size: 12px;
    }

    /* Primary button variant (for Save) */
    .btn-primary-new {
        background: linear-gradient(120deg, #2563eb, #3b82f6) !important;
        color: white !important;
        border: none !important;
    }

    .btn-primary-new:hover {
        background: linear-gradient(120deg, #1d4ed8, #2563eb) !important;
    }

    /* Section Add button (in category headers) - Light design */
    .section-add-btn,
    .category-add-btn,
    .add-expense-in-header {
        border-radius: 999px !important;
        border: 1px dashed #94a3b8 !important;
        background: white !important;
        font-size: 11px !important;
        padding: 5px 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        cursor: pointer;
        color: #374151 !important;
        transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
        font-weight: 500;
    }

    .section-add-btn:hover,
    .category-add-btn:hover,
    .add-expense-in-header:hover {
        border-color: #2563eb !important;
        background: #eff6ff !important;
        color: #2563eb !important;
    }

    /* Category icon circle - base styles */
    .section-icon,
    .category-icon-circle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 999px;
        font-size: 14px;
    }

    /* Category icon colors (25% opacity backgrounds) */
    /* 0: Blue #536BA6 */
    .category-icon-0 { background-color: rgba(83, 107, 166, 0.25); }
    .category-icon-0 i { color: #536BA6; }

    /* 1: Orange #EA9960 */
    .category-icon-1 { background-color: rgba(234, 153, 96, 0.25); }
    .category-icon-1 i { color: #EA9960; }

    /* 2: Indigo #6B5B95 */
    .category-icon-2 { background-color: rgba(107, 91, 149, 0.25); }
    .category-icon-2 i { color: #6B5B95; }

    /* 3: Turquoise #6BC5C5 */
    .category-icon-3 { background-color: rgba(107, 197, 197, 0.25); }
    .category-icon-3 i { color: #6BC5C5; }

    /* 4: Teal #5A9C9E */
    .category-icon-4 { background-color: rgba(90, 156, 158, 0.25); }
    .category-icon-4 i { color: #5A9C9E; }

    /* 5: Green #70A288 */
    .category-icon-5 { background-color: rgba(112, 162, 136, 0.25); }
    .category-icon-5 i { color: #70A288; }

    /* 6: Purple #C46D8C */
    .category-icon-6 { background-color: rgba(196, 109, 140, 0.25); }
    .category-icon-6 i { color: #C46D8C; }

    /* 7: Red #D87479 */
    .category-icon-7 { background-color: rgba(216, 116, 121, 0.25); }
    .category-icon-7 i { color: #D87479; }

    /* 8: Pink #B67AA1 */
    .category-icon-8 { background-color: rgba(182, 122, 161, 0.25); }
    .category-icon-8 i { color: #B67AA1; }

    /* 9: Navy #3E4A6C */
    .category-icon-9 { background-color: rgba(62, 74, 108, 0.25); }
    .category-icon-9 i { color: #3E4A6C; }

    /* Icon buttons for edit/delete actions */
    .icon-btn {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        border: 1px solid rgba(209, 213, 219, 0.8);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: var(--text-muted);
        cursor: pointer;
        background: #ffffff;
        transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    }

    .icon-btn:hover {
        background: #eff6ff;
        border-color: #2563eb;
        color: #1d4ed8;
    }

    /* Style the edit/delete icons in expense rows */
    .expense-table .fa-edit,
    .expense-table .fa-trash-alt,
    .expense-table .fa-pen-to-square,
    .expense-table .fa-trash-can {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        border: 1px solid rgba(209, 213, 219, 0.8);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: var(--text-muted);
        cursor: pointer;
        background: #ffffff;
        transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
        margin: 0 2px;
    }

    .expense-table .fa-edit:hover,
    .expense-table .fa-trash-alt:hover,
    .expense-table .fa-pen-to-square:hover,
    .expense-table .fa-trash-can:hover {
        background: #eff6ff;
        border-color: #2563eb;
        color: #1d4ed8;
    }

    /* Delete icon red on hover */
    .expense-table .fa-trash-alt:hover,
    .expense-table .fa-trash-can:hover {
        background: #fef2f2;
        border-color: #ef4444;
        color: #dc2626;
    }

    /* Add New Category button */
    #addCategoryButton {
        border-radius: 999px !important;
        border: 1px dashed var(--border-subtle) !important;
        background: var(--bg-card) !important;
        color: var(--text-muted) !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        cursor: pointer;
        transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    }

    #addCategoryButton:hover {
        border-color: #2563eb !important;
        background: #eff6ff !important;
        color: #2563eb !important;
    }

    /* ========================================
       BUDGET SECTION / CATEGORY CARD STYLING
       ======================================== */

    /* New budget section class for future JS updates */
    .budget-section {
        border-radius: var(--radius-md);
        border: 1px solid var(--border-subtle);
        background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(249,250,251,0.96));
        margin-bottom: 14px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    /* Section header styling - Light design */
    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        gap: 10px;
        border-bottom: 1px solid rgba(229, 231, 235, 0.9);
        background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(249,250,251,0.95));
    }

    .section-main {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* Section icon - circular with category color */
    .section-icon,
    .category-icon-circle {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px;
     
    }

    .section-labels {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .section-title,
    .category-name {
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: -0.01em;
    }

    .section-caption {
        font-size: 11px;
        color: var(--text-muted);
    }

    .section-meta {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* Category total row styling */
    .category-total-row,
    .row-total {
        text-align: right;
        font-weight: 600;
        font-size: 13px;
        padding: 8px 12px 10px;
        color: var(--text-main);
        background: linear-gradient(to right, rgba(243, 244, 246, 0.8), rgba(255, 255, 255, 0.95));
        border-top: 1px solid rgba(229, 231, 235, 0.85);
    }

    /* Enhanced styling for existing category containers */
    .expense-table > tbody > tr > td > div {
        border-radius: var(--radius-md) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        margin-bottom: 16px;
    }

    /* Category header enhancements - smoother gradient feel */
    .expense-table > tbody > tr > td > div > div:first-child {
        padding: 12px 16px !important;
    }

    /* Category icon in headers - ensure consistent sizing */
    .expense-table .category-icon-circle {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        margin-right: 10px !important;
    }

    /* Toggle chevron styling */
    .toggle-category {
        opacity: 0.8;
        transition: transform 0.2s ease, opacity 0.2s ease;
        margin-left: 8px !important;
    }

    .toggle-category:hover {
        opacity: 1;
    }

    .toggle-category.collapsed {
        transform: rotate(180deg);
    }

    /* ========================================
       TABLE & INPUT STYLING
       ======================================== */

    /* Hide main expense table header - categories have their own structure */
    .expense-table > thead {
        display: none;
    }

    /* Enhanced table header styling for inner category tables */
    .category-inner-table {
        border-collapse: collapse;
    }

    .category-inner-table thead {
        background: rgba(249, 250, 251, 0.95) !important;
    }

    .category-inner-table th {
        font-size: 11px !important;
        text-transform: uppercase;
        color: var(--text-muted) !important;
        letter-spacing: 0.08em;
        font-weight: 600 !important;
        padding: 8px 10px !important;
        border-bottom: 1px solid rgba(229, 231, 235, 0.75) !important;
        background: transparent !important;
        text-align: left;
    }

    /* Table row styling */
    .expense-table tbody tr,
    .category-inner-table tbody tr {
        border-bottom: 1px solid rgba(229, 231, 235, 0.5);
    }

    .expense-table tbody tr:last-child,
    .category-inner-table tbody tr:last-child {
        border-bottom: none;
    }

    /* Row hover effect */
    .expense-table .expense-row:hover,
    .category-inner-table tr:hover {
        background: rgb(235, 235, 235) !important;
    }

    /* Alternating row shading (zebra striping) */
    .category-inner-table tbody tr:nth-child(odd) {
        background-color: #ffffff;
    }

    .category-inner-table tbody tr:nth-child(even) {
        background-color: #efefef;
    }

    /* Table cell styling */
    .expense-table td.expense-cell,
    .category-inner-table td {
        padding: 8px 10px !important;
        font-size: 15px !important;
        color: var(--text-main);
        vertical-align: middle;
    }

    /* Form inputs - select dropdowns */
    .expense-table select,
    .category-inner-table select,
    .inflation-select {
        border-radius: var(--radius-sm) !important;
        border: 1px solid rgba(209, 213, 219, 0.9) !important;
        padding: 4px 8px !important;
        font-size: var(--budget-input-font-size) !important;
        background: #ffffff !important;
        color: var(--text-main) !important;
        min-width: 60px;
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    /* Age dropdowns - wider to fit "Current Age (XX)" and "Plan End (XX)" */
    .editable-start-age {
        text-align: left !important;
        min-width: 140px !important;
        width: auto !important;
    }

    .editable-end-age {
        text-align: left !important;
        min-width: 120px !important;
        width: auto !important;
    }

    .expense-table select:hover,
    .category-inner-table select:hover {
        border-color: #2563eb !important;
    }

    .expense-table select:focus,
    .category-inner-table select:focus {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1) !important;
        outline: none !important;
    }

    /* Form inputs - text/number inputs */
    .expense-table input[type="text"],
    .expense-table input[type="number"],
    .category-inner-table input[type="text"],
    .category-inner-table input[type="number"],
    .editable-amount {
        border-radius: var(--radius-sm) !important;
        border: 1px solid rgba(209, 213, 219, 0.9) !important;
        padding: 4px 8px !important;
        font-size: var(--budget-input-font-size) !important;
        background: #ffffff !important;
        color: var(--text-main) !important;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    /* Amount inputs - right aligned */
    .editable-amount {
        text-align: right !important;
        min-width: 90px !important;
        font-weight: 500 !important;
    }

    .expense-table input:hover,
    .category-inner-table input:hover {
        border-color: #2563eb !important;
    }

    .expense-table input:focus,
    .category-inner-table input:focus {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1) !important;
        outline: none !important;
    }

    /* Actions column - center the icons */
    .expense-table td:last-child,
    .category-inner-table td:last-child {
        text-align: center;
    }

    /* Editable container styling */
    .editable-container {
        display: inline-flex;
        align-items: center;
    }

    /* Grand total row styling */
    .expense-table .grand-total td,
    .grand-total-row td {
        font-weight: 700 !important;
        font-size: 14px !important;
        padding: 12px 10px !important;
        background: linear-gradient(to right, rgba(243, 244, 246, 0.9), rgba(255, 255, 255, 0.98)) !important;
        border-top: 2px solid var(--border-subtle) !important;
    }

    /* ========================================
       CHIPS / BADGES STYLING
       ======================================== */

    /* Base chip style */
    .chip,
    .type-chip,
    .expense-type-badge {
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 500;
        background: rgba(15, 23, 42, 0.05);
        border: 1px solid rgba(148, 163, 184, 0.5);
        color: #374151;
        white-space: nowrap;
    }

    /* Need chip - Green */
    .chip.need,
    .chip-need,
    .type-chip.need,
    .expense-type-badge.need {
        background: rgba(22, 163, 74, 0.08);
        border-color: rgba(34, 197, 94, 0.5);
        color: #166534;
    }

    /* Want chip - Orange */
    .chip.want,
    .chip-want,
    .type-chip.want,
    .expense-type-badge.want {
        background: rgba(251, 146, 60, 0.1);
        border-color: rgba(249, 115, 22, 0.5);
        color: #9a3412;
    }

    /* Splurge chip - Purple */
    .chip.splurge,
    .chip-splurge,
    .type-chip.splurge,
    .expense-type-badge.splurge {
        background: rgba(168, 85, 247, 0.1);
        border-color: rgba(168, 85, 247, 0.5);
        color: #7c3aed;
    }

    /* Style the Type column in expense table to look like chips */
    .expense-table td.expense-cell:nth-child(2),
    .category-inner-table td:nth-child(2) {
        font-size: 11px !important;
        font-weight: 500;
    }

    /* Auto-style type text as chips based on content */
    .expense-row td:nth-child(2) {
        position: relative;
    }

    /* ========================================
       MODAL STYLING - NEW DESIGN SYSTEM
       ======================================== */

    /* Modal container updates */
    #addExpenseModal > div,
    #addCategoryModal > div,
    #deleteCategoryModal > div,
    #quickAddModal > div,
    #addLargeExpenseModal > div,
    #addCommonExpenseModal > div,
    #loadSampleBudgetModal > div,
    #deleteExpenseModal > div {
        border-radius: var(--radius-lg) !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
        overflow: hidden;
    }

    /* Modal header - updated styling */
    .modal-header-gradient {
        padding: 12px 16px !important;
        background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    }

    .modal-header-title {
        font-size: 16px !important;
        font-weight: 600 !important;
        letter-spacing: -0.01em;
    }

    /* Modal icon circle */
    .modal-icon-circle {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.2);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Modal close button - icon button style */
    .modal-header-close-btn {
        width: 28px !important;
        height: 28px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer;
        transition: background 0.15s ease !important;
    }

    .modal-header-close-btn:hover {
        background: rgba(255, 255, 255, 0.2) !important;
    }

    /* Modal form inputs */
    #addExpenseModal input[type="text"],
    #addExpenseModal input[type="number"],
    #addExpenseModal select,
    #addExpenseModal textarea,
    #addCategoryModal input,
    #quickAddModal input:not([type="range"]),
    #quickAddModal select,
    #addLargeExpenseModal input:not([type="range"]),
    #addLargeExpenseModal select,
    #addCommonExpenseModal input:not([type="range"]),
    #addCommonExpenseModal select {
        border-radius: var(--radius-sm) !important;
        border: 1px solid rgba(209, 213, 219, 0.9) !important;
        padding: 1px 12px !important;
        font-size: 13px !important;
        transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    }

    #addExpenseModal input:focus,
    #addExpenseModal select:focus,
    #addExpenseModal textarea:focus,
    #addCategoryModal input:focus,
    #quickAddModal input:focus,
    #quickAddModal select:focus {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1) !important;
        outline: none !important;
    }

    /* Modal buttons - pill style */
    #addExpenseModal button,
    #addCategoryModal button,
    #deleteCategoryModal button,
    #deleteExpenseModal button {
        border-radius: 999px !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        transition: all 0.15s ease !important;
    }

    /* Modal primary action button */
    #saveExpenseButton,
    #saveCategoryButton,
    #confirmDeleteCategoryButton,
    #confirmDeleteExpenseButton {
        background: linear-gradient(120deg, #2563eb, #3b82f6) !important;
        color: white !important;
        border: none !important;
    }

    #saveExpenseButton:hover,
    #saveCategoryButton:hover {
        background: linear-gradient(120deg, #1d4ed8, #2563eb) !important;
        transform: translateY(-1px);
        box-shadow: var(--shadow-hover);
    }

    /* Modal cancel/secondary button */
    #cancelExpenseButton,
    #cancelCategoryButton,
    #cancelDeleteCategoryButton,
    #cancelDeleteExpenseButton {
        background: rgba(255, 255, 255, 0.8) !important;
        color: var(--text-main) !important;
        border: 1px solid var(--border-subtle) !important;
    }

    #cancelExpenseButton:hover,
    #cancelCategoryButton:hover,
    #cancelDeleteCategoryButton:hover,
    #cancelDeleteExpenseButton:hover {
        background: #ffffff !important;
        box-shadow: var(--shadow-hover);
    }

    /* Delete confirmation button - red */
    #confirmDeleteCategoryButton,
    #confirmDeleteExpenseButton {
        background: linear-gradient(120deg, #dc2626, #ef4444) !important;
    }

    #confirmDeleteCategoryButton:hover,
    #confirmDeleteExpenseButton:hover {
        background: linear-gradient(120deg, #b91c1c, #dc2626) !important;
    }

    /* Modal form labels */
    #addExpenseModal label,
    #addCategoryModal label {
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--text-main) !important;
        margin-bottom: 4px !important;
    }

    /* Category filter chips in modals */
    .category-filter-item {
        border-radius: 999px !important;
        padding: 4px 12px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        border: 1px solid var(--border-subtle) !important;
        background: white !important;
        cursor: pointer;
        transition: all 0.15s ease !important;
    }

    .category-filter-item:hover {
        border-color: #2563eb !important;
        color: #2563eb !important;
    }

    .category-filter-item.active {
        background: #2563eb !important;
        color: white !important;
        border-color: #2563eb !important;
    }

    /* Modal table styling */
    #quickAddModal table,
    #addLargeExpenseModal table,
    #addCommonExpenseModal table {
        border-collapse: collapse;
    }

    #quickAddModal th,
    #addLargeExpenseModal th,
    #addCommonExpenseModal th {
        font-size: 11px !important;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted) !important;
        font-weight: 600 !important;
        padding: 8px 10px !important;
        border-bottom: 1px solid var(--border-subtle) !important;
        background: rgba(249, 250, 251, 0.95) !important;
    }

    #quickAddModal td,
    #addLargeExpenseModal td,
    #addCommonExpenseModal td {
        padding: 8px 10px !important;
        font-size: 13px !important;
        border-bottom: 1px solid rgba(229, 231, 235, 0.5) !important;
    }

    #quickAddModal tbody tr:hover,
    #addLargeExpenseModal tbody tr:hover,
    #addCommonExpenseModal tbody tr:hover {
        background: rgba(239, 246, 255, 0.5) !important;
    }

    /* ========================================
       LEGACY PANEL STYLES (keeping for compatibility)
       ======================================== */

    .panel {
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 1rem;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        width: 100%;
    }
    
    .panel-header {
        background-color: #f2f2f2;
        padding: 0.25rem 1rem;
        font-weight: bold;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .panel-body {
        padding: 1rem;
    }
    
    .btn {
        background: var(--common-blue);
        /* background: linear-gradient(135deg, #667eea 0%, #5388bb 100%); */
        color: white;
        padding: 0.3rem 1rem;
        border: none;
        border-radius: 0.25rem;
        cursor: pointer;
        font-size: clamp(10px, 0.8vw, 15px);
    }
    
    .btn:hover {
        background: #2563eb;
    }
    
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .btn-danger {
        background-color: #e74c3c;
    }
    
    .btn-danger:hover {
        background-color: #c0392b;
    }
    
    .expense-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1rem;
        table-layout: fixed; /* Fixed layout for better column control */
        background-color:transparent;
    }

    /* Add padding to the expense table container for better spacing */
    .expense-table-container {
        padding: 0 10px;
    }

    /* Optimize column widths for better space distribution 
       Total: 100% - Reduced Frequency width to give more space to Start Age dropdown */
    .expense-table th:nth-child(1), .expense-table td:nth-child(1) { /* Expense Name */
        width: 25%;
    }
    .expense-table th:nth-child(2), .expense-table td:nth-child(2) { /* Type */
        width: 8%;
    }
    .expense-table th:nth-child(3), .expense-table td:nth-child(3) { /* Frequency */
        width: 13%; /* Reduced from typical 18% to make room for Start Age */
    }
    .expense-table th:nth-child(4), .expense-table td:nth-child(4) { /* Start Age */
        width: 12%; /* Increased to accommodate "Current Age (XX)" dropdown */
    }
    .expense-table th:nth-child(5), .expense-table td:nth-child(5) { /* End Age */
        width: 8%;
    }
    .expense-table th:nth-child(6), .expense-table td:nth-child(6) { /* Inflation % */
        width: 11%;
    }
    .expense-table th:nth-child(7), .expense-table td:nth-child(7) { /* Monthly Amount */
        width: 13%;
    }
    .expense-table th:nth-child(8), .expense-table td:nth-child(8) { /* Actions */
        width: 10%;
    }
    
    .expense-table th {
        background-color: #f2f2f2;
        text-align: left;
        padding: 8px;
        font-weight: bold;
        border-bottom: 1px solid #ddd;
        font-size: clamp(11px, 1.2vw, 15px);
    }

    /* Larger font size for popup windows where viewport is smaller */
    body.popup-mode .expense-table th {
        font-size: clamp(12px, 2vw, 15px);
    }
    
    .expense-table td {
        padding: 2px 2px;

        font-size: clamp(11px, 1.2vw, 14px);
    }

    /* Standard cell padding for expense rows */
    .expense-table td.expense-cell {
        padding: 5px 10px;
    }

    /* Category total row styling */
    .expense-table td.category-total-cell {
        padding: 12px 15px;
        background: #f8f9fa;
        border-top: 2px solid #dee2e6;
    }

    .expense-table td.category-total-cell.total-label {
        font-weight: 600;
    }

    .expense-table td.category-total-cell.total-amount {
        font-weight: 600;
        text-align: right;
    }

    /* Larger font size for popup windows where viewport is smaller */
    body.popup-mode .expense-table td {
        font-size: clamp(12px, 2vw, 14px);
    }

    /* Ensure inputs and selects in popup mode are also readable */
    body.popup-mode .expense-table input,
    body.popup-mode .expense-table select {
        font-size: clamp(12px, 1.5vw, 14.0px) !important;
    }

    /* Adjust margins for popup mode to maximize space */
    body.popup-mode tbody.category-group,
    body.popup-mode .budget-category-section,
    body.popup-mode .category-container {
        margin: 0 5px 15px 5px;
    }

    /* Slightly reduce padding in popup mode */
    body.popup-mode #monthly-budget-tab {
        padding: 10px !important;
    }

    /* Left-align first two columns in expense rows */
    .expense-table .expense-row td:nth-child(1),
    .expense-table .expense-row td:nth-child(2) {
        text-align: left;
    }
    
    /* Removed hover effect
    .expense-table tr:hover {
        background-color: #f9f9f9;
    }
    */
    
    .expense-table .category-header {
        font-weight: bold;
        font-size: .95em;
        color: white;
        height: 26px;
        position: relative;
    }

    .expense-table .category-header td {
        padding: 0;
        overflow: hidden;
        border-bottom: none !important;
    }

    /* Wrapper div inside category header TD */
    .category-header-wrapper {
        transition: all 0.3s ease;
        border-radius: 8px 8px 0 0;
        position: relative;
    }

    /* Enhanced category container styling - full border and shadow */
    .category-container {
        margin: 0 10px 20px 10px;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    /* Style for tbody elements that act as category containers */
    tbody.category-group {
        display: block;
        margin: 0 10px 20px 10px;
        border: 2px solid;
        border-color: var(--category-color, var(--common-blue));
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    /* Alternative approach: Style tables containing categories */
    .budget-category-section {
        margin: 0 10px 20px 10px;
        background: #ffffff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    /* Add colored border to each category section using inline styles or data attributes */
    .budget-category-section[data-category-color] {
        border: 2px solid;
    }

    /* Ensure expense rows within category don't have conflicting borders */
    tbody.category-group .expense-row td,
    .budget-category-section .expense-row td {
        border-left: none;
        border-right: none;
    }

    /* Remove bottom border from last expense row in each category */
    tbody.category-group .expense-row:last-child td,
    .budget-category-section .expense-row:last-child td {
        border-bottom: none;
    }

    /* Ensure the category header fits well with new border styling */
    .budget-category-section .category-header-wrapper,
    tbody.category-group .category-header-wrapper {
        margin: -2px -2px 0 -2px; /* Compensate for parent border */
    }

    /* Remove the old left-only border pseudo-element since we'll use full borders */
    .category-header-wrapper::before {
        display: none;
    }

    /* Removed hover effect
    .expense-table .category-header:hover .category-header-wrapper {
        filter: brightness(1.05);
        transform: translateY(-1px);
    }
    */

    /* Spacer rows between categories - not needed with new container approach */
    .expense-table .category-spacer {
        display: none;
    }

    /* If spacers are still used, make them smaller and transparent */
    .expense-table .category-spacer td {
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        height: 8px;
    }

    /* Circular icon background */
    .category-icon-circle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
       
        margin-right: 12px;
        font-size: 0.95em;
        transition: all 0.3s ease;
    }

    /* Removed hover effect
    .expense-table .category-header:hover .category-icon-circle {
        background-color: rgba(255, 255, 255, 0.35);
        transform: scale(1.1);
    }
    */

    /* Category name styling */
    .category-name {
        font-size: 1.05em;
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    /* Chevron animation */
    .toggle-category {
        transition: transform 0.3s ease;
    }

    /* Removed hover effect
    .toggle-category:hover {
        transform: scale(1.2);
    }
    */

    /* Old category-add-btn styles removed - now using new design system styles at top of file */

    .expense-table .category-total {
        font-weight: bold;
        border-top: 1px solid #ddd;
        border-bottom: 2px solid #ddd;
        font-size: .9em;
        transition: all 0.3s ease;
    }

    /* Expense row enhancements */
    .expense-table .expense-row {
        transition: all 0.2s ease;
    }

    /* Removed hover effect
    .expense-table .expense-row:hover {
        background-color: #f9f9f9 !important;
        transform: translateX(2px);
    }
    */

    /* Row collapse/expand animation */
    @keyframes slideDown {
        from {
            opacity: 0;
            max-height: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            max-height: 100px;
            transform: translateY(0);
        }
    }

    @keyframes slideUp {
        from {
            opacity: 1;
            max-height: 100px;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            max-height: 0;
            transform: translateY(-10px);
        }
    }

    .expense-row.collapsing {
        animation: slideUp 0.3s ease forwards;
    }

    .expense-row.expanding {
        animation: slideDown 0.3s ease forwards;
    }
    
    .expense-table .grand-total {
        font-weight: bold;
        font-size: .9em;
        background-color: #f2f2f2;
        border-top: 2px solid #ddd;
        border-bottom: 2px solid #ddd;
    }
    
    .action-icons {
        white-space: nowrap;
    }
    
    .action-icons i {
        cursor: pointer;
        margin-left: 8px;
        font-size: 1em;
        color: var(--dark-gray);
    }
    
    .action-icons i:hover {
        color: var(--secondary);
    }
    
    .add-row {
        display: flex;
        align-items: center;
        padding: 2px 8px;
        cursor: pointer;
        border-bottom: 1px dashed #ddd;
    }
    
    .add-row:hover {
        background-color: #f9f9f9;
    }
    
    .add-row i {
        margin-right: 8px;
        color: var(--secondary);
    }
    
    .frequency-badge {
        display: inline-block;
        font-size: 0.75rem;
        padding: 2px 5px;
        border-radius: 4px;
        background-color: #e0e0e0;
        color: #333;
    }
    
    .table-container {
        overflow-x: auto;
    }
    
    .quick-add-panel {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 1rem;
        width: 80%;
        max-width: 900px;
        max-height: 120vh;
        z-index: 100;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        display: none;
        overflow: hidden;
    }
    
    .quick-add-item {
        padding: 0.5rem;
        cursor: pointer;
        border-bottom: 1px solid #f2f2f2;
    }
    
    .quick-add-item:hover {
        background-color: #f0f7ff;
    }
    
    .notification {
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: #4CAF50;
        color: white;
        padding: 15px;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .notification.show {
        opacity: 1;
    }

    .editable-amount {
        border: 1px solid #ccc;
        padding: 2px 8px;
        cursor: text;
        width: 100%;
        text-align: right;
        background-color: #f8f8f8;
        border-radius: 3px;
        transition: all 0.2s;
    }

    .editable-amount:hover, .editable-amount:focus {
        border-color: var(--secondary);
        background-color: #fff;
        box-shadow: 0 0 3px rgba(52, 152, 219, 0.6);
    }

    .editable-age {
        border: 1px solid #ccc;
        padding: 2px 4px;
        cursor: text;
        width: 50px;
        text-align: center;
        background-color: #f8f8f8;
        border-radius: 3px;
        transition: all 0.2s;
        font-size: clamp(9px, 1.0vw, 25px);
        height:25px;
        width:45px;
    }

    /* Special styling for Start Age and End Age dropdowns */
    .editable-start-age {
        min-width: 140px !important;
        width: auto !important;
        font-size: var(--budget-input-font-size);
        padding: 2px 4px;
        white-space: nowrap;
    }

    .editable-end-age {
        min-width: 120px !important;
        width: auto !important;
        font-size: var(--budget-input-font-size);
        padding: 2px 4px;
        white-space: nowrap;
    }

    .editable-start-age:hover, .editable-start-age:focus,
    .editable-end-age:hover, .editable-end-age:focus {
        border-color: var(--secondary);
        background-color: #fff;
        box-shadow: 0 0 3px rgba(52, 152, 219, 0.6);
        outline: none;
    }

    /* Warning state for invalid age selections */
    .editable-start-age.has-invalid-age {
        background-color: #ffe6e6;
        border-color: #ffb3b3;
    }

    .editable-start-age.has-invalid-age:hover, .editable-start-age.has-invalid-age:focus {
        background-color: #ffd9d9;
        border-color: #ff9999;
        box-shadow: 0 0 3px rgba(255, 153, 153, 0.6);
    }

    /* Style for invalid age options */
    .invalid-age {
        background-color: #ffe6e6 !important;
        color: #cc0000 !important;
        font-style: italic;
    }

    .editable-age:hover, .editable-age:focus {
        border-color: var(--secondary);
        background-color: #fff;
        box-shadow: 0 0 3px rgba(52, 152, 219, 0.6);
        outline: none;
    }

    /* Remove number input spinners for age fields */
    .editable-age::-webkit-outer-spin-button,
    .editable-age::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .editable-age[type=number] {
        -moz-appearance: textfield;
    }

    /* Special styling for Inflation Rate dropdown */
    .editable-inflation {
        border: 1px solid #ccc;
        padding: 1px 2px;
        cursor: pointer;
        min-width: 90px !important;
        width: 70px !important;
        font-size: var(--budget-input-font-size);
        text-align: center;
        background-color: #f8f8f8;
        border-radius: 3px;
        transition: all 0.2s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height:25px;
    }

    .editable-inflation:hover, .editable-inflation:focus {
        border-color: var(--secondary);
        background-color: #fff;
        box-shadow: 0 0 3px rgba(52, 152, 219, 0.6);
        outline: none;
    }

    /* Remove number input spinners for any remaining inflation input fields */
    .editable-inflation::-webkit-outer-spin-button,
    .editable-inflation::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .editable-inflation[type=number] {
        -moz-appearance: textfield;
    }

    /* Inflation slider styles */
    #inflationSlider {
        -webkit-appearance: none;
        appearance: none;
        height: 6px;
        background: #ddd;
        border-radius: 3px;
        outline: none;
        opacity: 0.7;
        transition: opacity 0.2s;
    }

    #inflationSlider:hover {
        opacity: 1;
    }

    #inflationSlider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        background: var(--secondary);
        border-radius: 50%;
        cursor: pointer;
    }

    #inflationSlider::-moz-range-thumb {
        width: 18px;
        height: 18px;
        background: var(--secondary);
        border-radius: 50%;
        cursor: pointer;
        border: none;
    }

    #inflationInput {
        font-size: 14px;
    }

    /* Icon selector styles */
    .icon-selector {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
        max-height: 200px;
        overflow-y: auto;
        margin-top: 8px;
    }

    .icon-option {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
    }

    .icon-option:hover {
        background-color: #f0f0f0;
    }

    .icon-option.selected {
        background-color: #3498db;
        color: white;
        border-color: #3498db;
    }
    
    .collapsed-category {
        /* Keep the gradient background from inline styles */
        /* background-color removed to preserve gradient */
    }
    
    .amount-edit-indicator {
        font-size: 10px;
        color: #999;
        position: absolute;
        right: 4px;
        margin-top: -16px;
    }
    
    .editable-container {
        position: relative;
    }
    
    .category-badge {
        background-color: #e0e0e0;
        color: #333;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.8rem;
        margin-left: 5px;
    }
    
    /* Quick Add Modal Styles */
    .quick-add-modal {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 50;
    }
    
    .quick-add-content {
        display: flex;
        flex-direction: column;
        height: 95%;
        max-height: 1200px;
    }
    
    .quick-add-header {
        padding: 1rem;
        background-color: #f2f2f2;
        border-bottom: 1px solid #ddd;
    }
    
    .quick-add-body {
        flex: .92; /* Added semicolon */
        overflow-y: auto; /* Added semicolon */
        padding: 1rem;
    }
    
    .quick-add-footer {
        padding: 1rem;
        background-color: #f2f2f2;
        border-top: 1px solid #ddd;
    }
    
    .subscription-table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .subscription-table th {
        position: sticky;
        top: 0;
        background-color: #f2f2f2;
        padding: 8px;
        text-align: left;
        font-weight: bold;
        border-bottom: 1px solid #ddd;
        z-index: 1;
    }
    
    .subscription-table td {
        padding: 8px;
        border-bottom: 1px solid #f2f2f2;
    }
    
    .subscription-table tr:hover {
        background-color: #f0f7ff;
        cursor: pointer;
    }
    
    .category-filter-item {
        display: inline-block;
        padding: 4px 8px;
        margin: 2px;
        border-radius: 4px;
        background-color: #f2f2f2;
        cursor: pointer;
    }
    
    .category-filter-item:hover {
        background-color: #e0e0e0;
    }
    
    .category-filter-item.active {
        background-color: #3498db;
        color: white;
    }
    
    .search-container {
        position: relative;
    }
    
    .search-container .search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
    }
    
    .search-container input {
        padding-left: 30px;
    }
    
    /* Modal backdrop */
    .modal-backdrop {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 40;
    }
    
    /* Debug console styles */
    #debugConsole {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 400px;
        height: 300px;
        background-color: rgba(0, 0, 0, 0.8);
        color: #0f0;
        font-family: monospace;
        padding: 10px;
        overflow-y: auto;
        z-index: 9999;
        display: none;
    }
    
    /* Quick Add notification styles */
    .quick-add-notification {
        background-color: #4CAF50;
        color: white;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        animation: fadeIn 0.3s, fadeOut 0.5s 2.5s forwards;
        overflow: hidden;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; max-height: 0; }
        to { opacity: 1; max-height: 60px; }
    }
    
    @keyframes fadeOut {
        from { opacity: 1; max-height: 60px; }
        to { opacity: 0; max-height: 0; }
    }
    
    .quick-add-notifications-container {
        position: sticky;
        top: 0;
        z-index: 2;
        max-height: 300px;
        overflow-y: auto;
    }

    /* ============================================
       Quick Add Modal Redesign Styles
       ============================================ */

    /* CSS Variables for Quick Add Modal */
    .quick-add-modal {
        --qa-bg-modal: #ffffff;
        --qa-bg-soft: #f6f7fb;
        --qa-border-soft: #e2e5f0;
        --qa-primary: #2563eb;
        --qa-primary-soft: #e0ebff;
        --qa-primary-dark: #1d4ed8;
        --qa-text-main: #111827;
        --qa-text-muted: #6b7280;
        --qa-radius-lg: 18px;
        --qa-radius-pill: 999px;
        --qa-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.25);
        --qa-transition-fast: 160ms ease-out;
    }

    /* Quick Add Modal Header Redesign */
    .quick-add-header-new {
        position: relative;
        padding: 18px 24px 14px;
        display: flex;
        align-items: center;
        gap: 18px;
        border-bottom: 1px solid var(--qa-border-soft);
        background: linear-gradient(135deg, #f9fbff 0%, #fefefe 40%, #ffffff 100%);
        border-radius: 0.5rem 0.5rem 0 0;
    }

    .quick-add-header-icon {
        width: 54px;
        height: 54px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #2563eb, #4f46e5);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        color: #ffffff;
        font-size: 26px;
        /* Grow and fade in animation */
        animation: quickAddIconGrow 1020ms cubic-bezier(0.25, 0.8, 0.3, 1.1) 120ms both;
    }

    @keyframes quickAddIconGrow {
        from {
            transform: scale(0.05) translateY(8px);
            opacity: 0;
        }
        to {
            transform: scale(1) translateY(0);
            opacity: 1;
        }
    }

    .quick-add-header-icon i {
        transition: transform 200ms ease-out;
    }

    .quick-add-header-icon:hover i {
        transform: translateY(-2px) scale(1.04);
    }

    .quick-add-header-main {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .quick-add-header-title {
        font-size: 19px;
        font-weight: 600;
        color: var(--qa-text-main);
        letter-spacing: 0.01em;
        /* Fade in animation */
        animation: quickAddTitleFade 1000ms ease-out 220ms both;
    }

    @keyframes quickAddTitleFade {
        from {
            transform: translateY(6px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .quick-add-header-subtitle {
        font-size: 13px;
        color: var(--qa-text-muted);
    }

    .quick-add-header-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* Search Input Redesign */
    .quick-add-search-wrapper {
        position: relative;
        min-width: 260px;
    }

    .quick-add-search-input {
        width: 100%;
        padding: 8px 32px 8px 30px;
        border-radius: var(--qa-radius-pill);
        border: 1px solid #d1d5db;
        font-size: 13px;
        outline: none;
        background: #ffffff;
        color: var(--qa-text-main);
        transition: border-color var(--qa-transition-fast), box-shadow var(--qa-transition-fast);
    }

    .quick-add-search-input:focus {
        border-color: var(--qa-primary);
        box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2), 0 0 0 6px rgba(191, 219, 254, 0.7);
    }

    .quick-add-search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        color: #9ca3af;
        pointer-events: none;
    }

    /* Close Button Redesign */
    .quick-add-close-btn {
        border: none;
        background: none;
        cursor: pointer;
        width: 32px;
        height: 32px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #6b7280;
        transition: background-color var(--qa-transition-fast), color var(--qa-transition-fast);
    }

    .quick-add-close-btn:hover {
        background: #e5e7eb;
        color: #111827;
    }

    /* Category Bar Redesign */
    .quick-add-category-bar {
        padding: 14px 24px 14px;
        border-bottom: 1px solid var(--qa-border-soft);
        background: linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%);
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    #categoryFilters,
    #largeExpenseCategoryFilters,
    #commonExpenseCategoryFilters {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .quick-add-category-label {
        font-size: 12px;
        font-weight: 500;
        color: #6b7280;
        margin-right: 6px;
    }

    .quick-add-chip {
        border-radius: var(--qa-radius-pill);
        border: 1px solid #e5e7eb;
        padding: 4px 10px;
        font-size: 12px;
        background: #ffffff;
        color: #4b5563;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: background-color var(--qa-transition-fast), color var(--qa-transition-fast),
                    border-color var(--qa-transition-fast), transform 120ms ease-out;
    }

    .quick-add-chip .chip-dot {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: transparent;
    }

    .quick-add-chip.active {
        background: var(--qa-primary-soft);
        border-color: rgba(37, 99, 235, 0.45);
        color: var(--qa-primary-dark);
        box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
    }

    .quick-add-chip.active .chip-dot {
        background: var(--qa-primary);
    }

    .quick-add-chip:hover {
        transform: translateY(-1px);
        background: #f3f4ff;
    }

    /* Table Redesign */
    .quick-add-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    .quick-add-table thead {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .quick-add-table thead tr {
        background: #f9fafb;
    }

    .quick-add-table th {
        text-align: left;
        padding: 8px 10px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #9ca3af;
        font-weight: 600;
        border-bottom: 1px solid #e5e7eb;
    }

    /* Alternating row shading (zebra striping) */
    .quick-add-table tbody tr:nth-child(odd) {
        background-color: #ffffff;
    }

    .quick-add-table tbody tr:nth-child(even) {
        background-color: #efefef;
    }

    .quick-add-table tbody tr:hover {
        background: #eef2ff;
    }

    .quick-add-table td {
        padding: 8px 10px;
        border-bottom: 1px solid #edf0f7;
    }

    .quick-add-table .name-cell {
        font-weight: 500;
        color: #111827;
    }

    .quick-add-table .category-cell {
        color: #6b7280;
    }

    /* Slider Wrapper for Quick Add */
    .quick-add-slider-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 200px;
    }

    .quick-add-slider-input {
        width: 80px;
        padding: 4px 8px;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        font-size: 13px;
        text-align: right;
    }

    /* Slider styling for Quick Add - relies on base .compact-slider-range from styles.css */
    /* Only override specifics needed for Quick Add table context */

    /* Add Button Redesign - Soft blue instead of green */
    .quick-add-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--qa-radius-pill);
        padding: 6px 14px;
        border: 1px solid transparent;
        font-size: 10px;
        font-weight: 500;
        cursor: pointer;

        border-color: rgba(37, 99, 235, 0.6);
        color: rgb(75, 75, 75);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
        transition: background-color var(--qa-transition-fast), transform 120ms ease-out;
        height:22px;
    }

    .quick-add-btn:hover {
        background: #dbe7ff;
        transform: translateY(-1px);
    }

    /* Footer Redesign */
    .quick-add-footer-new {
        padding: 12px 24px 16px;
        border-top: 1px solid #e5e7eb;
        background: #f9fafb;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-radius: 0 0 0.5rem 0.5rem;
    }

    .quick-add-footer-hint {
        font-size: 12px;
        color: #6b7280;
    }

    .quick-add-footer-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Done Button - Gradient blue */
    .quick-add-btn-primary {
        background: linear-gradient(135deg, #2563eb, #4f46e5);
        color: #ffffff;
        border: none;
        padding: 9px 20px;
        font-size: 13px;
        border-radius: var(--qa-radius-pill);
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
        transition: transform 120ms ease-out, box-shadow 120ms ease-out;
    }

    .quick-add-btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    /* Custom Scrollbar for Quick Add Modal Body */
    .quick-add-body::-webkit-scrollbar {
        width: 8px;
    }

    .quick-add-body::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }

    .quick-add-body::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }

    .quick-add-body::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

    /* Firefox scrollbar support */
    .quick-add-body {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 #f1f5f9;
    }

    /* Responsive adjustments for Quick Add Modal */
    @media (max-width: 768px) {
        .quick-add-header-new {
            flex-wrap: wrap;
            gap: 12px;
            padding: 14px 16px 12px;
        }

        .quick-add-header-actions {
            width: 100%;
            justify-content: space-between;
        }

        .quick-add-search-wrapper {
            flex: 1;
            min-width: 0;
        }

        .quick-add-category-bar {
            padding: 8px 16px;
        }

        .quick-add-table th:nth-child(3),
        .quick-add-table td:nth-child(3) {
            display: none; /* Hide slider column on small screens */
        }
    }

    /* ============================================
       End Quick Add Modal Redesign Styles
       ============================================ */

    /* Delete category button styles */
    .delete-category-btn {
        color: #e74c3c;
        margin-left: 8px;
        cursor: pointer;
        font-size: 0.9em;
        transition: all 0.2s;
    }
    
    .delete-category-btn:hover {
        color: #c0392b;
    }
    
    /* Category delete confirm modal */
    .delete-confirm-modal {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 60;
        align-items: center;
        justify-content: center;
    }
    
    .delete-confirm-content {
        background-color: white;
        padding: 1.5rem;
        border-radius: 4px;
        max-width: 500px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    
    .highlight-deleted {
        animation: fadeOutRow 0.5s forwards;
    }
    
    @keyframes fadeOutRow {
        from { 
            opacity: 1; 
            background-color: #ffcccc;
        }
        to { 
            opacity: 0; 
            background-color: #ffcccc;
            height: 0;
            padding: 0;
            margin: 0;
        }
    }

    /* Custom style for large expense modal table text */
    .large-expense-row-text {
        font-size: var(--modal-font-size) !important;
    }

    /* Projection table styles */
    .projection-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1rem;
    }

    .projection-table th {
        background-color: #f2f2f2;
        text-align: left;
        padding: 8px;
        font-weight: bold;
        border-bottom: 1px solid #ddd;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .projection-table td {
        padding: 6px 8px;
        border-bottom: 1px solid #f2f2f2;
        font-size: 13px;
    }

    .projection-table tr:hover {
        background-color: #f9f9f9;
    }

    .projection-table .age-column {
        font-weight: bold;
        text-align: center;
    }

    .projection-table .amount-column {
        text-align: right;
        font-family: monospace;
    }

    .projection-table .current-age-row {
        background-color: #e8f4f8;
        font-weight: bold;
    }

    .projection-table .retirement-age-row {
        background-color: #fff2e8;
        font-weight: bold;
    }

    .projection-table .zero-amount {
        color: #999;
        font-style: italic;
    }

    /* Adjust font size for more columns */
    .projection-table td {
        font-size: 12px;
    }

    .projection-table th {
        font-size: 12px;
    }

    /* Add Expense Modal Styling */
    #addExpenseModal {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        letter-spacing: 0.2px;
        line-height: 1.4em;
    }

    /* Reusable modal header styling */
    .modal-header-gradient {
        padding: 4px 12px;
        background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
        border-radius: 0.5rem 0.5rem 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-header-title {
        font-size: 1rem;
        font-weight: 600;
        color: white;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .modal-header-close-btn {
        color: white;
        transition: color 0.2s;
    }

    .modal-header-close-btn:hover {
        color: rgba(255, 255, 255, 0.7);
    }

    .modal-header-close-btn i {
        font-size: 1rem;
    }

    /* Apply centralized font sizing to all modals */
    #quickAddModal,
    #addLargeExpenseModal,
    #addCommonExpenseModal {
        font-size: var(--modal-font-size);
    }

    #quickAddModal label,
    #addLargeExpenseModal label,
    #addCommonExpenseModal label {
        font-size: var(--modal-font-size);
    }

    #quickAddModal input,
    #quickAddModal select,
    #quickAddModal textarea,
    #quickAddModal button,
    #addLargeExpenseModal input,
    #addLargeExpenseModal select,
    #addLargeExpenseModal textarea,
    #addLargeExpenseModal button,
    #addCommonExpenseModal input,
    #addCommonExpenseModal select,
    #addCommonExpenseModal textarea,
    #addCommonExpenseModal button {
        font-size: var(--modal-font-size);
    }

    #quickAddModal .text-sm,
    #addLargeExpenseModal .text-sm,
    #addCommonExpenseModal .text-sm {
        font-size: var(--modal-font-size-small) !important;
    }

    #quickAddModal h2,
    #quickAddModal h3,
    #addLargeExpenseModal h2,
    #addLargeExpenseModal h3,
    #addCommonExpenseModal h2,
    #addCommonExpenseModal h3 {
        font-size: var(--modal-font-size-large);
    }

    /* Circular icon badge in modal header */
    .modal-icon-circle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.25);
        flex-shrink: 0;
    }

    .modal-icon-circle i {
        font-size: 13px;
        color: white;
    }

    /* Legacy class name for backward compatibility */
    .expense-modal-icon-circle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.25);
        flex-shrink: 0;
    }

    .expense-modal-icon-circle i {
        font-size: 13px;
        color: white;
    }

    .expense-modal-input,
    .expense-modal-select,
    .expense-modal-textarea {
        font-size: clamp(12px, 1.2vw, 14px);
        font-weight: 400;
        color: #1E1E1E;
        transition: border-color 0.2s, box-shadow 0.2s;
        font-family: inherit;
    }

    .expense-modal-input:focus,
    .expense-modal-select:focus,
    .expense-modal-textarea:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .expense-modal-textarea {
        resize: vertical;
        min-height: 60px;
        max-height: 120px;
    }

    /* Modal labels - bold and proper color */
    #addExpenseModal label {
        font-size: clamp(11px, 1.1vw, 13px);
        font-weight: 600;
        color: #1E1E1E;
        letter-spacing: 0.2px;
    }

    /* Modal Start Age and End Age dropdowns - wider to fit longer text */
    #expenseStartAge,
    #expenseEndAge {
        min-width: 100%;
    }

    /* Modal header text */
    #addExpenseModal h2 {
        font-size: clamp(14px, 1.4vw, 18px);
        font-weight: 600;
        letter-spacing: 0.2px;
    }

    /* Help text - lighter color */
    #addExpenseModal .text-xs,
    #addExpenseModal .text-gray-500 {
        font-size: clamp(10px, 0.9vw, 11px);
        color: #9CA3AF;
        font-weight: 400;
    }

    /* Secondary text */
    #addExpenseModal .text-sm {
        color: #6B7280;
    }

    /* Category select with icon support */
    #expenseCategory {
        font-family: inherit;
    }

    /* Make modal more compact on smaller screens */
    @media (max-width: 768px) {
        #addExpenseModal > div {
            width: 90% !important;
            margin-top: 2rem !important;
        }
    }
}

/* ===================================================================== */
/* Monthly Budget Tab - Simple Table Styling                            */
/* ===================================================================== */

/* Main tab background - off-white to match Saved Plans tab */
#monthly-budget-tab,
#monthly-budget-tab .panel,
#monthly-budget-tab .panel-body,
#monthly-budget-tab .content-box {
    background: #f7f9fc !important;  /* Off-white background */
}

#monthly-budget-tab {
    padding: 20px !important;
}

/* Remove panel borders but keep background */
#monthly-budget-tab .panel {
    border: none !important;
    box-shadow: none !important;
    background-color:transparent;
}

#monthly-budget-tab .panel-body {
    border: none !important;
    box-shadow: none !important;
    padding: 10px !important;
}

/* Budget categories wrapper - off-white background */
#budget-categories-wrapper {
    background: #f7f9fc !important;  /* Off-white background */
    padding: 20px !important;
}

/* Individual category containers */
.budget-category-box {
    background: white !important;
    border-radius: 10px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
}

/* Inner expense tables */
.expense-table-inner {
    width: 100%;
    border-collapse: collapse;
}

.expense-table-inner td {
    padding: 8px 12px;
    border-top: 1px solid #f0f0f0;
}

.expense-table-inner tr:first-child td {
    border-top: none;
}

/* Show table with transparent background */
.expense-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

/* Category header styling */
.category-header td {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.category-header .category-header-wrapper {
    color: white !important;
    padding: 12px 20px !important;
    margin-bottom: 0 !important;
    /* Add shadow to header */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
}

.category-header .category-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    margin-right: 8px;
}

.category-header .category-name {
    font-size: 14px;
    font-weight: 600;
}

.category-header .add-expense-in-header {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.category-header .add-expense-in-header:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Expense rows in new structure */
.expense-table-inner .expense-row td {
    padding: 10px 15px;
    border-top: 1px solid #f0f0f0;
}

.expense-table-inner .expense-row:first-child td {
    border-top: none;
}

/* Category total in new structure */
.expense-table-inner .category-total td {
    font-weight: 600;
    border-top: 2px solid #dee2e6;
    padding: 12px 15px !important;
    background: #f8f9fa;
}

/* Empty category rows */
.expense-table-inner .expense-row.text-gray-500 td {
    padding: 15px 20px !important;
    font-style: italic;
    color: var(--gray-600, #4B5563)
}

/* Grand totals are now handled by inline styles in JS */

/* Projection table container */
#projectionTableContainer {
    background: white !important;
    border-radius: 10px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    margin-top: 20px !important;
}

/* ========================================
   SAMPLE BUDGETS MODAL - CARD STYLES
   ======================================== */

/* Container for sample budget cards */
#sampleBudgetOptionsContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 20px 24px;
}

/* Sample budget card */
.sample-budget-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    text-align: center;
}

.sample-budget-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: #d1d5db;
}

/* Sample budget image */
.sample-budget-image {
    width: 250px;
    height: auto;
    border-radius: 10px;
    flex-shrink: 0;
    object-fit: cover;
}

/* Sample budget info section */
.sample-budget-info {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.sample-budget-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.sample-budget-amount {
    font-size: 13px;
    font-weight: 500;
    color: #2563eb;
    margin-bottom: 8px;
}

.sample-budget-desc {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

/* Sample budget action button */
.sample-budget-action {
    margin-top: auto;
}

.sample-budget-action button {
    background: #ecf3ff;
    border: 1px solid rgba(37, 99, 235, 0.4);
    color: #1d4ed8;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.sample-budget-action button:hover {
    background: #dbe7ff;
    transform: translateY(-1px);
}