/* Shared employer layout contract. Loaded after each page's styles. */
.employer-layout .dashboard-wrap,
.dashboard-wrap.candidate-dashboard-page,
.employer-layout .candidate-dashboard-page {
    width: 100%;
    min-width: 0;
    padding-top: 85px !important;
}
.employer-layout .dashboard-content {
    flex: 1 1 0%;
    min-width: 0;
}
.employer-layout :is(.card, .card-body, .dashboard-widg-bar, .row > *, .d-flex > *, .rs-candidate-body > *) {
    min-width: 0;
}
.employer-layout :is(.table-responsive, [class$="-table-wrap"], .employer-table-scroll) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
.employer-layout .employer-table-scroll { width: 100%; }
.employer-layout :is(.form-control, .form-select, .input-group, .select2-container, .note-editor) { max-width: 100%; }
.employer-layout :is(.card, .dashboard-content, .modal-body) :is(h1, h2, h3, h4, h5, h6, p, label) { overflow-wrap: anywhere; }
.employer-layout .dashboard-content :is(img, video, canvas) { max-width: 100%; }
.employer-layout .dashboard-content pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.employer-layout .current-company-card :is(.company-card-subtitle, .company-card-title) { overflow-wrap: anywhere; }
.employer-layout .current-company-select-wrap { min-width: 0; max-width: 100%; }
.employer-layout .pagination { flex-wrap: wrap; gap: 4px; }
.employer-layout .modal-dialog { max-width: calc(100% - 24px); }
.employer-layout .modal-dialog.modal-lg { max-width: min(800px, calc(100% - 24px)); }
.employer-layout .modal-dialog.modal-xl { max-width: min(1140px, calc(100% - 24px)); }
.employer-layout .modal-dialog:not(.modal-lg):not(.modal-xl):not(.modal-fullscreen) { max-width: min(500px, calc(100% - 24px)); }
.employer-layout :is(.modal-header, .modal-footer) { gap: 8px; }

/* Job Vacancy Card & Pipeline Stats Contract */
.employer-layout .erp-vacancy-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.employer-layout .erp-pipeline-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
    padding: 10px 0 6px 0 !important;
}
.employer-layout .erp-pipeline-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    z-index: 2 !important;
    flex: 1 1 0 !important;
    min-width: 44px !important;
    max-width: 85px !important;
    text-align: center !important;
}
.employer-layout .erp-pipeline-circle {
    flex-shrink: 0 !important;
}
.employer-layout .erp-pipeline-label {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
}

/* The dashboard's established sidebar breakpoint is 900px. */
@media (max-width: 900px) {
    .employer-layout .dashboard-wrap,
    .dashboard-wrap.candidate-dashboard-page,
    .employer-layout .candidate-dashboard-page {
        overflow-x: visible !important;
        padding-top: 85px !important;
    }
    .employer-layout .dashboard-wrap > .dashboard-content {
        flex: 0 0 100%;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding: 16px 12px !important;
    }
    .employer-layout .dashboard-wrap > #MobNav { width: 100%; min-width: 0; }
    .employer-layout #MobNav .dashboard-nav {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 65vh;
        overflow-y: auto;
    }
    .employer-layout .dashboard-content > .container-fluid { padding-inline: 0; }
    .employer-layout :is(.jr-folder-panel, .rs-filter-sidebar) { position: static; }

    .employer-layout .erp-pipeline-row {
        gap: 4px !important;
        padding: 10px 0 6px 0 !important;
    }
    .employer-layout .erp-pipeline-item {
        min-width: 48px !important;
        max-width: 78px !important;
    }
    .employer-layout .erp-pipeline-circle {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }
    .employer-layout .erp-pipeline-line {
        margin: 0 4px !important;
        margin-top: 15px !important;
        min-width: 6px !important;
    }
    .employer-layout .erp-pipeline-label {
        font-size: 10.5px !important;
        line-height: 1.15 !important;
    }
}

@media (max-width: 767.98px) {
    .employer-layout .dashboard-wrap,
    .dashboard-wrap.candidate-dashboard-page,
    .employer-layout .candidate-dashboard-page {
        padding-top: 85px !important;
    }
    .employer-layout .dashboard-content :is(.card-body, .card-header, .erp-card-body) { padding: 14px !important; }
    .employer-layout .dashboard-content :is(.d-flex, .d-inline-flex):not(.input-group):not(.employer-keep-row) { flex-wrap: wrap; }
    .employer-layout .dashboard-content :is(.btn, [class*="action-btn"], [class^="btn-action"]) {
        max-width: 100%;
        min-height: 36px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .employer-layout :is(.form-control, .form-select) { min-width: 0; }
    .employer-layout input:is([type="date"], [type="datetime-local"], [type="time"]) { width: 100%; min-width: 0; }
    .employer-layout .dashboard-content :is(.badge, [class*="-badge"]) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    .employer-layout :is(.current-company-card, .current-company-select-wrap, .current-company-select-wrap form) { width: 100%; }
    .employer-layout #employerCompanySelect { width: 100% !important; min-width: 0 !important; }
    .employer-layout .current-company-card > .d-flex > .d-flex { flex-wrap: wrap; }
    .employer-layout :is(.permission-title, .permission-item) { gap: 8px; overflow-wrap: anywhere; }
    .employer-layout .permission-title { flex-wrap: wrap; }
    .employer-layout .permission-item input { flex-shrink: 0; }
    .employer-layout :is(.sub-user-search-wrap, .profile-meter-box) { min-width: 0 !important; max-width: 100% !important; }
    .employer-layout .rs-candidate-body { grid-template-columns: minmax(0, 1fr) !important; }
    .employer-layout :is(.rs-candidate-title-bar, .jr-card-actions, .jr-toolbar, .jr-actions) { flex-wrap: wrap; gap: 8px; }
    .employer-layout .jr-card-heading { flex-basis: 100%; }
    .employer-layout .jr-card-meta { padding-left: 0; }
    .employer-layout :is(.jr-toolbar, .jr-actions) .form-select { max-width: 100%; }
    .employer-layout .jr-actions #jrMoveTo { flex: 1 1 150px !important; width: auto !important; }
    .employer-layout .rs-cand-skills { overflow-wrap: anywhere; }
    .employer-layout .modal-dialog { margin: 12px auto; }
    .employer-layout .modal-body { padding: 14px !important; overflow-wrap: anywhere; }
    .employer-layout .modal-footer { flex-wrap: wrap; }
    .employer-layout .modal-footer .btn { white-space: normal; }
    .employer-layout #back2Top { right: 12px; bottom: 16px; }

    /* Pipeline stats on mobile */
    .employer-layout .erp-pipeline-row {
        gap: 3px !important;
        padding: 8px 0 4px 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
    }
    .employer-layout .erp-pipeline-item {
        min-width: 46px !important;
        max-width: 68px !important;
    }
    .employer-layout .erp-pipeline-circle {
        width: 30px !important;
        height: 30px !important;
        font-size: 11.5px !important;
        margin-bottom: 4px !important;
    }
    .employer-layout .erp-pipeline-line {
        margin: 0 3px !important;
        margin-top: 14px !important;
        min-width: 4px !important;
    }
    .employer-layout .erp-pipeline-label {
        font-size: 9.5px !important;
        line-height: 1.1 !important;
    }

    /* Only simple, explicitly marked record tables become mobile cards. */
    .employer-layout .employer-table-cards,
    .employer-layout .employer-table-cards > tbody { display: block; width: 100% !important; min-width: 0 !important; }
    .employer-layout .employer-table-cards > thead {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .employer-layout .employer-table-cards > tbody > .employer-record-row {
        display: block; padding: 12px; border-bottom: 1px solid #e2e8f0;
    }
    .employer-layout .employer-table-cards > tbody > .employer-record-row > td {
        display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 4px;
        width: 100% !important; min-width: 0 !important; max-width: 100%;
        padding: 7px 0 !important; border: 0; text-align: left !important;
        white-space: normal !important; overflow-wrap: anywhere;
    }
    .employer-layout .employer-table-cards td[data-employer-label]::before {
        content: attr(data-employer-label); font-size: 11px; font-weight: 600; color: #64748b;
    }
    .employer-layout .employer-table-cards td[data-employer-label=""]::before { display: none; }
    .employer-layout .employer-cell-value { min-width: 0; max-width: 100%; }
    .employer-layout .employer-cell-value > :is(.d-flex, .d-inline-flex) { justify-content: flex-start !important; }
    .employer-layout .employer-cell-value .interview-actions { display: flex !important; flex-wrap: wrap; justify-content: flex-start !important; }
    .employer-layout .employer-table-cards .employer-record-row > td::after { content: none; }
    .employer-layout .employer-table-cards .employer-record-row > td::before { text-align: left; }
    .employer-layout .employer-table-cards > tbody > tr:not(.employer-record-row) > td[colspan] { display: block; width: 100%; }
}

@media (max-width: 575.98px) {
    .employer-layout .dashboard-wrap,
    .dashboard-wrap.candidate-dashboard-page,
    .employer-layout .candidate-dashboard-page {
        padding-top: 85px !important;
    }
    .employer-layout .erp-vacancy-item {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .employer-layout .erp-pipeline-row {
        gap: 2px !important;
        padding: 6px 0 3px 0 !important;
    }
    .employer-layout .erp-pipeline-item {
        min-width: 44px !important;
        max-width: 60px !important;
    }
    .employer-layout .erp-pipeline-circle {
        width: 27px !important;
        height: 27px !important;
        font-size: 11px !important;
        margin-bottom: 3px !important;
    }
    .employer-layout .erp-pipeline-line {
        margin: 0 1px !important;
        margin-top: 12.5px !important;
        min-width: 2px !important;
    }
    .employer-layout .erp-pipeline-label {
        font-size: 9px !important;
        line-height: 1.05 !important;
    }
}

@media (max-width: 374.98px) {
    .employer-layout .dashboard-wrap > .dashboard-content { padding: 10px 4px !important; }
    .employer-layout .dashboard-content :is(.card-body, .card-header, .erp-card-body) { padding: 8px !important; }
    .employer-layout .dashboard-content .btn { font-size: 11px; }
    .employer-layout .erp-pipeline-row {
        gap: 1px !important;
    }
    .employer-layout .erp-pipeline-item {
        min-width: 40px !important;
        max-width: 54px !important;
    }
    .employer-layout .erp-pipeline-circle {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }
    .employer-layout .erp-pipeline-line {
        margin-top: 11px !important;
    }
    .employer-layout .erp-pipeline-label {
        font-size: 8px !important;
        line-height: 1 !important;
    }
}