/* ============================================================
   responsive.css — make the HRMS dashboard usable on phones,
   tablets and small windows. Layered ON TOP of index-*.css
   without rebuilding the React bundle.

   Strategy
   - Layout uses stable semantic classes (.app/.sidebar/.main/
     .content/.topbar/.stat-grid/.grid-*/.kanban/...) which we
     target directly.
   - The sidebar is already position:fixed, so on phones it
     becomes a slide-in drawer toggled by body.sidebar-open
     (set by hrms-mobile.js).
   - Modals / floating widgets use React INLINE styles (no
     classes), so they are clamped via [style*=...] attribute
     selectors with !important (inline styles otherwise win).
   ============================================================ */

/* Hamburger + backdrop are injected by hrms-mobile.js. Hidden on
   desktop; revealed inside the mobile breakpoint below. */
#hrms-hamburger { display: none; }
#hrms-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.22s ease;
}

/* ------------------------------------------------------------
   Tablets / small laptops (<= 1024px): relax the densest grids
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .kanban { grid-template-columns: repeat(2, 1fr); }
  .topbar-search { width: 160px; }
}

/* ------------------------------------------------------------
   Phones / narrow windows (<= 768px): single column + drawer
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Use the dynamic viewport height so mobile browser chrome
     (address bar) doesn't crop the layout. */
  .app { height: 100vh; height: 100dvh; }

  /* Sidebar -> off-canvas drawer */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.26s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    width: 264px;
    max-width: 84vw;
    z-index: 100;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open #hrms-sidebar-backdrop { display: block; opacity: 1; }

  /* Main column spans full width once the sidebar is detached */
  .main { margin-left: 0; }

  /* Hamburger sits first in the topbar */
  #hrms-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 2px;
    border: none;
    background: transparent;
    color: var(--text, #e8edf7);
    cursor: pointer;
    border-radius: 8px;
    flex-shrink: 0;
  }
  #hrms-hamburger:hover { background: var(--bg3, rgba(255,255,255,0.06)); }
  #hrms-hamburger svg { width: 22px; height: 22px; }

  /* Topbar: tighter, no fixed-width search hogging space */
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar-title { font-size: 15px; }
  .topbar-search { display: none; }

  /* Content breathing room */
  .content { padding: 16px 14px; }

  /* Collapse every multi-column grid to a single column */
  .stat-grid,
  .grid-2,
  .grid-3,
  .grid-2-1,
  .grid-1-2,
  .kanban {
    grid-template-columns: 1fr;
  }

  /* Section headers stack (title above the action button) */
  .sec-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .sec-head .btn-primary,
  .sec-head .ai-btn { width: 100%; justify-content: center; }

  /* Cards / interview toggles: a little tighter */
  .card { padding: 16px; }
  .interview-type-toggle { gap: 8px; }

  /* Tables already have .table-wrap{overflow-x:auto}; make sure
     they scroll horizontally instead of overflowing the page. */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  table { min-width: 560px; }

  /* --- Modals / dialogs (React inline-styled overlays) ---
     Only the CENTERED overlays (justify-content:center) are dialog
     boxes — target their inner card. This avoids clamping non-centered
     fullscreen panels (e.g. the AI interview view). */
  div[style*="position: fixed"][style*="inset: 0px"][style*="justify-content: center"] > div {
    max-width: 94vw !important;
    width: auto !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
  }
  /* Overlay padding shrink so the card isn't edge-to-edge */
  div[style*="position: fixed"][style*="inset: 0px"][style*="justify-content: center"] {
    padding: 14px !important;
  }

  /* Floating widgets (AI chat panel, "Live Interviews" button)
     anchored bottom/right with a fixed pixel width. */
  div[style*="position: fixed"][style*="width: 380px"] {
    width: min(380px, 92vw) !important;
    right: 12px !important;
    max-height: 78vh !important;
  }
}

/* ------------------------------------------------------------
   Very small phones (<= 420px): final polish
   ------------------------------------------------------------ */
@media (max-width: 420px) {
  .content { padding: 12px 10px; }
  .stat-value { font-size: 24px; }
  .sec-head h2 { font-size: 18px; }
  .auth-card { padding: 26px 20px; }
}