/* ============================================================
   Norfolk Elections — Override Styles (Isolated to .body-content)
   Applies ONLY to Elections pages, safe for entire NCC website.
   Fixes: desktop 2-column layout, centered party key,
          breadcrumb position, map alignment, grid correctness.
=============================================================== */

/* ------------------------------------------------------------
   GENERAL RESET (ONLY inside .body-content)
------------------------------------------------------------ */
.body-content * {
    box-sizing: border-box;
}

/* ------------------------------
   GLOBAL RESET + BASE STYLES
------------------------------ */

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.body-content body {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #f5f5f5;
    color: #333;
}

.body-content {
    width: 100%;
}

/* Standard container (mobile-first) */
.body-content #content {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 0 16px;
}

/* Divider */
.divider {
    height: 1px;
    background: #ddd;
    margin: 16px 0;
}

/* Header */
.body-content .header-menu h1 {
    margin: 0;
    padding: 8px 0;
    font-size: 1.6rem;
    color: #333;
}

/* ------------------------------
   NAVIGATION (Bootstrap-compatible)
------------------------------ */

.body-content .navbar {
    width: 100%;
}

.navbar-inverse {
    background: #333;
    border: none;
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a {
    color: #fff !important;
}

.navbar-toggle .icon-bar {
    background: #fff;
    margin: 4px auto;
}

/* Remove Bootstrap container constraints */
.body-content #content,
.body-content .container,
.body-content .container-fluid {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ------------------------------------------------------------
   BREADCRUMB ABOVE MAP
------------------------------------------------------------ */
.body-content #division-name {
    grid-column: 1 / -1 !important;
    order: -1 !important;
    text-align: left !important;
    margin-bottom: 12px !important;
    padding: 6px 12px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    display: block !important;
}

/* ------------------------------------------------------------
   MOBILE FIRST — ACCORDION STYLE
------------------------------------------------------------ */

/* Accordion container */
.body-content .accordion {
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
    /*background: #fff;*/

}

/* Accordion header */
.body-content .accordion-header {
    background: #004f4f;
    color: #fff;
    padding: 14px;
    width: 100%;
    border: none;
    font-size: 1.1rem;
    text-align: left;
    font-weight: bold;
    cursor: pointer;
}

/* Accordion content */
.body-content .accordion-content {
    display: none;
    padding: 16px;
    background: #fff;
    border-top: 1px solid #ddd;

}

.body-content .accordion-content.open {
    display: block;
}

/* ------------------------------------------------------------
   MAP ELEMENTS
------------------------------------------------------------ */

.body-content #canvas {
    background: #006666;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
}

.body-content #map-container,
.body-content #map {
    width: 100% !important;
    float: none !important;
}

.body-content #map {
    background: #b2daf7;
}

    .body-content #map svg {
        width: 100% !important;
        height: auto !important;
    }

/* ------------------------------------------------------------
   RESULTS PANEL
------------------------------------------------------------ */

.body-content #divisionresults-container {
    width: 100% !important;
    float: none !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
}

.body-content #divisionresults {
    background: #ffffff;
    border-radius: 10px;
    padding: 16px;
    color: #333 !important;
}

/* ------------------------------------------------------------
   PARTY KEY — MOBILE (STACKED)
------------------------------------------------------------ */

.body-content #partyKey {
    background: #fff !important;
    border-radius: 10px !important;
    padding: 20px !important;
}

.body-content #partyKeyTitle {
    text-align: center !important;
    font-size: 1.4rem !important;
    margin-bottom: 20px !important;
    font-weight: bold !important;
    color: #222 !important;
}

.body-content #partyKeyLeft,
.body-content #partyKeyRight {
    width: 100% !important;
    float: none !important;
}

/* Reset colours */
.body-content #partyKey * {
    color: #333 !important;
}

/* ------------------------------------------------------------
   DESKTOP MODE (≥ 992px)
------------------------------------------------------------ */
@media (min-width: 992px) {

    /* 2‑column layout */
    .body-content #canvas {
        display: grid !important;
        grid-template-columns: 68% 32% !important;
        gap: 24px !important;
        max-width: 1200px;
        margin: 0 auto !important;
        align-items: start !important;
    }

    /* Disable accordion UI on desktop */
    .body-content .accordion-header {
        display: none !important;
    }

    .body-content .accordion-content {
        display: block !important;
        /*padding: 0 !important; */
        border: none !important;
    }

    /* Results panel goes into right column */
    .body-content #divisionresults-container {
        grid-column: 2 !important;
    }

    /* Party Key — centered 2 columns */
    .body-content #partyKey {
        max-width: 1100px !important;
        margin: 20px auto 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

        .body-content #partyKey > div {
            display: flex !important;
            flex-direction: row !important;
            justify-content: center !important;
            gap: 60px !important;
            width: 100%;
        }

    .body-content #partyKeyLeft,
    .body-content #partyKeyRight {
        max-width: 450px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
    }

    .body-content .division-information {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }

    .body-content .color-box {
        width: 14px !important;
        height: 14px !important;
        border-radius: 2px !important;
        margin-top: 4px;
    }

    .body-content .input-text {
        font-weight: bold !important;
    }

    .body-content .divisonCounts {
        font-weight: normal !important;
        margin-top: 3px !important;
        display: block !important;
    }
}

/* Reset Bootstrap influence inside elections layout */
.elections-layout-reset {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

    .elections-layout-reset * {
        float: none !important;
        clear: none !important;
    }


/* Remove Bootstrap layout behaviour inside our wrapper */
.elections-navbar-wrapper {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}


#footer,
#footer * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}



/* ------------------------------
   RESULTS TABLE (hidden by default)
------------------------------ */

#results {
    display: none;
}


/* ==========================================================
   FIX: Breadcrumb ("Map: Norfolk / ...") position on desktop
========================================================== */

#division-name {
    grid-column: 1 / -1 !important; /* full width at top */
    text-align: left !important; /* fix right alignment */
    margin-bottom: 10px !important;
    padding: 6px 0 !important;
    font-weight: bold !important;
    color: #ffffff !important; /* matches old style */
    display: block !important;
    text-decoration: none !important;
}

#division-name a {
    text-decoration: none;
    color: #ebebeb;
}
#division-name a:hover {
    text-decoration: underline;
}

    #division-name a:focus {
        color: #000;
        text-decoration: underline;
    }


/* Ensure breadcrumb always appears ABOVE map */
#canvas > #division-name {
    order: -1 !important;
}


/* Hide mobile results accordion on desktop */
@media (min-width: 992px) {
    .mobile-only {
        display: none !important;
    }
}

/* Desktop results panel spacing */
@media (min-width: 992px) {

    #divisionresults-container.desktop-grid-item {
        padding: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        /* Prevent hugging the right edge */
        padding-right: 20px !important;
        /* Ensure it behaves as a proper grid item */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #divisionresults {
        background: #ffffff;
        border-radius: 10px;
        padding: 16px !important;
    }
}



/* Hide desktop results on mobile */
@media (max-width: 991px) {
    #divisionresults-container.desktop-grid-item {
        display: none !important;
    }
}



/* Fix State of the parties alignment */
@media (min-width: 992px) {
    
    #partyKey {
        justify-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 1100px !important;

    }


    /* Ensure the Party Key container has internal padding */
    #partyKey {
        padding: 20px 20px !important;
        max-width: 1100px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }




    #canvas > .accordion:last-of-type .accordion-content {
        padding-left: 20px !important;
        padding-right: 20px !important; /* ✅ This is the missing padding */
        box-sizing: border-box !important;
        border-radius: 10px;
    }


    /* Final fix: add right-side padding to the actual Party Key wrapper */
    #key-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Ensure the accordion wrapper spans full width cleanly */
    #canvas > .accordion:last-of-type {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        
        padding-right: 20px !important;
        box-sizing: border-box !important;
        border-radius: 10px;
    }


}



/* Ensure colour boxes show on mobile */
.body-content .division-information {
    display: flex !important;
    flex-direction: row !important;
   /* align-items: center !important; */
    gap: 10px !important;
}

.body-content .color-box {
    width: 14px !important;
    height: 14px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}


/* MOBILE: Party Key one-line layout */
@media (max-width: 991px) {

    /* Keep colour box, party name, and count on one line */
    #partyKey .division-information {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 6px 0 !important;
    }

    /* Force the text blocks to sit side-by-side */
    #partyKey .input-text {
       /* display: inline-flex !important; */
        flex-direction: row !important;
        /*align-items: flex-start !important;*/
        gap: 6px !important;
        white-space: nowrap !important;
    }

    /* Make counts appear on same line */
    #partyKey .divisonCounts {
        display: inline !important;
        margin: 0 !important;
        padding-left: 4px !important;
        white-space: nowrap !important;
    }

    /* Colour boxes still visible */
    #partyKey .color-box {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }


    /* Each result block in one row */
    #divisionresults-mobile .division-information,
    #divisionresults-mobile .result-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 6px 0 !important;
        width: 100% !important;
        white-space: nowrap !important;
    }

    /* Colour box in results */
    #divisionresults-mobile .color-box {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
        display: inline-block !important;
    }

    /* Candidate / party text aligned on one line */
    #divisionresults-mobile .input-text,
    #divisionresults-mobile .candidate-name,
    #divisionresults-mobile .party-name,
    #divisionresults-mobile .vote-count {
        /* display: inline-flex !important; */
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }

    /* Prevent wrapping of the entire line */
    #divisionresults-mobile * {
        white-space: nowrap !important;
    }


}

/* Text Only */

.body-content #textonly-canvas {
    height: 100%;
    background: #006666;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.body-content #textonly-table {
    background: white;
    width: 100%;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow-y: hidden;
}

/* ==========================================
   TEXT RESULTS PAGE — Center entire canvas
   ========================================== */

    #textonly-canvas {
        width: 100%;
        max-width: 1200px; /* ✅ Controls total page width */
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 20px !important;
        box-sizing: border-box;
        display: block;
    }

    /* Prevent Bootstrap grid from forcing full-width */
    #textonly-canvas .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #textonly-canvas .col-lg-12 {
        float: none !important;
        width: 100% !important;
    }

    /* Center the table block */
#textonly-table {
    /* max-width: 1200px !important;  ✅ Ideal width for readability */
    /* margin: 0 auto !important; 
        width: 100%;*/
    padding: 10px 20px !important;
    box-sizing: border-box;
}

    /* GridView table styling */
    #textonly-table table {
        width: 100%;
        /*margin: 0 auto !important;*/
        box-sizing: border-box;
    }





    /* Center the dropdown + buttons horizontally */
    #textonly-table .input-group {
        max-width: 800px !important;
        margin: 0 auto !important;
    }



.divisionColumn {
    display: none;
}

/* Seats */

#seats-title {
    padding-top: 10px;
    padding-left: 5px;
    font-size: 120%;
    color: #ebebeb;
    text-align: center;
    margin-bottom: 20px;
}

#seats-canvas {
    background: #006666;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    height: auto;
    max-width: 1200px !important;
    margin: 0 auto !important;
    box-sizing: border-box;
}

#seats {
    top: 30px;
    width: 80%;
    height: 80%;
    margin-left: auto;
    margin-right: auto;
}


/* Seats container (graph) full width on all devices */
#seats-container {
    width: 100% !important;
    margin: 0 auto;
    text-align: center;
}

/* ✅ Party Key wrapper becomes full-width block below graph */


/* Final fix: add right-side padding to the actual Party Key wrapper */
#key-container-seats {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    background: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#partyKey-seats {
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 1100px !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}


/* Ensure the Party Key container has internal padding */
#partyKey-seats {
    padding: 20px 20px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* ===============================================
   PARTY KEY — TWO COLUMNS (DESKTOP)
   =============================================== */
@media (min-width: 992px) {


    #partyKey-seats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: auto;
        gap: 25px 60px !important;
        width: 100% !important;
        box-sizing: border-box;
    }


    #partyKeyTitle-seats {
        text-align: center !important;
        font-size: 1.4rem !important;
        margin-bottom: 20px !important;
        font-weight: bold !important;
        color: #222 !important;
        grid-column: 1 / 3 !important; /* span both columns */
        text-align: center !important;
        font-weight: bold !important;
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
        background: white;
    }



    #partyKeyLeft-seats,
    #partyKeyRight-seats {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        float: none !important; /* ✅ stops Bootstrap float interference */
        clear: none !important;
        box-sizing: border-box !important;
    }

    .division-information-seats {
        display: flex !important;
        flex-direction: row !important;
        /* align-items: center !important; */
        gap: 10px !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        white-space: nowrap !important; /* ✅ prevents vertical wrapping */
    }

        .division-information-seats .color-box {
            width: 14px !important;
            height: 14px !important;
            flex-shrink: 0 !important;
           
        }

        .division-information-seats .input-text {
            display: inline-flex !important;
            flex-direction: row !important;
            gap: 6px !important;
            font-weight: bold !important;
            flex-direction: row !important;
            display: block !important;
            white-space: nowrap !important; /* ✅ allows wrapping INSIDE the column */
            word-break: break-word !important; /* ✅ prevents wide text pushing grid */
            min-width: 0 !important;
        }

        #partyKey-seats .divisonCounts {
            font-weight: normal;
            display: inline !important;
            margin-left: 4px !important;
            white-space: nowrap !important;
        }

 

        /* Each party entry is a grid item */
    .division-information-seats {
        display: flex !important;
        flex-direction: row !important;
        /*align-items: center !important;*/
        gap: 8px !important;
        white-space: nowrap !important; /* ✅ THIS forces it to stay on one line */
        overflow: hidden !important; /* ✅ prevents overflow issues */
        text-overflow: ellipsis !important; /* ✅ optional, avoids breaking layout */
    }

            .division-information-seats .color-box {
                width: 14px !important;
                height: 14px !important;
                flex-shrink: 0 !important;
            }

    

}

/* ===============================================
   MOBILE — STACKED
   =============================================== */
@media (max-width: 991px) {

    #partyKey-seats {
        display: block !important;
    }

    #partyKeyLeft-seats,
    #partyKeyRight-seats {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .division-information-seats {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px;
    }
}


/* ==========================================
   SUMMARY PAGE — CENTER AND LIMIT WIDTH
   ========================================== */

#summary-canvas {
    width: 100%;
    max-width: 1200px; /* ✅ desired width */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 20px !important; /* ✅ gives breathing space */
    box-sizing: border-box;
    background: #006666;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Prevent Bootstrap container from forcing narrow layout */
#summary-text.container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: white;
}




/* SUMMARY PAGE */

/* Centre the summary area */
#summary-text {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    background: white;
}

/* Desktop: 2-column grid */
@media (min-width: 992px) {
    #summary-text {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: start;
    }
}

/* Mobile: stacked */
@media (max-width: 991px) {
    #summary-text {
        display: block;
    }
}

/* Summary blocks */
.summary-block {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
}

/* Tables clean look */
.summary-table {
    width: 100%;
    border-collapse: collapse;
}

    .summary-table th,
    .summary-table td {
        padding: 8px;
        border-bottom: 1px solid #ddd;
    }

/* =================================================
   ELECTIONS NAV BAR — CONTAINED TAB STYLE
   ================================================= */

/* 1. Turn navbar into a centered container */
nav.navbar.navbar-inverse {
    max-width: 1200px; /* MUST match table width */
    margin: 0 auto 16px auto; /* center + spacing below */
    border-radius: 6px;
    background: #2f2f2f;
    border: none;
    padding: 0;
}

    /* 2. Remove Bootstrap fluid stretching */
    nav.navbar.navbar-inverse .container-fluid {
        padding: 0;
        margin: 0;
        width: 100%;
    }
@media (min-width: 768px) {
    /* 3. Horizontal tab layout */
    nav.navbar.navbar-inverse .navbar-nav {
        display: flex !important;
        justify-content: flex-start; /* tabs start from left */
        margin: 0;
        width: 100%;
    }
}
        /* 4. Individual tabs */
        nav.navbar.navbar-inverse .navbar-nav > li {
            float: none;
            margin: 0;
        }

            /* 5. Tab links */
            nav.navbar.navbar-inverse .navbar-nav > li > a {
                padding: 12px 24px;
                color: #ffffff;
                font-weight: 600;
                border-radius: 6px 6px 0 0;
            }

                /* 6. Hover state */
                nav.navbar.navbar-inverse .navbar-nav > li > a:hover {
                    background: #3b3b3b;
                    color: #ffffff;
                    text-decoration: underline;
                }
                /* 6. Hover state */
                nav.navbar.navbar-inverse .navbar-nav > li > a:focus {
                    background: #3b3b3b;
                    color: #000 !important;
                    text-decoration: underline;
                }
        /* 7. ACTIVE TAB (teal highlight like screenshot) */
        nav.navbar.navbar-inverse .navbar-nav > .active > a,
        nav.navbar.navbar-inverse .navbar-nav > .active > a:hover,
        nav.navbar.navbar-inverse .navbar-nav > .active > a:focus {
            background: #1f6f6b; /* teal */
            color: #ffffff;
        }

    /* 8. Mobile toggle safety (does not affect desktop) */
    .navbar-toggle {
        margin-right: 10px;
    }

    /* ===========================================
   RESULTS FILTER — SINGLE LINE + TOP PADDING
   =========================================== */

    /* Container that holds Division label, select, buttons */
    #textonly-table #filter {
        display: flex !important;
        align-items: center !important;
        gap: 10px; /* spacing between elements */
        padding-top: 15px; /* ✅ space from top of teal box */
        padding-bottom: 10px;
        flex-wrap: wrap; /* allows wrapping on small screens */
    }

        /* Division label */
        #textonly-table #filter label {
            margin: 0;
            font-weight: bold;
            white-space: nowrap;
        }

        /* Dropdown */
        #textonly-table #filter select,
        #textonly-table #filter .form-control {
            min-width: 220px; /* stops it collapsing */
        }

        /* Buttons container */
        #textonly-table #filter .input-group-btn {
            display: flex;
            gap: 8px;
        }

        /* Buttons */
        #textonly-table #filter button {
            white-space: nowrap;
        }

    /* =================================================
   DIVISION FILTER — SINGLE LINE, PROPERLY ALIGNED
   ================================================= */

    /* Target the entire filter row */
    #textonly-table .col-lg-12 {
        display: flex !important;
        align-items: center !important;
        gap: 12px;
        padding-top: 16px; /* ✅ top padding inside card */
        flex-wrap: wrap; /* ✅ responsive on small screens */
    }

    /* Keep label tight */
    #textonly-table label[for="divisionDropDownList"] {
        margin: 0;
        font-weight: bold;
        white-space: nowrap;
    }

    /* Make dropdown + buttons align horizontally */
    #filter {
        display: flex !important;
        align-items: center !important;
        gap: 10px;
    }

        /* Dropdown width */
        #filter select,
        #filter .form-control {
            min-width: 220px;
        }

        /* Buttons in a row */
        #filter .input-group-btn {
            display: flex;
            gap: 8px;
        }

    /* =================================================
   DIVISION FILTER — FORCE SINGLE HORIZONTAL LINE
   ================================================= */

    /* Make the whole row a flex container */
    #textonly-canvas .row .col-lg-12 {
        display: flex !important;
        align-items: center !important;
        gap: 14px;
        padding-top: 18px; /* ✅ space from top edge */
        flex-wrap: wrap; /* ✅ wraps on small screens */
    }

    /* Keep the label inline */
    #textonly-canvas label[for="divisionDropDownList"] {
        display: inline-block !important;
        margin: 0 !important;
        font-weight: bold;
        white-space: nowrap;
    }

    /* Override Bootstrap input-group behaviour */
    #filter.input-group {
        display: inline-flex !important; /* ✅ KEY FIX */
        align-items: center;
        width: auto !important; /* ✅ prevents centering */
        gap: 10px;
    }

    /* Dropdown sizing */
    #filter select,
    #filter .form-control {
        width: 220px; /* ✅ stable width */
    }

    /* Buttons stay on same line */
    #filter .input-group-btn {
        display: inline-flex !important;
        gap: 8px;
    }

    /* Button text never wraps */
    #filter button {
        white-space: nowrap;
    }
    /* ===========================================
   MOBILE: ICON-ONLY BUTTONS
   =========================================== */
    @media (max-width: 767px) {

        .btn {
            min-width: 44px;
            height: 36px;
        }

            /* Hide text labels, keep icons */
            .btn .btn-text {
                display: none;
            }

        /* Make icons nicely centered */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding-left: 12px;
            padding-right: 12px;
        }


        /* Ensure filter row wraps and doesn't clip */
        #textonly-canvas .row .col-lg-12 {
            flex-wrap: wrap !important;
            overflow: visible !important;
        }

        /* Keep dropdown full width on mobile */
        #filter select,
        #filter .form-control {
            width: 100% !important;
            max-width: 100%;
        }

        /* Buttons stay visible below dropdown */
        #filter .input-group-btn {
            width: 100%;
            justify-content: flex-start;
            margin-top: 8px;
        }


        /* Wrap table to allow horizontal scroll */
        #textonly-table {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }




            #textonly-table td,
            #textonly-table th {
                font-size: 13px; /* desktop likely 14–15px */
                padding: 6px 6px; /* tighter padding */
            }


                /* First + last name cells */
                #textonly-table td:nth-child(1),
                #textonly-table td:nth-child(2) {
                    white-space: normal; /* allow wrapping */
                    word-break: break-word;
                    line-height: 1.2;
                }






                /* Replace header text visually */
                #textonly-table th:nth-child(1) {
                    font-size: 0; /* hide original text */
                }

                    #textonly-table th:nth-child(1)::after {
                        content: "Name";
                        font-size: 13px;
                        font-weight: bold;
                    }


                /* First name cell becomes combined Name cell */
                #textonly-table td:nth-child(1) {
                    white-space: normal;
                    line-height: 1.2;
                    font-weight: 500;
                }

                    /* Pull last name content into first name */
                    #textonly-table td:nth-child(1)::after {
                        content: " " attr(data-lastname);
                    }


                /* Visually combine name lines */
                #textonly-table td:nth-child(1) {
                    display: block;
                }

                    #textonly-table td:nth-child(1) br {
                        display: inline;
                        content: " ";
                    }


                #textonly-table th:nth-child(1),
                #textonly-table td:nth-child(1) {
                    width: 40%;
                }

                #textonly-table th:nth-child(5),
                #textonly-table td:nth-child(5),
                #textonly-table th:nth-child(6),
                #textonly-table td:nth-child(6) {
                    /*width: 30%;*/
                    text-align: center;
                }




            /* ===========================================================
   MOBILE RESULTS TABLE — FINAL COLUMN LAYOUT
   =========================================================== */

            /* Let the browser recalculate column widths */
            #textonly-table table {
                table-layout: auto !important;
            }

            /* -------------------------------------------------------
       1) NAME column (column 1) — expand naturally
       ------------------------------------------------------- */
            #textonly-table th:nth-child(1),
            #textonly-table td:nth-child(1) {
                width: auto !important;
                white-space: normal;
                word-break: break-word;
                line-height: 1.2;
            }

            /* -------------------------------------------------------
       2) LAST NAME column (column 2) — HIDE
       ------------------------------------------------------- */
            #textonly-table th:nth-child(2),
            #textonly-table td:nth-child(2) {
                display: none !important;
                width: 0 !important;
                padding: 0 !important;
            }

            /* -------------------------------------------------------
       3) PARTY COLOUR BAR (column 3) — KEEP, MAKE NARROW
       ------------------------------------------------------- */
            #textonly-table th:nth-child(3),
            #textonly-table td:nth-child(3) {
                display: table-cell !important;
               /*  width: 26px !important;
                max-width: 26px;
                min-width: 26px; */
                padding: 0 4px !important;
                text-align: center;
            }

            /* -------------------------------------------------------
       4) PARTY NAME TEXT (column 4) — HIDE
       ------------------------------------------------------- */
            #textonly-table th:nth-child(4),
            #textonly-table td:nth-child(4) {
                display: none !important;
                width: 0 !important;
                padding: 0 !important;
            }

            /* -------------------------------------------------------
       5) VOTES (column 5)
       ------------------------------------------------------- */
            #textonly-table th:nth-child(5),
            #textonly-table td:nth-child(5) {
                white-space: nowrap;
                text-align: right;
            }

            /* -------------------------------------------------------
       6) PERCENTAGE (column 6)
       ------------------------------------------------------- */
            #textonly-table th:nth-child(6),
            #textonly-table td:nth-child(6) {
                white-space: nowrap;
                text-align: right;
            }

            /* Slightly tighter spacing for mobile readability */
            #textonly-table th,
            #textonly-table td {
                font-size: 13px;
                padding: 6px 6px;
            }
    }



    @media (max-width: 480px) {
        #textonly-table td,
        #textonly-table th {
            font-size: 12.5px;
        }
    }


    /* ===========================================   SUMMARY PAGE — FORCE TWO-COLUMN LAYOUT
   =========================================== */

    /* Neutralise Bootstrap container behaviour */
    #summary-text.container {
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Two-column grid wrapper */
    @media (min-width: 992px) {
        #summary-text {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 32px !important;
            align-items: start !important;
            max-width: 1200px !important;
            margin: 0 auto !important;
        }
    }

    /* Mobile remains stacked */
    @media (max-width: 991px) {
        #summary-text {
            display: block !important;
        }
    }


    /* ===================================================
   NAVBAR — HARD RESET FOR MOBILE (BOOTSTRAP DEFAULTS)
   =================================================== */
    @media (max-width: 767px) {

        /* Bootstrap controls visibility */
        .navbar-collapse {
            display: none !important;
        }

            .navbar-collapse.in {
                display: block !important;
            }

        /* FORCE vertical stacking */
        .navbar-nav {
            display: block !important;
            float: none !important;
            width: 100%;
            margin: 0;
            padding: 0;
            background: #1f6f6b; /* solid background so text is readable */
        }

            .navbar-nav > li {
                display: block;
                float: none;
                width: 100%;
            }

                .navbar-nav > li > a {
                    display: block;
                    padding: 14px 16px;
                    text-align: left;
                    white-space: normal;
                    color: #fff;
                    border-bottom: 1px solid rgba(255,255,255,0.2);
                }
    }


    /* ==================================================
   MOBILE NAVBAR — RESTORE BOOTSTRAP COLLAPSE
   ================================================== */
    @media (max-width: 767px) {

        /* Let Bootstrap control the collapse */
        .navbar-collapse {
            display: block !important;
        }

        /* Stack menu items vertically */
        .navbar-nav {
            display: block !important;
            float: none !important;
        }

            .navbar-nav > li {
                float: none !important;
                width: 100%;
            }

                .navbar-nav > li > a {
                    display: block;
                    padding: 12px 16px;
                }
    }

    /* ==================================================
   NAVBAR — DESKTOP TABS
   ================================================== */
    @media (min-width: 768px) {

        /* Desktop tab bar layout */
        .navbar .navbar-nav {
            display: flex !important;
            justify-content: center;
            width: 100%;
        }

            .navbar .navbar-nav > li {
                float: none;
            }
    }

    /* ==================================================
   NAVBAR — MOBILE COLLAPSE (FIX)
   ================================================== */
    @media (max-width: 767px) {

        /* Hide the menu unless hamburger is opened */
        .navbar-collapse {
            display: none !important;
        }

            .navbar-collapse.in {
                display: block !important;
            }

        /* Mobile menu should be vertical, not tabs */
        .navbar-nav {
            display: block !important;
            width: 100%;
            margin: 0;
        }

            .navbar-nav > li {
                display: block;
                width: 100%;
            }

                .navbar-nav > li > a {
                    display: block;
                    padding: 12px 16px;
                    border-radius: 0;
                }
    }


    /* ==================================================
   MOBILE NAV — STACK MENU ITEMS VERTICALLY
   ================================================== */
    @media (max-width: 767px) {

        .navbar-collapse {
            padding: 0;
            border: none;
        }

        .navbar-nav {
            display: block !important;
            width: 100%;
            margin: 0;
        }

            .navbar-nav > li {
                display: block;
                width: 100%;
            }

                .navbar-nav > li > a {
                    display: block;
                    padding: 14px 16px;
                    border-bottom: 1px solid rgba(255,255,255,0.15);
                }
    }

    /* ==================================================
   MOBILE NAV — BACKDROP OVERLAY
   ================================================== */
    #mobile-nav-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 998;
    }

    /* Show backdrop when menu is open */
    .navbar-collapse.in + #mobile-nav-backdrop {
        display: block;
    }

    @media (max-width: 767px) {
        .navbar {
            position: relative;
            z-index: 999;
        }
    }

    /* =====================================
   NAVBAR — DESKTOP TABS
   ===================================== */
    @media (min-width: 768px) {

        .navbar .navbar-nav {
            display: flex;
            justify-content: center;
            width: 100%;
        }

            .navbar .navbar-nav > li {
                float: none;
            }
    }

    /* =====================================/* MOBILE COLLAPSE (FIX)
   ===================================== */
    @media (max-width: 767px) {

        /* Bootstrap controls visibility */
        .navbar-collapse {
            display: none !important;
        }

            .navbar-collapse.in {
                display: block !important;
            }

        /* Restore vertical list layout */
        .navbar-nav {
            display: block !important;
            width: 100%;
            margin: 0;
            padding: 0;
        }

            .navbar-nav > li {
                display: block;
                width: 100%;
            }

                .navbar-nav > li > a {
                    display: block;
                    padding: 14px 16px;
                    white-space: normal;
                    text-align: left;
                    border-bottom: 1px solid rgba(255,255,255,0.15);
                }
    }

    #mobile-nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.6);
        z-index: 998;
    }

    /* Show backdrop only when menu is OPEN */
    .navbar-collapse.in ~ #mobile-nav-backdrop {
        display: block;
    }

    @media (max-width: 767px) {
        .navbar {
            position: relative;
            z-index: 999;
        }
    }

    /* ===================================================
   NAVBAR — MOBILE RESET (CRITICAL FIX)
   =================================================== */
    @media (max-width: 767px) {

        /* Let Bootstrap control collapsing */
        .navbar-collapse {
            display: none !important;
        }

            .navbar-collapse.in {
                display: block !important;
            }

        /* FORCE vertical list on mobile */
        .navbar-nav {
            display: block !important;
            float: none !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            background: #1f6f6b; /* readable background */
        }

            .navbar-nav > li {
                display: block;
                width: 100%;
            }

                .navbar-nav > li > a {
                    display: block;
                    padding: 14px 16px;
                    text-align: left;
                    white-space: normal;
                    color: #ffffff;
                    border-bottom: 1px solid rgba(255,255,255,0.25);
                }
    }


.division-information, .division-information-seats {
    align-items: flex-start; /* aligns color box to text block */
    gap: 10px;
}

.input-text h4 {
    margin: 0; /* removes default h4 spacing */
}

.input-text h3 {
    margin: 0; /* removes default h4 spacing */
}

.color-box {
    width: 12px;
    height: 12px;
    margin-top: 6px; /* optional: fine-tune vertical alignment */
}

.accordion-content[hidden] {
    display: none;
}

.accordion-header::after {
    content: "▼";
    margin-left: 0.5em;
    display: inline-block;
    transition: transform 0.2s ease;
}

.accordion-header[aria-expanded="true"]::after {
    transform: rotate(180deg);
}


.accordion-header {
    background: none;
    border: 0;
    cursor: pointer;
}

/* Keyboard focus indicator */
.accordion-header:focus-visible {
    outline: 3px solid #005fcc; /* use your brand colour */
    outline-offset: 3px;
    border-radius: 4px;
}



    /* Keyboard focus indicator */
    .accordion-header:focus-visible {
        outline: 3px solid #ffbf47;
        outline-offset: 3px;
        border-radius: 4px;
    }


.divisionLabel {
    margin-right: 6px; /* tighten horizontal spacing */
    vertical-align: middle;
    font-weight: 600; /* optional – keeps label readable */
}

#filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    #filter .btn {
        background-color: transparent;
        border-color: #ccc;
        color: inherit;
        text-decoration: none;
    }

        #filter .btn:hover,
        #filter .btn:focus-visible {
            background-color: transparent; /* stop colour change */
            color: inherit;
            text-decoration: underline;
        }

        #filter .btn:focus-visible {
            outline: 3px solid #005fcc;
            outline-offset: 2px;
        }

header .mobtop {
    display: flex;
    align-items: center; /* vertical alignment */
    justify-content: center; /* horizontal centering */
    gap: 12px;
    text-align: center;
}

    header .mobtop h1 {
        margin: 0; /* remove default h1 margin */
    }

    header .mobtop img {
        max-height: 48px; /* keep logo sensible */
    }




.input-group {
    max-width: 100%;
    flex-wrap: wrap;
}
.input-group-btn {
    white-space: nowrap;
}
#map-container,
#map {
    max-width: 100%;
    overflow-x: hidden;
}

    #map svg {
        max-width: 100%;
        height: auto;
        display: block;
    }
@media (min-width: 767px) {

    .navbar,
    .header-menu {
        max-width: 100%;
        overflow-x: hidden;
    }

        .navbar ul,
        .navbar .menu {
            flex-wrap: wrap;
        }
}
    @media (max-width: 767px) {
        .navbar button {
            white-space: normal;
            text-align: center;
        }
    }


    #copyright {
        text-align: center;
    }


    .partyColumn {
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: normal; /* allows wrapping */
    }

    .party-colour {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        border-radius: 2px;
        display: inline-block;
    }

    @media (max-width: 767px) {
        .party-colour {
            display: none;
        }

        .partyColumn {
            gap: 0; /* remove unused spacing */
        }
    }



    @media (max-width: 767px) {

        #filter {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
            width: 100%;
        }

            #filter select,
            #filter .form-control,
            #filter button {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
            }
    }

    @media (max-width: 767px) {

        table {
            width: 100% !important;
            table-layout: auto;
        }

        th, td {
            white-space: normal;
            word-break: break-word;
        }
    }

    img, svg {
        max-width: 100%;
        height: auto;
    }

    svg {
        width: 100% !important;
    }



    /* =====================================================
   FINAL MOBILE NAVBAR FIX — SHOW ALL MENU ITEMS
   ===================================================== */
    @media (max-width: 767px) {

        /* Collapse container must be allowed to expand */
        .navbar-collapse {
            display: none !important;
            width: 100% !important;
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
        }

            .navbar-collapse.in {
                display: block !important;
            }

            /* Nav list MUST NOT be flex on mobile */
            .navbar-collapse .navbar-nav {
                display: block !important;
                width: 100% !important;
                height: auto !important;
                max-height: none !important;
                overflow: visible !important;
                margin: 0 !important;
                padding: 0 !important;
                background: #1f6f6b;
            }

                .navbar-collapse .navbar-nav > li {
                    display: block !important;
                    float: none !important;
                    width: 100% !important;
                }

                    .navbar-collapse .navbar-nav > li > a {
                        display: block !important;
                        width: 100% !important;
                        padding: 14px 16px;
                        white-space: normal;
                        text-align: left;
                        color: #ffffff;
                        border-bottom: 1px solid rgba(255,255,255,0.25);
                        box-sizing: border-box;
                    }
    }