/* ==========================================================================
   ENTERPRISE AI PLATFORM - BLAZOR WASM HIGH-CONTRAST ACCESSIBILITY STYLESHEET (v2)
   Target Path: D:\DEVELOPMENT\Projects\AI_Engineering_Multi_Agent_System\dotnet\Presentation\wwwroot\app.css
   Role: UI Presentation Layer Themes & Accessibility Enhancements (UAT Cleaned v2)
   ========================================================================== */

/* 1. Global CSS Theme Variables (Web Content Accessibility Guidelines 2.1 Compliant) */
.dark-theme {
    --bg-color: #0b0c10;          /* Deep sleek slate background */
    --text-color: #f1f5f9;        /* Ultra-crisp off-white for body text */
    --muted-text: #94a3b8;        /* Medium-light slate gray (Highly readable for labels/metadata) */
    
    --header-bg: #1f2833;         /* Dark navy-charcoal header bar */
    --panel-bg: #151a21;          /* Elevated card and panel backgrounds */
    --panel-border: #2d3748;      /* Structural panel borders */
    
    /* High-Vibrancy Accent Colors for Dark Backgrounds */
    --accent-color: #66fcf1;      /* Electric Ice Cyan (Primary actions and titles) */
    --accent-hover: #45f3ff;      /* High-brightness cyan hover */
    --danger-color: #ff6b6b;      /* Vibrant Coral Red (Replaces low-contrast dark red for warnings) */
    --success-color: #51cf66;     /* Bright Mint Green (Success indicators) */
    --info-color: #38bdf8;        /* Sky Blue */
    
    --input-bg: #0d1117;          /* High-density input field backgrounds */
    --placeholder-color: #cbd5e1; /* High-contrast light gray-slate (replaces #64748b for absolute legibility in dark mode) */
    
    --terminal-bg: #121212;       /* Slate Black (Windows Terminal standard) */
    --terminal-text: #e2e8f0;     /* Crisp light-gray terminal text */
}

.light-theme {
    --bg-color: #f8f9fa;          /* Neutral warm-white background */
    --text-color: #0f172a;        /* Deep slate for high-contrast reading */
    --muted-text: #475569;        /* Medium-dark slate for labels and subtitles */
    
    --header-bg: #ffffff;         /* Clean white header bar */
    --panel-bg: #ffffff;          /* Flat white panel cards */
    --panel-border: #cbd5e1;      /* Distinct light-gray borders */
    
    /* High-Contrast Corporate Brand Accent Colors */
    --accent-color: #0284c7;      /* Clean Royal Blue */
    --accent-hover: #0369a1;      /* Deep royal blue hover */
    --danger-color: #dc2626;      /* Rich crimson red for alerts */
    --success-color: #16a34a;     /* Deep forest green */
    --info-color: #0284c7;
    
    --input-bg: #ffffff;          /* Pure white input fields */
    --placeholder-color: #64748b; /* Accessible classic placeholder gray */
    
    /* Keep the terminal dark and technical even in light mode for code syntax readability */
    --terminal-bg: #121212;       
    --terminal-text: #e2e8f0;     
}

/* 2. Global Typography & Density Scaling */
html {
    font-size: 14px; /* Default high-density baseline for workstation environments (User Preferred) */
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* 3. Header & Navigation Branding */
header {
    background-color: var(--header-bg) !important;
    border-bottom: 1px solid var(--panel-border) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.navbar-brand {
    color: var(--accent-color) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
}

/* 4. Panel Cards & Headers (Ensures High Visibility of "Local Workstation" and others) */
.card {
    background-color: var(--panel-bg) !important;
    border: 1px solid var(--panel-border) !important;
    color: var(--text-color) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.card-header {
    background-color: var(--header-bg) !important;
    border-bottom: 1px solid var(--panel-border) !important;
    color: var(--text-color) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

.list-group-item {
    border-color: var(--panel-border) !important;
    color: var(--text-color) !important;
    background-color: transparent !important;
}

/* 5. Headings & Sub-titles Contrast Overrides */
h1, h2, h3, h4, h5, h6, .card-title {
    color: var(--text-color) !important;
    font-weight: 700 !important;
}

/* Specific text highlight categories for high visibility */
.text-primary {
    color: var(--accent-color) !important;
}

.text-muted {
    color: var(--muted-text) !important;
    font-weight: 500 !important;
}

.text-danger {
    color: var(--danger-color) !important;
}

.text-success {
    color: var(--success-color) !important;
}

.text-info {
    color: var(--info-color) !important;
}

/* 6. Form Labels & Input Placeholder Readability Overrides */

/* Master Label Class for form fields (e.g. TARGET COGNITIVE MODEL, TEMPERATURE) */
.form-label, label {
    color: var(--muted-text) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    display: inline-block;
}

/* Input Fields & Textareas */
.form-control {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--panel-border) !important;
    font-size: 0.95rem !important;
}

.form-control:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 252, 241, 0.25) !important;
}

/* Standardized Cross-Browser Placeholder Visibility (Fixes Invisible Prompt Placeholders) */
.form-control::placeholder {
    color: var(--placeholder-color) !important;
    opacity: 1.0 !important; /* Forces 100% opacity override for maximum browser readability */
}

.form-control:-ms-input-placeholder {
    color: var(--placeholder-color) !important;
    opacity: 1.0 !important;
}

.form-control::-ms-input-placeholder {
    color: var(--placeholder-color) !important;
    opacity: 1.0 !important;
}

.form-control::-webkit-input-placeholder {
    color: var(--placeholder-color) !important;
    opacity: 1.0 !important;
}

.form-control:-moz-placeholder {
    color: var(--placeholder-color) !important;
    opacity: 1.0 !important;
}

.form-control::-moz-placeholder {
    color: var(--placeholder-color) !important;
    opacity: 1.0 !important;
}

/* 7. Native Select Dropdown Enhancements (Fixes Invisible Chevrons & Plain Text-box look) */
.form-select {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--panel-border) !important;
    font-size: 0.95rem !important;
    padding-right: 2.25rem !important; /* Safety padding for arrow */
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}

.form-select:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 252, 241, 0.25) !important;
}

/* Dynamic High-Contrast Dropdown Chevron Injection using SVGs */
.dark-theme .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2366fcf1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

.light-theme .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230284c7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* 8. WebKit Numeric Spinner Force-Visibility Override (Fixes Hidden Temp Spinners) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 1 !important;
    height: 1.5rem;
    cursor: pointer;
    background-color: var(--panel-border);
    border-radius: 2px;
}

/* 9. Buttons Style Parity */
.btn-primary {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #0b0c10 !important; /* Guarantees dark text on highly vibrant primary buttons */
    font-weight: 700 !important;
}

.btn-primary:hover {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: #0b0c10 !important;
}

/* 10. Micro-Console Terminal Log Display */
.bg-black {
    background-color: var(--terminal-bg) !important;
    color: var(--terminal-text) !important;
    border: 1px solid var(--panel-border) !important;
    transition: background-color 0.25s ease;
}

.whitespace-pre-wrap {
    white-space: pre-wrap;
}

.spinner-border-sm {
    color: var(--accent-color);
}