/* Mobile responsive fixes layered on top of the existing stylesheets.
Loaded last so these rules win where they overlap. */

/* --- generic dialog: bottom-sheet on narrow screens ---------------------- */
@media (max-width: 640px) {
  dialog.cred-dialog, dialog.rb-dialog, dialog.exc-dialog, dialog.cap-dialog, dialog#record-dialog, dialog#search-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    position: fixed !important;
    inset: auto 0 0 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh !important;
    overflow-y: auto;
    animation: tzSheetUp .22s cubic-bezier(.22,.61,.36,1);
  }
  @keyframes tzSheetUp { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }
  .cred-form, .rb-form, .exc-form, .cap-form { padding: 20px 18px 24px !important; }
  .dialog-actions { position: sticky; bottom: 0; background: #fff; padding: 10px 0; margin: 10px -4px 0; }
}

/* --- credentials UI ------------------------------------------------------- */
@media (max-width: 720px) {
  .cred-toolbar { gap: 10px; }
  .cred-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .cred-row-actions { justify-content: flex-start; width: 100%; }
  .cred-row-actions .button { flex: 1; min-width: 0; }
  .cred-detail-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .cred-history li { padding: 10px 12px; }
}

/* --- role board ---------------------------------------------------------- */
@media (max-width: 900px) {
  .rb-requests { grid-template-columns: 1fr; }
  .rb-card-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .rb-card-stats div { padding: 7px 8px; }
  .rb-req-panel { grid-template-columns: 1fr; }
  .rb-cand-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .rb-progress { min-width: 0; width: 100%; }
  .rb-cand-body { grid-template-columns: 1fr; gap: 12px; }
  .rb-actions-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rb-action { flex-direction: column; align-items: stretch; }
  .rb-action-buttons { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .rb-card-stats { grid-template-columns: repeat(2, 1fr); }
  .rb-chips { font-size: 12px; }
  .rb-cred-list li { flex-wrap: wrap; }
}

/* --- exceptions --------------------------------------------------------- */
@media (max-width: 620px) {
  .exc-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .exc-state-wrap { align-self: flex-start; }
  .exc-meta { flex-direction: column; gap: 4px; font-size: 12.5px; }
  .exc-actions { flex-direction: column; align-items: stretch; }
  .exc-actions .button { width: 100%; justify-content: center; }
  .exc-filter-group { width: 100%; overflow-x: auto; }
  .exc-tab { flex-shrink: 0; }
}

/* --- economy block inside role-board ------------------------------------ */
@media (max-width: 580px) {
  .rb-economy { padding: 14px 16px; }
  .rb-econ-grid { grid-template-columns: repeat(2, 1fr); }
  .rb-econ-cell strong { font-size: 0.98rem; }
  .rb-econ-cell small { font-size: 10.5px; }
}

/* --- improve touch targets everywhere --------------------------------- */
@media (max-width: 760px) {
  .button, button.btn, .nav-item, .exc-tab, .cred-row-actions .button {
    min-height: 42px;
  }
  /* Larger tap area for inline chip-style buttons */
  .button.tiny, .button.small.tiny { min-height: 32px; padding: 7px 11px; }
  /* Prevent horizontal scroll in dense panels */
  .panel, .panel-mock, .mock { overflow-x: auto; }
}

/* --- settings page: single column on mobile --------------------------- */
@media (max-width: 760px) {
  .settings-grid { grid-template-columns: 1fr; gap: 14px; }
  .toggle-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .toggle-row > span { max-width: 100%; }
}

/* --- navigation sidebar: hamburger-only below 760 (already handled, but ensure overlay) */
@media (max-width: 760px) {
  body:has(.sidebar.open)::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(13, 14, 18, 0.4);
    z-index: 60;
    animation: tzFadeIn .18s ease;
  }
  @keyframes tzFadeIn { from { opacity: 0 } to { opacity: 1 } }
  .sidebar { z-index: 70; }
}

/* --- improve form inputs on mobile ----------------------------------- */
@media (max-width: 640px) {
  .field input, .field select, .field textarea,
  .cred-fields input, .cred-fields select, .cred-fields textarea,
  .rb-fields input, .rb-fields select, .rb-fields textarea,
  .exc-fields input, .exc-fields select, .exc-fields textarea {
    font-size: 16px;  /* prevents iOS auto-zoom */
    padding: 12px 12px;
  }
}

/* --- responsive mock dashboard preview on homepage ------------------- */
@media (max-width: 720px) {
  .mock-cand { grid-template-columns: 1fr !important; }
  .mc-prog { max-width: none !important; width: 100%; }
  .mc-prog .bar { width: 100%; }
}

/* --- toast bottom placement on narrow screens ------------------------ */
@media (max-width: 760px) {
  #toast {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    transform: none !important;
    max-width: none;
  }
}

/* --- avoid double-tap zoom on buttons / dialog actions --------------- */
button, .button, [role="button"], [data-cap-close], [data-rb-close], [data-cred-close], [data-exc-close] {
  touch-action: manipulation;
}

/* --- make sure palette is above all mobile sheets -------------------- */
.tz-palette, .tz-ob-banner { z-index: 10000 !important; }

/* ============================================================
   Mobile responsive (iOS + Android, 320-800px)
   Audit 2026-11-01: Overview, People&talent, Staffing, Settings
   overflowed at 390px. Sidebar occupied too much width.
   This block fixes the full workspace shell for mobile.
   ============================================================ */

/* --- Hamburger button visible only on mobile ----------------------------- */
.mobile-menu { display: none !important; }
@media (max-width: 800px) {
  .mobile-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important; height: 40px !important;
    border: 1px solid var(--line, #eaeaf0) !important;
    border-radius: 8px !important;
    background: #fff !important;
    cursor: pointer !important;
  }
  .mobile-menu::before {
    content: '' !important;
    width: 18px !important; height: 12px !important;
    background:
      linear-gradient(#344054, #344054) top/100% 2px no-repeat,
      linear-gradient(#344054, #344054) center/100% 2px no-repeat,
      linear-gradient(#344054, #344054) bottom/100% 2px no-repeat !important;
  }
}

/* --- Sidebar off-canvas drawer below 800px -------------------------------- */
@media (max-width: 800px) {
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    transform: translateX(-100%) !important;
    transition: transform 0.22s cubic-bezier(.22,.61,.36,1) !important;
    z-index: 100 !important;
    box-shadow: 0 0 40px rgba(0,0,0,0.3) !important;
    overflow-y: auto !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 20px) !important;
  }
  .sidebar.open { transform: translateX(0) !important; }
  .main-shell { margin-left: 0 !important; }
  .nav-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(13,14,18,0.5) !important;
    z-index: 99 !important;
    border: 0 !important;
    cursor: pointer !important;
    padding: 0 !important;
  }
  .nav-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
    right: 16px !important;
    width: 36px !important; height: 36px !important;
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    cursor: pointer !important;
  }
  .nav-close svg { width: 22px !important; height: 22px !important; }
}

/* --- Topbar compact on mobile --------------------------------------------- */
@media (max-width: 800px) {
  .topbar {
    height: auto !important;
    min-height: 56px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 14px 8px 14px !important;
    gap: 10px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
  }
  .breadcrumb {
    font-size: 13px !important;
    gap: 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex: 1 !important;
  }
  .breadcrumb > span:first-of-type { display: none !important; }
  .breadcrumb .crumb-slash { display: none !important; }
  .top-actions { gap: 8px !important; flex-shrink: 0 !important; }
  .search-trigger span:not(:first-child) { display: none !important; }
  .search-trigger kbd { display: none !important; }
  .search-trigger { min-width: 0 !important; padding: 8px !important; }
  #lang-switch { display: none !important; } /* language in sidebar instead on mobile */
  .workspace-role { display: none !important; }
  .top-help { padding: 6px 8px !important; font-size: 11px !important; }
  .top-help span { display: none !important; }
}

/* --- Main content full width + compact padding --------------------------- */
@media (max-width: 800px) {
  main {
    padding: 18px 14px calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .page-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
  }
  h1 { font-size: 22px !important; line-height: 1.3 !important; letter-spacing: -0.5px !important; }
  .page-heading p { font-size: 13px !important; }
  .heading-actions { width: 100% !important; }
  .heading-actions .button { flex: 1 !important; justify-content: center !important; }
}

/* --- Hero: single column on mobile, lose decorative art ------------------- */
@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    margin-bottom: 18px !important;
  }
  .hero-content { padding: 20px 18px !important; }
  .hero h2 { font-size: 22px !important; line-height: 1.3 !important; margin: 10px 0 8px !important; }
  .hero p { font-size: 12px !important; max-width: 100% !important; }
  .hero-art { display: none !important; }
}

/* --- Stats 4-up → 2-up on mobile ----------------------------------------- */
@media (max-width: 800px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .stat { padding: 14px !important; }
  .stat-value { font-size: 22px !important; letter-spacing: -0.5px !important; }
  .stat-top { font-size: 10.5px !important; }
}
@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr !important; }
}

/* --- Dashboard grid: stack --------------------------------------------- */
@media (max-width: 800px) {
  .dashboard-grid, .dashboard-layout, .journey-layout, .chat-layout,
  .settings-grid, .support-layout, .help-layout, .experience-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .right-column, .dashboard-aside, aside { min-width: 0 !important; }
}

/* --- Panel padding reduced ---------------------------------------------- */
@media (max-width: 800px) {
  .panel-header, .panel-head { padding: 14px 16px !important; }
  .panel-title, .panel-head h2 { font-size: 14px !important; }
  .panel-body { padding: 14px 16px !important; }
}

/* --- Tables: horizontal scroll wrapper + card view fallback ------------- */
@media (max-width: 800px) {
  .table-wrap, .data-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100vw !important;
  }
  .record-table, .data-table {
    min-width: 560px !important;
    font-size: 12px !important;
  }
  .record-table th, .data-table th { padding: 10px 12px !important; }
  .record-table td, .data-table td { padding: 12px !important; }
  .person-cell { min-width: 0 !important; }
}

/* --- Toolbar filter group: stack --------------------------------------- */
@media (max-width: 800px) {
  .toolbar, .filter-group, .staff-filters {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .filter-input, .filter-select {
    min-width: 0 !important; width: 100% !important;
  }
}

/* --- Cards grid: 1 column ---------------------------------------------- */
@media (max-width: 800px) {
  .cards-grid { grid-template-columns: 1fr !important; }
}

/* --- AI workflow grid + Hub cards --------------------------------------- */
@media (max-width: 800px) {
  .ai-workflow-grid, .hub-cards { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* --- Dialog bottom-sheet on narrow screens ------------------------------ */
@media (max-width: 640px) {
  dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    position: fixed !important;
    inset: auto 0 0 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
  }
  .dialog-heading { padding: 16px 18px !important; }
  .dialog-heading h2 { font-size: 18px !important; }
  .dialog-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 18px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  }
  .dialog-actions .button { flex: 1 !important; min-width: 110px !important; }
}

/* --- iOS zoom prevention: all inputs >= 16px -------------------------- */
@media (max-width: 800px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* --- Touch target minimum 44px (iOS HIG + Material) -------------------- */
@media (max-width: 800px) {
  .button, button.btn, .nav-item, .icon-button, a.text-button {
    min-height: 44px !important;
  }
  .button.small { min-height: 36px !important; }
}

/* --- Auth / login screen responsive ------------------------------------ */
@media (max-width: 800px) {
  .auth-layout { grid-template-columns: 1fr !important; min-height: 100dvh !important; }
  .auth-story {
    padding: 24px 20px !important;
    min-height: auto !important;
    text-align: center !important;
  }
  .auth-story h1 { font-size: 28px !important; line-height: 1.2 !important; margin: 16px 0 !important; }
  .auth-form-panel {
    padding: 28px 20px calc(env(safe-area-inset-bottom, 0px) + 28px) !important;
    max-width: 100% !important;
  }
}

/* --- Chat view: full-screen conversation on mobile --------------------- */
@media (max-width: 800px) {
  .chat-panel { border-radius: 0 !important; margin: 0 -14px !important; }
  .chat-messages { max-height: 50dvh !important; padding: 14px !important; }
  .chat-message { margin-right: 10px !important; padding: 12px 14px !important; }
  .chat-message.user { margin-left: 10px !important; }
  .chat-composer { padding: 14px !important; }
  .chat-controls { flex-wrap: wrap !important; }
}

/* --- Accessibility toolbar on mobile: bottom sheet ---------------------- */
@media (max-width: 800px) {
  .a11y-toolbar {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px 18px calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
    max-height: 70dvh !important;
    overflow-y: auto !important;
  }
  .a11y-floating-launch {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    right: 16px !important;
  }
}

/* --- App footer: reduce padding on mobile ------------------------------ */
@media (max-width: 800px) {
  .app-footer {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 16px 14px calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    text-align: center !important;
  }
}

/* --- Toast: respect safe area ------------------------------------------ */
@media (max-width: 800px) {
  #toast {
    left: 14px !important;
    right: 14px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
    transform: translateY(0) !important;
    max-width: none !important;
  }
}

/* --- Prevent horizontal scroll on entire body -------------------------- */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
.app-shell {
  min-width: 0;
  max-width: 100vw;
}