/* Standard form controls for the admin: file picker, checkbox, radio, switch.
   Loaded by default.blade.php (and the scoreboard settings screen). */

/* Standard file picker (public/js/file-input.js wraps every plain <input type="file">). */
.ux-file { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 52px; padding: 7px 8px 7px 8px; background: #fff; border: 1px dashed #cfd5df; border-radius: 8px; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.ux-file:hover { border-color: #9aa6b8; background: #fafbfc; }
.ux-file.is-drag { border-color: #6993ff; border-style: solid; background: #f3f6ff; }
.ux-file:focus-within { border-color: #6993ff; box-shadow: 0 0 0 3px rgba(105,147,255,.12); }
.ux-file.is-filled { border-style: solid; border-color: #dfe3ea; }
.ux-file > input[type="file"] { position: absolute; inset: 0; z-index: 1; width: 100% !important; height: 100% !important; margin: 0; padding: 0; opacity: 0; cursor: pointer; font-size: 0; }
.ux-file.is-disabled { opacity: .6; }
.ux-file.is-disabled > input[type="file"] { cursor: not-allowed; }
.ux-file-icon { position: relative; flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 6px; background: #f3f5f8; color: #7e8899; font-size: 20px; }
.ux-file.is-filled .ux-file-icon { background: #edf2ff; color: #4263c7; }
.ux-file-thumb { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.ux-file.has-thumb .ux-file-thumb { display: block; }
.ux-file-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ux-file-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #8a94a6; font-size: 13px; }
.ux-file.is-filled .ux-file-name { color: #3f4254; font-weight: 500; }
.ux-file-hint { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #a1a9b8; font-size: 11px; }
.ux-file-btn { flex: 0 0 auto; padding: 6px 12px; border-radius: 6px; background: #f3f5f8; color: #3f4254; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background-color .15s; }
.ux-file:hover .ux-file-btn { background: #e8ebf1; }
.ux-file-clear { display: none; position: relative; z-index: 2; flex: 0 0 28px; width: 28px; height: 28px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #8a94a6; font-size: 14px; cursor: pointer; }
.ux-file-clear:hover { background: #ffecee; color: #d9364b; }
.ux-file-clear:focus-visible { outline: 2px solid #6993ff; outline-offset: 1px; }
.ux-file.is-filled .ux-file-clear { display: inline-flex; }
.ux-file:has(> input.is-invalid), .ux-file:has(> input.error) { border-color: #f64e60; border-style: solid; }
/* Inline toolbars / form-inline rows: size to content instead of stretching. */
.form-inline .ux-file, .d-flex > .ux-file, .d-inline-flex > .ux-file { width: auto; flex: 1 1 260px; min-width: 220px; max-width: 420px; }
@media (max-width: 575px) { .ux-file-btn { display: none; } }
.ux-file > label.error, .ux-file > .invalid-feedback, .ux-file > .fv-plugins-message-container { position: absolute; top: 100%; left: 0; margin: 4px 0 0; }

/* Checkbox & radio: one look everywhere. :where() keeps specificity at a bare input[type=…]
   so widgets (Metronic .checkbox/.switch, page-specific styles) still override it. */
:where(.admin-shell) input[type="checkbox"], :where(.admin-shell) input[type="radio"],
input[type="checkbox"].ux-check, input[type="radio"].ux-check {
    -webkit-appearance: none; appearance: none; display: inline-grid; place-content: center; flex: none;
    width: 18px; height: 18px; padding: 0; vertical-align: -4px; cursor: pointer;
    background: #fff; border: 1.5px solid #c3cad5; border-radius: 5px;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
:where(.admin-shell) input[type="radio"], input[type="radio"].ux-check { border-radius: 50%; }
:where(.admin-shell) input[type="checkbox"]::before, input[type="checkbox"].ux-check::before {
    content: ''; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: translate(0, -1px) rotate(-45deg) scale(0); transition: transform .12s ease-out;
}
:where(.admin-shell) input[type="radio"]::before, input[type="radio"].ux-check::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .12s ease-out;
}
:where(.admin-shell) input[type="checkbox"]:hover, :where(.admin-shell) input[type="radio"]:hover,
input.ux-check:hover { border-color: var(--ux-accent, #F64E60); }
:where(.admin-shell) input[type="checkbox"]:checked, :where(.admin-shell) input[type="radio"]:checked,
:where(.admin-shell) input[type="checkbox"]:indeterminate, input.ux-check:checked, input.ux-check:indeterminate { background: var(--ux-accent, #F64E60); border-color: var(--ux-accent, #F64E60); }
:where(.admin-shell) input[type="checkbox"]:checked::before, input[type="checkbox"].ux-check:checked::before { transform: translate(0, -1px) rotate(-45deg) scale(1); }
:where(.admin-shell) input[type="radio"]:checked::before, input[type="radio"].ux-check:checked::before { transform: scale(1); }
:where(.admin-shell) input[type="checkbox"]:indeterminate::before, input[type="checkbox"].ux-check:indeterminate::before { width: 9px; height: 0; border-left: 0; transform: none; }
:where(.admin-shell) input[type="checkbox"]:focus-visible, :where(.admin-shell) input[type="radio"]:focus-visible,
input.ux-check:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(246,78,96,.22); }
:where(.admin-shell) input[type="checkbox"]:disabled, :where(.admin-shell) input[type="radio"]:disabled,
input.ux-check:disabled { opacity: .5; cursor: not-allowed; }
:where(.admin-shell) label:has(> input[type="checkbox"], > input[type="radio"]) { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
:where(.admin-shell) label:has(> input[type="checkbox"], > input[type="radio"]) + label:has(> input[type="checkbox"], > input[type="radio"]) { margin-left: 12px; }
:where(.admin-shell) label > input[type="checkbox"], :where(.admin-shell) label > input[type="radio"] { margin: 0; }

/* Switch: for on/off settings. <input type="checkbox" class="ux-switch"> */
input[type="checkbox"].ux-switch {
    -webkit-appearance: none; appearance: none; position: relative; display: inline-block; flex: none;
    width: 38px; height: 22px; margin: 0; padding: 0; vertical-align: middle; cursor: pointer;
    background: #d5dae2; border: 0; border-radius: 999px; transition: background-color .18s;
}
input[type="checkbox"].ux-switch::before {
    content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border: 0; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.25); transform: none; transition: transform .18s;
}
input[type="checkbox"].ux-switch:hover { background: #c3cad5; }
input[type="checkbox"].ux-switch:checked { background: var(--ux-accent, #F64E60); }
input[type="checkbox"].ux-switch:checked::before { transform: translateX(16px); }
input[type="checkbox"].ux-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(246,78,96,.22); }
input[type="checkbox"].ux-switch:disabled { opacity: .5; cursor: not-allowed; }