/* =============================================================
   responsive.css — Tầng responsive dùng chung cho header và các màn.
   Nạp SAU tất cả CSS khác (kể cả sidebar.css) để override được.

   THANG BREAKPOINT CHUẨN (max-width, desktop-first theo codebase hiện tại):
     1280px  lg  — laptop nhỏ
     1024px  md  — tablet / mốc sidebar chuyển sang drawer (xem sidebar.css)
      768px  sm  — điện thoại nằm ngang
      480px  xs  — điện thoại dựng đứng

   QUY ƯỚC:
   - Không thêm mốc breakpoint nào ngoài 4 mốc trên.
   - Ưu tiên gán lại CSS variable thay vì viết lại rule layout.
   ============================================================= */

:root {
  --content-padding: 30px;
}

/* -------------------------------------------------------------
   1. SỬA LỖI NỀN TẢNG: cho phép vùng nội dung co lại

   .content-container là grid item của .main-area. Grid item mặc định có
   min-width:auto nên không co xuống dưới min-content của nội dung bên
   trong — ở khung 400px nó phình thành 1041px và mọi thứ bị cắt mất bên
   phải. .main-area đã có min-width:0 sẵn, .content-container thì chưa.

   Đây là gốc rễ của gần như toàn bộ hiện tượng tràn ngang trên mobile.
   ------------------------------------------------------------- */
.content-container {
  min-width: 0;
}

.view-section {
  min-width: 0;
}

/* Cột duy nhất của .main-area mặc định là auto, nên nó nở theo phần tử rộng
   nhất bên trong (thường là header) và kéo cả vùng nội dung rộng theo.
   minmax(0, 1fr) chặn trần đúng bằng bề ngang khung. */
.main-area {
  grid-template-columns: minmax(0, 1fr);
}

/* -------------------------------------------------------------
   2. Tiện ích dùng lại: bọc bảng rộng vào vùng cuộn ngang
   Thêm class này vào phần tử bọc <table> thay vì ép bảng xuống dòng.
   ------------------------------------------------------------- */
.rwd-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* -------------------------------------------------------------
   3. <= 1280px
   ------------------------------------------------------------- */
@media (max-width: 1280px) {
  :root {
    --sidebar-width: 230px;
    --content-padding: 24px;
  }

  .header { padding: 0 24px; }
  .header-widgets { gap: 18px; }
  .content-container { padding: var(--content-padding); }
}

/* -------------------------------------------------------------
   4. <= 1024px — cùng mốc sidebar chuyển sang drawer
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --header-height: 72px;
    --content-padding: 20px;
  }

  .header { padding: 0 20px; }
  .header-widgets { gap: 14px; }
  .header-title { font-size: 1.2rem; }
  .content-container { padding: var(--content-padding); }
}

/* -------------------------------------------------------------
   5. <= 768px — header rút gọn
   ------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --header-height: 64px;
    --content-padding: 16px;
  }

  .header {
    gap: 12px;
    padding: 0 16px;
  }

  .header-title-area { gap: 2px; }

  .header-title {
    font-size: 1rem;
    letter-spacing: 0.3px;
  }

  .header-subtitle { font-size: 0.72rem; }

  .header-widgets { gap: 10px; }

  /* Số tuần nhường chỗ trước; giờ vẫn giữ vì xưởng cần theo dõi */
  .week-widget { display: none; }

  .time-widget {
    padding: 6px 10px;
    gap: 0;
    min-width: 0;
  }

  .time-widget .date-value { display: none; }
  .time-widget .time-value { font-size: 0.85rem; }

  .content-container { padding: var(--content-padding); }
}

/* -------------------------------------------------------------
   6. <= 480px — chỉ còn chuông, ngôn ngữ, avatar
   ------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --header-height: 60px;
    --content-padding: 12px;
  }

  .header { padding: 0 12px; }
  .header-widgets { gap: 8px; }
  .header-title { font-size: 0.95rem; }
  .header-subtitle { display: none; }

  .time-widget { display: none; }
  .user-info .user-name { display: none; }

  .sidebar-toggle {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .content-container { padding: var(--content-padding); }
}

/* -------------------------------------------------------------
   7. Chiều cao động (dvh) — tránh nhảy layout khi thanh địa chỉ
   trình duyệt mobile ẩn/hiện.
   ------------------------------------------------------------- */
@supports (height: 100dvh) {
  @media (max-width: 1024px) {
    body,
    .app-container,
    .sidebar,
    .main-area {
      height: 100dvh;
    }

    .content-container {
      height: calc(100dvh - var(--header-height));
    }
  }
}

/* =============================================================
   8. TỪNG MÀN

   Lưu ý về !important: một số khối trong Index.cshtml khai báo layout
   bằng inline style. Inline style thắng mọi selector trong stylesheet,
   nên chỉ !important mới đè được. Những chỗ dùng !important dưới đây
   đều vì lý do đó, không phải để phá cascade.
   ============================================================= */

/* ---------- Danh sách thiết bị (/machines) ---------- */
@media (max-width: 768px) {
  .control-bar {
    flex-wrap: wrap;
    gap: 12px;
  }

  .control-bar > * { min-width: 0; }
  .search-box-wrapper { flex: 1 1 100%; }
}

/* ---------- Lệnh sản xuất (/orders) ---------- */
@media (max-width: 768px) {
  /* flatpickr gán width cố định lên input khi khởi tạo */
  #order-input-date {
    width: 100%;
    min-width: 0;
  }

  .po-setup-body,
  #view-production-orders .hp-card__head,
  #view-production-orders .hp-card__foot,
  #view-production-orders .hp-table-foot {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Hai nút lưu và xuất PDF chia đều bề ngang, đủ cao để bấm khi đeo găng. */
  #view-production-orders .hp-card__foot .hp-btn {
    flex: 1 1 0;
    height: 44px;
  }

  .po-setup-fields .hp-grid--2 { grid-template-columns: minmax(0, 1fr); }

  .po-list-filters,
  .po-list-search { width: 100%; }

  #view-production-orders .hp-seg { width: 100%; }
  #view-production-orders .hp-seg button { flex: 1 1 auto; }

  /* Bảng đổi thành thẻ ở dưới; vùng chứa không cần viền trên của bảng nữa. */
  #view-production-orders .hp-table-box {
    border-top: 0;
    padding: 0 16px;
  }
}

/* Bảng danh sách lệnh: 10 cột, cùng kiểu width:100% nên nó tự co thay vì tràn, chữ
   dồn thành nhiều dòng và đọc không nổi. Giống cách xử lý bảng màn Lịch sử - min-width
   giữ bề ngang rồi đẩy phần thừa sang vùng cuộn ngang của .orders-table-wrapper
   (vốn đã có overflow-x: auto sẵn).
   1100px = 10 cột, trong đó có cột Sản phẩm hai dòng và cột Thao tác 6 nút. */
/* Từ 769px đến 1024px bảng vẫn là bảng, chỉ cuộn ngang. Dưới 768px nó đổi hẳn sang thẻ
   ở khối bên dưới, nên min-width phải được gỡ ở đó. */
@media (min-width: 769px) and (max-width: 1024px) {
  #view-production-orders .history-table {
    min-width: 1100px;
  }
}

/* =============================================================
   DANH SÁCH LỆNH DẠNG THẺ (<= 768px)

   Mười cột ép thành min-width 1100px nghĩa là trên máy 390px người vận hành phải cuộn
   ngang gần 700px mới tới được nút Chạy/Hủy - đúng thứ duy nhất họ mở app để bấm.
   Dưới khổ này bảng bỏ hẳn vai trò bảng: mỗi lệnh thành một thẻ, mọi thứ xếp dọc,
   nút thao tác nằm đáy thẻ và luôn trong tầm tay.

   Vẫn là MỘT DOM duy nhất - không render hai lần, không nghe sự kiện resize. Các ô <td>
   được gắn class trong productionOrders.js rồi xếp lại bằng grid-template-areas; nhãn cột
   lấy từ data-label vì <thead> bị ẩn.
   ============================================================= */
@media (max-width: 768px) {
  #view-production-orders .orders-table-wrapper {
    overflow-x: visible;
    min-height: 0;
  }

  #view-production-orders .history-table {
    min-width: 0;
    display: block;
  }

  #view-production-orders .history-table thead {
    display: none;
  }

  #view-production-orders .history-table tbody {
    display: block;
  }

  /* Mỗi hàng là một thẻ. */
  #view-production-orders .history-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "machine  status"
      "order    order"
      "product  product"
      "stage    cavity"
      "plan     actual"
      "progress progress"
      "actions  actions";
    gap: 8px 12px;
    align-items: center;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.02);
  }

  #view-production-orders .history-table tbody td {
    display: block;
    padding: 0 !important;
    border: none !important;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Nhãn thay cho tiêu đề cột đã ẩn. Chỉ ô nào khai data-label mới có. */
  #view-production-orders .history-table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 2px;
  }

  #view-production-orders .po-c-machine {
    grid-area: machine;
    font-size: 1.05rem;
  }

  #view-production-orders .po-c-status {
    grid-area: status;
    text-align: right !important;
  }

  #view-production-orders .po-c-order {
    grid-area: order;
    font-size: 0.95rem;
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  #view-production-orders .po-c-product { grid-area: product; }
  #view-production-orders .po-c-stage   { grid-area: stage; }

  #view-production-orders .po-c-cavity {
    grid-area: cavity;
    text-align: right !important;
  }

  #view-production-orders .po-c-plan { grid-area: plan; text-align: left !important; }

  #view-production-orders .po-c-actual {
    grid-area: actual;
    text-align: right !important;
  }

  /* Thanh tiến độ: bỏ bề ngang cố định 100px, trải hết thẻ, phần trăm nằm bên phải. */
  #view-production-orders .po-c-progress {
    grid-area: progress;
  }

  #view-production-orders .po-c-progress > div {
    align-items: stretch !important;
  }

  #view-production-orders .po-c-progress span {
    align-self: flex-end;
  }

  #view-production-orders .po-c-progress > div > div {
    width: 100% !important;
    height: 8px !important;
  }

  /* Nút thao tác: xuống dòng được, cao đủ để bấm khi đeo găng. */
  #view-production-orders .po-c-actions {
    grid-area: actions;
    padding-top: 4px !important;
  }

  /* Lưới thay cho flex. Với flex:1 1 auto mỗi nút nở theo độ dài chữ của chính nó, nên
     "Chạy" và "Chi tiết" ra hai cỡ khác nhau và hàng nút trông so le. Lưới thì mọi cột
     rộng bằng nhau, kể cả ở hàng cuối còn thừa chỗ, nên nút nào cũng một cỡ.
     minmax(92px, 1fr) tự chọn số cột theo bề ngang thẻ: khổ điện thoại ra 3 cột. */
  #view-production-orders .po-c-actions > div {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px !important;
  }

  #view-production-orders .orders-action-btn {
    width: 100%;
    min-height: 42px;
    font-size: 0.82rem !important;
    padding: 8px 6px !important;
    white-space: nowrap;
  }

  /* Dòng "không tìm thấy lệnh" là một ô colspan, không phải thẻ. Nhắm bằng class gắn sẵn
     trong productionOrders.js chứ không dùng :has() - selector đó im lặng bị bỏ qua trên
     trình duyệt cũ, và khi đó dòng trống sẽ hiện ra như một thẻ rỗng có viền. */
  #view-production-orders .history-table tbody tr.po-empty-row {
    display: block;
    border: none !important;
    background: none;
    padding: 0;
    margin-bottom: 0;
  }
}

/* =============================================================
   LỚP NỔI: dropdown, modal, lịch
   Gom chung vì cùng một lỗi: phần tử bay ra khỏi dòng chảy bố cục với bề ngang
   cố định, nên nó không biết khung còn lại bao nhiêu và thò ra ngoài màn hình.
   ============================================================= */

/* Panel lọc của màn Lịch sử. Từ 768px trở xuống history.css đã cho .history-toolbar
   xếp dọc, nên hàng chứa nút "Lọc" rộng bằng cả khung - nhưng panel vẫn neo phải với
   min-width 240px, thành ra nó lệch hẳn sang một bên và đè lên bảng bên dưới.
   Cho nó trải đúng bề ngang của hàng thì vừa hết tràn vừa đỡ rối. */
@media (max-width: 768px) {
  .filter-dropdown,
  .date-picker-dropdown {
    left: 0;
    right: 0;
    min-width: 0;
  }
}

/* Modal dùng chung cho Sửa lệnh, Chi tiết lệnh và Xác nhận xoá ở màn Lệnh sản xuất.
   alerts.css đặt width:480px CỐ ĐỊNH, không kèm max-width, nên trên điện thoại nó
   rộng hơn cả màn hình. Các thẻ gọi nó còn tự đặt thêm max-width inline (480/500/720px),
   nên phải !important mới đè được. */
@media (max-width: 768px) {
  .alarm-modal-card {
    /* width:100% chứ không phải auto: hai modal dựng trong productionOrders.js đã đặt
       inline width:100% + max-width, giữ nguyên 100% thì chúng không đổi, chỉ mấy thẻ
       khai báo trần (nhận width:480px cố định) mới được chữa. */
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    padding: 18px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
}

/* Dropdown chọn ngôn ngữ neo phải ở header; chặn trần phòng khi khung hẹp hơn nó. */
.lang-dropdown {
  max-width: calc(100vw - 24px);
}

/* Lịch flatpickr do thư viện chèn, bề ngang tính theo rem nên ở khổ hẹp vẫn tràn. */
@media (max-width: 480px) {
  .flatpickr-calendar {
    max-width: calc(100vw - 24px) !important;
  }
}

/* =============================================================
   BẢNG DẠNG THẺ DÙNG CHUNG — .rwd-card-table

   Cơ chế chung cho mọi bảng chỉ để ĐỌC. Bảng Lệnh sản xuất không dùng khối này: nó là
   màn thao tác nên có bố cục riêng bằng grid-template-areas ở cuối file.

   Dùng cho một bảng mới:
     1. thêm class rwd-card-table vào thẻ <table>
     2. thêm data-label="Tên cột" vào từng <td> khi render
   Không cần viết thêm CSS nào nữa.

   Mỗi ô thành một dòng "NHÃN | giá trị". Nhãn lấy từ data-label vì <thead> bị ẩn - không
   có nhãn thì người đọc không biết con số đang nhìn là cột nào.
   ============================================================= */
@media (max-width: 768px) {
  .rwd-card-table,
  .rwd-card-table tbody {
    display: block;
    min-width: 0 !important;
  }

  .rwd-card-table thead {
    display: none;
  }

  .rwd-card-table tbody tr {
    display: block;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.02);
  }

  .rwd-card-table tbody td {
    display: grid;
    grid-template-columns: minmax(0, 11ch) minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    width: auto !important;
    padding: 5px 0 !important;
    border: none !important;
    text-align: left !important;
    overflow-wrap: anywhere;
  }

  .rwd-card-table tbody td + td {
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  }

  .rwd-card-table tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-secondary);
    line-height: 1.5;
  }

  /* Ô không khai data-label (ví dụ cột nút) trải hết bề ngang thay vì bỏ trống cột nhãn. */
  .rwd-card-table tbody td:not([data-label]) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Hai loại hàng KHÔNG phải thẻ, đều là một ô colspan trải hết bề ngang:
       .rwd-empty-row      - dòng "không tìm thấy..."
       .history-detail-row - khối chi tiết bung ra khi bấm mũi tên ở màn Lịch sử */
  .rwd-card-table tbody tr.rwd-empty-row,
  .rwd-card-table tbody tr.history-detail-row {
    display: block;
    border: none !important;
    background: none;
    padding: 0;
    margin-bottom: 0;
  }

  .rwd-card-table tbody tr.rwd-empty-row td,
  .rwd-card-table tbody tr.history-detail-row td {
    display: block;
    padding: 0 !important;
  }

  .rwd-card-table tbody tr.rwd-empty-row td {
    text-align: center !important;
    padding: 24px 0 !important;
  }

  /* Hàng chi tiết bung ra phải nằm liền ngay dưới thẻ của chính nó, nên thẻ phía trên
     bỏ khoảng cách đáy khi đang mở. */
  .rwd-card-table tbody tr.history-detail-row:not(.hidden) {
    margin-top: -12px;
    margin-bottom: 12px;
  }
}

/* ---------- Lịch sử (/history) ---------- */

/* Bảng khai báo width:100% nên nó TỰ CO thay vì tràn ra: sáu cột bị ép lại, hai cột ngày
   giờ vỡ thành nhiều dòng và bảng đọc không nổi. min-width giữ bề ngang tối thiểu và đẩy
   phần thừa sang vùng cuộn ngang của .rwd-scroll-x bọc quanh nó trong Index.cshtml.
   760px = đủ cho hai chuỗi "dd/MM/yyyy HH:mm:ss" nằm trọn một dòng.

   Khoanh theo #view-history vì class .history-table còn dùng cho bảng màn Lệnh sản xuất,
   nơi số cột khác hẳn. */
@media (min-width: 769px) and (max-width: 1024px) {
  #view-history .history-table {
    min-width: 760px;
  }
}

/* Ô chứa bảng đệm 24px mỗi bên; ở khổ điện thoại chừng đó lấy mất 48px bề ngang đọc được. */
@media (max-width: 480px) {
  #view-history .table-container {
    padding: 16px 12px;
  }
}

/* ---------- Báo cáo (/report) ---------- */
@media (max-width: 768px) {
  .r-pie-chart-wrapper {
    width: 100%;
    min-width: 0;
  }

  .r-pie-chart-wrapper > * { max-width: 100%; }
  .r-pie-chart-wrapper canvas { max-width: 100% !important; }
}

/* Bảng "CHI TIẾT VẬN HÀNH THEO CA". .r-table-container đã có overflow-x: auto sẵn và
   .table-footer vốn nằm ngoài nó, nên chỉ thiếu đúng min-width: bảng khai báo width:100%
   nên nó tự co thay vì tràn, và không tràn thì chẳng có gì để cuộn.
   900px = 7 cột, rộng nhất là cột ca làm việc dạng "Ca 1 (06:00 - 14:00) từ 13/09".

   Khoanh theo #view-report vì class .report-table còn dùng cho bảng tài khoản ở màn
   Cài đặt, nơi chỉ có 4 cột và không cần cuộn. */
@media (min-width: 769px) and (max-width: 1024px) {
  #view-report .report-table {
    min-width: 900px;
  }

  /* .r-table-container cuộn được rồi nhưng thiếu hai thuộc tính cho cảm giác chạm:
     quán tính trên iOS, và chặn vuốt ngang lọt ra ngoài thành thao tác lùi trang. */
  #view-report .r-table-container {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

/* Thẻ KPI màn Báo cáo.
   Thẻ "TIẾN ĐỘ ĐƠN HÀNG" không chứa một con số mà là chuỗi ghép do report.js dựng:
   "71,484 / 230,100". Ở cỡ 2.2rem đậm, riêng chuỗi đó đã rộng hơn bề ngang điện thoại.
   Nó vỡ vì ba thứ cộng lại:
     - .r-kpi-value là flex NHƯNG không có flex-wrap, nên hai mảnh số không xuống dòng;
     - flex item mặc định min-width:auto nên không co xuống dưới min-content;
     - hàng bọc ngoài còn nhét thêm ô phần trăm ở mép phải.
   Chữa cả ba: cho xuống dòng, mở khoá co, và hạ cỡ chữ theo khổ màn hình. */
@media (max-width: 768px) {
  .r-kpi-card {
    padding: 18px;
    min-width: 0;
  }

  .r-kpi-content {
    min-width: 0;
  }

  .r-kpi-value {
    font-size: 1.6rem;
    flex-wrap: wrap;
    min-width: 0;
  }

  /* Phần trăm rớt xuống dòng dưới thay vì ghì con số không cho co. */
  .r-kpi-progress-row {
    flex-wrap: wrap;
    gap: 0 8px;
  }

  .r-kpi-progress-row > * {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .r-kpi-value {
    font-size: 1.35rem;
  }
}

/* ---------- Cảnh báo (/alerts) ---------- */
@media (max-width: 768px) {
  .alarm-filter-tabs {
    flex-wrap: wrap;
    gap: 6px;
  }

  .alarm-table-footer {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* Hàng chân bảng là "dòng chữ đếm bản ghi | cụm nút phân trang" đặt space-between. Ở khổ
   hẹp hai bên không đủ chỗ nằm cạnh nhau, nên cho cụm phân trang rớt xuống dòng dưới. */
@media (max-width: 768px) {
  .table-footer,
  .orders-table-footer {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* Bảng cảnh báo. Giống bảng màn Báo cáo: .alarm-table-container đã có overflow-x: auto
   và .alarm-table-footer vốn nằm ngoài nó, nên chỉ thiếu min-width - bảng khai width:100%
   nên nó tự co thay vì tràn, và tiêu đề cột vỡ thành "MÃ LỖI / THIẾT BỊ" xuống bốn dòng.
   900px = tổng bề ngang các cột đã khai cứng trong markup (140+140+220+160 = 660) cộng
   khoảng 240px cho cột MÔ TẢ CHI TIẾT vốn co giãn. */
@media (min-width: 769px) and (max-width: 1024px) {
  #view-alert .alarm-table {
    min-width: 900px;
  }

  #view-alert .alarm-table-container {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

/* ---------- Cài đặt (/settings) ---------- */
@media (max-width: 1024px) {
  /* Danh sách máy nằm trên phần chi tiết khi hai cột không còn đủ chỗ. */
  .cfg-master {
    border-right: 0;
    border-bottom: 1px solid var(--hp-border);
  }

  .cfg-list { max-height: 280px; }

  /* Bảng danh sách tài khoản. Dùng lại .report-table / .r-table-container của màn Báo
     cáo, nên rule bên đó phải khoanh theo #view-report và bảng này cần rule riêng.
     640px = ba cột khai cứng (72 + 220 + 280 = 572) cộng phần tối thiểu cho cột tên đăng nhập. */
  #view-settings .report-table {
    min-width: 640px;
  }

  #view-settings .r-table-container {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

@media (max-width: 768px) {
  #view-settings .hp-card__head,
  #view-settings .hp-table-foot,
  .cfg-detail {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cfg-savebar {
    margin: 0 -16px;
    padding: 12px 16px;
  }

  .cfg-savebar .hp-btn { flex: 1 1 100%; height: 44px; }

  .acc-tools,
  .acc-search { width: 100%; }

  .form-control-custom {
    width: 100%;
    min-width: 0;
  }
}

/* -------------------------------------------------------------
   9. .table-responsive — markup (nhất là màn nước thải) dùng class này
   theo thói quen Bootstrap, nhưng Index.cshtml không nạp Bootstrap nên
   class này hiện không có style nào. Định nghĩa đúng ý nghĩa của nó.
   ------------------------------------------------------------- */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* -------------------------------------------------------------
   11. Biểu đồ tròn màn Báo cáo
   ------------------------------------------------------------- */
@media (max-width: 768px) {
  .r-pie-canvas-container {
    max-width: 100%;
  }

  .r-pie-legend {
    margin-left: 0 !important;
  }
}

/* -------------------------------------------------------------
   13. Màn Báo cáo: thanh lọc và biểu đồ tròn tràn ngay từ mốc 1280px
   (đo được 1009 > 1000 ở laptop nhỏ), nên đặt ở mốc lg chứ không phải md
   ------------------------------------------------------------- */
@media (max-width: 1280px) {
  .report-filter-bar {
    flex-wrap: wrap;
    gap: 14px;
  }

  .report-filter-bar > * { min-width: 0; }

  .r-pie-chart-wrapper {
    width: 100%;
    min-width: 0;
  }

  .r-pie-chart-wrapper > * { max-width: 100%; }
  .r-pie-canvas-container { max-width: 100%; }
}

/* .r-pie-legend có inline margin-left:20px; trong flex-direction:column nó
   cộng thêm vào bề ngang và làm tràn đúng 20px. Bỏ từ mốc tablet trở xuống. */
@media (max-width: 1280px) {
  .r-pie-legend {
    margin-left: 0 !important;
  }
}

/* =============================================================
   14. BIỂU ĐỒ: giữ bề ngang tối thiểu đọc được, cuộn ngang trong card

   Bóp biểu đồ đường xuống 330px thì trục thời gian chồng chữ và không
   còn đọc được gì. Thay vì vậy, giữ biểu đồ ở bề ngang tối thiểu rồi
   cho cuộn ngang bên trong card; tiêu đề và chú giải của card đứng yên.

   Vì sao phải có .chart-scroll-inner: Chart.js đo kích thước theo phần
   tử CHA của canvas. Nếu chỉ đặt min-width lên chính canvas thì bitmap
   vẫn vẽ theo bề ngang cũ còn canvas lại hiển thị rộng hơn, biểu đồ bị
   kéo giãn méo. Lớp bọc này mới là thứ Chart.js đo.

   ============================================================= */
.chart-scroll-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

@media (max-width: 1024px) {
  .chart-container-wrapper,
  .r-chart-canvas-wrapper,
  .chart-canvas-wrapper {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  /* Ba biểu đồ trục thời gian / cột đã được bọc .chart-scroll-inner trong Index.cshtml.
     min-width giữ bề ngang tối thiểu để trục hoành còn đọc được nhãn, phần thừa đẩy sang
     vùng cuộn của wrapper phía trên.

     Hai biểu đồ TRÒN (history-achievement, yield-efficiency) cố ý KHÔNG bọc: cuộn ngang
     để xem một hình tròn thì vô nghĩa, chúng chỉ cần co vừa khung. Vì không có lớp bọc
     nên không có gì tràn, và overflow-x ở wrapper của chúng là vô hại. */
  .chart-scroll-inner {
    min-width: 520px;
  }

  /* Card chứa chart nằm trong các grid/flex có min-width:auto, nên nếu
     không mở khoá thì chính card nở ra 520px thay vì để vùng chart cuộn. */
  .report-charts-row,
  .report-charts-row > *,
  .r-chart-panel,
  .r-distribution-panel,
  .history-bottom-row,
  .history-bottom-row > *,
  .chart-panel,
  .stability-panel,
  .detail-grid,
  .detail-grid > *,
  .detail-right-col,
  .detail-section-part2 {
    min-width: 0;
  }
}