/* ============================================================
   CANDIDATE EDITOR
   ============================================================ */

.candidate-form {
    width: 100%;
}


/* ============================================================
   FORM SECTION
   ============================================================ */

.form-section {

    margin-bottom: 28px;

    padding-bottom: 28px;

    border-bottom:
        1px solid var(--border);
}


.form-section:last-of-type {
    border-bottom: 0;
}


.form-section-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}


.form-section-kicker {

    display: block;

    margin-bottom: 4px;

    color: var(--primary);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.form-section-heading h2 {

    margin: 0;

    color: var(--text);

    font-size: 18px;

    letter-spacing: -0.3px;
}


.form-section-heading p {

    margin: 5px 0 0;

    color: var(--text-soft);

    font-size: 11px;

    line-height: 1.5;
}


/* ============================================================
   FORM GRID
   ============================================================ */

.form-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px 10px;
}


.form-field {

    min-width: 0;
}


.form-field-wide {
    grid-column: 1 / -1;
}


/* ============================================================
   LABEL
   ============================================================ */

.form-field label:not(.checkbox-field) {

    display: block;

    margin-bottom: 6px;

    color: var(--text-soft);

    font-size: 11px;

    font-weight: 650;
}


/* ============================================================
   INPUTS
   ============================================================ */

.form-field input,
.form-field select,
.form-field textarea {

    width: 100%;

    min-height: 43px;

    padding:
        10px 11px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-sm);

    outline: none;

    background:
        var(--surface);

    color:
        var(--text);

    font-size:
        13px;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px var(--primary-soft);
}


.form-field input[readonly] {

    background:
        var(--surface-2);

    color:
        var(--text-soft);

    cursor:
        not-allowed;
}


.form-field small {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--text-faint);

    font-size:
        10px;
}


/* ============================================================
   RATE INPUT
   ============================================================ */

.input-with-suffix {

    position:
        relative;
}


.input-with-suffix input {

    padding-right:
        72px;
}


.input-with-suffix span {

    position:
        absolute;

    top:
        50%;

    right:
        11px;

    transform:
        translateY(-50%);

    color:
        var(--text-faint);

    font-size:
        10px;

    pointer-events:
        none;
}


/* ============================================================
   CHECKBOX
   ============================================================ */

.checkbox-field {

    min-height:
        43px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin: 0 !important;

    padding:
        10px 11px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-sm);

    background:
        var(--surface);

    color:
        var(--text-soft) !important;

    font-size:
        12px !important;

    cursor:
        pointer;
}


.checkbox-field input {
    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}


.checkbox-box {

    width:
        18px;

    height:
        18px;

    flex:
        0 0 18px;

    border:
        2px solid var(--border);

    border-radius:
        5px;

    background:
        var(--surface);

    transition:
        background var(--transition),
        border-color var(--transition);
}


.checkbox-field input:checked + .checkbox-box {

    border-color:
        var(--primary);

    background:
        var(--primary);

    box-shadow:
        inset 0 0 0 4px var(--surface);
}


/* ============================================================
   ROLES EDITOR
   ============================================================ */

.roles-editor-section {

    padding:
        18px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-md);

    background:
        var(--surface-2);
}


.roles-editor-section .form-section-heading {
    margin-bottom:
        15px;
}


.roles-heading {
    align-items:
        center;
}


/* ============================================================
   ADD ROLE
   ============================================================ */

.add-role-btn {

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    min-height:
        34px;

    padding:
        7px 10px;

    border:
        1px solid var(--primary);

    border-radius:
        9px;

    background:
        var(--primary-soft);

    color:
        var(--primary);

    cursor:
        pointer;

    font-size:
        11px;

    font-weight:
        750;

    white-space:
        nowrap;
}


.add-role-btn span {

    font-size:
        16px;

    line-height:
        1;
}


/* ============================================================
   ROLES LIST
   ============================================================ */

.roles-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


/* ============================================================
   SINGLE ROLE
   ============================================================ */

.role-editor {

    padding:
        13px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-sm);

    background:
        var(--surface);

    box-shadow:
        var(--card-shadow);
}


.role-editor-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        11px;
}


.role-number {

    color:
        var(--text-faint);

    font-size:
        10px;

    font-weight:
        750;

    text-transform:
        uppercase;

    letter-spacing:
        0.8px;
}


.remove-role-btn {

    width:
        28px;

    height:
        28px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        var(--surface-2);

    color:
        var(--danger);

    cursor:
        pointer;

    font-size:
        16px;

    line-height:
        1;
}


.remove-role-btn:hover {

    background:
        color-mix(
            in srgb,
            var(--danger) 12%,
            var(--surface)
        );
}


.role-editor .form-field {
    margin-bottom:
        10px;
}


.role-editor .form-field:last-child {
    margin-bottom:
        0;
}


/* ============================================================
   NO ROLES
   ============================================================ */

.no-roles-message {

    padding:
        18px 10px;

    border:
        1px dashed var(--border);

    border-radius:
        var(--radius-sm);

    color:
        var(--text-faint);

    text-align:
        center;

    font-size:
        11px;
}


.no-roles-message.hidden {
    display:
        none;
}


/* ============================================================
   FORM ACTIONS
   ============================================================ */

.form-actions {

    display:
        grid;

    grid-template-columns:
        1fr 1.5fr;

    gap:
        9px;

    padding:
        4px 0 10px;
}


.primary-btn,
.secondary-btn {

    min-height:
        46px;

    border-radius:
        var(--radius-sm);

    cursor:
        pointer;

    font-size:
        13px;

    font-weight:
        750;
}


.primary-btn {

    border:
        1px solid var(--primary);

    background:
        var(--primary);

    color:
        var(--surface);
}


.secondary-btn {

    border:
        1px solid var(--border);

    background:
        var(--surface);

    color:
        var(--text-soft);
}


.primary-btn:hover {
    background:
        var(--primary-strong);
}


.secondary-btn:hover {
    background:
        var(--surface-2);
}


/* ============================================================
   CLOSE BUTTON
   ============================================================ */

.editor-close {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        var(--surface-2);

    color:
        var(--text-soft);

    cursor:
        pointer;

    font-size:
        23px;

    line-height:
        1;
}


.editor-close:hover {

    background:
        var(--primary-soft);

    color:
        var(--primary);
}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 380px) {

    .form-grid {
        grid-template-columns:
            1fr;
    }

    .form-field-wide {
        grid-column:
            auto;
    }

    .roles-editor-section {
        padding:
            14px;
    }

    .roles-heading {
        align-items:
            flex-start;
    }

    .form-actions {
        grid-template-columns:
            1fr 1.3fr;
    }
}