html, body {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: #f8f9fa;
    color: #212529;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

a, .btn-link {
    color: #0066cc;
    transition: all 0.2s ease;
}

    a:hover, .btn-link:hover {
        color: #0052a3;
        text-decoration: underline;
    }

.btn-primary {
    color: #fff;
    background: #0066cc;
    border: 1px solid #0066cc;
    box-shadow: 0 2px 4px rgba(0, 102, 204, 0.2);
    transition: all 0.2s ease;
}

    .btn-primary:hover {
        background: #0052a3;
        border-color: #0052a3;
        box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3);
        transform: translateY(-1px);
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem rgba(13, 27, 42, 0.5), 0 0 0 0.25rem rgba(0, 191, 255, 0.5);
}

.content {
    padding-top: 1.1rem;
    background: transparent;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Mobile responsiveness - global base styles only */
/* Specific authenticated page mobile styles are in MainLayout.razor.css */
@media (max-width: 640.98px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box;
    }

    /* Prevent horizontal scrolling on all pages */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* But allow tables to scroll horizontally if needed */
    .table-container,
    .table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #198754;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.15);
}

.invalid {
    outline: 1px solid #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.validation-message {
    color: #dc3545;
    font-size: 13px;
    margin-top: 5px;
}

.blazor-error-boundary {
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    border-radius: 8px;
    padding: 1rem 1rem 1rem 3.7rem;
    color: #842029;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
}

    .blazor-error-boundary::before {
        content: "⚠";
        position: absolute;
        left: 1rem;
        font-size: 1.8rem;
        color: #dc3545;
    }

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

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

/* Global form control font size override */
.form-control,
input.form-control,
textarea.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="time"],
textarea,
select.form-control {
    font-size: 12px !important;
}

    .form-control::placeholder,
    input::placeholder,
    textarea::placeholder {
        font-size: 11px !important;
    }

    .form-control::-webkit-input-placeholder {
        font-size: 11px !important;
    }

    .form-control::-moz-placeholder {
        font-size: 11px !important;
        opacity: 1;
    }

    .form-control:-ms-input-placeholder {
        font-size: 11px !important;
    }

/* Global overrides to fix main.css transparent input fields */
/* Fix all input fields to have white background and visible borders */
/* EXCLUDE checkboxes and radio buttons - they need their default appearance */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="search"],
input[type="url"],
textarea,
select,
.form-control {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #ced4da !important;
    color: #212529 !important;
    text-transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Ensure checkboxes and radio buttons are visible - override main.css appearance: none and opacity: 0 */
/* EXCLUDE hidden checkboxes like sidebar toggles - they should remain hidden */
input[type="checkbox"]:not(.sidebar-toggle-input):not([style*="display: none"]):not([hidden]),
input[type="radio"]:not([style*="display: none"]):not([hidden]) {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    -ms-appearance: auto !important;
    appearance: auto !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    border-width: 1px !important;
    border-style: solid !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    float: none !important;
}

/* Keep sidebar toggle checkbox hidden - ALL possible selectors with maximum hiding */
.sidebar-toggle-input,
input.sidebar-toggle-input,
input#sidebar-toggle,
input[type="checkbox"].sidebar-toggle-input,
input[type="checkbox"]#sidebar-toggle,
input[type="checkbox"][id="sidebar-toggle"],
input[type="checkbox"][class*="sidebar-toggle"],
#sidebar-toggle,
[id="sidebar-toggle"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: fixed !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transform: scale(0) translateX(-9999px) translateY(-9999px) !important;
    pointer-events: none !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    z-index: -9999 !important;
    content: "" !important;
    transition: none !important;
}

/* Ensure checkbox stays hidden in ALL states including during transitions */
.sidebar-toggle-input:checked,
.sidebar-toggle-input:not(:checked),
.sidebar-toggle-input:focus,
.sidebar-toggle-input:active,
.sidebar-toggle-input:hover,
input.sidebar-toggle-input:checked,
input#sidebar-toggle:checked,
input[type="checkbox"].sidebar-toggle-input:checked,
input[type="checkbox"]#sidebar-toggle:checked {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: scale(0) translateX(-9999px) translateY(-9999px) !important;
    transition: none !important;
}

/* Specific overrides for exam pages */
.choice-option input[type="checkbox"],
.choice-option input[type="radio"],
.choice-checkbox-label input[type="checkbox"],
.choice-checkbox-label input[type="radio"] {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    -ms-appearance: auto !important;
    appearance: auto !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    border-width: 1px !important;
    border-style: solid !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    float: none !important;
    accent-color: #1e3a5f !important;
}

input[type="radio"] {
    border-radius: 50% !important;
}

    input[type="checkbox"]:checked,
    input[type="radio"]:checked {
        background-color: #1e3a5f !important;
        border-color: #1e3a5f !important;
        background-image: none !important;
    }

        input[type="checkbox"]:checked::before,
        input[type="radio"]:checked::before {
            content: "" !important;
            display: block !important;
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
        }

        input[type="checkbox"]:checked::before {
            width: 4px !important;
            height: 8px !important;
            border: solid white !important;
            border-width: 0 2px 2px 0 !important;
            transform: translate(-50%, -60%) rotate(45deg) !important;
        }

        input[type="radio"]:checked::before {
            width: 8px !important;
            height: 8px !important;
            background: white !important;
            border-radius: 50% !important;
        }

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #1e3a5f !important;
    color: #212529 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1) !important;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: #adb5bd !important;
    text-transform: none !important;
    opacity: 1 !important;
}

/* Override main.css uppercase headings - keep headings in normal case */
h1, h2, h3, h4, h5, h6 {
    text-transform: none !important;
}

/* But allow specific elements that should be uppercase to override */
/* h1.major, h2.major, etc. can have uppercase if needed via their own CSS */

/* Footer copyright - smaller and positioned lower */
#footer .inner .copyright {
    margin-top: 3em !important;
    margin-bottom: 0.5em !important;
    padding-bottom: 1em !important;
}

#footer .inner .copyright li {
    font-size: 0.75em !important;
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Fix text glitching on page load - prevent camera-like flickering */
/* Only apply to About Us, Contact Us, and Services pages */
#page-wrapper.public-page.is-preload #banner .logo,
#page-wrapper.public-page #banner .logo {
    -moz-transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
    -ms-transform: translateY(0) !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    -moz-transition: opacity 0.6s ease, transform 0.6s ease !important;
    -webkit-transition: opacity 0.6s ease, transform 0.6s ease !important;
    -ms-transition: opacity 0.6s ease, transform 0.6s ease !important;
    transition: opacity 0.6s ease, transform 0.6s ease !important;
}

#page-wrapper.public-page.is-preload #banner h2,
#page-wrapper.public-page #banner h2 {
    opacity: 1 !important;
    -moz-transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    -ms-transform: translateX(0) !important;
    transform: translateX(0) !important;
    -moz-filter: blur(0) !important;
    -webkit-filter: blur(0) !important;
    -ms-filter: blur(0) !important;
    filter: blur(0) !important;
    -moz-transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease !important;
    -webkit-transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease !important;
    -ms-transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease !important;
    transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease !important;
}

#page-wrapper.public-page.is-preload #banner p,
#page-wrapper.public-page #banner p {
    opacity: 1 !important;
    -moz-transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    -ms-transform: translateX(0) !important;
    transform: translateX(0) !important;
    -moz-filter: blur(0) !important;
    -webkit-filter: blur(0) !important;
    -ms-filter: blur(0) !important;
    filter: blur(0) !important;
    -moz-transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease !important;
    -webkit-transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease !important;
    -ms-transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease !important;
    transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease !important;
}

/* Prevent all animations and transitions during preload to avoid glitching - only for public pages */
#page-wrapper.public-page.is-preload *,
#page-wrapper.public-page.is-preload *:before,
#page-wrapper.public-page.is-preload *:after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Ensure content is always visible and stable - only for public pages */
#page-wrapper.public-page {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Prevent layout shifts - only for public pages */
#page-wrapper.public-page #banner .logo,
#page-wrapper.public-page #banner h2,
#page-wrapper.public-page #banner p {
    will-change: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Prevent content blinking - hide page until ready, then show smoothly */
#page-wrapper.is-preload {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#page-wrapper:not(.is-preload) {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Prevent all transitions and animations during preload to avoid blinking */
#page-wrapper.is-preload *,
#page-wrapper.is-preload *::before,
#page-wrapper.is-preload *::after {
    -moz-animation: none !important;
    -webkit-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
}

/* ============================================
   GLOBAL STYLES ONLY - Applies to ALL pages
   ============================================
   Note: Authenticated page-specific styles have been moved to MainLayout.razor.css
   to completely separate public and non-public page styling.
   ============================================ */