/**
 * layout.css — PHASE 9.3 — LAYOUT HỆ THỐNG
 * ============================================================================
 * Nạp SAU tokens.css + components.css. File này mở rộng ĐÚNG các class
 * Layout THẬT đã có sẵn trong Css_Main.html (.bbv-sidebar/.bbv-topbar/
 * .bbv-main/.bbv-content/.bbv-footer/.nav-link/.nav-section-title) — đã
 * xác nhận qua đọc source thật, KHÔNG đổi cấu trúc HTML nào, KHÔNG xoá
 * class/behavior nào đang hoạt động (đặc biệt: GIỮ NGUYÊN 100% cơ chế
 * responsive @media (max-width:900px) đã có sẵn — hệ thống ĐÃ có Sidebar
 * thu gọn trên di động qua class .open, không phải xây lại từ đầu).
 *
 * PHẦN MỚI THẬT SỰ (trước đây CHƯA có): Breadcrumb, breakpoint Tablet
 * riêng cho vùng RỘNG HƠN 900px (trước đây chỉ có 2 trạng thái: >900px
 * Desktop đầy đủ, <=900px ẩn hoàn toàn — bổ sung 1 vùng TRUNG GIAN
 * 901-1200px thu gọn Sidebar còn icon, KHÔNG đụng/chồng lấn ngưỡng
 * <=900px gốc để tránh phá vỡ cơ chế .open đã hoạt động).
 * ============================================================================
 */

/* ============================================================================
   1. SIDEBAR — áp Design Token cho khoảng cách, GIỮ NGUYÊN cấu trúc
   ============================================================================ */
.bbv-sidebar .nav-link {
  gap: var(--bbv-space-3);
  padding: var(--bbv-space-3) var(--bbv-space-5);
  transition: background-color var(--bbv-transition-fast), border-color var(--bbv-transition-fast);
}
.bbv-sidebar .nav-section-title {
  padding: var(--bbv-space-4) var(--bbv-space-5) var(--bbv-space-2);
}

/* ============================================================================
   2. TOPBAR / CONTENT / FOOTER — áp Design Token cho khoảng cách
   ============================================================================ */
.bbv-topbar {
  padding: var(--bbv-space-4) var(--bbv-space-6);
}
.bbv-content {
  padding: var(--bbv-space-6);
}
.bbv-footer {
  padding: var(--bbv-space-5) var(--bbv-space-6);
}

/* ============================================================================
   3. BREADCRUMB — THÀNH PHẦN MỚI (trước đây hệ thống CHƯA có).
   Đặt NGAY TRÊN .bbv-content (trong .bbv-main), do
   Js_NavigationIntegration.html (Phase 6.2, mở rộng ở 9.3) tự động điền
   nội dung mỗi khi điều hướng — Module KHÔNG cần tự viết gì thêm.
   ============================================================================ */
.bbv-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--bbv-space-2);
  padding: var(--bbv-space-3) var(--bbv-space-6) 0;
  font-size: var(--bbv-fs-sm);
  color: var(--bbv-color-text-secondary);
  flex-wrap: wrap;
}
.bbv-breadcrumb .bbv-breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--bbv-space-2);
}
.bbv-breadcrumb .bbv-breadcrumb-item:not(:last-child)::after {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--bbv-border-color-strong);
  margin-left: var(--bbv-space-2);
}
.bbv-breadcrumb .bbv-breadcrumb-item.current {
  color: var(--bbv-color-text-primary);
  font-weight: var(--bbv-fw-medium);
}
.bbv-breadcrumb .bbv-breadcrumb-home {
  cursor: pointer;
  color: var(--bbv-primary-600);
  display: flex;
  align-items: center;
}
.bbv-breadcrumb .bbv-breadcrumb-home:hover { text-decoration: underline; }

/* ============================================================================
   4. RESPONSIVE — bổ sung vùng TABLET RỘNG (901-1200px) còn thiếu.
   KHÔNG đụng/chồng lấn @media (max-width:900px) gốc (Sidebar ẩn hoàn
   toàn, mở bằng class .open) — vùng dưới đây CHỈ áp dụng TỪ 901px trở
   lên, tránh xung đột 2 quy tắc cùng lúc trong khoảng 769-900px.
   ============================================================================ */
@media (min-width: 901px) and (max-width: 1200px) {
  .bbv-sidebar { width: 72px; }
  .bbv-sidebar .brand span:not(.material-symbols-outlined) { display: none; }
  .bbv-sidebar .nav-section-title { display: none; }
  .bbv-sidebar .nav-link span:not(.material-symbols-outlined) { display: none; }
  .bbv-sidebar .nav-link { justify-content: center; padding: var(--bbv-space-3); }
  .bbv-main { margin-left: 72px; }
  .bbv-breadcrumb { padding-left: var(--bbv-space-4); padding-right: var(--bbv-space-4); }
  .bbv-content { padding: var(--bbv-space-4); }
  /* [PHASE 5B-5 — Responsive Audit] Chevron Submenu (thêm ở Phase 5B-1)
     CŨNG là .material-symbols-outlined nên rule ":not(.material-symbols-
     outlined)" ở trên KHÔNG tự ẩn được nó — phải ẩn riêng, tránh 2 icon
     chen nhau trong cột 72px hẹp. */
  .bbv-sidebar .bbv-nav-chevron { display: none; }
}

/* Mobile/Tablet dọc (<=900px) — GIỮ NGUYÊN cơ chế ẩn/hiện .open đã có sẵn
   (KHÔNG đổi ngưỡng 900px gốc, KHÔNG đụng logic JS toggle .open đã hoạt
   động) — CHỈ tinh chỉnh khoảng cách nội dung cho màn hình hẹp hơn. */
@media (max-width: 900px) {
  .bbv-content { padding: var(--bbv-space-4); }
  .bbv-topbar { padding: var(--bbv-space-3) var(--bbv-space-4); }
  .bbv-breadcrumb { padding: var(--bbv-space-2) var(--bbv-space-4) 0; font-size: var(--bbv-fs-xs); }
}

/* ============================================================================
   5. MOBILE UNIFICATION — TẦNG 1 (FOUNDATION) — theo yêu cầu chuẩn hoá
   Responsive đồng bộ toàn hệ thống. Ngưỡng 767px = ĐÚNG breakpoint "md"
   gốc của Bootstrap (nơi .col-md-* đã TỰ ĐỘNG xuống 100% từ trước) — dùng
   chung 1 ngưỡng, không phát minh ngưỡng riêng, để mọi quy tắc Mobile mới
   khớp đồng bộ với hành vi Grid có sẵn.

   Đây là các quy tắc CHUNG áp dụng 1 LẦN cho TOÀN HỆ THỐNG (không sửa
   từng Module/HTML) — đúng tinh thần "chỉ sửa Component dùng chung 1 lần
   để cả hệ thống tự đổi theo".
   ============================================================================ */
@media (max-width: 767px) {
  /* ---- 5.1 Modal full-screen trên Mobile — mọi Modal trong hệ thống,
     không cần thêm class riêng từng Modal. ---- */
  .modal-dialog {
    margin: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    height: 100dvh;
  }
  .modal-content {
    height: 100%;
    height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .modal-body { overflow-y: auto; }

  /* ---- 5.2 Touch target tối thiểu 44px (khuyến nghị Apple/Google) cho
     Input/Select/Button — áp dụng toàn cục. ---- */
  .btn, .form-control, .form-select { min-height: 44px; }
  .btn-sm, .form-control-sm, .form-select-sm { min-height: 40px; }

  /* ---- 5.3 KHÔNG ép nhiều cột trên 1 hàng — 99 vị trí trong hệ thống
     đang dùng col-3/col-4/col-6 KHÔNG có breakpoint (áp dụng mọi kích
     thước kể cả Mobile) — ép về 1 cột dọc, giống hệt cách col-md-* đã
     tự làm từ trước (đồng bộ 1 hành vi duy nhất). KHÔNG đụng col-12 (đã
     sẵn 100%, không phải lỗi). */
  .col-3, .col-4, .col-6 { flex: 0 0 100%; max-width: 100%; width: 100%; }

  /* ---- 5.4 Toolbar/Module Header — tăng khoảng cách dọc khi các nút đã
     xuống dòng (flex-wrap đã có từ Phase 5B-2). ---- */
  .bbv-section > .d-flex.justify-content-between.align-items-center:first-child {
    row-gap: var(--bbv-space-3);
  }
  .bbv-section > .d-flex.justify-content-between.align-items-center:first-child > div {
    width: 100%;
  }

  /* ---- 5.5 [PHASE R3, VÁ LẠI Ở R6] Ô tìm kiếm/lọc trên Toolbar bị ép
     width cố định bằng px — khiến ô quá hẹp hoặc tràn ngang trên Mobile.
     [PHÁT HIỆN Ở AUDIT R6] Selector cũ dùng ">" (con trực tiếp) SAI vì
     Toolbar thật có thêm 1-2 lớp .d-flex lồng nhau (do nằm trong Tab) —
     đổi sang descendant selector (không ràng buộc cấp lồng) để khớp đúng
     mọi cấu trúc thật. Loại trừ input/select TRONG bảng dòng sản phẩm
     (.bbv-lineitem-table đã tự xử lý riêng ở R1/R4, không ghi đè lại). */
  .bbv-section input.form-control-sm[style*="width"],
  .bbv-section select.form-select-sm[style*="width"] {
    width: 100% !important;
  }
  .bbv-lineitem-table input.form-control-sm[style*="width"],
  .bbv-lineitem-table select.form-select-sm[style*="width"] {
    width: auto !important;
  }

  /* ---- 5.6 [PHASE R3] Dropdown Topbar (Thông báo, Tài khoản) đang có
     width cố định (340px/320px) — có thể tràn mép màn hình hẹp. Giới hạn
     theo chiều rộng màn hình thật. ---- */
  .dropdown-menu { max-width: calc(100vw - 24px); }
}