@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Montserrat:wght@400;600;700&family=Poppins:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&family=Outfit:wght@400;600;700&family=Lato:wght@400;700&family=Ubuntu:wght@400;500;700&family=Josefin+Sans:wght@400;600;700&family=Lexend:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');

:root {
    --font-app: 'Inter', system-ui, -apple-system, sans-serif;
    --color-primary: #0b73da;
    /* Light Mode Primary (Blue) */
    --color-bg-light: #f8fafc;
    --color-bg-dark: #0a1128;
    --toast-success: #10b981;
    --toast-error: #ef4444;
    --toast-warning: #f59e0b;
    --toast-info: #3b82f6;
}

.dark {
    --color-primary: #f97316;
    /* Dark Mode Primary (P7 Orange) */
}

/* Custom styles can be added here */
body {
    font-family: var(--font-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Global Border Radius Enforcement (Strict 4px for Controls) */
input,
select,
textarea,
button,
[role="button"],
.btn {
    border-radius: 4px !important;
}

/* Refined Focus State (Soften Rings) */
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 92%) !important;
    /* Disables standard tailwind-forms ring */
}

/* --- Tailwind-based Form Validation (Bootstrap-like) --- */
.was-validated input:invalid,
.was-validated select:invalid,
.was-validated textarea:invalid {
    border-color: #ef4444 !important;
    /* accent-error color */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ef4444'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ef4444' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated input:invalid:focus,
.was-validated select:invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ef4444;
}

.was-validated :invalid~.invalid-feedback {
    display: block;
}

/* Pace.js Theme - Modernized with Variables */
.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.pace-inactive {
    display: none;
}

.pace .pace-progress {
    background: var(--color-primary);
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 3px;
    box-shadow: 0 0 10px var(--color-primary);
    transition: all 0.2s ease;
}

/* Page Loader Overlay Logic */
body.loaded #page-loader {
    opacity: 0;
    pointer-events: none;
}

@keyframes loader-grow {
    0% {
        transform: scaleX(0);
        transform-origin: left;
    }

    49% {
        transform: scaleX(1);
        transform-origin: left;
    }

    50% {
        transform: scaleX(1);
        transform-origin: right;
    }

    100% {
        transform: scaleX(0);
        transform-origin: right;
    }
}

/* Global hover class for non-active hyperlinks */
.nav-link-hover {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link-hover:hover {
    background-color: #f1f5f9 !important;
    color: var(--color-primary) !important;
}

.dark .nav-link-hover:hover {
    background-color: #1e293b !important;
    color: var(--color-primary) !important;
}