/* CSS Variables for Main Colors */
:root {
    --main-color: #002415; /* Dark Green/Black - Your Brand Color */
    --accent-color: #28a745; /* Green for success/primary actions */
    --secondary-button-color: #6c757d; /* Grey for secondary actions */
    --tertiary-button-color: #ADD8E6; /* Light blue for documentation */
    --primary-text-color: #333;
    --light-bg: #f8f9fa;
    --border-color: #eee;
    --highlight-color: #e6f7ff; /* Light blue for highlighted items */
    --main-info-header-color: #007bff; /* A distinct blue for info block headers */
    /* Add a darker variant of main color for hover states */
    --primary-dark: color-mix(in srgb, var(--main-color), black 15%);
}

/* General Styling & Mobile Full Screen */
html, body {
    height: 100%; /* Ensure full height */
    width: 100%;  /* Ensure full width */
    margin: 0;
    padding: 0;
    overflow: hidden; /* Hide scrollbars, manage scrolling within components */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f2f5;
    color: var(--primary-text-color);
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align to top initially, will center page on desktop */
    box-sizing: border-box; /* Global box-sizing */
}

/* Page Management */
.page {
    width: 100vw; /* Take full viewport width on mobile */
    height: 100vh; /* Take full viewport height on mobile */
    background-color: #fff;
    box-shadow: none; /* No box shadow for full screen on mobile */
    border-radius: 0; /* No border-radius for full screen on mobile */
    margin: 0;
    overflow: hidden; /* Hide page scrollbars, manage within sections */
    display: none; /* Hidden by default, JS controls visibility */
    flex-direction: column;
}

.page.active {
    display: flex;
}

/* Login Page (Centered on Screen) */
#login-page {
    justify-content: center;
    align-items: center;
    background-color: var(--main-color); /* Full page background color on mobile */
    color: white;
}

.login-container {
    padding: 30px;
    text-align: center;
    width: 100%; /* Full width on small mobile screens */
    max-width: 380px; /* Constrain max width for larger mobiles/tablets */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* Shadow even on mobile for better visibility */
    color: var(--primary-text-color);
    box-sizing: border-box; /* Ensure padding is included in width */
    margin: 20px; /* Add some margin on smaller screens to prevent flush edges */
}

.company-logo {
    max-width: 180px;
    height: auto;
    margin-bottom: 25px;
}

.login-container h2 {
    color: var(--main-color);
    margin-bottom: 25px;
    font-size: 1.8em;
}

.input-group {
    margin-bottom: 20px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
    font-size: 0.95em;
}

.login-container input[type="text"] {
    width: 100%; /* Full width for inputs */
    padding: 14px 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    box-sizing: border-box; /* Crucial for full width */
    -webkit-appearance: none;
}
.login-container input[type="text"]:focus {
    outline: none;
    border-color: var(--main-info-header-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

.login-container button {
    background-color: var(--main-color);
    color: white;
    padding: 14px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease, transform 0.1s ease;
    width: 100%;
    margin-top: 10px;
}
.login-container button:hover {
    background-color: var(--primary-dark);
}
.login-container button:active {
    transform: translateY(1px);
    background-color: color-mix(in srgb, var(--primary-dark), black 10%);
}

.error-message {
    margin-top: 15px;
    font-weight: bold;
    color: #dc3545;
}

.hint {
    margin-top: 25px;
    font-size: 0.85em;
    color: #777;
    text-align: left;
    line-height: 1.4;
    background-color: #f8f9fa;
    border-left: 4px solid var(--main-color);
    padding: 10px 15px;
    border-radius: 4px;
}

/* Main App Page Layout */
#app-page {
    position: relative; /* For fixed/sticky header relative to page */
    flex-direction: column;
}

.app-header {
    background-color: var(--main-color);
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between; /* Distribute items */
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 10;
    flex-shrink: 0;
    height: 60px;
    width: 100%;
    /* position: sticky added in media query for desktop */
}

.header-title {
    margin: 0;
    font-size: 1.4em;
    flex-grow: 1; /* Allow it to take available space */
    text-align: center;
    white-space: nowrap; /* Prevent wrapping on mobile */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis for long titles */
    min-width: 0; /* Allow shrinking below content size if necessary */
}

#user-info {
    font-size: 0.8em;
    opacity: 0.8;
    flex-shrink: 0; /* Prevent shrinking too much */
    order: -1; /* Place it first in the flex order for mobile */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 25%; /* Limit width on mobile to avoid squashing title */
    text-align: left;
    min-width: 0; /* Allow shrinking below content size if necessary */
}

.header-button {
    background: none;
    border: none;
    color: white;
    font-size: 1em;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    -webkit-appearance: none;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0; /* Prevent shrinking */
}
.header-button i {
    font-size: 1.1em;
}
.header-button:hover {
    background-color: color-mix(in srgb, var(--main-color), white 10%);
}
.header-button:active {
    background-color: color-mix(in srgb, var(--main-color), white 20%);
    transform: translateY(1px);
}
/* #logout-button is already flex-shrink: 0 due to .header-button */
/* #logout-button { margin-left: auto; } No need for specific margin-left here with space-between */

/* Main Content Wrapper (Controls & Results) */
.main-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* Stack vertically on mobile */
    overflow-y: auto; /* Enable scroll for entire content on mobile */
}

/* Controls Sidebar */
.controls-sidebar {
    background-color: var(--light-bg);
    padding: 20px;
    flex-shrink: 0; /* Prevent shrinking on desktop if not enough space */
    border-bottom: 1px solid var(--border-color); /* Separator on mobile */
    box-sizing: border-box; /* Ensure padding is included */
}

.control-group {
    margin-bottom: 15px;
}
.control-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.control-group label i {
    color: var(--main-info-header-color);
    font-size: 1.1em;
}

.controls-sidebar select,
.controls-sidebar input[type="text"],
.controls-sidebar input[type="date"] {
    width: 100%; /* Full width for inputs/selects */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95em;
    box-sizing: border-box; /* Crucial for full width */
    -webkit-appearance: none; /* For consistent styling on iOS */
    background-color: white;
}
.controls-sidebar select:focus,
.controls-sidebar input[type="text"]:focus,
.controls-sidebar input[type="date"]:focus {
    outline: none;
    border-color: var(--main-info-header-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}
.controls-sidebar select[disabled],
.controls-sidebar input[disabled],
.controls-sidebar button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #e9e9e9;
}


/* Action Buttons */
.primary-action-button,
.secondary-action-button,
.tertiary-action-button {
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 15px;
    box-sizing: border-box; /* Ensure padding is included */
}

.primary-action-button {
    background-color: var(--main-color);
    color: white;
}
.primary-action-button:hover {
    background-color: var(--primary-dark);
}
.primary-action-button:active {
    transform: translateY(1px);
    background-color: color-mix(in srgb, var(--primary-dark), black 10%);
}

.secondary-action-button {
    background-color: var(--secondary-button-color);
    color: white;
}
.secondary-action-button:hover {
    background-color: color-mix(in srgb, var(--secondary-button-color), black 10%);
}
.secondary-action-button:active {
    transform: translateY(1px);
    background-color: color-mix(in srgb, var(--secondary-button-color), black 20%);
}

.tertiary-action-button {
    background-color: var(--tertiary-button-color);
    color: var(--main-color);
    border: 1px solid color-mix(in srgb, var(--tertiary-button-color), black 10%);
}
.tertiary-action-button:hover {
    background-color: color-mix(in srgb, var(--tertiary-button-color), black 10%);
}
.tertiary-action-button:active {
    transform: translateY(1px);
    background-color: color-mix(in srgb, var(--tertiary-button-color), black 20%);
}


.document-search-group {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    gap: 10px;
    align-items: flex-end;
    margin-top: 15px;
}
.document-search-group label {
    width: 100%; /* Label takes full width on mobile */
    margin-bottom: 5px; /* Adjust spacing */
}
.document-search-group input {
    flex-grow: 1; /* Allow input to take available space */
    width: auto; /* Override default 100% width, let flex control */
    min-width: 100px; /* Minimum width for the input field */
}
.document-search-group button {
    flex-shrink: 0; /* Prevent button from shrinking */
    width: auto; /* Take natural width */
    margin-top: 0; /* Remove top margin */
    padding: 10px 15px; /* Adjust button size */
    font-size: 0.9em;
}

.separator {
    border: none;
    border-top: 1px dashed var(--border-color);
    margin: 25px 0;
}

.dynamic-filters {
    margin-top: 15px;
    margin-bottom: 15px;
}
.dynamic-filters label {
    margin-bottom: 8px;
}

/* Results Area */
.results-area {
    flex-grow: 1;
    background-color: #fcfcfc;
    padding: 20px;
    overflow-y: auto; /* Scroll for results content */
    box-sizing: border-box; /* Ensure padding is included */
}

.results-content p.initial-message {
    text-align: center;
    color: #888;
    margin-top: 50px;
    font-style: italic;
}

.info-block {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    font-size: 0.9em;
}

.info-block h3, .info-block h4 {
    margin-top: 0;
    color: var(--main-info-header-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2em;
}

.info-block h4 {
    font-size: 1.1em;
}

.info-block p {
    margin-bottom: 6px;
    line-height: 1.4;
}

.info-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-block li {
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 8px 12px;
    margin-bottom: 6px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 0.85em;
    transition: background-color 0.2s ease;
    gap: 5px; /* Add gap for flex items inside li */
}

.info-block li strong {
    color: var(--main-color);
}

.info-block li span.status-paye { color: var(--accent-color); font-weight: bold; }
.info-block li span.status-partiel { color: #ffc107; font-weight: bold; }
.info-block li span.status-impaye, .info-block li span.status-echue { color: #dc3545; font-weight: bold; }

.alert-message {
    color: #dc3545;
    font-weight: bold;
    background-color: #ffebe6;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #dc3545;
    margin-top: 10px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.alert-message i {
    font-size: 1.1em;
}

.chart-container {
    margin-top: 15px;
    background-color: #fefefe;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 10px;
    position: relative;
    height: 200px; /* FIXED HEIGHT FOR MOBILE CHART */
    width: 100%;
    box-sizing: border-box;
}
.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box;
}
.chart-container h5 {
    margin-top: 0;
    font-size: 1em;
    color: #555;
    text-align: center;
    margin-bottom: 10px;
}

.hidden {
    display: none !important;
}

/* Desktop Layout (Min-width 769px) */
@media (min-width: 769px) {
    body {
        justify-content: center;
        align-items: center;
        overflow: hidden; /* Hide main body scroll bar when flexed */
    }

    .page {
        max-width: 1200px;
        height: calc(100vh - 40px); /* Adjust height for desktop page within viewport */
        min-height: 600px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        border-radius: 8px;
        margin: 20px auto; /* Center page horizontally */
    }

    #login-page {
        background-color: #f0f2f5; /* Desktop login page background */
    }

    .login-container {
        box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Keep shadow for desktop */
        margin: 0; /* Remove specific mobile margin */
    }

    .app-header {
        position: sticky; /* Make header sticky on desktop */
        top: 0;
        /* Revert user-info order for desktop */
        justify-content: space-between; /* Ensure items are distributed */
    }
    #user-info {
        order: 0; /* Reset order to default for desktop (first item) */
        max-width: none; /* Remove max-width restriction */
        flex-basis: auto; /* Allow natural sizing */
        text-align: left;
    }
    .header-title {
        white-space: normal; /* Allow title to wrap on desktop if needed */
        flex-grow: 1; /* Still takes available space */
    }

    .main-content-wrapper {
        flex-direction: row; /* Side-by-side for desktop */
        height: calc(100% - 60px); /* Account for fixed header height */
        overflow: hidden; /* Manage scrolling inside panels */
    }

    .controls-sidebar {
        flex: 0 0 320px; /* Fixed width sidebar, prevent shrinking */
        border-right: 1px solid var(--border-color);
        border-bottom: none; /* No bottom border */
        overflow-y: auto; /* Scrollable if controls overflow */
        padding: 25px; /* Larger padding for desktop */
    }

    .results-area {
        flex-grow: 1; /* Results area takes remaining space */
        overflow-y: auto; /* Make results area independently scrollable */
        padding: 25px; /* Larger padding for desktop */
    }
    .info-block {
        padding: 20px;
    }
    .info-block h3, .info-block h4 {
        font-size: 1.3em;
    }
    .info-block p, .info-block li {
        font-size: 0.9em;
    }

    .document-search-group {
        align-items: flex-end;
        gap: 8px;
    }
    .document-search-group label {
        width: auto; /* Label takes auto width on desktop */
    }
    .document-search-group input {
        min-width: 80px; /* Adjust if needed */
    }

    /* Charts can be a bit taller on desktop */
    .chart-container {
        height: 250px; /* Taller on desktop */
    }
}