/* ==========================================================================
   1. ROOT VARIABLES & GENERAL STYLES
   ========================================================================== */
:root {
    --color-primary: #005f73;
    --color-secondary: #0a9396;
    --color-accent-exploration: #d95f02;
    --color-accent-planning: #6a0dad;
    --color-danger: #dc3545;
    --color-danger-hover: #c82333;
    --color-success: #28a745;
    --color-info: #17a2b8;
    --color-text-dark: #333;
    --color-text-light: #666;
    --color-background: #f4f7f6;
    --color-white: #ffffff;
    --color-border: #e0e0e0;
    --color-border-input: #ccc;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 5px 15px rgba(0, 0, 0, 0.3);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-text-dark);
}

/* ==========================================================================
   2. LAYOUT: HEADER, CONTAINER, SIDEBAR, MAIN CONTENT
   ========================================================================== */
header {
    background-color: var(--color-primary);
    position: relative;
    color: white;
    text-align: center;
    padding: 1em 0;
    box-shadow: var(--shadow-sm);
    margin-bottom: 0; /* Loại bỏ margin dưới header */
}

.header-actions {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 10px;
}

.menu-toggle-btn {
    display: none; /* Ẩn trên desktop */
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: white;
    font-size: 1.8em;
    cursor: pointer;
}
header h1 {
    margin: 0;
    cursor: pointer; /* Thêm con trỏ để báo hiệu có thể click */
    /* Tự động điều chỉnh kích thước chữ để vừa với không gian có sẵn */
    font-size: clamp(1.1rem, 5vw, 1.5rem);
}

.container {
    display: flex;
    height: calc(100vh - 70px); /* Chiều cao header ~70px */
}

.sidebar {
    width: 25%;
    min-width: 250px;
    background-color: var(--color-white);
    padding: 1em;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
    overflow-y: auto;
}

/* Phần header của sidebar (tiêu đề và thanh tìm kiếm) */
.sidebar-header {
    position: sticky;
    top: 0;
    background-color: var(--color-white); /* Cần màu nền để che nội dung cuộn bên dưới */
    z-index: 10;
    margin-top: 0; /* Loại bỏ margin trên sidebar-header */    
    padding-top: 0;
    padding-bottom: 1em;
}


.sidebar-header h2 {
    margin-top: 0;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0.5em;
    margin-bottom: 0.5em; /* Tạo khoảng cách với thanh tìm kiếm */
}

#search-input {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 1em;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar li {
    padding: 0.8em 0.5em;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.sidebar li:hover {
    background-color: #eaf6f6;
}

.sidebar li.active {
    background-color: var(--color-secondary); /* Đổi màu nền của mục được chọn */
    color: white;
    font-weight: bold;
}

/* Ghi đè màu nền cho mục được chọn dựa trên loại mỏ */
.sidebar li.mo-khai-thac.active {
    background-color: var(--color-primary); /* Xanh đậm cho khai thác */
    color: white;
}
.sidebar li.mo-tham-do.active {
    background-color: var(--color-accent-exploration); /* Cam cho thăm dò */
    color: white;
}
.sidebar li.mo-quy-hoach.active {
    background-color: var(--color-accent-planning); /* Tím cho quy hoạch */
    color: white;
}


.sidebar .xa-header {
    padding: 0.8em 0.5em;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    position: relative;
}

.sidebar .xa-header::after {
    content: '▶';
    position: absolute;
    right: 15px;
    font-size: 0.8em;
    transition: transform 0.2s ease-in-out;
}

.xa-header .mine-count {
    background-color: var(--color-border);
    color: var(--color-text-dark);
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.8em;
    font-weight: bold;
    margin-left: 8px;
}

.sidebar .xa-header.open::after {
    transform: rotate(90deg);
}

.sidebar .mo-list {
    padding-left: 20px; /* Thụt vào để phân cấp */
}

.main-content {
    width: 75%;
    padding: 2em;
    overflow-y: auto;
}

#thong-tin-mo {
    background-color: #ffffff;
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Định dạng cho khu vực thông tin tổng quan */
#main-summary {
    background-color: #ffffff;
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#main-summary h2 {
    margin-top: 0;
    color: #005f73;
}

#main-summary p {
    font-size: 1.1em;
    line-height: 1.6;
}

#main-summary button {
    background-color: #ae2012; /* Consider using a variable */
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px;
    font-size: 0.8em;
}

/* Thêm đường kẻ ngang để phân chia các phần trong summary */
#main-summary hr {
    border: 0;
    border-top: 1px solid var(--color-border);
}

#main-summary .summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5em;
}

.summary-card {
    background-color: var(--color-white);
    border-radius: 10px;
    padding: 1.2em;
    display: flex;
    flex-direction: column;
    gap: 1em; /* Tăng khoảng cách giữa khối tiêu đề và khối nội dung */
    box-shadow: var(--shadow-md);
    border-left: 5px solid transparent; /* Thêm viền trái mặc định */
    transition: transform 0.2s, box-shadow 0.2s;
}

.summary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Thêm màu viền trái cho từng loại thẻ */
.summary-card.mining {
    border-left-color: #005f73;
}
.summary-card.exploration {
    border-left-color: var(--color-accent-exploration);
}
.summary-card.planning {
    border-left-color: var(--color-accent-planning);
}
.summary-card.expiring-soon {
    border-left-color: var(--color-danger); /* Thêm viền trái màu đỏ */
}

.summary-card-icon {
    /* Bỏ nền và viền */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5em; /* Tăng kích thước icon để bù lại việc bỏ nền */
    align-self: flex-start; /* Căn icon về bên trái */
    width: 40px; /* Dành một khoảng không gian cố định cho icon */
    text-align: center;
}

/* Thêm màu cho icon theo loại mỏ */
.summary-card.mining .summary-card-icon { color: var(--color-primary); }
.summary-card.exploration .summary-card-icon { color: var(--color-accent-exploration); }
.summary-card.planning .summary-card-icon { color: var(--color-accent-planning); }

/* Style cho icon SVG mới */
.summary-card-icon .svg-icon {
    background-color: currentColor; /* Lấy màu từ thuộc tính 'color' của thẻ cha */
    width: 40px;
    height: 40px;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Áp dụng từng icon SVG làm mặt nạ */
.pickaxe-icon {
    -webkit-mask-image: url(pickaxe.svg);
    mask-image: url(pickaxe.svg);
}

.exploration-icon {
    -webkit-mask-image: url(search-location.svg); /* <-- THAY ĐỔI TÊN TỆP NẾU CẦN */
    mask-image: url(search-location.svg); /* <-- THAY ĐỔI TÊN TỆP NẾU CẦN */
}

.planning-icon {
    -webkit-mask-image: url(map-marked.svg); /* <-- THAY ĐỔI TÊN TỆP NẾU CẦN */
    mask-image: url(map-marked.svg); /* <-- THAY ĐỔI TÊN TỆP NẾU CẦN */
}

.clock-icon {
    -webkit-mask-image: url(clock-solid-full.svg);
    mask-image: url(clock-solid-full.svg);
}

/* Wrapper mới cho icon và tiêu đề */
.summary-card-top {
    display: flex;
    align-items: center;
    gap: 1em; /* Tăng khoảng cách giữa icon và tiêu đề */
}

.summary-card-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.summary-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Căn giữa tiêu đề và số liệu */
    gap: 0.5em;
}

.summary-card-top .summary-card-title {
    margin: 0;
    font-size: 1.8em; /* Tăng thêm kích thước chữ */
    font-weight: 700; /* Giá trị hợp lệ cho chữ đậm (tương đương 'bold') */
    text-transform: uppercase; /* Viết hoa tất cả chữ */
}

/* Thêm màu cho tiêu đề theo loại mỏ */
.summary-card.mining .summary-card-top .summary-card-title { color: var(--color-primary); }
.summary-card.exploration .summary-card-top .summary-card-title { color: var(--color-accent-exploration); }
.summary-card.planning .summary-card-top .summary-card-title { color: var(--color-accent-planning); }
.summary-card.expiring-soon .summary-card-top .summary-card-title { color: var(--color-danger); } /* Thêm màu đỏ cho tiêu đề */

.summary-card.expiring-soon .summary-card-icon {
    color: var(--color-danger); /* Đồng bộ màu icon với màu chủ đạo của thẻ */
}


.summary-card-info .summary-card-value {
    margin: 0;
    font-size: 2.2em; /* Điều chỉnh lại kích thước */
    font-weight: 700;
    color: var(--color-text-dark);
}

/* Kiểu cho nhãn "Tổng số mỏ" */
.summary-card-value-label {
    /* Bỏ các thuộc tính cũ để có cùng kích thước với số */
    font-weight: 700;
    color: var(--color-text-dark);
    margin-right: 0.3em; /* Tạo khoảng cách với số */
}

.summary-card-details {
    margin: 0.5em 0 0 0; /* Tăng khoảng cách trên của dòng chi tiết */
    font-size: 0.95em; /* Tăng nhẹ kích thước chữ chi tiết */
    color: var(--color-text-light);
}

/* Màu sắc cho các loại mỏ trong sidebar */
.mo-khai-thac {
    color: var(--color-primary); /* Xanh đậm cho khai thác */
    font-weight: 600; /* Đậm hơn */
}

.mo-tham-do {
    color: var(--color-accent-exploration); /* Cam cho thăm dò */
    font-weight: 600; /* Đậm hơn */
}

.mo-quy-hoach {
    color: var(--color-accent-planning); /* Tím cho quy hoạch */
    font-weight: 600; /* Đậm hơn */
}

/* --- Mine Details --- */
#thong-tin-mo h2 {
    margin-top: 0;
    color: #001219;
}

#thong-tin-mo h3 {
    color: var(--color-secondary);
    margin-bottom: 0.5em; /* Thêm khoảng cách dưới tên mỏ */
}

/* --- Buttons --- */
.button-group {
    display: flex;
    gap: 10px; /* Khoảng cách giữa các nút */
    margin-bottom: 1em; /* Thêm khoảng cách dưới nhóm nút */
}

.button-group button,
.button-group a {
    background-color: var(--color-secondary);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s;
    text-decoration: none; /* Bỏ gạch chân cho thẻ a */
    display: inline-block; /* Đảm bảo thẻ a có kích thước đúng */
}

.button-group button:hover,
.button-group a:hover {
    background-color: var(--color-primary);
}

/* Thêm style cho nút xóa */
#delete-mine-btn {
    background-color: var(--color-danger); /* Màu đỏ cảnh báo */
}
#delete-mine-btn:hover {
    background-color: var(--color-danger-hover);
}

.button-group button:disabled,
.button-group a:disabled { /* Giả sử có thể vô hiệu hóa thẻ a */
    background-color: var(--color-border-input);
    cursor: not-allowed;
}

/* --- PDF & Map --- */
.pdf-container {
    text-align: center; /* Căn giữa nút mở PDF trên mobile */
}

#mine-details-info {
    text-align: left; /* Căn lề trái cho thông tin chi tiết */
    margin-bottom: 1em; /* Thêm khoảng cách dưới cùng */
}

/* --- Popups & Modals --- */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Lớp phủ mờ */
    align-items: center; /* Căn giữa theo chiều dọc */
    justify-content: center; /* Căn giữa theo chiều ngang */
    display: none; /* Ẩn mặc định */
    z-index: 1001; /* Đảm bảo popup nằm trên tất cả các phần tử khác */
}
.popup-content {
    background-color: #fdfdfd;
    padding: 25px 30px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    position: relative; /* Cần thiết cho nút đóng tuyệt đối bên trong */
    max-height: 90vh; /* Giới hạn chiều cao tối đa */
    overflow-y: auto; /* Thêm thanh cuộn dọc khi nội dung tràn */
    max-width: 600px; /* Giới hạn chiều rộng tối đa cho popup trên màn hình lớn */
    width: 90%; /* Đảm bảo tính responsive */
}


.popup-content h2 {
    text-align: center;
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: 600;
}

/* Tùy chỉnh riêng cho popup bản đồ */
.map-popup-content {
    max-width: 80vw; /* Chiều rộng tối đa là 80% chiều rộng màn hình */
    width: auto;
    padding: 10px; /* Giảm padding để bản đồ lớn hơn */
}

.map-popup-content #google-map {
    width: 80vw; /* Chiều rộng của iframe */
    height: 80vh; /* Chiều cao của iframe */
}

#expired-mines-list {
    list-style-type: none;
    padding-left: 0;
}

/* Định dạng cho trạng thái giấy phép */
.status-valid {
    color: var(--color-success); /* Màu xanh lá */
    font-weight: bold;
    font-size: 0.9em;
}
.status-expired {
    color: var(--color-danger); /* Màu đỏ */
    font-weight: bold;
    font-size: 0.9em;
}

/* Định dạng cho thời gian còn lại của giấy phép */
.time-remaining, .time-expired-note {
    font-style: italic;
    font-size: 0.9em;
    font-weight: bold;
}
.time-remaining {
    color: var(--color-success); /* Màu xanh lá */
}
.time-expired-note {
    color: var(--color-danger); /* Màu đỏ */
}

.close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-light);
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}
.close-button:hover {
    color: var(--color-text-dark);
    transform: rotate(90deg);
}

/* --- Tables --- */
.table-container {
    margin-top: 15px;
    max-height: 50vh;
    overflow-y: auto;
}

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

#summary-details-table th, #summary-details-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

#summary-details-table thead th {
    background-color: var(--color-secondary);
    color: white;
    position: sticky;
    top: 0;
}

#summary-details-table tbody tr:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}

/* Tối ưu hóa chiều rộng cột trong bảng chi tiết popup */
/* Áp dụng cho cả màn hình lớn và nhỏ để giao diện nhất quán */
#summary-details-table {
    word-wrap: break-word; /* Đảm bảo từ dài không làm vỡ layout */
}

/* --- Phân bổ độ rộng cột trong bảng chi tiết một cách linh hoạt bằng class --- */
.col-checkbox {
    width: 5%;
    text-align: center;
}
.col-stt {
    width: 10%;
    text-align: center;
}
.col-ten-mo {
    width: 55%;
    text-align: left;
}
.col-xa {
    width: 30%;
    text-align: left;
}
 
/* ==========================================================================
   4. MEDIA QUERIES (RESPONSIVE DESIGN)
   ========================================================================== */@media (max-width: 768px) {
    header {
        display: flex;
        align-items: center; /* Căn các mục theo chiều dọc */
        padding: 1em 15px; /* Thêm padding hai bên */
        justify-content: space-between; /* Đẩy các mục ra hai bên */
    }

    .menu-toggle-btn {
        display: block; /* Hiện trên mobile */
    }

    header h1 {
        flex-grow: 1; /* Cho phép tiêu đề chiếm hết không gian còn lại */
        text-align: center; /* Căn giữa nội dung text bên trong */
        margin: 0 -15px 0 0;
    }

    .container {
        flex-direction: column;
        height: auto;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 80%;
        max-width: 300px;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
        border-right: 1px solid var(--color-border-input);
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        width: 100%;
        padding: 1em;
        box-sizing: border-box;
    }

    #main-summary {
        padding: 1em;
        box-sizing: border-box;
    }

    #thong-tin-mo {
        padding: 1em;
    }

    .popup-content {
        width: 90%;
    }

    .sidebar-overlay {
        display: none; /* Mặc định ẩn */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999; /* Nằm dưới sidebar nhưng trên main-content */
    }

    .sidebar-overlay.active {
        display: block; /* Hiện khi sidebar mở */
    }
}

/* --- Forms --- */
.form-group {
    margin-bottom: 1em;
}

.form-group label {
    display: block;
    margin-bottom: 0.4em;
    font-weight: 600;
    color: var(--color-text-dark);
    font-size: 0.95em;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    background-color: var(--color-white); /* Đảm bảo nền trắng đồng nhất */
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    font-size: 1em;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Ghi đè style mặc định của trình duyệt cho select và input date */
.form-group select,
.form-group input[type="date"] {
    appearance: none; /* Xóa giao diện mặc định của trình duyệt */
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Thêm mũi tên tùy chỉnh cho dropdown */
.form-group select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem; /* Thêm không gian cho mũi tên */
}

/* Căn chỉnh chữ và icon cho ô ngày tháng */
.form-group input[type="date"] {
    position: relative;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(10, 147, 150, 0.2);
}

.btn {
    padding: 12px 20px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: background-color 0.2s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn:hover {
    transform: translateY(-2px);
}

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

.btn-secondary {
    background-color: #6c757d;
    color: white;
}
.btn-secondary:hover {
    background-color: #5a6268;
}
.btn-danger {
    background-color: var(--color-danger);
    color: white;
}
.btn-danger:hover {
    background-color: var(--color-danger-hover);
}
.btn-info {
    background-color: var(--color-info);
    color: white;
}
.btn-info:hover {
    background-color: #138496;
}

.btn-full-width {
    width: 100%;
    justify-content: center;
}

/* Nút bấm trong form */
.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap; /* Cho phép các nút xuống dòng trên màn hình nhỏ */
    margin-top: 25px;
}

/* CSS cho các trường nhập thông tin giấy phép */
.license-inputs {
    display: grid;
    grid-template-columns: 140px 1fr 140px; /* Điều chỉnh độ rộng nếu cần */
    gap: 10px;
    align-items: center;
}

/* Responsive cho màn hình nhỏ hơn */
@media (max-width: 600px) {
    .license-inputs {
        grid-template-columns: 1fr; /* Xếp chồng lên nhau trên màn hình nhỏ */
    }
}

/* Styles cho khu vực hiển thị file hiện tại trong form chỉnh sửa */
#current-license-file-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background-color: var(--color-background);
    border: 1px dashed var(--color-border-input);
    border-radius: var(--radius-sm);
}

.current-file-link {
    color: var(--color-primary);
    text-decoration: none;
}
.current-file-link:hover {
    text-decoration: underline;
}

.file-deleted-notice {
    color: var(--color-danger);
    font-style: italic;
}

/* Nút xóa tệp nhỏ gọn */
.delete-file-btn {
    background-color: var(--color-danger);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.2s;
}
.delete-file-btn:hover {
    background-color: var(--color-danger-hover);
}
.delete-file-btn i {
    pointer-events: none; /* Đảm bảo icon không cản trở sự kiện click */
}

/* Styles cho danh sách checkbox chọn xã */
.checkbox-container {
    padding: 5px;
    max-height: 150px; /* Giới hạn chiều cao và cho phép cuộn */
    overflow-y: auto;    background-color: var(--color-white);
}

.commune-list-item {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    margin: 3px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.commune-list-item:hover {
    background-color: #f0f8ff; /* Màu xanh nhạt khi hover */
}

.commune-list-item.selected {
    background-color: var(--color-secondary); /* Màu chính khi được chọn */
    color: white;
    font-weight: 600;
}

/* === CSS cho khung tìm kiếm trong Popup (Đã được làm đẹp) === */

/* Vùng chứa ô tìm kiếm */
.search-container {
    position: relative;
    width: 100%;
    margin-bottom: 1rem; /* Tạo khoảng cách với danh sách bên dưới */
}

/* Bỏ khoảng cách dưới khi search-container nằm trong wrapper chọn xã */
.commune-selection-wrapper .search-container {
    margin-bottom: 0;
}

/* Kiểu dáng cho ô input tìm kiếm */
.commune-search-input, .search-box {
    width: 100%;
    padding: 12px 20px; /* Đã bỏ không gian cho icon */
    font-size: 16px;
    color: var(--color-text-dark);
    background-color: #f8f9fa;
    border: 1px solid var(--color-border);
    border-radius: 50px; /* Bo tròn các góc để tạo cảm giác mềm mại */
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hiệu ứng khi người dùng click vào ô tìm kiếm */
.commune-search-input:focus, .search-box:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 8px rgba(10, 147, 150, 0.25); /* Thêm hiệu ứng đổ bóng nhẹ */
}

/* Wrapper cho khu vực chọn xã */
.commune-selection-wrapper {
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    overflow: hidden; /* Đảm bảo các góc được bo tròn đúng cách */
    transition: border-color 0.2s, box-shadow 0.2s;
}
.commune-selection-wrapper:focus-within {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(10, 147, 150, 0.2);
}


/* === Giao diện nút tải file hiện đại === */
input[type="file"]#edit-mine-license-file {
    display: none; /* Ẩn input file mặc định */
}

.file-upload-btn {
    display: inline-block;
    padding: 10px 15px;
    background-color: #6c757d;
    color: var(--color-white);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.2s;
}
.file-upload-btn:hover {
    background-color: #5a6268;
}
.file-upload-btn i {
    margin-right: 8px;
}

/* Wrapper cho nút tải file và tên file */
.file-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Hiển thị tên file đã chọn */
.file-name-display {
    font-style: italic;
    color: var(--color-text-light);
    background-color: var(--color-background);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Nút xóa lựa chọn file */
.remove-file-btn {
    background: var(--color-border-input);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px; /* Căn chỉnh dấu 'x' */
}
.remove-file-btn:hover {
    background: #999;
}
/* --- Login Screen --- */
.login-screen-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.login-box {
    background: white;
    padding: 40px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    text-align: center;
    width: 100%;
    max-width: 400px;
}

/* Giảm padding trên màn hình nhỏ để có thêm không gian cho tiêu đề */
@media (max-width: 480px) {
    .login-box {
        padding: 25px;
    }
}

.login-box .form-group {
    /* Thêm margin vào đây thay vì vào input để không ảnh hưởng đến password-wrapper */
    margin-bottom: 15px;
}

.login-box h1 {
    margin-top: 0;
    margin-bottom: 10px;
    /* Sử dụng clamp để font-size tự điều chỉnh theo màn hình */
    font-size: clamp(1.1rem, 6vw, 1.5rem); /* min, preferred, max (1.5rem ~ 24px) */
    color: var(--color-text-dark);
}

.login-box p {
    margin-bottom: 25px;
    color: var(--color-text-light);
}

.login-box #login-form input {
    width: 100%;
    padding: 12px;
    /* margin-bottom đã được chuyển ra .form-group */
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-sm);
    box-sizing: border-box; /* Quan trọng */
}

.dropdown-content {
    display: none; /* Ẩn mặc định */
    position: absolute;
    right: 0;
    top: 100%;
    background-color: white;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;    border-radius: var(--radius-md);
    padding: 8px 0;
    border: 1px solid var(--color-border);
}

.dropdown-content a {
    color: var(--color-text-dark);
    padding: 12px 16px;
    text-decoration: none;
    display: flex; /* Chuyển thành flex để icon và text thẳng hàng */
    align-items: center;
    gap: 10px; /* Khoảng cách giữa icon và text */
    font-size: 0.95em;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Class để hiển thị dropdown */
.user-menu.show .dropdown-content {
    display: block;
}

/* CSS cho ghi chú quên mật khẩu */
.forgot-password-note {
    margin-top: -10px; /* Kéo lên gần ô mật khẩu */
    margin-bottom: 20px; /* Tạo khoảng cách với nút Đăng nhập */
    font-size: 12px; /* Cho chữ nhỏ hơn một chút */
    color: var(--color-text-light);
    text-align: center; /* Căn giữa */
    line-height: 1.5;
}

/* --- Loader Spinner --- */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: none; /* Sẽ được điều khiển bởi JS */
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(2px);
}

.loader-spinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid var(--color-secondary); /* Main color */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

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

/* --- Toast Notifications --- */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background-color: #fff;
    color: #333;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 250px;
    max-width: 350px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    border-left: 5px solid;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast.hide {
    opacity: 0;
    transform: translateX(100%);
}

.toast p {
    margin: 0;
    padding: 0;
}

.toast-success {
    border-left-color: var(--color-success); /* Green */
}

.toast-error {
    border-left-color: var(--color-danger); /* Red */
}

.toast-info {
    border-left-color: var(--color-info); /* Blue */
}

.toast i {
    font-size: 1.2em;
}

/* Container chính của FAB, định vị cố định so với màn hình */
.fab-container {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1000;
    display: flex;
    flex-direction: column-reverse;
    align-items: center; /* Căn giữa các mục con theo chiều ngang */
}

/* Nút chính (có icon bánh răng) */
.fab-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: white;
    border: none;
    box-shadow: var(--shadow-md);
    font-size: 1.4em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    position: relative; /* Đặt làm gốc cho các nút con */
    z-index: 2; /* Nằm trên các nút con */
}

.fab-main:hover {
    background-color: var(--color-secondary);
    transform: scale(1.1);
}

/* Hiệu ứng xoay icon khi mở */
.fab-main i {
    transition: transform 0.3s ease;
}

.fab-container.open .fab-main i {
    transform: rotate(45deg);
}

/* Menu chứa các nút con, ẩn mặc định */
.fab-menu {
    /* Bỏ các thuộc tính cũ, giờ các nút con sẽ được định vị tuyệt đối */
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Cho phép click xuyên qua menu để nhấn nút chính */
}

/* Nút chức năng con (Thêm, Quản lý,...) */
.fab-item {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute; /* Định vị tuyệt đối so với fab-container */
    bottom: 6px; /* Căn giữa với nút chính (56-44)/2 */
    right: 6px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
    pointer-events: none; /* Ẩn cho đến khi menu mở */
    opacity: 0; /* Ẩn ban đầu */
}

/* Khi menu mở, các nút con sẽ hiện ra và di chuyển đến vị trí cuối cùng */
.fab-container.open .fab-item {
    pointer-events: auto; /* Cho phép click vào nút con */
    opacity: 1;
    /* 
       Sử dụng biến CSS được set từ JS để định vị.
       Ví dụ: --fab-item-1-pos: -60px;
       transform: translateY(var(--fab-item-1-pos));
    */
    transform: translateY(var(--fab-pos));
}

/* Gán màu nền cho từng nút con */
#fab-add-mine { background-color: #2a9d8f; }
#fab-manage-users { background-color: #e9c46a; }
#fab-help { background-color: #2196F3; } /* Màu cho nút Hướng dẫn */
#fab-change-password { background-color: #f4a261; }
#fab-logout { background-color: #e76f51; }

/* --- Styles cho Popup Hướng dẫn --- */
.help-content {
    min-height: 200px;
    max-height: 60vh;
    overflow-y: auto;
    line-height: 1.6;
    border: 1px solid var(--color-border);
    padding: 15px;
    border-radius: var(--radius-md);
    background-color: #f9f9f9;
}

.hidden {
    display: none !important;
}

.popup-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5em;
    gap: 10px;
}

/* Tùy chỉnh riêng cho nút đóng của popup bản đồ để dễ nhìn hơn */
#map-popup .close-button {
    /*background-color: rgba(247, 244, 244, 0.5);  Nền đen mờ */
    color: rgb(255, 255, 255); /* Chữ màu trắng */
    border-radius: 50%; /* Bo tròn thành hình tròn */
    width: 30px; /* Kích thước chiều rộng */
    height: 30px; /* Kích thước chiều cao */
    font-size: 25px; /* Cỡ chữ của dấu 'x' */
    display: flex;
    align-items: center;
    justify-content: center;
    top: 5px;
    right: 5px;
    transition: background-color 0.2s, transform 0.2s;
}

#map-popup .close-button:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Đậm hơn khi di chuột vào */
    transform: scale(1.1); 
}
/* --- Password Input with Toggle Icon --- */
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%; /* Đảm bảo wrapper chiếm toàn bộ chiều rộng */
}

.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    padding-right: 40px; /* Thêm khoảng trống bên phải cho icon */
}

.toggle-password {
    position: absolute;
    right: 15px;
    top: 50%; /* Thêm thuộc tính này để xác định vị trí bắt đầu là ở giữa */
    transform: translateY(-50%); /* Dịch chuyển icon lên trên 50% chiều cao của chính nó */
    cursor: pointer;
    color: var(--color-text-light);
    opacity: 0.6; /* Làm mờ icon */
    transition: opacity 0.2s;
}
.toggle-password:hover {
    opacity: 1; /* Rõ hơn khi di chuột vào */
}

/* === Custom Scrollbar (Fix lỗi bo góc) === */
/* Áp dụng cho các phần tử có thể cuộn như popup và sidebar */
.popup-content::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.checkbox-container::-webkit-scrollbar {
  width: 8px; /* Độ rộng của thanh cuộn */
}

.popup-content::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.checkbox-container::-webkit-scrollbar-track {
  background: transparent; /* Ẩn phần nền của thanh cuộn */
}

.popup-content::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.checkbox-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3); /* Màu của con trượt */
  border-radius: 10px; /* Bo tròn con trượt */
}

/* --- Dòng chữ tác giả --- */
.author-credit {
    position: fixed;
    bottom: 10px;
    left: 15px;
    font-size: 13px; /* Tăng kích thước một chút cho dễ đọc */
    color: rgba(0, 0, 0, 0.5); /* Tăng độ đậm lên một chút */
    z-index: 998; /* Đảm bảo nó nằm dưới các lớp phủ và popup */
    text-decoration: none; /* Bỏ gạch chân của liên kết */
    transition: color 0.2s ease-in-out; /* Thêm hiệu ứng chuyển màu mượt mà */
}

.author-credit:hover {
    color: var(--color-primary); /* Đổi màu khi di chuột vào để báo hiệu có thể click */
    text-decoration: underline; /* Thêm lại gạch chân khi hover */
}