/* ==========================================================================
   HỆ THỐNG KTGSMBĐ - PC SƠN LA (EVNNPC)
   MODULE BẢO VỆ CHỐNG TRÀN GIAO DIỆN TOÀN DIỆN (LAYOUT GUARD SYSTEM)
   File: layout-guard.css
   Mục đích:
   - Khóa chặn 100% hiện tượng tràn màn hình sang ngang (Zero Horizontal Scroll).
   - Bảo vệ độ rộng chuẩn của bảng dữ liệu, bảng đánh giá đơn vị và tiêu chí BM01-BM07.
   - Bảo toàn phân quyền hiển thị và tính toàn vẹn giao diện trên mọi độ phân giải.
   - Nạp sau cùng trong index.html với mức ưu tiên tuyệt đối (!important).
   ========================================================================== */

/* 1. KHÓA CHỐNG TRÀN NGANG CẤP HỆ THỐNG (SYSTEM ROOT LOCK) */
*, *::before, *::after {
  box-sizing: border-box !important;
}

html, body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* 2. KHÓA KHUNG CHÍNH VÀ CÁC CONTAINER NỘI DUNG */
.app-container,
.main-layout,
.main-body,
.portal-view,
.tab-pane,
.tab-content,
.content-viewport,
.admin-content,
#bmContentContainer,
.work-content,
.dashboard-grid,
.container-fluid {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* 3. VÙNG CUỘN NỘI BỘ CHO BẢNG DỮ LIỆU (.table-responsive) */
.table-responsive {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  position: relative !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  margin-bottom: 12px !important;
}

/* 4. CHUẨN HÓA BẢNG DỮ LIỆU & BẺ CHỮ TỰ ĐỘNG (TABLE INTEGRITY & WORD BREAKING) */
.data-table,
.criteria-table,
.unit-ranking-table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  box-sizing: border-box !important;
  border-collapse: collapse !important;
}

.data-table th,
.data-table td,
.criteria-table th,
.criteria-table td,
.unit-ranking-table th,
.unit-ranking-table td {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  vertical-align: middle !important;
}

/* 5. CỐ ĐỊNH CỘT STT VÀ GIẢI PHÓNG ĐỘ RỘNG TỰ NHIÊN CHO CỘT ĐẦU CỦA .data-table */
.criteria-table th:first-child,
.criteria-table td:first-child {
  width: 44px !important;
  max-width: 52px !important;
  min-width: 40px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.data-table th:first-child,
.data-table td:first-child {
  position: static !important;
  box-shadow: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: auto !important;
  text-align: left !important;
  white-space: normal !important;
}

/* 6. BẢNG TIẾN ĐỘ & ĐÁNH GIÁ 7 ĐIỆN LỰC TRỰC THUỘC (.unit-ranking-table) */
.unit-ranking-table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

.unit-ranking-table th,
.unit-ranking-table td {
  padding: 10px 14px !important;
}

/* Cột 1: Tên Đơn vị & Chuyên viên phụ trách */
.unit-ranking-table th:first-child,
.unit-ranking-table td:first-child {
  position: static !important;
  box-shadow: none !important;
  min-width: 170px !important;
  width: 28% !important;
  max-width: none !important;
  text-align: left !important;
  white-space: normal !important;
}

/* Cột 2: PL07 Lũy kế */
.unit-ranking-table th:nth-child(2),
.unit-ranking-table td:nth-child(2) {
  min-width: 130px !important;
  width: 24% !important;
  text-align: left !important;
}

/* Cột 3: PL08 Lũy kế */
.unit-ranking-table th:nth-child(3),
.unit-ranking-table td:nth-child(3) {
  min-width: 130px !important;
  width: 24% !important;
  text-align: left !important;
}

/* Cột 4: Nhận định đánh giá */
.unit-ranking-table th:nth-child(4),
.unit-ranking-table td:nth-child(4) {
  min-width: 110px !important;
  width: 16% !important;
  text-align: left !important;
}

/* Cột 5: Nút thao tác chi tiết */
.unit-ranking-table th:nth-child(5),
.unit-ranking-table td:nth-child(5) {
  width: 48px !important;
  text-align: center !important;
}

/* 7. PHÂN QUYỀN HIỂN THỊ (ROLE-BASED DISPLAY INTEGRITY) */
.hidden-by-role,
.admin-or-delegated.hidden-by-role,
.bm-nav-group-section.hidden-by-role,
.bm-nav-group-divider.hidden-by-role {
  display: none !important;
}

/* 8. ĐIỀU HƯỚNG VÀ TAB BIỂU MẪU (BM TABS & PILLS) */
.bm-tabs-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 0 6px 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  scrollbar-width: thin !important;
}

.bm-tab-btn {
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.bm-nav-group-section {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 8px !important;
  flex-shrink: 0 !important;
}

/* 9. THÍCH ỨNG THEO ĐỘ PHÂN GIẢI (RESPONSIVE BREAKPOINTS) */

/* Laptop và màn hình trung bình (<= 1440px) */
@media (max-width: 1440px) {
  :root {
    --sidebar-width: 215px !important;
  }
  .desktop-sidebar {
    width: 215px !important;
    padding: 14px 8px !important;
  }
  .nav-item {
    padding: 8px 10px !important;
    gap: 8px !important;
    font-size: 0.82rem !important;
  }
  .nav-item i {
    font-size: 0.95rem !important;
    width: 18px !important;
  }
}

/* Màn hình Desktop phổ thông (>= 901px) */
@media (min-width: 901px) {
  .content-viewport,
  .admin-content {
    flex: 1 1 auto !important;
    padding: 18px 24px !important;
    margin: 0 !important;
  }
  
  .modal-dialog {
    max-width: min(92vw, 860px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .modal-dialog.modal-sm {
    max-width: 460px !important;
  }
}

/* Màn hình điện thoại & Máy tính bảng nhỏ (<= 900px) */
@media (max-width: 900px) {
  .app-header .portal-mode-tabs,
  .app-header #themeToggleBtn,
  .app-header .action-circle-btn,
  .app-header .btn-change-pwd,
  .app-header #btnLogout,
  .app-header .btn-logout,
  .app-header .btn-download-zip,
  .app-header .btn-sync-hub,
  .app-header .user-meta-header {
    display: none !important;
  }

  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
  }

  .modal-overlay {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .modal-dialog {
    align-self: flex-end !important;
    margin: auto 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    border-radius: 20px 20px 0 0 !important;
  }
}