/*
 * Material Dashboard only draws a border around fields wrapped in
 * .input-group-outline: a plain .form-control / .form-select gets `border: none`
 * and no side padding. Give standalone fields the same outline everywhere.
 * Fields inside an .input-group keep the theme's own styles.
 */
.form-control:not(.input-group *),
.form-select:not(.input-group *) {
    border: 1px solid #d2d6da;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    background-color: #fff;
}

.form-control:not(.input-group *):focus,
.form-select:not(.input-group *):focus {
    border-color: #e91e63;
    box-shadow: 0 0 0 2px rgba(233, 30, 99, 0.15);
    outline: 0;
}

.form-control:not(.input-group *):disabled,
.form-control:not(.input-group *)[readonly],
.form-select:not(.input-group *):disabled {
    background-color: #f0f2f5;
}

/* The theme also strips the native arrow from <select class="form-control">. */
select.form-control:not(.input-group *):not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 12px 12px;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

[dir="rtl"] select.form-control:not(.input-group *):not([multiple]):not([size]) {
    background-position: left 0.75rem center;
    padding-right: 0.75rem;
    padding-left: 2rem;
}

[dir="rtl"] .form-select:not(.input-group *) {
    background-position: left 0.75rem center;
    padding-right: 0.75rem;
    padding-left: 2rem;
}

/*
 * Idem pour les champs encadrés par .input-group-static (le style "par
 * défaut" du thème dans la plupart des écrans de l'app) : le thème ne
 * dessine qu'un simple soulignement. On leur donne la même bordure pleine
 * que les champs autonomes, pour une apparence homogène sur toute la
 * plateforme — sans toucher au HTML de chaque écran.
 */
.input-group.input-group-static .form-control,
.input-group.input-group-static .form-select {
    border: 1px solid #d2d6da !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    background-color: #fff;
    line-height: 1.3;
}

.input-group.input-group-static .form-control:focus,
.input-group.input-group-static .form-select:focus {
    border-color: #e91e63 !important;
    box-shadow: 0 0 0 2px rgba(233, 30, 99, 0.15);
}

.input-group.input-group-static .form-control:disabled,
.input-group.input-group-static .form-control[readonly],
.input-group.input-group-static .form-select:disabled {
    background-color: #f0f2f5;
}

.input-group.input-group-static .form-label {
    position: static;
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #67748e;
}

.input-group.input-group-static select.form-control:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 12px 12px;
    background-position: right 0.75rem center;
    padding-right: 2rem !important;
}

[dir="rtl"] .input-group.input-group-static select.form-control:not([multiple]):not([size]),
[dir="rtl"] .input-group.input-group-static .form-select {
    background-position: left 0.75rem center;
    padding-right: 0.75rem !important;
    padding-left: 2rem !important;
}
