/* ==========================================================================
   KNQA Careers — phone & tablet layout
   Page styles live in each page's <style> block (loaded after this file), so
   rules are prefixed with #knqa-app (signed-in pages) or #knqa-public
   (sign-in / register) to win on specificity.
   ========================================================================== */

/* ── Sign-in, register, forgot password ───────────────────────────────────── */
@media (max-width: 900px) {
    #knqa-public .auth-root { width: 100%; flex-direction: column; }
    #knqa-public .brand-side { display: none; }               /* decorative panel */
    #knqa-public .auth-side { width: 100%; min-height: 100vh; min-height: 100dvh; }
}
@media (max-width: 600px) {
    #knqa-public .auth-nav { padding: 12px 16px; }
    #knqa-public .an-links { gap: 14px; font-size: 13px; }
    #knqa-public .auth-frame { padding: 20px 16px 16px; }
    #knqa-public .form-pane { max-width: 100%; }
    #knqa-public .frow-2,
    #knqa-public .fld-row { grid-template-columns: 1fr !important; flex-wrap: wrap; }
    #knqa-public .fin--otp,
    #knqa-public .otp-f input { font-size: 20px; }
    #knqa-public input:not([type=checkbox]):not([type=radio]),
    #knqa-public select,
    #knqa-public textarea { font-size: 16px; }              /* stops iOS zoom */
    #knqa-public .knqa-announce { margin: 8px; }
}

/* ── Signed-in pages ──────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    #knqa-app .content-grid,
    #knqa-app .details-grid,
    #knqa-app .profile-grid,
    #knqa-app .applications-grid,
    #knqa-app .documents-grid { grid-template-columns: 1fr !important; }
    #knqa-app .sidebar-content { position: static !important; }
}

@media (max-width: 768px) {
    #knqa-app .mud-container { padding: 12px !important; }

    /* Hero banners */
    #knqa-app .hero-section,
    #knqa-app .applications-hero,
    #knqa-app .docs-hero,
    #knqa-app .knqa-hero { padding: 22px 16px !important; border-radius: 14px; }
    #knqa-app .hero-content { max-width: 100%; }
    #knqa-app .hero-title,
    #knqa-app .hero-content h1 { font-size: 1.4rem !important; line-height: 1.3; }
    #knqa-app .hero-stats { width: 100%; padding: 14px 16px; gap: 12px; flex-wrap: wrap; justify-content: space-around; }
    #knqa-app .hero-meta { flex-wrap: wrap; gap: 6px 10px; }
    #knqa-app .hero-meta-divider { display: none; }

    /* Filters & toolbars */
    #knqa-app .filters-bar,
    #knqa-app .filter-group,
    #knqa-app .action-buttons,
    #knqa-app .form-actions,
    #knqa-app .status-header { flex-wrap: wrap; gap: 8px; }
    #knqa-app .filters-bar { padding: 12px; }
    #knqa-app .filter-select { flex: 1 1 calc(50% - 8px); min-width: 0; }

    /* Vacancy & application cards */
    #knqa-app .cards-grid,
    #knqa-app .doc-grid,
    #knqa-app .applications-grid { grid-template-columns: 1fr !important; gap: 14px; }
    #knqa-app .card-footer { flex-wrap: wrap; gap: 8px; }
    #knqa-app .card-footer > button,
    #knqa-app .card-footer > a { flex: 1 1 auto; justify-content: center; }

    /* Detail pages */
    #knqa-app .info-card { grid-template-columns: 1fr !important; }
    #knqa-app .info-grid,
    #knqa-app .form-grid { grid-template-columns: 1fr !important; }
    #knqa-app .info-row,
    #knqa-app .detail-row,
    #knqa-app .summary-row { flex-wrap: wrap; gap: 4px 12px; }
    #knqa-app .timeline-horizontal { overflow-x: auto; padding-bottom: 6px; }
    #knqa-app .timeline-step { min-width: 76px; }

    /* Apply / confirmation modals: near full-screen sheets */
    #knqa-app .modal-overlay,
    #knqa-app .knqa-modal-backdrop { padding: 0 !important; align-items: flex-end !important; }
    #knqa-app .modal-container,
    #knqa-app .modal-small,
    #knqa-app .knqa-modal,
    #knqa-app .add-doc-box,
    #knqa-app .confirm-box {
        width: 100% !important; max-width: 100% !important;
        max-height: 94vh; max-height: 94dvh;
        border-radius: 18px 18px 0 0 !important;
        overflow-y: auto;
    }
    #knqa-app .modal-header,
    #knqa-app .knqa-modal-header,
    #knqa-app .add-doc-header { padding: 16px !important; gap: 10px; }
    #knqa-app .modal-header h2 { font-size: 1.1rem; }
    #knqa-app .modal-body,
    #knqa-app .knqa-modal-body,
    #knqa-app .add-doc-body { padding: 16px !important; }
    #knqa-app .modal-footer,
    #knqa-app .knqa-modal-footer,
    #knqa-app .add-doc-footer,
    #knqa-app .confirm-actions {
        padding: 12px 16px !important; flex-wrap: wrap; gap: 8px;
        position: sticky; bottom: 0; background: #fff; z-index: 2;
    }
    #knqa-app .modal-footer > button,
    #knqa-app .knqa-modal-footer > button,
    #knqa-app .confirm-actions > button { flex: 1 1 auto; }

    /* Apply-wizard steps: numbers only */
    #knqa-app .steps { padding: 14px 12px !important; overflow-x: auto; }
    #knqa-app .step-label { display: none; }
    #knqa-app .step-line { min-width: 12px; }

    /* Document rows in the apply wizard */
    #knqa-app .document-row,
    #knqa-app .existing-doc-item,
    #knqa-app .document-item,
    #knqa-app .document-card { flex-wrap: wrap; gap: 8px; }
    #knqa-app .doc-info { min-width: 0; flex: 1 1 60%; }
    #knqa-app .doc-filename,
    #knqa-app .doc-name { overflow-wrap: anywhere; }

    /* Profile */
    #knqa-app .avatar-card { flex-direction: column; text-align: center; }
    #knqa-app .form-header { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 480px) {
    #knqa-app .filter-select { flex-basis: 100%; }
    #knqa-app .hero-stats { justify-content: space-between; }
    #knqa-app .hstat-div { display: none; }
    #knqa-app input:not([type=checkbox]):not([type=radio]),
    #knqa-app select,
    #knqa-app textarea { font-size: 16px; }               /* stops iOS zoom */
}

/* Toasts / snackbars stay inside the screen */
@media (max-width: 600px) {
    .mud-snackbar-location-bottom-right,
    .mud-snackbar-location-top-right { left: 8px !important; right: 8px !important; }
    .mud-snackbar { min-width: 0 !important; width: 100%; }
}