/* RS8 Recruitment - Responsive Hardening V26
   Mobile-first safety layer shared by admin/HR/public applicant screens. */

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }

/* Prevent long names, email addresses, URLs and evidence text from forcing overflow. */
.card, .panel, .modal-content, .dropdown-menu, .table-responsive,
.premium-page-header, .premium-header-actions, .admin-topbar,
.ai-shell, .rank-card, .compare-controls, .application-summary,
.notification-item-content, #main, #main > * {
    min-width: 0;
}

.text-break-mobile,
.candidate-name, .candidate-meta, .qualification-evidence-text,
.compare-detail, .compare-secondary, .applicant-name, .applicant-meta,
.form-label, .field-help, .backend-error {
    overflow-wrap: anywhere;
    word-break: normal;
}

.table-responsive {
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.modal-dialog { max-width: calc(100vw - 24px); }
.modal-content { overflow: hidden; }

@media (max-width: 1199.98px) {
    #main { min-width: 0; }
    .container, .container-fluid { max-width: 100%; }
}

@media (max-width: 991.98px) {
    /* Admin/HR top level spacing */
    #main { padding-left: 1rem !important; padding-right: 1rem !important; }
    .page-heading, .premium-page-header { gap: 12px; }
    .premium-header-actions { width: 100%; }

    /* Dashboard blocks should stack instead of squeezing. */
    .welcome-panel { align-items: flex-start; flex-direction: column; }
    .welcome-date { white-space: normal; }

    /* Generic form grids */
    .row > [class*="col-lg-"] { min-width: 0; }

    /* Assessment Insights */
    .ai-hero .row > [class*="col-lg-"] { width: 100%; }
    .ai-select { width: 100% !important; min-width: 0 !important; }
    .qualification-compare-grid {
        min-width: 820px;
    }
    .qualification-breakdown {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .compare-controls .row > [class*="col-"] { min-width: 0; }

    /* Prevent fixed-width admin filter rows from overflowing. */
    .filter-grid, .toolbar-grid, .stats-grid, .summary-grid {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    #main { padding-left: .75rem !important; padding-right: .75rem !important; }

    h1 { font-size: clamp(1.45rem, 7vw, 2rem); }
    h2 { font-size: clamp(1.25rem, 6vw, 1.75rem); }

    .premium-page-header { align-items: stretch !important; }
    .premium-header-actions {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .premium-header-actions > * { width: 100%; }

    .admin-topbar { gap: 8px; }
    .admin-profile { min-width: 0; }
    .admin-profile .profile-copy { min-width: 0; }

    /* Cards/modals */
    .card-body { min-width: 0; }
    .modal-dialog {
        margin: .5rem auto;
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
    }
    .modal-header, .modal-body, .modal-footer { padding-left: 14px; padding-right: 14px; }
    .modal-footer { gap: 8px; }
    .modal-footer .btn { flex: 1 1 auto; }

    /* DataTables and other admin tables stay usable through controlled horizontal scroll. */
    .dataTables_wrapper { width: 100%; overflow: hidden; }
    .dataTables_wrapper .row { --bs-gutter-x: .75rem; }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter { text-align: left !important; }
    .dataTables_wrapper .dataTables_filter input { width: min(100%, 260px); margin-left: 0 !important; }
    .table-responsive { border-radius: 12px; }

    /* Assessment ranking cards become vertically readable. */
    .rank-card .row > [class*="col-"] { width: 100%; }
    .rank-signals, .score-side { margin-top: 12px; }
    .score-side { justify-content: flex-start !important; }
    .ai-diag { align-items: flex-start; }
    .ai-trace { max-width: 100%; }
    .ai-trace-grid { grid-template-columns: 1fr; }

    /* Comparison controls stack on phones. */
    .compare-controls .row { gap: 8px; }
    .compare-controls .row > [class*="col-"] { width: 100%; }
    .compare-controls .btn { width: 100%; }
    .compare-table { min-width: 860px !important; }

    /* Keep wide comparison factual matrix scrollable instead of shrinking to unreadable text. */
    .qualification-breakdown { margin-left: -4px; margin-right: -4px; padding-left: 4px; padding-right: 4px; }
    .qualification-compare-grid { min-width: 760px; }

    .notification-menu { width: calc(100vw - 16px) !important; }
}

@media (max-width: 575.98px) {
    #main { padding-left: .5rem !important; padding-right: .5rem !important; }

    .btn, .form-control, .form-select { min-height: 44px; }
    textarea.form-control { min-height: 110px; }

    .premium-secondary-btn, .premium-primary-btn { width: 100%; }

    .ai-tabs { display: grid !important; grid-template-columns: 1fr; width: 100% !important; }
    .ai-tabs .nav-item, .ai-tabs .nav-link { width: 100%; }
    .ai-hero { border-radius: 16px !important; }
    .panel, .rank-card { border-radius: 14px !important; }

    .metric .n { font-size: 22px !important; }
    .readiness { min-height: 0; }

    /* Small-screen tables: controls remain accessible. */
    .pagination { flex-wrap: wrap; gap: 3px; }
    .page-link { padding: .45rem .65rem; }
}

/* Public applicant screens */
@media (max-width: 991.98px) {
    .public-main { width: 100%; max-width: 100% !important; }
    .employment-shell { width: 100%; max-width: 100%; }
    .application-main { width: 100%; min-width: 0; }

    .application-sidebar {
        position: relative;
        width: 100%;
    }
    .sidebar-progress-title strong,
    .sidebar-progress-title small { overflow-wrap: anywhere; }

    .step-navigation {
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
    }
    .step-nav-item { scroll-snap-align: start; }

    .application-job-context,
    .application-hero,
    .application-card { max-width: 100%; }
}

@media (max-width: 575.98px) {
    .app-header { position: sticky; top: 0; }
    .app-header.py-3 { padding-top: .65rem !important; padding-bottom: .65rem !important; }
    .app-header .container { gap: 8px !important; }
    .brand-logo { width: 120px !important; height: 38px !important; }

    .employment-shell {
        min-height: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .application-sidebar { padding: 14px 12px !important; }
    .sidebar-progress-title { padding-bottom: 12px !important; }
    .sidebar-progress-title small { display: none !important; }
    .progress-summary { margin: 12px 0 !important; }

    .step-navigation {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }
    .step-nav-item {
        min-width: 0 !important;
        width: 100% !important;
        padding: 8px !important;
        gap: 7px !important;
        border-color: rgba(255,255,255,.08);
        background: rgba(255,255,255,.025);
    }
    .step-nav-number {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
    }
    .step-nav-item strong { font-size: 10px !important; line-height: 1.2; }
    .step-nav-item small { display: none !important; }

    .application-hero { padding: 20px 16px !important; gap: 10px !important; }
    .application-hero h1 { font-size: 23px !important; line-height: 1.12; }
    .application-hero p { font-size: 12px; line-height: 1.45; }

    .application-job-context {
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px !important;
        padding: 12px 14px !important;
    }
    .selected-job-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
    .change-job-link {
        grid-column: 1 / -1;
        width: 100% !important;
        margin-left: 0 !important;
    }

    .application-card { padding: 18px 14px !important; min-height: 0 !important; }
    .step-header { margin-bottom: 18px !important; padding-bottom: 14px !important; }
    .step-header h2 { font-size: 21px !important; line-height: 1.18; }
    .step-header p { font-size: 12px; }

    /* Bootstrap columns inside the application are one-column on phones. */
    .application-card .row > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .premium-field { margin-bottom: 2px; }
    .form-label { font-size: 12px !important; }
    .form-control, .form-select {
        width: 100%;
        min-height: 48px !important;
        font-size: 16px !important; /* prevents iOS input zoom */
        border-radius: 11px !important;
    }
    textarea.form-control { min-height: 120px !important; }

    .choice-grid { grid-template-columns: 1fr !important; }
    .choice-card { width: 100%; }
    .upload-zone { padding: 18px 12px !important; }

    .credential-record-header,
    .employment-record-header,
    .acknowledgement-box {
        align-items: flex-start !important;
        flex-direction: column;
    }

    .review-panel { padding: 20px 12px !important; }
    .review-checklist { grid-template-columns: 1fr !important; }

    .step-actions {
        position: sticky;
        bottom: 0;
        z-index: 12;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 22px -14px -18px !important;
        padding: 12px 14px max(12px, env(safe-area-inset-bottom)) !important;
        border-top: 1px solid #e2e7ee !important;
        background: rgba(248,250,252,.97);
        box-shadow: 0 -8px 20px rgba(15,23,42,.06);
        backdrop-filter: blur(10px);
    }
    .step-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px;
    }
}

@media (max-width: 359.98px) {
    .step-navigation { grid-template-columns: 1fr; }
    .brand-logo { width: 108px !important; }
}