/**
 * nest Dashboard Styles
 * The Trust Network - Membership Data Platform
 * 
 * Modern, responsive CSS with UK design standards
 */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Colour Palette - TTN Brand */
    /* Primary (TTN dark teal) */
    --primary-colour: #008080;    /* Teal */
    --primary-dark: #006666;      /* Darker teal */
    --primary-light: #33a3a3;     /* Lighter teal */
    /* Text / neutrals */
    --secondary-colour: #0b0c0c;  /* Near-black for text */
    /* Accent (TTN lime for highlights) */
    --accent-colour: #27b60b;     /* Lime green */
    --success-colour: #2fa84f;    /* Balanced success green */
    --warning-colour: #ffdd00;    /* Warning amber */
    --error-colour: #d4351c;      /* Error red */
    
    /* Neutral Colours */
    --white: #ffffff;
    --light-grey: #f8f9fa;
    --grey: #6f777b;
    --dark-grey: #0b0c0c;
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-large: 18px;
    --font-size-xl: 24px;
    --font-size-xxl: 32px;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;

    /* Page width: use more of the viewport on desktop */
    --page-max-width: 1680px;
    --page-inline-pad: clamp(1rem, 2.2vw, 2rem);
    
    /* Border Radius */
    --border-radius: 4px;
    --border-radius-lg: 8px;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition: all 0.2s ease-in-out;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--secondary-colour);
    background-color: var(--light-grey);
    /* Reserve scrollbar space to prevent header jitter between pages */
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Container */
.container {
    max-width: min(var(--page-max-width), 100%);
    margin: 0 auto;
    padding: 0 var(--page-inline-pad);
    width: 100%;
}

/* Header */
.dashboard-header {
    background: var(--white);
    border-bottom: 1px solid #e5e5e5;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 10004;
}

/* Dev banner */
.dev-banner {
    background: var(--error-colour);
    color: var(--white);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}
.dev-banner .scroll {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    gap: var(--banner-gap, 120px);
    will-change: transform;
    animation: banner-scroll var(--banner-speed, 100s) linear infinite;
}
.dev-banner .scroll::before { content: none; }
.dev-banner .scroll .marquee-chunk { flex: 0 0 auto; }
@keyframes banner-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.header-container {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.75rem);
    padding: 0.65rem var(--page-inline-pad);
    max-width: min(var(--page-max-width), 100%);
    margin: 0 auto;
    width: 100%;
    min-width: 0;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 1 auto;
    min-width: 0;
}

.ttn-logo {
    height: 56px;
    width: auto;
    flex-shrink: 0;
}

.nest-title {
    min-width: 0;
}

.nest-title h1 {
    color: var(--primary-colour);
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.1rem;
    line-height: 1.15;
    white-space: nowrap;
}

.logo-section .subtitle {
    color: var(--grey);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.25;
    display: block;
}

.logo-section .subtitle .ttn-accent {
    color: var(--success-colour);
    font-weight: 700;
}

.main-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: nowrap;
}

.main-nav a {
    text-decoration: none;
    color: var(--secondary-colour);
    padding: 0.4rem 0.7rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
    white-space: nowrap;
}

.main-nav a:hover,
.main-nav a.active {
    background-color: var(--primary-colour);
    color: var(--white);
}

.user-section {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-left: 0.25rem;
    padding-left: 1rem;
    border-left: 1px solid #e5e5e5;
    min-width: 0;
}

.user-name {
    font-weight: 500;
    color: var(--secondary-colour);
}

.user-greeting {
    font-weight: 500;
    color: var(--secondary-colour);
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;
}

.user-greeting-name {
    font-weight: 600;
    color: var(--primary-colour);
}

.logout-btn {
    color: var(--grey);
    text-decoration: none;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    transition: var(--transition);
    flex-shrink: 0;
}

.logout-btn:hover {
    background-color: var(--light-grey);
    color: var(--accent-colour);
}

/* Main Content */
.dashboard-main {
    padding: var(--spacing-xl) 0;
    overflow-x: hidden;
    max-width: 100%;
}

/* KPI Section */
.kpi-section {
    margin-bottom: var(--spacing-xxl);
}

.kpi-section h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    color: var(--secondary-colour);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.kpi-card {
    background: var(--white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--accent-colour);
    transition: var(--transition);
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.kpi-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-colour);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1);
}

.kpi-icon i {
    color: var(--white);
    font-size: var(--font-size-large);
}

.kpi-content h3 {
    font-size: var(--font-size-small);
    font-weight: 500;
    color: var(--grey);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Info icon states */
.kpi-info {
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--grey);
    opacity: 0.7;
}

.kpi-info.tooltip-hover {
    opacity: 1;
    color: var(--primary-colour);
}

.kpi-info.tooltip-active {
    opacity: 1;
    color: var(--primary-colour);
    transform: scale(1.1);
}

.kpi-info.tooltip-clicked {
    opacity: 1;
    color: var(--primary-colour);
    background: rgba(69, 153, 115, 0.1);
    border-radius: 50%;
    padding: 2px;
    transform: scale(1.15);
}

.kpi-number {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: var(--secondary-colour);
    margin-bottom: var(--spacing-sm);
}

.kpi-number .fa-spinner {
    font-size: 1.2em;
    color: var(--secondary-colour);
    opacity: 0.7;
}

.kpi-number.funding-number {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.kpi-change {
    font-size: var(--font-size-small);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.kpi-change.positive {
    color: var(--success-colour);
}

.kpi-change.negative {
    color: var(--error-colour);
}

.kpi-change.neutral {
    color: var(--grey);
}

/* Map Section */
.map-section {
    margin-bottom: var(--spacing-xxl);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-md);
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}

.section-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--secondary-colour);
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
}

.map-controls {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
    white-space: normal;
    position: relative;
    flex: 1 1 280px;
    min-width: 0;
    max-width: 100%;
}

.map-search-input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    flex: 1 1 220px;
    min-width: 0;
    max-width: 100%;
    width: auto;
}

.map-search-input:focus {
    outline: none;
    border-color: var(--primary-colour);
    box-shadow: 0 0 0 2px rgba(0, 128, 128, 0.1);
}

.search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2000;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.search-results.show {
    display: block;
}


.search-result-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-result-item:hover,
.search-result-item.active {
    background: var(--light-grey);
    transform: translateX(2px);
}

.search-result-item.active {
    background: rgba(0, 128, 128, 0.1);
    border-left: 3px solid var(--primary-colour);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-colour);
    flex-shrink: 0;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-weight: 600;
    color: var(--secondary-colour);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-subtitle {
    font-size: var(--font-size-small);
    color: var(--grey);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-type {
    font-size: var(--font-size-small);
    color: var(--primary-colour);
    background: rgba(0, 128, 128, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

.search-loading {
    padding: 12px 16px;
    text-align: center;
    color: var(--grey);
    font-style: italic;
}

.search-no-results {
    padding: 12px 16px;
    text-align: center;
    color: var(--grey);
    font-style: italic;
}

/* Search Marker Styles */
.search-marker {
    position: relative;
    z-index: 500;
}

/* Ensure search markers are visible in fullscreen */
.map-container.fullscreen .search-marker {
    z-index: 10003 !important;
}

.marker-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    position: relative;
    z-index: 2;
}

.marker-pin i {
    transform: rotate(45deg);
    margin-left: 1px;
    margin-top: 1px;
}

.marker-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    opacity: 0.6;
    animation: markerPulse 2s infinite;
    z-index: 1;
}

.marker-pulse.animate {
    animation: markerPulse 2s infinite;
}

@keyframes markerPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.3;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.search-marker-popup {
    font-family: var(--font-family);
    font-size: var(--font-size-small);
    line-height: 1.4;
}

.search-marker-popup h4 {
    margin: 0 0 8px 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--secondary-colour);
}

.search-marker-popup p {
    margin: 4px 0;
    color: var(--grey);
}

.search-marker-popup strong {
    color: var(--secondary-colour);
    font-weight: 600;
}


.map-container {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    overflow: visible;
    position: relative;
    transition: all 0.3s ease;
}

.fullscreen-controls-overlay {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    display: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-lg);
    padding: 15px 25px;
    box-shadow: var(--shadow-lg);
    gap: 15px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    white-space: nowrap;
}

.fullscreen-toggle-btn {
    position: absolute;
    top: 80px;
    left: 8px;
    z-index: 500;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--primary-colour);
}

.fullscreen-toggle-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.05);
}

.satellite-toggle-btn {
    position: absolute;
    top: 130px;
    left: 8px;
    z-index: 500;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--primary-colour);
}

.satellite-toggle-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.05);
}

.satellite-toggle-btn.active {
    background: var(--accent-colour);
    color: #073b3b;
}

.venue-toggle-btn {
    position: absolute;
    top: 180px;
    left: 8px;
    z-index: 500;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--primary-colour);
}

.venue-toggle-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.05);
}

.venue-toggle-btn.active {
    background: var(--primary-colour);
    color: #fff;
}

/* Screenshot / clean UI toggle (visible mainly in fullscreen) */
.map-screenshot-overlay-btn {
    position: absolute;
    top: 230px;
    left: 8px;
    z-index: 520;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--secondary-colour, #0b3d4a);
}
.map-container.fullscreen .map-screenshot-overlay-btn {
    display: flex;
}
.map-screenshot-overlay-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.05);
}
.map-screenshot-overlay-btn[aria-pressed="true"] {
    background: var(--primary-colour, #008080);
    color: #fff;
}

/* Hide chrome for clean map screenshots (fullscreen) */
.map-container.fullscreen.map-overlays-hidden .fullscreen-controls-overlay,
.map-container.fullscreen.map-overlays-hidden .fullscreen-overlay-panel,
.map-container.fullscreen.map-overlays-hidden .nearby-panel,
.map-container.fullscreen.map-overlays-hidden .venue-map-panel,
.map-container.fullscreen.map-overlays-hidden .venue-toggle-btn,
.map-container.fullscreen.map-overlays-hidden .satellite-toggle-btn,
.map-container.fullscreen.map-overlays-hidden .leaflet-control-container,
.map-container.fullscreen.map-overlays-hidden .legend-control,
.map-container.fullscreen.map-overlays-hidden .heatmap-legend {
    display: none !important;
    visibility: hidden !important;
}
.map-container.fullscreen.map-overlays-hidden .map-screenshot-overlay-btn {
    display: flex !important;
    top: 12px;
    left: 12px;
    opacity: 0.85;
}
.map-container.fullscreen.map-overlays-hidden .fullscreen-toggle-btn {
    top: 12px;
    left: 60px;
    opacity: 0.85;
}

.trust-cluster-marker {
    background: transparent;
    border: none;
}
.trust-cluster-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #0b3d4a;
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    font-weight: 700;
    line-height: 1.05;
}
.trust-cluster-icon span { font-size: 12px; }
.trust-cluster-icon small { font-size: 8px; letter-spacing: 0.04em; opacity: 0.9; }

.map-container.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1000 !important;
    border-radius: 0;
    box-shadow: none;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

.map-container.fullscreen .fullscreen-controls-overlay {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 20px;
}

/* Responsive adjustments for fullscreen controls */
@media (max-width: 1400px) {
    .map-container.fullscreen .fullscreen-overlay-panel {
        gap: 10px;
        padding: 10px 14px;
        width: fit-content;
        max-width: calc(100vw - 32px);
    }
    
    .overlay-controls {
        gap: 8px 14px;
        min-width: 0;
    }
    
    .overlay-toggle {
        min-width: 0;
        font-size: 12px;
    }
}

@media (max-width: 1200px) {
    .map-container.fullscreen .fullscreen-controls-overlay {
        gap: 15px;
        padding: 15px;
    }
    
    .map-container.fullscreen .fullscreen-overlay-panel {
        gap: 8px;
        padding: 8px 12px;
        width: fit-content;
        max-width: calc(100vw - 24px);
    }
    
    .overlay-controls {
        gap: 6px 12px;
        min-width: 0;
    }
    
    .overlay-toggle {
        min-width: 0;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .map-container.fullscreen .fullscreen-controls-overlay {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
    }
    
    .map-container.fullscreen .btn-group {
        order: 1;
    }
    
    .map-container.fullscreen .btn {
        order: 2;
    }
    
    .map-container.fullscreen .fullscreen-overlay-panel {
        flex-direction: row;
        gap: 8px;
        padding: 8px 10px;
        width: fit-content;
        max-width: calc(100vw - 16px);
        min-height: auto;
        bottom: 8px;
    }
    
    .overlay-section {
        width: fit-content;
        max-width: 100%;
    }
    
    .overlay-controls {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px 10px;
        justify-content: flex-start;
        min-width: 0;
        overflow-x: auto;
    }
    
    .overlay-toggle {
        min-width: 0;
        font-size: 11px;
    }
}

/* Fancy overlay panel for fullscreen — compact horizontal bar */
.fullscreen-overlay-panel {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    display: none;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    padding: 10px 14px 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: fit-content;
    max-width: calc(100vw - 32px);
    min-width: 0;
}

.overlay-section {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    justify-content: flex-start;
    width: fit-content;
    max-width: 100%;
}

.overlay-section:last-child {
    margin-bottom: 0;
}

.map-container.fullscreen .fullscreen-overlay-panel {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: fit-content;
    max-width: calc(100vw - 32px);
    height: auto;
    min-height: 0;
    padding: 10px 14px 12px;
    margin: 0;
    bottom: 16px;
}

.overlay-section h4 {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-colour);
    border-bottom: 2px solid var(--accent-colour);
    padding-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.overlay-controls {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px 16px;
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
    width: max-content;
    max-width: none;
    height: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Normal mode overlay controls - compact & minimalist */
.map-overlay-controls {
    margin-top: 8px;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
}

.overlay-control-group {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 128, 128, 0.1);
    border-radius: 10px;
    padding: 14px 18px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
}

.overlay-control-group:hover {
    box-shadow: 0 3px 12px rgba(0, 128, 128, 0.15);
    border-color: rgba(0, 128, 128, 0.2);
}

.overlay-control-group h4 {
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-colour);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--accent-colour);
    padding-bottom: 5px;
    display: block;
    white-space: nowrap;
    line-height: 1.2;
}

.overlay-control-items {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px 16px;
    align-items: center;
    width: max-content;
    max-width: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.control-toggle {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    font-size: 15px;
    color: #333;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
    padding: 6px 4px;
    gap: 10px;
    width: auto;
}

.control-toggle:hover {
    color: var(--primary-colour);
}

/* Responsive: Allow wrapping on smaller screens */
@media (max-width: 1200px) {
    .map-overlay-controls {
        flex-wrap: wrap;
    }
}

.control-toggle input[type="checkbox"] {
    display: none;
}

.control-toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: #ddd;
    border-radius: 12px;
    margin: 0;
    transition: background 0.3s ease;
    flex-shrink: 0;
    order: 1;
}

.control-toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.control-toggle input[type="checkbox"]:checked + .control-toggle-slider {
    background: var(--accent-colour);
}

.control-toggle input[type="checkbox"]:checked + .control-toggle-slider::before {
    transform: translateX(20px);
}

.control-toggle-label {
    font-weight: 500;
    white-space: nowrap;
    order: 0;
    font-size: 15px;
    line-height: 1.2;
}

.overlay-toggle {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: color 0.2s ease;
    white-space: nowrap;
    min-width: 0;
    padding: 4px 2px;
    gap: 8px;
}

.overlay-toggle:hover {
    color: var(--primary-colour);
}

.overlay-toggle-label {
    order: 0;
    font-weight: 500;
    line-height: 1.2;
}

.overlay-toggle input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: #ccc;
    border-radius: 10px;
    margin: 0;
    transition: background 0.3s ease;
    flex-shrink: 0;
    order: 1;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.overlay-toggle input[type="checkbox"]:checked + .toggle-slider {
    background: var(--accent-colour);
}

.overlay-toggle input[type="checkbox"]:checked + .toggle-slider::before {
    transform: translateX(16px);
}

.map-container.fullscreen #uk-map {
    height: 100vh !important;
    width: 100vw !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    min-height: 100vh !important;
    min-width: 100vw !important;
    /* DO NOT set z-index here - it breaks popup hierarchy */
}

/* Ensure Leaflet map panes are properly sized in fullscreen */
.map-container.fullscreen .leaflet-map-pane,
.map-container.fullscreen .leaflet-tile-pane,
.map-container.fullscreen .leaflet-overlay-pane {
    width: 100vw !important;
    height: 100vh !important;
}

/* DO NOT force size on marker-pane - Leaflet needs to position clusters dynamically */
/* DO NOT force size on popup/tooltip panes - let Leaflet handle them naturally */

/* Force canvas renderer to fill fullscreen */
.map-container.fullscreen .leaflet-canvas-layer {
    width: 100vw !important;
    height: 100vh !important;
}

/* Ensure no overflow issues */
.map-container.fullscreen .leaflet-container {
    overflow: visible !important;
}

.map-container.fullscreen .leaflet-map-pane {
    overflow: visible !important;
}

/* Ensure popups work properly in fullscreen - HIGHER z-index so they appear above all layers */
.map-container.fullscreen .leaflet-popup-pane {
    z-index: 10005 !important;
}

.map-container.fullscreen .leaflet-popup {
    z-index: 10005 !important;
}

.map-container.fullscreen .leaflet-popup-content-wrapper {
    z-index: 10005 !important;
}

.map-container.fullscreen .leaflet-popup-tip {
    z-index: 10005 !important;
}

/* FIX: Allow clicks to pass through overlays to reach the map */
.map-container.fullscreen .fullscreen-controls-overlay {
    pointer-events: none; /* Let clicks pass through the overlay */
}

/* But keep the controls themselves clickable */
.map-container.fullscreen .fullscreen-controls-overlay > *,
.map-container.fullscreen .fullscreen-controls-overlay * {
    pointer-events: auto; /* Make buttons, inputs, and all children clickable */
}

/* Ensure the map container itself doesn't block clicks */
.map-container.fullscreen {
    pointer-events: auto !important;
}

/* Same for bottom overlay panel */
.map-container.fullscreen .fullscreen-overlay-panel {
    pointer-events: none;
}

.map-container.fullscreen .fullscreen-overlay-panel > *,
.map-container.fullscreen .fullscreen-overlay-panel * {
    pointer-events: auto;
}

/* Ensure the map itself is fully interactive */
.map-container.fullscreen #uk-map {
    pointer-events: auto !important;
}

/* Ensure all Leaflet interactive layers are clickable */
.map-container.fullscreen .leaflet-marker-pane {
    pointer-events: auto !important;
}

.map-container.fullscreen .leaflet-marker-pane * {
    pointer-events: auto !important;
}

.map-container.fullscreen .leaflet-canvas-layer {
    pointer-events: auto !important;
}

.map-container.fullscreen .leaflet-interactive {
    pointer-events: auto !important;
}

.map-container.fullscreen .leaflet-pane {
    pointer-events: auto !important;
}

/* Marker clusters - back to default size */
.marker-cluster,
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    width: 40px !important;
    height: 40px !important;
    margin-left: -20px !important;
    margin-top: -20px !important;
}

.marker-cluster div {
    width: 36px !important;
    height: 36px !important;
    margin-left: 2px !important;
    margin-top: 2px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 36px !important;
}

/* Ensure marker clusters (green dots) are clickable in fullscreen */
.map-container.fullscreen .marker-cluster,
.map-container.fullscreen .marker-cluster-small,
.map-container.fullscreen .marker-cluster-medium,
.map-container.fullscreen .marker-cluster-large {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 950 !important;
    /* DO NOT set position: relative - breaks Leaflet's absolute positioning */
}

.map-container.fullscreen .leaflet-marker-icon {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 950 !important;
    /* DO NOT set position: relative - breaks Leaflet's absolute positioning */
}

/* NUCLEAR OPTION: Force ALL elements to be clickable in fullscreen */
.map-container.fullscreen * {
    pointer-events: auto !important;
}

/* But ensure overlays don't block clicks */
.map-container.fullscreen .fullscreen-controls-overlay,
.map-container.fullscreen .fullscreen-overlay-panel {
    pointer-events: none !important;
}

.map-container.fullscreen .fullscreen-controls-overlay *,
.map-container.fullscreen .fullscreen-overlay-panel * {
    pointer-events: auto !important;
}

/* Force map container to be interactive */
.map-container.fullscreen {
    pointer-events: auto !important;
    z-index: 1 !important;
}

/* Force map div to be interactive */
.map-container.fullscreen #uk-map {
    pointer-events: auto !important;
    z-index: 1 !important;
}

/* Force individual school markers to be clickable - ABOVE popups */
.map-container.fullscreen .leaflet-interactive {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1001 !important;
}

/* Force marker cluster group to be interactive */
.map-container.fullscreen .marker-cluster-group {
    pointer-events: auto !important;
    z-index: 1001 !important;
}

/* Force all SVG elements to be clickable */
.map-container.fullscreen svg {
    pointer-events: auto !important;
    z-index: 1001 !important;
}

.map-container.fullscreen svg * {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1001 !important;
}

/* Force circle elements specifically */
.map-container.fullscreen circle {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1001 !important;
}

/* Force all marker pane elements - ABOVE popups */
.map-container.fullscreen .leaflet-marker-pane {
    pointer-events: auto !important;
    z-index: 1001 !important;
}

.map-container.fullscreen .leaflet-marker-pane * {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1001 !important;
}

/* Individual school markers are sized in JavaScript */

/* Ensure all marker cluster children are clickable */
.map-container.fullscreen .leaflet-marker-pane .marker-cluster * {
    pointer-events: auto !important;
}

/* Marker pane z-index is now handled above with z-index: 1001 */

/* Ensure shadow pane is below markers */
.map-container.fullscreen .leaflet-shadow-pane {
    z-index: 850 !important;
}

/* Ensure body doesn't interfere with fullscreen */
body.fullscreen-mode {
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide header when in fullscreen mode */
body.fullscreen-mode .dashboard-header {
    display: none !important;
}

#uk-map {
    height: 630px;
    width: 100%;
}

/* Conference venue planner */
.venue-planner {
    margin-top: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f4fbfb 100%);
    border: 1px solid rgba(0, 128, 128, 0.16);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0, 58, 58, 0.08);
    padding: clamp(16px, 2vw, 24px);
}

.venue-planner-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.venue-planner-eyebrow {
    margin: 0 0 4px;
    color: var(--primary-colour);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.venue-planner h3,
.venue-planner h4 {
    margin: 0;
    color: var(--secondary-colour);
}

.venue-planner h3 {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.2;
}

.venue-planner p {
    margin: 6px 0 0;
    color: #4d5b5b;
}

.venue-planner-actions,
.venue-score-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.venue-planner-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 16px;
}

.venue-form-card,
.venue-score-card,
.venue-insights-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e4eeee;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0, 58, 58, 0.06);
    padding: 16px;
}

.venue-form-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.venue-form-card label,
.venue-weight-grid label {
    color: var(--secondary-colour);
    font-size: 0.88rem;
    font-weight: 700;
}

.venue-form-card input {
    width: 100%;
    border: 1px solid #cfdede;
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    transition: var(--transition);
}

.venue-form-card input:focus {
    border-color: var(--primary-colour);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.12);
    outline: none;
}

.venue-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.venue-form-help {
    font-size: 0.84rem;
}

.venue-score-card {
    min-width: 0;
}

.venue-score-header {
    justify-content: space-between;
    margin-bottom: 14px;
}

.venue-weight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.venue-weight-grid label {
    display: grid;
    gap: 8px;
    background: #f7fbfb;
    border: 1px solid #e1eeee;
    border-radius: 12px;
    padding: 12px;
}

.venue-weight-grid strong {
    color: var(--primary-colour);
}

.venue-weight-grid input[type="range"] {
    accent-color: var(--primary-colour);
}

.venue-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.venue-summary-strip div {
    background: linear-gradient(180deg, #f8ffff 0%, #edf8f8 100%);
    border: 1px solid #d8ebeb;
    border-radius: 12px;
    padding: 12px;
}

.venue-summary-strip span {
    display: block;
    color: #5d6d6d;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.venue-summary-strip strong {
    display: block;
    color: var(--secondary-colour);
    font-size: 1.35rem;
    line-height: 1.2;
    margin-top: 2px;
}

.venue-table-wrap {
    overflow-x: auto;
}

.venue-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.venue-table th,
.venue-table td {
    border-bottom: 1px solid #e5eeee;
    padding: 11px 10px;
    text-align: left;
    vertical-align: top;
}

.venue-table th {
    color: #536060;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.venue-table tbody tr:hover {
    background: rgba(0, 128, 128, 0.045);
}

.venue-name-cell strong {
    display: block;
    color: var(--secondary-colour);
}

.venue-name-cell span {
    display: block;
    color: #5d6d6d;
    font-size: 0.85rem;
}

.venue-score-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    border-radius: 999px;
    padding: 5px 10px;
    background: var(--primary-colour);
    color: #fff;
    font-weight: 800;
}

.venue-score-pill.is-strong {
    background: #00703c;
}

.venue-score-pill.is-watch {
    background: #b16200;
}

.venue-reach-bar {
    width: 100%;
    min-width: 110px;
    height: 8px;
    overflow: hidden;
    background: #dce9e9;
    border-radius: 999px;
    margin-top: 6px;
}

.venue-reach-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-colour), var(--accent-colour));
    border-radius: inherit;
}

.venue-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.venue-icon {
    align-items: center;
    background: var(--primary-colour);
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    box-shadow: 0 5px 12px rgba(0, 58, 58, 0.28);
    color: #fff;
    display: flex;
    font-weight: 800;
    height: 32px;
    justify-content: center;
    transform: rotate(-45deg);
    width: 32px;
}

.venue-icon span {
    transform: rotate(45deg);
}

.venue-insights-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.venue-region-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    min-width: min(420px, 100%);
}

.venue-region-chip {
    background: #f4fbfb;
    border: 1px solid #d7ebeb;
    border-radius: 999px;
    color: #243737;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 7px 10px;
}

.venue-region-chip strong {
    color: var(--primary-colour);
}

.venue-map-panel {
    position: absolute;
    left: 56px;
    top: 130px;
    bottom: 18px;
    z-index: 1220;
    width: min(420px, calc(100% - 72px));
    max-height: none;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 128, 128, 0.2);
    border-radius: 14px;
    box-shadow: 0 14px 42px rgba(15, 40, 40, 0.2);
    display: none;
    flex-direction: column;
}

.venue-map-panel.is-open {
    display: flex;
}

.venue-map-panel.is-closed {
    display: none !important;
}

.venue-map-panel.is-dragging {
    cursor: grabbing;
    box-shadow: 0 18px 48px rgba(15, 40, 40, 0.28);
}

.venue-map-panel.is-dragged {
    right: auto;
    bottom: auto;
    max-height: calc(100% - 16px);
}

.venue-map-panel.is-collapsed {
    width: auto;
}

.venue-map-panel.is-collapsed .venue-map-panel-body,
.venue-map-panel.is-collapsed .venue-map-panel-header > div {
    display: none;
}

.venue-map-panel.is-collapsed .venue-map-panel-header {
    padding: 8px;
    border-bottom: none;
}

.venue-place-search {
    position: relative;
}

.venue-place-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 220px;
    overflow: auto;
    background: #fff;
    border: 1px solid #d0e0e0;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 40, 40, 0.16);
}

.venue-place-result {
    display: block;
    width: 100%;
    border: none;
    background: #fff;
    text-align: left;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eef4f4;
}

.venue-place-result:hover,
.venue-place-result.is-active {
    background: #f2fafa;
}

.venue-place-result strong {
    display: block;
    color: #173333;
    font-size: 0.9rem;
}

.venue-place-result span {
    display: block;
    color: #5d6d6d;
    font-size: 0.78rem;
    margin-top: 2px;
}

.venue-map-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex: 0 0 auto;
}

.venue-map-panel-drag-handle {
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.venue-map-panel-drag-handle:active,
.venue-map-panel.is-dragging .venue-map-panel-drag-handle {
    cursor: grabbing;
}

.venue-map-panel-drag-affordance {
    color: #8aa;
    font-size: 14px;
    margin-top: 4px;
    flex-shrink: 0;
}

.venue-map-panel-title-block {
    flex: 1;
    min-width: 0;
}

.venue-map-panel-header h3 {
    margin: 0;
    color: #173333;
    font-size: 1.15rem;
    line-height: 1.2;
}

.venue-map-panel-body {
    display: grid;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 12px 16px 16px;
}

.venue-map-add {
    background: #f8fbfb;
    border: 1px solid #dce9e9;
    border-radius: 12px;
    padding: 10px 12px;
}

.venue-map-add summary {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--primary-colour);
}

.venue-map-add-form {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.venue-map-add-form input {
    width: 100%;
    border: 1px solid #cfe0e0;
    border-radius: 10px;
    padding: 9px 10px;
    font: inherit;
}

.venue-map-add-form input:focus {
    border-color: var(--primary-colour);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.12);
    outline: none;
}

.venue-heat-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: #405555;
    font-size: 0.82rem;
    font-weight: 700;
}

.venue-heat-swatch {
    display: inline-block;
    width: 28px;
    height: 10px;
    border-radius: 999px;
    margin-right: 4px;
    vertical-align: middle;
}

.venue-heat-easy {
    background: linear-gradient(90deg, #2fa84f, #85994b);
}

.venue-heat-mid {
    background: linear-gradient(90deg, #ffdd00, #f47738);
}

.venue-heat-hard {
    background: linear-gradient(90deg, #f47738, #d4351c);
}

.venue-map-panel label {
    color: var(--secondary-colour);
    font-size: 0.84rem;
    font-weight: 800;
}

.venue-map-panel select {
    width: 100%;
    border: 1px solid #cfe0e0;
    border-radius: 10px;
    background: #fff;
    color: var(--secondary-colour);
    font: inherit;
    padding: 9px 10px;
}

.venue-map-panel select:focus {
    border-color: var(--primary-colour);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.12);
    outline: none;
}

.venue-map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.venue-map-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5fbfb;
    border: 1px solid #d9ebeb;
    border-radius: 999px;
    cursor: pointer;
    padding: 7px 10px;
}

.venue-map-chip input {
    accent-color: var(--primary-colour);
}

.venue-map-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.venue-map-stats div {
    background: linear-gradient(180deg, #f8ffff 0%, #edf8f8 100%);
    border: 1px solid #d8ebeb;
    border-radius: 12px;
    padding: 10px;
}

.venue-map-stats span {
    display: block;
    color: #5d6d6d;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.venue-map-stats strong {
    display: block;
    color: #173333;
    font-size: 1.05rem;
    line-height: 1.2;
    margin-top: 3px;
}

.venue-map-stats .venue-avg-time {
    color: #5d6d6d;
    font-size: 0.82rem;
    font-weight: 700;
}

.venue-mode-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    color: #405555;
    font-size: 0.84rem;
    font-weight: 700;
}

.venue-map-notes {
    background: #fbfefe;
    border: 1px solid #d9ebeb;
    border-radius: 12px;
    padding: 10px;
}

.venue-map-notes p {
    margin: 0 0 6px;
    color: #405555;
    font-size: 0.84rem;
}

.venue-map-notes p:last-child {
    margin-bottom: 0;
}

.venue-map-notes strong {
    color: #173333;
}

.venue-cate-insights {
    background: #f7fbfb;
    border: 1px solid #cfe3e3;
    border-radius: 12px;
    color: #405555;
    font-size: 0.86rem;
    margin-top: 10px;
    max-height: none;
    overflow: visible;
    padding: 10px 12px;
}

.venue-cate-insights p {
    margin: 0 0 8px;
    line-height: 1.45;
}

.venue-cate-insights p:last-child {
    margin-bottom: 0;
}

.venue-cate-insights strong {
    color: #173333;
}

.venue-cate-insights ul {
    margin: 4px 0 8px;
    padding-left: 1.15rem;
}

.venue-cate-insights li {
    margin: 0 0 4px;
}

.venue-disruption-box {
    background: #fffdf8;
    border: 1px solid #f0e2c4;
    border-radius: 12px;
    color: #405555;
    font-size: 0.88rem;
    line-height: 1.45;
    margin-top: 8px;
    max-height: min(42vh, 420px);
    overflow: auto;
    padding: 14px 16px;
    min-height: 160px;
}

.venue-disruption-box p {
    margin: 0 0 8px;
}

.venue-disruption-box p:last-child {
    margin-bottom: 0;
}

.venue-disruption-item {
    border-top: 1px solid #f0e2c4;
    margin-top: 8px;
    padding-top: 8px;
}

.venue-disruption-item.is-local {
    background: #f3fff6;
    border-radius: 8px;
    margin-left: -4px;
    margin-right: -4px;
    padding: 8px;
}

.venue-disruption-item a {
    color: var(--primary-colour);
    font-weight: 700;
}

.venue-disruption-links {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.venue-disruption-links li {
    margin: 0 0 6px;
}

.venue-disruption-links a {
    color: var(--primary-colour);
    font-weight: 700;
    text-decoration: underline;
}

.venue-mode-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
}

.venue-mode-car {
    background: #008080;
}

.venue-mode-train {
    background: #7b3fb2;
}

.venue-mode-bus {
    background: #d9730d;
}

.venue-map-explain {
    background: #f8fbfb;
    border: 1px solid #e0eeee;
    border-radius: 10px;
    padding: 9px 10px;
}

.venue-map-explain summary {
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--primary-colour);
}

.venue-map-explain p {
    margin: 8px 0 0;
    color: #4d5b5b;
    font-size: 0.84rem;
}

.venue-route-tooltip {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #d9ebeb;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    color: #173333;
    font-weight: 700;
}

.venue-map-select-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.venue-map-select-row select {
    flex: 1 1 auto;
}

.venue-map-select-row .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.venue-score-steps {
    margin: 8px 0 0;
    padding-left: 18px;
    color: #405555;
    font-size: 0.84rem;
}

.venue-score-steps li {
    margin: 0 0 8px;
}

.venue-mode-dot.venue-mode-walk {
    background: #7b3fb2;
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #7b3fb2;
    border-radius: 2px;
}

.venue-mode-label-icon {
    background: transparent !important;
    border: 0 !important;
}

.venue-mode-label {
    background: rgba(255, 255, 255, 0.96);
    border: 2px solid #173333;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    color: #173333;
    display: flex;
    flex-direction: column;
    font-size: 0.72rem;
    gap: 1px;
    line-height: 1.15;
    max-width: 150px;
    min-width: 110px;
    padding: 5px 8px;
}

.venue-mode-label strong {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.venue-mode-label span {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.venue-mode-label em {
    color: #5d6d6d;
    font-style: normal;
    font-weight: 600;
}

.venue-mode-label-train {
    border-color: #7b3fb2;
}

.venue-mode-label-train strong {
    color: #7b3fb2;
}

.venue-mode-label-bus {
    border-color: #d9730d;
}

.venue-mode-label-bus strong {
    color: #d9730d;
}

.venue-mode-label-car {
    border-color: #008080;
}

.venue-mode-label-car strong {
    color: #008080;
}

.venue-region-start-marker {
    align-items: center;
    background: rgba(255, 255, 255, 0.97);
    border: 2px solid var(--primary-colour);
    border-radius: 999px;
    box-shadow: 0 5px 16px rgba(0, 58, 58, 0.2);
    color: var(--primary-colour);
    display: flex;
    flex-direction: column;
    font-size: 10px;
    font-weight: 800;
    height: 36px;
    justify-content: center;
    line-height: 1.05;
    min-width: 86px;
    padding: 0 10px;
    width: auto;
}

.venue-region-start-marker strong {
    font-size: 10px;
    letter-spacing: 0.02em;
}

.venue-region-start-marker span {
    color: #173333;
    font-size: 11px;
}

.map-container.fullscreen .venue-map-panel {
    top: 130px;
    left: 56px;
    bottom: 18px;
    max-height: none;
    z-index: 10004;
}

.map-container.fullscreen .venue-map-panel.is-dragged {
    right: auto;
    bottom: auto;
    max-height: calc(100% - 16px);
}

.map-container.fullscreen .venue-toggle-btn {
    z-index: 10004;
}

.map-container.fullscreen.map-overlays-hidden .venue-map-panel,
.map-container.fullscreen.map-overlays-hidden .venue-toggle-btn {
    display: none !important;
    visibility: hidden !important;
}

@media (max-width: 1100px) {
    .venue-planner-hero,
    .venue-insights-card {
        flex-direction: column;
    }

    .venue-planner-grid,
    .venue-weight-grid {
        grid-template-columns: 1fr;
    }

    .venue-region-chips {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .venue-summary-strip,
    .venue-form-row {
        grid-template-columns: 1fr;
    }

    .venue-planner-actions {
        width: 100%;
    }

    .venue-planner-actions .btn {
        flex: 1 1 auto;
    }

    .venue-map-panel {
        left: 52px;
        right: 8px;
        top: 130px;
        bottom: 18px;
        width: auto;
    }

    .venue-map-panel.is-dragged {
        right: auto;
    }

    .venue-map-panel-body {
        max-height: none;
    }
}

/* Region labels */
.uk-region-label {
    background: rgba(255,255,255,0.9);
    color: var(--secondary-colour);
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 600;
}

/* Remove custom legend block – replaced by Leaflet control (ensure any residual markup is hidden) */
.map-legend { display: none !important; }

/* Leaflet controls z-index - ensure they stay below header */
.leaflet-control {
    z-index: 500 !important;
}

/* Leaflet legend control styling */
.legend-control, .leaflet-control.legend-control {
    background: var(--white);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    border: 1px solid #e5e5e5;
    z-index: 500 !important;
}
.legend-control h4 {
    font-size: var(--font-size-small);
    font-weight: 600;
    margin: 0 0 var(--spacing-sm) 0;
}
.legend-control .legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-small);
}
.legend-control .legend-swatch {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    display: inline-block;
}
.legend-control .legend-swatch.high { background-color: #f4a6a6; }
.legend-control .legend-swatch.medium { background-color: #ffe58f; }
.legend-control .legend-swatch.low { background-color: #b7e1cd; }

.map-legend h4 {
    font-size: var(--font-size-small);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--secondary-colour);
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-small);
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 2px;
}

.legend-color.high {
    background-color: #d4351c;
}

.legend-color.medium {
    background-color: #ffdd00;
}

.legend-color.low {
    background-color: #00703c;
}

/* Regional heat map tooltip styling */
.regional-heatmap-tooltip {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--primary-colour);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.regional-heatmap-label {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1d1d1d !important;
    text-shadow: 
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff,
        0 0 3px rgba(255,255,255,0.9),
        0 0 6px rgba(255,255,255,0.7) !important;
}

.regional-heatmap-label .leaflet-tooltip-content {
    margin: 0 !important;
    padding: 0 !important;
}

.regional-heatmap-hover {
    background: rgba(0, 0, 0, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    color: #fff !important;
}

.heatmap-tooltip {
    text-align: center;
}

.heatmap-tooltip strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    color: var(--primary-colour);
}

/* Heat map legend specific styles */
.heatmap-legend {
    background: rgba(255, 255, 255, 0.95);
    padding: 12px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.heatmap-legend h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
}

/* Funding info tooltips */
.funding-tooltip {
    position: absolute;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    padding: 10px 12px;
    font: 13px/1.4 'Inter', Arial, sans-serif;
    max-width: 320px;
    z-index: 2000;
    pointer-events: none;
}

.funding-info {
    cursor: help;
    transition: color 0.2s ease;
}

.funding-info:hover {
    color: var(--primary-colour) !important;
}

/* Regional info tooltips */
.regional-tooltip {
    position: absolute;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    padding: 10px 12px;
    font: 13px/1.4 'Inter', Arial, sans-serif;
    max-width: 320px;
    z-index: 2000;
    pointer-events: none;
}

.regional-info {
    cursor: help;
    transition: color 0.2s ease;
}

.regional-info:hover {
    color: var(--primary-colour) !important;
}

.heatmap-legend .legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-size: 12px;
}

.heatmap-legend .legend-swatch {
    width: 20px;
    height: 16px;
    margin-right: 6px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

/* Regional info control - compact table in bottom left */
.regional-info-control {
    background: rgba(255, 255, 255, 0.95);
    padding: 12px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    max-height: 400px;
    overflow-y: auto;
    min-width: 200px;
}

.regional-info-control h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-colour);
}

.regional-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.regional-info-table thead {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 1;
}

.regional-info-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 2px solid var(--primary-colour);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--primary-colour);
}

.regional-info-table td {
    padding: 5px 8px;
    border-bottom: 1px solid #e5e5e5;
    white-space: nowrap;
}

.regional-info-table tbody tr:hover {
    background-color: #f5f5f5;
}

.regional-info-table tbody tr:last-child td {
    border-bottom: none;
}

/* TTN Coordinators overlay */
.coordinator-icon {
    background: transparent !important;
    border: none !important;
    position: relative !important;
}

.coordinator-marker {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #1d70b8;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
}

.coordinator-marker:hover {
    transform: scale(1.15);
    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
    border-color: #00703c;
    border-width: 4px;
}

/* Ensure popups are always on top */
.leaflet-popup-pane {
    z-index: 10006 !important;
}

.leaflet-popup {
    z-index: 10006 !important;
}

.leaflet-popup-content-wrapper {
    z-index: 10006 !important;
}

.leaflet-popup-tip {
    z-index: 10006 !important;
}

.coordinator-marker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.coordinator-popup {
    text-align: center;
    padding: 10px;
}

.coordinator-popup .coordinator-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 10px;
    display: block;
    border: 2px solid #1d70b8;
}

.coordinator-popup h3 {
    margin: 10px 0 5px;
    color: #1d70b8;
    font-size: 18px;
}

.coordinator-popup .coordinator-title {
    font-size: 13px;
    color: #505a5f;
    margin: 5px 0;
}

.coordinator-popup .coordinator-role {
    font-size: 14px;
    color: #00703c;
    margin: 5px 0;
}

.coordinator-popup hr {
    margin: 10px 0;
    border: none;
    border-top: 1px solid #b1b4b6;
}

.coordinator-popup h4 {
    font-size: 16px;
    margin: 10px 0 5px;
}

.coordinator-popup p {
    margin: 5px 0;
    font-size: 14px;
}

/* Table Section */
.table-section {
    margin-bottom: var(--spacing-xxl);
}

.table-controls {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    flex: 1;
    max-width: 300px;
}

.search-box input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-left: 40px;
    border: 1px solid #e5e5e5;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
}

.search-box i {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--grey);
}

#filter-region {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid #e5e5e5;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    background: var(--white);
}

.table-container {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-top: var(--spacing-lg);
}

#trusts-table {
    width: 100%;
    border-collapse: collapse;
}

#trusts-table th,
#trusts-table td {
    padding: var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid #e5e5e5;
}

#trusts-table th {
    background-color: var(--light-grey);
    font-weight: 600;
    color: var(--secondary-colour);
    font-size: var(--font-size-small);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#trusts-table tbody tr:hover {
    background-color: var(--light-grey);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

#page-info {
    font-weight: 500;
    color: var(--secondary-colour);
}

/* Buttons */
.btn {
    padding: var(--spacing-sm) var(--spacing-sm);
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-small);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    text-decoration: none;
}

.btn-primary {
    background-color: var(--primary-colour);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
}

/* Outline button (used for map scope toggle) */
.btn-outline {
    background: transparent;
    color: var(--primary-colour);
    border: 1px solid var(--primary-colour);
}
.btn-outline:hover {
    background: var(--primary-light);
    color: var(--white);
    border-color: var(--primary-light);
}
.btn-group.toggle .btn.active {
    background: var(--primary-colour);
    color: var(--white);
    border-color: var(--primary-colour);
}

/* Accent button (optional utility) */
.btn-accent {
    background: var(--accent-colour);
    color: #073b3b;
}
.btn-accent:hover {
    filter: brightness(0.95);
}

.btn-secondary {
    background-color: var(--light-grey);
    color: var(--secondary-colour);
    border: 1px solid #e5e5e5;
}

.btn-secondary:hover {
    background-color: #e5e5e5;
}

/* Footer */
.dashboard-footer {
    background: var(--white);
    border-top: 1px solid #e5e5e5;
    padding: var(--spacing-lg) 0;
    margin-top: var(--spacing-xxl);
}

.dashboard-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-footer .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.dashboard-footer .footer-left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.dashboard-footer .footer-right {
    display: flex;
    align-items: center;
}

.dashboard-footer p {
    color: var(--grey);
    font-size: var(--font-size-small);
    margin: 0;
}

.dashboard-footer .privacy-link {
    color: var(--primary-colour);
    text-decoration: none;
    font-size: var(--font-size-small);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.dashboard-footer .privacy-link:hover {
    background-color: var(--primary-light);
    color: var(--white);
    text-decoration: none;
}

.dashboard-footer .privacy-link i {
    font-size: 0.9em;
}

.dashboard-footer .gias-data-note {
    font-size: 12px;
    color: var(--grey);
    margin-top: var(--spacing-xs);
}

.dashboard-footer .gias-data-note a {
    color: var(--primary-colour);
    text-decoration: none;
    font-weight: 500;
}

.dashboard-footer .gias-data-note a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 1100px) {
    .logo-section .subtitle {
        display: none;
    }

    .ttn-logo {
        height: 48px;
    }

    .user-greeting {
        max-width: 9rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 768px) {
    .header-container {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .logo-section {
        flex: 1 1 auto;
    }

    .main-nav {
        flex: 1 1 100%;
        justify-content: center;
        order: 3;
    }

    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .user-section {
        margin-left: auto;
        padding-left: 0;
        border-left: none;
    }

    .user-greeting {
        max-width: 8.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .map-controls {
        width: 100%;
        justify-content: space-between;
    }
    
    .search-container {
        flex: 0 0 350px;
        min-width: 320px;
        max-width: 400px;
    }
    
    .table-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-box {
        max-width: none;
    }
    
    .dashboard-footer .container {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
    
    .map-legend {
        position: static;
        margin-top: var(--spacing-md);
    }

    /* Keep map layer chips inline on mobile — do not force full-width stacked toggles */
    .map-overlay-controls {
        flex-direction: row;
        width: auto;
        max-width: 100%;
    }

    .map-overlay-controls .overlay-control-group,
    .map-overlay-controls .overlay-control-group-compact {
        width: fit-content;
        max-width: 100%;
    }

    .map-overlay-controls .overlay-control-items {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px 12px;
        overflow-x: auto;
    }

    .map-overlay-controls .control-toggle {
        font-size: 12px;
        width: auto;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .kpi-card {
        padding: var(--spacing-md);
    }
    
    .kpi-number {
        font-size: var(--font-size-xl);
    }
    
    #trusts-table th,
    #trusts-table td {
        padding: var(--spacing-sm);
        font-size: var(--font-size-small);
    }
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--primary-colour);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Funding Section Styles */
.funding-section {
    background: var(--white);
    padding: var(--spacing-xxl) 0;
    border-top: 1px solid var(--light-grey);
}

.funding-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.funding-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
}

.funding-tables-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.chart-card {
    background: var(--white);
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    padding: var(--spacing-lg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chart-card h3 {
    font-size: var(--font-size-large);
    font-weight: 600;
    color: var(--secondary-colour);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.chart-card h3::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--primary-colour);
    border-radius: 2px;
}

.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

.table-card {
    background: var(--white);
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    padding: var(--spacing-lg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table-card h3 {
    font-size: var(--font-size-large);
    font-weight: 600;
    color: var(--secondary-colour);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.table-card h3::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--accent-colour);
    border-radius: 2px;
}

.table-container {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-small);
}

.data-table th {
    background: var(--light-grey);
    color: var(--secondary-colour);
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border-bottom: 2px solid var(--primary-colour);
    white-space: nowrap;
}

.data-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--light-grey);
    vertical-align: top;
}

.data-table tr:hover {
    background: var(--light-grey);
}

.data-table tr:last-child td {
    border-bottom: none;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 12px;
    letter-spacing: 0.5px;
}

.badge-success {
    background: var(--success-colour);
    color: var(--white);
}

.badge-secondary {
    background: var(--grey);
    color: var(--white);
}

/* Map Toggle Controls - LABELS OUTSIDE */
.map-toggle-controls {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
    margin: var(--spacing-xs) 0;
}

.toggle-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.toggle-label-left,
.toggle-label-right {
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.toggle-label-left {
    text-align: right;
}

.toggle-label-right {
    text-align: left;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background: #007bff;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.toggle-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.toggle-switch label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle-switch:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background: #ffffff;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + label {
    background: transparent;
}

.toggle-switch.checked:before {
    transform: translateX(20px);
}

.toggle-switch.checked {
    background: #28a745;
}

/* Funding Map Markers */
.funding-cluster-marker {
    background: transparent !important;
    border: none !important;
}

.cluster-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--primary-colour);
    border-radius: 50%;
    border: 3px solid var(--white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    color: var(--white);
    font-weight: 600;
}

.cluster-count {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.cluster-funding {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    margin-top: 2px;
}

.funding-marker {
    background: transparent !important;
    border: none !important;
}

.funding-marker-pin {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    position: relative;
    z-index: 2;
}

.funding-marker-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    animation: funding-pulse 2s infinite;
    z-index: 1;
}

@keyframes funding-pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* TTN funding markers (green) */
.funding-marker-pin.ttn {
    background-color: #28a745 !important;
}

.funding-marker-pulse.ttn {
    background-color: #28a745 !important;
}

/* GIAS funding markers (red) */
.funding-marker-pin.gias {
    background-color: #dc3545 !important;
}

.funding-marker-pulse.gias {
    background-color: #dc3545 !important;
}

/* Responsive toggle controls */
@media (max-width: 768px) {
    .map-toggle-controls {
        flex-direction: row;
        justify-content: center;
        gap: var(--spacing-sm);
    }
    
    .toggle-switch {
        width: 160px;
        height: 28px;
    }
    
    .toggle-switch input:checked + label .toggle-slider:before {
        transform: translateX(126px);
    }
    
    .toggle-label {
        font-size: 9px;
    }
}

/* Responsive Design for Funding Section */
@media (max-width: 768px) {
    .funding-charts-grid,
    .funding-tables-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .funding-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .chart-container {
        height: 250px;
    }
    
    .data-table {
        font-size: 12px;
    }
    
    .data-table th,
    .data-table td {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus States */
.btn:focus,
input:focus,
select:focus {
    outline: 2px solid var(--primary-colour);
    outline-offset: 2px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --primary-colour: #000000;
        --secondary-colour: #000000;
        --grey: #000000;
    }
}

/* Member Directory Styles */
.section-header {
    margin-bottom: var(--spacing-lg);
}

.section-subtitle {
    color: var(--grey);
    font-size: var(--font-size-small);
    margin-top: var(--spacing-xs);
}

/* Search Section */
.search-section {
    margin-bottom: var(--spacing-xl);
}

.search-input-wrapper {
    position: relative;
    margin-bottom: var(--spacing-md);
}

.search-input-wrapper i.fa-search {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--grey);
}

.search-input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 3rem;
    border: 2px solid #e5e5e5 !important;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    background: var(--white) !important;
    color: var(--secondary-colour) !important;
    transition: var(--transition);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-colour) !important;
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.1);
}

.search-loading {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-colour);
    font-size: var(--font-size-small);
}

.result-count {
    color: var(--grey);
    font-size: var(--font-size-small);
    font-weight: 500;
}

/* Search Tips */
.search-tips-container {
    background: #ffffff;
    border-left: 4px solid var(--primary-colour);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.search-tips h4 {
    margin-bottom: var(--spacing-md);
    color: var(--secondary-colour);
}

.search-tips ul {
    margin-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.search-tips li {
    margin-bottom: var(--spacing-xs);
}

.search-tips em {
    color: var(--grey);
    font-style: italic;
}

/* Filters Section */
.filters-section {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.filter-group label {
    font-weight: 500;
    font-size: var(--font-size-small);
    color: var(--secondary-colour);
}

.filter-group select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid #e5e5e5;
    border-radius: var(--border-radius);
    font-size: var(--font-size-small);
    min-width: 200px;
}

.filter-group select:focus {
    outline: none;
    border-color: var(--primary-colour);
}

/* Members Table */
.table-container {
    overflow-x: auto;
    margin-bottom: var(--spacing-lg);
}

.members-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.members-table thead {
    background: var(--primary-colour);
    color: var(--white);
}

.members-table th {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: 600;
    font-size: var(--font-size-small);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.members-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.members-table th.sortable:hover {
    background: var(--primary-dark);
}

.members-table .sort-icon {
    margin-left: var(--spacing-xs);
    opacity: 0.5;
}

.members-table tbody tr {
    border-bottom: 1px solid #e5e5e5;
    transition: var(--transition);
}

.members-table tbody tr:hover {
    background: #f8f9fa;
}

.members-table td {
    padding: var(--spacing-md);
    font-size: var(--font-size-small);
}

.members-table td.member-trust-cell {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}

.members-table td a {
    color: var(--primary-colour);
    text-decoration: none;
}

.members-table td a:hover {
    text-decoration: underline;
}

/* Member Name Cell */
.member-name {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.member-name strong {
    font-weight: 600;
    color: var(--secondary-colour);
}

.member-org {
    font-size: var(--font-size-small);
    color: var(--grey);
}

/* Badges */
.badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-success {
    background: var(--success-colour);
    color: var(--white);
}

.badge-region {
    background: #e5e5e5;
    color: var(--secondary-colour);
    font-size: 10px;
    margin-right: var(--spacing-xs);
}

/* Highlighted matches */
mark {
    background: var(--warning-colour);
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 600;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.pagination button {
    padding: var(--spacing-sm) var(--spacing-lg);
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive Design for Member Directory */
@media (max-width: 768px) {
    .filters-section {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .filter-group {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .filter-group select {
        width: 100%;
    }
    
    .search-input {
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .members-table {
        font-size: 12px;
    }
    
    .members-table th,
    .members-table td {
        padding: var(--spacing-sm);
    }
    
    .pagination {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

/* Modal styles for member details */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10006;
}

.modal-content {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    padding: var(--spacing-xl);
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    color: var(--secondary-colour);
    font-size: var(--font-size-lg);
}

.modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--grey);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition);
}

.modal-close:hover {
    color: var(--secondary-colour);
}

.modal-body {
    padding: var(--spacing-xl);
}

.member-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.detail-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.detail-row strong {
    color: var(--grey);
    font-size: var(--font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-row span.badge {
    display: inline-block;
}

/* Dark mode support (if implemented) */
@media (prefers-color-scheme: dark) {
    /* Don't apply dark mode to search inputs on the members page */
    .search-input {
        background: var(--white) !important;
        border-color: #e5e5e5 !important;
        color: var(--secondary-colour) !important;
    }
    
    .search-tips-container {
        background: #2b2b2b;
        color: var(--white);
    }
    
    .members-table tbody tr:hover {
        background: #2b2b2b;
    }
}
/* ===== Who's nearby / mini meetups panel ===== */
.map-container {
    position: relative;
}

.nearby-panel {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    bottom: auto;
    width: min(420px, calc(100% - 24px));
    max-height: calc(100% - 24px);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 128, 128, 0.18);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(15, 40, 40, 0.18);
    transform: translateX(110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s ease, opacity 0.28s ease;
    overflow: hidden;
}

.nearby-panel.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.nearby-panel.is-open.is-dragged {
    transform: none;
    transition: opacity 0.2s ease;
}

.nearby-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nearby-panel-drag-handle {
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.nearby-panel-drag-handle:active,
.nearby-panel.is-dragging .nearby-panel-drag-handle {
    cursor: grabbing;
}

.nearby-panel-drag-affordance {
    color: #8aa;
    font-size: 14px;
    margin-top: 4px;
    flex-shrink: 0;
}

.nearby-panel-title-block {
    flex: 1;
    min-width: 0;
}

.nearby-eyebrow {
    margin: 0 0 2px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-colour);
    font-weight: 700;
}

.nearby-panel-header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: #173333;
    line-height: 1.25;
}

.nearby-panel-close {
    border: none;
    background: #f0f4f4;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    color: #335;
}

.nearby-panel-close:hover {
    background: #e2eded;
}

.nearby-panel-controls {
    padding: 10px 16px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(180deg, #f7fbfb 0%, #ffffff 100%);
}

.nearby-radius-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    color: #445;
    margin-bottom: 6px;
}

#nearby-radius {
    width: 100%;
    accent-color: var(--primary-colour);
}

.nearby-scope-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    align-items: stretch;
}

.nearby-filter-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d7e3e3;
    background: #fff;
    cursor: pointer;
}

.nearby-filter-chip:has(input:checked) {
    border-color: var(--primary-colour, #008080);
    background: #f0fafa;
}

.nearby-scope-toggle input {
    accent-color: var(--primary-colour);
}

.nearby-schools-mode {
    display: inline-flex;
    gap: 0;
    border: 1px solid #d7e3e3;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.nearby-schools-mode .nearby-filter-chip {
    border: none;
    border-radius: 0;
    margin: 0;
    border-right: 1px solid #d7e3e3;
}

.nearby-schools-mode .nearby-filter-chip:last-child {
    border-right: none;
}

.nearby-schools-mode .nearby-filter-chip:has(input:checked) {
    background: #e6f4f4;
    color: var(--primary-colour, #008080);
    font-weight: 600;
}

.nearby-panel-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    color: #456;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nearby-panel-meta span {
    background: #eef6f6;
    border-radius: 999px;
    padding: 3px 9px;
}

.nearby-panel-body {
    overflow: auto;
    padding: 12px 16px 18px;
    flex: 1;
}

.nearby-section {
    margin-bottom: 18px;
}

.nearby-section h5 {
    margin: 0 0 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary-colour);
}

.nearby-count {
    color: #678;
    font-weight: 500;
}

.nearby-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nearby-card {
    border: 1px solid #e2eaea;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nearby-card:hover {
    border-color: #9cc;
    box-shadow: 0 4px 14px rgba(0, 80, 80, 0.08);
}

.nearby-card-ttn {
    border-left: 3px solid #28a745;
}

.nearby-card-prospect {
    border-left: 3px solid #dc3545;
}

.nearby-row-head {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 6px;
}

.nearby-logo,
.nearby-logo-fallback,
.nearby-mat-logo-img,
.nearby-mat-logo-fallback {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    background: #f4f8f8;
    border: 1px solid #dde8e8;
    flex-shrink: 0;
}

.nearby-logo-fallback,
.nearby-mat-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--primary-colour);
    font-size: 14px;
}

.nearby-card-title strong {
    display: inline;
    margin-right: 6px;
    color: #1b2b2b;
}

.nearby-distance {
    font-size: 12px;
    color: #678;
    margin-top: 2px;
}

.nearby-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    vertical-align: middle;
}

.nearby-badge-ttn {
    background: #e6f6ea;
    color: #1f7a3a;
}

.nearby-badge-prospect {
    background: #fdecec;
    color: #a52834;
}

.nearby-centre-card {
    background: linear-gradient(135deg, #f3fafa 0%, #ffffff 70%);
    border: 1px solid #cfe4e4;
    border-radius: 10px;
    padding: 12px;
}

.nearby-loading,
.nearby-empty,
.nearby-error,
.nearby-footnote {
    font-size: 13px;
    color: #567;
}

.nearby-error {
    color: #a52834;
}

.nearby-source {
    color: #889;
    font-size: 11px;
}

.nearby-ttn-person {
    margin: 4px 0 0;
    font-size: 12px;
}

.nearby-open-btn {
    margin-top: 6px;
    width: 100%;
    justify-content: center;
}

.nearby-popup-hint {
    font-size: 12px;
    color: #667;
    margin: 0 0 8px;
}

.nearby-popup-brand {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.nearby-mat-marker,
.nearby-school-marker {
    background: transparent !important;
    border: none !important;
}

.nearby-mat-marker-inner,
.nearby-school-marker-inner {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.nearby-school-marker-inner {
    width: 32px;
    height: 32px;
}

.nearby-school-centre {
    width: 40px;
    height: 40px;
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.35), 0 2px 10px rgba(0, 0, 0, 0.28);
}

.nearby-mat-ttn,
.nearby-school-ttn {
    border: 2px solid #28a745;
}

.nearby-mat-prospect,
.nearby-school-prospect {
    border: 2px solid #dc3545;
}

/* Letter under logo: if favicon fails, img is removed and letter remains */
.nearby-mat-marker-inner .nearby-mat-logo-fallback,
.nearby-school-marker-inner .nearby-school-logo-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    background: #f4f8f8;
    font-weight: 700;
    font-size: 13px;
    color: var(--primary-colour);
    z-index: 0;
}

.nearby-mat-marker-inner .nearby-mat-logo-img,
.nearby-school-marker-inner .nearby-school-logo-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: none;
    border-radius: 0;
    background: #fff;
}

.map-container.fullscreen .nearby-panel {
    top: 70px;
    right: 16px;
    max-height: calc(100% - 140px);
    z-index: 1300;
}

.map-container.fullscreen .nearby-panel.is-open.is-dragged {
    top: auto;
    right: auto;
}

@media (max-width: 720px) {
    .nearby-panel {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-height: 55%;
        border-radius: 16px 16px 0 0;
        transform: translateY(110%);
    }

    .nearby-panel.is-open {
        transform: translateY(0);
    }

    .nearby-panel.is-open.is-dragged {
        transform: none;
    }

    .nearby-scope-toggle {
        flex-direction: column;
    }

    .nearby-schools-mode {
        width: 100%;
    }

    .nearby-schools-mode .nearby-filter-chip {
        flex: 1;
        justify-content: center;
    }
}

/* Inline map layer controls — larger normal view */
.map-section .map-overlay-controls {
    margin-top: 12px;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.map-section .overlay-control-group-compact {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    max-width: 100%;
    padding: 14px 18px 16px;
    margin: 0;
    box-sizing: border-box;
    border-radius: 10px;
}

.map-section .overlay-control-group-compact h4 {
    margin: 0 0 10px;
    font-size: 15px;
    letter-spacing: 0.04em;
    padding-bottom: 5px;
    border-bottom-width: 2px;
    line-height: 1.2;
}

.map-section .overlay-control-group-compact .overlay-control-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 16px;
    width: max-content;
    max-width: none;
}

.map-section .overlay-control-group-compact .control-toggle {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: auto !important;
    max-width: none;
    padding: 6px 4px;
    margin: 0;
    font-size: 15px;
    white-space: nowrap;
}

.map-section .overlay-control-group-compact .control-toggle-label {
    order: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
}

.map-section .overlay-control-group-compact .control-toggle-slider {
    order: 1;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    margin: 0;
    flex-shrink: 0;
}

.map-section .overlay-control-group-compact .control-toggle-slider::before {
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
}

.map-section .overlay-control-group-compact .control-toggle input[type="checkbox"]:checked + .control-toggle-slider::before {
    transform: translateX(20px);
}

/* Fullscreen map layers: one horizontal row, fit content (no tall stack) */
.map-container.fullscreen .fullscreen-overlay-panel {
    width: fit-content !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    padding: 10px 14px 12px !important;
}

.map-container.fullscreen .fullscreen-overlay-panel .overlay-section {
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
}

.map-container.fullscreen .fullscreen-overlay-panel .overlay-section h4 {
    margin: 0 0 8px;
    font-size: 13px;
}

.map-container.fullscreen .fullscreen-overlay-panel .overlay-controls {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px 14px;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    width: max-content;
    max-width: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.map-container.fullscreen .fullscreen-overlay-panel .overlay-toggle {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: auto;
    font-size: 13px;
    padding: 4px 2px;
}

/* ===== School insights accordion + compare modals ===== */
.si-leaflet-popup .leaflet-popup-content {
    margin: 10px 12px;
    min-width: 360px;
    width: 360px;
    max-height: 70vh;
    overflow: auto;
}
.si-leaflet-popup .leaflet-popup-content-wrapper {
    min-width: 360px;
}
.si-popup {
    min-width: 336px;
}
.si-loading {
    min-width: 336px;
    box-sizing: border-box;
    padding: 12px;
    color: #567;
}
.si-shell { font-size: 13px; color: #1b2b2b; }
.si-header { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.si-logo { width: 40px; height: 40px; border-radius: 8px; border: 1px solid #dde8e8; background: #f7fbfb; object-fit: contain; }
.si-logo-fallback { flex-shrink: 0; }
.si-logo-note { font-size: 10px; margin-top: 2px !important; }
.nearby-area-summary,
.si-compare-summary {
    background: #f4faf9;
    border: 1px solid #d5e8e6;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.nearby-area-summary h5,
.si-compare-summary h5 {
    margin: 0 0 6px;
    color: var(--primary-colour);
    font-size: 0.95rem;
}
.si-shell h4 { margin: 0 0 2px; font-size: 1.05rem; }
.si-sub { margin: 0; color: #567; font-size: 12px; }
.si-contacts p, .si-acc-body p { margin: 4px 0; }
.si-actions { display: grid; gap: 6px; margin: 10px 0; }
.si-acc { border: 1px solid #e2eaea; border-radius: 8px; margin: 6px 0; background: #fff; }
.si-acc summary { cursor: pointer; padding: 8px 10px; font-weight: 600; color: var(--primary-colour); list-style: none; }
.si-acc summary::-webkit-details-marker { display: none; }
.si-acc-body { padding: 0 10px 10px; border-top: 1px solid #eef3f3; }
.si-acc-body h6 { margin: 8px 0 4px; color: #345; font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 700; }
.si-muted { color: #789; font-size: 12px; }
.si-emoji { margin-right: 2px; }
.si-perf-subhead { margin: 10px 0 4px; }
.si-perf-list {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
    display: grid;
    gap: 4px;
}
.si-perf-attain li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
}
.si-prog-note { margin: 4px 0 8px; line-height: 1.35; }
.si-sca-scale {
    margin: 10px 0 8px;
    padding: 8px 2px 2px;
}
.si-sca-scale-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #334;
}
.si-sca-scale-head strong { color: #1b2b2b; }
.si-sca-track-wrap {
    position: relative;
    height: 18px;
    margin: 0 4px;
}
.si-sca-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 10px;
    margin-top: -5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2ecc71 0%, #f1c40f 42%, #e67e22 72%, #e74c3c 100%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.si-sca-marker {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    margin-top: -8px;
    border-radius: 50%;
    background: #58d68d;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.28);
    z-index: 1;
}
.si-sca-ticks {
    display: flex;
    justify-content: space-between;
    margin: 4px 2px 0;
    font-size: 11px;
    color: #7a8a8a;
    letter-spacing: 0.02em;
}
.si-sca-ends {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
}
.si-sca-good { color: #1e9e4b; }
.si-sca-poor { color: #c0392b; }
.si-sca-note { margin: 6px 0 0; }
.si-ttn-how { margin: 0 0 8px; }
.si-ttn-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.si-ttn-contact {
    padding: 8px 10px;
    background: #f4f8f8;
    border: 1px solid rgba(11, 61, 74, 0.08);
    border-radius: 8px;
}
.si-ttn-contact a { color: var(--primary-colour, #008080); font-weight: 600; }
.si-ttn-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    color: #5a6f76;
    background: #e8eef0;
    border-radius: 4px;
    padding: 2px 6px;
}
.si-ttn-more {
    margin-top: 8px;
}
.si-ttn-more > summary {
    cursor: pointer;
    color: var(--primary-colour, #008080);
    font-weight: 600;
    font-size: 13px;
}
.si-ttn-more[open] > summary {
    margin-bottom: 8px;
}
.nearby-ttn-via { color: #789; font-size: 11px; }
.nearby-ttn-more { margin-top: 4px !important; }
.si-mini-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0; }
.si-mini-table th, .si-mini-table td { border-bottom: 1px solid #eef2f2; padding: 4px 6px; text-align: left; }
.si-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }
.si-ttn { background: #e6f6ea; color: #1f7a3a; }
.si-prospect { background: #fdecec; color: #a52834; }
.si-tips { margin: 6px 0 0; padding-left: 18px; color: #456; }
.si-tips li { margin: 0 0 8px; line-height: 1.4; }
.si-tips li:last-child { margin-bottom: 0; }

.si-modal {
    position: fixed; inset: 0; z-index: 11050;
    display: none; align-items: center; justify-content: center;
    background: rgba(10, 30, 30, 0.45); padding: 16px;
}
.si-modal.is-open { display: flex; }
.si-modal-card {
    background: #fff; border-radius: 12px; width: min(520px, 100%);
    max-height: 90vh; overflow: auto; padding: 16px 18px 18px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.25);
}
.si-modal-wide { width: min(1100px, 100%); }
.si-modal-card header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.si-modal-card h3 { margin: 0; }
.si-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.si-modal-header-actions { display: flex; gap: 8px; align-items: center; }
.si-compare-wrap { overflow: auto; max-height: 65vh; }
.si-compare-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.si-compare-table th { background: #008080; color: #fff; padding: 8px; text-align: left; position: sticky; top: 0; }
.si-compare-table td { padding: 8px; border-bottom: 1px solid #e8eeee; }
.si-compare-table tr:nth-child(even) td { background: #f7fbfb; }
.si-selected-row td { background: #fff8dc !important; }
.si-selected-badge { background: #ffe58f; color: #664d03; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; }

.nearby-panel-toolbar { display: flex; gap: 8px; align-items: center; padding: 6px 16px; border-bottom: 1px solid rgba(0,0,0,0.05); flex-wrap: wrap; }
.nearby-help summary { cursor: pointer; font-size: 12px; color: var(--primary-colour); font-weight: 600; }
.nearby-help p { margin: 6px 0 0; font-size: 12px; color: #567; max-width: 360px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* ---- In-app feedback (header) ---- */
.feedback-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(11, 61, 74, 0.18);
    background: #f4f8f8;
    color: var(--secondary-colour, #0b3d4a);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.feedback-open-btn:hover,
.feedback-open-btn:focus-visible {
    background: #e7f2f2;
    border-color: var(--primary-colour, #008080);
    color: var(--primary-colour, #008080);
    outline: none;
}
.feedback-open-btn i { font-size: 0.95rem; }
body.feedback-modal-open { overflow: hidden; }
.feedback-modal[hidden] { display: none !important; }
.feedback-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.feedback-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 28, 34, 0.55);
}
.feedback-modal__panel {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: min(90vh, 720px);
    overflow: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(8, 28, 34, 0.28);
    border: 1px solid rgba(11, 61, 74, 0.08);
}
.feedback-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem 0.65rem;
}
.feedback-modal__eyebrow {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-colour, #008080);
    font-weight: 700;
}
.feedback-modal__header h3 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--secondary-colour, #0b3d4a);
}
.feedback-modal__close {
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: #667;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
}
.feedback-modal__close:hover { color: #111; }
.feedback-modal__body { padding: 0 1.25rem 1.25rem; }
.feedback-modal__lede {
    margin: 0 0 1rem;
    color: #4a5d63;
    font-size: 0.92rem;
}
.feedback-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--secondary-colour, #0b3d4a);
    margin: 0 0 0.45rem;
}
.feedback-type {
    border: 0;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}
.feedback-type__option {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(11, 61, 74, 0.14);
    border-radius: 10px;
    cursor: pointer;
    background: #fbfcfc;
}
.feedback-type__option:has(input:checked) {
    border-color: var(--primary-colour, #008080);
    background: #eef7f7;
}
.feedback-type__option input { margin-top: 0.25rem; }
.feedback-type__option span {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.feedback-type__option strong { color: var(--secondary-colour, #0b3d4a); font-size: 0.92rem; }
.feedback-type__option small { color: #617278; font-size: 0.8rem; }
#nest-feedback-message {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(11, 61, 74, 0.18);
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    font: inherit;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 140px;
    color: #1a2a2f;
    background: #fff;
}
#nest-feedback-message:focus {
    outline: 2px solid rgba(0, 128, 128, 0.25);
    border-color: var(--primary-colour, #008080);
}
.feedback-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.4rem 0 0.85rem;
    font-size: 0.75rem;
    color: #6a7a80;
}
.feedback-status {
    min-height: 1.2em;
    margin: 0 0 0.85rem;
    font-size: 0.88rem;
}
.feedback-status.is-error { color: #a31818; }
.feedback-status.is-success { color: #0f6b4c; }
.feedback-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}
@media (max-width: 640px) {
    .feedback-open-label { display: none; }
    .feedback-modal__panel { border-radius: 12px; }
}

/* Filtered export preview (map + member directory) */
.export-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.export-preview-overlay[hidden] {
    display: none !important;
}
.export-preview-card {
    background: #fff;
    border-radius: 10px;
    width: min(920px, 96vw);
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.export-preview-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #e6eeeb;
}
.export-preview-card header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--secondary-colour, #0a3d32);
}
.export-preview-body {
    padding: 16px 18px 18px;
}
.export-preview-summary {
    margin: 0 0 12px;
    color: #335049;
    font-size: 0.92rem;
    line-height: 1.45;
}
.export-preview-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: flex-end;
    margin-bottom: 14px;
}
.export-preview-filters label,
.export-preview-check {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #335049;
}
.export-preview-check {
    flex-direction: row;
    align-items: center;
    font-weight: 500;
}
.export-preview-filters select,
.export-preview-filters input[type="search"] {
    min-width: 160px;
    padding: 6px 8px;
    border: 1px solid #c9d6d1;
    border-radius: 6px;
    font: inherit;
    background: #fff;
}
.export-preview-table-wrap {
    overflow-x: auto;
    border: 1px solid #e6eeeb;
    border-radius: 8px;
    max-height: 280px;
}
.export-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.export-preview-table th,
.export-preview-table td {
    padding: 7px 8px;
    border-bottom: 1px solid #eef3f1;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}
.export-preview-table th {
    background: #f7faf9;
    position: sticky;
    top: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #5b6b66;
}
.export-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.export-preview-note {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: #5b6b66;
}
.filters-section .filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}