/* styles-responsive.css — Responsive breakpoints for dashboard & admin pages
   NOTE: Public page responsive rules live in index-redesign.css & public-shell.css */

@media (max-width: 900px) {
  html {
    font-size: 15.5px;
  }

  body {
    overflow-x: hidden;
    width: 100%;
  }

  /* Prevent iOS auto-zoom on input focus */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Dashboard & Admin */
  .main-content {
    margin-left: 0;
  }
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .hamburger {
    display: flex;
  }
  .dash-main {
    margin-left: 0;
  }
  .dash-sidebar {
    transform: translateX(-100%);
  }
  .dash-sidebar.open {
    transform: translateX(0);
  }
  .dash-hamburger {
    display: flex;
  }
  .dash-body {
    padding: 20px 16px;
  }
  .dash-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Auth pages (old layout) */
  .auth-page {
    grid-template-columns: 1fr;
  }
  .auth-left {
    display: none;
  }
  .auth-right {
    padding: 40px 28px;
  }
}

@media (max-width: 600px) {
  /* Dashboard & Admin */
  .dash-stats {
    grid-template-columns: 1fr 1fr;
  }
  .dash-body {
    padding: 16px;
  }
  .modal {
    padding: 24px 20px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-header {
    flex-direction: column;
  }
  .page-header-actions {
    width: 100%;
  }
  .dash-topbar {
    padding: 0 16px;
  }
  .dash-page-header {
    flex-direction: column;
  }
  .auth-right {
    padding: 32px 20px;
  }
  .page-body {
    padding: 16px;
  }
  .topbar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .topbar-right {
    display: none;
  }

  .table-wrap,
  .jobs-table-wrap,
  .applications-table-wrap,
  .responsive-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE CONTAINMENT — prevent horizontal scroll & auto-zoom
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  html,
  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }

  .container,
  .hero-inner,
  section,
  main,
  footer {
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  a,
  span,
  li,
  td,
  th {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  a,
  button,
  input,
  select,
  textarea {
    min-height: 44px;
  }

  img,
  video,
  svg,
  iframe {
    max-width: 100%;
    height: auto;
  }

  .table-wrap,
  .jobs-table-wrap,
  .applications-table-wrap,
  .responsive-table,
  [style*="overflow"] {
    -webkit-overflow-scrolling: touch;
  }

  /* Toast notifications — prevent overflow on small screens */
  .toast-root {
    left: 12px;
    right: 12px;
    bottom: 16px;
  }
  .toast {
    min-width: auto;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ── Ultra-small screens (320px) ──────────────────────────── */
@media (max-width: 360px) {
  html {
    font-size: 14.5px;
  }

  .container,
  .hero-inner {
    padding-left: 10px;
    padding-right: 10px;
  }

  .candidate-auth-card,
  .employer-auth-card {
    padding: 22px 14px;
  }
}