/* KS21 Color Palette - Global CSS Variables */
:root {
    /* Background Colors */
    --ks21-primary: #f6f6f6;
    --ks21-secondary: #cccccc;
    --ks21-disabled: #e8e8e8;
    --ks21-highlight: #ef7d00;
    --ks21-light-highlight: #fbcb97;
    --ks21-light: #ffffff;
    --ks21-dark: #333333;
    --ks21-hover: #f0f0f0;

    /* Border Colors */
    --ks21-border-default: #E0E0E0;

    /* Text Colors */
    --ks21-text-primary: #383838;
    --ks21-text-secondary: #979797;
    --ks21-text-highlight: #ef7d00;
    --ks21-text-light: #ffffff;
    --ks21-text-dark: #000000;
    --ks21-text-link: #2563EB;
    --ks21-text: #383838;
}

/* Fix for black border/outline issue on h1 elements during app startup */
h1, h2, h3, h4, h5, h6 {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

/* Prevent focus styles on page titles during Blazor app initialization */
.text-3xl.font-bold.text-gray-800 {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

.text-3xl.font-bold.text-gray-800:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Additional utility classes for specific styling needs */
.glassmorphism-panel {
    background-color: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Login page specific background image */
.login-background {
    background-image: url('/images/login-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Navigation menu styling using KS21 colors */
.nav-item {
    color: var(--ks21-text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-item:hover {
    color: var(--ks21-text-highlight);
    text-decoration: none;
}

.nav-item.active {
    color: var(--ks21-text-highlight);
    text-decoration: none;
}