/* ================================================
   NOVA Dynamic Branding CSS
   Generated: 2025-10-13 19:09:51   Brand: default   ================================================ */

:root {
    /* Primary Brand Colors */
    --brand-primary: #333399;
    --brand-primary-rgb: 51, 51, 153;
    --brand-secondary: #1e8ccc;
    --brand-secondary-rgb: 30, 140, 204;
    --brand-accent: #25328a;
    --brand-accent-rgb: 37, 50, 138;
    --brand-warning: #FF0099;
    
    /* Background & Text */
    --brand-background: #ebebeb;
    --brand-text: #000000;
    --brand-fragenbox: #FFFFFF;
    
    /* Gradients */
    --brand-gradient-start: #333399;
    --brand-gradient-end: #25328a;
    --brand-gradient: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
    
    /* Opacity Variations */
    --brand-primary-10: rgba(51, 51, 153, 0.1);
    --brand-primary-20: rgba(51, 51, 153, 0.2);
    --brand-primary-50: rgba(51, 51, 153, 0.5);
    --brand-primary-80: rgba(51, 51, 153, 0.8);
}

/* ================================================
   LEGACY SELECTORS COMPATIBILITY
   Mapping old CSS classes to new variables
   ================================================ */

/* Header & Titles */
#left_column h1, 
.teilnehmername, 
.noname, 
fieldset legend, 
#startbox h2 {
    color: var(--brand-primary);
}

/* Gradient Background */
.gradient {
    background-color: var(--brand-primary);
    background: var(--brand-gradient);
}

/* Links */
a, 
a:hover {
    color: var(--brand-secondary);
}

a:hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Warning/Important */
#wertepaare2 .wichtig, 
.wichtig {
    color: var(--brand-warning);
}

/* Fragenbox */
#fragenbox {
    color: var(--brand-fragenbox);
    background-color: var(--brand-primary);
}

/* Body & Background */
html, 
body {
    color: var(--brand-text);
    background-color: var(--brand-background);
}

/* ================================================
   NOVA COMPONENTS STYLING
   Modern components using CSS variables
   ================================================ */

/* Buttons */
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
}

.btn-secondary {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: white;
}

/* Progress Bar */
.progress-bar {
    background-color: var(--brand-primary-20);
}

.progress-bar .progress-fill {
    background-color: var(--brand-primary);
}

/* Cards & Panels */
.card-header {
    background-color: var(--brand-primary-10);
    border-bottom: 2px solid var(--brand-primary);
}

.card-primary {
    border-color: var(--brand-primary);
}

/* Form Elements */
.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem var(--brand-primary-20);
}

.custom-radio input:checked ~ .radio-visual,
.custom-checkbox input:checked ~ .checkbox-visual {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* Navigation */
.nav-link.active {
    color: var(--brand-primary);
    border-bottom: 2px solid var(--brand-primary);
}

/* Alerts & Messages */
.alert-primary {
    background-color: var(--brand-primary-10);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* Tables */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--brand-primary-10);
}

.table-hover tbody tr:hover {
    background-color: var(--brand-primary-20);
}

/* Badges */
.badge-primary {
    background-color: var(--brand-primary);
}

.badge-secondary {
    background-color: var(--brand-secondary);
}

/* Loading & Spinners */
.spinner-border {
    border-color: var(--brand-primary-20);
    border-right-color: var(--brand-primary);
}

/* Tooltips */
.tooltip .tooltip-inner {
    background-color: var(--brand-primary);
}

/* ================================================
   RESPONSIVE UTILITIES
   ================================================ */

@media (max-width: 768px) {
    :root {
        /* Adjust for mobile if needed */
    }
}

/* ================================================
   PRINT STYLES
   ================================================ */

@media print {
    :root {
        --brand-primary: #000000;
        --brand-secondary: #333333;
        --brand-background: #ffffff;
    }
}