/* =================================================================== */

/* JOWENI M-PESA ANALYZER - REWRITTEN CSS V2

/* =================================================================== */

/*

    PHASE 2 RECONSTRUCTION:

    - Fixes all bugs identified in Phase 1 analysis.

    - Uses modern CSS (Custom Properties, Grid, Flexbox).

    - Enhanced styling for a more polished, professional feel.

    - Improved responsiveness and accessibility (contrast, focus states).

    - Organized, commented, and optimized for performance.

    - The core layout and element arrangement remain unchanged.

*/

/* =================================================================== */





/* --------------------------------------------------- */

/* 1.0  ROOT VARIABLES & GLOBAL STYLES

/* --------------------------------------------------- */

:root {

    /* Color Palette */

    --primary-color: #43B02A;

    --primary-color-dark: #368a21;

    --primary-color-light: #e9f7e6;

    --primary-color-text: #ffffff;



    --income-color: #27ae60;

    --expense-color: #e74c3c;

    --fee-color: #f39c12;

    --net-positive-color: #2980b9;

    --net-negative-color: #c0392b;



    /* UI Colors (Light Theme - Default) */

    --bg-color: #F4F7F6;

    --card-bg-color: #FFFFFF;

    --text-color: #34495e;

    --text-color-light: #7f8c8d;

    --border-color: #eef2f7;

    --input-bg-color: #fdfdfe;

    --input-border-color: #dde6ed;

    --shadow-color: rgba(140, 152, 164, 0.1);

    --focus-ring-color: rgba(67, 176, 42, 0.5);



    /* Heatmap Colors */

    --heatmap-level-0: #ebedf0;

    --heatmap-level-1: #9be9a8;

    --heatmap-level-2: #40c463;

    --heatmap-level-3: #30a14e;

    --heatmap-level-4: #216e39;



    /* Transitions & Radii */

    --transition-speed: 0.3s;

    --border-radius-sm: 6px;

    --border-radius-md: 8px;

    --border-radius-lg: 12px;

}

[data-theme="dark"] {
    --bg-color: #1a2533;
    --card-bg-color: #243447;
    --text-color: #e1e8f0;
    --text-color-light: #8899a6;
    --border-color: #38444d;
    --input-bg-color: #202d3a;
    --input-border-color: #38444d;
    --shadow-color: rgba(0, 0, 0, 0.2);
    --heatmap-level-0: #2d3748;
}



/* Global Styles */

body {
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color);
    /* Prevents horizontal scroll */
}



.dashboard-main {

    background-color: var(--bg-color);

    color: var(--text-color);

    padding: 2rem 0;
    flex: 1;

    font-family: 'Inter', sans-serif;

    transition: background-color var(--transition-speed), color var(--transition-speed);

}



.container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 20px;

}



.hidden {

    display: none !important;

}

.site-footer {
    margin-top: auto;
}



/* Accessibility: Focus visible state for keyboard users */

:focus-visible {

    outline: 2px solid var(--primary-color);

    outline-offset: 2px;

    box-shadow: 0 0 0 4px var(--focus-ring-color);

}



input:focus-visible,

select:focus-visible,

textarea:focus-visible {

    border-color: var(--primary-color) !important;

}





/* --------------------------------------------------- */

/* 2.0  UPLOAD SECTION

/* --------------------------------------------------- */

#upload-section .section-header {

    text-align: center;

    margin-bottom: 2rem;

}



#upload-section .seo-h1 {

    font-size: clamp(2rem, 5vw, 2.5rem);

    /* Responsive font size */

    font-weight: 700;

    margin-bottom: 0.5rem;

    color: var(--primary-color);

}



#upload-section .tagline {

    font-size: 1.1rem;

    color: var(--text-color-light);

}



.privacy-guarantee {

    background-color: var(--primary-color-light);

    border-left: 5px solid var(--primary-color);

    padding: 1rem 1.5rem;

    margin: 2rem auto;

    max-width: 800px;

    border-radius: var(--border-radius-md);

    color: #368a21;

    /* Specific color for light bg */

    transition: background-color var(--transition-speed), color var(--transition-speed);

}
[data-theme="dark"] .privacy-guarantee {
    background-color: rgba(67, 176, 42, 0.1);
    color: #a7dcb5;
}



.upload-box {

    background-color: var(--card-bg-color);

    border-radius: var(--border-radius-lg);

    padding: 2.5rem;

    max-width: 800px;

    margin: 0 auto;

    box-shadow: 0 8px 30px var(--shadow-color);

    border: 1px solid var(--border-color);

    text-align: center;

    transition: background-color var(--transition-speed), border-color var(--transition-speed);

}

.upload-box::before {
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(90deg, var(--primary-color), #7ad64f);
    border-radius: 999px;
}



.upload-box h2 {

    font-size: 1.8rem;

    margin-bottom: 0.5rem;

}



.upload-box p {

    color: var(--text-color-light);

    margin-bottom: 2rem;

}



.form-group {

    text-align: left;

    margin-bottom: 1.5rem;

}



.form-group label {

    display: block;

    font-weight: 500;

    margin-bottom: 0.5rem;

}



.form-group input[type="password"] {

    width: 100%;

    padding: 12px 15px;

    border-radius: var(--border-radius-md);

    border: 1px solid var(--input-border-color);

    background-color: var(--input-bg-color);

    color: var(--text-color);

    font-size: 1rem;

    transition: all var(--transition-speed);

}



.form-group small {

    display: block;

    margin-top: 0.5rem;

    color: var(--text-color-light);

}



.upload-label {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 3rem;

    border: 2px dashed var(--input-border-color);

    border-radius: var(--border-radius-lg);

    cursor: pointer;

    background: linear-gradient(180deg, rgba(67, 176, 42, 0.06), rgba(67, 176, 42, 0));
    color: var(--text-color);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);

}



.upload-label:hover,

.upload-label.dragover {

    background-color: rgba(67, 176, 42, 0.08);

    border-color: var(--primary-color);

}



.upload-label i {

    font-size: 3rem;

    color: var(--primary-color);

    margin-bottom: 1rem;

    transition: transform var(--transition-speed);

}



.upload-label:hover i {

    transform: scale(1.1) translateY(-5px);

}



.upload-label span {

    font-weight: 600;

    font-size: 1rem;
}



.file-list-display {

    margin-top: 1rem;

    text-align: left;

    color: var(--text-color-light);

    font-style: italic;

}





/* --------------------------------------------------- */

/* 3.0 LOADING STATE

/* --------------------------------------------------- */

#loading-state {

    text-align: center;

    padding: 5rem 0;

}



.spinner {

    width: 56px;

    height: 56px;

    border: 6px solid var(--primary-color-light);

    border-top-color: var(--primary-color);

    border-radius: 50%;

    animation: spin 1s linear infinite;

    margin: 0 auto 1.5rem auto;

}



@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}



#loading-text {

    font-size: 1.2rem;

    font-weight: 500;

}





/* --------------------------------------------------- */

/* 4.0 DASHBOARD - GENERAL & HEADER

/* --------------------------------------------------- */

.dashboard-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 1rem;

    margin-bottom: 2rem;

}



.dashboard-header h2 {

    font-size: 2rem;

    margin: 0;

}



.dashboard-header p {

    color: var(--text-color-light);

    margin: 0;

    font-size: 1rem;

}



.dashboard-actions {

    display: flex;

    gap: 0.75rem;

    flex-wrap: wrap;

    /* Allow wrapping on smaller screens */

}



.action-btn {

    padding: 10px 16px;

    border: 1px solid var(--input-border-color);

    background-color: var(--card-bg-color);

    color: var(--text-color);

    border-radius: var(--border-radius-md);

    cursor: pointer;

    font-weight: 500;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: all var(--transition-speed) ease;

}



.action-btn:hover {

    background-color: var(--bg-color);

    border-color: var(--text-color-light);

    transform: translateY(-2px);

    box-shadow: 0 4px 10px var(--shadow-color);

}



.action-btn.primary {

    background-color: var(--primary-color);

    color: var(--primary-color-text);

    border-color: var(--primary-color);

}



.action-btn.primary:hover {

    background-color: var(--primary-color-dark);

    border-color: var(--primary-color-dark);

}



.dropdown {

    position: relative;

    display: inline-block;

}



.dropdown-content {

    display: none;

    position: absolute;

    right: 0;

    top: calc(100% + 5px);

    background-color: var(--card-bg-color);

    min-width: 180px;

    box-shadow: 0 8px 24px 0 var(--shadow-color);

    z-index: 10;

    border-radius: var(--border-radius-md);

    overflow: hidden;

    border: 1px solid var(--border-color);

    animation: fadeIn 0.2s ease-out;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.dropdown:hover .dropdown-content {

    display: block;

}



.dropdown-content a {

    color: var(--text-color);

    padding: 12px 16px;

    text-decoration: none;

    display: flex;

    /* Use flex for alignment */

    align-items: center;

    font-size: 0.9rem;

    transition: background-color var(--transition-speed);

}



.dropdown-content a i {

    margin-right: 10px;

    width: 20px;

    /* Ensure consistent icon spacing */

    text-align: center;

    color: var(--text-color-light);

}



.dropdown-content a:hover {

    background-color: var(--bg-color);

    color: var(--primary-color);

}



.dropdown-content a:hover i {

    color: var(--primary-color);

}





/* --------------------------------------------------- */

/* 5.0 SUMMARY CARDS (KPIs)

/* --------------------------------------------------- */

.summary-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 1.5rem;

    margin-bottom: 2rem;

}



.summary-card {

    background: var(--card-bg-color);

    padding: 1.5rem;

    border-radius: var(--border-radius-lg);

    box-shadow: 0 4px 15px var(--shadow-color);

    border: 1px solid var(--border-color);

    transition: all var(--transition-speed) ease;

}



.summary-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 25px var(--shadow-color);

}



.summary-card h4 {

    margin: 0 0 0.5rem 0;

    font-size: 1rem;

    color: var(--text-color-light);

    font-weight: 500;

}



.summary-card p {

    margin: 0;

    font-size: 1.75rem;

    font-weight: 700;

    word-break: break-all;

    /* Fix for overflow on mobile */

    transition: filter var(--transition-speed);

    /* For privacy mode */

}



.summary-card.income p {

    color: var(--income-color);

}



.summary-card.expense p {

    color: var(--expense-color);

}



.summary-card.fees p {

    color: var(--fee-color);

}



.summary-card.netflow.positive p {

    color: var(--net-positive-color);

}



.summary-card.netflow.negative p {

    color: var(--net-negative-color);

}





/* --------------------------------------------------- */

/* 6.0 DASHBOARD GRID & WIDGETS

/* --------------------------------------------------- */

.dashboard-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    grid-auto-flow: dense;

    gap: 1.5rem;

}



.widget-container {

    display: flex;

    flex-direction: column;

    min-width: 0;

    /* Fix for flexbox overflow */

}



.widget-full-width {

    grid-column: 1 / -1;

}



.widget-title {

    font-size: 1.25rem;

    margin: 0 0 1rem 0;

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.widget-title i {

    color: var(--text-color-light);

}



.db-card {

    background: var(--card-bg-color);

    padding: 1.5rem;

    border-radius: var(--border-radius-lg);

    box-shadow: 0 4px 15px var(--shadow-color);

    border: 1px solid var(--border-color);

    flex-grow: 1;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    /* Prevents children from breaking out */

}



.chart-wrapper {

    position: relative;

    min-height: 350px;

    /* Use min-height for better flex behavior */

    flex-grow: 1;

}



/* --------------------------------------------------- */

/* 7.0 SPECIFIC WIDGETS

/* --------------------------------------------------- */



/* 7.1 - Heatmap */

#heatmap-calendar {

    padding: 2rem;

}



.heatmap-content-wrapper {

    display: flex;

    flex-direction: column;

    width: 100%;

}



.heatmap-wrapper {

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}



.heatmap-graph {

    display: block;

    overflow-x: auto;

    padding-bottom: 1rem;

}



.heatmap-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1rem;

}



.heatmap-title {

    font-size: 1.1rem;

    margin: 0;

}



.heatmap-body {

    display: flex;

    gap: 8px;

}



ul.heatmap-months-labels,

ul.heatmap-days-labels,

.heatmap-year-nav {

    list-style: none;

    padding: 0;

    margin: 0;

    color: var(--text-color-light);

    font-size: 0.75rem;

}



ul.heatmap-months-labels {

    display: flex;

    justify-content: space-between;

    padding-left: 32px;

    padding-right: 15px;

}



/* --- THIS IS THE CORRECTED SECTION FOR THE DAYS --- */

ul.heatmap-days-labels {

    /* Use Grid layout to match the main heatmap grid's rows */

    display: grid;

    grid-template-rows: repeat(7, 1fr); /* Creates 7 rows of equal height */

    gap: 4px; /* Matches the gap of the main grid */

    flex-shrink: 0;

    width: 24px;

}



ul.heatmap-days-labels li {

    /* This now centers the text within each grid row */

    display: flex;

    align-items: center;

}



.heatmap-grid {

    display: grid;

    grid-template-columns: repeat(53, 1fr);

    grid-template-rows: repeat(7, 1fr);

    grid-auto-flow: column;

    gap: 4px;

    flex: 1;

    min-width: 0;

}



.heatmap-day {

    aspect-ratio: 1 / 1;

    min-width: 12px;

    background-color: var(--heatmap-level-0);

    border-radius: 3px;

    transition: transform 0.2s, box-shadow 0.2s;

    cursor: pointer;

}



.heatmap-day:hover {

    transform: scale(1.2);

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

}



.heatmap-day.day-1 {

    background-color: var(--heatmap-level-1);

}



.heatmap-day.day-2 {

    background-color: var(--heatmap-level-2);

}



.heatmap-day.day-3 {

    background-color: var(--heatmap-level-3);

}



.heatmap-day.day-4 {

    background-color: var(--heatmap-level-4);

}



.heatmap-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 1rem;

    font-size: 0.8rem;

    color: var(--text-color-light);

}



.heatmap-legend {

    display: flex;

    align-items: center;

    gap: 4px;

}



.heatmap-year-nav {

    display: flex;

    gap: 0.5rem;

}



.heatmap-year-btn {

    background: none;

    border: none;

    color: var(--text-color-light);

    cursor: pointer;

    padding: 0.25rem 0.5rem;

    border-radius: var(--border-radius-sm);

}



.heatmap-year-btn.active {

    font-weight: bold;

    color: var(--primary-color);

    background-color: var(--primary-color-light);

}



/* 7.2 - Top Lists, Velocity, Balance */

.list-wrapper {

    overflow-y: auto;

    max-height: 300px;

    flex-grow: 1;

}



.top-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.top-list li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

    padding: 0.75rem 0.25rem;

    border-bottom: 1px solid var(--border-color);

}



.top-list li:last-child {

    border-bottom: none;

}



.top-list li span:first-child {

    white-space: normal;

    word-break: break-word;

    flex-grow: 1;

}



.top-list .amount-col {

    font-weight: 600;

    white-space: nowrap;

    flex-shrink: 0;

    transition: filter var(--transition-speed);

}



.placeholder-text {

    color: var(--text-color-light);

    text-align: center;

    padding: 2rem 0;

}



.gauge-wrapper {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.gauge-wrapper canvas {

    max-height: 200px !important;

}



.gauge-label {

    text-align: center;

    color: var(--text-color-light);

    margin-top: 1rem;
    font-size: 0.9rem;

}



.comparison-wrapper {

    display: flex;

    flex-direction: column;

    justify-content: space-around;

    height: 100%;

    gap: 1.5rem;

}



.balance-compare {
    text-align: center;
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(67, 176, 42, 0.08), rgba(67, 176, 42, 0));
}



.balance-compare h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-color-light);
    font-weight: 500;
    font-size: 0.95rem;
}



.balance-compare p {

    margin: 0;

    font-size: 1.75rem;

    font-weight: 700;

    transition: filter var(--transition-speed);

}



/* 7.2 - Top Lists, Velocity, Balance */

.list-wrapper {

    overflow-y: auto;

    max-height: 300px;

    flex-grow: 1;

}



.top-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.top-list li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

    padding: 0.75rem 0.25rem;

    border-bottom: 1px solid var(--border-color);

}



.top-list li:last-child {

    border-bottom: none;

}



.top-list li span:first-child {

    white-space: normal;

    word-break: break-word;

    flex-grow: 1;

}



.top-list .amount-col {

    font-weight: 600;

    white-space: nowrap;

    flex-shrink: 0;

    transition: filter var(--transition-speed);

}



.placeholder-text {

    color: var(--text-color-light);

    text-align: center;

    padding: 2rem 0;

}



.gauge-wrapper {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.gauge-wrapper canvas {

    max-height: 200px !important;

}



.gauge-label {

    text-align: center;

    color: var(--text-color-light);

    margin-top: 1rem;

}



.comparison-wrapper {

    display: flex;

    flex-direction: column;

    justify-content: space-around;

    height: 100%;

    gap: 1.5rem;

}



.balance-compare {
    text-align: center;
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(67, 176, 42, 0.08), rgba(67, 176, 42, 0));
}



.balance-compare h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-color-light);
    font-weight: 500;
    font-size: 0.95rem;
}



.balance-compare p {

    margin: 0;

    font-size: 1.75rem;

    font-weight: 700;

    transition: filter var(--transition-speed);

}



/* --------------------------------------------------- */

/* 8.0 TRANSACTION HISTORY TABLE

/* --------------------------------------------------- */

.filters-toolbar {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    padding-bottom: 1.5rem;

    margin-bottom: 1.5rem;

    border-bottom: 1px solid var(--border-color);

}



.search-wrapper {

    position: relative;

    flex-grow: 1;

}



.search-wrapper i {

    position: absolute;

    left: 15px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--text-color-light);

}



#search-input,

#category-filter,
#year-filter,

#date-start-filter,

#date-end-filter {

    padding: 10px 16px;

    border: 1px solid var(--input-border-color);

    background-color: var(--input-bg-color);

    color: var(--text-color);

    border-radius: var(--border-radius-md);

    font-size: 0.9rem;

    height: 42px;

    transition: all var(--transition-speed);

}



#search-input {

    padding-left: 40px;

    width: 100%;

}



#category-filter {

    min-width: 180px;

}



#date-start-filter,

#date-end-filter {

    min-width: 150px;

}



.table-wrapper {

    overflow-x: auto;

}



#transactions-table {

    width: 100%;

    border-collapse: collapse;
    border-radius: var(--border-radius-md);
    overflow: hidden;

}



#transactions-table th,

#transactions-table td {

    padding: 12px 15px;

    text-align: left;

    border-bottom: 1px solid var(--border-color);

}



#transactions-table th {

    font-weight: 600;

    font-size: 0.9rem;

    color: var(--text-color-light);
    background: rgba(67, 176, 42, 0.08);

}

#transactions-table tbody tr:nth-child(even) {
    background: rgba(67, 176, 42, 0.04);
}

#transactions-table tbody tr:hover {
    background: rgba(67, 176, 42, 0.12);
}



#transactions-table td:nth-child(2) {

    max-width: 350px;

    word-wrap: break-word;

}



.category-badge {

    padding: 4px 10px;

    border-radius: 15px;

    font-size: 0.8rem;

    font-weight: 500;

    white-space: nowrap;

    color: #fff;

}



.category-badge.income {

    background-color: var(--income-color);

}



.category-badge.expense {

    background-color: var(--expense-color);

}



.tx-note {

    display: block;

    font-size: 0.8rem;

    color: var(--text-color-light);

    font-style: italic;

    margin-top: 4px;

}



.amount-col {

    font-weight: 600;

    text-align: right !important;

    transition: filter var(--transition-speed);

}



.amount-col.income {

    color: var(--income-color);

}



.amount-col.expense {

    color: var(--expense-color);

}



.edit-btn {

    background: none;

    border: none;

    color: var(--text-color-light);

    cursor: pointer;

    transition: color var(--transition-speed);

    padding: 4px;

}



.edit-btn:hover {

    color: var(--primary-color);

}



.table-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 1rem;

    color: var(--text-color-light);

    font-size: 0.9rem;

}



.pagination-controls {

    display: flex;

    gap: 0.5rem;

}



.pagination-controls button {

    background: var(--bg-color);

    border: 1px solid var(--border-color);

    width: 30px;

    height: 30px;

    border-radius: var(--border-radius-sm);

    cursor: pointer;

}



.pagination-controls button:disabled {

    cursor: not-allowed;

    opacity: 0.5;

}





/* --------------------------------------------------- */

/* 9.0 MODALS AND TOASTS

/* --------------------------------------------------- */

.modal-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.6);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 1000;

}



.modal-content {

    background: var(--card-bg-color);

    padding: 2rem;

    border-radius: var(--border-radius-lg);

    width: 90%;

    max-width: 500px;

    position: relative;

}



.close-modal {

    position: absolute;

    top: 10px;

    right: 15px;

    background: none;

    border: none;

    font-size: 1.8rem;

    cursor: pointer;

    color: var(--text-color-light);

}



.modal-content h3 {

    margin-top: 0;

}



.modal-content select,

.modal-content input,

.modal-content textarea {

    width: 100%;

    padding: 12px 15px;

    border-radius: var(--border-radius-md);

    border: 1px solid var(--input-border-color);

    background-color: var(--input-bg-color);

    color: var(--text-color);

    font-size: 1rem;

}



#toast-container {

    position: fixed;

    top: 20px;

    right: 20px;

    z-index: 2000;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.toast {

    padding: 15px 20px;

    border-radius: var(--border-radius-md);

    color: #fff;

    opacity: 0;

    transform: translateX(100%);

    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);

}



.toast.show {

    opacity: 1;

    transform: translateX(0);

}



.toast.info {

    background-color: #3498db;

}



.toast.success {

    background-color: var(--income-color);

}



.toast.warning {

    background-color: var(--fee-color);

}



.toast.error {

    background-color: var(--expense-color);

}





/* --------------------------------------------------- */

/* 10.0 PRIVACY MODE & RESPONSIVENESS

/* --------------------------------------------------- */



/* 10.1 - Privacy Mode (BUG FIXED) */

#dashboard.privacy-enabled .summary-card p,

#dashboard.privacy-enabled .top-list .amount-col,

#dashboard.privacy-enabled #transactions-table .amount-col,

#dashboard.privacy-enabled .balance-compare p {

    filter: blur(5px);

}



#dashboard.privacy-enabled #privacy-mode-toggle {

    color: var(--primary-color);

    border-color: var(--primary-color);

}



/* 10.2 - Media Queries */

@media (max-width: 1024px) {

    .dashboard-grid {

        grid-template-columns: 1fr;

    }



    .chart-wrapper {

        min-height: 300px;

    }

}



@media (max-width: 768px) {

    .summary-grid {

        grid-template-columns: 1fr 1fr;

    }



    .summary-card p {

        font-size: 1.25rem;

    }



    .dashboard-header {

        flex-direction: column;

        align-items: flex-start;

    }



    .dashboard-actions {

        width: 100%;

        flex-direction: column;

        align-items: stretch;

    }



    .dashboard-actions .action-btn,

    .dashboard-actions .dropdown {

        width: 100%;

    }



    .dashboard-actions .action-btn {

        justify-content: center;

    }



    .filters-toolbar {

        flex-direction: column;

    }



    #transactions-table td:nth-child(2) {

        max-width: 200px;

    }

}



@media (max-width: 480px) {

    .dashboard-main {

        padding: 1rem 0;

    }



    .container {

        padding: 0 15px;

    }



    #upload-section .seo-h1 {

        font-size: 2rem;

    }



    .upload-box {

        padding: 1.5rem;

    }

    .upload-label {
        padding: 2rem 1.25rem;
    }

    .upload-label i {
        font-size: 2.4rem;
    }

    .upload-success__actions {
        flex-direction: column;
    }

    .upload-success__actions .action-btn {
        width: 100%;
        justify-content: center;
    }



    .summary-grid {

        grid-template-columns: 1fr;

        gap: 1rem;

    }



    /* Changed to single column for small screens */

    .summary-card {

        padding: 1rem;

    }



    .summary-card h4 {

        font-size: 0.8rem;

    }



    .summary-card p {

        font-size: 1.1rem;

    }



    .dashboard-header h2 {

        font-size: 1.5rem;

    }



    .db-card,

    .upload-box,

    .modal-content {

        padding: 1rem;

    }



    .table-footer {

        flex-direction: column;

        gap: 1rem;

    }



    #transactions-table {

        font-size: 0.9rem;

    }



    #transactions-table th,

    #transactions-table td {

        padding: 8px 10px;

    }

}

.upload-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    margin: 1.5rem auto 1rem;
    color: var(--text-color-light);
    font-size: 0.95rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 0.85rem 1rem;
    max-width: 520px;
}

.upload-meta__note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--text-color);
}

.upload-status {
    margin-top: 1.5rem;
    text-align: left;
}

.upload-status__bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--border-color);
    overflow: hidden;
}

.upload-status__progress {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.upload-status__text {
    margin: 0.5rem 0 0;
    color: var(--text-color-light);
    font-size: 0.9rem;
}

.upload-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.upload-success {
    margin-top: 1.5rem;
    background: var(--primary-color-light);
    border-radius: var(--border-radius-md);
    padding: 1.5rem;
    text-align: left;
    border: 1px solid rgba(67, 176, 42, 0.25);
    box-shadow: 0 8px 20px rgba(67, 176, 42, 0.12);
}

.upload-success__header h3 {
    margin: 0 0 0.35rem;
    font-size: 1.2rem;
    color: var(--primary-color-dark);
}

.upload-success__header p {
    margin: 0 0 1rem;
    color: var(--text-color-light);
}

.upload-success__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.upload-success__grid span {
    display: block;
    font-size: 0.85rem;
    color: var(--text-color-light);
}

.upload-success__grid strong {
    font-size: 1.1rem;
    color: var(--text-color);
    display: block;
}

.upload-success__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.loading-actions {
    margin-top: 1rem;
}

.upload-meta__hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-color-light);
}

.summary-delta {
    font-size: 0.9rem;
    margin-top: 0.25rem;
    color: var(--text-color-light);
}