/* ---- MandiDashbaord.css ----*/

/* =========================
   Select2 (dark theme)
   ========================= */
.select2-dropdown {
    background-color: #18212f;
    color: #ffffff;
}

/* =========================
   Card charts: fixed height
   ========================= */
.chart-fixed {
    height: 260px !important;
    position: relative;
}

.chart-fixed canvas {
        position: absolute;
        inset: 0;
    }

/* =========================
   Google Maps InfoWindow (container)
   ========================= */
.gm-style .gm-style-iw-c {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 12px !important;
}

.gm-style .gm-style-iw-d {
    overflow: auto !important;
    max-height: clamp(260px, 70vh, 560px) !important;
    padding-right: 2px;
}

.gm-style .gm-style-iw-d::-webkit-scrollbar {
        width: 8px;
    }

.gm-style .gm-style-iw-d::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.25);
        border-radius: 8px;
    }

.gm-style .gm-style-iw-tc { /* pointer */
    display: none !important;
}

.gm-ui-hover-effect { /* close button */
    border-radius: 8px !important;
    opacity: 1 !important;
    background: var(--dashboard-primary) !important;
    color: var(--body-text-color-white) !important;
    border: 1px solid var(--dashboard-secondary) !important;
    top: 0px !important;
    right: 6px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    width: 34px !important;
    height: 34px !important;
}

.gm-ui-hover-effect > span,
.gm-ui-hover-effect img {
        filter: invert(1) brightness(2) !important;
        width: 18px !important; /* smaller than 34 */
        height: 18px !important;
        margin: 8px !important; /* (34 - 18) / 2 = 8 → centered */
    }

/* =========================
   InfoWindow card (content)
   ========================= */
.g-iw.iw-teal {
    color: #e6fffa !important;
}

.g-iw.iw-teal b {
        color: #fff !important;
    }

.g-iw.iw-teal .iw-card {
        margin: 6px;
    }

.iw-card {
    background: var(--dashboard-secondary);
    color: var(--body-text-color-white);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 260px;
    max-width: 360px;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    font-size: 12px;
    line-height: 1.25;
}

.iw-head {
    margin-bottom: 8px;
}

.iw-cat {
    font-weight: 700;
    opacity: .95;
}

.iw-title {
    font-weight: 800;
    font-size: 14px;
    line-height: 1.15;
    margin-top: 2px;
}

.iw-rows {
    margin-top: 6px;
}

.iw-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 10px;
    border-radius: 6px;
    margin: 6px 0;
    background: rgba(0,0,0,.18);
}

.iw-row:nth-child(even) {
        background: rgba(0,0,0,.10);
    }

.iw-key {
    font-weight: 600;
    opacity: .9;
}

.iw-val {
    font-weight: 700;
    color: #fff;
}

.iw-list {
    max-height: 200px;
    overflow: auto;
    padding-left: 16px;
    margin: 6px 0 0;
}

.iw-note {
    color: #d1fae5;
    opacity: .9;
    font-size: 11px;
}

/* =========================
   Map legend + toggle buttons
   ========================= */
.map-legend {
    background: var(--dashboard-secondary);
    color: var(--body-text-color-white);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    min-width: 150px;
}

.map-legend .lg-title {
        font-weight: 800;
        font-size: 13px;
        color: var(--body-text-color-white);
        margin: 2px 0 6px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.map-legend .lg-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        border-bottom: 1px dashed rgba(255,255,255,.08);
    }

.map-legend .lg-row:last-child {
            border-bottom: 0;
        }

.map-legend .lg-chip {
        width: 18px;
        height: 10px;
        border-radius: 999px;
        display: inline-block;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
    }

.map-legend .lg-dot {
        width: 12px;
        height: 12px;
        border-radius: 999px;
        display: inline-block;
        border: 1.5px solid var(--color-ownership-stroke);
    }

.map-legend .badge-chip {
        background: transparent;
        color: var(--text-on-dark);
        border: 1px solid rgba(255,255,255,.35);
    }

.map-legend .lg-note {
        color: #6b7280;
        margin-top: 4px;
    }

.map-toggle-btn {
    background: var(--dashboard-secondary);
    color: var(--body-text-color-white);
    border: 1px solid #0ea5a5;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    margin: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    user-select: none;
}

.map-toggle-btn:hover {
        filter: brightness(1.05);
    }

/* Keep map aligned with sidebars on lg+ and comfy on mobile */
.map-vh {
    height: var(--aside-max-h, 520px); /* uses your layout var; fallback 520px */
    border-radius: 12px;
    background: #f2f6fb;
}
/* Mobile/tablet: slightly taller but not crazy */
@media (max-width: 991.98px) {
    .map-vh {
        height: min(68vh, 560px);
    }
}
/* Prevent the map container from shrinking inside flex parents */
.map-wrap, #gmap {
    min-height: 320px;
}


/* =========================
   Chart modal – nicer size, no visible scrollbars
   ========================= */

/* Limit width so it’s not giant fullscreen */
#chartModal .modal-dialog {
    max-width: 860px;
    margin: 1.75rem auto; /* center like standard Bootstrap */
}

@media (min-width: 1400px) {
    #chartModal .modal-dialog {
        max-width: 920px; /* thora sa wide on very large screens */
    }
}

#chartModal .modal-content.dashboard-modal {
    background:var(--zoomed-model-color);
    color: #dfe8f6;
    border: 1px solid #0ea5a5;
    border-radius: .75rem;
    max-height: 80vh; /* kabhi bhi screen se ziada nahi */
    display: flex;
    flex-direction: column; /* header/body/footer neatly stacked */
}

#chartModal .modal-header {
    border-bottom-color: rgba(255,255,255,.12);
}

#chartModal .modal-body, #cardModal .modal-body {
    background: var(--zoomed-model-color);
    color: #dfe8f6;
    padding: 1rem 1.25rem;
    max-height: 60vh; /* chart area ki height */
    overflow-y: auto; /* scroll possible but… */
    overflow-x: hidden;
    -ms-overflow-style: none; /* IE/old Edge */
    scrollbar-width: none; /* Firefox */
}

#chartModal .modal-body::-webkit-scrollbar {
        width: 0;
        height: 0; /* Chrome/Safari */
    }

/* Chart canvas size – reasonable, not too huge */
#chartModalCanvas {
    width: 100% !important;
    height: 380px !important; /* yahan se modal visually chhota lagega */
    max-height: 60vh;
    display: block;
}


/* =========================
   Inline legends (under small pies)
   ========================= */
.legend-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
}

.legend-inline .item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--body-text-color-white);
    }

.legend-inline .sw {
        width: 12px;
        height: 12px;
        border-radius: 3px;
        border: 1px solid rgba(255,255,255,.35);
    }

/* =========================
   Badges
   ========================= */
.badge-chip {
    border: 1px solid var(--dashboard-accent);
    border-radius: 99px;
    background: transparent;
    color: var(--body-text-color-white);
    display: inline-block;
    padding: 3px 8px;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .2px;
}

.badge-chip:hover {
        background-color: var(--dashboard-secondary-darker);
        border-color: var(--card-border);
        transform: scale(1.08);
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
.badge-chip:active {
        transform: scale(0.96);
        box-shadow: 0 2px 4px rgba(0,0,0,0.25) inset;
        transition: all 0.1s ease; /* fast press */
    }
   
.badge-neutral {
    background: #24324d;
    color: #e9f0fa;
    border: 1px solid rgba(255,255,255,.08);
}
/* Uses your :root ownership colors */
.badge-private {
    background: var(--color-ownership-private);
    color: #0b1220;
}

.badge-public {
    background: var(--color-ownership-public);
    color: #0b1220;
}
/* .badge-govt intentionally same as public unless you add a distinct var */
.badge-govt {
    background: var(--color-ownership-public);
    color: #0b1220;
}

/* Corrected selector */
.render-content {
    padding-top: 15px;
}

/* Laptop+ — full width, exactly 44px tall, safe cropping */
@media (min-width: 992px) {
    /* Stable full-width, fixed-height banner (no jitter) */
    .header-navbar .nav-banner-middle {
        flex: 1 1 0 !important;
        height: 60px !important;
        min-height: 44px !important;
        overflow: hidden !important;
        border-radius: 6px !important;
        display: block !important;
        padding: 0 !important;
    }

    .header-navbar .header-banner {
        display: block !important;
        width: 100% !important;
        height: 60px !important;
        min-height: 50px !important;
        object-fit: fill !important;
        object-position: center !important;
        transform: translateZ(0) !important;
        will-change: transform !important;
    }
}

/* tiny color chips used in "Land Ownership by District" legend */
.sq {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: middle;
    border: 1px solid rgba(0,0,0,.25);
}

/* Drag affordance on ownership seg group (when JS adds grabbing) */
.seggroup-grab {
    cursor: grabbing !important;
}

/* =========================
   Segbar (scroll + size) — consolidated & fixed
   ========================= */

/* Baseline horizontal scroller for any segbar row */
.segbar-scroll {
    overscroll-behavior-inline: contain;
    touch-action: pan-x; /* allow horizontal touch scrolling */
    -webkit-user-select: none;
    user-select: none;
    max-width: 100%;
    display: block;
    /* definitive scroll behavior: horizontal only by default */
    overflow-x: auto;
    overflow-y: hidden; /* avoid vertical scroll that can collapse the row on some browsers/zooms */
    -webkit-overflow-scrolling: touch;
    flex: 0 0 auto;
}

/* Ownership-specific wrapper: allow vertical visibility if chips wrap or font metrics differ */
#ownershipSegWrap {
    position: relative;
    z-index: 2;
    overflow-x: auto;
    overflow-y: visible; /* show, don't scroll; prevents "vanish" in inspect/zoom cases */
    -webkit-overflow-scrolling: touch;
    padding-block: 2px; /* prevents margin-collapsing with siblings */
    max-width: 100%;
}

/* The row of chips itself */
.segbar {
    display: flex;
    gap: .5rem;
    white-space: nowrap;
    min-width: max-content;
    min-height: 34px; /* ensure it never collapses */
    align-items: center;
}

 /* Individual chip */
.segbar .seg {
        user-select: none;
        cursor: pointer;
        line-height: 32px; /* consistent tap target height */
    }

/* =========================
   Quality badge on images
   ========================= */
.badge-qual {
    position: absolute;
    left: 6px;
    top: 6px;
    padding: .2rem .5rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #0b1220;
    background: #cbd5e1; /* default */
    border: 1px solid rgba(0,0,0,.15);
}

.badge-qual.good {
        background: var(--dashboard-emerald,#10b981);
        color: #052e2b;
    }

.badge-qual.avg {
        background: var(--dashboard-orange,#f59e0b);
        color: #3b2a05;
    }

.badge-qual.bad {
        background: var(--dashboard-red,#ef4444);
        color: #3a0b0b;
    }


/* ============ Left Sidebar — uniform spacing ============ */
/* 1) Make sure the container’s gap controls all spacing */
.sidebar-scroll.d-flex {
    gap: var(--left-sidebar-gap, 8px) !important; /* one knob to tune */
}

/* 2) Kill any accidental margins on the sections inside */
#ownershipSegWrap,
#mandiAreaSeg,
#agencySegWrap,
.sidebar-scroll .soft-card,
.sidebar-scroll .soft-card-light,
.sidebar-scroll .segbar {
    margin: 0.09rem !important;
}

/* ==== Filter Modal (PAMRA Market / Mandi Dashboard) ==== */
#filterModal .modal-content {
    --bs-modal-bg: #063a6a; /* override Bootstrap variable */
    background: #063a6a !important; /* enforce background */
    color: #e9f0fb;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
}

/* Ensure header, body, and footer share same background color */
/*#filterModal .modal-header,
#filterModal .modal-body,
#filterModal .modal-footer {
    background: #063a6a !important;
    color: #e9f0fb;
    border-color: rgba(255,255,255,.18);
}*/

/* Label and title color */
#filterModal .modal-title,
#filterModal label {
    color: #e9f0fb;
}

/* Input and select fields slightly lighter for contrast */
#filterModal .form-control,
#filterModal .form-select {
    background: var(--dashboard-secondary);
    color: var(--body-text-color-white);
    border-color: var(--card-border);
}

#filterModal .form-control::placeholder {
        color: rgba(255,255,255,.75);
    }

/* Select2 dark theme inside modal */
#filterModal .select2-container .select2-selection {
    background: var(--dashboard-secondary);
    color: var(--body-text-color-white);
    border-color: var(--card-border);
}
.dark-layout .select2-container .select2-dropdown {
    background: var(--dashboard-secondary);
    color: var(--body-text-color-white);
    border-color: var(--card-border);
}
.dark-layout .select2-container .select2-selection,
.dark-layout .select2-container .select2-search__field,
.dark-layout .select2-container .select2-selection__placeholder {
    background: var(--dashboard-primary);
    color: var(--body-text-color-white);
    border-color: var(--card-border);
}
.dark-layout .select2-container .select2-selection__rendered {
    color: var(--body-text-color-white);
}

.dark-layout input.form-control, .dark-layout select.form-select, .dark-layout textarea.form-control {
    background-color: var(--dashboard-primary);
    color: var(--body-text-color-white);
}
/* Adjust buttons for better contrast */
#filterModal .btn-primary,
#filterModal .btn-success {
    background-color: #0ea5a5 !important;
    border-color: #0ea5a5 !important;
    color: #fff !important;
}

#filterModal .btn-secondary,
#filterModal .btn-outline-secondary {
    background-color: transparent !important;
    border-color: rgba(255,255,255,.35) !important;
    color: #e9f0fb !important;
}

#filterModal .btn-secondary:hover,
#filterModal .btn-outline-secondary:hover {
        background-color: rgba(255,255,255,.1) !important;
    }


/* =========================
           Facilities Scrollable (Invisible Scrollbar)
           ========================= */
.facilities-scroll {
    max-height: 260px;
    width:100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    mask-image: none; /* Add this line */
    display: block;
}

.facilities-scroll::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none; /* Chrome/Safari */
    }