/**
 * Theme Autofill + Float-Label Cutouts — MUST load AFTER dore.*.bluenavy.min.css (#vcp-dore-theme).
 *
 * Evidence (Chromium CDP + screenshot pixels on Pterodactyl API keys):
 * - Chrome computed autofill background resists background-color !important
 *   does NOT win. Inset box-shadow !important covers cream (auth.css technique).
 * - Dore `animation-name:autofill` + keyframe `to { background: transparent }` exposes
 *   cream if animation is not killed.
 * - Float-label vendor uses span::after (z-index:-1, height:5px) as border cutout.
 *   Under Chrome autofill compositing on password fields, that ::after paints OVER the
 *   label glyphs → opaque bars (tops/bottoms of letters peek). Panel-URL
 *   (non-autofilled) stays fine. Fix: cutout = span background (text always on top);
 *   disable the ::after fill. Do NOT put opaque background on ::after.
 *
 * Technique matches auth.css: no autofill background-color; long bg transition;
 * animation-name/fill-mode none; inset -webkit-box-shadow + box-shadow.
 * Colors via Spec tokens only (css/tokens.css) — no theme forks.
 */

/* Float cutouts on the label itself (= card / --surface) */

html body .card .has-float-label > span:last-of-type,
html body .card .has-float-label label,
html body .admin-provider-settings-card .has-float-label > span:last-of-type,
html body .admin-provider-settings-card .has-float-label label,
html body .admin-provider-settings-page .has-float-label > span:last-of-type,
html body .admin-provider-settings-page .has-float-label label {
    background: var(--surface);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    /* Autofill creates a sibling paint layer that covers overlapping float labels;
       force the label onto its own layer above the input. */
    z-index: 10;
    transform: translateZ(0);
    isolation: isolate;
    pointer-events: none;
}

html body .card .has-float-label > .form-control,
html body .admin-provider-settings-card .has-float-label > .form-control,
html body .admin-provider-settings-page .has-float-label > .form-control {
    position: relative;
    z-index: 1;
}

/* Kill vendor/Dore ::after fill — opaque ::after was painting OVER label text
   on autofilled password fields (Application-API-Key / SSO-Secret). */
html body .card .has-float-label > span::after,
html body .card .has-float-label label::after,
html body .admin-provider-settings-card .has-float-label > span::after,
html body .admin-provider-settings-card .has-float-label label::after,
html body .admin-provider-settings-page .has-float-label > span::after,
html body .admin-provider-settings-page .has-float-label label::after {
    background: transparent !important;
    content: none !important;
}

/* Base cover = --input-bg / --bg-sunken for default Dore inputs */
html body input:-webkit-autofill,
html body input:-webkit-autofill:hover,
html body input:-webkit-autofill:focus,
html body input:-webkit-autofill:active,
html body input:autofill,
html body input:autofill:hover,
html body input:autofill:focus,
html body input:autofill:active,
html body input:-internal-autofill-selected,
html body input:-internal-autofill-previewed,
html body textarea:-webkit-autofill,
html body textarea:-webkit-autofill:hover,
html body textarea:-webkit-autofill:focus,
html body textarea:-webkit-autofill:active,
html body textarea:autofill,
html body textarea:autofill:hover,
html body textarea:autofill:focus,
html body textarea:autofill:active,
html body select:-webkit-autofill,
html body select:-webkit-autofill:hover,
html body select:-webkit-autofill:focus,
html body select:-webkit-autofill:active,
html body select:autofill,
html body select:autofill:hover,
html body select:autofill:focus,
html body select:autofill:active,
html body .form-control:-webkit-autofill,
html body .form-control:-webkit-autofill:hover,
html body .form-control:-webkit-autofill:focus,
html body .form-control:-webkit-autofill:active,
html body .form-control:autofill,
html body .form-control:autofill:hover,
html body .form-control:autofill:focus,
html body .form-control:autofill:active,
html body .form-control:-internal-autofill-selected,
html body .form-control:-internal-autofill-previewed,
html body input[type="password"].form-control:-webkit-autofill,
html body input[type="password"].form-control:-webkit-autofill:hover,
html body input[type="password"].form-control:-webkit-autofill:focus,
html body input[type="password"].form-control:-webkit-autofill:active,
html body input[type="password"].form-control:autofill,
html body input[type="password"].form-control:autofill:hover,
html body input[type="password"].form-control:autofill:focus,
html body input[type="password"].form-control:autofill:active,
html body .has-float-label .form-control:-webkit-autofill,
html body .has-float-label .form-control:-webkit-autofill:hover,
html body .has-float-label .form-control:-webkit-autofill:focus,
html body .has-float-label .form-control:-webkit-autofill:active,
html body .has-float-label .form-control:autofill,
html body .has-float-label .form-control:autofill:hover,
html body .has-float-label .form-control:autofill:focus,
html body .has-float-label .form-control:autofill:active {
    -webkit-text-fill-color: var(--text-muted) !important;
    caret-color: var(--text-muted) !important;
    color: var(--text-muted) !important;
    background-image: none !important;
    transition: background-color 99999s ease-out 0s !important;
    animation: none !important;
    animation-name: none !important;
    animation-fill-mode: none !important;
    -webkit-box-shadow: 0 0 0 1000px var(--bg-sunken) inset !important;
    box-shadow: 0 0 0 1000px var(--bg-sunken) inset !important;
}

/* Soft-accent cards + Pterodactyl API keys: cover = --surface */
html body .card input[type="password"].form-control,
html body .admin-provider-settings-card input[type="password"].form-control,
html body .admin-provider-settings-page input[type="password"].form-control,
html body .vcp-autofill-surface.form-control {
    background-color: var(--surface) !important;
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
}

html body .card .form-control:-webkit-autofill,
html body .card .form-control:-webkit-autofill:hover,
html body .card .form-control:-webkit-autofill:focus,
html body .card .form-control:-webkit-autofill:active,
html body .card .form-control:autofill,
html body .card .form-control:autofill:hover,
html body .card .form-control:autofill:focus,
html body .card .form-control:autofill:active,
html body .card input[type="password"].form-control:-webkit-autofill,
html body .card input[type="password"].form-control:autofill,
html body .card .has-float-label .form-control:-webkit-autofill,
html body .card .has-float-label .form-control:autofill,
html body .admin-provider-settings-card .form-control:-webkit-autofill,
html body .admin-provider-settings-card .form-control:autofill,
html body .admin-provider-settings-card input[type="password"].form-control:-webkit-autofill,
html body .admin-provider-settings-card input[type="password"].form-control:autofill,
html body .admin-provider-settings-page .form-control:-webkit-autofill,
html body .admin-provider-settings-page .form-control:-webkit-autofill:hover,
html body .admin-provider-settings-page .form-control:-webkit-autofill:focus,
html body .admin-provider-settings-page .form-control:-webkit-autofill:active,
html body .admin-provider-settings-page .form-control:autofill,
html body .admin-provider-settings-page .form-control:autofill:hover,
html body .admin-provider-settings-page .form-control:autofill:focus,
html body .admin-provider-settings-page .form-control:autofill:active,
html body .admin-provider-settings-page .has-float-label .form-control:-webkit-autofill,
html body .admin-provider-settings-page .has-float-label .form-control:autofill,
html body .admin-provider-settings-page input[type="password"].form-control:-webkit-autofill,
html body .admin-provider-settings-page input[type="password"].form-control:autofill,
html body .vcp-autofill-surface.form-control:-webkit-autofill,
html body .vcp-autofill-surface.form-control:-webkit-autofill:hover,
html body .vcp-autofill-surface.form-control:-webkit-autofill:focus,
html body .vcp-autofill-surface.form-control:-webkit-autofill:active,
html body .vcp-autofill-surface.form-control:autofill,
html body .vcp-autofill-surface.form-control:autofill:hover,
html body .vcp-autofill-surface.form-control:autofill:focus,
html body .vcp-autofill-surface.form-control:autofill:active,
html body .card .vcp-autofill-surface.form-control:-webkit-autofill,
html body .card .vcp-autofill-surface.form-control:autofill,
html body .admin-provider-settings-card .vcp-autofill-surface.form-control:-webkit-autofill,
html body .admin-provider-settings-card .vcp-autofill-surface.form-control:autofill {
    -webkit-text-fill-color: var(--text-muted) !important;
    caret-color: var(--text-muted) !important;
    color: var(--text-muted) !important;
    background-image: none !important;
    transition: background-color 99999s ease-out 0s !important;
    animation: none !important;
    animation-name: none !important;
    animation-fill-mode: none !important;
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
    box-shadow: 0 0 0 1000px var(--surface) inset !important;
}

/* Auth login password — cover with --input-bg */
html body .vcp-auth__field .form-control:-webkit-autofill,
html body .vcp-auth__field .form-control:-webkit-autofill:hover,
html body .vcp-auth__field .form-control:-webkit-autofill:active,
html body .vcp-auth__field .form-control:autofill,
html body .vcp-auth__field .form-control:autofill:hover,
html body .vcp-auth__field .form-control:autofill:active {
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
    color: var(--text) !important;
    background-image: none !important;
    transition: background-color 99999s ease-out 0s !important;
    animation: none !important;
    animation-name: none !important;
    animation-fill-mode: none !important;
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
}

html body .vcp-auth__field .form-control:-webkit-autofill:focus,
html body .vcp-auth__field .form-control:autofill:focus {
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
    color: var(--text) !important;
    background-image: none !important;
    transition: background-color 99999s ease-out 0s !important;
    animation: none !important;
    animation-name: none !important;
    animation-fill-mode: none !important;
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset, 0 0 0 3px var(--focus-ring) !important;
    box-shadow: 0 0 0 1000px var(--input-bg) inset, 0 0 0 3px var(--focus-ring) !important;
}