/* ════════════════════════════════════════════════════════
   NSCA ERP — Mobile Responsive CSS
   ≤768px  → tablet / phone
   ≤480px  → phone portrait
   Desktop >768px = không đổi gì
   ════════════════════════════════════════════════════════ */

/* ── Overlay backdrop ── */
.mob-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 998;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mob-overlay.active { display: block; }

/* ════════════════════════════════════════════════════════
   TABLET + PHONE  (≤768px)
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Topbar: ẩn bớt, giữ logo + hamburger + avatar */
  .tb-modules   { display: none !important; }
  .tb-add-mod   { display: none !important; }
  .tb-live      { display: none !important; }
  .tb-clock     { display: none !important; }
  .tb-user-name { display: none !important; }
  .tb-user-role { display: none !important; }
  .tb-logo-ver  { display: none !important; }

  .tb-user {
    padding: 4px !important;
    border-radius: 50% !important;
  }
  .tb-logo-name { font-size: 14px !important; }
  .sb-toggle-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 17px !important;
    margin-right: 0 !important;
  }

  /* Sidebar: drawer từ trái, out-of-flow */
  .sidebar {
    position: fixed !important;
    top: var(--topbar-h) !important;
    left: 0 !important;
    height: calc(100dvh - var(--topbar-h)) !important;
    width: 260px !important;
    z-index: 999 !important;
    transform: translateX(-100%) !important;
    transition: transform .25s cubic-bezier(.4,0,.2,1) !important;
    overflow-y: auto !important;
    box-shadow: none !important;
  }
  .sidebar.sb-mobile-open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.4) !important;
  }

  /* Khi sidebar là collapsed (desktop state), trên mobile vẫn hiện full */
  .sidebar.sb-collapsed {
    width: 260px !important;
    overflow-y: auto !important;
  }
  .sidebar.sb-collapsed .sb-label,
  .sidebar.sb-collapsed .sb-footer,
  .sidebar.sb-collapsed .sb-api-info,
  .sidebar.sb-collapsed .sb-api-label,
  .sidebar.sb-collapsed .sb-api-url,
  .sidebar.sb-collapsed .sb-badge,
  .sidebar.sb-collapsed .sb-open-tab,
  .sidebar.sb-collapsed .sb-item-name {
    display: flex !important;
  }
  .sidebar.sb-collapsed .sb-section { padding: 16px 8px 4px !important; }
  .sidebar.sb-collapsed .sb-item { padding: 7px 10px !important; justify-content: flex-start !important; }
  .sidebar.sb-collapsed .sb-ico { font-size: 13px !important; width: 16px !important; }
  .sidebar.sb-collapsed .sb-item:hover::after { display: none !important; }

  /* Layout: sidebar fixed → .main chiếm full width tự động */
  .main {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .content {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px !important;
    padding-bottom: 24px !important;
  }

  /* Page header */
  .page-hd {
    height: auto !important;
    min-height: 44px !important;
    flex-wrap: wrap !important;
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  .page-hd-breadcrumb { flex: 1 1 auto; min-width: 0; }
  .phb-seg { font-size: 11px !important; }
  .page-hd-actions { flex-wrap: wrap !important; gap: 6px !important; }
  .page-hd-actions .btn { font-size: 11px !important; padding: 4px 10px !important; }

  /* KPI Grids */
  .k4 { grid-template-columns: repeat(2,1fr) !important; }
  .k5 { grid-template-columns: repeat(2,1fr) !important; }
  .k3 { grid-template-columns: repeat(2,1fr) !important; }
  .kpi { padding: 12px !important; }
  .kpi-value { font-size: 22px !important; }

  /* Layout grids */
  .g2  { grid-template-columns: 1fr !important; }
  .g21 { grid-template-columns: 1fr !important; }
  .g3  { grid-template-columns: 1fr !important; }
  .registry-grid { grid-template-columns: repeat(2,1fr) !important; }

  /* Tables */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 480px; }

  /* Cards */
  .card-header { flex-wrap: wrap !important; gap: 6px !important; padding: 10px 12px !important; }
  .card-subtitle { margin-left: 0 !important; }
  .card-action { width: 100% !important; margin-left: 0 !important; justify-content: flex-end !important; }
  .card-body { padding: 10px 12px !important; }

  /* Touch targets */
  .btn { min-height: 36px !important; }
  .btn-sm { min-height: 32px !important; }

  /* Modal */
  .modal-box, .dialog-box {
    width: calc(100vw - 24px) !important;
    max-width: 100% !important;
    margin: 12px !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
  }
}

/* ════════════════════════════════════════════════════════
   PHONE PORTRAIT  (≤480px)
   ════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .tb-logo-name { display: none !important; }
  .page-hd-actions { display: none !important; }
  body { font-size: 13px; }

  .k4 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .k3 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .kpi-value { font-size: 20px !important; }

  .registry-grid { grid-template-columns: 1fr !important; }
  .content { padding: 8px !important; padding-bottom: 20px !important; }
  .card { margin-bottom: 10px !important; }

  .sidebar {
    width: 80vw !important;
    max-width: 300px !important;
  }
}