/* --- Body Background Color --- */
body {
    background-color: #1E376C;
}
/* --- Typography & Titles --- */
.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
    margin-top: 0px;
    color: #002c77;
    font-family: 'Source Sans Pro', sans-serif;
}
@media (min-width: 768px) {
    .page-title { font-size: 2rem; }
}
[data-bs-theme="dark"] .page-title {
    color: #cbd5e1;
}

/* --- Accessible Text Colors --- */
.text-accessible-muted {
    color: #4a5568 !important;
}
[data-bs-theme="dark"] .text-accessible-muted {
    color: #cbd5e1 !important;
}
.data-text-color {
    color: rgb(0, 44, 119) !important;
}
[data-bs-theme="dark"] .data-text-color {
    color: rgb(203, 213, 225) !important;
}

/* --- Header Box with Transparent Image Effect --- */
.header-box {
    position: relative;
    overflow: hidden;
}
.header-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://chescoplanning.org/Landscapes3/Images/Intro-Top.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    z-index: 1;
}
[data-bs-theme="dark"] .header-box::before {
    opacity: 0.12;
}
.header-box > * {
    position: relative;
    z-index: 2;
}

/* --- Table Styles --- */
.table-stacked {
    width: 100%;
}
[data-bs-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #F2F2F2;
}
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.03);
}
.table-stacked tbody tr.row-clickable {
    transition: background-color 0.2s;
}
.table-stacked tbody tr.row-clickable:hover {
    background-color: rgba(0, 44, 119, 0.06) !important;
}
[data-bs-theme="dark"] .table-stacked tbody tr.row-clickable:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- Sort Header Buttons --- */
.sort-header-btn {
    background: none;
    border: none;
    padding: 0;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    width: auto;
    text-decoration: none;
    line-height: 1.2;
}
.sort-header-btn:focus-visible {
    outline: 2px solid #002c77;
    outline-offset: 2px;
    border-radius: 2px;
}
[data-bs-theme="dark"] .sort-header-btn:focus-visible {
    outline-color: #cbd5e1;
}
.sort-icon {
    font-size: 0.85em;
    line-height: 1;
}

.sort-icons button {
    opacity: 0.75;
    transition: opacity 0.2s;
    line-height: 1;
    color: currentColor;
}
.sort-icons button:hover, .sort-icons button:focus {
    opacity: 1;
    outline: 2px solid #002c77;
    outline-offset: 2px;
}

/* --- Cards & UI Elements --- */
.filter-card {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
}

.btn-outline-adaptive {
    color: rgb(33, 37, 41);
    border-color: rgb(33, 37, 41);
    background-color: transparent;
}
.btn-outline-adaptive:hover {
    color: #fff;
    background-color: rgb(33, 37, 41);
}
[data-bs-theme="dark"] .btn-outline-adaptive {
    color: rgb(203, 213, 225);
    border-color: rgb(203, 213, 225);
}
[data-bs-theme="dark"] .btn-outline-adaptive:hover {
    color: rgb(33, 37, 41);
    background-color: rgb(203, 213, 225);
}

/* --- Announcements Section Styles (Brighter ADA Compliant Colors) --- */
.announcement-label {
    color: #0052cc;
    font-weight: 800;
    display: block;
    margin-bottom: 0.25rem;
}
[data-bs-theme="dark"] .announcement-label {
    color: #93c5fd; 
}
.announcement-text {
    font-weight: 600;
    white-space: pre-line;
    display: block;
    margin: 0 auto;
}

/* Alternating Paragraph Shades (Light Mode) */
.announcement-para:nth-child(1), .announcement-para:nth-child(17) { color: #cc0000; } 
.announcement-para:nth-child(3), .announcement-para:nth-child(19) { color: #a30000; } 
.announcement-para:nth-child(5), .announcement-para:nth-child(21) { color: #800000; } 
.announcement-para:nth-child(7), .announcement-para:nth-child(23) { color: #5c0000; } 
.announcement-para:nth-child(9), .announcement-para:nth-child(25) { color: #b80000; }
.announcement-para:nth-child(11), .announcement-para:nth-child(27) { color: #8f0000; }
.announcement-para:nth-child(13), .announcement-para:nth-child(29) { color: #6b0000; }
.announcement-para:nth-child(15), .announcement-para:nth-child(31) { color: #470000; }

/* Alternating Paragraph Shades (Dark Mode) */
[data-bs-theme="dark"] .announcement-para:nth-child(1), [data-bs-theme="dark"] .announcement-para:nth-child(17) { color: #ff8080; } 
[data-bs-theme="dark"] .announcement-para:nth-child(3), [data-bs-theme="dark"] .announcement-para:nth-child(19) { color: #ff9999; } 
[data-bs-theme="dark"] .announcement-para:nth-child(5), [data-bs-theme="dark"] .announcement-para:nth-child(21) { color: #ffb3b3; } 
[data-bs-theme="dark"] .announcement-para:nth-child(7), [data-bs-theme="dark"] .announcement-para:nth-child(23) { color: #ffcccc; } 
[data-bs-theme="dark"] .announcement-para:nth-child(9), [data-bs-theme="dark"] .announcement-para:nth-child(25) { color: #ff6666; }
[data-bs-theme="dark"] .announcement-para:nth-child(11), [data-bs-theme="dark"] .announcement-para:nth-child(27) { color: #ffa6a6; }
[data-bs-theme="dark"] .announcement-para:nth-child(13), [data-bs-theme="dark"] .announcement-para:nth-child(29) { color: #ffc0c0; }
[data-bs-theme="dark"] .announcement-para:nth-child(15), [data-bs-theme="dark"] .announcement-para:nth-child(31) { color: #ffd9d9; }


/* --- Announcement Paragraph Break (Decreased by 55%) --- */
.para-break {
    display: block;
    height: 0.45em;
    margin: 0;
    padding: 0;
}

/* --- Uniform Status Indicator Sizing --- */
.status-indicator {
    width: 100% !important;
    max-width: 210px !important;
    min-width: 140px !important;
    height: 32px !important;
    font-size: 0.975rem !important;
    padding-left: 0.575rem !important;
}

/* --- Input Wrappers & Clear Buttons (Desktop: Show on Hover Only) --- */
.input-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-width: 120px;
}
.input-wrapper .clear-btn {
    position: absolute;
    right: 0.25rem;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
}
.input-wrapper:hover .clear-btn,
.input-wrapper:focus-within .clear-btn {
    opacity: 1;
    visibility: visible;
}
.input-wrapper .clear-btn svg {
    width: 14px !important;
    height: 14px !important;
}
.input-wrapper .clear-btn:hover,
.input-wrapper .clear-btn:focus {
    opacity: 1;
}
.input-wrapper input {
    padding-right: 1.8rem !important;
}

/* --- Date/Time Icon Alignment & Spacing --- */
.input-wrapper input.date-input-flush,
.date-input-flush {
    position: relative;
    padding-right: 3.5rem !important;
    margin-left: 0 !important;
    text-align: left !important;
    box-sizing: border-box;
    background-color: transparent;
    min-width: 140px;
}
.date-input-flush::-webkit-date-and-time-value {
    text-align: left !important;
    margin-left: 0 !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
}
.date-input-flush::-webkit-datetime-edit,
.date-input-flush::-webkit-datetime-edit-fields-wrapper,
.date-input-flush::-webkit-datetime-edit-text,
.date-input-flush::-webkit-datetime-edit-month-field,
.date-input-flush::-webkit-datetime-edit-day-field,
.date-input-flush::-webkit-datetime-edit-year-field {
    margin-left: 0 !important;
}
.date-input-flush::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 1.8rem; 
    left: auto;
    cursor: pointer;
    display: block !important;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}
.date-input-flush::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
[data-bs-theme="dark"] .date-input-flush::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
}
[data-bs-theme="dark"] .date-input-flush::-webkit-calendar-picker-indicator:hover {
    filter: invert(1);
}

/* --- Mobile View Overrides (Always Visible & Wider Touch Target) --- */
@media (max-width: 767.98px) {
    .input-wrapper .clear-btn {
        opacity: 0.75 !important;
        visibility: visible !important;
    }
    .input-wrapper:hover .clear-btn,
    .input-wrapper:focus-within .clear-btn {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* --- Mobile Stacked Table Styles (Strict Spacing Matching mockups) --- */
@media (min-width: 768px) {
    .table-stacked {
        min-width: 600px;
    }
}
@media (max-width: 767.98px) {
    .table-responsive {
        overflow-x: visible !important;
    }
    .table-stacked, 
    .table-stacked thead, 
    .table-stacked tbody, 
    .table-stacked th, 
    .table-stacked td, 
    .table-stacked tr { 
        display: block; 
        width: 100% !important; 
    }
    
    .table-stacked thead tr {
        display: flex;
        flex-direction: column;
        border-bottom: 2px solid var(--bs-border-color);
        padding-bottom: 0.25rem;
        margin-bottom: 0.25rem;
        gap: 0;
    }
    .table-stacked thead th {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0.1rem 0 !important;
        margin: 0;
        line-height: 1.2;
        border: none !important;
    }
    
    .table-stacked tbody tr {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid var(--bs-border-color);
        padding: 8px 0;
        gap: 0;
    }
    .table-stacked td, .table-stacked th {
        border: none !important;
        padding: 0 !important; 
        text-align: left !important;
    }
    
    .table-stacked tbody th,
    .table-stacked tbody td:nth-child(n+2) {
        padding-left: 0.575rem !important;
        padding-bottom: 0.15rem !important;
    }
    
    .table-stacked td:nth-child(1) .status-indicator {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 4px !important;
        display: block;
        margin-bottom: 4px;
        box-sizing: border-box;
        height: auto !important;
        min-height: 28px !important;
        line-height: 28px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* ==========================================================================
   adminConsole.cfm Styles
   ========================================================================== */

.btn-reset-pass {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.2;
    min-height: 48px;
    min-width: 90px;
    white-space: normal;
}