/* --- FocusFlow Modern UI (COMPLETE & FINAL) --- */
:root {
    --ff-primary: #4A90E2;
    --ff-secondary: #50E3C2;
    --ff-success: #7ED321;
    --ff-warning: #F5A623;
    --ff-danger: #D0021B;
    --ff-bg-main: #F4F7F9;
    --ff-bg-card: #FFFFFF;
    --ff-bg-header: #FFFFFF;
    --ff-bg-nav: #FFFFFF;
    --ff-text-primary: #222B33;
    --ff-text-secondary: #5A6872;
    --ff-text-light: #FFFFFF;
    --ff-text-placeholder: #A0AEC0;
    --ff-border-color: #E2E8F0;
    --ff-shadow: 0 4px 12px rgba(0,0,0,0.08);
    --ff-shadow-hover: 0 6px 16px rgba(0,0,0,0.12);
    --ff-border-radius-sm: 4px;
    --ff-border-radius-md: 8px;
    --ff-border-radius-lg: 12px;
    --ff-font-sans: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --ff-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    --ff-spacing-xs: 4px;
    --ff-spacing-sm: 8px;
    --ff-spacing-md: 16px;
    --ff-spacing-lg: 24px;
    --ff-spacing-xl: 32px;
    --primary: var(--ff-primary);
    --secondary-accent: var(--ff-secondary);
    --background: var(--ff-bg-main);
    --text: var(--ff-text-primary);
    --error: var(--ff-danger);
    --warning: var(--ff-warning);
    --success: var(--ff-success);
    --border-color: var(--ff-border-color);
    --card-background: var(--ff-bg-card);
    --status-unbilled: #ffcc80;
    --status-invoiced: #90caf9;
    --status-paid: #a5d6a7;
    --status-not-billable: #B0BEC5;
    --status-draft: #B0BEC5;
    --status-sent: #90caf9;
    --status-overdue: #ffab40;
    --status-void: #757575;
    --section-header-border: color-mix(in srgb, var(--ff-primary) 20%, var(--ff-border-color) 80%);
    --group-header-bg: color-mix(in srgb, var(--ff-bg-card) 95%, var(--ff-border-color) 5%);
    --group-header-hover-bg: color-mix(in srgb, var(--ff-bg-card) 90%, var(--ff-border-color) 10%);
    --button-secondary-bg: color-mix(in srgb, var(--ff-text-secondary) 15%, transparent);
    --button-secondary-text: var(--ff-text-secondary);
    --button-import-bg: var(--ff-success);
    --button-export-bg: var(--ff-primary);
    --tag-chip-bg: #f0f0f0;
    --tag-chip-text: #333;
    --tag-chip-border: #ccc;
}
html[data-theme="focusflow-dark"] {
    --ff-primary: #5E9BE3;
    --ff-secondary: #62E8C7;
    --ff-success: #8EEA36;
    --ff-bg-main: #1A202C;
    --ff-bg-card: #2D3748;
    --ff-bg-header: #2D3748;
    --ff-bg-nav: #2D3748;
    --ff-text-primary: #E2E8F0;
    --ff-text-secondary: #A0AEC0;
    --ff-text-placeholder: #718096;
    --ff-border-color: #4A5568;
    --primary: var(--ff-primary);
    --secondary-accent: var(--ff-secondary);
    --background: var(--ff-bg-main);
    --text: var(--ff-text-primary);
    --error: #ef5350;
    --warning: #ffab40;
    --success: var(--ff-success);
    --border-color: var(--ff-border-color);
    --card-background: var(--ff-bg-card);
    --status-unbilled: #cc8400;
    --status-invoiced: #42a5f5;
    --status-paid: #4caf50;
    --status-not-billable: #546E7A;
    --status-draft: #546E7A;
    --status-sent: #42a5f5;
    --status-overdue: #f57c00;
    --status-void: #9E9E9E;
    --button-secondary-bg: color-mix(in srgb, var(--ff-text-secondary) 25%, transparent);
    --button-secondary-text: var(--ff-text-secondary);
    --tag-chip-bg: #3a475a;
    --tag-chip-text: var(--ff-text-primary);
    --tag-chip-border: #5a6872;
}
html[data-theme="solarized-light"] {
    --ff-primary: #268bd2;
    --ff-secondary: #2aa198;
    --ff-success: #859900;
    --ff-warning: #b58900;
    --ff-danger: #dc322f;
    --ff-bg-main: #fdf6e3;
    --ff-bg-card: #eee8d5;
    --ff-bg-header: #eee8d5;
    --ff-bg-nav: #eee8d5;
    --ff-text-primary: #586e75;
    --ff-text-secondary: #839496;
    --ff-text-light: #fdf6e3;
    --ff-text-placeholder: #93a1a1;
    --ff-border-color: #93a1a1;
    --primary: var(--ff-primary);
    --secondary-accent: var(--ff-secondary);
    --background: var(--ff-bg-main);
    --text: var(--ff-text-primary);
    --error: var(--ff-danger);
    --warning: var(--ff-warning);
    --success: var(--ff-success);
    --border-color: var(--ff-border-color);
    --card-background: var(--ff-bg-card);
    --status-unbilled: #cb4b16;
    --status-invoiced: #268bd2;
    --status-paid: #859900;
    --status-not-billable: #93a1a1;
    --status-draft: #93a1a1;
    --status-sent: #268bd2;
    --status-overdue: #b58900;
    --status-void: #657b83;
    --tag-chip-bg: #eee8d5;
    --tag-chip-text: #586e75;
    --tag-chip-border: #93a1a1;
}
html[data-theme="solarized-dark"] {
    --ff-primary: #268bd2;
    --ff-secondary: #2aa198;
    --ff-success: #859900;
    --ff-warning: #b58900;
    --ff-danger: #dc322f;
    --ff-bg-main: #002b36;
    --ff-bg-card: #073642;
    --ff-bg-header: #073642;
    --ff-bg-nav: #073642;
    --ff-text-primary: #839496;
    --ff-text-secondary: #586e75;
    --ff-text-light: #002b36;
    --ff-text-placeholder: #586e75;
    --ff-border-color: #586e75;
    --primary: var(--ff-primary);
    --secondary-accent: var(--ff-secondary);
    --background: var(--ff-bg-main);
    --text: var(--ff-text-primary);
    --error: var(--ff-danger);
    --warning: var(--ff-warning);
    --success: var(--ff-success);
    --border-color: var(--ff-border-color);
    --card-background: var(--ff-bg-card);
    --status-unbilled: #cb4b16;
    --status-invoiced: #268bd2;
    --status-paid: #859900;
    --status-not-billable: #657b83;
    --status-draft: #657b83;
    --status-sent: #268bd2;
    --status-overdue: #b58900;
    --status-void: #586e75;
    --tag-chip-bg: #073642;
    --tag-chip-text: #839496;
    --tag-chip-border: #586e75;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--ff-font-sans);
    background-color: var(--ff-bg-main);
    color: var(--ff-text-primary);
    line-height: 1.6;
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
    overscroll-behavior-x: contain;
}
.ff-app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.ff-app-header {
    background-color: var(--ff-bg-header);
    padding: 0 var(--ff-spacing-md);
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border-bottom: 1px solid var(--ff-border-color);
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    overflow: hidden;
}
.ff-app-header .logo {
    font-size: 1.5rem; font-weight: 600; color: var(--ff-primary);
    display: flex; align-items: center; gap: var(--ff-spacing-sm);
    flex-shrink: 0;
}
.ff-header-actions {
    display: flex; align-items: center;
    gap: var(--ff-spacing-sm);
    flex-shrink: 0;
}
.ff-global-timer {
    display: flex;
    align-items: center;
    gap: var(--ff-spacing-sm);
    flex-grow: 1;
    justify-content: center;
    min-width: 0;
}
.ff-global-timer-project-select {
    padding: var(--ff-spacing-xs) var(--ff-spacing-sm);
    border: 1px solid var(--ff-border-color);
    border-radius: var(--ff-border-radius-md);
    background-color: var(--ff-bg-card);
    color: var(--ff-text-primary);
    font-size: 0.85rem;
    max-width: 150px;
    height: 34px;
    flex-shrink: 1;
    min-width: 80px;
}
.ff-global-timer-display {
    font-family: var(--ff-font-mono);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--ff-primary);
    min-width: 70px;
    text-align: center;
    flex-shrink: 0;
}
.ff-global-timer .ff-icon-button {
    font-size: 1.4rem;
    padding: var(--ff-spacing-xs);
    width: 34px; height: 34px;
    flex-shrink: 0;
}
.ff-main-content {
    
    margin-top: 60px;
    margin-bottom: 60px;
flex-grow: 1;
            padding: var(--ff-spacing-lg);
            scrollbar-gutter: stable;
        }
        .ff-bottom-nav {
            display: none; background-color: var(--ff-bg-nav);
            border-top: 1px solid var(--ff-border-color);
            padding: var(--ff-spacing-sm) 0; box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
            position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
        }
        .ff-bottom-nav ul {
            list-style: none; display: flex; align-items: center;
            padding-left: var(--ff-spacing-xs); padding-right: var(--ff-spacing-xs);
            gap: var(--ff-spacing-xs);
        }
        .ff-bottom-nav li { flex: 1; text-align: center; }
        .ff-bottom-nav li .nav-link {
            display: flex; flex-direction: column; align-items: center;
            text-decoration: none; color: var(--ff-text-secondary);
            border-radius: var(--ff-border-radius-md); transition: all 0.2s ease;
            background: transparent; border: none; cursor: pointer;
            font-family: var(--ff-font-sans); width: 100%; text-align: center;
            padding: var(--ff-spacing-xs); gap: 2px; font-size: 0.7rem;
        }
        .ff-bottom-nav li .nav-link i { font-size: 1.1rem; margin-bottom: 1px; }
        .ff-bottom-nav li .nav-link span { display: block; font-size: 0.65rem; line-height: 1.2; }
        .ff-bottom-nav li .nav-link.active {
            color: var(--ff-primary);
            background-color: color-mix(in srgb, var(--ff-primary) 10%, transparent);
        }
        .ff-card {
            background-color: var(--ff-bg-card); border-radius: var(--ff-border-radius-lg);
            padding: var(--ff-spacing-lg); box-shadow: var(--ff-shadow);
            transition: box-shadow 0.3s ease;
            border: 1px solid var(--ff-border-color); display: flex; flex-direction: column;
        }
        .ff-dashboard-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--ff-spacing-lg);
        }
        .ff-dashboard-grid > .ff-card { margin-bottom: 0; }
        #ff-insights-summary-kpis, #ff-insights-charts-grid-1, #ff-insights-charts-grid-2 {
            margin-bottom: var(--ff-spacing-lg);
        }

        /* --- NEW & FINAL Fix for Chart Overflow --- */
        .ff-card .ff-card-body {
            padding: 0; /* Override default card padding for specific card bodies */
            flex-grow: 1; /* Allow body to fill remaining space in the card */
            min-height: 0; /* Fix flexbox sizing issues */
        }

        #insights-view .ff-card .ff-card-body {
            padding-top: var(--ff-spacing-sm); /* Add a little space below the header */
        }

        /* --- FINAL & CORRECTED Chart Layout CSS --- */
        /* This rule ensures the card body containing the chart behaves correctly */
        #insights-view .ff-card .ff-card-body {
            padding: 0;
            flex-grow: 1;
            min-height: 0;
            padding-top: var(--ff-spacing-sm);
        }

        /* This is the main container for the canvas element */
        .chart-container {
            position: relative;
            height: 300px; /* Default height for desktop */
            width: 100%;
        }

        /* Responsive adjustments for mobile */
        @media (max-width: 767px) {
            #insights-view .ff-card .chart-container {
                min-height: 250px; /* Give it a solid minimum height on small screens */
                height: 280px;     /* Set a fixed, reliable height for mobile */
            }
        }

        /* This forces the canvas element itself to be responsive */
        .chart-container canvas {
            display: block;
            width: 100% !important;  /* Force it to respect the container's width */
            max-width: 100%;
            height: 100% !important; /* Force it to respect the container's height */
        }

        .ff-card:hover { box-shadow: var(--ff-shadow-hover); }

        .ff-quota-counter {
            text-align: center;
            margin-bottom: var(--ff-spacing-md);
            padding: var(--ff-spacing-sm);
            background-color: color-mix(in srgb, var(--ff-primary) 10%, transparent);
            border-radius: var(--ff-border-radius-md);
            font-size: 0.9rem;
        }
        .ff-quota-counter a {
            color: var(--ff-primary);
            text-decoration: none;
            font-weight: 600;
        }
        .ff-quota-counter a:hover {
            text-decoration: underline;
        }

        .ff-login-card p a:hover {
            text-decoration: underline;
            /* This slightly brightens the link on hover, making it feel more interactive */
            filter: brightness(1.1); 
        }

        .ff-card .ff-card-header {
            display: flex; justify-content: space-between; align-items: center;
            padding-bottom: var(--ff-spacing-md); margin-bottom: var(--ff-spacing-md);
            border-bottom: 1px solid var(--ff-border-color);
        }
        .ff-card .ff-card-header h3 {
            margin: 0; font-size: 1.2rem; color: var(--ff-primary);
            display: flex; align-items: center; gap: var(--ff-spacing-sm);
        }
        .ff-card .ff-card-header h3 i { font-size: 1.1rem;}
        .ff-view-header {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: var(--ff-spacing-md); padding-bottom: var(--ff-spacing-sm);
            border-bottom: 1px solid var(--section-header-border);
        }
        .ff-view-header h1 {
            margin: 0; font-size: 1.5rem; color: var(--ff-primary);
            display: flex; align-items: center; gap: var(--ff-spacing-sm);
        }
        .ff-view-header h1 i { font-size: 1.3rem; }
        #ff-new-project-btn, #ff-new-profile-btn, #ff-new-invoice-btn, #ff-manual-entry-btn {
            margin-left: var(--ff-spacing-sm);
        }
        .ff-button {
            padding: var(--ff-spacing-sm) var(--ff-spacing-md); border: none;
            border-radius: var(--ff-border-radius-md); font-weight: 600; cursor: pointer;
            transition: all 0.2s ease; display: inline-flex; align-items: center;
            justify-content: center; gap: var(--ff-spacing-sm); text-decoration: none;
            font-size: 0.9rem; position: relative; overflow: hidden;
            background: var(--button-secondary-bg); color: var(--button-secondary-text);
        }
        .ff-button.primary { background-color: var(--ff-primary); color: var(--ff-text-light); }
        .ff-button.danger { background-color: var(--ff-danger); color: var(--ff-text-light); }
        .ff-button.outline { background-color: transparent; color: var(--ff-primary); border: 1px solid var(--ff-primary); }
        .ff-button.danger-outline { background-color: transparent; color: var(--ff-danger); border: 1px solid var(--ff-danger); }
        .ff-button.import-data { background-color: var(--button-import-bg); color: var(--ff-text-light); }
        .ff-button.export-data { background-color: var(--button-export-bg); color: var(--ff-text-light); }
        .ff-button:disabled { opacity: 0.6; cursor: not-allowed; }
        .ff-button.loading .button-text, .ff-button.loading i { visibility: hidden; }
        .ff-button .loading-spinner { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ff-spinner-rotation 0.75s linear infinite; }
        .ff-button.loading .loading-spinner { display: inline-block; }
        @keyframes ff-spinner-rotation { to { transform: translate(-50%, -50%) rotate(360deg); } }

        .ff-button.pro-badge-button {
            background-color: color-mix(in srgb, var(--ff-warning) 85%, black 15%);
            color: white;
            pointer-events: none; /* Make it not clickable since it just shows status */
        }
        html[data-theme="focusflow-dark"] .ff-button.pro-badge-button,
        html[data-theme="solarized-dark"] .ff-button.pro-badge-button {
            background-color: var(--ff-warning);
            color: var(--ff-bg-card);
        }

        .ff-icon-button {
            background: none; border: none; color: var(--ff-text-secondary); font-size: 1.5rem;
            cursor: pointer; padding: var(--ff-spacing-sm); border-radius: 50%;
            transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center;
        }
        #ff-project-list-container, #ff-profile-list-container, #ff-time-entry-list-container, #ff-invoice-list-container {
            display: grid; grid-template-columns: 1fr; gap: var(--ff-spacing-lg); margin-top: var(--ff-spacing-md);
        }
        #entries-view #ff-time-entry-list-container { margin-top: 0; }
        #ff-project-list-container > .item-card, #ff-profile-list-container > .item-card, #ff-time-entry-list-container > .item-card, #ff-invoice-list-container > .item-card, #ff-settings-card-container > .ff-card {
            margin-bottom: 0; min-width: 0;
        }
        .ff-empty-state-container { grid-column: 1 / -1; text-align: center; padding: var(--ff-spacing-xl); color: var(--ff-text-secondary); display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .ff-empty-state-container h4 { color: var(--ff-text-primary); margin-bottom: var(--ff-spacing-md); font-size: 1.1rem; font-weight: 500; }
        .item-card.time-entry-card.selected { background-color: color-mix(in srgb, var(--ff-primary) 8%, var(--card-background)); border-left-color: var(--ff-primary) !important; }
        .item-card.project-card, .item-card.profile-smart-card, .item-card.invoice-card, .item-card.time-entry-card {
            background: var(--card-background); padding: var(--ff-spacing-md); border-radius: var(--ff-border-radius-md);
            box-shadow: var(--ff-shadow); border-left: 5px solid var(--project-color, var(--ff-primary));
            transition: all 0.3s ease; display: flex; flex-direction: column;
        }
        .item-card.profile-smart-card { border-left-color: var(--profile-card-color, var(--ff-secondary)); }
        .item-card.invoice-card { border-left-color: var(--invoice-card-color, var(--ff-secondary)); }
        .item-card:hover { box-shadow: var(--ff-shadow-hover); }
        .smart-card-header {
            display: flex; justify-content: space-between; align-items: flex-start;
            padding-bottom: var(--ff-spacing-sm); margin-bottom: var(--ff-spacing-sm);
            border-bottom: 1px solid var(--ff-border-color);
        }
        .smart-card-header .project-name-container, .smart-card-header .profile-name-container, .smart-card-header .invoice-info-container, .smart-card-header .time-entry-project-name-container {
            flex-grow: 1; margin-right: var(--ff-spacing-sm); display: flex; align-items: center;
        }
        .project-status-dot { width: 12px; height: 18px; border-radius: var(--ff-border-radius-sm); display: inline-block; margin-right: var(--ff-spacing-sm); flex-shrink: 0; }
        .project-status-dot.status-active { background-color: var(--ff-success); }
        .project-status-dot.status-archived { background-color: var(--ff-text-secondary); }
        .project-card-icon { margin-right: var(--ff-spacing-xs); font-size: 1.2rem; line-height: 1; display: inline-flex; align-items: center; color: var(--project-color, var(--ff-primary)); width: 20px; justify-content: center; }
        .profile-card-avatar, .profile-card-avatar-placeholder { width: 32px; height: 32px; border-radius: 50%; margin-right: var(--ff-spacing-sm); object-fit: cover; border: 1px solid var(--ff-border-color); flex-shrink: 0; }
        .profile-card-avatar-placeholder { font-size: 1.8rem; color: var(--ff-text-placeholder); display: inline-flex; align-items: center; justify-content: center; background-color: var(--ff-bg-main); }
        .smart-card-header-actions .ff-icon-button.card-set-default-profile-btn i { color: var(--ff-text-secondary); transition: color 0.2s ease; }
        .smart-card-header-actions .ff-icon-button.card-set-default-profile-btn.default-active i { color: var(--ff-warning); }
        .smart-card-header-actions .ff-icon-button.card-billable-toggle-btn.active i, .smart-card-expanded-content .expanded-main-actions .ff-icon-button.card-billable-toggle-btn.active i { color: var(--ff-warning); }
        .smart-card-header-actions .ff-icon-button.card-billable-toggle-btn:disabled i { color: var(--ff-text-placeholder); opacity: 0.6; }
        .smart-card-header .project-name, .smart-card-header .profile-name, .smart-card-header .invoice-number, .smart-card-header .time-entry-project-name { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--project-color, var(--ff-primary)); line-height: 1.3; }
        .smart-card-header .profile-name { color: var(--ff-primary); }
        .profile-smart-card .smart-card-header .profile-name { color: var(--profile-card-color, var(--ff-secondary)); }
        .smart-card-header .invoice-number { color: var(--invoice-card-color, var(--ff-secondary)); }
        .smart-card-header .project-name .archived-text { font-size: 0.8em; font-weight: normal; color: var(--ff-text-secondary); margin-left: var(--ff-spacing-xs); }
        .smart-card-header-actions { display: flex; align-items: center; gap: var(--ff-spacing-xs); flex-shrink: 0; margin-top: -2px; }
        .smart-card-header-actions .ff-icon-button { font-size: 1.0rem; padding: var(--ff-spacing-xs); }
        .smart-card-header-actions .ff-icon-button.pinned i { color: var(--ff-warning); }
        .smart-card-compact-content { font-size: 0.85rem; color: var(--ff-text-secondary); display: flex; flex-direction: column; gap: var(--ff-spacing-xs); }
        .smart-card-compact-content p, .smart-card-expanded-content .project-detail-item, .smart-card-expanded-content .profile-detail-item, .smart-card-expanded-content .invoice-detail-item, .smart-card-expanded-content .time-entry-detail-item { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ff-spacing-sm); line-height: 1.4; }
        .smart-card-compact-content .project-detail-icon-smart, .smart-card-compact-content .profile-detail-icon-smart, .smart-card-compact-content .invoice-detail-icon-smart, .smart-card-compact-content .time-entry-detail-icon-smart { width: 1em; text-align: center; color: var(--ff-text-secondary); flex-shrink: 0; }
        .smart-card-compact-content strong { color: var(--ff-text-primary); font-weight: 600; flex-shrink: 0; margin-right: 0; }
        .smart-card-compact-content .detail-value { word-break: break-word; }
        .invoice-card .smart-card-compact-content .detail-value-link { color: var(--ff-primary); text-decoration: none; font-weight: 500; }
        .invoice-card .smart-card-compact-content .detail-value-link:hover { text-decoration: underline; }
        .invoice-card .smart-card-compact-content .ff-progress { height: 6px; background-color: var(--ff-border-color); border-radius: 3px; overflow: hidden; margin-top: 2px; width: 100%; }
        .invoice-card .smart-card-compact-content .ff-progress span { display: block; height: 100%; background-color: var(--ff-success); border-radius: 3px; transition: width 0.3s ease; }
        .ff-status-pill, .ff-tag-pill-display { display: inline-flex; align-items: center; gap: var(--ff-spacing-xs); padding: 3px 10px; border-radius: 16px; font-size: 0.8rem; font-weight: 500; border: 1.5px solid transparent; white-space: nowrap; line-height: 1.3; max-width: 100%; box-sizing: border-box; }
        .ff-status-pill a.detail-value-link, .ff-status-pill a.time-entry-invoice-link { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 20px); vertical-align: middle; text-decoration: none; color: inherit; }
        .ff-status-pill a:hover { text-decoration: underline; }
        .ff-status-pill i, .ff-tag-pill-display i { font-size: 0.9em; margin-right: 2px; }
        .ff-status-pill.status-unbilled { background-color: color-mix(in srgb, var(--status-unbilled) 20%, transparent); border-color: var(--status-unbilled); color: color-mix(in srgb, var(--status-unbilled) 80%, black); }
        .ff-status-pill.status-invoiced { background-color: color-mix(in srgb, var(--status-invoiced) 20%, transparent); border-color: var(--status-invoiced); color: color-mix(in srgb, var(--status-invoiced) 70%, black); }
        .ff-status-pill.status-paid { background-color: color-mix(in srgb, var(--status-paid) 20%, transparent); border-color: var(--status-paid); color: color-mix(in srgb, var(--status-paid) 70%, black); }
        .ff-status-pill.status-not-billable { background-color: color-mix(in srgb, var(--status-not-billable) 15%, transparent); border-color: var(--status-not-billable); color: color-mix(in srgb, var(--status-not-billable) 80%, black); }
        .ff-status-pill.status-draft { background-color: color-mix(in srgb, var(--status-draft) 15%, transparent); border-color: var(--status-draft); color: color-mix(in srgb, var(--status-draft) 80%, black); }
        .ff-status-pill.status-sent { background-color: color-mix(in srgb, var(--status-sent) 20%, transparent); border-color: var(--status-sent); color: color-mix(in srgb, var(--status-sent) 70%, black); }
        .ff-status-pill.status-overdue { background-color: color-mix(in srgb, var(--status-overdue) 35%, transparent); border-color: var(--status-overdue); color: color-mix(in srgb, var(--ff-danger) 90%, black); font-weight: 600; }
        .ff-status-pill.status-void { background-color: color-mix(in srgb, var(--status-void) 20%, transparent); border-color: var(--status-void); color: color-mix(in srgb, var(--status-void) 80%, black); }
        html[data-theme="focusflow-dark"] .ff-status-pill.status-unbilled, html[data-theme="solarized-dark"] .ff-status-pill.status-unbilled { background-color: color-mix(in srgb, var(--status-unbilled) 30%, var(--ff-bg-card) 40%); border-color: var(--status-unbilled); color: var(--status-unbilled); }
        html[data-theme="focusflow-dark"] .ff-status-pill.status-invoiced, html[data-theme="solarized-dark"] .ff-status-pill.status-invoiced { background-color: color-mix(in srgb, var(--status-invoiced) 30%, var(--ff-bg-card) 40%); border-color: var(--status-invoiced); color: var(--status-invoiced); }
        html[data-theme="focusflow-dark"] .ff-status-pill.status-paid, html[data-theme="solarized-dark"] .ff-status-pill.status-paid { background-color: color-mix(in srgb, var(--status-paid) 30%, var(--ff-bg-card) 40%); border-color: var(--status-paid); color: var(--status-paid); }
        html[data-theme="focusflow-dark"] .ff-status-pill.status-not-billable, html[data-theme="solarized-dark"] .ff-status-pill.status-not-billable { background-color: color-mix(in srgb, var(--status-not-billable) 25%, var(--ff-bg-card) 40%); border-color: var(--status-not-billable); color: var(--status-not-billable); }
        html[data-theme="focusflow-dark"] .ff-status-pill.status-draft, html[data-theme="solarized-dark"] .ff-status-pill.status-draft { background-color: color-mix(in srgb, var(--status-draft) 25%, var(--ff-bg-card) 40%); border-color: var(--status-draft); color: var(--status-draft); }
        html[data-theme="focusflow-dark"] .ff-status-pill.status-sent, html[data-theme="solarized-dark"] .ff-status-pill.status-sent { background-color: color-mix(in srgb, var(--status-sent) 30%, var(--ff-bg-card) 40%); border-color: var(--status-sent); color: var(--status-sent); }
        html[data-theme="focusflow-dark"] .ff-status-pill.status-overdue, html[data-theme="solarized-dark"] .ff-status-pill.status-overdue { background-color: color-mix(in srgb, var(--status-overdue) 35%, var(--ff-bg-card) 40%); border-color: var(--status-overdue); color: var(--error); }
        html[data-theme="focusflow-dark"] .ff-status-pill.status-void, html[data-theme="solarized-dark"] .ff-status-pill.status-void { background-color: color-mix(in srgb, var(--status-void) 30%, var(--ff-bg-card) 40%); border-color: var(--status-void); color: var(--status-void); }
        .ff-status-pill.project-status-active { background-color: color-mix(in srgb, var(--ff-success) 20%, transparent); border-color: var(--ff-success); color: color-mix(in srgb, var(--ff-success) 70%, black); }
        .ff-status-pill.project-status-archived { background-color: color-mix(in srgb, var(--ff-text-secondary) 20%, transparent); border-color: var(--ff-text-secondary); color: color-mix(in srgb, var(--ff-text-secondary) 80%, black); }

        html[data-theme="focusflow-dark"] .ff-status-pill.project-status-active, html[data-theme="solarized-dark"] .ff-status-pill.project-status-active { background-color: color-mix(in srgb, var(--ff-success) 30%, var(--ff-bg-card) 40%); border-color: var(--ff-success); color: var(--ff-success); }
        html[data-theme="focusflow-dark"] .ff-status-pill.project-status-archived, html[data-theme="solarized-dark"] .ff-status-pill.project-status-archived { background-color: color-mix(in srgb, var(--ff-text-secondary) 30%, var(--ff-bg-card) 40%); border-color: var(--ff-text-secondary); color: var(--ff-text-secondary); }

        .tag-chip {
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            border: 1.5px solid; /* Border color is now set by JS */
            transition: all 0.2s ease;
            background-color: transparent;
        }
        .tag-chip.active {
            color: white; /* High-contrast text color for active state */
        }

        .smart-card-expanded-content .expanded-section { padding: var(--ff-spacing-xs) 0; }
        .smart-card-expanded-content .expanded-section h5 { font-size: 1rem; color: var(--ff-primary); margin: 0 0 var(--ff-spacing-xs); display: flex; align-items: center; gap: var(--ff-spacing-sm); font-weight: 600; }
        .smart-card-expanded-content .expanded-section h5 i { font-size: 0.9em; }
        .smart-card-expanded-content .project-detail-icon-smart, .smart-card-expanded-content .profile-detail-icon-smart, .smart-card-expanded-content .invoice-detail-icon-smart, .smart-card-expanded-content .time-entry-detail-icon-smart {
            color: var(--ff-text-secondary); width: 16px; text-align: center; flex-shrink: 0; margin-top: 0.15em;
        }
        .smart-card-expanded-content .detail-value, .smart-card-expanded-content .detail-value-link { color: var(--ff-text-secondary); word-break: break-word; }
        .smart-card-expanded-content .detail-value.pre-wrap { white-space: pre-wrap; }
        .smart-card-expanded-content .detail-value-link { color: var(--ff-primary); text-decoration: none; }
        .smart-card-expanded-content .invoice-card-project-link { font-weight: 500; }
        .smart-card-expanded-content hr.detail-separator { border: none; border-top: 1px dotted color-mix(in srgb, var(--ff-border-color) 70%, transparent); margin: var(--ff-spacing-sm) 0; }
        .smart-card-expanded-content .project-description-wrapper, .smart-card-expanded-content .time-entry-notes-wrapper, .smart-card-expanded-content .time-entry-tags-wrapper { margin-top: var(--ff-spacing-sm); }
        .smart-card-expanded-content .description-header { display: flex; justify-content: space-between; align-items: center; }
        .smart-card-expanded-content .description-header .project-detail-item, .smart-card-expanded-content .description-header .profile-detail-item, .smart-card-expanded-content .description-header .invoice-detail-item, .smart-card-expanded-content .description-header .time-entry-detail-item { margin-bottom: 0; }
        .smart-card-expanded-content .description-toggle { color: var(--ff-text-secondary); cursor: pointer; padding: var(--ff-spacing-xs); margin-left: auto; font-size: 0.9rem; display: inline-flex; align-items: center; }
        .smart-card-expanded-content .description-content { max-height: 4.5em; overflow: hidden; transition: max-height 0.3s ease-in-out; font-size: 0.85rem; color: var(--ff-text-secondary); border-radius: var(--ff-border-radius-sm); margin-top: var(--ff-spacing-xs); padding-left: 0; }
        .smart-card-expanded-content .description-content.expanded { max-height: 200px; overflow-y: auto; background-color: color-mix(in srgb, var(--ff-bg-main) 50%, var(--ff-bg-card) 50%); border: 1px solid var(--ff-border-color); padding: var(--ff-spacing-sm); }
        .smart-card-expanded-content .description-content p { margin: 0; line-height: 1.5; }
        .smart-card-expanded-content .tags-display-area { display: flex; flex-wrap: wrap; gap: var(--ff-spacing-xs); margin-top: var(--ff-spacing-xs); }
        .smart-card-expanded-content .expanded-main-actions { margin-top: var(--ff-spacing-lg); padding-top: var(--ff-spacing-md); border-top: 1px solid var(--ff-border-color); display: flex; gap: var(--ff-spacing-sm); flex-wrap: wrap; }
        .smart-card-expanded-content .expanded-main-actions .ff-icon-button { font-size: 1.2rem; }
        .smart-card-expanded-content .expanded-main-actions .ff-icon-button.card-set-default-profile-btn-expanded i { color: var(--ff-text-secondary); transition: color 0.2s ease; }
        .smart-card-expanded-content .expanded-main-actions .ff-icon-button.card-set-default-profile-btn-expanded.default-active i { color: var(--ff-warning); }
        .invoice-card .ff-progress { height: 8px; background-color: var(--ff-border-color); border-radius: 4px; overflow: hidden; margin-top: var(--ff-spacing-xs); }
        .invoice-card .ff-progress span { display: block; height: 100%; background-color: var(--ff-success); border-radius: 4px; transition: width 0.3s ease; }
        .ff-view { display: none; }
        .ff-view.active { display: block; }
        .ff-project-controls { display: flex; flex-wrap: wrap; gap: var(--ff-spacing-md); margin-bottom: var(--ff-spacing-md); align-items: center; }
        .ff-project-filters, .ff-project-sort, .ff-project-search { display: flex; gap: var(--ff-spacing-sm); align-items: center; }
        .ff-project-search { flex-grow: 1; min-width: 200px; }
        .ff-project-filters label, .ff-project-sort label { font-size: 0.9rem; color: var(--ff-text-secondary); font-weight: 500; }
        .ff-project-filters select, .ff-project-sort select, .ff-project-filters input[type="date"], .ff-project-filters input[type="search"], .ff-project-search input[type="search"] {
            padding: var(--ff-spacing-xs) var(--ff-spacing-sm); border: 1px solid var(--ff-border-color); border-radius: var(--ff-border-radius-md);
            background-color: var(--ff-bg-card); color: var(--ff-text-primary); font-size: 0.9rem; min-width: 150px;
        }
        .ff-project-search input[type="search"] { width: 100%; }
        .ff-project-filters input[type="date"] { min-width: 120px; }
        #ff-invoice-client-search { min-width: 200px; flex-grow: 1; }
        #ff-entry-search-input {
            padding: var(--ff-spacing-xs) var(--ff-spacing-sm); border: 1px solid var(--ff-border-color); border-radius: var(--ff-border-radius-md);
            background-color: var(--ff-bg-card); color: var(--ff-text-primary); font-size: 0.9rem; width: 100%;
        }
        #ff-bulk-actions-bar { margin-bottom: var(--ff-spacing-md); }
        .ff-bulk-actions-content {
            display: flex; align-items: center; gap: var(--ff-spacing-sm); padding: var(--ff-spacing-sm);
            background-color: var(--ff-bg-card); border: 1px solid var(--ff-border-color); border-radius: var(--ff-border-radius-md); box-shadow: var(--ff-shadow);
        }
        .ff-entry-select-checkbox, #ff-select-all-entries-checkbox { vertical-align: middle; }
        html[data-theme="focusflow-dark"] .ff-entry-select-checkbox, html[data-theme="focusflow-dark"] #ff-select-all-entries-checkbox, html[data-theme="solarized-dark"] .ff-entry-select-checkbox, html[data-theme="solarized-dark"] #ff-select-all-entries-checkbox {
            color-scheme: dark;
        }
        .ff-pagination-controls { margin-top: var(--ff-spacing-lg); display: flex; justify-content: center; align-items: center; gap: var(--ff-spacing-sm); }
        .ff-pagination-controls button {
            padding: var(--ff-spacing-xs) var(--ff-spacing-sm); border: 1px solid var(--ff-border-color); border-radius: var(--ff-border-radius-md);
            background-color: var(--ff-bg-card); color: var(--ff-text-secondary); font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease;
        }
        .ff-pagination-controls button:hover:not(:disabled) { background-color: color-mix(in srgb, var(--ff-primary) 10%, transparent); color: var(--ff-primary); }
        .ff-pagination-controls button:disabled { opacity: 0.6; cursor: not-allowed; }
        .ff-pagination-controls button.active { background-color: var(--ff-primary); color: var(--ff-text-light); border-color: var(--ff-primary); }
        .ff-pagination-controls span.page-info { font-size: 0.85rem; color: var(--ff-text-secondary); margin: 0 var(--ff-spacing-xs); }
        .ff-form-group { margin-bottom: var(--ff-spacing-md); }
        #ff-invoice-form .ff-modal-invoice-section { margin-bottom: var(--ff-spacing-lg); }
        #ff-invoice-form .ff-modal-invoice-section-header {
            font-size: 1.1rem; font-weight: 600; color: var(--ff-primary); padding: var(--ff-spacing-sm);
            margin: 0 calc(var(--ff-spacing-sm) * -1) var(--ff-spacing-md); border-bottom: 1px solid var(--ff-border-color);
            cursor: pointer; display: flex; justify-content: space-between; align-items: center; background-color: var(--group-header-bg);
        }
        #ff-invoice-form #invoice-section-preview .ff-modal-invoice-section-header .preview-zoom-controls { display: flex; gap: var(--ff-spacing-xs); }
        #ff-invoice-form #invoice-section-preview .ff-modal-invoice-section-header .preview-zoom-controls button {
            background: none; border: 1px solid var(--ff-border-color); color: var(--ff-text-secondary); font-size: 0.8rem;
            padding: 2px 6px; border-radius: var(--ff-border-radius-sm); cursor: pointer;
        }
        #ff-invoice-form #invoice-section-preview .ff-modal-invoice-section-header .preview-zoom-controls button:hover { background-color: var(--group-header-hover-bg); color: var(--ff-primary); }
        #ff-invoice-form .ff-modal-invoice-section-header:hover { background-color: var(--group-header-hover-bg); }
        #ff-invoice-form .ff-modal-invoice-section-header i.toggle-icon { transition: transform 0.2s ease-in-out; }
        #ff-invoice-form .ff-modal-invoice-section-content {
            display: grid; grid-template-columns: 1fr; gap: var(--ff-spacing-md); padding-top: var(--ff-spacing-xs);
            max-height: 1000px; overflow: hidden; transition: all 0.3s ease-in-out; opacity: 1;
        }
        #ff-invoice-form .ff-modal-invoice-section-content.collapsed { max-height: 0; opacity: 0; padding-top: 0; margin-bottom: 0; }
        .ff-form-group label { display: block; font-weight: 600; margin-bottom: var(--ff-spacing-xs); font-size: 0.9rem; }
        .ff-form-group input, .ff-form-group select, .ff-form-group textarea {
            width: 100%; padding: var(--ff-spacing-sm); border: 1px solid var(--ff-border-color); border-radius: var(--ff-border-radius-md);
            background-color: var(--ff-bg-main); color: var(--ff-text-primary); font-size: 1rem; transition: all 0.2s ease;
        }
        #ff-project-description, #ff-profile-address, #ff-profile-payment-instructions, #ff-profile-invoice-notes, #ff-profile-internal-notes, #ff-manual-entry-notes, #ff-timer-note-textarea, #ff-invoice-client-address, #ff-invoice-notes, #ff-invoice-payment-instructions, .ff-invoice-item-description {
            max-width: 100%; resize: vertical; min-height: 80px; overflow-wrap: break-word;
        }
        .ff-invoice-item-description { min-height: 40px; word-break: break-word; }
        #ff-timer-note-textarea { min-height: 200px; }
        .ff-form-group input:focus-visible, .ff-form-group select:focus-visible, .ff-form-group textarea:focus-visible { outline: none; border-color: var(--ff-primary); box-shadow: 0 0 0 0.5px var(--ff-primary), 0 0 0 3px color-mix(in srgb, var(--ff-primary) 30%, transparent); }
        .ff-form-group input::placeholder, .ff-form-group textarea::placeholder { color: var(--ff-text-placeholder); opacity: 1; }
        .ff-validation-message { color: var(--ff-danger); font-size: 0.8rem; margin-top: var(--ff-spacing-xs); display: none; }
        .ff-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 1000; align-items: center; justify-content: center; padding: var(--ff-spacing-md); }
        .ff-modal.active { display: flex; }
        .ff-modal-content { background-color: var(--ff-bg-card); padding: var(--ff-spacing-lg); border-radius: var(--ff-border-radius-lg); width: 90%; max-width: 550px; box-shadow: 0 5px 20px rgba(0,0,0,0.3); position: relative; display: flex; flex-direction: column; max-height: 85vh; }
        #ff-timer-note-modal .ff-modal-content { max-width: 450px; }
        #ff-invoice-modal .ff-modal-content { max-width: 900px; }
        #ff-import-time-entries-modal .ff-modal-content { max-width: 600px; }
        .ff-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--ff-spacing-md); color: var(--primary); flex-shrink: 0; }
        .ff-modal-header h3 { font-size: 1.3rem; margin: 0; display: flex; align-items: center; gap: var(--ff-spacing-sm); }
        .ff-modal-header h3 i { font-size: 1.2rem; }
        .ff-modal-header .ff-modal-close-btn { font-size: 1.8rem; color: var(--ff-text-secondary); background: none; border: none; cursor: pointer; padding: 0; line-height: 1; }
        #ff-project-form, #ff-profile-form, #ff-manual-time-entry-form, #ff-timer-note-form, #ff-invoice-form { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; min-height: 0; }
        .ff-modal-body {
            padding: var(--ff-spacing-md) var(--ff-spacing-sm); /* Add some side padding */
            color: var(--ff-text-primary);
            font-size: 0.95rem;
            line-height: 1.5;
            overflow-y: auto; /* CRITICAL: This makes the body scroll if content is too tall */
            flex-grow: 1;     /* Allows the body to take up available space */
            min-height: 0;      /* Fixes a flexbox sizing bug that prevents scrolling */
        }
        .ff-modal-scrollable-content { overflow-y: auto; flex-grow: 1; margin-bottom: var(--ff-spacing-md); padding: var(--ff-spacing-xs) var(--ff-spacing-sm); min-height: 0; }
        .ff-modal-actions { margin-top: auto; display: flex; justify-content: flex-end; gap: var(--ff-spacing-sm); flex-shrink: 0; padding-top: var(--ff-spacing-md); border-top: 1px solid var(--ff-border-color); }
        .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
        
        /* --- THEME & LOGIN INPUT FIXES --- */
        html[data-theme="focusflow-dark"] .ff-global-timer-project-select, html[data-theme="solarized-dark"] .ff-global-timer-project-select { background-color: var(--ff-bg-main); }
        html[data-theme="focusflow-dark"] .ff-project-filters select, html[data-theme="focusflow-dark"] .ff-project-sort select, html[data-theme="focusflow-dark"] .ff-project-filters input, html[data-theme="focusflow-dark"] .ff-project-search input, html[data-theme="solarized-dark"] .ff-project-filters select, html[data-theme="solarized-dark"] .ff-project-sort select, html[data-theme="solarized-dark"] .ff-project-filters input, html[data-theme="solarized-dark"] .ff-project-search input { background-color: var(--ff-bg-main); }
        html[data-theme="solarized-light"] .ff-project-filters select, html[data-theme="solarized-light"] .ff-project-sort select, html[data-theme="solarized-light"] .ff-project-filters input, html[data-theme="solarized-light"] .ff-project-search input { background-color: var(--ff-bg-card); }
        html[data-theme="focusflow-dark"] .ff-form-group input, html[data-theme="focusflow-dark"] .ff-form-group select, html[data-theme="focusflow-dark"] .ff-form-group textarea, html[data-theme="solarized-dark"] .ff-form-group input, html[data-theme="solarized-dark"] .ff-form-group select, html[data-theme="solarized-dark"] .ff-form-group textarea { background-color: var(--ff-bg-card); }
        html[data-theme="solarized-light"] .ff-form-group input, html[data-theme="solarized-light"] .ff-form-group select, html[data-theme="solarized-light"] .ff-form-group textarea { background-color: var(--ff-bg-main); }
        html[data-theme="focusflow-dark"] #ff-manual-entry-tags-container, html[data-theme="solarized-dark"] #ff-manual-entry-tags-container { background-color: var(--ff-bg-card); }
        html[data-theme="solarized-light"] #ff-manual-entry-tags-container { background-color: var(--ff-bg-main); }
        html[data-theme="focusflow-dark"] .ff-color-swatch, html[data-theme="solarized-dark"] .ff-color-swatch, html[data-theme="solarized-light"] .ff-color-swatch { border-color: var(--ff-border-color); }
        html[data-theme="solarized-dark"] .ff-modal { background-color: rgba(0, 43, 54, 0.75); }
        html[data-theme="focusflow-dark"] .ff-modal-scrollable-content::-webkit-scrollbar-thumb, html[data-theme="solarized-dark"] .ff-modal-scrollable-content::-webkit-scrollbar-thumb, html[data-theme="focusflow-dark"] #ff-timer-note-modal .ff-modal-body::-webkit-scrollbar-thumb, html[data-theme="solarized-dark"] #ff-timer-note-modal .ff-modal-body::-webkit-scrollbar-thumb, html[data-theme="focusflow-dark"] #ff-importable-time-entries-list::-webkit-scrollbar-thumb, html[data-theme="solarized-dark"] #ff-importable-time-entries-list::-webkit-scrollbar-thumb, html[data-theme="focusflow-dark"] #ff-invoice-modal-preview-container::-webkit-scrollbar-thumb, html[data-theme="solarized-dark"] #ff-invoice-modal-preview-container::-webkit-scrollbar-thumb { background-color: var(--ff-text-placeholder); }

        /* --- LOGIN PAGE STYLES --- */
        #ff-login-container {
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            justify-content: center; align-items: center; background-color: var(--ff-bg-main);
            z-index: 2000; padding: var(--ff-spacing-lg);
        }
        .ff-login-card {
            background: var(--ff-bg-card); padding: var(--ff-spacing-xl);
            border-radius: var(--ff-border-radius-lg); box-shadow: var(--ff-shadow);
            width: 100%; max-width: 400px; text-align: center; border: 1px solid var(--ff-border-color);
        }
        .ff-login-card h1 {
            color: var(--ff-primary); margin-bottom: var(--ff-spacing-sm); display: flex;
            align-items: center; justify-content: center; gap: var(--ff-spacing-sm);
        }
        .ff-login-card p { color: var(--ff-text-secondary); margin-bottom: var(--ff-spacing-lg); }
        .ff-login-card input[type="email"], .ff-login-card input[type="password"], .ff-login-card input[type="text"] {
            width: 100%; padding: var(--ff-spacing-sm); margin-bottom: var(--ff-spacing-sm);
            border: 1px solid var(--ff-border-color); border-radius: var(--ff-border-radius-md);
            background-color: var(--ff-bg-main); font-size: 1rem;
        }
        .ff-login-card .ff-button { width: 100%; margin-top: var(--ff-spacing-sm); }
        .ff-login-card .google-btn {
            background: var(--ff-bg-card); color: var(--ff-text-primary);
            border: 1px solid var(--ff-border-color); display: flex; align-items: center;
            justify-content: center; gap: var(--ff-spacing-sm);
        }
        .ff-login-card .google-btn:hover { background-color: color-mix(in srgb, var(--ff-text-secondary) 5%, transparent); }
        .ff-login-card .google-btn img { height: 18px; }
        .ff-login-card .divider-text { margin: var(--ff-spacing-lg) 0; color: var(--ff-text-placeholder); }
        .ff-login-card .toggle-link { margin-top: var(--ff-spacing-lg); font-size: 0.9em; }
        .ff-login-card .toggle-link a { color: var(--ff-primary); text-decoration: none; font-weight: 600; }
        .ff-login-card .toggle-link a:hover { text-decoration: underline; }
        .ff-password-wrapper{ position:relative; width:100%; margin-bottom:var(--ff-spacing-sm); }
        .ff-login-card .ff-password-wrapper input{ padding-right:40px; margin-bottom:0; }
        .toggle-password{ position:absolute; top:50%; right:15px; transform:translateY(-50%); cursor:pointer; color:var(--ff-text-placeholder); transition:color .2s ease; }
        .toggle-password:hover{ color:var(--ff-text-primary); }

        /* --- Pricing Toggle Switch --- */
        .ff-switch { position: relative; display: inline-block; width: 50px; height: 28px; }
        .ff-switch input { opacity: 0; width: 0; height: 0; }
        .ff-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
        .ff-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; }
        input:checked + .ff-slider { background-color: var(--ff-primary); }
        input:checked + .ff-slider:before { transform: translateX(22px); }
        .ff-slider.round { border-radius: 28px; }
        .ff-slider.round:before { border-radius: 50%; }


        /* --- ADD THIS NEW MEDIA QUERY BLOCK --- */
        @media (max-width: 400px) {
            #ff-pricing-toggle-container {
                flex-direction: column;
                gap: var(--ff-spacing-xs);
            }
        }
        /* --- END OF NEW BLOCK --- */

        /* --- START: Data Management Layout Restoration --- */
        #ff-settings-card-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--ff-spacing-lg); /* Adds space between cards */
        }
        .settings-button-group {
            display: flex;
            gap: var(--ff-spacing-md);
            margin-bottom: var(--ff-spacing-md);
        }

        .settings-button-group .ff-button {
            flex-grow: 1; /* Make buttons in a group take equal width */
        }
        /* --- END: Data Management Layout Restoration --- */

        /* --- RESPONSIVE LAYOUT --- */
        @media (min-width: 768px) {
            .ff-app-container { flex-direction: row; }
            .ff-sidebar { width: 240px; flex-shrink: 0; background-color: var(--ff-bg-card); border-right: 1px solid var(--ff-border-color); padding: var(--ff-spacing-lg); height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; }
            .ff-sidebar .logo { font-size: 1.5rem; font-weight: 600; color: var(--ff-primary); margin-bottom: var(--ff-spacing-lg); }
            .ff-sidebar-nav ul { list-style: none; }
            .ff-sidebar-nav li a { display: flex; align-items: center; gap: var(--ff-spacing-md); padding: var(--ff-spacing-sm) var(--ff-spacing-md); text-decoration: none; color: var(--ff-text-secondary); border-radius: var(--ff-border-radius-md); margin-bottom: var(--ff-spacing-sm); transition: all 0.2s ease; }
            .ff-sidebar-nav li a.active { color: var(--ff-primary); background-color: color-mix(in srgb, var(--ff-primary) 10%, transparent); font-weight: 600; }
            .ff-sidebar-nav li a i { font-size: 1.1rem; width: 20px; text-align: center;}
            .ff-sidebar-footer { margin-top: auto; padding-top: var(--ff-spacing-lg); border-top: 1px solid var(--ff-border-color); text-align: center; }
            .ff-sidebar-footer p { font-size: 0.75rem; color: var(--ff-text-secondary); margin-bottom: var(--ff-spacing-xs); line-height: 1.3; }
            .ff-main-content-wrapper { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
            .ff-bottom-nav { display: none !important; }
            .desktop-only { display: inline; } .mobile-only { display: none; }
            .mobile-line-item-content { display: none; }
            .desktop-line-item-table { display: table; width: 100%;}
            #ff-invoice-form .ff-modal-invoice-section-content.two-col { grid-template-columns: 1fr 1fr; }
            #ff-invoice-form .ff-modal-invoice-section-content .ff-form-group[data-span="full"], #ff-invoice-form .ff-modal-invoice-section-content #ff-invoice-line-items-container, #ff-invoice-form .ff-modal-invoice-section-content #ff-invoice-import-time-btn-container, #ff-invoice-form .ff-modal-invoice-section-content #ff-invoice-add-line-item-btn { grid-column: 1 / -1; }
            #ff-settings-card-container .settings-col-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ff-spacing-md); }
            .settings-button-group { flex-direction: row; }
            #ff-insights-summary-export-card .ff-card-body { flex-direction: row; }
            #ff-insights-summary-export-card .ff-card-body .ff-button { max-width: 250px; }
        }
        @media (max-width: 767px) {
            .ff-main-content { 
    margin-top: 60px;
    margin-bottom: 60px;
overflow-x: hidden; padding: var(--ff-spacing-md); width: 100%; }
            .ff-main-content-wrapper { min-width: 0; }
            #entries-view #ff-time-entry-list-container, #projects-view #ff-project-list-container { margin-top: var(--ff-spacing-md); gap: var(--ff-spacing-md); width: 100%; }
            #ff-time-entry-list-container .item-card, #ff-project-list-container .item-card, #ff-invoice-list-container .item-card, #ff-profile-list-container .item-card, .smart-card-header, .smart-card-compact-content, .smart-card-expanded-content { max-width: 100%; min-width: 0; box-sizing: border-box; }
            .time-entry-project-name, .project-name, .profile-name, .invoice-number, .detail-value, .detail-value-link, .ff-status-pill, .ff-tag-pill-display { word-break: break-word; overflow-wrap: break-word; white-space: normal; }
            .ff-bottom-nav { display: block; }
            .ff-sidebar { display: none; }
            .ff-app-header .logo span { font-weight:600; }
            .ff-app-header .logo { margin-right: var(--ff-spacing-sm); }
            .ff-header-actions { margin-left: var(--ff-spacing-sm); }
            .ff-global-timer { margin: 0; gap: var(--ff-spacing-xs); overflow-x: auto; scrollbar-width: none; }
            .ff-global-timer::-webkit-scrollbar { display: none; }
            #ff-global-timer-display { order: 1; font-size: 1.0rem; min-width: 65px; font-weight: 700; }
            #ff-global-timer-control-btn, #ff-global-timer-note-btn { font-size: 1.2rem !important; width:32px !important; height: 32px !important; padding: var(--ff-spacing-xs) !important; }
            #ff-global-timer-control-btn { order: 2; }
            #ff-global-timer-note-btn { order: 6; }
            #ff-global-timer-project-select { order: 5; max-width: 100px; font-size: 0.9rem; height: 32px; padding: 2px var(--ff-spacing-xs); }
            .ff-header-actions .ff-icon-button { font-size: 1.3rem; padding: var(--ff-spacing-xs); }
            .desktop-only { display: none; } .mobile-only { display: inline; }
            .ff-modal-content { max-width: 95%; padding: var(--ff-spacing-md); }
            .ff-modal-header, .ff-modal-actions { padding-left: 0; padding-right: 0; }
            #ff-invoice-modal .ff-modal-actions { flex-wrap: wrap; justify-content: center; }
            #ff-invoice-modal .ff-modal-actions .ff-button.icon-only { flex-grow: 1; min-width: 50px; }
            #ff-invoice-modal .ff-modal-actions > div { width: 100%; display: flex; justify-content: flex-end; gap: var(--ff-spacing-sm); }
            .ff-project-controls { flex-direction: column; align-items: stretch; }
            #projects-view .ff-project-controls .ff-project-filters, #projects-view .ff-project-controls .ff-project-sort { width: 100%; justify-content: space-between; }
            #projects-view .ff-project-controls .ff-project-filters select, #projects-view .ff-project-controls .ff-project-sort select { flex-grow: 1; }
            #projects-view .ff-project-controls .ff-project-search { width: 100%; }
            #projects-view .ff-project-controls .ff-project-search input[type="search"] { min-width: 0; }
            #entries-view .ff-project-controls .ff-project-filters, #entries-view .ff-project-controls .ff-project-sort, #entries-view .ff-project-controls .ff-project-search { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
            #entries-view .ff-project-controls .ff-project-filters label, #entries-view .ff-project-controls .ff-project-sort label { margin-bottom: 0; margin-right: var(--ff-spacing-sm); flex-shrink: 0; }
            #entries-view .ff-project-controls .ff-project-filters select, #entries-view .ff-project-controls .ff-project-sort select, #entries-view .ff-project-controls .ff-project-filters input[type="date"], #entries-view .ff-project-controls .ff-project-search input[type="search"] { flex-grow: 1; width: auto; min-width: 0; }
            #entries-view .ff-project-controls .ff-project-search label { display: none; }
            #ff-entry-custom-date-fields-container.ff-project-filters, #ff-invoice-custom-date-fields-container.ff-project-filters { flex-direction: column; align-items: stretch; justify-content: flex-start; }
            #ff-entry-custom-date-fields-container > .ff-project-filters, #ff-invoice-custom-date-fields-container > .ff-project-filters { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
            #ff-entry-custom-date-fields-container > .ff-project-filters label, #ff-invoice-custom-date-fields-container > .ff-project-filters label { margin-bottom: 0; margin-right: var(--ff-spacing-sm); flex-shrink: 0; }
            #ff-entry-custom-date-fields-container > .ff-project-filters input[type="date"], #ff-invoice-custom-date-fields-container > .ff-project-filters input[type="date"] { flex-grow: 1; width: auto; min-width: 0; }
            #invoices-view .ff-project-controls .ff-project-filters, #invoices-view .ff-project-controls .ff-project-sort { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
            #invoices-view .ff-project-controls .ff-project-filters label, #invoices-view .ff-project-controls .ff-project-sort label { margin-bottom: 0; margin-right: var(--ff-spacing-sm); flex-shrink: 0; }
            #invoices-view .ff-project-controls .ff-project-filters select, #invoices-view .ff-project-controls .ff-project-sort select, #invoices-view .ff-project-controls .ff-project-filters input[type="search"] { flex-grow: 1; width: auto; min-width: 0; }
            #ff-settings-card-container #ff-export-invoices-custom-dates.ff-project-filters { flex-direction: column; align-items: stretch; justify-content: flex-start; }
            #ff-settings-card-container #ff-export-invoices-custom-dates > .ff-project-filters { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
            #ff-settings-card-container #ff-export-invoices-custom-dates > .ff-project-filters label { margin-bottom: 0; margin-right: var(--ff-spacing-sm); flex-shrink: 0; }
            #ff-settings-card-container #ff-export-invoices-custom-dates > .ff-project-filters input[type="date"] { flex-grow: 1; width: auto; min-width: 0; }
            #ff-quick-stats-card .ff-card-header{ flex-wrap: nowrap; gap: var(--ff-spacing-xs); }
            #ff-quick-stats-card .ff-card-header h3{ flex-shrink: 0; white-space: nowrap; }
            #ff-quick-stats-card .ff-card-header .ff-project-filters{ margin-left: auto; flex-shrink: 0; }
            #ff-quick-stats-card #ff-quick-stats-timespan-select{ width: auto; max-width: 120px; min-width: 0; font-size: .75rem; padding: var(--ff-spacing-xs) var(--ff-spacing-sm); }
            @keyframes slideOutLeft   { from{transform:translateX(0)}   to{transform:translateX(-100%)} }
            @keyframes slideInRight   { from{transform:translateX(100%)} to{transform:translateX(0)} }
            @keyframes slideOutRight  { from{transform:translateX(0)}   to{transform:translateX(100%)} }
            @keyframes slideInLeft    { from{transform:translateX(-100%)} to{transform:translateX(0)} }
            .swipe-left-out  { animation: slideOutLeft  .25s ease-in forwards;  }
            .swipe-right-in  { animation: slideInRight  .25s ease-out forwards; }
            .swipe-right-out { animation: slideOutRight .25s ease-in forwards;  }
            .swipe-left-in   { animation: slideInLeft   .25s ease-out forwards; }
            #ff-invoice-form .ff-modal-invoice-section-content.two-col { grid-template-columns: 1fr; }
            .desktop-line-item-table { display: none; }
            .mobile-line-item-content { display: block; }
            #ff-settings-card-container .settings-col-group,
            #ff-settings-card-container .settings-button-group { grid-template-columns: 1fr; flex-direction: column; }
            #ff-settings-card-container .settings-col-group > .ff-form-group,
            #ff-settings-card-container > .ff-card > div > .ff-form-group { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
            #ff-settings-card-container .settings-col-group > .ff-form-group label,
            #ff-settings-card-container > .ff-card > div > .ff-form-group label { margin-bottom: 0; margin-right: var(--ff-spacing-sm); flex-shrink: 0; }
            #ff-settings-card-container .settings-col-group > .ff-form-group > select,
            #ff-settings-card-container .settings-col-group > .ff-form-group > input,
            #ff-settings-card-container > .ff-card > div > .ff-form-group > select,
            #ff-settings-card-container > .ff-card > div > .ff-form-group > input { width: auto; flex-grow: 1; min-width: 0; }
            #ff-insights-summary-export-card .ff-card-body { flex-direction: column; }
            #ff-insights-summary-export-card .ff-card-body .ff-button { width: 100%; }
            #ff-settings-card-container .ff-card .ff-button { width: 100%; }
        }
        .ff-button:focus-visible, .ff-icon-button:focus-visible, .ff-sidebar-nav li a:focus-visible, .ff-bottom-nav li .nav-link:focus-visible, .ff-modal-close-btn:focus-visible, .tag-chip:focus-visible {
            outline: 2px solid var(--ff-primary); outline-offset: 2px;
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--ff-primary) 30%, transparent);
        }
        @media (hover: hover) and (pointer: fine) {
            .ff-bottom-nav li .nav-link:hover { color: var(--ff-primary); background-color: color-mix(in srgb, var(--ff-primary) 10%, transparent); }
            .ff-button.danger-outline:hover:not(:disabled) { background-color: color-mix(in srgb, var(--ff-danger) 10%, transparent); transform: translateY(-1px); }
            .ff-button.warning:hover:not(:disabled) { opacity: 0.85; transform: translateY(-1px); }
            .ff-button.outline:hover:not(:disabled), .ff-button:not(.primary, .secondary, .danger, .danger-outline, .warning, .import-data, .export-data):hover:not(:disabled) { background-color: color-mix(in srgb, var(--ff-primary) 10%, transparent); transform: translateY(-1px); }
            .ff-button.import-data:hover:not(:disabled), .ff-button.export-data:hover:not(:disabled) { opacity: 0.85; transform: translateY(-1px); }
            .ff-icon-button:hover { color: var(--ff-primary); background-color: color-mix(in srgb, var(--ff-primary) 10%, transparent); }
            .ff-icon-button.danger:hover { color: var(--ff-danger); background-color: color-mix(in srgb, var(--ff-danger) 10%, transparent); }
            .ff-modal-close-btn:hover { color: var(--ff-danger); }
            .ff-sidebar-nav li a:hover { color: var(--ff-primary); background-color: color-mix(in srgb, var(--ff-primary) 10%, transparent); font-weight: 600; }
            .smart-card-expanded-content .detail-value-link:hover { text-decoration: underline; }
            .smart-card-expanded-content .description-toggle:hover, #ff-dashboard-timer-current-note-wrapper .description-toggle:hover { color: var(--ff-primary); }
        }
        .hidden { display: none !important; }
        .ff-ar-tooltip { background: rgba(0,0,0,0.7); color: white; padding: 8px; border-radius: 4px; font-size: 0.85rem; }
        .ff-ar-tooltip-bucket { font-weight: bold; margin-bottom: 4px; }
    
        /* --- START: Invoice Preview Pan/Zoom CSS (FIXED) --- */
        /* Make the whole "Live Preview" section a flex container that can grow */
        #invoice-section-preview.ff-modal-invoice-section {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            min-height: 0; /* Fix flexbox sizing issues */
        }
        /* Make the content area of that section also grow */
        #invoice-section-preview-content.ff-modal-invoice-section-content {
            display: flex;
            flex-grow: 1;
            min-height: 0; /* Fix flexbox sizing issues */
        }
        /* This is the interactive container for the preview */
        #ff-invoice-modal-preview-container {
            background-color: var(--ff-bg-main);
            position: relative;
            flex: 1; /* Let this container fill all available space from its parent */
            padding: var(--ff-spacing-md);
            overflow: hidden;
            touch-action: none;
            border-radius: var(--ff-border-radius-sm);
            border: 1px solid var(--ff-border-color);
            min-height: 300px; /* A sensible minimum height for mobile */
        }
        .preview-page-content {
            position: absolute;
            width: 800px;
            height: 842px;
            background-color: var(--ff-bg-card);
            color: var(--ff-text-primary);
            padding: 25px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            transform-origin: 0 0;
            will-change: transform;
            transition: none;
            cursor: grab;
        }
        .preview-page-content:active {
            cursor: grabbing;
        }
        /* --- END: Invoice Preview Pan/Zoom CSS (FIXED) --- */

        .preview-document-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--ff-primary);
        }
        .preview-company-info p { margin: 0; font-size: 9pt; }
        .preview-invoice-title-info { text-align: right; }
        .preview-invoice-title-info h4 { font-size: 18pt; margin: 0 0 5px 0; color: var(--ff-primary); letter-spacing: 1px;}
        .preview-invoice-title-info p { margin: 0; font-size: 9pt; }
        .preview-project-name { margin: 15px 0; font-size: 11pt; }
        .preview-bill-to { margin-bottom: 20px; }
        .preview-bill-to h5 { margin-bottom: 5px; font-size: 8pt; color: var(--ff-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
        .preview-bill-to p { margin: 0; }
        .preview-page-content h5 {
            font-size: 9pt;
            color: var(--ff-text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 20px 0 8px 0;
            border-bottom: 1px solid var(--ff-border-color);
            padding-bottom: 4px;
        }
        .preview-page-content table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            font-size: 9.5pt;
        }
        .preview-page-content th, .preview-page-content td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid var(--ff-border-color);
            vertical-align: top;
        }
        .preview-page-content th { font-weight: bold; background-color: var(--group-header-bg); }
        .preview-page-content th:nth-child(2), .preview-page-content td:nth-child(2),
        .preview-page-content th:nth-child(3), .preview-page-content td:nth-child(3),
        .preview-page-content th:nth-child(4), .preview-page-content td:nth-child(4) {
            text-align: right;
            width: 15%;
        }
        .preview-totals {
            width: 50%;
            margin-left: auto; /* Push it to the right */
            margin-bottom: 20px;
            font-size: 10pt;
        }
        .preview-totals > div {
            display: flex;
            justify-content: space-between;
            padding: 5px 0;
        }
        .preview-totals .grand-total {
            font-weight: bold;
            font-size: 12pt;
            border-top: 2px solid var(--ff-primary);
            margin-top: 5px;
            padding-top: 5px;
        }
        .preview-page-content .preview-notes p, .preview-page-content .preview-payment p {
            font-size: 9pt;
            white-space: pre-wrap; /* Preserve line breaks from textareas */
            margin: 0;
        }

        .preview-page-content th {
            background-color: #f8f9fa !important; /* A solid, safe fallback for html2canvas */
            color: #343a40 !important; /* Ensure text is readable on the light background */
        }

        /* --- Toast Notifications --- */
        /* Login-page toasts: bottom-right, out of document flow */
        #ff-login-toast-container {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        pointer-events: none;
        z-index: 10000;
        }
        /* Individual login toasts accept pointer events */
        #ff-login-toast-container .ff-toast {
        pointer-events: auto;
        min-width: 200px;
        max-width: 300px;
        }
        /* Mobile adjustments */
        @media (max-width: 480px) {
        #ff-login-toast-container {
            bottom: 0.5rem;
            right: 0.5rem;
            gap: 0.25rem;
        }
        }
        #ff-toast-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 2000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: flex-end;
        }
        .ff-toast {
            background-color: var(--ff-bg-card);
            color: var(--ff-text-primary);
            padding: var(--ff-spacing-sm) var(--ff-spacing-md);
            border-radius: var(--ff-border-radius-md);
            box-shadow: var(--ff-shadow);
            font-size: 0.9rem;
            opacity: 0;
            transform: translateX(100%);
            transition: opacity 0.3s ease, transform 0.3s ease, border-left-color 0.3s ease;
            min-width: 250px;
            max-width: 350px;
            word-break: break-word;
        }
        .ff-toast.show {
            opacity: 1;
            transform: translateX(0);
        }
        .ff-toast.success { border-left: 4px solid var(--ff-success); }
        .ff-toast.error   { border-left: 4px solid var(--ff-danger); }
        .ff-toast.info    { border-left: 4px solid var(--ff-primary); }

        /* --- UI Polish & Fixes --- */
        #ff-user-guide-card-content ul {
            list-style-position: inside;
            padding-left: var(--ff-spacing-sm);
        }


        .ff-bottom-nav {
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            z-index: 1000 !important;
            transform: none !important;
        }


        /* --- START: ADD THIS NEW CSS BLOCK --- */
        .ff-progress {
            height: 8px;
            background-color: var(--ff-border-color);
            border-radius: 4px;
            overflow: hidden;
            margin-top: var(--ff-spacing-xs);
            width: 100%;
        }
        .ff-progress span {
            display: block;
            height: 100%;
            background-color: var(--ff-success);
            border-radius: 4px;
            transition: width 0.3s ease;
        }
        .invoice-card .smart-card-compact-content p .balance-due-text {
            margin-left: auto;
            font-size: 0.9em;
            color: var(--ff-warning);
            font-weight: 600;
        }
        #ff-record-payment-modal .ff-modal-body p {
            margin-bottom: var(--ff-spacing-md);
        }

        /* --- START: MODAL CENTERING FIX (FINAL) --- */
        .ff-modal.active {
            /* This is the key change: we use the parent's align-items: center */
            /* by not overriding it. We can still keep the top padding for aesthetics. */
            padding-top: 5vh; /* Provides nice spacing from the top edge */
        }

        /* This ensures modals with lots of content become scrollable instead of overflowing */
        .ff-modal-content {
            max-height: 85vh; /* Was already present, which is great! */
            display: flex;
            flex-direction: column;
        }

        .ff-modal-body,
        .ff-modal-scrollable-content {
            overflow-y: auto; /* This makes the *content* area scrollable */
            flex-grow: 1;     /* Allows the content to fill available space */
            min-height: 0;      /* Fixes a flexbox bug that can prevent scrolling */
        }
        /* --- END: MODAL CENTERING FIX (FINAL) --- */
        #ff-payment-note {
            min-height: 80px; /* Standardize height */
            resize: vertical; /* Allow user resizing */
        }

        .payment-history-list {
            list-style: none;
            padding-left: calc(16px + var(--ff-spacing-sm));
            font-size: 0.85rem;
            display: flex;
            flex-direction: column;
            gap: var(--ff-spacing-xs);
        }
        .payment-history-list li {
            display: flex;
            justify-content: space-between;
        }
        .payment-history-list .payment-note {
            font-style: italic;
            color: var(--ff-text-secondary);
            margin-left: var(--ff-spacing-md);
            font-size: 0.9em;
        }
        /* --- END: ADD THIS NEW CSS BLOCK --- */

        /* --- Invoice Line Item Styling --- */
        #ff-invoice-line-items-container table {
            border-collapse: collapse;
            margin-top: var(--ff-spacing-sm);
            width: 100%;
        }
        #ff-invoice-line-items-container th {
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--ff-text-secondary);
            text-align: left;
            white-space: nowrap;
            padding: var(--ff-spacing-sm);
            border-bottom: 2px solid var(--ff-border-color);
            background-color: var(--group-header-bg);
        }
        #ff-invoice-line-items-container td {
            padding: var(--ff-spacing-xs);
            border-bottom: 1px solid var(--ff-border-color);
            vertical-align: top;
        }
        #ff-invoice-line-items-container tbody tr:nth-child(even) {
            background-color: var(--group-header-bg);
        }
        /* General input styling within the table */
        #ff-invoice-line-items-container td input,
        #ff-invoice-line-items-container td textarea {
            font-size: 0.9rem;
            padding: var(--ff-spacing-xs) var(--ff-spacing-sm);
            border: 1px solid var(--ff-border-color);
            border-radius: var(--ff-border-radius-sm);
            background-color: var(--ff-bg-card); /* Use card background for inputs */
            color: var(--ff-text-primary);
            width: 100%;
        }
        html[data-theme="focusflow-dark"] #ff-invoice-line-items-container td input,
        html[data-theme="focusflow-dark"] #ff-invoice-line-items-container td textarea,
        html[data-theme="solarized-dark"] #ff-invoice-line-items-container td input,
        html[data-theme="solarized-dark"] #ff-invoice-line-items-container td textarea {
            background-color: var(--ff-bg-main); /* On dark themes, main bg is better for contrast */
        }
        /* Make the 'Total' field look calculated, not editable */
        #ff-invoice-line-items-container .ff-invoice-item-total {
            border: none;
            background-color: transparent !important;
            font-weight: 600;
            text-align: right;
        }
        /* Style the delete button */
        #ff-invoice-line-items-container .ff-invoice-remove-line-item-btn {
            font-size: 1rem;
            padding: var(--ff-spacing-xs);
            width: 28px;
            height: 28px;
        }
        /* Wrapper for Unit Price to include currency symbol */
        .unit-price-wrapper {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
        .unit-price-wrapper .currency-symbol-prefix {
            padding-right: var(--ff-spacing-xs);
            color: var(--ff-text-secondary);
        }
        .unit-price-wrapper input[type="number"] {
            text-align: right;
            flex-grow: 1;
            min-width: 80px;
        }
        /* Column-specific alignments */
        #ff-invoice-line-items-container th:nth-child(2),
        #ff-invoice-line-items-container th:nth-child(3),
        #ff-invoice-line-items-container th:nth-child(4) {
            text-align: right;
        }
        #ff-invoice-line-items-container td:nth-child(2) input,
        #ff-invoice-line-items-container td:nth-child(4) input {
            text-align: right;
        }


        /* --- Restore Timer Note Display styling --- */

        #ff-dashboard-timer-current-note-wrapper {
            /* Uses .project-description-wrapper structure */
            margin-bottom: var(--ff-spacing-md); /* <= ADD THIS LINE */
        }
        #ff-dashboard-timer-current-note-wrapper .description-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 0;
            margin-bottom: var(--ff-spacing-xs);
            border-bottom: none;
        }
        #ff-dashboard-timer-current-note-wrapper .description-header .project-detail-item {
            margin-bottom: 0;
        }
        #ff-dashboard-timer-current-note-wrapper .description-header .project-detail-item span {
            font-weight: 600;
            color: var(--ff-text-secondary);
        }
        #ff-dashboard-timer-current-note-wrapper .description-header .project-detail-item i.project-detail-icon-smart {
            color: var(--ff-text-secondary);
        }
        #ff-dashboard-timer-current-note-wrapper .description-toggle {
            font-size: 0.8rem;
        }
        #ff-dashboard-timer-current-note-content {
            max-height: 5.1em;
            overflow: hidden;
            font-size: 0.85rem;
            color: var(--ff-text-secondary);
            border-radius: var(--ff-border-radius-sm);
            margin-top: 0;
            background-color: color-mix(in srgb, var(--ff-border-color) 20%, transparent);
            padding: var(--ff-spacing-xs) var(--ff-spacing-sm);
            word-break: break-word;
            transition: max-height 0.3s ease-in-out, background-color 0.3s ease, padding 0.3s ease;
        }
        #ff-dashboard-timer-current-note-content.expanded {
            max-height: 200px;
            overflow-y: auto;
            background-color: color-mix(in srgb, var(--ff-bg-main) 50%, var(--ff-bg-card) 50%);
            border: 1px solid var(--ff-border-color);
            padding: var(--ff-spacing-sm);
        }
        #ff-dashboard-timer-current-note-content p {
            margin: 0;
            line-height: 1.5;
        }
        #ff-dashboard-timer-current-note-content i {
            font-style: italic;
        }
        .ff-timer-controls {
            display: flex;
            gap: var(--ff-spacing-sm);
            justify-content: center;
        }
        .ff-timer-controls .ff-button {
            flex-grow: 1;
        }

        /* --- Restore Recent Entries Card Styling from original standalone --- */
        /* Scrollbar styling */
        #ff-recent-entries-list {
            max-height: 350px;
            overflow-y: auto;
            padding-right: var(--ff-spacing-xs);
        }
        #ff-recent-entries-list::-webkit-scrollbar {
            width: 6px;
        }
        #ff-recent-entries-list::-webkit-scrollbar-track {
            background: color-mix(in srgb, var(--ff-border-color) 30%, transparent);
            border-radius: 3px;
        }
        #ff-recent-entries-list::-webkit-scrollbar-thumb {
            background-color: var(--ff-text-secondary);
            border-radius: 3px;
        }
        /* Placeholder card styling */
        #ff-recent-entries-list .recent-entry-placeholder {
            background-color: var(--ff-bg-main);
            padding: var(--ff-spacing-sm);
            border-radius: var(--ff-border-radius-md);
            border: 1px dashed var(--ff-border-color);
            color: var(--ff-text-secondary);
            cursor: pointer;
            transition: background-color 0.2s ease, border-color 0.2s ease;
            display: flex;
            flex-direction: column;
            gap: 2px;
            position: relative;
        }
        #ff-recent-entries-list .recent-entry-placeholder:hover {
            background-color: color-mix(in srgb, var(--ff-primary) 5%, var(--ff-bg-main));
            border-color: var(--ff-primary);
        }
        #ff-recent-entries-list .recent-entry-placeholder p {
            margin: 0;
            font-weight: 500;
            color: var(--ff-text-primary);
            display: flex;
            align-items: center;
            gap: var(--ff-spacing-xs);
        }
        #ff-recent-entries-list .recent-entry-placeholder p span {
            display: inline-flex;
            align-items: center;
            gap: var(--ff-spacing-xs);
        }
        #ff-recent-entries-list .recent-entry-project-name {
            font-weight: bold;
        }
        #ff-recent-entries-list .recent-entry-duration,
        #ff-recent-entries-list .recent-entry-earnings {
            font-size: 0.9em;
            color: var(--ff-text-secondary);
        }
        #ff-recent-entries-list .recent-entry-placeholder small.recent-entry-note-preview {
            font-size: 0.8em;
            align-items: center;
            gap: var(--ff-spacing-xs);
            display: -webkit-box !important;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
            margin-top: 2px;
        }
        /* Action buttons */
        .recent-entry-actions {
            position: absolute;
            top: 5px;
            right: 5px;
            display: none;
            gap: var(--ff-spacing-xs);
            background-color: var(--ff-bg-card);
            padding: 2px;
            border-radius: var(--ff-border-radius-sm);
            box-shadow: var(--ff-shadow);
        }
        .recent-entry-placeholder:hover .recent-entry-actions {
            display: flex;
        }
        .recent-entry-actions .ff-icon-button {
            font-size: 0.9rem;
            padding: var(--ff-spacing-xs);
            width: 24px;
            height: 24px;
        }
        /* View All button */
        .ff-card .ff-card-header .view-all-btn {
            font-size: 0.8rem;
            padding: var(--ff-spacing-xs) var(--ff-spacing-sm);
        }


        /* --- Add spacing between recent entries --- */
        #ff-recent-entries-list {
            display: flex;
            flex-direction: column;
            gap: var(--ff-spacing-md);
        }

        /* --- Restore big bold timer styling --- */
        #ff-dashboard-timer-display {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: var(--ff-spacing-md);
            color: var(--ff-primary);
            text-align: center;
            font-family: var(--ff-font-mono);
            padding: var(--ff-spacing-sm) 0;
            background-color: color-mix(in srgb, var(--ff-bg-main) 90%, var(--ff-bg-card) 10%);
            border-radius: var(--ff-border-radius-sm);
        }

        /* --- Ensure action buttons show on hover in desktop mode --- */
        #ff-recent-entries-list .recent-entry-placeholder:hover .recent-entry-actions {
            display: flex !important;
        }

        /* --- Pricing Table Styles --- */
        .ff-pricing-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: var(--ff-spacing-lg);
            font-size: 0.9rem;
        }
        .ff-pricing-table th, .ff-pricing-table td {
            padding: 6px var(--ff-spacing-xs); /* Reduced padding for more space */
            text-align: center;
            border-bottom: 1px solid var(--ff-border-color);
            vertical-align: middle; /* Ensures icons and text align nicely */
        }
        .ff-pricing-table th {
            color: var(--ff-text-secondary);
            font-weight: 600;
        }
        .ff-pricing-table td:first-child {
            text-align: left;
            font-weight: 500;
        }
        .ff-pricing-table thead th:nth-child(3) {
            color: var(--ff-primary);
        }
        .ff-pricing-table tbody td:nth-child(3) {
            font-weight: bold;
            color: var(--ff-primary);
        }
        .ff-pricing-table tbody tr:last-child td {
            border-bottom: none;
        }


        /* --- Restore Collapsible User Guide styling --- */
        #ff-user-guide-card-content details {
            margin-bottom: var(--ff-spacing-sm);
            border: 1px solid var(--ff-border-color);
            border-radius: var(--ff-border-radius-sm);
        }
        #ff-user-guide-card-content summary {
            padding: var(--ff-spacing-sm);
            font-weight: 600;
            background-color: var(--group-header-bg);
            cursor: pointer;
            border-radius: var(--ff-border-radius-sm);
        }
        #ff-user-guide-card-content summary:hover {
            background-color: var(--group-header-hover-bg);
        }
        #ff-user-guide-card-content details > div {
            padding: var(--ff-spacing-sm);
        }
        #ff-user-guide-card-content strong {
            color: var(--ff-text-primary);
            margin-right: var(--ff-spacing-xs);
        }


        /* --- Fixed header/footer and swipe container spacing --- */
        .ff-app-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
        }
        .ff-bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 100;
        }
        .ff-main-content {
            margin-top: 60px !important;
            margin-bottom: 60px !important;
        }

        /* --- START: Data Management Layout Restoration --- */
        .settings-button-group {
            display: flex;
            gap: var(--ff-spacing-md);
            margin-bottom: var(--ff-spacing-md);
        }

        .settings-button-group .ff-button {
            flex-grow: 1; /* Make buttons in a group take equal width */
        }
        /* --- END: Data Management Layout Restoration --- */

        /* --- NEW: Landing Page Styles --- */
        #ff-landing-page {
            display: block; /* Show the landing page by default */
            width: 100%;
        }

        .ff-hero-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: var(--ff-spacing-xl) var(--ff-spacing-md);
            min-height: 60vh;
            background-color: var(--ff-bg-card);
        }

        .ff-hero-content {
            max-width: 700px;
        }

        .ff-hero-content h1 {
            font-size: 2.5rem;
            color: var(--ff-primary);
            margin-bottom: var(--ff-spacing-md);
            line-height: 1.2;
        }

        .ff-hero-content p {
            font-size: 1.1rem;
            color: var(--ff-text-secondary);
            margin-bottom: var(--ff-spacing-lg);
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .ff-button.large {
            font-size: 1.1rem;
            padding: var(--ff-spacing-md) var(--ff-spacing-xl);
        }

        @media (max-width: 767px) {
            .ff-hero-content h1 {
                font-size: 2rem;
            }
            .ff-hero-content p {
                font-size: 1rem;
            }
        }

        /* --- Landing Page Polish Styles --- */
        #ff-landing-page {
            display: flex; /* Changed to flex to structure header/content/footer */
            flex-direction: column;
            min-height: 100vh;
            background-color: var(--ff-bg-main); /* Use your app's main background */
        }

        .ff-landing-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--ff-spacing-md);
            width: 100%;
            background-color: var(--ff-bg-card);
            border-bottom: 1px solid var(--ff-border-color);
        }

        .ff-landing-logo {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--ff-primary);
            display: flex;
            align-items: center;
            gap: var(--ff-spacing-sm);
        }

        .ff-hero-section {
            flex-grow: 1; /* This makes the hero section fill the available space */
        }

        .ff-landing-footer {
            text-align: center;
            padding: var(--ff-spacing-lg);
            font-size: 0.9rem;
            color: var(--ff-text-secondary);
            background-color: var(--ff-bg-card);
            border-top: 1px solid var(--ff-border-color);
        }


        /* --- Landing Page Content Section Styles --- */
        .ff-features-section, .ff-pricing-section {
            padding: var(--ff-spacing-xl) var(--ff-spacing-md);
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
        }

        .ff-features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--ff-spacing-lg);
            margin-top: var(--ff-spacing-lg);
        }

        .ff-feature-item {
            text-align: center;
            background-color: var(--ff-bg-card);
            padding: var(--ff-spacing-lg);
            border-radius: var(--ff-border-radius-lg); /* Changed to lg */
            border: 1px solid var(--ff-border-color);
            box-shadow: var(--ff-shadow); /* Added shadow */
            transition: box-shadow 0.3s ease; /* Added transition */
        }
        .ff-feature-item:hover {
            box-shadow: var(--ff-shadow-hover); /* Added hover effect */
        }

        .ff-feature-item i {
            font-size: 2.5rem;
            color: var(--ff-primary);
            margin-bottom: var(--ff-spacing-md);
        }

        .ff-feature-item h3 {
            margin-bottom: var(--ff-spacing-sm);
            color: var(--ff-text-primary);
        }

        .ff-feature-item p {
            color: var(--ff-text-secondary);
            font-size: 0.95rem;
        }

        .ff-pricing-section h2 {
            text-align: center;
            font-size: 2rem;
            color: var(--ff-text-primary);
            margin-bottom: var(--ff-spacing-sm);
        }

        .ff-pricing-subtitle {
            text-align: center;
            color: var(--ff-text-secondary);
            margin-bottom: var(--ff-spacing-lg);
        }

        .ff-pricing-table-container {
            background-color: var(--ff-bg-card);
            padding: var(--ff-spacing-lg);
            border-radius: var(--ff-border-radius-lg);
            border: 1px solid var(--ff-border-color);
            box-shadow: var(--ff-shadow);
        }

        /* --- STYLES FOR REFINED TOUR PAGE... --- */
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        main.ff-tour-page-wrapper {
            flex-grow: 1;
            width: 100%;
            padding: var(--ff-spacing-lg);
        }
        .ff-tour-page-container {
            max-width: 800px;
            margin: 0 auto;
        }
        .ff-tour-page-container .ff-card {
            margin-bottom: var(--ff-spacing-lg);
        }
        .ff-tour-page-container .ff-view-header {
            margin-bottom: var(--ff-spacing-lg);
        }
        .ff-tour-page-container p, .ff-tour-page-container li {
            color: var(--ff-text-secondary);
            margin-bottom: var(--ff-spacing-md);
            line-height: 1.7;
        }
        .ff-tour-page-container ul, .ff-tour-page-container ol {
            padding-left: 20px;
        }
        .ff-tour-page-container strong, 
        .ff-tour-page-container .pain-point-title {
            color: var(--ff-text-primary); /* Ensures all bold text is the primary text color */
            font-weight: 600;
        }
        .ff-tour-page-container .highlight-pain {
            background-color: color-mix(in srgb, var(--ff-warning) 20%, transparent);
            padding: 0 4px;
            border-radius: var(--ff-border-radius-sm);
            font-weight: 600;
            color: var(--ff-text-primary);
        }
        .ff-tour-page-container .solution-text {
            color: var(--ff-success);
            font-weight: 700;
        }
        .ff-tour-page-container details {
            margin-bottom: var(--ff-spacing-sm);
            border-top: 1px solid var(--ff-border-color);
        }
        .ff-tour-page-container details:first-of-type {
            border-top: none;
        }
        .ff-tour-page-container summary {
            padding: var(--ff-spacing-md) 0;
            cursor: pointer;
            list-style: none;
            display: flex;
            align-items: center;
        }
        .ff-tour-page-container summary::-webkit-details-marker { display: none; }
        .ff-tour-page-container summary::before {
            content: '\f078';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            margin-right: var(--ff-spacing-md);
            transition: transform 0.2s ease-in-out;
            color: var(--ff-primary);
        }
        .ff-tour-page-container details[open] > summary::before {
            transform: rotate(180deg);
        }
        .ff-tour-page-container details > div {
            padding: 0 0 var(--ff-spacing-md) calc(var(--ff-spacing-md) + 12px);
        }
        .ff-tour-page-container strong.new-emphasis {
            font-weight: 600;
        }

        @media (max-width: 767px) {
            .ff-landing-header {
                padding: var(--ff-spacing-sm) var(--ff-spacing-md);
                height: 60px;
                display: flex;
                align-items: center;
            }
            .ff-landing-nav {
                display: flex;
                align-items: center;
                gap: var(--ff-spacing-xs);
            }
            .ff-landing-nav a.ff-button {
                padding: var(--ff-spacing-xs) var(--ff-spacing-sm);
                font-size: 0.8rem;
            }
            main.ff-tour-page-wrapper {
                padding: var(--ff-spacing-md);
            }
        }

        .ff-button.architect, .ff-button.baker {
            color: white !important; /* Ensure text is white on colored background */
            justify-content: center; /* Center the icon and text inside */
            transition: filter 0.2s ease, transform 0.2s ease;
        }
        .ff-button.architect {
            background-color: #8D99AE; /* Concrete grey */
        }
        .ff-button.baker {
            background-color: #D4A373; /* Cake brown */
        }
        .ff-button.architect:hover, .ff-button.baker:hover {
            filter: brightness(1.1);
            transform: translateY(-2px);
        }

        /* Login-page toasts: bottom-right, out of document flow */
        #ff-login-toast-container {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        pointer-events: none;
        z-index: 10000;
        }
        /* Individual login toasts accept pointer events */
        #ff-login-toast-container .ff-toast {
        pointer-events: auto;
        min-width: 200px;
        max-width: 300px;
        }
        /* Mobile adjustments */
        @media (max-width: 480px) {
        #ff-login-toast-container {
            bottom: 0.5rem;
            right: 0.5rem;
            gap: 0.25rem;
        }
        }

        /* --- START: Mobile Hamburger Navigation --- */
        .ff-hamburger-btn {
            display: none; /* Hidden by default */
            font-size: 1.5rem;
            background: none;
            border: none;
            color: var(--ff-text-primary);
            cursor: pointer;
            z-index: 1001; /* Above header content */
        }
        .ff-mobile-nav {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--ff-bg-card);
            z-index: 1000;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: var(--ff-spacing-lg);
        }
        .ff-mobile-nav.open {
            display: flex;
        }
        .ff-mobile-nav a {
            font-size: 1.5rem;
            font-weight: 600;
            text-decoration: none;
            color: var(--ff-text-secondary);
        }
        .ff-mobile-nav a.ff-button {
            font-size: 1.2rem;
            padding: var(--ff-spacing-sm) var(--ff-spacing-xl);
        }
        .ff-mobile-nav a.active-page {
            color: var(--ff-primary);
        }

        @media (max-width: 767px) {
            .ff-landing-nav .ff-button, 
            .ff-landing-nav a {
                display: none; /* Hide the text links on mobile */
            }
            .ff-hamburger-btn {
                display: block; /* Show the hamburger button on mobile */
            }
        }
        /* --- END: Mobile Hamburger Navigation --- */

        /* --- Marketing & App Header/Logo Unification (Definitive Final) --- */
        .ff-landing-header {
            height: 60px;
            padding: 0 var(--ff-spacing-md);
            background-color: var(--ff-bg-card);
            border-bottom: 1px solid var(--ff-border-color);
        }

        .ff-landing-logo svg,
        .ff-app-header .logo svg,
        .ff-sidebar .logo svg {
            height: 22px;
            width: auto;
            vertical-align: middle;
            color: var(--ff-primary);
        }

        /* Spacing Fixes */
        .ff-page-section { margin-bottom: var(--ff-spacing-lg); }
        .ff-tour-page-container .ff-view-header, .ff-pricing-section .ff-view-header { margin-bottom: var(--ff-spacing-lg); }
        .ff-features-section { margin-bottom: var(--ff-spacing-lg); }
        .ff-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--ff-spacing-lg); }
        .ff-pricing-subtitle { font-size: 1.1rem; text-align: center; margin-top: calc(-1 * var(--ff-spacing-md)); }
        .ff-pricing-table-container { background-color: var(--ff-bg-card); padding: var(--ff-spacing-lg); border-radius: var(--ff-border-radius-lg); border: 1px solid var(--ff-border-color); box-shadow: var(--ff-shadow); }
        .ff-pricing-grid .ff-card p { min-height: 0; }
        .ff-feature-item { text-align: center; background-color: var(--ff-bg-card); padding: var(--ff-spacing-lg); border-radius: var(--ff-border-radius-lg); border: 1px solid var(--ff-border-color); box-shadow: var(--ff-shadow); transition: box-shadow 0.3s ease; }
        .ff-feature-item:hover { box-shadow: var(--ff-shadow-hover); }

        /* --- Invoice PDF Footer Branding --- */
        .preview-footer {
            position: absolute;
            bottom: 15px;
            left: 25px;
            right: 25px;
            text-align: center;
            font-size: 8pt;
            color: var(--ff-text-placeholder);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .preview-footer img {
            height: 10px; /* Make the logo small and subtle */
            width: auto;
            color: var(--ff-text-placeholder); /* Color for the SVG icon part */
        }
        .preview-footer a {
            color: var(--ff-primary);
            text-decoration: none;
        }
        .preview-footer a:hover {
            text-decoration: underline;
        }
        
        /* --- ADD THIS ENTIRE BLOCK --- */

        /* --- Project Budget Progress Bar --- */
        .project-budget-progress {
            margin-top: var(--ff-spacing-sm);
        }
        .project-budget-progress-bar {
            width: 100%;
            height: 8px;
            background-color: var(--ff-border-color);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: var(--ff-spacing-xs);
        }
        .progress-bar-inner {
            height: 100%;
            border-radius: 4px;
            transition: width 0.3s ease, background-color 0.3s ease;
        }
        .budget-text {
            font-size: 0.8rem;
            font-weight: 500;
        }
        .project-budget-progress.on-track .progress-bar-inner {
            background-color: var(--ff-primary);
        }
        .project-budget-progress.on-track .budget-text {
            color: var(--ff-text-secondary);
        }
        .project-budget-progress.warning .progress-bar-inner {
            background-color: var(--ff-warning);
        }
        .project-budget-progress.warning .budget-text {
            color: var(--ff-warning);
        }
        .project-budget-progress.over-budget .progress-bar-inner {
            background-color: var(--ff-danger);
        }
        .project-budget-progress.over-budget .budget-text {
            color: var(--ff-danger);
        }
        /* Style for disabled Pro features in modals */
        .ff-form-group.disabled label {
            color: var(--ff-text-placeholder);
        }
        .ff-form-group.disabled input,
        .ff-form-group.disabled select {
            background-color: var(--ff-bg-main);
            cursor: not-allowed;
        }
        .ff-form-group.disabled .quota-upgrade-link {
            font-weight: 600;
            text-decoration: none;
            color: var(--ff-primary);
        }
        .ff-form-group.disabled .quota-upgrade-link:hover {
            text-decoration: underline;
        }
        /* --- END OF NEW BLOCK --- */


/* === FocusFlow: Live Preview container/page overrides === */
#ff-invoice-modal-preview-container {
  overflow: auto !important; /* allow native scroll; pan handled by scroll */
}

.preview-page-content {
  position: relative;         /* allow natural flow */
  height: auto !important;    /* grow to fit content */
  min-height: 1123px;         /* A4 min-height at 96dpi; adjust as needed */
  overflow: visible !important;
}


/* Align Payment History items flush-left with surrounding content */
.payment-history-list {
  padding-left: 0 !important;
}
.payment-history-list li > span:first-child {
  display: inline-block;
  min-width: 0; /* allow wrap if needed */
}

/* Line Items: ensure wrapper sits directly below header and arrow aligns right */
.line-items-summary-section .description-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ff-spacing-sm);
  margin-bottom: var(--ff-spacing-xs);
}
.line-items-summary-section .description-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  color: var(--ff-text-secondary);
}
.line-items-summary-section .description-toggle:hover {
  color: var(--ff-primary);
}
/* Ensure bullets are easily visible */
.line-item-list-summary {
  list-style: disc outside;
  margin: 0 0 0 1.25rem;
}
.line-items-summary-section .line-items-box {
  margin-top: 0; /* sits snug under header */
}

.smart-card-expanded-content .line-items-summary-section .description-header{
  display:flex;
  align-items:center;
  justify-content:space-between; /* chevron to the right */
  gap: var(--ff-spacing-sm);
}

.smart-card-expanded-content .line-items-summary-section .line-items-box{
  width:100%;
}

.smart-card-expanded-content .line-item-list-summary{
  list-style: disc outside;
  margin: 0 0 0 1.25rem;
  padding: 0;
}
.smart-card-expanded-content .line-item-list-summary li{
  margin: .25rem 0;
  line-height: 1.35;
}



/* Readable bullets */
.smart-card-expanded-content .line-item-list-summary{
  list-style: disc outside;
  margin: 0 0 0 1.25rem;
  padding: 0;
}
.smart-card-expanded-content .line-item-list-summary li{
  margin: .25rem 0;
  line-height: 1.35;
}


/* --- START: Consolidated Card & Description Toggling (FINAL FIX) --- */

/* 1. Main Card Expansion Animation */
/* This is the default collapsed state */
.smart-card-expanded-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s ease-in-out, padding-top 0.4s ease-in-out, margin-top 0.4s ease-in-out;
    padding-top: 0;
    margin-top: 0;
    border-top: 1px dashed transparent;
}

/* This is the state when the card has the .expanded class */
.smart-card.expanded .smart-card-expanded-content {
    max-height: 2000px; /* A large value to not restrict content */
    opacity: 1;
    padding-top: var(--ff-spacing-md);
    margin-top: var(--ff-spacing-md);
    border-top-color: color-mix(in srgb, var(--ff-border-color) 60%, transparent);
}

/* 2. Nested Description/Content Toggling (for Notes, Line Items, etc.) */
.smart-card-expanded-content .description-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.smart-card-expanded-content .description-toggle {
    cursor: pointer;
    padding: var(--ff-spacing-xs);
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.smart-card-expanded-content .description-toggle:hover {
    background-color: var(--group-header-hover-bg);
}
.smart-card-expanded-content .description-content {
    max-height: 4.5em; /* Default collapsed height for 2-3 lines */
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    font-size: 0.85rem;
    color: var(--ff-text-secondary);
    border-radius: var(--ff-border-radius-sm);
    margin-top: var(--ff-spacing-xs);
}
.smart-card-expanded-content .description-content.expanded {
    max-height: 200px; /* Expanded height */
    overflow-y: auto;
}

/* 3. Specific Styling for Line Items Box within the card */
.smart-card-expanded-content .line-items-summary-section .line-items-box {
    width: 100%;
}
.smart-card-expanded-content .line-items-summary-section .description-content {
    padding: var(--ff-spacing-sm);
    border: 1px solid transparent;
}
.smart-card-expanded-content .line-items-summary-section .description-content.expanded {
    border-color: var(--ff-border-color);
    background-color: color-mix(in srgb, var(--ff-bg-main) 50%, var(--ff-bg-card) 50%);
}
.smart-card-expanded-content .line-item-list-summary {
    list-style: disc outside;
    margin: 0 0 0 1.25rem;
    padding: 0;
}
.smart-card-expanded-content .line-item-list-summary li {
    margin: .25rem 0;
    line-height: 1.35;
}

/* --- END: Consolidated Card & Description Toggling --- */

/* --- START: CONSOLIDATED TO-DO AND IMPORT MODAL STYLES --- */

/* To-Do List on Project Card */
ul.todo-list-summary {
    list-style: none;
    padding-left: 1.2em;
    margin: var(--ff-spacing-xs) 0;
}
.todo-summary-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ff-spacing-sm);
    cursor: pointer;
}
.todo-summary-item.completed .todo-summary-text {
    text-decoration: line-through;
    color: var(--ff-text-secondary);
}
.todo-summary-checkbox {
    flex-shrink: 0;
    cursor: pointer;
    margin-top: 0.35em;
}

/* Manage To-Dos Modal - Layout & Scrolling Fix */
#ff-manage-todos-modal .ff-modal-content {
    display: flex;
    flex-direction: column;
    max-height: 85vh; /* Don't let the modal be taller than 85% of the screen */
}
#ff-manage-todos-modal .ff-modal-header,
#ff-manage-todos-modal .ff-modal-actions {
    flex-shrink: 0; /* Prevent header/footer from shrinking */
}
#ff-manage-todos-modal .ff-modal-body {
    flex-grow: 1;       /* Allow the body to take up all available vertical space */
    overflow-y: auto;   /* Add a scrollbar ONLY when the content is too tall */
    min-height: 0;      /* A necessary fix for flexbox scrolling behavior */
}
.ff-add-todo-form {
    display: flex;
    gap: var(--ff-spacing-sm);
    margin-bottom: var(--ff-spacing-md);
}
.ff-add-todo-form input {
    flex-grow: 1;
}

/* To-Do Item Card Styling (Inside Modal) */
.todo-card {
    border: 1px solid var(--ff-border-color);
    border-radius: var(--ff-border-radius-md);
    margin-bottom: var(--ff-spacing-sm);
    background-color: var(--ff-bg-main); /* Use main bg for slight contrast */
}
.todo-card.completed {
    background-color: transparent;
    opacity: 0.7;
}
.todo-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ff-spacing-sm);
    border-bottom: 1px solid var(--ff-border-color);
}
.todo-card-header-left {
    display: flex;
    align-items: flex-start;
    gap: var(--ff-spacing-sm);
    font-weight: 600;
    min-width: 0; /* Flexbox fix for long text */
}
.todo-title-container {
    flex-grow: 1;
    min-width: 0;
}
.todo-title {
    word-break: break-word; /* Allow long titles to wrap */
}
.todo-card.completed .todo-title {
    text-decoration: line-through;
}
.todo-title-edit-input {
    width: 100%;
    font-weight: 600; /* Match the span's weight */
    font-size: 1em; /* Match the span's size */
    font-family: inherit; /* Use the same font */
    padding: 2px 4px; /* A little padding */
    margin: -2px -4px; /* Offset padding to maintain alignment */
    border: 1px solid var(--ff-primary);
    border-radius: var(--ff-border-radius-sm);
}
.todo-checkbox {
    font-size: 1.2em;
    cursor: pointer;
    color: var(--ff-text-secondary);
    margin-top: 0.1em;
}
.todo-card.completed .todo-checkbox {
    color: var(--ff-primary);
}
.todo-card-body {
    padding: var(--ff-spacing-sm);
}
.todo-notes-area {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--ff-border-color);
    background-color: var(--ff-bg-card); /* Use card bg for textarea */
    resize: vertical;
    font-family: inherit;
    font-size: 0.95em;
    color: var(--ff-text-primary);
    padding: var(--ff-spacing-xs);
    border-radius: var(--ff-border-radius-sm);
}
.todo-notes-area:focus {
    outline: 1px solid var(--ff-primary);
    border-color: var(--ff-primary);
}
.todo-actions {
    display: flex;
    align-items: center;
    gap: var(--ff-spacing-xs);
}
.todo-actions .ff-icon-button {
    font-size: 0.9rem;
    padding: var(--ff-spacing-xs);
}
.todo-empty-message {
    text-align: center;
    color: var(--ff-text-placeholder);
    padding: var(--ff-spacing-md);
}

/* Context Menu for Importing To-Dos */
.ff-context-menu {
    position: fixed;
    z-index: 1002; /* Highest of all */
    background-color: var(--ff-bg-card);
    border: 1px solid var(--ff-border-color);
    border-radius: var(--ff-border-radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 250px;
    max-height: 200px;
    overflow-y: auto;
}
.ff-context-menu ul {
    list-style: none;
    padding: var(--ff-spacing-xs);
    margin: 0;
}
.ff-context-menu li {
    padding: var(--ff-spacing-sm);
    cursor: pointer;
    border-radius: var(--ff-border-radius-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ff-context-menu li:hover {
    background-color: var(--group-header-hover-bg);
}
.ff-context-menu span {
    padding: var(--ff-spacing-sm);
    display: block;
    color: var(--ff-text-secondary);
    font-style: italic;
}

/* Import To-Dos Modal Styling */
#ff-importable-todos-list .todo-item {
    display: flex;
    align-items: center;
    gap: var(--ff-spacing-sm);
    padding: var(--ff-spacing-sm);
    border-radius: var(--ff-border-radius-sm);
}
#ff-importable-todos-list .todo-item:hover {
    background-color: var(--group-header-hover-bg);
}
#ff-importable-todos-list .import-todo-checkbox {
    flex-shrink: 0;
    transform: scale(1.1);
}
#ff-importable-todos-list .todo-text {
    font-weight: 500;
    cursor: pointer;
}
#ff-importable-todos-list .import-todo-note {
    display: block;
    font-size: 0.85em;
    color: var(--ff-text-secondary);
    font-style: italic;
    margin-left: 2px;
}
/* --- END: CONSOLIDATED TO-DO AND IMPORT MODAL STYLES --- */

/* --- START: TARGETED FIX FOR MANAGE TO-DOS MODAL --- */

/* 
  This rule targets the .active state of the Manage To-Dos modal's backdrop.
  It overrides the problematic `align-items: flex-start` from the general modal style.
*/
#ff-manage-todos-modal.ff-modal.active {
    align-items: center; /* Force vertical centering ONLY for this modal */
    padding-top: 0;      /* Remove the top padding to allow true centering */
}

/* 
  This rule ensures the content card inside the modal doesn't get too tall
  and that its internal sections are laid out correctly for scrolling.
  It's specifically for MOBILE screens where the bottom nav is present.
*/
@media (max-width: 767px) {
    #ff-manage-todos-modal .ff-modal-content {
        max-height: calc(100vh - 140px); /* Screen height minus header (60px), footer (60px), and margins (20px) */
    }
}

/* 
  This was already present in your consolidated block and is correct.
  It ensures the middle part (the list of tasks) becomes scrollable.
*/
#ff-manage-todos-modal .ff-modal-content {
    display: flex;
    flex-direction: column;
}
#ff-manage-todos-modal .ff-modal-body {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
}
#ff-manage-todos-modal .ff-modal-header,
#ff-manage-todos-modal .ff-modal-actions {
    flex-shrink: 0;
}

/* --- END: TARGETED FIX FOR MANAGE TO-DOS MODAL --- */

/* --- START: MANAGE PAYMENTS MODAL STYLES --- */

#ff-manage-payments-modal .ff-modal-body {
    padding-top: var(--ff-spacing-sm);
}

#ff-payment-list-container {
    display: flex;
    flex-direction: column;
    gap: var(--ff-spacing-sm);
    max-height: 250px; /* Give the list a max height before it scrolls */
    overflow-y: auto;
    padding: var(--ff-spacing-xs);
    margin: 0 calc(-1 * var(--ff-spacing-xs));
}

.payment-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--ff-bg-main);
    padding: var(--ff-spacing-sm) var(--ff-spacing-md);
    border-radius: var(--ff-border-radius-md);
    border: 1px solid var(--ff-border-color);
}

.payment-card-details {
    display: flex;
    align-items: baseline;
    gap: var(--ff-spacing-sm);
    flex-wrap: wrap;
}

.payment-amount {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ff-success);
}

.payment-date {
    font-size: 0.9rem;
    color: var(--ff-text-secondary);
}

.payment-note-display {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--ff-text-secondary);
    margin-top: var(--ff-spacing-xs);
    display: block;
    width: 100%;
}

.payment-card-actions {
    display: flex;
    gap: var(--ff-spacing-xs);
    flex-shrink: 0;
    margin-left: var(--ff-spacing-sm);
}

.payment-card-actions .ff-icon-button {
    font-size: 1rem;
    padding: var(--ff-spacing-xs);
}

#ff-add-payment-form h4 {
    font-size: 1.1rem;
    color: var(--ff-primary);
    margin-bottom: var(--ff-spacing-md);
    display: flex;
    align-items: center;
    gap: var(--ff-spacing-sm);
}

.ff-payment-form-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--ff-spacing-md);
}

.ff-payment-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--ff-spacing-sm);
    margin-top: var(--ff-spacing-xs);
}

@media (max-width: 767px) {
    .ff-payment-form-grid {
        grid-template-columns: 1fr;
    }
}

#ff-manage-payment-note {
    min-height: 80px; /* Standard minimum height for textareas in the app */
    resize: vertical;   /* Allow the user to resize it vertically */
}
/* --- END: MANAGE PAYMENTS MODAL STYLES --- */

/* --- Landing Page Hero Image --- */
.ff-hero-image-container {
    text-align: center;
    padding: 0 var(--ff-spacing-md);
    margin-top: calc(-1 * var(--ff-spacing-lg)); /* Pulls the image up slightly */
    margin-bottom: var(--ff-spacing-xl);
}
.ff-hero-image-container img {
    max-width: 100%;
    width: 900px; /* Max width for large screens */
    border-radius: var(--ff-border-radius-lg);
    border: 1px solid var(--ff-border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* --- Tour Page Embedded Screenshots --- */
.tour-screenshot {
    max-width: 100%;
    border-radius: var(--ff-border-radius-md);
    border: 1px solid var(--ff-border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-top: var(--ff-spacing-md);
}

/* ==========================================================================
   Blog & Static Page Styles
   ========================================================================== */

/* --- 1. Main Blog List Page (`/blog/index.html`) --- */

.blog-post-list {
    display: flex;
    flex-direction: column;
    gap: var(--ff-spacing-lg);
}

.blog-post-summary-card {
    background-color: var(--ff-bg-card);
    border-radius: var(--ff-border-radius-lg);
    padding: var(--ff-spacing-lg);
    box-shadow: var(--ff-shadow);
    border: 1px solid var(--ff-border-color);
    transition: box-shadow 0.3s ease;
}

.blog-post-summary-card:hover {
    box-shadow: var(--ff-shadow-hover);
}

.blog-post-summary-card h2 {
    margin-top: 0;
    margin-bottom: var(--ff-spacing-sm);
}

.blog-post-summary-card h2 a {
    text-decoration: none;
    color: var(--ff-primary);
}

.blog-post-summary-card h2 a:hover {
    text-decoration: underline;
}

.blog-post-summary-card .post-excerpt {
    color: var(--ff-text-secondary);
    margin-bottom: var(--ff-spacing-md);
}


/* --- 2. Individual Blog Post & Tour Page Content --- */

/* This styles all text content within the main container of static pages */
.ff-tour-page-container h1,
.ff-tour-page-container h2,
.ff-tour-page-container h3 {
    color: var(--ff-primary);
}

.ff-tour-page-container a:not(.ff-button) {
    color: var(--ff-primary);
    text-decoration: none;
    font-weight: 600;
}

.ff-tour-page-container a:not(.ff-button):hover {
    text-decoration: underline;
}

/* Specific styling for the final call-to-action block in articles */
.blog-post-cta {
    margin-top: var(--ff-spacing-lg);
    padding: var(--ff-spacing-md);
    text-align: center;
    background-color: color-mix(in srgb, var(--ff-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ff-primary) 20%, transparent);
    border-radius: var(--ff-border-radius-md);
}

/* --- 3. Content Highlighting Styles (for "Mistake" vs "Fix") --- */

.highlight-problem,
.highlight-solution {
    padding: 2px 6px;
    border-radius: var(--ff-border-radius-sm);
    font-weight: 600;
}

.highlight-problem {
    background-color: color-mix(in srgb, var(--ff-danger) 15%, transparent);
    color: color-mix(in srgb, var(--ff-danger) 80%, black);
}

.highlight-solution {
    background-color: color-mix(in srgb, var(--ff-success) 20%, transparent);
    color: color-mix(in srgb, var(--ff-success) 70%, black);
}

/* Dark theme adjustments for highlights */
html[data-theme="focusflow-dark"] .highlight-problem,
html[data-theme="solarized-dark"] .highlight-problem {
    background-color: color-mix(in srgb, var(--ff-danger) 30%, var(--ff-bg-card) 40%);
    color: var(--ff-danger);
}

html[data-theme="focusflow-dark"] .highlight-solution,
html[data-theme="solarized-dark"] .highlight-solution {
    background-color: color-mix(in srgb, var(--ff-success) 30%, var(--ff-bg-card) 40%);
    color: var(--ff-success);
}

/* --- 4. Responsive Logo (Ensure this is not duplicated) --- */
/* This is not blog-specific but is critical for the marketing pages. */
/* If this block already exists elsewhere, you can remove it from here. */

.ff-logo-icon-only { display: none; }
.ff-logo-full { display: block; }

@media (max-width: 767px) {
    .ff-logo-full { display: none; }
    .ff-logo-icon-only { display: block; height: 28px; }
}

/* --- START: BLOG FILTER STYLES --- */
#blog-tag-filters .tag-filter-button {
    background-color: var(--ff-bg-main);
    border: 1px solid var(--ff-border-color);
    color: var(--ff-text-secondary);
    padding: var(--ff-spacing-xs) var(--ff-spacing-md);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
#blog-tag-filters .tag-filter-button:hover {
    border-color: var(--ff-primary);
    color: var(--ff-primary);
}
#blog-tag-filters .tag-filter-button.active {
    background-color: var(--ff-primary);
    color: var(--ff-text-light);
    border-color: var(--ff-primary);
}
/* --- END: BLOG FILTER STYLES --- */