/* ════════════════════════════════════════════════════════════════════
   Mobile optimisations for Kaam Hire — additive layer over ats.css.
   Loaded after the main stylesheet so it wins on specificity.
   ════════════════════════════════════════════════════════════════════ */

/* iOS safe-area + better scrolling */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}
html { -webkit-text-size-adjust: 100%; }
body {
  -webkit-tap-highlight-color: rgba(176, 117, 21, 0.15);
  text-size-adjust: 100%;
}

/* Prevent iOS auto-zoom on input focus — every form input ≥ 16px */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
  input[type="search"], input[type="number"], input[type="url"], input[type="date"],
  textarea, select {
    font-size: 16px !important;
  }
}

/* ────────────────────────────────────────────────────────────────────
   SIDEBAR — mobile open/close behaviour
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sidebar {
    z-index: 1100;
    width: min(86vw, 320px) !important;
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
    transition: transform 0.28s cubic-bezier(.2,.7,.2,1) !important;
  }
  .sidebar.mobile-open { transform: translateX(0) !important; }
  .sidebar.collapsed { /* on mobile, ignore collapsed — only open/closed makes sense */
    width: min(86vw, 320px) !important;
    transform: translateX(-100%);
  }
  .sidebar.collapsed.mobile-open { transform: translateX(0) !important; }

  /* Make every collapsed-only rule a no-op on mobile so labels show again */
  .sidebar.collapsed .brand-text,
  .sidebar.collapsed .brand-sub,
  .sidebar.collapsed .nav-section span,
  .sidebar.collapsed .nav-item span,
  .sidebar.collapsed .user-info { display: revert !important; }
  .sidebar.collapsed .nav-group-items { display: revert !important; }
  .sidebar.collapsed .nav-section { justify-content: flex-start !important; padding: 12px 22px 6px !important; }
  .sidebar.collapsed .nav-section::before { display: inline !important; }   /* show the number again */
  .sidebar.collapsed .nav-section .nav-section-icon { display: none !important; }
  .sidebar.collapsed .nav-item { padding: 10px 16px !important; margin: 1px 14px !important; }

  /* Overlay above content, below sidebar */
  .sidebar-overlay {
    position: fixed; inset: 0;
    z-index: 1090;
    background: rgba(14, 11, 7, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* Main content takes full width, no left margin */
  .main-content { margin-left: 0 !important; padding-left: var(--safe-left); padding-right: var(--safe-right); }

  /* The top header pinned at top */
  .top-header {
    padding-top: calc(12px + var(--safe-top));
  }
}

/* ────────────────────────────────────────────────────────────────────
   TOP HEADER — phone-sized
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .top-header {
    padding: 10px 14px;
    gap: 10px;
  }
  .header-search { display: none; }
  .top-header .header-actions { gap: 4px; }
  .sidebar-toggle {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
  }
  .sidebar-toggle i { font-size: 16px; }
}

/* ────────────────────────────────────────────────────────────────────
   PAGE CONTENT padding
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-content { padding: 14px 14px 32px !important; }
}
@media (max-width: 480px) {
  .page-content { padding: 12px 12px 28px !important; }
}

/* ────────────────────────────────────────────────────────────────────
   TOUCH TARGETS — minimum 44×44 per Apple HIG
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .btn-icon, .sidebar-toggle, .cp-action-btn, .cp-back-btn,
  .fbtn, .dash-action-ghost, .dash-action-primary,
  .header-avatar, .user-avatar {
    min-width: 40px;
    min-height: 40px;
  }
  /* Form inputs / selects — comfortable on touch */
  input, select, textarea {
    min-height: 44px;
  }
  /* Nav items larger */
  .sidebar-nav .nav-item { padding: 12px 16px !important; }
}

/* ────────────────────────────────────────────────────────────────────
   TABLES & DATA SURFACES — always horizontally scrollable
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cands-table-wrap,
  .table-responsive,
  .data-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ────────────────────────────────────────────────────────────────────
   MODALS — full-width on phones, no horizontal jitter
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .modal-dialog {
    margin: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }
  .modal-dialog.modal-lg, .modal-dialog.modal-xl {
    max-width: calc(100vw - 24px) !important;
  }
  .modal-content { border-radius: 14px !important; }
  .modal-body { padding: 16px !important; }
}

/* ────────────────────────────────────────────────────────────────────
   FILTER BARS / TOOLBARS — wrap, give scroll on overflow
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cands-filter-bar > div,
  .filter-banner,
  .filter-banner-actions {
    flex-wrap: wrap !important;
  }
  .cands-search-wrap {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    max-width: none !important;
  }
  .cands-filter-select {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
  }
}

/* ────────────────────────────────────────────────────────────────────
   BRAND CARDS / TILES / KPI STRIPS — already responsive in most pages,
   but tighten the dashboard's KPI strip below 600px
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-cell { padding: 14px 14px !important; }
  .kpi-cell-value { font-size: 26px !important; }
  .dash-hero-title { font-size: 30px !important; line-height: 1.08 !important; }
  .dash-hero-sub { font-size: 13px !important; }
}

/* ────────────────────────────────────────────────────────────────────
   CANDIDATE DETAIL HERO — stack on phones
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cp-hero-body { padding: 20px !important; gap: 16px !important; }
  .cp-hero-avatar > div, .cp-hero-avatar > img { width: 88px !important; height: 88px !important; font-size: 32px !important; }
  .cp-hero-name { font-size: 20px !important; }
  .cp-stats-row { gap: 8px !important; }
  .section-grid { display: flex !important; flex-direction: column !important; }
  .cp-tab-bar { overflow-x: auto !important; flex-wrap: nowrap !important; padding-bottom: 4px; }
  .cp-tab { flex-shrink: 0 !important; white-space: nowrap !important; }
}

/* ────────────────────────────────────────────────────────────────────
   BRANDS PAGE — already 1col on phones; tighten typography
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .br-h1   { font-size: clamp(32px, 8vw, 44px) !important; }
  .br-sub  { font-size: 18px !important; }
  .br-stats { flex-direction: column !important; align-items: flex-start !important; padding: 16px 18px !important; }
  .br-stats .stat-sep { display: none !important; }
  .br-card { padding: 22px 18px 18px !important; }
}

/* ────────────────────────────────────────────────────────────────────
   LOGIN — already responsive; just polish hero typography
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .stage-h1 { font-size: clamp(28px, 8vw, 40px) !important; }
  .form-h1  { font-size: clamp(28px, 8vw, 36px) !important; }
}

/* ────────────────────────────────────────────────────────────────────
   GLOBAL — no body horizontal overflow under any circumstance
   ──────────────────────────────────────────────────────────────────── */
body { overflow-x: hidden; }
.main-content, .page-content { max-width: 100%; }

/* ────────────────────────────────────────────────────────────────────
   FOCUS RINGS — visible on keyboard nav, muted on touch
   ──────────────────────────────────────────────────────────────────── */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #B07515;
  outline-offset: 2px;
}