/* Vollanalyse Specific Styles */

/* Fonts - Loaded via fonts-local.css */

/* Color Utility Classes (matching vollanalyse.html config) */
/* Brand Colors */
.text-brand-blue { color: #2c3e98; }
.bg-brand-blue { background-color: #2c3e98; }
.border-brand-blue { border-color: #2c3e98; }

.text-brand-dark { color: #1e2b6e; }
.bg-brand-dark { background-color: #1e2b6e; }
.border-brand-dark { border-color: #1e2b6e; }

.text-brand-light { color: #eef2ff; }
.bg-brand-light { background-color: #eef2ff; }
.border-brand-light { border-color: #eef2ff; }

/* Style Colors (with 'style-' prefix as used in HTML) */
.text-style-driver { color: #dc2626; }
.bg-style-driver { background-color: #dc2626; }
.border-style-driver { border-color: #dc2626; }

.text-style-planner { color: #2563eb; }
.bg-style-planner { background-color: #2563eb; }
.border-style-planner { border-color: #2563eb; }

.text-style-connector { color: #16a34a; }
.bg-style-connector { background-color: #16a34a; }
.border-style-connector { border-color: #16a34a; }

.text-style-innovator { color: #eab308; }
.bg-style-innovator { background-color: #eab308; }
.border-style-innovator { border-color: #eab308; }

/* Legacy/Alternative names (without 'style-') for compatibility */
.text-driver { color: #dc2626; }
.bg-driver { background-color: #dc2626; }
.border-driver { border-color: #dc2626; }

.text-planner { color: #2563eb; }
.bg-planner { background-color: #2563eb; }
.border-planner { border-color: #2563eb; }

.text-connector { color: #16a34a; }
.bg-connector { background-color: #16a34a; }

/* 
 * Header Analyse - Mode Toggle Styles 
 * Extracted from header-analyse.php
 */

/* Hide the original toggle buttons in the plugin output if present */
#sf-app .flex.bg-slate-100.p-1.rounded-lg,
#sf-app .flex.bg-slate-200.p-1.rounded-lg {
    display: none !important;
}

/* Override AnalysisApp JS styling to enforce Plugin look */
/* AnalysisApp adds: text-brand, border, border-gray-200, bg-white, shadow-sm */
/* We want: text-slate-900 (active), text-slate-600 (inactive), no border */

button.mode-btn {
    border: none !important;
    cursor: pointer !important;
    outline: none !important;
    /* Ensure base plugin styles */
    font-size: 0.75rem !important; /* text-xs */
    line-height: 1rem !important;
    font-weight: 500 !important;
    border-radius: 0.375rem !important;
    padding: 0.375rem 0.75rem !important;
    /* Match Tailwind transition-all default */
    transition-property: all !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 200ms !important;
}

/* Active State (bg-white class added by JS) */
button.mode-btn.bg-white {
    background-color: #ffffff !important;
    color: #0f172a !important; /* text-slate-900 */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important; /* shadow */
    transform: scale(1.02); /* Subtle pop effect */
}

/* Inactive State */
button.mode-btn:not(.bg-white) {
    background-color: transparent !important;
    color: #64748b !important; /* text-slate-500 (slightly lighter for better contrast with active) */
    box-shadow: none !important;
    transform: scale(1);
}

button.mode-btn:not(.bg-white):hover {
    color: #0f172a !important; /* hover:text-slate-900 */
    background-color: rgba(255, 255, 255, 0.5) !important; /* Subtle hover bg */
}