/* Professional Layout and Gradient Theme system for SEQA Slides App */

/* Base Styles & Resets */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
}

/* Sidebar and Simulation Drawer Transition Helpers */
#sidebar.collapsed {
    width: 0px !important;
    opacity: 0 !important;
    border-right-width: 0px !important;
    overflow: hidden;
}

#simulation-panel.open {
    width: 55% !important;
    opacity: 1 !important;
    border-left-width: 1px !important;
}

/* Slide Panel Collapsing and Auto-expansion of Simulation Panel */
#slide-panel.collapsed {
    width: 0px !important;
    max-width: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    opacity: 0 !important;
    overflow: hidden;
    flex: none !important;
}

.slides-hidden #simulation-panel.open,
.slides-hidden #simulation-panel {
    width: 100% !important;
    flex: 1 !important;
    position: relative !important;
    opacity: 1 !important;
    border-left-width: 0px !important;
}

@media (max-width: 1024px) {
    #simulation-panel.open {
        width: 100% !important;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 40; /* below sidebar */
        overflow-y: auto;
    }
    
    #sidebar {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 280px !important;
        z-index: 50; /* above simulation panel */
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.3);
    }
    
    #sidebar.collapsed {
        transform: translateX(-280px);
        width: 0px !important;
        box-shadow: none;
    }

    /* Keep absolute drawer backgrounds consistent with active themes */
    .theme-light #sidebar { background-color: #ffffff !important; }
    .theme-slate-dark #sidebar { background-color: #0f172a !important; }
    .theme-navy #sidebar { background-color: #020617 !important; }
    .theme-projector #sidebar { background-color: #000000 !important; }
}


@media (max-width: 640px) {
    #slide-panel {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    #slide-title {
        font-size: 1.4rem !important;
    }
    #app-footer {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.6rem 1rem !important;
        font-size: 0.7rem;
    }
    #app-footer > div {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    /* Prevent any header overflow */
    #app-header {
        overflow: hidden;
    }
}

/* Mobile sub-toolbar styling */
#mobile-toolbar {
    background-color: inherit;
}
.theme-light #mobile-toolbar {
    background-color: #ffffff;
    border-color: #e2e8f0;
}
.theme-slate-dark #mobile-toolbar {
    background-color: rgba(15, 23, 42, 0.95);
    border-color: #1e293b;
}
.theme-navy #mobile-toolbar {
    background-color: rgba(2, 6, 23, 0.98);
    border-color: #0f172a;
}
.theme-projector #mobile-toolbar {
    background-color: #000000;
    border-color: #222222;
}


/* -------------------------------------------------------------
 * THEME 1: Professional Light (Indigo/Slate Gradients)
 * ------------------------------------------------------------- */
.theme-light {
    background-color: #f8fafc;
    color: #334155;
}
.theme-light #app-header,
.theme-light #app-footer,
.theme-light aside,
.theme-light #slide-panel {
    background-color: #ffffff;
    border-color: #e2e8f0;
    color: #475569;
}
.theme-light #simulation-panel {
    background-color: #f8fafc;
    border-color: #e2e8f0;
}
.theme-light h1, .theme-light h2, .theme-light h3, .theme-light h4, .theme-light h5, .theme-light h6 {
    color: #0f172a;
}
.theme-light ::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.2);
}
.theme-light ::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.4);
}

/* -------------------------------------------------------------
 * THEME 2: Professional Slate Dark (Default - Slate/Indigo Gradients)
 * ------------------------------------------------------------- */
.theme-slate-dark {
    background: linear-gradient(135deg, #090d16, #0f172a);
    color: #cbd5e1;
}
.theme-slate-dark #app-header,
.theme-slate-dark #app-footer,
.theme-slate-dark aside,
.theme-slate-dark #slide-panel {
    background-color: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(10px);
    border-color: #1e293b;
    color: #94a3b8;
}
.theme-slate-dark #simulation-panel {
    background-color: rgba(9, 13, 22, 0.95);
    border-color: #1e293b;
}
.theme-slate-dark h1, .theme-slate-dark h2, .theme-slate-dark h3, .theme-slate-dark h4, .theme-slate-dark h5, .theme-slate-dark h6 {
    color: #f8fafc;
}
.theme-slate-dark ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.2);
}
.theme-slate-dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.4);
}

/* -------------------------------------------------------------
 * THEME 3: Midnight Navy (Deep Navy/Cyan Gradients)
 * ------------------------------------------------------------- */
.theme-navy {
    background: linear-gradient(135deg, #020617, #0f172a);
    color: #94a3b8;
}
.theme-navy #app-header,
.theme-navy #app-footer,
.theme-navy aside,
.theme-navy #slide-panel {
    background-color: rgba(2, 6, 23, 0.9);
    backdrop-filter: blur(12px);
    border-color: #0f172a;
    color: #94a3b8;
}
.theme-navy #simulation-panel {
    background-color: rgba(2, 6, 23, 0.98);
    border-color: #0f172a;
}
.theme-navy h1, .theme-navy h2, .theme-navy h3, .theme-navy h4, .theme-navy h5, .theme-navy h6 {
    color: #e2e8f0;
}
.theme-navy ::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.2);
}
.theme-navy ::-webkit-scrollbar-thumb:hover {
    background: rgba(6, 182, 212, 0.4);
}

/* -------------------------------------------------------------
 * THEME 4: High-Contrast Projector (Pitch Black/Amber Gradients)
 * ------------------------------------------------------------- */
.theme-projector {
    background-color: #000000;
    color: #ffffff;
}
.theme-projector #app-header,
.theme-projector #app-footer,
.theme-projector aside,
.theme-projector #slide-panel {
    background-color: #000000;
    border-color: #222222;
    color: #ffffff;
}
.theme-projector #simulation-panel {
    background-color: #000000;
    border-color: #222222;
}
.theme-projector h1, .theme-projector h2, .theme-projector h3, .theme-projector h4, .theme-projector h5, .theme-projector h6 {
    color: #ffffff;
}
.theme-projector #slide-title {
    color: #ffaa00 !important; /* High contrast amber indicator */
}
.theme-projector ::-webkit-scrollbar-thumb {
    background: #ffaa00;
}

/* -------------------------------------------------------------
 * Callout blocks & aesthetic components
 * ------------------------------------------------------------- */
.callout-why {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), transparent);
}
.theme-light .callout-why {
    background: #fffbeb;
}

.callout-what {
    border-left: 4px solid #6366f1;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.08), transparent);
}
.theme-light .callout-what {
    background: #f5f3ff;
}

/* Custom list bullets */
.slide-bullet-list {
    list-style-type: none;
}
.slide-bullet-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.75rem;
}
.slide-bullet-list li::before {
    content: "➔";
    position: absolute;
    left: 0;
    top: 0.1rem;
    font-weight: bold;
    color: #6366f1;
}
.theme-navy .slide-bullet-list li::before {
    color: #06b6d4;
}
.theme-projector .slide-bullet-list li::before {
    color: #ffaa00;
}

/* Animation on Slide transition */
.slide-fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Controls style keys */
kbd {
    box-shadow: 0 1.5px 0 rgba(0, 0, 0, 0.15);
}

/* Grid & Resizing indicators */
.animated-flow-path {
    stroke-dasharray: 6;
    animation: dash 1.2s linear infinite;
}
@keyframes dash {
    to {
        stroke-dashoffset: -24;
    }
}

/* Prevent overlapping of text during font scale changes */
#slide-content-container,
#slide-content-container * {
    line-height: 1.5 !important;
}

/* Sidebar font size adjustments */
.syllabus-lecture-btn,
.active-lecture-btn {
    font-size: 0.85rem !important; /* Increased from text-xs (0.75rem) */
}

/* Theme-specific active and inactive states in sidebar */
.theme-light .active-lecture-btn {
    color: #4f46e5 !important;
    background-color: rgba(79, 70, 229, 0.08) !important;
    border-color: rgba(79, 70, 229, 0.2) !important;
}
.theme-light .syllabus-lecture-btn {
    color: #475569 !important;
}

.theme-slate-dark .active-lecture-btn {
    color: #a5b4fc !important; /* Indigo-300: 10% lighter/softer than Indigo-500 */
    background-color: rgba(165, 180, 252, 0.1) !important;
    border-color: rgba(165, 180, 252, 0.25) !important;
}
.theme-slate-dark .syllabus-lecture-btn {
    color: #94a3b8 !important;
}

.theme-navy .active-lecture-btn {
    color: #67e8f9 !important; /* Cyan-300: 10% lighter/brighter active state */
    background-color: rgba(103, 232, 249, 0.1) !important;
    border-color: rgba(103, 232, 249, 0.25) !important;
}
.theme-navy .syllabus-lecture-btn {
    color: #94a3b8 !important;
}

.theme-projector .active-lecture-btn {
    color: #ffaa00 !important; /* Amber high-contrast */
    background-color: rgba(255, 170, 0, 0.15) !important;
    border-color: #ffaa00 !important;
}
.theme-projector .syllabus-lecture-btn {
    color: #ffffff !important;
}

/* Developed with Love Heart Pulse Animation */
@keyframes pulse-heart {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.25);
    }
}
.animate-pulse-heart {
    animation: pulse-heart 0.9s infinite;
    display: inline-block;
}