/* ---------------------------------------------------------------------------
   Shared form theme.

   The views are written against Bootstrap 5 class names, but the layouts load
   Bootstrap 4.2, where .form-select does not exist. Those dropdowns therefore
   fell back to the browser's default control and read as flat text next to the
   styled inputs. The rules below give inputs, dropdowns and the on/off switches
   one visible appearance, whichever naming the view used.

   Loaded after the base stylesheets and before each page's own @yield('styles'),
   so a page can still override anything here.
   --------------------------------------------------------------------------- */

/* ---- text inputs and textareas ---- */

.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea.form-control {
    min-height: 34px;
    padding: .3rem .55rem;
    border: 1px solid #b9c2cc;
    border-radius: .4rem;
    background-color: #fff;
    color: #1f2937;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .05);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-control-sm:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    min-height: 30px;
    font-size: .8rem;
    padding: .22rem .5rem;
}

.form-control:hover:not(:disabled):not([readonly]) {
    border-color: #8b97a5;
}

.form-control:focus:not([type="checkbox"]):not([type="radio"]) {
    border-color: #1d4ed8;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .18);
    outline: 0;
}

.form-control::placeholder {
    color: #9aa5b1;
    font-weight: 500;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #eef1f4;
    color: #6b7280;
    cursor: not-allowed;
}

/* ---- dropdowns: tinted, accented, with a chevron that is actually drawn ---- */

.form-select,
select.form-control,
.custom-select {
    min-height: 34px;
    padding: .3rem 1.9rem .3rem .55rem;
    border: 1px solid #b9c2cc;
    border-left: 3px solid #1d4ed8;
    border-radius: .4rem;
    background-color: #f4f8ff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2311305e' d='M0 0l6 6 6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .55rem center;
    background-size: 11px 7px;
    color: #11305e;
    font-size: .85rem;
    font-weight: 700;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .05);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-select-sm,
select.form-control-sm {
    min-height: 30px;
    font-size: .8rem;
    padding: .22rem 1.7rem .22rem .5rem;
}

.form-select:hover,
select.form-control:hover,
.custom-select:hover {
    background-color: #e9f1ff;
    border-color: #8b97a5;
    border-left-color: #1d4ed8;
}

.form-select:focus,
select.form-control:focus,
.custom-select:focus {
    background-color: #fff;
    border-color: #1d4ed8;
    border-left-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .18);
    outline: 0;
}

.form-select:disabled,
select.form-control:disabled,
.custom-select:disabled {
    background-color: #eef1f4;
    border-left-color: #9aa5b1;
    color: #6b7280;
    cursor: not-allowed;
}

/* A selected value should stand out from the placeholder-like blank option. */
.form-select option,
select.form-control option,
.custom-select option {
    background-color: #fff;
    color: #1f2937;
    font-weight: 600;
}

/* ---- date pickers and select2 use their own inner inputs ---- */

.datepicker input,
.datetimepicker input,
.bootstrap-datetimepicker-widget input {
    font-weight: 600;
}

.select2-container--default .select2-selection--single {
    min-height: 34px;
    border: 1px solid #b9c2cc;
    border-left: 3px solid #1d4ed8;
    border-radius: .4rem;
    background-color: #f4f8ff;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px;
    color: #11305e;
    font-weight: 700;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .18);
}

/* ---- on/off switches ---- */

.sc-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    border: 1px solid transparent;
    border-radius: .4rem;
    padding: .38rem .65rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.sc-toggle-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.sc-toggle.is-on {
    background: #16a34a;
    border-color: #0f7a37;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
}

.sc-toggle.is-on .sc-toggle-dot {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

.sc-toggle.is-off {
    background: #fef2f2;
    border-color: #f0a9a9;
    color: #b42318;
}

.sc-toggle:hover {
    filter: brightness(1.06);
}

.sc-toggle:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
}

/* ---- small explanatory text under a field ---- */

.sc-hint {
    font-size: .72rem;
    line-height: 1.25;
    color: #6c757d;
    margin-top: .2rem;
}