/* css/simulation.css */

html {
    font-size: 100%;       /* Establish the root: defaut 16px)*/
}

:root {

    /* ── Font Sizes PC+tablets─────────────────────────────── */
    --fs-panel-header:    1.15rem;
    --fs-group-header:    var(--fs-normal-text);

    --fs-normal-text:           0.95rem;
    --fs-mobile-normal-text:    1.0rem;

    --fs-account-row:     var(--fs-normal-text);    
    --fs-operation-item:  var(--fs-normal-text); 
    --fs-history-table:   0.75rem;    
    --fs-statement-h4:    var(--fs-normal-text);  
    --fs-metric-label:    var(--fs-normal-text);

    /* ── Font Sizes pnones─────────────────────────────── */
    --fs-mobile-normal-text:    1.0rem;
    --fs-mobile-account-row:     var(--fs-mobile-normal-text);    
    --fs-mobile-metric-label:    var(--fs-mobile-normal-text);


    /* ── Section Colors ─────────────────────────────── */
    /* Assets section (Balance Sheet) */

    /* TRIED --bs-assets-bg: rgba(52, 152, 219, 0.08);   slightly blue */
    --bs-assets-bg: #f5f7fa;

    /* TRIED --bs-assets-border: rgba(52, 152, 219, 0.3); tried  blue */
    --bs-assets-border: #e1e5e9;

    --bs-assets-primary: #3498db;
    /* --bs-assets-total-bg: #f5f7fa;*/
    --bs-assets-total-bg: #f6fbff;
    --bs-assets-text: #1a3a4a;
    
    /* Liabilities & Equity section (Balance Sheet) */
    /* TRIED --bs-le-bg: rgba(155, 89, 182, 0.08);  tried slightly purple*/
    --bs-le-bg: #f5f7fa;

    /* TRIED --bs-le-border: rgba(155, 89, 182, 0.3); tried purple*/
    --bs-le-border: #e1e5e9;

    --bs-le-primary: #9b59b6;
    --bs-le-total-bg: #f5f7fa;  
    --bs-le-text: #2c1a3a;
     

    /* ── Value Colors ────────────────────────────────── */
    --val-positive: #27ae60;         /* Profit, income */
    --val-negative: #e74c3c;         /* Loss, deficit */
    
    /* ── Highlight Colors ────────────────────────────── */
    --hl-bg: #fff9e6;               
    --hl-border: #f39c12;           

    /* ── Badges ────────────────────────────── */
    --badge: #a58649;
    
    /* ── Neutral Colors ──────────────────────────────── */
    --neutral-white: #ffffff;
    --neutral-bg: #f5f7fa;
    --neutral-border: #e1e5e9;
    --grey-bg: #f8f9fa;            
    --neutral-text: #2c3e50;
    --neutral-muted: #7f8c8d;
}


.assets-section {
    --section-bg: var(--bs-assets-bg);
    --section-text: var(--bs-assets-text);
}

.liabilities-equity-section {
    --section-bg: var(--bs-assets-bg);          /* same as assets */
    --section-text: var(--bs-assets-text);      /* same as assets */
}



/* Header styles */
.header {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    min-height: 52px;
    flex-shrink: 0;
}

.header-left {
    min-width: 0;         /* allow flex shrink so ellipsis works */
}

.header-left h1 {
    font-size: 1.3em;
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-right {
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;   /* dropdown anchor */
}

/* Desktop / Tablet: show actions horizontally */
.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Hide mobile menu toggle on non-mobile screens */
.mobile-menu-btn {
    display: none;
}

.header-btn {
    padding: 2px 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-normal-text);
    transition: all 0.2s ease;
    height: 32px;
    min-width: 110px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-btn.secondary {
    background: #ecf0f1;
    color: #34495e;
    border: 1px solid #bdc3c7;
}

.header-btn.secondary:hover {
    background: #dde0e3;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-btn:active {
    transform: translateY(0);
}

/* 
Main content layout 
*/
    .main-content {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1.8fr 1fr;
        grid-template-areas:
            "operations     balanceSheet incomeStatement"
            "transHistory   titlePanel   metrics";
        display: grid;
        gap: 12px;
        padding: 12px;
        height: calc(100vh - 52px);
        /* min-height: 600px;*/
        align-items: stretch;
    }

/* Grid area assignments */
.operations-panel { grid-area: operations; }
.transaction-history-panel { grid-area: transHistory; }
.balance-sheet-panel { grid-area: balanceSheet; }
.income-statement-panel { grid-area: incomeStatement; }
.title-panel { grid-area: titlePanel; }
.metrics-panel { grid-area: metrics; }


/* All panels visible, flex column layout */
.operations-panel,
.balance-sheet-panel,
.income-statement-panel,
.title-panel,
.metrics-panel {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Panel base styles */
.panel {
    background: white;
    border-radius: 6px;
    padding: 10px;
    border: 1px solid var(--neutral-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
}

/*
.panel h2 {
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: var(--fs-panel-header);
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
    flex-shrink: 0;
}
    */

.panel h2 {
    color: #2c3e50;
    font-size: var(--fs-panel-header);
    font-weight: 600;

    /*background: #e9fee8;*/
    /*background: linear-gradient(to bottom, #eff6ff 0%, #ffffff 100%);*/
    background:  #eff6ff 0%;

    margin: -10px -10px 10px -10px;       /* bleed to panel edges (counters panel padding) */
    padding: 9px 12px 7px 12px; 

    /* ── Visual separation ── */
    border-bottom: 2px solid #3498db;
    border-radius: 5px 5px 0 0;           /* match panel's 6px radius at top */

    flex-shrink: 0;

}




/* Operations Panel */
.operations-list {
    flex: 1;
    overflow-y: auto;
    padding: 3px;
    border-radius: 3px;
    font-size: var(--fs-normal-text);
    min-height: 0;
}

.operation-group {
    margin-bottom: 9px;
}

.group-header {
    font-weight: 600;
    color: #2c3e50;
    background: #f4f7fa;
    padding: 0.2rem 10px;
    border-radius: 3px;
    margin-bottom: 1px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 3px solid #3498db;
    transition: all 0.2s ease;
    font-size: var(--fs-group-header);
}

.group-header:hover {
    background: #dfe6e9;
}

.collapse-icon {
    font-size: var(--fs-normal-text);
    color: #7f8c8d;
}

.group-operations {
    padding-left: 8px;
    transition: all 0.3s ease;
    min-height: 0;
}

.group-operations.collapsed {
    display: none;
}

.operation-item {
    padding: 0.275rem;
    margin: 1px 0;
    border: 1px solid var(--neutral-border);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    font-size: var(--fs-operation-item);
    line-height: 1.2;
}

.operation-item:hover {
    border-color: #3498db;
    background: #f0f7ff;
}

.operation-item.selected {
    border-color: #2ecc71;
    background: #d5f4e6;
    font-weight: 600;
}

.operation-item.disabled {
    /* background: var(--grey-bg); */
    color: #d1d3d4;
    cursor: not-allowed;
    border-color: var(--neutral-border);
}


/* ==========================================================================
   TRANSACTION & HISTORY PANEL
   Single column card combining transaction controls, dual-entry,
   and transaction history with a clear subheader.
   ========================================================================== */

/* ==========================================================================
   TRANSACTION MODAL
   ========================================================================== */

.modal-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
        visibility: hidden;
        opacity: 0;
        pointer-events: none; 
    align-items: center;
    justify-content: center;
    padding: 20px;
}



.modal-overlay.is-open,
#transactionModalOverlay.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}


 /* ==========================================
    NEW: LEFT-ANCHORED SLIDING MODAL (DRAWER)
    ========================================== */
    
    /* 1. The Overlay: Remove dimming, anchor content to bottom-left */
    #transactionModalOverlay {
        background: transparent !important; /* No dark backdrop */
        align-items: flex-end;              /* Push card to bottom */
        justify-content: flex-start;        /* Push card to left */
        padding: 0;
    }

    /* 2. The Modal Card: Position it exactly over the left column */
    #transactionModalOverlay .modal-card {
        position: absolute;
        background: #ffffff;
        /* Match the .main-content padding (12px) and gap (12px) */
        left: 12px; 
        bottom: 0; /* Slide up from the very bottom edge */
        
        /* Calculate width to match the first column of the 3-col grid */
        /* Formula: (100vw - 2*padding - 2*gaps) / 3 columns */
        width: calc((100vw - 48px) / 3); 
        max-width: 400px; 
        min-width: 320px;
        max-height: 85vh; 
        overflow-y: auto;
        
        /* Styling to make it look like a floating drawer */
        border-radius: 12px 12px 0 0; 
        box-shadow: 
            0 -8px 20px rgba(0, 0, 0, 0.12), 
            0 -20px 50px rgba(0, 0, 0, 0.25); 
        border: 1px solid #e1e5e9; 
        border-bottom: none; 
        margin: 0;
        
        /* The Slide Animation */
        transform: translateY(100%); 
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    }

    /* 3. Active State: Slide the card up into view */
     #transactionModalOverlay.is-open .modal-card {
        transform: translateY(0);
    }

    /* 4. Form adjustments for this specific layout */
    #transactionModalOverlay .modal-transaction-host {
        padding: 15px; 
    }


.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #e1e5e9;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #2c3e50;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #7f8c8d;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.modal-close:hover {
    background: #f5f5f5;
    color: #e74c3c;
}

.modal-transaction-host {
    padding: 16px 20px 20px;
}

.modal-transaction-host .transaction-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end; /* CRITICAL: Aligns the bottom of the input with the bottom of the buttons */
    gap: 12px;
    margin-bottom: 24px;
}

.modal-transaction-host .amount-control {
    flex: 1 1 100px; 
    display: flex;
    flex-wrap: wrap; /* Allows label to be on row 1, input on row 2 */
    gap: 6px;
    position: relative;    
}


.modal-transaction-host .amount-control label {
    flex: 1 1 100%; /* Forces label to take full width, pushing input to the next line */
    margin-bottom: 0;
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95rem;
}

.modal-transaction-host .amount-input {
    flex: 1; /* Input stretches to fill the remaining space */
    height: 40px; /* Slightly taller for better touch/click targets */
    font-size: 1rem;
}

.modal-transaction-host .validation-error {
    position: absolute;
    bottom: -20px; /* Push it cleanly below the input */
    left: 0;
    width: 100%;
    white-space: normal;
    font-size: 0.85rem;
}


.modal-transaction-host .post-btn,
.modal-transaction-host .cancel-btn {
    flex: 0 0 auto; /* Keep natural width, don't stretch */
    height: 40px; /* Match input height exactly */
    font-size: 1rem;
    margin: 0;
    min-width: 80px;
}


@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}



.transaction-history-panel {
    grid-area: transHistory;          /* new grid area */
    display: flex;
    flex-direction: column;
    overflow: hidden;       /* panel itself doesn't scroll */
}

.transaction-upper-section {
    flex-shrink: 0;  /* never shrinks */
    min-height: 220px;  
}

.transaction-details-area {
    min-height: 220px;  /* space for description + dual-entry */
    position: relative;
}


.transaction-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    align-items: flex-end;
    flex-shrink: 0;
}


/* Amount input area */
.transaction-history-panel .amount-control {
    flex: 1;
    position: relative;
}

/* Amount control needs relative positioning for absolute error */
.amount-control {
    flex: 1;
    position: relative;
}

.amount-control label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #2c3e50;
    font-size: var(--fs-normal-text);
}

.amount-input {
    width: 100%;
    padding: 8px;
    border: 2px solid var(--neutral-border);
    border-radius: 4px;
    font-size: 13px;
    transition: border-color 0.3s ease;
    height: 34px;
}

.amount-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* Validation error - absolutely positioned below input */
.validation-error {
    color: #e74c3c;
    font-size: var(--fs-normal-text);
    position: absolute;
    bottom: -18px;
    left: 0;
    white-space: nowrap;
}



.post-btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
    height: 34px;
    min-width: 80px;
}

.post-btn:hover:not(:disabled) {
    background: #2980b9;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(41, 128, 185, 0.3);
}

.post-btn:disabled {
    background: #bdc3c7;
    color: #7f8c8d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* Cancel button – secondary style */
.cancel-btn {
    background: #ffffff;
    color: #34495e;
    border: 1px solid #bdc3c7;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
    height: 34px;
    min-width: 80px;
}

.cancel-btn:hover:not(:disabled) {
    background: #f5f5f5;
    border-color: #999;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cancel-btn:disabled {
    background: #ffffff;
    color: #bdc3c7;
    border-color: #e1e5e9;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* Financial closing mode - allows expansion */
.transaction-history-panel.financial-closing-mode .transaction-upper-section {
    min-height: 300px;  /* more space for many entries */
}

.transaction-history-panel.financial-closing-mode .dual-entry-display {
    max-height: 140px;
}


/* Transaction controls (amount + post button) */
.transaction-history-panel .transaction-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    align-items: flex-end;
    flex-shrink: 0;
}



/* ── History Section (20px below dual-entry) ─────────── */
.history-section {
    display: flex;
    flex-direction: column;
    flex: 1;                    /* takes remaining space */
    min-height: 0;
    overflow-y: auto;
}


/* History table container */
.transaction-history {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    background: white;
}




.transaction-description {
    /* Hidden by default (shown when a transaction is selected) */
    visibility: hidden;       /* hidden but keeps height */
    background: #f0f7ff;
    border-left: 3px solid #3498db;
    border-radius: 4px;
    padding: 8px 10px;
    margin: 8px 0;
    font-size: var(--fs-normal-text);
    line-height: 1.4;
    color: #2c3e50;
    flex-shrink: 0;
}

.transaction-description.visible {
    visibility: visible;
}

/* Error state – red background with a distinct look */
.transaction-description-error {
    visibility: visible;
    background: #fff0f0;
    border-left-color: #e74c3c;
    color: #c0392b;
    /*max-height: 100px; /* Allow more room for error text */
}


/* Dual Entry Display */
.dual-entry-display {
    background: white;
    padding-left: 0;
    padding-right: 0;
    /*padding-top: 8px;*/
    padding-bottom: 10px;
    flex: 0 1 auto;           /* Don't stretch unnecessarily */
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    min-height: 80px;         /* Enough for 2 entries + heading */
    overflow-y: auto;
}

.dual-entry-display h3 {
    color: #2c3e50;
    margin-bottom: 2px;
    text-align: left;
    font-size: 0.95em;
    padding-bottom: 4px;
    /*  border-bottom: 1px solid #ecf0f1; */ /*removed to enhance UI*/
    flex-shrink: 0;
}

.entry-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
}


/* Entry rows scroll */
.entry-rows {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 5px;
}

/* Scrollbar styling */
.entry-rows::-webkit-scrollbar {
    width: 6px;
}

.entry-rows::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.entry-rows::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.entry-rows::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}


.entry-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 10px;
    background: #eef6ff;
    border-radius: 3px;
    border: 1px solid var(--neutral-border);
    font-size: var(--fs-normal-text);
    flex-shrink: 0;
}

.entry-label {
    font-weight: bold;
    color: #2c3e50;
    min-width: 35px;
}

.entry-account {
    flex: 1;
    color: #34495e;
}

.entry-amount {
    font-weight: bold;
    color: #2c3e50;
    min-width: 80px;
    text-align: right;
}



.financial-statement {
    background: white;
    border-radius: 4px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    /* Allow vertical scrolling, but strictly forbid horizontal scrolling */
    overflow-y: auto;
    overflow-x: hidden; 
}

.financial-statement h3 {
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: 0.95em;
    padding-bottom: 6px;
    border-bottom: 1px solid #ecf0f1;
    flex-shrink: 0;
}

.statement-section {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0; 
    padding-right: 0; 

    margin: 0 0 0; 
    flex-shrink: 0;
    /*border-radius: 6px 6px 6px 6px; */
}

.balance-sheet .assets-section {
    /* border: 1px solid var(--bs-assets-border); */
    margin-bottom: 15px;
    overflow: hidden;
}

.balance-sheet .liabilities-equity-section {
    /* border: 1px solid var(--bs-le-border); */
    overflow: hidden;
}

.statement-section-header {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    /*background: var(--section-bg);*/
    color: var(--section-text);
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-normal-text);        
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-top: 0;
    margin-bottom: 0;
}



/* Section sub-headings stay at root level */
.statement-section h5 {
    padding-left: 10px;
    padding-top: 6px;
    font-size: var(--fs-normal-text);
}

.account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0;
    border-bottom: 1px solid #f1f2f3;
    font-size:var(--fs-account-row);
    transition: all 0.3s ease;
    line-height: 1.0;
    flex-shrink: 0;
}



/* Grey text for zero accounts */
.account-row.zero-balance .account-name,
.account-row.zero-balance .account-value {
    color: #b0b0b0;
}

/* Highlight overrides */
.account-row.highlighted.zero-balance .account-name,
.account-row.highlighted.zero-balance .account-value {
    color: #b0b0b0;
    /*color: #2c3e50;*/  /* Normal text color */
}

/* Also ensure change badges are visible */
.account-row.zero-balance .change-badge {
    color: var(--badge); /* Keep badge color as-is */
}


.subtotal-row {
    font-weight: bold;
    /* border-top: 1px solid #e1e5e9;*/   /*removed as not beautiful */
    margin-top: 1px;
    padding-top: 0.2rem;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: none;
    /*background: var(--bs-assets-total-bg);*/
}


/* ── Income Statement: Align subtotals with section headers ── */
.income-statement .subtotal-row {
    /* Break out of the panel's 10px padding, just like .statement-section-header */
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
}

.income-statement .subtotal-row .account-name {
    /* Remove the extra 10px indent applied to standard account rows */
    padding-left: 0; 
}



.total-row {
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #1a3a4a; 
    margin-left: -10px;  
    margin-right: -10px;
    padding: 0.1rem 12px; 
    border-top: 2px solid #a5a5a5; 
    /*background: var(--bs-assets-total-bg); */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.account-name {
    color: #34495e;
}

/* Account name indentation for visual hierarchy */
.account-row .account-name {
    padding-left: 10px;
}


.account-value {
    color: #2c3e50;
}

.positive {
    color: var(--val-positive);
}

.negative {
    color: var(--val-negative);
}


/* ==========================================================================
   FLAT BALANCE SHEET MODE 
   ========================================================================== */

/* Hide subsection headers: Current Assets, Fixed Assets, Liabilities, Equity */
.balance-sheet-panel.flat-mode h5 {
    display: none;
}

/* Hide subtotal rows: Total Current Assets, Total Fixed Assets, 
   Total Liabilities, Total Equity */
.balance-sheet-panel.flat-mode .subtotal-row {
    display: none !important;
}





.highlighted {
    background-color: var(--hl-bg);
    border-left: 2px solid var(--hl-border);
    padding-left: 6px;
    margin-left: -6px;
    animation: highlight-pulse 1.5s ease;
}

@keyframes highlight-pulse {
    00%, 100% { background-color: var(--hl-bg); }
    50% { background-color: #ffecb3; } 
}



/* ==========================================================================
   TRANSACTION CHANGE BADGE (Dr/Cr indicator)
   ========================================================================== */
.change-badge {
    display: inline-block;
    margin-left: 8px;
    /*font-size: var(--fs-normal-text);*/
    font-size: 0.80rem;
    font-weight: 500;
    font-style: italic;
    color: var(--badge);
    animation: badgeFadeIn 0.3s ease;
}

@keyframes badgeFadeIn {
    from { opacity: 0; transform: translateX(-5px); }
    to   { opacity: 1; transform: translateX(0); }
}


/* Transaction History Panel */
.transaction-history {
    border-radius: 4px;
    border: 1px solid var(--neutral-border);
    background: white;
    overflow: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}


/* History Table */
.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size:var(--fs-normal-text);
    table-layout: fixed;
}

.history-table th:nth-child(1) { width: 10%;  }   /* # */
.history-table th:nth-child(2) { width: 48%; }   /* Transaction */
.history-table th:nth-child(3) { width: 16%; }   /* Amount */
.history-table th:nth-child(4) { width: 14%; }   /* Action */

.history-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--grey-bg);;
    color: #2c3e50;
    text-align: left;
    padding: 0.2rem 0.2rem;
    font-weight: 600;
    border-bottom: 1px solid var(--neutral-border);
    font-size:var(--fs-normal-text);
    height: 28px;
}

/* Right-align Amount header to match body cells */
.history-table thead th:nth-child(3) {
    text-align: right;
}

/* Center-align Del header to match body cells */
.history-table thead th:nth-child(4) {
    text-align: center;
}

.history-table td {
    padding: 0.1rem 0.2rem;
    border-bottom: 1px solid #f1f2f3;
    height: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-table tbody tr:nth-child(even) {
    background-color: #fafbfc;
}

.history-table tbody tr:hover {
    background-color: #f0f7ff;
    cursor: pointer;
}

.history-table tbody tr.selected {
    background-color: #e8f6f3;
}

/* yellow highlight for the active transaction-history row */
.history-table tbody tr.highlighted {
    background-color: var(--hl-bg) !important;
    border-left: 3px solid var(--hl-border);
    animation: highlight-pulse 1.5s ease;
}

.history-table .amount-cell {
    text-align: right;
    color: #2c3e50;
}



/* ==========================================================================
TITLE PANEL (Under Balance Sheet)
========================================================================== */
.title-panel {
    overflow-y: auto; 
}

.title-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100px;
}

.equation-widget {
    padding: 0px 0px;
    margin-top: 5px;
}

.equation-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.eq-row {
    display: grid;
    /* FIX: Label (flexible) | Checkmark (fixed 24px) | Value (flexible, pushes to right) */
    grid-template-columns: 1fr 24px 80px; 
    align-items: center;
    gap: 8px;
    font-size: var(--fs-account-row);
}


.eq-label {
    text-align: left;
    color: #34495e;
}

.eq-value {
    text-align: right;
    font-weight: 0;
    font-variant-numeric: tabular-nums; /* Keeps numbers perfectly aligned */
}

/* Green checkmark */
.eq-check {
    text-align: right;
    color: #97bff9;
    font-weight: bold;
    font-size: 1.1rem;
}

/* Thin Divider Line */
.eq-divider {
    height: 1px;
    background-color: var(--neutral-border);
    margin: 2px 0;
    width: 100%;
}

/* Total row at the bottom */
.eq-row-total {
    margin-top: 4px;
}

.eq-total-value {
    font-weight: 600;
    font-size:  var(--fs-account-row);
    color: #2c3e50;
    background: #f8fbff;
}




/* Metrics Panel */
.metrics-content {
    padding: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    overflow-y: auto;
    align-content: flex-start;
}

.metric-card {
    background: white;
    border: 1px solid var(--neutral-border);
    border-radius: 4px;
    padding: 6px 8px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    flex: 0 0 calc(50% - 3px);   /* Two cards per row, accounting for 6px gap */
    min-width: 0;
    box-sizing: border-box;
}

.metric-label {
    font-size: var(--fs-metric-label);
    color: #7f8c8d;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-value {
    font-size: 1.1em;
    font-weight: bold;
    color: #2c3e50;
    line-height: 1.2;
}

.metric-value.positive { 
    color: var(--val-positive);
}

.metric-value.negative { 
    color: var(--val-negative); 
}

.metric-info-icon {
    cursor: help;
    font-style: normal;
    font-size: 0.9em;
    opacity: 0.5;
    margin-left: 2px;
    transition: opacity 0.2s;
}

.metric-info-icon:hover {
    opacity: 1;
}


/* Error states */
.error {
    color: #e74c3c;
    padding: 15px;
    text-align: center;
    border: 1px solid #e74c3c;
    border-radius: 3px;
    background-color: #ffeaea;
    font-size: var(--fs-normal-text);
}

/* Loading states */
.loading {
    text-align: center;
    padding: 20px;
    color: #7f8c8d;
    font-style: italic;
    font-size: var(--fs-normal-text);
}

/* Fix for operation groups */
.group-operations {
    max-height: 400px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.group-operations.collapsed {
    max-height: 0;
}

/* Ensure all account rows have position for highlighting */
.account-row {
    position: relative;
}


/* Undo Button Styles */
.action-cell {
    text-align: center;
    vertical-align: middle;
    padding: 2px !important;
}

.undo-btn {
    background: transparent;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin: 0 auto;
    padding: 0;
    line-height: 1;
}

.undo-btn:hover:not(.disabled) {
    background: #f5f5f5;
    border-color: #999;
    transform: none;
    box-shadow: none;
}

.undo-btn:active:not(.disabled) {
    background: #e5e5e5;
    transform: none;
}

.undo-btn.disabled {
    background: transparent;
    color: #ccc;
    border-color: #eee;
    cursor: not-allowed;
    opacity: 0.5;
}

.undo-icon {
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
}


/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes pulse-gentle {
    0%, 100% { background-color: #e8f4fd; }
    50% { background-color: #d4e9fa; }
}


/* Special styling for financial closing transactions */
.dual-entry-display.financial-closing-display .entry-amount {
    font-style: italic;
    color: #7f8c8d;
}

.financial-closing-display .entry-row {
    background-color: #f9f9f9;
    border-color: var(--neutral-border);
}

.closing-summary-header {
    background: var(--grey-bg);
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    border-left: 3px solid #3498db;
}

.closing-result-message {
    margin-top: 10px;
    animation: slideUp 0.5s ease;
}


.period-divider {
    background: #f8f9fa;
    font-weight: 600;
    font-size: 0.75rem;
    color: #5a6c7d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 2px solid #e1e5e9;
}

.period-divider td {
    padding: 6px 10px !important;
    height: auto !important;
    border-bottom: none !important;
}

.period-badge {
    background: #3498db;
    color: white;
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
    font-weight: 600;
    vertical-align: middle;
}




/* ==========================================================================
   UNDO ANIMATION & TOAST NOTIFICATION
   ========================================================================== */

/* Row fade-out animation when undoing */
.history-table tbody tr.fading-out {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.4s ease;
}

/* Undo confirmation toast */
.undo-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #d32f2f; 
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    z-index: 10000;
    font-size: var(--fs-normal-text);
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3); 
    animation: toastIn 0.3s ease, toastOut 0.3s ease 1.7s forwards;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}


/* ==========================================================================
TRANSACTION POST ROW ANIMATION 
========================================================================== */
.history-table tbody tr.new-row-enter {
    animation: slideInDown 1.0s cubic-bezier(0.2, 0.8, 0.2, 1), 
               rowSuccessGlow 1.2s ease-out,
               highlight-pulse 1.5s ease;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rowSuccessGlow {
    100% { box-shadow: inset 4px 0 0 0 transparent; /* Fade out */
    }
}


/* ==========================================================================
   VALIDATION ERROR STYLES
   ========================================================================== */

/* Input error state - red border and shake */
.amount-input.input-error {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2) !important;
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}



/* ==========================================================================
PERIOD CLOSED MODAL
========================================================================== */
.period-closed-card {
    max-width: 320px;
    text-align: center;
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    min-width: 320px;
    max-width: 480px;
    min-height: 200px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.15), 
        0 25px 65px rgba(0, 0, 0, 0.25);
}



.period-closed-body {
    padding: 20px;
}

.period-closed-message {
    margin-bottom: 16px;
    line-height: 1.5;
    font-size: var(--fs-normal-text);
    text-align: left;
}

.period-closed-summary {
    display: none; /*hiding now*/
    background: #f0f7ff;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    text-align: left;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: var(--fs-normal-text);
}

.summary-row:last-child {
    margin-bottom: 0;
}

.period-closed-footer-text {
    color: #5a6c7d;
    font-size: 0.9em;
    margin-bottom: 20px;
    line-height: 1.5;
}

.period-closed-continue-btn {
    width: 100%;
    height: 44px;
}

.educational-notes {
    background: #f0f7ff;
    border-left: 3px solid #3498db;
    border-radius: 0 6px 6px 0;
    padding: 12px 16px;
    margin-bottom: 24px;
    font-size: 0.95rem;
    color: #34495e;
    line-height: 1.5;
    text-align: left;
}

.educational-notes p {
    margin: 0 0 8px 0;
    font-weight: 600;
    font-size: 1rem;
    color: #2c3e50;
}

.educational-notes ul {
    margin: 0;
    padding-left: 18px;
}

.educational-notes li {
    margin-bottom: 6px;
}



/* ==========================================================================
   METRIC DETAIL MODAL
   ========================================================================== */

/* Overlay covers the entire screen */
.metric-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);   /* semi-transparent dark backdrop */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;       /* smooth appearance */
}

/* The modal card */
.metric-modal-card {
    background: #ffffff;
    border-radius: 12px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: scaleIn 0.2s ease;
    overflow: hidden;                  /* clip inner corners */
}


/* Header with title and close button */
.metric-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 10px;
    border-bottom: 1px solid #e1e5e9;
}

.metric-modal-header h2 {
    margin: 0;
    font-size: 1.3em;
    font-weight: 600;
    color: #2c3e50;
}

.metric-modal-close {
    background: none;
    border: none;
    font-size: 1.5em;
    color: #7f8c8d;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.metric-modal-close:hover {
    color: #e74c3c;
}

/* Body contains the step-by-step breakdown */
.metric-modal-body {
    padding: 16px 24px 8px;
}


/* ── General Description of Metric ── */
.modal-general-description {
    font-size: 0.95rem;
    color: #2c3e50;
    line-height: 1.5;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e1e5e9;
}

/* A single step row */
.metric-step {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid #f1f2f3;
    font-size: var(--fs-normal-text);
}

.metric-step:last-of-type {
    border-bottom: none;
}

/* Step label and optional note */
.metric-step-label {
    color: #1b252f;
    font-weight: 600;
    flex: 1;
    padding-left: 10px;
}

.metric-step-note {
    display: block;
    font-size: var(--fs-normal-text);
    color: #95a5a6;
    margin-top: 0px;
}

/* Step value */
.metric-step-value {
    font-weight: 700;
    color: #1b252f;
    text-align: right;
    min-width: 80px;
    margin-left: 16px;
}

/* Highlight negative values in red */
.metric-step-value.negative {
    color: #e74c3c;
}

.metric-step-value.positive {
    color: #27ae60;
}

/* The final result step is more prominent */
.metric-step-result {
    background: #f0f7ff;
    border-radius: 4px;
    padding: 8px 10px;
    margin-top: 8px;
    border-left: 3px solid #3498db;
}

.metric-step-result .metric-step-value {
    font-size: var(--fs-panel-header);
    color: #2c3e50;
}

/* Footer with benchmark */
.metric-modal-footer {
    padding: 10px 24px 20px;
    border-top: 1px solid #e1e5e9;
    background: #fafafa;
    font-size: var(--fs-normal-text);
    color: #34495e;
    line-height: 1.5;
}

.metric-benchmark-icon {
    display: inline-block;
    margin-right: 6px;
}

/* Close when clicking outside (optional) */
.metric-modal-overlay.clickable {
    cursor: pointer;
}


/* Clickable metric card */
.metric-card.metric-clickable {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metric-card.metric-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-color: #3498db;
}


/* ── Icon + text row (formula and result) ── */
.modal-icon-row {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 6px 10px;
    background:  #f0f7ff;
    border-radius: 6px;
}

.modal-icon {
    width: 2em;                 /* fixed gutter */
    flex-shrink: 0;
    text-align: center;
    font-size: 1.1em;          /* slightly larger than text */
    line-height: 1;
}

.modal-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.modal-formula-text {
    flex: 1;
    padding-left: 10px;
}

.modal-formula-label {
    display: block;            /* forces formula text to the next line */
    font-size: 0.75em;         /* smaller than the formula */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #95a5a6;            /* muted color */
    margin-bottom: 2px;        /* small gap before the formula */
}

/* ── Indented container for the calculation steps ── */
.modal-steps-container {
    margin-left: 2.6em;         /* 2em icon + 0.6em gap */
    margin-bottom: 0.8em;
    padding-right: 10px;
}

/* ── Individual step rows ── */
.modal-step-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3em 0;
    border-bottom: 1px solid #f1f2f3;
    font-size: var(--fs-normal-text);
}

.modal-step-row:last-child {
    border-bottom: none;
}

/* ── Result row – highlighted ── */
.modal-result-row {
    display: flex;
    align-items: center;
    background: #f0f7ff;
    border-radius: 6px;
    padding: 6px 10px;
    /*border-left: 3px solid #3498db; */
    margin-top: 0.4em;
}

.modal-result-label {
    flex: 1;
    font-weight: 600;
    color: #2c3e50;
    padding-left: 10px;
}

.modal-result-value {
    font-weight: 700;
    font-size: 1.1em;
    color: #2c3e50;
    text-align: right;
    min-width: 5em;
}

/* Modal result value colors — must match card metric-value colors */
.modal-result-value.positive {
    color: var(--val-positive);
}

.modal-result-value.negative {
    color: var(--val-negative);
}


.modal-icon {
    width: 2em;
    flex-shrink: 0;
    text-align: center;
    font-size: 1.1em;
    line-height: 1;
    color: #3498db;   /* this controls the SVG color via currentColor */
}


/* Entrance animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}


/* ==========================================================================
   ONBOARDING MODAL (using native <dialog>)
   ========================================================================== */

.onboarding-dialog {
    padding: 0;
    border: none;
    border-radius: 12px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    background: transparent;
    margin: auto;
}

.onboarding-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
    animation: fadeIn 0.2s ease;
}

.onboarding-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
}

.onboarding-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 10px;
    border-bottom: 1px solid #e1e5e9;
}

.onboarding-header h2 {
    margin: 0;
    font-size: 1.3em;
    font-weight: 600;
    color: #2c3e50;
}


.onboarding-body {
    padding: 20px 24px;
    font-size: var(--fs-normal-text);
    line-height: 1.4;
}

.onboarding-tips {
    font-size: var(--fs-normal-text);  
    color: #5a6c7d;     
}

.onboarding-tips ul {
    margin: 6px 0 0 0;
    padding-left: 18px;
}

.onboarding-tips li {
    margin-bottom: 5px;
    line-height: 1.4;
}


.onboarding-footer {
    padding: 0 24px 24px;
}


.onboarding-footer label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: var(--fs-normal-text);
    color: #5a6c7d;
    cursor: pointer;
}

.onboarding-footer input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}



/* ==========================================================================
RESET CONFIRMATION MODAL
========================================================================== */
.reset-modal-card {
    max-width: 420px;
    width: 90%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: scaleIn 0.2s ease;
    overflow: hidden;
}

.reset-modal-body {
    padding: 16px 24px;
    font-size: var(--fs-normal-text);
    color: #34495e;
    line-height: 1.5;
}

.reset-modal-body ul {
    margin: 12px 0;
    padding-left: 20px;
}

.reset-modal-body li {
    margin-bottom: 6px;
}

.reset-modal-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e1e5e9;
    background: #fafafa;
}

/* Danger button style for Reset */
.danger-btn {
    background: #e74c3c !important;
}
.danger-btn:hover:not(:disabled) {
    background: #c0392b !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(231, 76, 60, 0.3) !important;
}




/* Prevent body scroll when modal is open */
body:has(dialog[open]) {
    overflow: hidden;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* ============================================
   SCROLLBARS (WebKit + Firefox)
   ============================================ */

/* --- WebKit (Chrome, Safari, Edge) --- */
/* Force classic scrollbar by styling the scrollbar element itself.
   Without this background-color, Chrome stays in overlay mode and
   the thumb fades after scrolling. */
.operations-list::-webkit-scrollbar,
.transaction-history::-webkit-scrollbar,
.entry-rows::-webkit-scrollbar,
.financial-statement::-webkit-scrollbar, 
.balance-sheet-panel::-webkit-scrollbar,
.income-statement-panel::-webkit-scrollbar,
.metrics-panel::-webkit-scrollbar,
.metrics-content::-webkit-scrollbar,
.operations-panel::-webkit-scrollbar,
.operations-list::-webkit-scrollbar,
.history-section::-webkit-scrollbar,
.transaction-history-panel::-webkit-scrollbar {
    width: 6px;
    background-color: #f1f1f1;
    border-radius: 3px;
}

/* Track */
.operations-list::-webkit-scrollbar-track,
.transaction-history::-webkit-scrollbar-track,
.entry-rows::-webkit-scrollbar-track,
.financial-statement::-webkit-scrollbar-track,
.balance-sheet-panel::-webkit-scrollbar-track,
.income-statement-panel::-webkit-scrollbar-track,
.metrics-panel::-webkit-scrollbar-track,
.metrics-content::-webkit-scrollbar-track,
.operations-panel::-webkit-scrollbar-track,
.history-section::-webkit-scrollbar-track,
.transaction-history-panel::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

/* Thumb - solid opaque color so it never fades */
.operations-list::-webkit-scrollbar-thumb,
.transaction-history::-webkit-scrollbar-thumb,
.entry-rows::-webkit-scrollbar-thumb,
.financial-statement::-webkit-scrollbar-thumb,
.balance-sheet-panel::-webkit-scrollbar-thumb,
.income-statement-panel::-webkit-scrollbar-thumb,
.metrics-panel::-webkit-scrollbar-thumb,
.metrics-content::-webkit-scrollbar-thumb,
.operations-panel::-webkit-scrollbar-thumb,
.history-section::-webkit-scrollbar-thumb,
.transaction-history-panel::-webkit-scrollbar-thumb {
    background-color: #a8a8a8;
    border-radius: 3px;
    min-height: 30px; /* ensure thumb is never too small to see */
}

/* Hover feedback */
.operations-list::-webkit-scrollbar-thumb:hover,
.transaction-history::-webkit-scrollbar-thumb:hover,
.entry-rows::-webkit-scrollbar-thumb:hover,
.financial-statement::-webkit-scrollbar-thumb:hover,
.balance-sheet-panel::-webkit-scrollbar-thumb:hover,
.income-statement-panel::-webkit-scrollbar-thumb:hover,
.metrics-panel::-webkit-scrollbar-thumb:hover,
.metrics-content::-webkit-scrollbar-thumb:hover,
.operations-panel::-webkit-scrollbar-thumb:hover,
.history-section::-webkit-scrollbar-thumb:hover,
.transaction-history-panel::-webkit-scrollbar-thumb:hover {
    background-color: #888;
}

/* --- Firefox --- */
.operations-list,
.transaction-history,
.entry-rows,
.financial-statement,
.balance-sheet-panel,
.income-statement-panel,
.metrics-panel,
.metrics-content,
.operations-panel,
.transaction-history-panel {
    scrollbar-width: thin;
    scrollbar-color: #a8a8a8 #f1f1f1;
}


.mobile-tabs {
    display: none; /* Hidden on desktop */
}


/* ==========================================================================
TABLET LAYOUT: 2-Column "Split Dashboard"
========================================================================== */
@media (max-width: 1024px) and (min-width: 768px) {
    
    /* 1. Redefine the Grid to 2 Columns */
    .main-content {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1.5fr 1.5fr 1fr;
        grid-template-areas:
            "operations   balanceSheet"
            "transHistory incomeStatement"
            "titlePanel   metrics";
        gap: 10px;
        padding: 10px;
        height: calc(100vh - 52px);
    }


    /* Internal Panel Scrolling & Sizing */
    .operations-panel,
    .transaction-history-panel,
    .balance-sheet-panel,
    .income-statement-panel,
    .metrics-panel {
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    .transaction-history-panel .history-section {
        margin-top: 0; 
        flex: 1;
    }

    /* Header compacting for tablets */
    .header {
        padding: 6px 15px;
        min-height: 48px;
    }
    .header-left h1 {
        font-size: 1.15em;
    }
    .header-btn {
        min-width: 100px;
        font-size: 12px;
        padding: 6px 12px;
    }
}






/* ==========================================================================
   PHONE LAYOUT
   ========================================================================== */
@media (max-width: 767px) {

/* ── Mobile menu button ── */
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: rgba(255,255,255,0.12);
        color: #fff;
        border: 1px solid rgba(255,255,255,0.25);
        border-radius: 6px;
        font-size: 1.3rem;
        line-height: 1;
        cursor: pointer;
        padding: 0;
    }
    .mobile-menu-btn:active {
        background: rgba(255,255,255,0.25);
    }

    /* ── Dropdown panel (hidden by default) ── */
    .header-actions {
        display: none;               /* toggled via .open class */
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        flex-direction: column;
        background: #ffffff;
        border-radius: 6px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.18);
        padding: 6px;
        gap: 4px;
        min-width: 170px;
        z-index: 200;                /* above the sticky tab bar */
    }
    .header-actions.open {
        display: flex;
    }

    /* Buttons inside the dropdown */
    .header-actions .header-btn {
        width: 100%;
        justify-content: flex-start;
        height: 40px;                /* Good touch target for phones */
        min-width: auto;
        font-size: 0.9rem;
        background: #fff;
        color: #34495e;
        border: 1px solid #e1e5e9;
        border-radius: 4px;
        padding: 0 12px;
    }
    .header-actions .header-btn:active {
        background: #f5f7fa;
    }


    /* ── Tab bar ── */
    .mobile-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        position: sticky;
        top: 0;
        z-index: 100;
        background: #2384e5;
        overflow-x: visible;          /* remove horizontal scroll */
        -webkit-overflow-scrolling: auto;
    }
   

    .mobile-tab {
        padding: 10px 2px;
        border: none;
        border-bottom: 3px solid transparent; /* reserve space so active tab doesn't jump */
        background: transparent;
        color: rgba(255,255,255,0.7);
        font-size: 0.95rem;            /* slightly smaller so long words fit */
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;       /* safety net on very small screens */
        min-height: 44px;
        text-align: center;
    }
    .mobile-tab.active {
        color: white;
        border-bottom-color: #3498db;
        background: rgba(255,255,255,0.06);
    }

    /* ── Main content: single column ── */
    .main-content {
        display: flex;
        flex-direction: column;
        padding: 8px;
        height: calc(100vh - 175px);   /* header (52px) + 2 tab rows (2×44px) */
        min-height: auto;
        align-items: stretch;
    }

    /* All panels hidden by default */
    .panel {
        display: none;
        margin-bottom: 0;
        width: 100%;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    /* Only active panel shown — uniform for ALL tabs */
    .panel.active-panel {
        display: flex;
        flex-direction: column;
    }

    /* Operations panel: list fills available space */
    .operations-list {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }

    /* Transaction History panel: full height history */
    .transaction-history-panel .history-section {
        margin-top: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .transaction-history {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }


    /* ── Touch targets ── */
    .operation-item,
    .group-header,
    .post-btn,
    .cancel-btn,
    .undo-btn,
    .history-table td,
    .history-table th {
        min-height: 44px;
    }

    .operation-item {
        padding: 12px 10px;
        font-size: var(--fs-mobile-normal-text);
    }

    .group-header {
        padding: 10px 12px;
        font-size: 0.95rem;
    }

    .undo-btn {
        width: 44px;
        height: 44px;
    }

    .amount-input {
        font-size: 16px; /* prevents iOS zoom on focus */
        padding: 12px;
        height: 44px;
    }


/* ── History table: Compact PC-style layout on mobile ── */

/* Force standard table layout (overrides any previous block/grid resets) */
.history-table { display: table; width: 100%;  table-layout: auto;}
.history-table thead { display: table-header-group; }
.history-table tbody { display: table-row-group; }
.history-table tr { display: table-row; }
.history-table td, .history-table th { display: table-cell; }

/* Hide table headers to save vertical space */
.history-table thead {
    display: none; 
}

/* Hide the Transaction Number column (1st column) */
.history-table th:nth-child(1),
.history-table td:nth-child(1) {
    display: none;
}

/* Transaction Name (2nd col) - takes remaining space */
.history-table th:nth-child(2),
.history-table td:nth-child(2) {
    width: 60%; 
}

/* Amount (3rd col) - fixed proportional width */
.history-table th:nth-child(3),
.history-table td:nth-child(3) {
    width: 20%; 
    font-weight: 600;
    text-align: right;
    white-space: nowrap; /* Keeps currency on one line */
}

/* Action / Undo (4th col) - fixed width for button */
.history-table th:nth-child(4),
.history-table td:nth-child(4) {
    width: 20%; 
    text-align: right;
}

/* 5. Row and Cell Styling for Touch & Readability */
.history-table tbody tr {
    border-bottom: 1px solid #e1e5e9; /* Clean horizontal divider */
    background: white;
}

.history-table td {
    padding: 12px 8px;
    height: auto;
    min-height: 44px; /* Guarantees comfortable touch target height */
    vertical-align: middle;
    white-space: normal; /* Allows long transaction names to wrap */
    word-break: break-word;
    font-size: var(--fs-mobile-normal-text);
    color: #2c3e50;
}

/* Undo Button Styling (Text "Undo" aligned right) */

/* Hide the default '✕' icon */
.history-table .undo-btn .undo-icon {
    display: none; 
}

.history-table .undo-btn {
    width: auto; /* Let the text dictate the width */
    height: 32px;
    padding: 0 8px; 
    border-radius: 12px; /* Pill shape looks best for text buttons */
    background: #f8f9fa;
    border: 1px solid #e1e5e9;
    color: #7f8c8d;
    font-size: 0.95rem; 
    font-weight: 600;
    display: inline-flex; /* Allows the parent's text-align:right to push it */
    align-items: center;
    justify-content: center;
    margin: 0; 
    transition: all 0.2s ease;
}

/* Inject the "Undo" text via CSS */
.history-table .undo-btn::after {
    content: "Undo";
}

/* Tactile feedback when tapped */
.history-table .undo-btn:active:not(.disabled) {
    background: #ffeaea;
    border-color: #e74c3c;
    color: #e74c3c;
    transform: scale(0.95);
}

/* Ensure disabled state (greyed out) works perfectly for the text */
.history-table .undo-btn.disabled {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    color: #ced4da !important;
    opacity: 0.6;
    cursor: not-allowed;
}

.account-row {
    font-size: var(--fs-mobile-account-row);
}

.statement-section-header {
    font-size: var(--fs-mobile-account-row);
}



    /* Onboarding Mobile adjustments */
    .onboarding-dialog {
        width: 95%;
        max-width: none;
        margin: 16px;
    }
    .onboarding-header h2 {
        font-size: 1.1em;
    }
    .onboarding-body {
        padding: 16px 20px;
    }
    .onboarding-footer {
        padding: 0 20px 20px;
    }




.metrics-content {
    justify-content: center; 
    gap: 12px;               
}

.metric-card {
    flex: 0 0 75%;          
    max-width: min(75%, 400px); /* Prevents cards from looking too stretched on larger phones */
}

.metric-label {
    font-size: var(--fs-mobile-metric-label);
}

/* ============================================
    MOBILE MODAL (Bottom Sheet Style)
    ============================================ */
    #transactionModalOverlay {
        background: rgba(0, 0, 0, 0.5) !important; /* Restore the dimmed backdrop */
        align-items: flex-end;
        justify-content: center;
        padding: 0;
    }
    
    #transactionModalOverlay .modal-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        max-height: 90vh; /* Leaves a little gap at the top */
        border-radius: 16px 16px 0 0; /* Rounded top corners only */
        left: 0 !important;
        bottom: 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
    }
}


/* Mobile adjustments for reset modal */
@media (max-width: 767px) {
    .reset-modal-card {
        width: 95%;
        max-width: none;
        margin: 16px;
    }
    .reset-modal-footer {
        flex-direction: column-reverse; /* Puts the primary action at the bottom for thumb reach */
    }
    .reset-modal-footer button {
        width: 100%;
        min-height: 44px; /* Good touch target */
    }
}



/* Remove hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    .operation-item:hover {
        background: white;
        border-color: var(--neutral-border);
    }
    .operation-item:active {
        background: #f0f7ff;
        border-color: #3498db;
    }
    .metric-card.metric-clickable:hover {
        transform: none;
        box-shadow: none;
    }
    .metric-card.metric-clickable:active {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
}