/* General body styling */
body {
    background-color: #f8f9fa; /* Lighter grey background */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Ensure flex settings for sticky footer if needed */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1; /* Allows main content to push footer down */
}

/* Custom Colors */
:root {
    --app-primary-blue: #00AEEF; /* Main blue from example */
    --app-darker-blue: #0077B3;  /* Darker shade for hover/active */
    --app-bar-highlight: #6c757d; /* Grey for highlighted bar in charts */
}

/* Bootstrap component overrides */
.text-primary {
    color: var(--app-primary-blue) !important;
}
.bg-primary {
    background-color: var(--app-primary-blue) !important;
}
.btn-primary {
    background-color: var(--app-primary-blue);
    border-color: var(--app-primary-blue);
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--app-darker-blue) !important;
    border-color: var(--app-darker-blue) !important;
    box-shadow: none; /* Optional: remove default focus shadow if desired */
}
.btn-outline-primary {
    color: var(--app-primary-blue);
    border-color: var(--app-primary-blue);
}
.btn-outline-primary:hover,
.btn-check:checked + .btn-outline-primary {
    color: #fff;
    background-color: var(--app-primary-blue);
    border-color: var(--app-primary-blue);
}
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 174, 239, 0.5); /* Adjust focus ring color */
}

/* Navbar Styling */
.navbar-dark .navbar-brand {
    font-weight: bold;
}
.navbar-dark .nav-link.active {
    font-weight: bold;
}

/* Tabs styling (if used in other sections) */
.nav-tabs {
    border-bottom: 1px solid #dee2e6;
}
.nav-tabs .nav-link {
    color: #6c757d;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem; /* Adjust as needed */
}
.nav-tabs .nav-link.active {
    color: var(--app-primary-blue);
    border-bottom-color: var(--app-primary-blue);
    font-weight: bold;
    background-color: transparent;
}

/* Card Styling */
.card {
    margin-bottom: 1.5rem; /* Consistent spacing */
}
.card-header {
    /* Optional: background-color: #e9ecef; */
    font-weight: 500;
}

/* Form Styling */
.form-label {
    font-weight: 500;
    margin-bottom: 0.3rem;
    font-size: 0.875rem; /* Slightly smaller labels */
}
.form-text {
    font-size: 0.8rem;
}
/* Ensure readonly fields look distinct but readable */
input[readonly].form-control-sm, input[readonly].form-control {
    background-color: #e9ecef; /* Light grey background */
    opacity: 0.8; /* Slightly faded */
    cursor: not-allowed; /* Indicate non-editable */
}

/* Table Styling */
.table-sm th, .table-sm td {
    padding: 0.4rem; /* Adjust padding for smaller tables */
    font-size: 0.875rem; /* Smaller font in tables */
    vertical-align: middle; /* Align vertically */
}
.table th {
    font-weight: 600;
}
.table .text-end { /* Ensure text alignment works */
    text-align: right !important;
}
.table .text-center {
    text-align: center !important;
}

/* Specific Icons */
.bi-file-earmark-pdf-fill.text-danger {
    color: #dc3545 !important; /* Ensure red color */
}
.bi-file-earmark.text-muted {
    color: #6c757d !important; /* Ensure muted color */
}
.bi-check-circle-fill.text-success {
    color: #198754 !important;
}
.bi-x-circle-fill.text-danger {
     color: #dc3545 !important;
}
.bi-x-circle-fill.text-secondary {
     color: #6c757d !important;
}


/* Footer Styling */
footer.mt-auto { /* Ensures it sticks to bottom with flexbox */
    background-color: #e9ecef; /* Example footer background */
    font-size: 0.9rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Chart Containers (if using Chart.js or similar) */
.chart-container {
    position: relative;
    height: 300px; /* Example height, adjust as needed */
    width: 100%;
}
#consumptionChart, #costChart { /* Target specific charts */
    max-height: 300px; /* Ensure charts don't overflow cards */
}

/* Utility Classes (Add as needed) */
.small-caps {
    font-variant: small-caps;
}
.fst-italic{
    font-style: italic!important;
}

/* Responsive Adjustments (Example) */
@media (max-width: 768px) {
    h2 {
        font-size: 1.5rem; /* Smaller headings on small screens */
    }
    .table-sm th, .table-sm td {
        font-size: 0.8rem; /* Even smaller font in tables on small screens */
    }
}