/* SAE AutoSim Hub — consolidated styles (extracted from index.html) */

/* ─── Dark Mode Overrides ─── */
html.sae-dark .bg-white { background-color: #101b31 !important; }
html.sae-dark .bg-slate-50 { background-color: #0b1424 !important; }
html.sae-dark .bg-slate-100 { background-color: #16233c !important; }
html.sae-dark .bg-slate-200 { background-color: #1e2d4a !important; }
html.sae-dark .text-slate-800 { color: #e2e8f0 !important; }
html.sae-dark .text-slate-700 { color: #cbd5e1 !important; }
html.sae-dark .text-slate-600 { color: #94a3b8 !important; }
html.sae-dark .text-slate-500 { color: #7c8db0 !important; }
html.sae-dark .border-slate-100, html.sae-dark .border-slate-200,
html.sae-dark .border-slate-300 { border-color: #24344f !important; }
html.sae-dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #24344f !important; }
html.sae-dark [class*="bg-gradient-to"]:not(.bg-clip-text):not([class*="from-cyan-"]):not([class*="from-emerald-"]):not([class*="from-green-"]):not([class*="from-indigo-"]) { background-image: linear-gradient(145deg, #101b31, #0d1830) !important; }
html.sae-dark select, html.sae-dark input:not([type="checkbox"]):not([type="radio"]) {
    background-color: #16233c !important; color: #e2e8f0 !important;
    border-color: #2d3f5e !important;
}
html.sae-dark .hover\:bg-white:hover { background-color: #1a2947 !important; }
/* Tinted chips & badges */
html.sae-dark [class*="bg-blue-100"] { background-color: rgba(59,130,246,.15) !important; }
html.sae-dark [class*="bg-orange-100"] { background-color: rgba(249,115,22,.15) !important; }
html.sae-dark [class*="bg-amber-100"] { background-color: rgba(245,158,11,.15) !important; }
html.sae-dark [class*="bg-yellow-100"] { background-color: rgba(234,179,8,.15) !important; }
html.sae-dark [class*="bg-red-100"] { background-color: rgba(239,68,68,.15) !important; }
html.sae-dark [class*="bg-green-100"] { background-color: rgba(34,197,94,.15) !important; }
html.sae-dark [class*="bg-purple-100"] { background-color: rgba(168,85,247,.15) !important; }
html.sae-dark [class*="bg-teal-100"] { background-color: rgba(20,184,166,.15) !important; }
html.sae-dark [class*="bg-emerald-100"] { background-color: rgba(16,185,129,.15) !important; }
html.sae-dark [class*="bg-indigo-100"] { background-color: rgba(99,102,241,.15) !important; }
/* Light row backgrounds */
html.sae-dark [class*="hover:bg-blue-50"]:hover { background-color: rgba(59,130,246,.08) !important; }
html.sae-dark [class*="hover:bg-orange-50"]:hover { background-color: rgba(249,115,22,.08) !important; }
html.sae-dark [class*="hover:bg-amber-50"]:hover { background-color: rgba(245,158,11,.08) !important; }
html.sae-dark [class*="hover:bg-red-50"]:hover { background-color: rgba(239,68,68,.08) !important; }
html.sae-dark [class*="hover:bg-green-50"]:hover { background-color: rgba(34,197,94,.08) !important; }
html.sae-dark [class*="hover:bg-teal-50"]:hover { background-color: rgba(20,184,166,.08) !important; }
html.sae-dark [class*="hover:bg-purple-50"]:hover { background-color: rgba(168,85,247,.08) !important; }
html.sae-dark [class*="hover:bg-emerald-50"]:hover { background-color: rgba(16,185,129,.08) !important; }
html.sae-dark [class*="bg-red-50"] { background-color: rgba(239,68,68,.1) !important; }
html.sae-dark [class*="bg-emerald-50"] { background-color: rgba(16,185,129,.1) !important; }
/* Accent text on dark: boost contrast */
html.sae-dark .text-teal-700 { color: #5eead4 !important; }
html.sae-dark .text-emerald-700 { color: #6ee7b7 !important; }
html.sae-dark .text-purple-700 { color: #c4b5fd !important; }
html.sae-dark .text-blue-700 { color: #93c5fd !important; }
html.sae-dark .text-amber-600 { color: #fbbf24 !important; }
html.sae-dark .text-amber-700 { color: #fcd34d !important; }
html.sae-dark .text-cyan-700 { color: #67e8f9 !important; }
html.sae-dark .text-sky-700 { color: #7dd3fc !important; }
/* Level badges */
html.sae-dark .lvl0 { background-color: rgba(239,68,68,.15) !important; color: #fca5a5 !important; }
html.sae-dark .lvl2 { background-color: rgba(59,130,246,.15) !important; color: #93c5fd !important; }
html.sae-dark .lvl45 { background-color: rgba(34,197,94,.15) !important; color: #86efac !important; }
/* Weight row */
html.sae-dark .weight-row { background: linear-gradient(90deg, rgba(34,197,94,.08), rgba(16,185,129,.05)) !important; border-color: rgba(34,197,94,.2) !important; }
/* Download button */
html.sae-dark .download-btn { background: #1a2947 !important; color: #cbd5e1 !important; border-color: #2d3f5e !important; }
/* Guide tab active */
html.sae-dark .guide-tab.active { background: #1a2947 !important; color: #67e8f9 !important; }
/* Mobile drawer */
html.sae-dark #mobile-nav-drawer { background: #101b31 !important; }
html.sae-dark #mobile-nav-drawer a { color: #cbd5e1 !important; }
html.sae-dark #mobile-nav-drawer a:hover { background: rgba(255,255,255,.05) !important; }
html.sae-dark #mobile-nav-drawer hr { border-color: #24344f !important; }
/* Code chips in guides */
html.sae-dark [class*="bg-indigo-100"][class*="text-indigo-700"] { background: rgba(99,102,241,.15) !important; color: #a5b4fc !important; }
html.sae-dark [class*="bg-green-100"][class*="text-green-700"] { background: rgba(34,197,94,.15) !important; color: #86efac !important; }
html.sae-dark [class*="bg-orange-100"][class*="text-orange-700"] { background: rgba(249,115,22,.15) !important; color: #fdba74 !important; }

.case-view { display: none; }
    body.view-case .case-view { display: block; }
    body.view-case section:not(.case-view):not(#emissions-matrix):not([data-main-keep]) { display: none; }
    #view-tabs button { transition: all .2s; }

:root {
            --primary: #0EA5E9;
            --primary-dark: #028AC4;
            --secondary: #6366F1;
            --dark: #1E293B;
            --light: #F8FAFC;
            --accent: #F59E0B;
        }
        * { scroll-behavior: smooth; }
        body { font-family: 'Inter', system-ui, sans-serif; }
        .gear-rotate { display: inline-block; animation: rotate 8s linear infinite; }
        @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .vehicle-icon { position: absolute; animation: around 6s linear infinite; opacity: 0.8; }
        @keyframes around { 0% { transform: rotate(0deg) translateX(20px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(20px) rotate(-360deg); } }
        .fade-in { animation: fadeIn 0.8s ease-in; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .card-hover:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
        .download-btn { transition: all 0.3s ease; border: 2px dashed var(--primary); background: white; color: #374151; }
        .download-btn:hover { background: var(--primary); color: white; transform: scale(1.02); border-color: var(--primary); }
        .level-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.7em; font-weight: 600; }
        .lvl0 { background: #FEE2E2; color: #991B2B; }
        .lvl2 { background: #DBEAFE; color: #1E40AF; }
        .lvl45 { background: #DCFCE7; color: #166534; }
        .mpr-knob { -webkit-appearance: none; width: 100%; height: 8px; border-radius: 4px; background: linear-gradient(to right, var(--primary), var(--secondary)); outline: none; }
        .mpr-knob::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: white; border: 2px solid var(--primary); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
        .platform-btn { transition: all 0.2s ease; }
        .platform-btn.active { background: rgba(255,255,255,0.95) !important; color: #0EA5E9 !important; border-color: white !important; }
        .nav-link { transition: color 0.2s ease; }
        .nav-link:hover { color: var(--primary); }
        .weight-row { background: linear-gradient(90deg, #ECFDF5 0%, #F0FDF4 100%) !important; font-weight: 600; }
        .weight-row td { border-top: 2px solid #22C55E !important; }
        #sim-canvas { border-radius: 12px; display: block; width: 100%; }
        .capacity-bar { transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 200; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
        .modal-overlay.hidden { display: none; }
        .code-block { background: #1E293B; color: #E2E8F0; border-radius: 10px; padding: 20px; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre; max-height: 60vh; overflow-y: auto; }
        .code-block .kw { color: #C084FC; }
        .code-block .fn { color: #67E8F9; }
        .code-block .st { color: #86EFAC; }
        .code-block .cm { color: #94A3B8; font-style: italic; }
        .code-block .num { color: #FCA5A5; }
        .guide-tab.active { color: #312E81 !important; border-bottom-color: #6366F1 !important; background: white; }
        .guide-panel { animation: fadeIn 0.3s ease-in; }
        .toast-msg { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: #059669; color: white; padding: 12px 28px; border-radius: 12px; font-weight: 600; z-index: 300; opacity: 0; transition: all 0.4s cubic-bezier(0.4,0,0.2,1); pointer-events: none; box-shadow: 0 8px 30px rgba(0,0,0,0.2); }
        .toast-msg.show { opacity: 1; transform: translateX(-50%) translateY(0); }
        @media (max-width: 768px) { .hero-bg { min-height: 500px; } .flag { font-size: 1.1em; } }


/* ─── Case-Study Toolbar (segmented scenario + unified export bar) ─── */
.scn-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    height: 40px; padding: 0 1.15rem;
    border-radius: .6rem; font-size: .78rem; font-weight: 600;
    color: #94a3b8; background: transparent; border: 1px solid transparent;
    transition: all .2s ease; cursor: pointer; white-space: nowrap;
}
.scn-btn i { font-size: .85rem; }
.scn-btn:hover { color: #e2e8f0; background: rgba(148,163,184,.08); }
.scn-btn:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
.scn-btn.is-active-a { color: #fff; background: linear-gradient(135deg,#dc2626,#b91c1c); border-color:#f87171; box-shadow:0 4px 14px -4px rgba(220,38,38,.55); }
.scn-btn.is-active-b { color: #fff; background: linear-gradient(135deg,#059669,#047857); border-color:#34d399; box-shadow:0 4px 14px -4px rgba(16,185,129,.55); }

.exp-btn {
    display: inline-flex; align-items: center; height: 36px;
    padding: 0 .95rem; border-radius: .55rem;
    font-size: .74rem; font-weight: 600; letter-spacing:.01em;
    color: #e2e8f0; background: #16233c;
    border: 1px solid #2d3f5e; cursor: pointer; white-space: nowrap;
    transition: all .2s ease;
}
.exp-btn:hover { background: #1d2f52; border-color: #3b5280; transform: translateY(-1px); }
.exp-btn:active { transform: translateY(0); }
.exp-btn:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
.exp-btn i { font-size: .82rem; margin-right: .45rem; }
.ic-sumo   { color: #38bdf8; }
.ic-vissim { color: #a78bfa; }
.ic-pdf    { color: #fb7185; }
.ic-csv    { color: #60a5fa; }
.unit-chip { font-family: ui-monospace, monospace; color: #fbbf24; border-color: #4a5a7a; }
[dir="rtl"] .exp-btn i { margin-right: 0; margin-left: .45rem; }

/* ─── Mobile Navigation Drawer ─── */
#mobile-nav-drawer.open { transform: translateX(0); }
[dir="rtl"] #mobile-nav-drawer { left: auto; right: 0; transform: translateX(100%); }
[dir="rtl"] #mobile-nav-drawer.open { transform: translateX(0); }

/* ─── Touch Targets: minimum 44px ─── */
#mobile-menu-btn { min-width: 44px; min-height: 44px; }
#theme-toggle { min-width: 44px; min-height: 44px; }
#lang-select { min-height: 44px; }
#view-tabs button { min-height: 40px; }
.exp-btn { min-height: 40px; }
.scn-btn { min-height: 44px; }

/* ─── Focus-Visible: keyboard accessibility ─── */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}
.nav-link:focus-visible { outline-offset: 4px; }
.ch-btn:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
.download-btn:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }

/* ─── Unified Transition Speed ─── */
#view-tabs button { transition: all .2s ease; }

/* ─── Print Styles ─── */
@media print {
    header, nav, #mobile-menu-btn, #mobile-nav-drawer, #mobile-nav-backdrop,
    .exp-btn, .scn-btn, #theme-toggle, #lang-select, #view-tabs,
    .card-hover, .guide-panel, .modal-overlay, .toast-msg,
    footer, .more-menu { display: none !important; }
    body { background: white !important; color: black !important; }
    .bg-white, .bg-slate-50, .bg-slate-100, .bg-slate-800, .bg-slate-900 {
        background: white !important; color: black !important;
    }
    .text-white, .text-slate-300, .text-slate-400 { color: black !important; }
    section { page-break-inside: avoid; }
    a { text-decoration: underline; }
    canvas, iframe { display: none !important; }
}