/* ==========================================================================
   Forms / Controls
   ========================================================================== */

fieldset.scheduler-border {
    margin: 0 0 1.5em;
    padding: 0 1.4em 1.4em;
    border: 1px solid var(--arcs-border) !important;
    border-radius: 1rem;
    background: var(--arcs-surface);
    box-shadow: var(--arcs-shadow-sm);
}

legend.scheduler-border {
    display: inline-block;
    width: auto;
    padding: 0 10px;
    margin: 0;
    line-height: 1;
    border-bottom: none;
    color: var(--arcs-accent);
    font-size: 1.1rem;
    font-weight: 700;
}

.app-inline-legend-fieldset {
    padding-top: 0.55rem;
}

.app-inline-legend-fieldset > legend.scheduler-border {
    position: relative;
    top: -0.7rem;
    margin: 0 0 -0.2rem 0.35rem;
    padding-inline: 0.5rem;
    line-height: 1;
    background: var(--arcs-surface);
    border-radius: 999px;
}

.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.form-inline .form-group,
.form-inline .input-group,
.form-inline .custom-select,
.form-inline .form-control,
.form-inline .form-select {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.form-control,
.form-select,
.input-group-text,
.custom-select {
    border-color: var(--arcs-border);
}

.form-control,
.form-select,
.custom-select,
.input-group-text,
.table,
.dropdown-menu,
.dropdown-item,
.card,
.modal-content,
.alert {
    color: var(--arcs-text);
}

.form-control,
.form-select,
.custom-select {
    background-color: var(--arcs-surface);
}

.form-control::placeholder,
.form-select::placeholder {
    color: color-mix(in srgb, var(--arcs-text-muted) 78%, transparent);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .custom-select,
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] input:not([type]),
[data-bs-theme="dark"] input[type="text"],
[data-bs-theme="dark"] input[type="email"],
[data-bs-theme="dark"] input[type="number"],
[data-bs-theme="dark"] input[type="search"],
[data-bs-theme="dark"] input[type="tel"],
[data-bs-theme="dark"] input[type="password"],
[data-bs-theme="dark"] input[type="url"],
[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="time"],
[data-bs-theme="dark"] input[type="datetime-local"] {
    color: var(--arcs-text) !important;
    caret-color: var(--arcs-text);
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-select::placeholder,
[data-bs-theme="dark"] .custom-select::placeholder,
[data-bs-theme="dark"] textarea::placeholder,
[data-bs-theme="dark"] input[type="text"]::placeholder,
[data-bs-theme="dark"] input[type="email"]::placeholder,
[data-bs-theme="dark"] input[type="number"]::placeholder,
[data-bs-theme="dark"] input[type="search"]::placeholder,
[data-bs-theme="dark"] input[type="tel"]::placeholder,
[data-bs-theme="dark"] input[type="password"]::placeholder,
[data-bs-theme="dark"] input[type="url"]::placeholder,
[data-bs-theme="dark"] input[type="date"]::placeholder,
[data-bs-theme="dark"] input[type="time"]::placeholder,
[data-bs-theme="dark"] input[type="datetime-local"]::placeholder {
    color: color-mix(in srgb, var(--arcs-text-muted) 82%, transparent);
    opacity: 1;
}

[data-bs-theme="dark"] select option {
    color: var(--arcs-text);
    background-color: var(--arcs-surface);
}

[data-bs-theme="dark"] input.form-control:-webkit-autofill,
[data-bs-theme="dark"] input.form-control:-webkit-autofill:hover,
[data-bs-theme="dark"] input.form-control:-webkit-autofill:focus,
[data-bs-theme="dark"] input.form-control:-webkit-autofill:active,
[data-bs-theme="dark"] textarea.form-control:-webkit-autofill,
[data-bs-theme="dark"] textarea.form-control:-webkit-autofill:hover,
[data-bs-theme="dark"] textarea.form-control:-webkit-autofill:focus,
[data-bs-theme="dark"] textarea.form-control:-webkit-autofill:active,
[data-bs-theme="dark"] input:not([type]):-webkit-autofill,
[data-bs-theme="dark"] input:not([type]):-webkit-autofill:hover,
[data-bs-theme="dark"] input:not([type]):-webkit-autofill:focus,
[data-bs-theme="dark"] input[type="text"]:-webkit-autofill,
[data-bs-theme="dark"] input[type="text"]:-webkit-autofill:hover,
[data-bs-theme="dark"] input[type="text"]:-webkit-autofill:focus,
[data-bs-theme="dark"] input[type="email"]:-webkit-autofill,
[data-bs-theme="dark"] input[type="email"]:-webkit-autofill:hover,
[data-bs-theme="dark"] input[type="email"]:-webkit-autofill:focus,
[data-bs-theme="dark"] input[type="number"]:-webkit-autofill,
[data-bs-theme="dark"] input[type="number"]:-webkit-autofill:hover,
[data-bs-theme="dark"] input[type="number"]:-webkit-autofill:focus,
[data-bs-theme="dark"] input[type="search"]:-webkit-autofill,
[data-bs-theme="dark"] input[type="search"]:-webkit-autofill:hover,
[data-bs-theme="dark"] input[type="search"]:-webkit-autofill:focus,
[data-bs-theme="dark"] input[type="tel"]:-webkit-autofill,
[data-bs-theme="dark"] input[type="tel"]:-webkit-autofill:hover,
[data-bs-theme="dark"] input[type="tel"]:-webkit-autofill:focus,
[data-bs-theme="dark"] input[type="password"]:-webkit-autofill,
[data-bs-theme="dark"] input[type="password"]:-webkit-autofill:hover,
[data-bs-theme="dark"] input[type="password"]:-webkit-autofill:focus,
[data-bs-theme="dark"] input[type="url"]:-webkit-autofill,
[data-bs-theme="dark"] input[type="url"]:-webkit-autofill:hover,
[data-bs-theme="dark"] input[type="url"]:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--arcs-text);
    caret-color: var(--arcs-text);
    box-shadow: 0 0 0 1000px var(--arcs-surface) inset;
    transition: background-color 9999s ease-out 0s;
}

select.form-control,
select.custom-select {
    padding-right: 2.5rem;
    background-image: var(--bs-form-select-bg-img);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    appearance: none;
}

select.form-control:focus,
select.custom-select:focus,
.form-control:focus,
.form-select:focus {
    border-color: color-mix(in srgb, var(--arcs-accent) 28%, #86b7fe 72%);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--arcs-accent) 16%, #0d6efd 84%, transparent);
}

/* Keep focused controls on the active dark surface instead of reverting to Bootstrap's light focus fill. */
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .custom-select:focus,
[data-bs-theme="dark"] .form-control.is-valid:focus,
[data-bs-theme="dark"] .form-control.is-invalid:focus,
[data-bs-theme="dark"] .form-select.is-valid:focus,
[data-bs-theme="dark"] .form-select.is-invalid:focus,
[data-bs-theme="dark"] .custom-select.is-valid:focus,
[data-bs-theme="dark"] .custom-select.is-invalid:focus,
[data-bs-theme="dark"] .was-validated .form-control:valid:focus,
[data-bs-theme="dark"] .was-validated .form-control:invalid:focus,
[data-bs-theme="dark"] .was-validated .form-select:valid:focus,
[data-bs-theme="dark"] .was-validated .form-select:invalid:focus,
[data-bs-theme="dark"] .was-validated .custom-select:valid:focus,
[data-bs-theme="dark"] .was-validated .custom-select:invalid:focus,
[data-bs-theme="dark"] textarea:focus,
[data-bs-theme="dark"] input:not([type]):focus,
[data-bs-theme="dark"] input[type="text"]:focus,
[data-bs-theme="dark"] input[type="email"]:focus,
[data-bs-theme="dark"] input[type="number"]:focus,
[data-bs-theme="dark"] input[type="search"]:focus,
[data-bs-theme="dark"] input[type="tel"]:focus,
[data-bs-theme="dark"] input[type="password"]:focus,
[data-bs-theme="dark"] input[type="url"]:focus,
[data-bs-theme="dark"] input[type="date"]:focus,
[data-bs-theme="dark"] input[type="time"]:focus,
[data-bs-theme="dark"] input[type="datetime-local"]:focus {
    color: var(--arcs-text) !important;
    background-color: var(--app-small-form-control-bg, var(--arcs-surface)) !important;
}

.input-group-prepend,
.input-group-append {
    display: flex;
}

.input-group-prepend {
    margin-right: -1px;
}

.input-group-append {
    margin-left: -1px;
}

.input-group-prepend .btn,
.input-group-prepend .input-group-text,
.input-group-append .btn,
.input-group-append .input-group-text {
    height: 100%;
    border-radius: inherit;
}

.app-input-addon-dark {
    color: var(--arcs-input-addon-text);
    background-color: var(--arcs-input-addon-bg);
}

.app-input-offset {
    margin-top: 12px;
}

.app-input-addon-calendar {
    height: 38px;
    margin-top: 31px;
    margin-left: -2px;
}

.app-input-addon-calendar-tight {
    height: 38px;
    margin-top: 22px;
}

.app-search-button-offset {
    margin-top: 22px;
}

.app-switch-offset {
    margin-top: 30px;
}

.app-inline-warning {
    width: 360px;
    border: none;
    background-color: var(--arcs-alert-soft);
}

[data-title] {
    position: relative;
}

[data-title]:hover::after {
    visibility: visible;
    opacity: 1;
    transition: all 0.1s ease 0.5s;
}

[data-title]::after {
    position: absolute;
    bottom: -1.6em;
    left: 100%;
    z-index: 99999;
    visibility: hidden;
    padding: 10px;
    border-radius: 5px;
    white-space: nowrap;
    color: #ffffff;
    background-color: #343a40;
    content: attr(data-title);
    font-family: Arial, sans-serif;
    font-size: 12px;
    opacity: 0;
}

.parkertype {
    position: relative;
}

td.parkertype:hover::after {
    position: absolute;
    top: 4em;
    left: 2.4em;
    z-index: 1;
    min-width: 50px;
    padding: 8px;
    border: 1px solid #808080;
    border-radius: 5px;
    background-color: #4d4f52;
    color: #ffffff;
    content: attr(data-tooltip);
    font-size: 15px;
}

.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
}

.custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
}

.custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
}

.custom-control-label::before,
.custom-control-label::after {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
}

.custom-control-label::before {
    pointer-events: none;
    background: var(--arcs-surface);
    border: 1px solid color-mix(in srgb, var(--arcs-text) 25%, transparent);
}

.custom-control-label::after {
    background: no-repeat 50% / 50% 50%;
}

.custom-switch {
    padding-left: 2.25rem;
}

.custom-switch.custom-switch-xl {
    padding-bottom: 1rem;
    padding-left: 2.25rem;
}

.custom-switch.custom-switch-xl .custom-control-label {
    padding-top: 0.5rem;
    padding-left: 2rem;
}

.custom-switch .custom-control-label::before,
.custom-switch.custom-switch-xl .custom-control-label::before {
    left: -2.25rem;
    width: 1.75rem;
    height: 1rem;
    border-radius: 1rem;
    pointer-events: all;
}

.custom-switch.custom-switch-xl .custom-control-label::before {
    width: 3.5rem;
    height: 2rem;
    border-radius: 1rem;
}

.custom-switch .custom-control-label::after {
    top: calc(0.25rem + 2px);
    left: calc(-2.25rem + 2px);
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    border-radius: 1rem;
    background-color: #adb5bd;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.custom-switch.custom-switch-xl .custom-control-label::after {
    width: calc(2rem - 4px);
    height: calc(2rem - 4px);
    border-radius: 2rem;
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: #0d6efd;
    background-color: #0d6efd;
    color: #ffffff;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #ffffff;
    transform: translateX(0.75rem);
}

.custom-switch.custom-switch-xl .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(1.5rem);
}

.shift-down {
    margin-top: 50px;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.custom-control-input:disabled ~ .custom-control-label {
    opacity: 0.65;
}