/* --- START OF FILE overview_simple.css --- */
body {
    background-color: #1c1c1e;
    /* Dark background like example */
    color: #e0e0e0;
    /* Assuming base font from style.css or Bootstrap defaults */
}

/* Header with Logo and Title */
.overview-header-container {
    /* New wrapper for the logo and title block */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Or flex-start if you prefer left alignment */
    margin-bottom: 0.5rem;
    /* Space below header block */
}



h2.page-title-text {
    /* Class for "[ House Overview ]" */
    font-size: 1.8rem;
    /* Mobile title size */
    color: #e9ecef;
    margin-bottom: 0;
    /* Remove default h2 margin */
    font-weight: 500;
}

/* Last updated time text */
#lastUpdatedTime {
    text-align: center;
    /* Center if header block is also centered */
    font-size: 0.85rem;
}


/* House Cards Grid */
#houseSummaryCardsContainer .col {
    display: flex;
    flex-direction: column;
    /* g-3 on the row provides spacing, extra margin-bottom on .col can be redundant or used for fine-tuning */
}

.summary-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.summary-card-link:hover,
.summary-card-link:focus {
    text-decoration: none;
    color: inherit;
}

.summary-card {
    background-color: #2a2a2e;
    border: 1px solid #3a3a3e;
    border-radius: 12px;
    color: #e0e0e0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.summary-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.summary-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.summary-card-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #b0b0b0;
    display: flex;
    /* To align status dot and text */
    align-items: center;
}

.summary-card-title .house-number {
    font-weight: bold;
    color: #e0e0e0;
}

.summary-card-title .entry-count {
    font-size: 0.8em;
    color: #888;
    margin-left: 0.3rem;
}

/* Status Dot Styles */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
    vertical-align: middle;
    /* Helps if text next to it wraps */
}

.status-good {
    background-color: #4CAF50;
}

/* Green */
.status-warning {
    background-color: #FFC107;
}

/* Yellow */
.status-alert {
    background-color: #F44336;
}

/* Red (if you add this status) */
.status-nodata {
    background-color: #757575;
}

/* Grey for no data */
.status-unknown {
    background-color: #607D8B;
}

/* Bluish Grey for unknown */

.recent-issues-badge {
    font-size: 0.65rem;
    padding: 0.2em 0.45em;
    /* Adjusted padding */
    font-weight: 500;
}

.summary-card-metric-label {
    font-size: 0.65rem;
    /* Smaller label */
    color: #9e9e9e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.15rem;
    flex-shrink: 0;
    text-align: left;
    /* Align label to the left above the metric */
}

.summary-card-metric {
    font-size: 1.7rem;
    font-weight: 400;
    /* Slightly less bold */
    color: #f5f5f5;
    margin-bottom: 0.5rem;
    line-height: 1.1;
    flex-shrink: 0;
    text-align: left;
    /* Align metric to the left */
}

.summary-card-metric .unit {
    font-size: 0.55em;
    /* Smaller unit */
    color: #b0b0b0;
    margin-left: 3px;
}

.summary-card-chart-container {
    width: 100%;
    height: 75px;
    /* Adjusted chart height slightly */
    flex-grow: 1;
    /* Allow chart container to take remaining space */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 0.25rem;
    /* Small space above chart */
    flex-shrink: 0;
}

.summary-card-chart-container canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.summary-card-footer {
    font-size: 0.7rem;
    /* Smaller footer text */
    color: #9e9e9e;
    margin-top: 0.75rem;
    border-top: 1px solid #3a3a3e;
    padding-top: 0.6rem;
    text-align: center;
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (min-width: 768px) {

    /* md breakpoint and up (Desktop Logo Size) */
    #overviewPageLogo {
        width: 55px;
    }

    h2.page-title-text {
        font-size: 2rem;
    }
}

@media (min-width: 992px) {

    /* lg breakpoint and up (Larger Desktop Logo Size) */
    #overviewPageLogo {
        width: 65px;
    }

    h2.page-title-text {
        font-size: 2.2rem;
    }
}


@media (max-width: 575px) {

    /* Extra small devices */
    .summary-card-metric {
        font-size: 1.4rem;
    }

    .summary-card-chart-container {
        height: 60px;
    }

    .summary-card {
        padding: 0.75rem;
    }

    .summary-card-title {
        font-size: 0.85rem;
    }

    .summary-card-footer {
        font-size: 0.65rem;
    }

    .overview-header-container {
        flex-direction: column;
        /* Stack logo and title on very small screens */
        align-items: center;
        text-align: center;
    }

    #overviewPageLogo {
        margin-right: 0;
        margin-bottom: 0.25rem;
    }

    h2.page-title-text {
        font-size: 1.5rem;
        margin-left: 0;
    }
}

.overview-logo {
    width: 50px;
    /* Default size for mobile - adjust as needed */
    height: auto;
    /* Maintain aspect ratio */
    max-width: 100%;
    /* Ensure it doesn't overflow its container (img-fluid behavior) */
}

h2 {
    /* Targetting your h2 specifically, or give it a class */
    font-size: 1.8rem;
    /* Adjust as needed */
    color: #e0e0e0;
}

/* For desktop screens (e.g., Bootstrap's 'md' breakpoint and up) */
@media (min-width: 768px) {
    .overview-logo {
        width: 70px;
        /* Slightly larger for desktop, but still a fixed max */


    }

    h2 {
        font-size: 2.2rem;
        /* Larger h2 on desktop */
    }
}

/* --- END OF FILE overview_simple.css --- */