/* ============================================================
 * 9AM Hair Studio — MOBILE OVERRIDES
 * Áp dụng trên màn hình <= 768px (điện thoại + tablet nhỏ)
 * ============================================================
 * Mục tiêu: dùng được trên iPhone/Android KHÔNG cần redesign module.
 *  - Topbar tránh notch iOS (safe-area)
 *  - Sidebar khi mở rộng = overlay drawer (KHÔNG bóp nội dung)
 *  - Backdrop mờ + tap-to-close
 *  - Tap target tối thiểu 44px (Apple HIG)
 *  - Sửa overflow ngang khi modal/bảng quá rộng
 * ============================================================ */

/* ---------- iOS safe-area cho TẤT CẢ thiết bị (kể cả desktop, không hại) ---- */
@supports (padding: env(safe-area-inset-top)) {
  .topbar {
    padding-top: env(safe-area-inset-top);
    height: calc(48px + env(safe-area-inset-top));
  }
  .layout {
    margin-top: calc(48px + env(safe-area-inset-top));
    height: calc(100vh - 48px - env(safe-area-inset-top));
  }
  .sidebar {
    top: calc(48px + env(safe-area-inset-top));
    height: calc(100vh - 48px - env(safe-area-inset-top));
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Overlay containers cũng phải bù safe-area */
  .om-overlay,
  .kh-overlay,
  .appt-overlay,
  .kho-overlay,
  .payroll-overlay,
  .hr-overlay,
  .reports-overlay,
  .leads-overlay,
  .checkin-overlay,
  .ketoan-chi-overlay,
  .module-overlay {
    top: calc(48px + env(safe-area-inset-top)) !important;
  }
}

/* ---------- MOBILE BREAKPOINT ---------- */
@media (max-width: 768px) {

  /* === TOPBAR: gọn lại, không tràn === */
  .topbar {
    padding-left: calc(var(--sb-w) + 8px) !important;
    padding-right: 8px;
    gap: 6px;
  }
  /* Khi sidebar expand trên mobile → topbar KHÔNG dịch (sidebar overlay lên trên) */
  .topbar.sb-expanded {
    padding-left: calc(var(--sb-w) + 8px) !important;
  }
  .topbar-logo {
    font-size: 11px;
    letter-spacing: .3px;
  }
  .topbar-ctx { gap: 4px; }
  .topbar-right { gap: 4px; }
  .search-top { width: 100px; font-size: 11px; }
  /* Ẩn search trên màn hình rất hẹp — dùng search trong sidebar thay thế */
  @media (max-width: 480px) {
    .search-top { display: none; }
  }
  .tbtn, .branch-btn {
    padding: 6px 8px;
    font-size: 10px;
    min-height: 32px;
  }

  /* === LAYOUT: không shift theo sidebar === */
  .layout,
  .layout.sb-expanded {
    margin-left: 0 !important;
  }
  /* 2 panel cạnh nhau → xếp dọc trên mobile */
  .layout {
    flex-direction: column;
    overflow-y: auto;
  }
  .left-panel,
  .right-panel {
    width: 100% !important;
    min-width: 0 !important;
    flex: none;
  }
  .left-panel {
    border-right: none;
    border-bottom: 1px solid rgba(10,10,10,0.08);
  }

  /* === SIDEBAR: trở thành overlay drawer === */
  .sidebar {
    /* Collapsed mặc định (60px icon-only) — vẫn hiện làm thanh quick nav */
    z-index: 1050;
  }
  .sidebar.expanded {
    /* Khi mở rộng: drawer rộng hơn (260px) để dễ chạm */
    width: min(280px, 85vw);
    box-shadow: 6px 0 32px rgba(0,0,0,.5);
  }
  /* Tap target sidebar items */
  .sb-item { height: 48px; }
  .sidebar.expanded .sb-item { min-height: 48px; padding: 0 6px; }
  .sidebar.expanded .sb-label { font-size: 14px; }

  /* === BACKDROP khi sidebar mở (body.sb-mobile-open được JS gắn) === */
  body.sb-mobile-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1040;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* === OVERLAY/MODAL: fullscreen trên mobile === */
  .om-overlay,
  .kh-overlay,
  .appt-overlay,
  .kho-overlay,
  .payroll-overlay,
  .hr-overlay,
  .reports-overlay,
  .leads-overlay,
  .checkin-overlay,
  .ketoan-chi-overlay,
  .module-overlay,
  .dv-overlay {
    left: 0 !important;
    right: 0 !important;
  }
  /* Modal nhỏ giữa màn hình → expand gần fullscreen */
  .modal-overlay .modal,
  .mo .modal,
  .modal {
    max-width: 96vw !important;
    max-height: 92vh !important;
    margin: 4vh auto !important;
  }

  /* === BUTTONS & INPUTS: đủ to để chạm === */
  button:not(.sb-toggle):not(.tbtn):not(.tb-avatar),
  .btn,
  input[type="submit"] {
    min-height: 40px;
    font-size: 14px;
  }
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .fi {
    font-size: 16px !important; /* iOS không zoom khi focus nếu >=16px */
    min-height: 40px;
    padding: 10px 12px;
  }

  /* === BẢNG DỮ LIỆU: cho phép scroll ngang gọn === */
  .data-table,
  table {
    font-size: 12px;
  }
  /* Wrapper cho bảng rộng — cuộn ngang trong khung thay vì cả trang */
  .table-wrap,
  .om-table-wrap,
  .kho-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }

  /* === SỬA TRÀN NGANG (root cause của 'khó thao tác') === */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  body { font-size: 13px; }

  /* === FORM trong overlay: stack dọc thay vì grid 2 cột === */
  .cust-bar,
  .form-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .form-field {
    flex: 1 1 100%;
    min-width: 0;
  }
  .fi-search { width: 100%; }
}

/* ---------- iPhone landscape & tablet portrait ---------- */
@media (max-width: 1024px) and (orientation: portrait) {
  .left-panel { min-width: 0 !important; }
  .right-panel { min-width: 0 !important; }
}