/* ============================================================
   style.css — CSS Desktop cho Bản đồ Dân tộc Tuyên Quang
   Chỉnh sửa file này để thay đổi giao diện trên máy tính.
   Không ảnh hưởng đến giao diện di động (xem mobile.css).
   ============================================================ */

:root {
    --primary: #c62828;
    --primary-dark: #b71c1c;
    --bg: #f5f5f5;
    --sidebar-bg: #ffffff;
    --text: #333333;
    --muted: #666666;
    --border: #e0e0e0;
}

* { box-sizing: border-box; }

body {
    margin: 0; padding: 0;
    font-family: 'Inter', sans-serif;
    background: #fff;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.header {
    background: linear-gradient(135deg, #c62828, #b71c1c);
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    flex-shrink: 0;
}
.header h1 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Layout chính */
.main-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* ---- Sidebars ---- */
.sidebar, .sidebar-right {
    width: 280px;
    background: #fff;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    overflow: hidden;
    z-index: 100;
}
.sidebar-right {
    border-right: none;
    border-left: 1px solid var(--border);
}

.sidebar-header {
    background: #00695c;
    color: #fff;
    padding: 12px 15px;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.sidebar-stats {
    padding: 8px 15px;
    background: #f9f9f9;
    text-align: center;
    font-size: 0.85rem;
    color: #555;
    border-bottom: 1px solid var(--border);
}

.search-box {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
}
.search-box input {
    width: 100%;
    padding: 8px 30px 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    outline: none;
}
.search-box input:focus { border-color: var(--primary); }

.clear-btn {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    display: none;
    background: none;
    border: none;
    font-size: 1rem;
}

.count-badge {
    background: rgba(255,255,255,0.25);
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 8px;
}

.commune-list, .ethnic-list {
    flex: 1;
    overflow-y: auto;
}

/* Danh sách Xã/Phường */
.commune-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .15s;
}
.commune-item:hover { background: #fef2f2; }
.commune-item.active { background: #c62828; color: #fff; }
.commune-item .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Danh sách Dân tộc */
.ethnic-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background .15s;
}
.ethnic-item:hover { background: #e3f2fd; }
.ethnic-item.active { background: #1976d2; color: #fff; }
.ethnic-item .pop-badge {
    background: #e3f2fd;
    color: #1976d2;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
}
.ethnic-item.active .pop-badge {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* ---- Vùng Bản đồ ---- */
.map-area {
    flex: 1;
    position: relative;
    overflow: hidden;
}
#map { width: 100%; height: 100%; }

/* Xóa viền focus khi click vào xã */
path.leaflet-interactive:focus { outline: none; }

/* ---- Bảng thông tin chi tiết (Info Panel) ---- */
.info-panel {
    position: absolute;
    top: 10px; right: 10px;
    width: 320px;
    max-height: calc(100% - 20px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: opacity .3s, transform .3s;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}
.info-panel.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.info-header {
    padding: 15px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.info-header h2 { margin: 0; font-size: 1.1rem; color: var(--primary); }

.close-btn {
    background: none; border: none;
    cursor: pointer; font-size: 1rem;
    color: #999; padding: 4px;
}
.close-btn:hover { color: #333; }

.info-content { overflow-y: auto; padding: 15px; }

.info-section { margin-bottom: 15px; }
.info-section h3 {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 4px;
}
.bg-tong-ho { background: #e3f2fd; border-left: 4px solid #1e88e5; color: #1565c0 !important; }
.bg-dan-toc { background: #fbe9e7; border-left: 4px solid #ff5722; color: #bf360c !important; }
.bg-khu-vuc { background: #e8f5e9; border-left: 4px solid #4caf50; color: #1b5e20 !important; }
.bg-tin-nguong { background: #efebe9; border-left: 4px solid #795548; color: #4e342e !important; }
.bg-thong-tin { background: #f3e5f5; border-left: 4px solid #9c27b0; color: #4a148c !important; }
.info-section p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text);
}

.stat-box {
    background: #fef2f2;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}
.stat-value { font-size: 1.5rem; font-weight: 800; color: var(--primary); }
.stat-label { font-size: 0.75rem; color: var(--muted); }

/* ---- Menu Thôn (DTTS, MN, DBKK) ---- */
.thon-type-item {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    background: #f5f5f5;
    color: #555;
    transition: all 0.2s;
}
.thon-type-item:hover { background: #e0e0e0; }
.thon-type-item[data-type="dtts"].active-thon { background: #1976d2; color: #fff; }
.thon-type-item[data-type="mn"].active-thon { background: #f57c00; color: #fff; }
.thon-type-item[data-type="dbkk"].active-thon { background: #d32f2f; color: #fff; }

/* ---- Bảng dân tộc bật từ dưới lên (Bottom Panel) ---- */
.bottom-panel {
    position: absolute;
    bottom: -100%; left: 0; right: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    z-index: 1000;
    transition: bottom .3s ease;
    max-height: 55%;
    display: flex;
    flex-direction: column;
}
.bottom-panel.show { bottom: 0; }

/* Trang thai phong to: che toan bo vung ban do */
.bottom-panel.expanded {
    max-height: calc(100% - 50px); /* tru navbar */
    bottom: 0;
}
.bottom-panel.expanded .bottom-panel-content {
    max-height: none; /* bo gioi han 5 dong */
    flex: 1;
}

.bottom-panel-header {
    padding: 15px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.bottom-panel-content {
    overflow-y: auto;
    padding: 15px;
    flex: 1;
    font-size: 0.85rem;
    line-height: 1.6;
    max-height: 165px; /* ~5 dong compact (moi dong ~30px) + padding */
}

/* ---- FABs & Overlay (ẩn trên Desktop) ---- */
.mobile-fab { display: none; }
.mobile-overlay { display: none; }

/* ============================================================
   TÍNH NĂNG TÍN NGƯỠNG — CSS Bổ sung
   ============================================================ */

/* Sidebar phải chia 2 section theo chiều dọc */
.sidebar-right {
    display: flex;
    flex-direction: column;
}

.sidebar-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* Quan trọng: cho phép flex-child scroll bên trong */
}

/* Divider giữa 2 section */
.sidebar-divider {
    height: 4px;
    background: linear-gradient(to right, #e0e0e0, #bdbdbd, #e0e0e0);
    flex-shrink: 0;
}

/* Danh sách Tín Ngưỡng trong sidebar */
.religious-list {
    flex: 1;
    overflow-y: auto;
}

.religious-type-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background .15s;
}
.religious-type-item:hover { background: #fbe9e7; }
.religious-type-item.active { background: #5d4037; color: #fff; }

.religious-type-item .type-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}
.religious-type-item .type-label { flex: 1; font-weight: 600; }
.religious-type-item .type-count {
    background: #fbe9e7;
    color: #5d4037;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}
.religious-type-item.active .type-count {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* Danh sách cơ sở trong Bottom Panel */
.religious-site-item {
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.religious-site-item:last-child { border-bottom: none; }

.religious-site-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.religious-site-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: #333;
    line-height: 1.4;
}
.religious-site-detail {
    font-size: 0.78rem;
    color: #666;
    margin-top: 2px;
    line-height: 1.4;
}
.religious-site-location {
    display: inline;
}
.religious-site-deity {
    font-style: italic;
    color: #888;
}

/* Marker tín ngưỡng trên bản đồ */
.rel-marker-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rel-marker-icon {
    font-size: 1.4rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    cursor: pointer;
    transition: transform .2s;
}
.rel-marker-icon:hover { transform: scale(1.3); }
.rel-marker-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background: #c62828;
    color: #fff;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 4px;
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Bottom Panel — màu header theo chế độ */
.bottom-panel-header.mode-ethnic    { border-bottom-color: #1565c0; }
.bottom-panel-header.mode-religious { border-bottom-color: #5d4037; }
#bottomTitle.mode-religious { color: #5d4037; }

/* Tag thong bao "khong co co so" */
.no-religious-notice {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 0.85rem;
    font-style: italic;
}

/* --- Item compact 1 dong cho danh sach co so --- */
.religious-site-item-compact {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.85rem;
    line-height: 1.5;
}
.religious-site-item-compact:last-child { border-bottom: none; }

.religious-site-item-compact .religious-site-icon {
    font-size: 1rem;
    flex-shrink: 0;
}
.religious-site-item-compact .religious-site-text {
    flex: 1;
    color: #333;
}
.religious-site-item-compact .religious-site-meta {
    color: #777;
    font-size: 0.8rem;
    font-weight: 400;
}


/* Khu vuc styles */
.khuvuc-item { padding: 12px 15px; border-bottom: 1px solid var(--border); cursor: pointer; transition: all 0.2s; }
.khuvuc-item:hover { background: #e8f5e9; }
.khuvuc-item.active { background: #2e7d32; color: #fff; }

/* Thon type buttons */
.thon-type-item {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

/* DTTS styles (Blue) */
.thon-type-item[data-type="dtts"] {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #bbdefb;
}
.thon-type-item[data-type="dtts"]:hover {
    background: #bbdefb;
    border-color: #90caf9;
}
.thon-type-item[data-type="dtts"].active-thon {
    background: #1565c0 !important;
    color: #fff !important;
    border-color: #0d47a1 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

/* MN styles (Orange) */
.thon-type-item[data-type="mn"] {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffe0b2;
}
.thon-type-item[data-type="mn"]:hover {
    background: #ffe0b2;
    border-color: #ffcc80;
}
.thon-type-item[data-type="mn"].active-thon {
    background: #ef6c00 !important;
    color: #fff !important;
    border-color: #e65100 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

/* ĐBKK styles (Red) */
.thon-type-item[data-type="dbkk"] {
    background: #ffebee;
    color: #d32f2f;
    border: 1px solid #ffcdd2;
}
.thon-type-item[data-type="dbkk"]:hover {
    background: #ffcdd2;
    border-color: #ef9a9a;
}
.thon-type-item[data-type="dbkk"].active-thon {
    background: #d32f2f !important;
    color: #fff !important;
    border-color: #b71c1c !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}