/**
 * Styles UX/UI des formulaires candidat (ajout / modification).
 * Compatible Bootstrap 3 RTL + jQuery Steps.
 */

/* --- Layout responsive --- */
.candidat-form-layout {
    margin-bottom: 24px;
}

.candidat-form-layout > [class*="col-"] {
    margin-bottom: 16px;
}

@media (max-width: 767px) {
    .candidat-form-layout .candidat-form-main,
    .candidat-form-layout .candidat-form-aside {
        width: 100%;
        float: none;
    }
}

/* --- Wizard --- */
#profileForm.wizard > .steps > ul > li {
    width: 33.333%;
}

#profileForm.wizard > .steps a,
#profileForm.wizard > .steps a:hover,
#profileForm.wizard > .steps a:active {
    margin: 0 0.3em 0.4em;
    padding: 0.85em 0.75em;
    border-radius: 6px;
    font-weight: 600;
    line-height: 1.35;
}

#profileForm .content {
    min-height: 100px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
    margin-top: 4px;
}

#profileForm .content > .body {
    width: 100%;
    height: auto;
    padding: 18px 16px 8px;
    position: relative;
}

#profileForm .actions {
    margin-top: 12px;
}

#profileForm .actions a {
    border-radius: 6px;
    padding: 0.65em 1.4em;
    font-weight: 600;
}

/* --- Groupes de champs --- */
.cf-section {
    margin: 0 0 18px;
    padding: 14px 14px 6px;
    border: 1px solid #e8eaef;
    border-radius: 8px;
    background: #fbfcfd;
}

.cf-section-title {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8eaef;
    font-size: 15px;
    font-weight: 700;
    color: #2c3e50;
}

.cf-section .form-group {
    margin-bottom: 14px;
}

.cf-section label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #34495e;
}

.cf-section .form-control {
    border-radius: 5px;
    height: 38px;
    box-shadow: none;
}

.cf-section textarea.form-control {
    height: auto;
    min-height: 72px;
    resize: vertical;
}

.cf-section .form-control:focus {
    border-color: #5b9bd5;
    box-shadow: 0 0 0 2px rgba(91, 155, 213, 0.2);
}

/*
 * États valid/invalid — doivent battre jquery.steps (.wizard > .content > .body input).
 * outline en secours : visible même si un border est réécrit ailleurs.
 */
.cf-section .form-control.is-invalid,
.cf-section .has-error .form-control,
.cf-section input.form-control.is-invalid,
.cf-section textarea.form-control.is-invalid,
.cf-section select.form-control.is-invalid,
.wizard > .content > .body input.form-control.is-invalid,
.wizard > .content > .body textarea.form-control.is-invalid,
.wizard > .content > .body select.form-control.is-invalid,
.wizard > .content > .body input.is-invalid,
.wizard > .content > .body textarea.is-invalid {
    border: 1px solid #d9534f !important;
    outline: 2px solid rgba(217, 83, 79, 0.55) !important;
    outline-offset: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
}

.cf-section .form-control.is-valid,
.cf-section .has-success .form-control,
.cf-section input.form-control.is-valid,
.cf-section textarea.form-control.is-valid,
.cf-section select.form-control.is-valid,
.cf-section .form-control.cf-datepicker.is-valid,
.cf-section .form-control.cf-datepicker-readonly.is-valid,
.wizard > .content > .body input.form-control.is-valid,
.wizard > .content > .body textarea.form-control.is-valid,
.wizard > .content > .body select.form-control.is-valid,
.wizard > .content > .body input.is-valid,
.wizard > .content > .body textarea.is-valid {
    border: 1px solid #5cb85c !important;
    outline: 2px solid rgba(92, 184, 92, 0.55) !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

.cf-section .form-control.is-valid:focus,
.cf-section input.form-control.is-valid:focus,
.cf-section textarea.form-control.is-valid:focus,
.cf-section select.form-control.is-valid:focus,
.cf-section .form-control.cf-datepicker.is-valid:focus,
.cf-section .form-control.cf-datepicker-readonly.is-valid:focus,
.wizard > .content > .body input.form-control.is-valid:focus,
.wizard > .content > .body textarea.form-control.is-valid:focus,
.wizard > .content > .body select.form-control.is-valid:focus,
.wizard > .content > .body input.is-valid:focus,
.wizard > .content > .body textarea.is-valid:focus {
    border: 1px solid #5cb85c !important;
    outline: 2px solid rgba(92, 184, 92, 0.75) !important;
    box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.2) !important;
}

.cf-section .form-control.is-invalid:focus,
.cf-section input.form-control.is-invalid:focus,
.cf-section textarea.form-control.is-invalid:focus,
.cf-section select.form-control.is-invalid:focus,
.wizard > .content > .body input.form-control.is-invalid:focus,
.wizard > .content > .body textarea.form-control.is-invalid:focus,
.wizard > .content > .body select.form-control.is-invalid:focus,
.wizard > .content > .body input.is-invalid:focus,
.wizard > .content > .body textarea.is-invalid:focus {
    border: 1px solid #d9534f !important;
    outline: 2px solid rgba(217, 83, 79, 0.75) !important;
    box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.2) !important;
}

.cf-field.cf-field-invalid > .form-control,
.cf-field.cf-field-invalid > input,
.cf-field.cf-field-invalid > select,
.cf-field.cf-field-invalid > textarea {
    border: 1px solid #d9534f !important;
    outline: 2px solid rgba(217, 83, 79, 0.55) !important;
}

.cf-field.cf-field-valid > .form-control,
.cf-field.cf-field-valid > input,
.cf-field.cf-field-valid > select,
.cf-field.cf-field-valid > textarea {
    border: 1px solid #5cb85c !important;
    outline: 2px solid rgba(92, 184, 92, 0.55) !important;
}

/* Datepicker : lecture seule — sélection via calendrier */
.cf-datepicker.cf-datepicker-readonly,
.cf-section .form-control.cf-datepicker-readonly {
    background-color: #fff;
    cursor: pointer;
    color: #333;
}

.cf-datepicker.cf-datepicker-readonly:focus:not(.is-valid):not(.is-invalid) {
    border-color: #5b9bd5;
    box-shadow: 0 0 0 2px rgba(91, 155, 213, 0.2);
}

.cf-req {
    color: #c9302c;
    font-weight: 700;
}

.cf-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #7f8c8d;
    line-height: 1.4;
}

.cf-error {
    display: none;
    margin-top: 4px;
    font-size: 12px;
    color: #c9302c;
    line-height: 1.45;
    word-wrap: break-word;
}

.cf-error.is-visible,
.cf-error[data-server-error="true"] {
    display: block;
}

.cf-error.is-visible::before,
.cf-error[data-server-error="true"]::before {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    margin-left: 0.35em;
    border-radius: 50%;
    background: #c9302c;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .cf-error {
        font-size: 12px;
    }
}

.cf-field-readonly {
    background-color: #f0f2f5 !important;
    cursor: not-allowed;
    color: #555;
}

/* --- Infos concours (step 0) --- */
.cf-poste-card {
    padding: 4px 2px 10px;
}

.cf-poste-card h3 {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 18px;
    line-height: 1.45;
    color: #2c3e50;
}

.cf-poste-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    border: 1px solid #e8eaef;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.cf-poste-meta > li {
    display: table-row;
}

.cf-poste-meta > li > span {
    display: table-cell;
    padding: 10px 14px;
    border-top: 1px solid #eef0f3;
    vertical-align: top;
}

.cf-poste-meta > li:first-child > span {
    border-top: 0;
}

.cf-poste-meta .cf-poste-label {
    width: 38%;
    font-weight: 700;
    color: #34495e;
    background: #f7f9fb;
}

.cf-poste-deadline {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: #eef6fb;
    border: 1px solid #d4e8f5;
    color: #1a5276;
}

.cf-avis {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #e8eaef;
    background: #fff;
}

/* --- Engagement --- */
.cf-engagement {
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #dce3ea;
    background: #fff;
}

.cf-engagement label {
    font-weight: 400;
    line-height: 1.65;
}

.cf-engagement strong {
    display: inline-block;
    margin-bottom: 6px;
}

/* --- Récap erreurs --- */
.recap-erreurs {
    border: 1px solid #ebccd1;
    border-radius: 8px;
    background: #fdf7f7;
    padding: 14px 18px;
    margin-bottom: 18px;
    font-variant-numeric: lining-nums;
}

.recap-erreurs ul {
    margin: 10px 0 0;
    padding-right: 22px;
}

.recap-erreurs li {
    margin-bottom: 6px;
    line-height: 1.45;
}

/* --- Aside instructions --- */
.candidat-form-aside .cadre_notification {
    border-radius: 8px;
    border-color: #e0e4ea;
    background: #f8fafc;
    padding: 14px;
}

.candidat-form-aside .cadre_notification .titre {
    text-decoration: none;
    margin-bottom: 8px;
    color: #2c3e50;
}

.candidat-form-aside .cadre_notification ul {
    margin: 0;
    padding-right: 18px;
}

.candidat-form-aside .cadre_notification li {
    margin-bottom: 8px;
    line-height: 1.45;
}

/* --- Conflit NCIN --- */
.ncin-conflict-panel {
    border: 1px solid #f0ad4e;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    background: #fffdf5;
}

.ncin-conflict-panel h4 {
    margin-top: 0;
    color: #8a6d3b;
}

.ncin-conflict-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* --- Grille utilitaire (Bootstrap 3) --- */
.cf-row {
    margin-left: -8px;
    margin-right: -8px;
}

.cf-row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

/* --- Datepicker (année / mois / jour) — readonly, ouverture au focus --- */
.cf-datepicker {
    cursor: pointer;
    background-color: #fff;
}

#ui-datepicker-div {
    z-index: 2000 !important;
    font-size: 14px;
    border: 1px solid #c9d9e6;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(31, 95, 139, 0.18);
    padding: 8px;
    background: #fff;
    color: #1a2a36;
}

/* Le wizard Steps clippe le contenu : le popup doit rester hors overflow */
.wizard > .content {
    overflow: visible;
}

.ui-datepicker .ui-datepicker-header {
    background: #1f5f8b;
    border: none;
    border-radius: 8px;
    color: #fff;
    padding: 8px 4px;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.2em;
    line-height: 1.8;
    font-weight: 600;
}

.ui-datepicker .ui-datepicker-title select {
    margin: 0 2px;
    padding: 4px 6px;
    border-radius: 5px;
    border: 1px solid #c9d9e6;
    font-size: 13px;
    max-width: 46%;
    background: #fff;
    color: #1a2a36;
}

.ui-datepicker .ui-datepicker-title select:focus {
    border-color: #5b9bd5;
    outline: 2px solid rgba(91, 155, 213, 0.28);
    outline-offset: 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 10px;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    top: 10px;
}

.ui-datepicker th {
    color: #5a6c7d;
    font-weight: 600;
    font-size: 12px;
}

.ui-datepicker td span,
.ui-datepicker td a {
    text-align: center;
    padding: 6px;
    border-radius: 5px;
}

.ui-datepicker td a.ui-state-default {
    background: #fff;
    border: 1px solid #e8ecf0;
    color: #1a2a36;
}

.ui-datepicker td a.ui-state-hover,
.ui-datepicker td a.ui-state-focus {
    background: #e8f3fb;
    border-color: #7eb0d4;
    color: #1f5f8b;
}

.ui-datepicker td a.ui-state-default:focus {
    outline: 2px solid rgba(91, 155, 213, 0.45);
    outline-offset: 1px;
}

.ui-datepicker td a.ui-state-active {
    background: #1f5f8b;
    border-color: #1f5f8b;
    color: #fff;
}

.ui-datepicker td a.ui-state-active:focus {
    outline: 2px solid rgba(91, 155, 213, 0.55);
    outline-offset: 1px;
}

.ui-datepicker .ui-state-highlight {
    border-color: #7eb0d4;
    background: #e8f3fb;
    color: #1f5f8b;
}

.ui-datepicker .ui-state-disabled,
.ui-datepicker .ui-state-disabled span {
    color: #b8c4ce;
    opacity: 1;
}

@media (max-width: 767px) {
    #profileForm.wizard > .steps > ul > li {
        width: 100%;
    }

    #profileForm.wizard > .steps a {
        margin-bottom: 0.35em;
    }

    .cf-poste-meta .cf-poste-label,
    .cf-poste-meta > li > span {
        display: block;
        width: 100%;
    }

    .cf-poste-meta .cf-poste-label {
        border-bottom: 0;
        padding-bottom: 2px;
    }

    #ui-datepicker-div {
        width: min(320px, calc(100vw - 24px)) !important;
        font-size: 15px;
    }

    .ui-datepicker .ui-datepicker-title select {
        font-size: 15px;
        padding: 6px 8px;
        max-width: 48%;
    }

    .ui-datepicker td span,
    .ui-datepicker td a {
        padding: 9px 6px;
    }
}