/*
 * CMS_Responsive.css
 * Xử lý giao diện đáp ứng (responsive) cho hệ thống quản trị CMS ở 12 breakpoints.
 * Không thay đổi CSS gốc của theme.css, chỉ bổ sung quy tắc hiển thị trên các màn hình nhỏ.
 */

/* ==========================================================================
   1. Breakpoint 1440px (Desktop rộng)
   ========================================================================== */
@media (max-width: 1440px) {
  .container { max-width: 1400px; }
  .cmc-kpis--5 { gap: 10px; }
}

/* ==========================================================================
   2. Breakpoint 1366px (Laptop phổ thông)
   ========================================================================== */
@media (max-width: 1366px) {
  .cmc-table-card .cmc-table th { font-size: 0.75rem; padding: 10px 10px; }
  .cmc-table-card .cmc-table td { padding: 12px 10px; }
  .cmc-filter-card { gap: 10px; }
  .cmc-kpis--5 .cmc-kpi { padding: 12px; }
  .cmc-drawer__panel--wide { max-width: 1000px; }
}

/* ==========================================================================
   3. Breakpoint 1240px (Laptop vừa)
   ========================================================================== */
@media (max-width: 1240px) {
  .cmc-kpis--5 { grid-template-columns: repeat(4, 1fr); }
  .cmc-filter-card .cmc-input { min-width: 180px; }
  .cmc-content { padding: 18px; }
  .cmc-modal__panel--wide { max-width: 1000px; }
}

/* ==========================================================================
   4. Breakpoint 1117px (Laptop nhỏ / Tablet ngang lớn)
   ========================================================================== */
@media (max-width: 1117px) {
  :root { --cmc-sidebar-w: 220px; }
  body { font-size: 0.84375rem; } /* 13.5px */
  .cmc-kpis, .cmc-kpis--4, .cmc-kpis--5 { grid-template-columns: repeat(3, 1fr); }
  .cmc-content { padding: 16px; }
  .cmc-topbar { padding: 0 16px; }
  .cmc-page-title h2 { font-size: 1.375rem; }
  .cmc-catalog { grid-template-columns: 200px 1fr; }
  .cmc-badge { font-size: 0.84375rem; }
  .cmc-btn { font-size: 0.84375rem; }
  .cmc-table-card .cmc-table th { font-size: 0.75rem; }
}

/* ==========================================================================
   5. Breakpoint 1024px (Tablet ngang chuẩn)
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --cmc-sidebar-w: 200px; }
  .cmc-kpis--5 { grid-template-columns: repeat(3, 1fr); }
  .cmc-kpis--4 { grid-template-columns: repeat(2, 1fr); }
  .cmc-content { padding: 14px; }
  .cmc-filter-card .cmc-input { min-width: 160px; }
  .cmc-drawer__panel, .cmc-drawer__panel--wide { max-width: 90%; }
  .cmc-catalog { grid-template-columns: 180px 1fr; }
  /* Map adjustments */
  .bd-sidebar { flex: 0 0 25%; max-width: 25%; }
  .bd-map-panel { flex: 0 0 75%; max-width: 75%; }
}

/* ==========================================================================
   6. Breakpoint 997px (Ngưỡng ẩn sidebar)
   ========================================================================== */
@media (max-width: 997px) {
  .cmc-shell { grid-template-columns: 1fr; padding-left: 0; }
  .cmc-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 50;
    width: 260px;
  }
  .cmc-sidebar.is-open { transform: translateX(0); }
  .cmc-menu-toggle { display: inline-flex; }
  .cmc-sidebar-backdrop.is-open { display: block; position: fixed; inset: 0; z-index: 49; background: rgba(17,24,39,0.45); }
  
  .cmc-kpis, .cmc-kpis--4, .cmc-kpis--5 { grid-template-columns: repeat(2, 1fr); }
  .cmc-content { padding: 14px; }
  
  /* Map stack */
  .bd-row { flex-direction: column; }
  .bd-sidebar, .bd-map-panel { flex: 0 0 100%; max-width: 100%; }
  .bd-sidebar { margin-bottom: 15px; }
}

/* ==========================================================================
   7. Breakpoint 768px (Tablet dọc)
   ========================================================================== */
@media (max-width: 768px) {
  .cmc-page-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .cmc-page-actions { justify-content: flex-start; flex-wrap: wrap; }
  .cmc-filter-card { flex-direction: column; align-items: stretch; }
  .cmc-filter-card .cmc-input, .cmc-filter-card .cmc-select, .cmc-filter-card span.select2 { width: 100% !important; min-width: unset; max-width: unset !important; }
  .cmc-pagination { flex-direction: column; align-items: center; gap: 10px; justify-content: center; }
  
  .cmc-catalog { grid-template-columns: 1fr; }
  
  /* Reports */
  #reportTabs { overflow-x: auto; flex-wrap: nowrap; width: 100%; }
  .rpt-qd-kpis { grid-template-columns: repeat(2, 1fr); }
  .rpt-header-bar { flex-direction: column; gap: 12px; }
  .rpt-filter-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .rpt-filter-bar .rpt-btn-filter, .rpt-filter-bar #btn-reset { width: 100%; justify-content: center; margin-top: 8px; }
  .rpt-period-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .rpt-period-buttons button { flex: 1 1 auto; justify-content: center; }
  .cmc-lien-he-grid { grid-template-columns: 1fr !important; }
  
  /* Modal / Drawer */
  .cmc-drawer__panel, .cmc-drawer__panel--wide { max-width: 100%; }
  .modal-xl { max-width: 100%; margin: 0; }
  .cmc-drawer__body { height: calc(100vh - 120px); }
  
  .col-md-8, .col-md-4 { flex: 0 0 100%; max-width: 100%; }
  .cmc-row { grid-template-columns: 1fr; }
  .col-md-4 { justify-content: flex-start; }
}

/* ==========================================================================
   8. Breakpoint 576px (Mobile lớn)
   ========================================================================== */
@media (max-width: 576px) {
  body { font-size: 0.8125rem; } /* 13px */
  .cmc-table-card .cmc-table td { font-size: 0.8125rem; }
  .cmc-content { padding: 12px; }
  .cmc-topbar { padding: 0 12px; }
  
  .cmc-page-title h2 { font-size: 1.0625rem; } /* 17px */
  .cmc-page-title p { font-size: 0.8125rem; }
  
  .cmc-kpis, .cmc-kpis--4, .cmc-kpis--5 { grid-template-columns: 1fr; }
  .cmc-kpi__value { font-size: 1.25rem; }
  
  .cmc-form-grid { grid-template-columns: 1fr; }
  .cmc-form-grid--full, .cmc-modal-footer { grid-column: 1 / -1; }
  
  .cmc-modal__panel, .cmc-modal__panel--wide { margin: 8px; max-width: calc(100% - 16px); max-height: calc(100vh - 16px); }
  
  .cmc-table-card .cmc-table th { font-size: 0.71875rem; } /* 11.5px */
  .cmc-badge { font-size: 0.8125rem; padding: 3px 8px; }
  
  .cmc-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .cmc-tab { white-space: nowrap; font-size: 0.8125rem; }
  .cmc-btn { font-size: 0.8125rem; padding: 8px 14px; }
  
  .rpt-qd-kpis { grid-template-columns: 1fr; }
  .rpt-filter-bar { padding: 12px; }
  
  .cmc-catalog__item { width: auto; display: inline-flex; }
  .cmc-catalog .cmc-card__body { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ==========================================================================
   9. Breakpoint 460px (Điện thoại phổ thông)
   ========================================================================== */
@media (max-width: 460px) {
  body { font-size: 0.8125rem; }
  .cmc-content { padding: 10px; }
  .cmc-topbar { padding: 0 10px; }
  .cmc-topbar__title { font-size: 0.875rem; max-width: calc(100% - 120px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  
  .cmc-kpi { padding: 12px 10px; }
  .cmc-kpi__value { font-size: 1.125rem; }
  .cmc-kpi__label { font-size: 0.75rem; }
  
  .cmc-btn { padding: 9px 12px; font-size: 0.8125rem; }
  .cmc-icon-btn { width: 36px; height: 36px; }
  
  .cmc-table-card .cmc-table th { font-size: 0.6875rem; padding: 8px; } /* 11px */
  .cmc-table-card .cmc-table td { font-size: 0.8125rem; padding: 8px; }
  .cmc-td-main { white-space: normal; }
  
  .cmc-pagination-controls .cmc-btn { padding: 5px 10px; }
  .cmc-drawer__hd, .cmc-drawer__body, .cmc-drawer__ft { padding: 12px; }
  .cmc-filter-card { padding: 12px; }
  .modal.side-modal .modal-body { padding: 14px; }
}

/* ==========================================================================
   10. Breakpoint 420px (Điện thoại trung bình)
   ========================================================================== */
@media (max-width: 420px) {
  body { font-size: 0.78125rem; } /* 12.5px */
  .cmc-content { padding: 8px; }
  .cmc-topbar { padding: 0 8px; }
  .cmc-card__body { padding: 12px; }
  
  .cmc-kpi { padding: 10px 8px; }
  .cmc-kpi__value { font-size: 1rem; }
  .cmc-badge { font-size: 0.75rem; padding: 3px 8px; }
  .cmc-btn { font-size: 0.78125rem; padding: 8px 10px; gap: 6px; }
  
  .cmc-topbar__title { font-size: 0.875rem; }
  .cmc-page-title h2 { font-size: 0.9375rem; }
  
  .cmc-filter-card { padding: 10px; }
  .cmc-input, .cmc-select { padding: 10px 10px; }
  
  .cmc-filter-summary { display: none; }
  .cmc-pagination-info { font-size: 0.75rem; }
}

/* ==========================================================================
   11. Breakpoint 380px (Điện thoại nhỏ)
   ========================================================================== */
@media (max-width: 380px) {
  body { font-size: 0.75rem; } /* 12px */
  .cmc-content { padding: 6px; }
  .cmc-topbar { padding: 0 6px; }
  
  .cmc-kpi__value { font-size: 0.9375rem; }
  .cmc-btn { padding: 7px 8px; font-size: 0.75rem; }
  
  .cmc-page-actions { flex-wrap: wrap; gap: 6px; }
  /* Hide specific buttons if needed */
  button[has-permission="bao_cao.export"] { display: none !important; }
  
  .cmc-pagination-controls { gap: 4px; }
  .cmc-pagination-controls .cmc-btn { padding: 5px 8px; font-size: 0.75rem; }
  
  .cmc-table-card .cmc-table th, .cmc-table-card .cmc-table td { padding: 6px; }
}

/* ==========================================================================
   12. Breakpoint 320px (Điện thoại cũ/nhỏ nhất)
   ========================================================================== */
@media (max-width: 320px) {
  body { font-size: 0.75rem; }
  .cmc-content { padding: 4px; }
  .cmc-topbar { padding: 0 4px; }
  
  .cmc-topbar__title { color: transparent; overflow: hidden; width: 0; margin: 0; padding: 0; } /* Hide text, keep hamburger and avatar */
  
  .cmc-kpi { padding: 8px 6px; }
  .cmc-kpi__value { font-size: 0.875rem; }
  .cmc-btn { padding: 6px 8px; font-size: 0.75rem; }
  .cmc-badge { padding: 2px 6px; font-size: 0.6875rem; }
  
  .cmc-page-title p { display: none; }
  .cmc-form-grid { grid-template-columns: 1fr; }
}