/* =============================================================
   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ố lưới trong Index.cshtml khai báo
   grid-template-columns bằng inline style (vd .settings-config-grid là
   "350px 1fr", .order-form là "repeat(4, 1fr)"). 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: 1024px) {
  .order-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .production-orders-container {
    margin: 16px 0 !important;
    padding: 16px !important;
  }

  .order-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .order-form > * { min-width: 0; }

  /* flatpickr gán width cố định lên input khi khởi tạo */
  .order-form input,
  .order-form select,
  #order-input-date {
    width: 100%;
    min-width: 0;
  }
}

/* ---------- 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; }
}

/* ---------- 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;
  }
}

/* ---------- Cài đặt (/settings) ---------- */
@media (max-width: 1024px) {
  .settings-config-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .machine-settings-container,
  .account-settings-container {
    margin: 16px 0 !important;
    padding: 16px !important;
  }

  .settings-config-grid > * { min-width: 0; }

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

/* ---------- Máy trộn (/mixer) ---------- */
@media (max-width: 1024px) {
  #view-mixer .mx-bottom-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #view-mixer .mx-bottom-grid > *,
  #view-mixer .mx-bottom-tables-grid > * {
    min-width: 0;
  }
}

/* ---------- Xử lý nước thải (/wastewater) ---------- */
@media (max-width: 1024px) {
  #view-wastewater .overview-bottom,
  #view-wastewater .overview-dashboard {
    min-width: 0;
  }

  #view-wastewater .overview-bottom > * {
    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;
}

/* -------------------------------------------------------------
   10. Vá các flex item có ellipsis nhưng thiếu min-width: 0.
   flex:1 + text-overflow:ellipsis vẫn tràn nếu min-width còn là auto.
   ------------------------------------------------------------- */
#view-mixer .mx-alarm-title {
  min-width: 0;
}

/* -------------------------------------------------------------
   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;
  }
}

/* -------------------------------------------------------------
   12. Hai khối con không có class, phải nhắm qua quan hệ cha-con.
   Cả hai đều khai báo layout bằng inline style nên cần !important.
   grid-template-columns vô hại với phần tử không phải grid, flex-wrap
   vô hại với phần tử không phải flex, nên selector "> div" an toàn.
   ------------------------------------------------------------- */

/* Hàng biểu đồ màn nước thải: inline "1fr 21.875rem" (350px cứng) */
@media (max-width: 1024px) {
  #view-wastewater .overview-bottom > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Hàng tiêu đề + nút của màn Cài đặt: flex space-between không xuống dòng */
@media (max-width: 768px) {
  .account-settings-container > div,
  .machine-settings-container > div {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* -------------------------------------------------------------
   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.

   Gauge của Highcharts không cần lớp bọc: ô chứa chính là .gauge-item /
   .mx-gauge-item nên đặt bề ngang trực tiếp lên chúng là đủ.
   ============================================================= */
.chart-scroll-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

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

  .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;
  }

  /* Gauge pH / DO / NH4 và gauge tốc độ / nhiệt / áp suất.
     Ở khổ 400px mỗi gauge chỉ còn 110px, kim và số không đọc nổi. */
  #view-wastewater .gauge-container,
  #view-mixer .mx-gauge-container {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  #view-wastewater .gauge-item,
  #view-mixer .mx-gauge-item {
    width: auto;
    flex: 0 0 170px;
  }
}