/**
 * Version Notes:
 * File: /frontend/css/frontend-style.css
 * Version: 0.0.1
 * Last Modified: 2025-11-11 12:30 PM
 * Changes:
 * - Initial creation.
 * - Merged styles from both shortcode handlers.
 * - Styles are scoped using '.p45-compounding-wrapper' and '.p45-cash-flow-results'
 * to prevent conflicts.
 * - Shared styles (like .p45-styles-wrapper) are defined globally.
 */

/* =================================================================
 * 1. SHARED STYLES (Used by Both Shortcodes)
 * ================================================================= */
:root {
    --brand-blue: #3ba0da;
    --text-on-dark: #f0f0f0;
    --dark-bg-accent: #2c2c2c;
}

/* Outer wrapper for fonts, errors, and spacing */
.p45-styles-wrapper {
    width: 100%;
    clear: both;
    background-color: transparent;
    margin-bottom: 20px;
    box-sizing: border-box;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    border: none;
}
.p45-styles-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* Shared error box */
.p45-styles-wrapper .frm-error {
    background: #fbeaea;
    border: 1px solid #e0b4b4;
    color: #b32d2d;
    padding: 10px;
    border-radius: 4px;
    margin: 0;
    margin-bottom: 15px;
}

/* Shared Summary Box (base styles) */
.p45-styles-wrapper .p45-summary-box {
    box-sizing: border-box;
    background: var(--dark-bg-accent);
    border-left: 5px solid var(--brand-blue);
    padding: 15px 20px;
    border-radius: 5px;
    color: var(--text-on-dark);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    margin-bottom: 20px;
}

.p45-styles-wrapper .p45-summary-box h2 {
    margin-top: 0;
    color: var(--brand-blue);
    font-size: 1.5em;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.p45-styles-wrapper .p45-summary-box .p45-start-date-subhead {
    font-size: 1.1em;
    color: var(--brand-blue) !important;
    font-weight: 700;
    margin-top: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

.p45-styles-wrapper .p45-summary-box p {
    color: var(--text-on-dark);
    margin-bottom: 5px;
    margin-top: 0;
    padding: 0;
}

.p45-styles-wrapper .p45-summary-box strong {
    color: #fff;
}

/* Shared label/value styles */
.p45-styles-wrapper .p45-summary-box .p45-cf-label {
    margin-top: 10px;
    font-size: 0.95em;
}
.p45-styles-wrapper .p45-summary-box .p45-cf-value {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--brand-blue);
    margin-bottom: 5px;
}


/* Shared Results Table (base styles) */
.p45-styles-wrapper .p45-results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    background-color: var(--dark-bg-accent);
    color: var(--text-on-dark);
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

/* Theme Conflict Fix */
.p45-styles-wrapper .p45-results-table thead { display: table-header-group; }
.p45-styles-wrapper .p45-results-table tbody { display: table-row-group; }
.p45-styles-wrapper .p45-results-table tfoot { display: table-footer-group; }

.p45-styles-wrapper .p45-results-table th,
.p45-styles-wrapper .p45-results-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #444;
    text-align: right;
}

.p45-styles-wrapper .p45-results-table th {
    background-color: var(--brand-blue);
    color: white;
    text-transform: uppercase;
    font-size: 0.9em;
}

.p45-styles-wrapper .p45-results-table th:first-child,
.p45-styles-wrapper .p45-results-table td:first-child {
    text-align: left;
}

.p45-styles-wrapper .p45-results-table tbody tr:nth-child(even) { background-color: #383838; }
.p45-styles-wrapper .p45-results-table tbody tr:nth-child(odd) { background-color: var(--dark-bg-accent); }

/* Shared row hiding class */
.p45-styles-wrapper .p45-results-table .p45-row-hidden {
    display: none;
}

/* Shared current month highlight (border) */
.p45-styles-wrapper .p45-results-table .current-month-highlight {
    font-weight: bold;
    /* The border-left-color is set dynamically in PHP for cash-flow */
    /* The background-color is set dynamically in PHP for compounding */
}
.p45-styles-wrapper .p45-results-table .current-month-highlight td {
    border-bottom-color: var(--brand-blue);
}

/* Shared footer row */
.p45-styles-wrapper .p45-results-table tfoot .total-row {
    font-weight: bold;
    background-color: #004d66;
    color: white;
    border-top: 2px solid var(--brand-blue);
}
.p45-styles-wrapper .p45-results-table tfoot .total-row td {
    text-align: right;
}

/* Shared Toggle Button */
.p45-styles-wrapper .p45-toggle-button {
    background-color: var(--brand-blue);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    margin: 10px auto 15px auto;
    display: block;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.p45-styles-wrapper .p45-toggle-button:hover {
    background-color: #2b7eaa; /* Darker blue */
}


/* =================================================================
 * 2. COMPOUNDING SHORTCODE STYLES (.p45-compounding-wrapper)
 * ================================================================= */

/* Container for Summary and Chart */
.p45-compounding-wrapper .p45-summary-chart-container {
    display: flex;
    flex-wrap: nowrap; /* Forces side-by-side */
    gap: 20px;
    margin-bottom: 20px;
    justify-content: space-around;
    width: 100%;
}

/* Summary Box (Left) */
.p45-compounding-wrapper .p45-summary-box {
    flex: 1 1 auto; /* Be flexible */
    min-width: 250px; /* Allow shrinking */
    margin-bottom: 0; /* Container provides margin */
}

/* Chart Box (Right) */
.p45-compounding-wrapper .p45-chart-box {
    flex: 0 0 300px; /* Be fixed width */
    box-sizing: border-box;
    padding: 15px 20px;
    background: var(--dark-bg-accent);
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    text-align: center;
    border-left: 5px solid; /* Color set in PHP */
}

.p45-compounding-wrapper .p45-chart-box h3 {
    color: var(--brand-blue);
    margin-top: 0;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
    margin-bottom: 15px;
    font-size: 1.5em;
}

/* Pie Chart Wrapper */
.p45-compounding-wrapper .p45-chart-wrapper {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}

/* Compounding Table Specifics */
.p45-compounding-wrapper .p45-results-table th:nth-child(1),
.p45-compounding-wrapper .p45-results-table th:nth-child(2) { text-align: center; }
.p45-compounding-wrapper .p45-results-table td:first-child, 
.p45-compounding-wrapper .p45-results-table td:nth-child(2) { text-align: center; }

/* Compounding highlight uses background color */
.p45-compounding-wrapper .p45-results-table .current-month-highlight {
    /* background-color set in PHP <style> block */
    color: #000 !important; /* Black text for light backgrounds */
}


/* =================================================================
 * 3. CASH FLOW SHORTCODE STYLES (.p45-cash-flow-results)
 * ================================================================= */

/* Cash Flow Table Specifics */
.p45-cash-flow-results .p45-results-table th:first-child,
.p45-cash-flow-results .p45-results-table td:first-child {
    text-align: left;
}

/* Cash flow highlight uses border */
.p45-cash-flow-results .p45-results-table .current-month-highlight {
    /* border-left-color set in PHP <style> block */
    border-left-width: 4px;
    border-left-style: solid;
    padding-left: 11px;
}


/* =================================================================
 * 4. MOBILE RESPONSIVE STYLES (SHARED)
 * ================================================================= */

/* Responsive for Compounding chart/summary stack */
@media screen and (max-width: 650px) {
    .p45-compounding-wrapper .p45-summary-chart-container { 
        flex-direction: column; 
    }
    .p45-compounding-wrapper .p45-chart-box {
        flex: 1 1 300px; /* Allow flexible wrapping */
    }
}

/* Responsive for Tables (card view) */
@media screen and (max-width: 600px) {
    .p45-styles-wrapper .p45-results-table thead { display: none !important; }
    
    .p45-styles-wrapper .p45-results-table, 
    .p45-styles-wrapper .p45-results-table tbody, 
    .p45-styles-wrapper .p45-results-table tr, 
    .p45-styles-wrapper .p45-results-table td { 
        display: block !important; 
        width: 100%; 
    }
    
    .p45-styles-wrapper .p45-results-table tr {
        margin-bottom: 10px; 
        border: 1px solid #555; 
        border-radius: 5px; 
        box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
        background-color: #333;
    }
    
    .p45-styles-wrapper .p45-results-table td {
        text-align: right !important; 
        padding-left: 50% !important; 
        position: relative; 
        border: none;
        border-bottom: 1px solid #444;
        color: var(--text-on-dark);
    }
    .p45-styles-wrapper .p45-results-table tr td:last-child {
        border-bottom: none;
    }
    
    .p45-styles-wrapper .p45-results-table td::before {
        content: attr(data-label); 
        position: absolute; 
        left: 0; 
        width: 45%; 
        padding-left: 15px; 
        font-weight: bold; 
        text-align: left; 
        color: var(--brand-blue);
    }
    
    /* Footer row responsiveness */
    .p45-styles-wrapper .p45-results-table tfoot .total-row { 
        display: table-row !important; 
        border: none; 
        background: none; 
        box-shadow: none; 
    }
    .p45-styles-wrapper .p45-results-table tfoot .total-row td {
        display: table-cell !important; 
        padding: 12px 15px !important;
        position: static; 
        width: auto; 
        border: none;
        background-color: #004d66 !important;
        color: white;
    }
    .p45-styles-wrapper .p45-results-table tfoot .total-row td::before { 
        content: none; 
    }
    .p45-styles-wrapper .p45-results-table tfoot .total-row td:first-child {
        text-align: left !important;
    }
    
    /* Mobile row hiding */
    .p45-styles-wrapper .p45-results-table tr.p45-row-hidden {
        display: none !important;
    }

    /* Mobile labels for Cash Flow */
    .p45-cash-flow-results .p45-results-table td:nth-of-type(1)::before { content: "Month"; }
    .p45-cash-flow-results .p45-results-table td:nth-of-type(2)::before { content: "Rate"; }
    .p45-cash-flow-results .p45-results-table td:nth-of-type(3)::before { content: "Cash Flow"; }
}