/* ── Map container ─────────────────────────────────────── */
#map_container {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dee2e6;
}
.plant-img {
    width: 83%;
    display: block;
    margin: 0 auto;
}
.zones-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 83%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none; /* let clicks pass to children only */
}
.zones-overlay > * { pointer-events: auto; }
/* Area buttons – base */
.area-btn {
    position: absolute;
    z-index: 10;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.18s ease;
    background: rgba(254,254,6,0.35);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; color: #333;
    padding: 0; border-radius: 4px;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.18);
}
.area-btn.area-active {
    background: rgb(255, 252, 83, 0.5);
    color: #000;
    border-color: rgb(210, 206, 0);
}
.area-btn.area-active:hover { background: rgb(255, 242, 41); border-color: rgb(255, 252, 83); }
.area-btn.not-allowed { opacity: .3; pointer-events: none; filter: grayscale(1); }
.machine-btn { z-index: 12; }

.machine-btn.area-active {
    background: rgba(25,135,84,0.5);
    color: #fff;
    border-color: rgba(25,135,84,0.8);
}

.machine-btn.machine-active:hover { background: rgba(25,135,84,0.75); border-color: #fff; }
.machine-btn.machine-not-allowed { opacity: .3; pointer-events: none; filter: grayscale(1); }

/* CSS coordinates (from areaModal.css) */
#area-A1    { width:11.3%; height:7.3%;  right:10.3%; top:50%;   }
#area-A1\&2 { width:11.4%; height:21%;   right:44.1%; top:22.5%; }
#area-A3    { width:6.8%;  height:14.2%; right:60.3%; top:43%;   }
#area-A4    { width:3.7%;  height:16.8%; right:64%;   top:22.6%; }
#area-S0    { width:46.8%; height:7%;    right:9%;    top:14%;   }
#area-S1    { width:77.4%; height:14.8%; right:10%;   top:58.9%; }
#area-S2    { width:72.8%; height:15.4%; right:9.2%;  top:80.7%; }
#area-S3    { width:6.2%;  height:50%;   right:0.8%;  top:29.5%; writing-mode:vertical-lr; }
#area-S4    { width:59.3%; height:7.3%;  right:35.3%; top:3%;    }
#area-S5    { width:5%;    height:67%;   right:94.6%; top:4.2%;  writing-mode:vertical-lr; }
#macch-M1    { right:44.1%; top:47.2%; width:11.4%; height:9%;   }
#macch-M2    { right:33%;   top:15.8%; width:14%;   height:6%;   }
#macch-M3    { right:22.7%; top:44.7%; width:17%;   height:11%;  }
#macch-M4    { right:55.6%; top:22.7%; width:8.2%;  height:16.7%;}
#macch-M5    { right:59.7%; top:14%;   width:12.7%; height:8.3%; }
#macch-M6    { right:10.5%; top:25%;   width:11.2%; height:24%;  }
#macch-M7    { right:34.9%; top:23%;   width:4.5%;  height:14%;  }
#macch-M8    { right:67.3%; top:43.1%; width:4.9%;  height:14%;  }
#macch-M9    { right:68%;   top:22.7%; width:4.3%;  height:16.7%;}

/* ── Warehouse grid ─────────────────────────────────────── */
.grid-scroll-wrapper { overflow-x: auto; padding-bottom: 4px; }
.warehouse-grid { border-collapse: collapse; font-size: .7rem; }
.warehouse-grid th, .warehouse-grid td { border: 1px solid #adb5bd; padding: 0; }
.grid-corner   { width: 28px; min-width: 28px; }
.grid-col-header { min-width: 22px; width: 22px; text-align: center;
    background: #343a40; color: #fff; font-weight: 600; padding: 2px 0; }
.grid-row-label  { text-align: center; background: #495057; color: #fff;
    font-weight: 600; min-width: 28px; padding: 0 3px; }
.grid-cell {
    min-width: 22px; width: 22px; height: 22px;
    text-align: center; vertical-align: middle;
    font-size: .65rem; font-weight: 700;
    transition: filter .1s;
}
.grid-cell[tabindex] { cursor: pointer; }
.grid-cell[tabindex]:hover { filter: brightness(0.82); }
.grid-cell-free { background: #e9ecef; color: #adb5bd; cursor: default; }
.grid-cell-occ  { background: #198754; color: #fff; }
.grid-cell-lav  { background: #fd7e14; color: #fff; }

/* ── Legend badges ─────────────────────────────────────── */
.badge-legend { display: inline-block; width: 16px; height: 16px;
    border-radius: 3px; vertical-align: middle; margin-right: 4px; }
.badge-occ  { background: #198754; }
.badge-lav  { background: #fd7e14; }
.badge-free { background: #e9ecef; border: 1px solid #adb5bd; }

/* ── Filter panel ─────────────────────────────────────── */
#filter_panel { background: #f8f9fa; border-radius: 8px; }
.filter-badge {
    display: inline-block; padding: 2px 8px; border-radius: 12px;
    font-size: .75rem; font-weight: 600; margin-left: 8px;
}
.filter-badge.active { background: #0d6efd; color: #fff; }

/* ── Modal ────────────────────────────────────────────── */
.modal-xl-map { max-width: 95vw; }
@media (min-width:1400px) { .modal-xl-map { max-width: 1400px; } }

/* ── Popover tables ───────────────────────────────────── */
.popover {
    --bs-popover-bg: #eee;
    --bs-popover-font-size: 20px;
    --bs-popover-max-width: 80rem;
    --bs-popover-header-bg: lightgreen;
    max-width: var(--bs-popover-max-width);
    font-size: var(--bs-popover-font-size);
    background-color: var(--bs-popover-bg);
}

.popover-header {
    font-size: 30px !important;
    color: rgb(255, 255, 255);
    background-color: rgb(50, 50, 50);
    justify-content: center;
    display: flex;
}

.popover-body {
    padding: 10px !important;
    min-width: 54rem !important;
    max-height: 20rem !important;
    overflow: scroll !important;
}

.popover .table { 
    width: 100%;
    font-size: 1.0rem;
    margin-bottom: 0;
}

/* ── Active filter indicator ──────────────────────────── */
#active_filter_summary { font-size: .8rem; }