/* TeleCommandCenter Corporate Branding - COMPLETE OVERHAUL */
/* Color Palette: Navy Blue (#1e3a8a) and Light Blue (#3b82f6) */

:root {
    /* Brand Colors */
    --brand-navy: #1e3a8a;
    --brand-light-blue: #3b82f6;
    --brand-navy-dark: #153061;
    --brand-light-blue-light: #60a5fa;
    
    /* Override existing colors */
    --primary-color: var(--brand-navy);
    --primary-dark: var(--brand-navy-dark);
    --primary-light: var(--brand-light-blue);
    
    /* Corporate light theme */
    --bg-primary: #f5f7fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e9ecef;
    --bg-dark: #1e3a8a;
    --border-color: #d1d5db;
    
    /* Text colors - ensure proper contrast */
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-light: #ffffff;
    --text-on-dark: #ffffff;
}

/* Global light theme background */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Remove all dark backgrounds and animations */
body::before,
body::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}

/* Sidebar - Navy blue gradient */
.sidebar {
    background: linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    color: var(--text-light) !important;
}

/* Logo styling */
.logo {
    padding: 20px 15px;
    text-align: center;
    background: white;
    border-radius: 8px;
    margin: 10px;
}

.logo img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: 120px !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

/* EXCEPTION: Header logos sizing */
.demo-header .logo img,
header .logo img {
    max-height: 60px !important;
    max-width: 250px !important;
    height: auto !important;
    margin: 0 !important;
}

/* Remove tagline since logo has it */
.tagline {
    display: none;
}

/* Navigation items */
.nav-item {
    color: rgba(255, 255, 255, 0.95) !important;
    border-left: 3px solid transparent;
}

.nav-item:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    border-left-color: var(--brand-light-blue) !important;
    color: white !important;
}

.nav-item.active {
    background: rgba(59, 130, 246, 0.3) !important;
    border-left-color: var(--brand-light-blue) !important;
    color: white !important;
    font-weight: 600;
}

/* Buttons - SOLID COLORS ONLY */
.btn-primary,
.action-btn,
button.btn-primary,
a.btn-primary {
    background: var(--brand-navy) !important;
    background-color: var(--brand-navy) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-primary:hover,
.action-btn:hover {
    background: var(--brand-navy-dark) !important;
    background-color: var(--brand-navy-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(30, 58, 138, 0.3);
}

/* Cards - White on light background */
.stat-card,
.quick-actions,
.activity-section,
.chart-card,
.table-container,
.card,
[class*="card"] {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px;
    color: var(--text-primary) !important;
}

/* Stat icons - use brand colors */
.stat-icon.blue {
    background: var(--brand-navy) !important;
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
    color: var(--brand-navy) !important;
    font-weight: 600;
}

/* User menu */
.user-menu {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary) !important;
}

.user-avatar {
    background: var(--brand-navy) !important;
}

/* Status badges */
.status-badge.active {
    background: #dbeafe;
    color: var(--brand-navy);
    border: 1px solid #93c5fd;
}

/* Progress bars */
.progress-fill {
    background: var(--brand-navy) !important;
}

/* Form inputs */
.form-control:focus,
.form-select:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand-light-blue) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
}

/* Activity items */
.activity-item {
    background: var(--bg-tertiary);
    border-left: 3px solid transparent;
    color: var(--text-primary) !important;
}

.activity-item:hover {
    background: var(--bg-secondary);
    border-left-color: var(--brand-light-blue);
}

/* Tables */
table {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

thead {
    background: var(--bg-tertiary) !important;
    color: var(--brand-navy) !important;
}

tbody tr {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

tbody tr:hover {
    background: #f9fafb !important;
}

td, th {
    color: var(--text-primary) !important;
}

/* Demo badge */
.demo-badge {
    background: rgba(59, 130, 246, 0.15);
    color: var(--brand-light-blue);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* DEMO.CSS OVERRIDES - Force light theme */
.demo-header {
    background: var(--bg-secondary) !important;
    border-bottom: 2px solid var(--border-color) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    color: var(--text-primary) !important;
}

.side-panel {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    color: var(--text-primary) !important;
}

.demo-container {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.side-panel h2,
.side-panel h3 {
    color: var(--brand-navy) !important;
}

/* Logo images - Proper sizing for TeleCommandCenter logos */
.logo-img {
    max-height: 60px !important;
    max-width: 250px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Header logo container - no padding/background */
.demo-header .logo,
header .logo {
    padding: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* OVERRIDE: Header logos sizing */
.demo-header .logo img,
.demo-header .logo-img,
header .logo img,
header .logo-img {
    max-height: 60px !important;
    max-width: 250px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
}

.hero-logo {
    max-width: 600px !important;
    max-height: 250px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

.start-logo-img {
    max-width: 800px !important;
    max-height: 400px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* ============================================
   AGGRESSIVE TEXT CONTRAST FIXES
   ============================================ */

/* ALL SECTIONS - Light background means dark text */
.section {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.section * {
    color: inherit;
}

.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6 {
    color: var(--brand-navy) !important;
}

.section p,
.section span,
.section div,
.section li {
    color: var(--text-primary) !important;
}

/* Feature cards - WHITE background = DARK text */
.feature-card {
    background: #ffffff !important;
    color: var(--text-primary) !important;
}

.feature-card * {
    color: var(--text-primary) !important;
}

.feature-card h1,
.feature-card h2,
.feature-card h3,
.feature-card h4,
.feature-card .feature-title {
    color: var(--brand-navy) !important;
}

.feature-card p,
.feature-card span,
.feature-card li,
.feature-card .feature-description {
    color: var(--text-secondary) !important;
}

/* Highlight boxes - check background */
.highlight-box {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.highlight-box * {
    color: var(--text-primary) !important;
}

.highlight-box h1,
.highlight-box h2,
.highlight-box h3 {
    color: var(--brand-navy) !important;
}

/* Hero section - DARK background = LIGHT text */
.homepage-hero {
    background: var(--brand-navy) !important;
}

.hero-content {
    background: transparent !important;
}

.homepage-hero *,
.hero-content * {
    color: var(--text-light) !important;
}

.homepage-hero h1,
.homepage-hero h2,
.homepage-hero h3,
.homepage-hero p,
.homepage-hero span,
.hero-content h1,
.hero-content h2,
.hero-content h3,
.hero-content p,
.hero-content span,
.hero-title,
.hero-title-text,
.hero-subtitle {
    color: var(--text-light) !important;
}

/* Footer - DARK background = LIGHT text */
footer {
    background: var(--brand-navy) !important;
    color: var(--text-light) !important;
    border-top: 2px solid rgba(59, 130, 246, 0.3) !important;
}

footer * {
    color: var(--text-light) !important;
}

footer a {
    color: var(--brand-light-blue-light) !important;
}

footer a:hover {
    color: var(--text-light) !important;
}

/* Visual sections - check if dark or light */
.visual-section {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.visual-section * {
    color: var(--text-primary) !important;
}

.visual-section h1,
.visual-section h2,
.visual-section h3 {
    color: var(--brand-navy) !important;
}

/* Pricing sections */
.pricing-section,
.pricing-demo {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.pricing-section *,
.pricing-demo * {
    color: var(--text-primary) !important;
}

.pricing-section h1,
.pricing-section h2,
.pricing-section h3 {
    color: var(--brand-navy) !important;
}

/* Section titles and subtitles */
.section-title {
    color: var(--brand-navy) !important;
    -webkit-text-fill-color: var(--brand-navy) !important;
}

.section-subtitle {
    color: var(--text-secondary) !important;
}

/* OVERRIDE ALL WHITE TEXT ON LIGHT BACKGROUNDS */
[style*="color: #ffffff"],
[style*="color:#ffffff"],
[style*="color: white"],
[style*="color:white"] {
    /* Check parent background */
}

/* If parent has light background, force dark text */
.section [style*="color: #ffffff"],
.section [style*="color:#ffffff"],
.section [style*="color: white"],
.feature-card [style*="color: #ffffff"],
.feature-card [style*="color:#ffffff"],
.highlight-box [style*="color: #ffffff"],
.highlight-box [style*="color:#ffffff"],
.visual-section [style*="color: #ffffff"],
.visual-section [style*="color:#ffffff"] {
    color: var(--text-primary) !important;
}

/* If parent has dark background, keep light text */
.homepage-hero [style*="color: #ffffff"],
.homepage-hero [style*="color:#ffffff"],
.hero-content [style*="color: #ffffff"],
.hero-content [style*="color:#ffffff"],
footer [style*="color: #ffffff"],
footer [style*="color:#ffffff"] {
    color: var(--text-light) !important;
}

/* Content area */
.content-area {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.content-area * {
    color: inherit;
}

.main-content {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.main-content * {
    color: inherit;
}

/* Ensure paragraphs and text are visible */
p, span, div, li, td, th {
    color: inherit;
}

/* Force dark text on light backgrounds globally */
body,
.section,
.feature-card,
.highlight-box,
.visual-section,
.pricing-section {
    color: var(--text-primary) !important;
}

/* Force light text on dark backgrounds */
.homepage-hero,
.hero-content,
footer {
    color: var(--text-light) !important;
}