@import 'css/variables.css';

/* Base document styles */
html,
body {
    font-family: var(--font-family);
    margin: var(--margin-none);
    padding: var(--padding-none);
    height: var(--size-full-height);
    background: var(--color-bg-dark);
    color: var(--color-text);
    overflow-x: var(--overflow-hidden);
    overflow-y: var(--overflow-hidden);
    /* Changed from auto to hidden - main-content handles scrolling */
}

.preserve-line-breaks {
    white-space: var(--text-wrap-pre-line);
}

/* ==========================================================================
   GLOBAL SCROLLBAR STYLING
   ========================================================================== */

/* Webkit Scrollbars (Chrome, Safari, Edge, Opera) */
::-webkit-scrollbar {
    width: var(--size-xxs);
    height: var(--size-xxs);
}

::-webkit-scrollbar-track {
    background: var(--color-bg-main);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
    background: var(--color-bg-main);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-medium);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

::-webkit-scrollbar-thumb:active {
    background: var(--color-secondary);
}

::-webkit-scrollbar-corner {
    background: var(--color-bg-main);
}

/* Firefox Scrollbars */
* {
    scrollbar-width: var(--scrollbar-width-thin);
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Links */
a,
.btn-link {
    color: var(--color-primary);
}

/* Primary buttons */
.btn-primary {
    color: var(--color-text-on-primary);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Focus rings (buttons, links, inputs) */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow:
        0 0 0 var(--border-thin) var(--color-bg-main),
        0 0 0 var(--spacing-xs) var(--color-secondary);
}

/* Layout helpers */
.content {
    /* padding customizable */
}

/* Remove outline on focused headings */
h1:focus {
    outline: var(--outline-none);
}

/* Validation outlines */
.valid.modified:not([type=checkbox]) {
    outline: var(--border-thin) solid var(--color-success-border);
}

.invalid {
    outline: var(--border-thin) solid var(--color-error-border);
}

.validation-message {
    color: var(--color-error);
}

/* Blazor error boundary banner */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat var(--spacing-md)/var(--spacing-xl),
        var(--color-error-bg);
    padding: var(--padding-md) var(--padding-md) var(--padding-md) calc(var(--spacing-md) + var(--size-lg) + var(--spacing-xs));
    color: var(--color-error);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Floating labels */
.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
    color: var(--color-text-muted);
    text-align: var(--text-align-end);
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
    text-align: var(--text-align-start);
}

/* ========================================================================== 
   🌈 UNIVERSAL AUTOFILL FIX (PENETRATES ISOLATED FILES)
   ========================================================================== */

/* ========================================================================== 
   🌙 UNIVERSAL AUTOFILL + FOCUS FIX (WORKS IN DARK/LIGHT + ISOLATED)
   ========================================================================== */

:root,
.light {
    --autofill-bg: var(--color-bg-main);
    --autofill-text: var(--color-text);
}

.dark {
    --autofill-bg: var(--color-bg-dark);
    --autofill-text: var(--color-text);
}

/* === Chrome / Edge / Safari === */
/* Target all autofill states including unfocused autofilled inputs */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:not(:focus),
input:-webkit-autofill:not(:hover),
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
textarea:-webkit-autofill:not(:focus),
textarea:-webkit-autofill:not(:hover),
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
select:-webkit-autofill:not(:focus),
select:-webkit-autofill:not(:hover) {
    transition: background-color 5000s ease-in-out 0s !important;
    -webkit-text-fill-color: var(--color-text) !important;
    caret-color: var(--color-text) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--color-bg-dark) inset !important;
    box-shadow: 0 0 0px 1000px var(--color-bg-dark) inset !important;
    background-color: var(--color-bg-dark) !important;
    background-image: none !important;
}

/* === Firefox === */
/* Target all autofill states including unfocused autofilled inputs */
input:-moz-autofill,
input:-moz-autofill:hover,
input:-moz-autofill:focus,
input:-moz-autofill:not(:focus),
textarea:-moz-autofill,
textarea:-moz-autofill:hover,
textarea:-moz-autofill:focus,
textarea:-moz-autofill:not(:focus),
select:-moz-autofill,
select:-moz-autofill:hover,
select:-moz-autofill:focus,
select:-moz-autofill:not(:focus) {
    box-shadow: 0 0 0px 1000px var(--color-bg-dark) inset !important;
    -moz-text-fill-color: var(--color-text) !important;
    caret-color: var(--color-text) !important;
    background-color: var(--color-bg-dark) !important;
    background-image: none !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* === Floating Label Support (Cross-Browser) === */

/* Chrome / Edge / Safari / Opera / Brave */
input:-webkit-autofill+label,
input:-webkit-autofill:hover+label,
input:-webkit-autofill:focus+label,
input:-webkit-autofill:active+label,
input:-webkit-autofill:valid+label,
input:-webkit-autofill:not(:focus)+label,
textarea:-webkit-autofill+label,
textarea:-webkit-autofill:hover+label,
textarea:-webkit-autofill:focus+label,
textarea:-webkit-autofill:active+label,
textarea:-webkit-autofill:valid+label,
textarea:-webkit-autofill:not(:focus)+label,
select:-webkit-autofill+label,
select:-webkit-autofill:hover+label,
select:-webkit-autofill:focus+label,
select:-webkit-autofill:active+label,
select:-webkit-autofill:valid+label,
select:-webkit-autofill:not(:focus)+label {
    transform: translateY(var(--size-xs-neg-1-125x)) !important;
    color: var(--color-primary) !important;
    font-size: var(--font-size-sm) !important;
}

/* Firefox */
input:-moz-autofill+label,
input:-moz-autofill:hover+label,
input:-moz-autofill:focus+label,
input:-moz-autofill:valid+label,
input:-moz-autofill:not(:focus)+label,
textarea:-moz-autofill+label,
textarea:-moz-autofill:hover+label,
textarea:-moz-autofill:focus+label,
textarea:-moz-autofill:valid+label,
textarea:-moz-autofill:not(:focus)+label,
select:-moz-autofill+label,
select:-moz-autofill:hover+label,
select:-moz-autofill:focus+label,
select:-moz-autofill:valid+label,
select:-moz-autofill:not(:focus)+label {
    transform: translateY(var(--size-xs-neg-1-125x)) !important;
    color: var(--color-primary) !important;
    font-size: var(--font-size-sm) !important;
}