/* =========================================================
   GLOBAL RESET / BASE
   ========================================================= */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column; /* 🔑 REQUIRED */
}

form {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}

/* Main scrolling area */
/*#MainContent {
    flex: 1 1 auto;
    overflow-y: auto;
}*/

/* Footer */
.site-footer {
    color:white;
    margin-top: auto;
    text-align: center;
    background: linear-gradient( to right, #1a3f6e, #3a6fa5, #1a3f6e );
    font-size: 1.5vh;
    padding: 2px 0;
}



/*.w3-container {
    padding-bottom: 24px;*/ /* breathing room for submit button */
/*}

.W3_Sticky_Footer {
    position: static;*/ /* IMPORTANT */
/*}*/


/*body {
    margin: 0;
    background-color: whitesmoke;
}

html {
    height: auto;
    overflow-y: auto;
}

body {
    min-height: 100vh;
    overflow: visible;
}


form {
    height: auto;
    min-height: 100%;
    overflow: visible;
}*/



/*form {
    height: auto;
}*/


/*html, body, form {
    height: 100%;
}*/

/*#MainContent {
    min-height: 0;
    height: auto;
    overflow: visible;
}*/

/*#MainContent {
    height: auto;
    min-height: 0;
    overflow: visible;
}
.w3-container {
    padding-bottom: 24px;*/ /* breathing room for submit button */
/*}*/



/*#MainContent {
    height: calc(100vh - 72px); 
}*/


/* =========================================================
   MAIN MENU (W3 BAR)
   ========================================================= */

.MainMenu {
    background-color: #F7EDD4;
    border-bottom: 1px solid #A9C9E5;
    height: 32px;
    line-height: 32px;
    padding: 0 8px;
    font-size: 12px;
    box-sizing: border-box;
}

    .MainMenu.w3-bar {
        min-height: 0 !important;
        padding: 0 !important;
    }

    .MainMenu .w3-bar-item,
    .MainMenu .w3-button {
        height: 32px;
        line-height: 32px;
        padding: 0 10px !important;
        margin: 0 !important;
        font-size: inherit;
        vertical-align: middle;
        background-color: transparent;
        color: #000000 !important;
    }

        .MainMenu .w3-button:hover,
        .MainMenu .w3-bar-item:hover {
            background-color: rgba(0,0,0,0.08);
        }

/* =========================================================
   MEDIA QUERIES
   ========================================================= */

@media (max-width: 600px) {
    body {
        color: blue;
    }
}

@media (min-width: 601px) and (max-width: 1279px) {

    fieldset {
        font-size: 10px;
    }

    .gvFont {
        font-size: 9px;
    }

    .stop-data, .stop-data-footer {
        font-size: 10px;
    }

    .MainMenu {
        font-size: 11px;
    }
}

@media (min-width: 1366px) and (max-width: 1600px) {

    fieldset {
        font-size: 12px;
    }

    .gvFont {
        font-size: 10px;
    }

    .stop-data, .stop-data-footer {
        font-size: 12px;
    }

    .MainMenu {
        font-size: 14px;
    }
}

@media (min-width: 1900px) {

    fieldset {
        font-size: 18px;
    }

    .gvFont {
        font-size: 11px;
    }

    .stop-data, .stop-data-footer {
        font-size: 16px;
    }

    .MainMenu {
        font-size: 15px;
    }
}
/* END OF MEDIA QUERIES*/

/* =========================================================
   GRIDVIEW (gvCADS)
   ========================================================= */

.blue-theme {
    width: 100%;
    border-collapse: collapse;
}

    /* Header */
    .blue-theme th {
        background: linear-gradient(to bottom, #2f5d8a, #1a3f6e);
        color: #f4f6f8;
        font-weight: 600;
        font-size: 8.5pt;
        text-align: center;
        white-space: nowrap;
        padding: 3px 4px;
        border: 1px solid #142a44;
    }

    /* Cells */
    .blue-theme td {
        background-color: #f5f8fc;
        color: #0f2a44;
        padding: 1px 2px;
        white-space: nowrap;
        border: 1px solid #c8d4e3;
    }

    /* Alternating rows */
    .blue-theme tr:nth-child(even) td {
        background-color: #eef3f9;
    }

    /* ==========================
   SELECTED GRID ROW (FIXED)
   ========================== */
    .blue-theme tr.aspNetSelected td,
    .blue-theme tr.aspNetSelected:nth-child(even) td,
    .blue-theme tr.aspNetSelected:nth-child(odd) td {
        background-color: #fff3b0 !important; /* muted yellow */
        color: #1a1a1a !important;
    }


/* =========================================================
   GRIDVIEW SELECT BUTTON
   ========================================================= */

.gvSelectBtn {
    font-size: 8pt;
    padding: 1px 6px;
    height: 18px;
    background-color: #e9edf3;
    border: 1px solid #7a8da6;
    color: #1a3f6e;
    cursor: pointer;
}

    .gvSelectBtn:hover {
        background-color: #dbe5f1;
    }

/* =========================================================
   STOP DATA PANELS
   ========================================================= */

.stop-data,
.stop-data-footer {
    display: none;
    background-color: lightskyblue;
    border: 1px solid gray;
    margin: 2px;
    justify-content: center;
    align-items: center;
}

    .stop-data.show,
    .stop-data-footer.show {
        display: flex;
        overflow: visible;
    }

    .stop-data-footer > div {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
    }

/* =========================================================
   DARK MODE
   ========================================================= */

body.dark-mode {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

.dark-mode fieldset,
.dark-mode .stop-data,
.dark-mode .stop-data-footer {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

.dark-mode .blue-theme th {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

.dark-mode .blue-theme td {
    background-color: #1e1e1e;
    color: #cccccc;
}

.dark-mode .blue-theme tr:nth-child(even) td {
    background-color: #252525;
}

body.dark-mode .MainMenu {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #444 !important;
}

    body.dark-mode .MainMenu .w3-button:hover {
        background-color: #333333 !important;
        color: #ffcc00 !important;
    }

/* FORCE theme toggle text visible in dark mode */
body.dark-mode #btnToggleTheme {
    color: #ffffff !important;
}

    /* Optional: subtle hover polish */
    body.dark-mode #btnToggleTheme:hover {
        color: #ffcc00 !important;
    }

/* FIX: ensure menu text is visible in dark mode */
body.dark-mode .MainMenu .w3-button,
body.dark-mode .MainMenu .w3-bar-item {
    color: #ffcc00 !important; /* soft gold */
}


/* =========================================================
   MASTER PAGE BANNER
   ========================================================= */

.bannerDiv {
    position: relative;
    width: 100%;
    height: 3.75vh;
    min-height: 30px;
    background: linear-gradient( to right, #1a3f6e, #3a6fa5, #1a3f6e );
    border-bottom: 1px solid #1f2f3a;
    box-sizing: border-box;
}

.banner-inner {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
}

.banner-badge {
    height: 95%;
    z-index: 2;
}

.banner-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 2vh;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* ===== Force legend visibility ===== */
fieldset legend {
    color: #1a3f6e !important; /* day mode */
    font-weight: 600;
}

body.dark-mode fieldset legend {
    color: #ffffff !important; /* night mode */
}

/* =========================================================
   MAP PAGE LAYOUT (DetentionMap.aspx) — FINAL
   ========================================================= */

.map-layout {
    display: flex;
    width: 100%;
    height: calc(100vh - 84px); /* banner + menu */
    overflow: hidden;
}

/* Google map */
#mapCanvas {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
}

#divSearch {
    flex: 0 0 360px; /* fixed sidebar width */
    width: 210px;
    max-width: 210px;
    min-width: 210px;
    overflow-y: auto;
    font-size: 9px;
    line-height: 1.1;
    overflow-x:hidden;
    border-style:solid;
    border-width:1px;
    background-color: transparent;
}
    #divSearch label {
        white-space: nowrap;
    }

    #divSearch input,
    #divSearch select,
    #divSearch textarea,
    #divSearch button {
        font-size: inherit;
        padding: 2px 4px;
        height: auto;
    }

#divSearch input[type="checkbox"] {
    transform: scale(0.85);
    margin-right: 3px;
}

    #divSearch > div {
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }

/* =========================================================
   CAD DETAILS OVERLAY — STABLE, ROW-LOCKED LAYOUT
   ========================================================= */

#CADDetails {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    max-width: 700px;
    max-height: 85vh;
    height: auto;
    background-color: #ffffff;
    z-index: 9999;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35);
    border-radius: 6px;
    display: none;
    overflow: hidden;
}

#CADHeader {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* -------------------------
   Fieldsets
   ------------------------- */

#CADDetails fieldset {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    min-width: 0;
}

/* =========================================================
   ROW SYSTEM (THIS IS THE KEY)
   ========================================================= */

/*
   Each row is a FIXED three-part structure:
   [Label Column] [Anchor Textbox] [Remaining Controls]

   NOTHING is allowed to escape its row.
*/

#CADDetails .cad-row {
    display: block; /* critical: prevents grid reflow bugs */
    width: 100%;
    white-space: nowrap; /* keeps row intact */
    margin-bottom: 8px;
}

/* -------------------------
   First label (right aligned)
   ------------------------- */

#CADDetails .cad-label {
    display: inline-block;
    width: 60px; /* aligns Incident / Occurred perfectly */
    text-align: right;
    font-weight: 600;
    vertical-align: middle;
    margin-right: 6px;
}

/* -------------------------
   Anchor textbox (first input)
   ------------------------- */

#CADDetails .cad-anchor {
    display: inline-block;
    width: 115px; /* matches your original visual spacing */
    vertical-align: middle;
}

/* -------------------------
   Remaining controls in row
   ------------------------- */

#CADDetails .cad-rest {
    display: inline-flex;
    flex-wrap: nowrap; /* no wrapping into other rows */
    align-items: center;
    margin-left: 10px;
    gap: 10px;
    vertical-align: middle;
}

/* =========================================================
   INPUT WIDTHS (BOUNDED — NO RUNAWAY CONTROLS)
   ========================================================= */

#CADDetails .cad-input-xs {
    width: 40px;
    text-align: center;
}

#CADDetails .cad-input-sm {
    width: 85px;
}

#CADDetails .cad-input-md {
    width: 130px;
}

#CADDetails .cad-input-lg {
    width: 180px;
}

#CADDetails .cad-input-xl {
    width: 230px;
    max-width: 260px;
}

/* =========================================================
   DARK MODE
   ========================================================= */

body.dark-mode #CADDetails {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

/* =========================
   DETAINEE GRID — FIELDSET-BOUND SCROLL
   ========================= */

.detainee-scroll {
    width: 100%; /* lock to fieldset width */
    max-width: 100%;
    overflow-x: auto; /* horizontal scrollbar */
    overflow-y: hidden;
    box-sizing: border-box;
}

/* Table grows naturally */
#detaineeTable {
    width: max-content; /* expand based on content */
    min-width: 100%; /* at least fill fieldset */
    table-layout: auto;
    border-collapse: collapse;
}

    #detaineeTable th,
    #detaineeTable td {
        white-space: nowrap; /* prevents column wrapping */
        padding: 4px 6px;
    }

/* =========================
   CAD FOOTER — COMPACT
   ========================= */

.cad-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px; /* 🔑 kills tall footer */
    padding: 4px 8px;
    background-color: #cfe9f3;
    border-top: 1px solid #9bb7c7;
    box-sizing: border-box;
}

/* Left: Time */
.cad-footer-left {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

    .cad-footer-left label {
        font-weight: 600;
        white-space: nowrap;
    }

/* Small time textbox */
.footer-time {
    width: 50px;
    height: 20px;
    font-size: 11px;
    padding: 1px 3px;
    text-align: center;
}

/* Right: Close button */
.cad-footer-right button {
    height: 22px;
    font-size: 11px;
    padding: 0 10px;
    line-height: 20px;
    cursor: pointer;
}
/* =========================
   CAD FOOTER — DARK MODE
   ========================= */

body.dark-mode .cad-footer {
    background-color: #1f2a33; /* dark blue-gray */
    border-top: 1px solid #444;
}

    body.dark-mode .cad-footer,
    body.dark-mode .cad-footer label {
        color: #e0e0e0;
    }

/* Time textbox in dark mode */
body.dark-mode .footer-time {
    background-color: #2b2b2b;
    color: #ffffff;
    border: 1px solid #555;
}

/* Close button in dark mode */
body.dark-mode .cad-footer-right button {
    background-color: #333;
    color: #ffffff;
    border: 1px solid #555;
}

    body.dark-mode .cad-footer-right button:hover {
        background-color: #444;
    }
/* =========================================================
   FILTER ACCORDION (scoped to #divSearch)
   ========================================================= */

#divSearch .acc {
    border-top: 1px solid cornflowerblue;
    margin-top:0px;
}

#divSearch .acc-item {
    border-bottom: 1px solid cornflowerblue;
}

#divSearch .acc-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 6px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    /* inherit your compact panel sizing */
    font-size: inherit;
    line-height: inherit;
}

#divSearch .acc-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: cadetblue;
    font-weight: 600;
    white-space: nowrap;
}

#divSearch .acc-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#divSearch .acc-clear {
    color: red;
    cursor: pointer;
}

#divSearch .acc-chevron {
    width: 18px;
    text-align: center;
    opacity: 0.85;
}

/* Body collapses */
#divSearch .acc-body {
    display: none;
    padding: 4px 4px 8px 4px;
}

#divSearch .acc-item.open .acc-body {
    display: block;
}

/* Optional: subtle hover */
#divSearch .acc-btn:hover {
    background-color: rgba(100,149,237,0.08);
}

/* Optional: keep header area (Search Filters) distinct */
#divSearch .filters-header {
    text-align: center;
    border-bottom: 1px solid cornflowerblue;
    padding: 4px 0;
    margin-bottom:0px;
}

#filtersAccordion {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 36px; /* 👈 >= footer height */
    scrollbar-gutter: stable;
}

#divSearch {
    display: flex;
    flex-direction: column;
}
    #divSearch .filter-footer {
        position: sticky;
        bottom: 0;
        height: 34px; /* 👈 important */
        padding: 4px;
        background-color: whitesmoke;
        border-top: 1px solid cornflowerblue;
        z-index: 2;
    }


        #divSearch .filter-footer button {
            margin-bottom:5px;
            height: 22px;
            font-size: 10px;
        }

    /* Officer filter rows — bounded layout */
    #divSearch .filter-row {
        display: flex;
        align-items: center;
        margin-top: 3px;
        max-width: 100%; /* 👈 hard boundary */
        overflow: hidden; /* 👈 prevents drift */
    }

    #divSearch .filter-subtitle {
        margin-top: 6px;
        margin-bottom: 2px;
        font-size: 9px;
        font-weight: 600;
        color: #2b6cb0;
        border-bottom: 1px dotted #9bb7c7;
    }

        /* Labels: fixed column */
        #divSearch .filter-row label {
            flex: 0 0 25px; /* 👈 tight but safe */
            text-align: left;
            margin-right: 2px; /* controlled spacing */
        }


    /* Group of controls in a row */
    #divSearch .filter-controls {
        display: flex;
        align-items: center;
        gap: 2px;
        flex: 1 1 auto; /* fill remaining space */
        min-width: 0; /* critical for flex overflow */
    }
    #divSearch .identity-row input[type="text"] {
        width: 45px;
        flex: 0 0 45px; /* 👈 prevents flex expansion */
        text-align: center;
    }
    #divSearch .identity-row input[type="text"]:first-of-type {
        margin-right: 15px; /* 👈 adjust to taste (4–8px) */
    }
    /* Fine-tune ID label spacing in compact filter rows */
    #divSearch .filter-row label.id-label {
        margin-right: -8px; /* or 1px if you want a hair of air */
    }
    /* ===============================
   RANGE INPUTS (Age / Education / Tenure)
   =============================== */

    /* Small numeric range boxes */
    #divSearch .range-input {
        width: 30px;
        flex: 0 0 30px; /* deterministic */
        text-align: center;
        box-sizing: border-box;
    }

    /* Dash separator between range inputs */
    #divSearch .range-sep {
        margin: 0 2px; /* tight, matches your preferred look */
        white-space: nowrap;
        font-weight: 600;
    }

    /* Optional: ensure rows stay compact */
    #divSearch .range-row {
        display: flex;
        align-items: center;
    }

    /* Checkbox rows (compact, aligned) */
    #divSearch .check-row {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 3px;
        flex-wrap: wrap; /* allows wrapping if narrow */
    }

        #divSearch .check-row label {
            flex: none;
            margin-right: 6px;
            white-space: nowrap;
        }
/*FORMAT ALERT AS TO WHICH OFFICER WILL BE ASSIGNED TO THE RECORD*/
.assign-officer {
    color: #b00020; /* dark red, less alarm-y */
    font-weight: 600;
}