﻿.map-container-auto {
    width: 100%;
    height: 520px;
    min-height: 520px;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
}

@media (max-width: 768px) {
    .map-container-auto {
        height: 420px;
    }
}

.map-border {
    border: 1px solid #d8dee4;
}

.map-empty {
    width: 100%;
    height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 14px;
}

.public-map-wrap {
    position: relative;
}

/* ===== 桌機：浮在地圖左上 ===== */
.public-map-legend {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1000;
    min-width: 230px;
    background: rgba(255,255,255,.96);
    border: 1px solid #d8dee4;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    padding: 12px 14px;
}

/* ===== 手機：移到地圖下方 ===== */
@media (max-width: 768px) {
    .public-map-legend {
        position: static; /* 👈 關鍵 */
        width: 100%;
        min-width: 0;
        margin-top: 10px;
        box-shadow: none;
    }
}

.public-map-legend-title {
    font-weight: 700;
    font-size: 14px;
    color: #334155;
    margin-bottom: 8px;
}

.public-map-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(0,0,0,.06);
    font-size: 13px;
}

    .public-map-legend-item:last-child {
        border-bottom: none;
    }

.legend-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.legend-marker {
    width: 16px;
    height: 16px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: inline-block;
    position: relative;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    flex: 0 0 16px;
    margin-right: 2px;
}

.legend-marker-inner {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    position: absolute;
    top: 3px;
    left: 4px;
}

/* 直接沿用你原本 marker 色 */
.marker-new {
    background: #6C757D;
}

.marker-opened {
    background: #007BFF;
}

.marker-dispatched {
    background: #17A2B8;
}

.marker-done {
    background: #28A745;
}

.legend-count {
    font-weight: 700;
    color: #0f172a;
}

.custom-popup {
    min-width: 260px;
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
}

.custom-popup-card {
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}

.custom-popup-head {
    padding: 10px 12px;
    background: linear-gradient(135deg, #f8fafc, #e5e7eb);
    color: #111827;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 左：Report No */
.custom-popup-title {
    font-weight: 700;
    font-size: 14px;
}

/* 共用 */
.custom-popup-status {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.3px;
}

/* NEW 灰 */
.status-new {
    background: rgba(108, 117, 125, 0.15);
    color: #495057;
}

/* OPENED 藍 */
.status-opened {
    background: rgba(13, 110, 253, 0.15);
    color: #0d47a1;
}

/* DISPATCHED 青 */
.status-dispatched {
    background: rgba(23, 162, 184, 0.18);
    color: #0e7490;
}

/* DONE 綠 */
.status-done {
    background: rgba(40, 167, 69, 0.18);
    color: #166534;
}

.status-cancelled {
    background: rgba(220, 53, 69, 0.14);
    color: #b02a37;
}

.status-internal {
    background: rgba(111, 66, 193, 0.14);
    color: #5a32a3;
}

.status-warranty {
    background: rgba(253, 126, 20, 0.16);
    color: #b45309;
}

.status-transfer {
    background: rgba(102, 16, 242, 0.12);
    color: #4c1d95;
}


.custom-popup-body {
    padding: 10px 12px 8px;
    background: #fff;
}

.custom-popup-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(0,0,0,.06);
}

    .custom-popup-row:last-child {
        border-bottom: none;
    }

.custom-popup-label {
    width: 62px;
    min-width: 62px;
    color: #64748b;
    font-weight: 600;
}

.custom-popup-value {
    flex: 1;
    color: #0f172a;
    word-break: break-word;
}

.custom-popup-actions {
    padding: 10px 12px 12px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.custom-popup .btn-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

    .custom-popup .btn-row button {
        flex: 1 1 0;
        width: 0;
        border: none;
        border-radius: 8px;
        padding: 9px 0;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        color: #fff;
        cursor: pointer;
        white-space: nowrap;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 2px 8px rgba(0,0,0,.12);
        transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
    }

        .custom-popup .btn-row button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,0,0,.16);
        }

.custom-popup .btn-nav {
    background-color: #16a34a;
}

    .custom-popup .btn-nav:hover {
        background-color: #15803d;
    }

.custom-popup .btn-street {
    background-color: #2563eb;
}

    .custom-popup .btn-street:hover {
        background-color: #1d4ed8;
    }

.leaflet-popup-content {
    margin: 10px 12px;
}

.status-marker {
    width: 32px;
    height: 32px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    position: relative;
}

.status-marker-inner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    position: absolute;
    top: 9px;
    left: 9px;
}

.status-marker {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .status-marker:hover {
        transform: rotate(-45deg) scale(1.15);
        box-shadow: 0 4px 14px rgba(0,0,0,.4);
    }

.marker-new {
    background: #6C757D;
}

.marker-opened {
    background: #007BFF;
}

.marker-dispatched {
    background: #17A2B8;
}

.marker-done {
    background: #28A745;
}

.leaflet-div-icon {
    background: transparent !important;
    border: none !important;
}

.grid-row-linkable {
    cursor: pointer;
}

#incidentMap .leaflet-control-fullscreen {
    margin-top: 10px !important;
    margin-right: 10px !important;
}

/* =========================
   Grid 狀態 Badge
   與地圖 Legend 顏色一致
   ========================= */
.grid-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: .2px;
}

.grid-status-new {
    background: rgba(108, 117, 125, 0.15);
    color: #495057;
    border: 1px solid rgba(108, 117, 125, 0.28);
}

.grid-status-opened {
    background: rgba(13, 110, 253, 0.15);
    color: #0d47a1;
    border: 1px solid rgba(13, 110, 253, 0.28);
}

.grid-status-dispatched {
    background: rgba(23, 162, 184, 0.18);
    color: #0e7490;
    border: 1px solid rgba(23, 162, 184, 0.32);
}

.grid-status-done {
    background: rgba(40, 167, 69, 0.18);
    color: #166534;
    border: 1px solid rgba(40, 167, 69, 0.32);
}

/* 已註銷 */
.grid-status-cancelled {
    background: rgba(220, 53, 69, 0.14);
    color: #b02a37;
    border: 1px solid rgba(220, 53, 69, 0.30);
}

/* 機關自辦完成 */
.grid-status-internal {
    background: rgba(111, 66, 193, 0.14);
    color: #5a32a3;
    border: 1px solid rgba(111, 66, 193, 0.30);
}

/* 保固內，轉保固商 */
.grid-status-warranty {
    background: rgba(253, 126, 20, 0.16);
    color: #b45309;
    border: 1px solid rgba(253, 126, 20, 0.32);
}

/* 權責外，轉其他單位 */
.grid-status-transfer {
    background: rgba(102, 16, 242, 0.12);
    color: #4c1d95;
    border: 1px solid rgba(102, 16, 242, 0.26);
}

.grid-status-other {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.22);
}

/* =========================
   已併案 MERGED
   ========================= */

/* 明細頁狀態 pill */
.status-merged {
    background: rgba(14, 165, 233, 0.14);
    color: #075985;
    border: 1px solid rgba(14, 165, 233, 0.30);
}

/* 地圖 marker */
.marker-merged {
    background: #0EA5E9;
}

/* Grid 狀態 Badge */
.grid-status-merged {
    background: rgba(14, 165, 233, 0.14);
    color: #075985;
    border: 1px solid rgba(14, 165, 233, 0.30);
}

.grid-status-badge:not(.grid-status-new):not(.grid-status-opened):not(.grid-status-dispatched):not(.grid-status-done):not(.grid-status-cancelled):not(.grid-status-internal):not(.grid-status-warranty):not(.grid-status-transfer):not(.grid-status-merged) {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.22);
}

/* =========================
       PublicRecordList 滿版與 Grid Scroll 修正
       桌機吃滿，小螢幕才左右捲
       ========================= */
.public-page-wrap {
    width: 100%;
}

.public-grid .irrs-grid-scroll-x {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

/* 桌機：不要硬撐寬，避免無謂 scrollbar */
.public-grid .irrs-grid {
    width: 100% !important;
    min-width: 0;
}

/* 小螢幕：才給最小寬度，讓它左右滑 */
@media (max-width: 767.98px) {
    .public-grid .irrs-grid {
        min-width: 850px;
    }

        .public-grid .irrs-grid table {
            white-space: nowrap;
        }
}

.irrs-day-filter {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    background: #f1f5f9;
    border: 1px solid #dbe3ee;
    border-radius: 999px;
}

.irrs-day-btn {
    border: 0;
    background: transparent;
    color: #475569;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}

    .irrs-day-btn:hover {
        background: #e2e8f0;
        color: #0f172a;
    }

    .irrs-day-btn.active {
        background: #2563eb;
        color: #ffffff;
        box-shadow: 0 2px 8px rgba(37, 99, 235, .25);
    }

.public-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

    .public-title-row .function-header {
        margin-bottom: 0;
    }

.public-title-note {
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 10px;
}

.irrs-day-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: #f1f5f9;
    border: 1px solid #dbe3ee;
    border-radius: 999px;
    white-space: nowrap;
}

.irrs-day-btn {
    border: 0;
    background: transparent;
    color: #475569;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
}

    .irrs-day-btn:hover {
        background: #e2e8f0;
        color: #0f172a;
    }

    .irrs-day-btn.active {
        background: #2563eb;
        color: #ffffff;
        box-shadow: 0 2px 8px rgba(37, 99, 235, .25);
    }

.public-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.irrs-day-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .public-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .irrs-day-filter {
        width: 100%;
    }

    .irrs-day-btn {
        flex: 1;
    }
}


.map-touch-hint {
    display: none;
}

@media (max-width: 768px) {
    .map-touch-hint {
        display: block;
        margin-top: 6px;
        font-size: 13px;
        color: #6b7280;
        text-align: center;
    }
}