/**
 * Section4-Transactions Specific Styles
 * Transaction processing, ACID properties, concurrency control
 */

/* Section4 Theme Colors */
:root {
    --section4-primary: #8b5cf6;
    --section4-secondary: #7c3aed;
    --section4-accent: #a855f7;
}

/* Override primary colors for Transactions section */
.transactions-section {
    --primary: var(--section4-primary);
    --primary-light: var(--section4-accent);
    --accent-purple: var(--section4-secondary);
}

/* Minimum font size for SVG visibility */
svg, .svg-container {
    min-font-size: 14px !important;
    font-size: max(14px, 1rem) !important;
}

svg text, svg tspan {
    font-size: 14px !important;
    min-font-size: 14px !important;
}

/* Image Sizing */
.schedule-image {
    width: 70%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
}

/* Microschedule Images */
.medium-image {
    width: 95%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.2s;
}

.medium-image:hover {
    transform: scale(1.02);
}

.small-image {
    width: 50%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.2s;
}

.small-image:hover {
    transform: scale(1.02);
}

/* Correctness Challenge Visual Components */
.correctness-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.principle-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 100%);
    border: 2px solid var(--section4-primary);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.2s ease;
}

.principle-card:hover {
    transform: translateY(-2px);
}

.principle-card h3 {
    margin-top: 0;
    color: var(--section4-primary);
    font-size: 1.1rem;
}

.card-detail {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

/* Definition Cards */
.definition-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.definition-card {
    background: white;
    border: 2px solid;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.definition-card.serial {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, white 100%);
}

.definition-card.interleaved {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, white 100%);
}

.definition-card h4 {
    margin-top: 0;
    font-size: 1.1rem;
}

.example-box {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(139, 92, 246, 0.05);
    border-left: 3px solid var(--section4-primary);
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Balance Container */
.balance-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-radius: 12px;
}

.balance-side {
    flex: 1;
    padding: 1rem;
    text-align: center;
}

.balance-side h4 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.balance-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.balance-icon {
    font-size: 2rem;
    color: var(--section4-primary);
}

.magic-callout {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 1.2rem;
    margin: 2rem 0;
    text-align: center;
}

.magic-callout h4 {
    margin-top: 0;
    color: #d97706;
}

/* =====================================================
   NAVIGATION SIDEBAR STYLING (SECTION2 AESTHETICS)
   ===================================================== */

.nav-subsection {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    margin-top: 0rem;
}

.nav-subsection h4 {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin: 0.3rem 0 0.15rem 0;
    padding-left: 2rem;
}

.nav-subsection .nav-link {
    font-size: 0.875rem;
    padding: 0.25rem 1.5rem 0.25rem 3rem;
    line-height: 1.3;
}

/* =====================================================
   VISUAL COMPONENTS FOR MOTIVATION & PRESENTATIONS
   ===================================================== */

/* Stat Cards and Grids */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.stat-card {
    background: white;
    border: 2px solid var(--section4-primary);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.2);
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--section4-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-sublabel {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    font-style: italic;
}

/* Comparison Grids */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.vs-card {
    padding: 1.5rem;
    border-radius: 12px;
    border: 2px solid transparent;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.vs-card.ticketmaster {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    border-color: var(--section4-primary);
}

.vs-card.visa {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #3b82f6;
}

.vs-card.amazon {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: #10b981;
}

.vs-card h4 {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.vs-card.ticketmaster h4 { color: var(--section4-secondary); }
.vs-card.visa h4 { color: #1e40af; }
.vs-card.amazon h4 { color: #047857; }

/* Scale Indicators */
.scale-comparison {
    margin: 1.5rem 0;
}

.scale-bar {
    height: 12px;
    background: var(--section4-primary);
    border-radius: 6px;
    margin: 0.5rem 0;
    position: relative;
    overflow: hidden;
}

.scale-bar.visa { 
    background: #3b82f6; 
    width: 30%; 
}

.scale-bar.amazon { 
    background: #10b981; 
    width: 100%; 
}

.scale-bar.ticketmaster { 
    background: var(--section4-primary); 
    width: 85%; 
}

.scale-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

/* Impact and Problem Boxes */
.impact-box {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 2px solid #ef4444;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
    position: relative;
}

.impact-box::before {
    content: "⚠️";
    position: absolute;
    top: -10px;
    right: 20px;
    font-size: 2rem;
    background: white;
    padding: 0 0.5rem;
}

.impact-box h4 {
    color: #991b1b;
    margin: 0 0 1rem 0;
    font-weight: 700;
}

.impact-box ul {
    margin: 0;
    color: #7f1d1d;
}

/* Evolution and Comparison Cards */
.evolution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 2rem 0;
}

/* Two-column fallback for smaller content */
.evolution-grid.cols-2 {
    grid-template-columns: 1fr 1fr;
}

.evolution-card {
    padding: 1.5rem;
    border-radius: 12px;
    border: 2px solid transparent;
}

.evolution-card.classic {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-color: #9ca3af;
}

.evolution-card.modern {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    border-color: var(--section4-primary);
}

.evolution-card.future {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border-color: #0284c7;
}

.evolution-card h4 {
    margin: 0 0 1rem 0;
    font-weight: 700;
}

.evolution-card.classic h4 { color: #374151; }
.evolution-card.modern h4 { color: var(--section4-secondary); }
.evolution-card.future h4 { color: #0c4a6e; }

/* Challenge and Tech Grids */
.challenge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.challenge-item {
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    border-left: 4px solid var(--section4-primary);
}

.challenge-item h4 {
    margin: 0 0 0.75rem 0;
    color: var(--section4-secondary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.challenge-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.tech-item {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border: 1px solid var(--section4-accent);
    border-radius: 8px;
    padding: 1rem;
}

.tech-item strong {
    color: var(--section4-secondary);
    font-weight: 600;
}

/* Call to Action Boxes */
.cta-box {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    color: var(--section4-secondary);
    border: 2px solid var(--section4-accent);
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1.5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.08);
}

.cta-box::before {
    content: "🚀";
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    opacity: 0.4;
}

.cta-box h3 {
    color: var(--section4-secondary);
    margin: 0 0 0.75rem 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.cta-box p {
    margin: 0;
    color: #6b21a8;
    font-size: 1rem;
    line-height: 1.6;
}

/* Side-by-Side Layout Utilities */
.side-by-side-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
    align-items: start;
}

.side-by-side-wrapper.ratio-1-2 {
    grid-template-columns: 1fr 2fr;
}

.side-by-side-wrapper.ratio-2-1 {
    grid-template-columns: 2fr 1fr;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stat-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .comparison-grid {
        grid-template-columns: 1fr;
    }
    
    .evolution-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .evolution-grid.cols-2 {
        grid-template-columns: 1fr;
    }
    
    .side-by-side-wrapper {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-value {
        font-size: 2rem;
    }
    
    .vs-card {
        padding: 1rem;
    }
}

/* Transaction Visualizations */
.transaction-diagram {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border: 2px solid var(--section4-primary);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
}

/* ACID Properties Tables */
.acid-table th {
    background: linear-gradient(135deg, var(--section4-primary) 0%, var(--section4-secondary) 100%);
    color: white;
}

.acid-property {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

.acid-good { color: var(--section4-primary); }
.acid-warning { color: #f59e0b; }
.acid-bad { color: #ef4444; }

/* Transaction State Visualizations */
.transaction-state {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
}

.transaction-state.active {
    background: #f3e8ff;
    color: #581c87;
}

.transaction-state.committed {
    background: #dbeafe;
    color: #1e40af;
}

.transaction-state.aborted {
    background: #fee2e2;
    color: #991b1b;
}

.transaction-state.waiting {
    background: #fef3c7;
    color: #92400e;
}

/* Lock Type Badges */
.lock-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lock-badge.shared { background: #10b981; color: white; }
.lock-badge.exclusive { background: #ef4444; color: white; }
.lock-badge.intent { background: #f59e0b; color: white; }
.lock-badge.deadlock { background: #6b7280; color: white; }

/* Isolation Level Indicators */
.isolation-level {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.isolation-level.read-uncommitted { 
    background: #fee2e2; 
    color: #991b1b; 
    border: 1px solid #fecaca;
}

.isolation-level.read-committed { 
    background: #fef3c7; 
    color: #92400e; 
    border: 1px solid #fed7aa;
}

.isolation-level.repeatable-read { 
    background: #dbeafe; 
    color: #1e40af; 
    border: 1px solid #93c5fd;
}

.isolation-level.serializable { 
    background: #f3e8ff; 
    color: #581c87; 
    border: 1px solid #c4b5fd;
}

/* Concurrency Control Timeline */
.timeline {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    font-family: 'JetBrains Mono', monospace;
}

.timeline-step {
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
    padding: 0.5rem;
    border-radius: 4px;
}

.timeline-step.transaction-a {
    background: rgba(139, 92, 246, 0.1);
    border-left: 4px solid var(--section4-primary);
}

.timeline-step.transaction-b {
    background: rgba(168, 85, 247, 0.1);
    border-left: 4px solid var(--section4-accent);
}

.timeline-time {
    color: var(--section4-secondary);
    font-weight: 600;
    min-width: 60px;
}

.timeline-action {
    color: #374151;
    margin-left: 1rem;
}

/* Deadlock Detection Graph */
.deadlock-graph {
    background: white;
    border: 2px solid #fee2e2;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    text-align: center;
}

.deadlock-node {
    display: inline-block;
    background: var(--section4-primary);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 50%;
    margin: 0.5rem;
    font-weight: 600;
}

.deadlock-edge {
    color: #ef4444;
    font-weight: 600;
    margin: 0 0.5rem;
}

/* Recovery Log Entries */
.log-entry {
    font-family: 'JetBrains Mono', monospace;
    background: #1e293b;
    color: #e2e8f0;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    margin: 0.25rem 0;
    border-left: 4px solid var(--section4-primary);
}

.log-entry .lsn {
    color: #a855f7;
    font-weight: 600;
}

.log-entry .operation {
    color: #34d399;
    font-weight: 600;
}

.log-entry .transaction-id {
    color: #60a5fa;
}

/* Two-Phase Commit Protocol */
.protocol-phase {
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.protocol-phase.prepare {
    border-left: 4px solid #f59e0b;
}

.protocol-phase.commit {
    border-left: 4px solid #10b981;
}

.protocol-phase.abort {
    border-left: 4px solid #ef4444;
}

.protocol-message {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    color: #6b7280;
    font-style: italic;
}

/* Metrics Dashboard for Transaction Performance */
.transaction-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.metric-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--section4-primary);
}

.metric-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Tagline Box Styling for Transactions */
.tagline-box {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #faf5ff 100%);
    border: 1px solid #c4b5fd;
    color: #581c87;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.08);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tagline-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15);
    border-color: #a855f7;
}

.tagline-box::before {
    content: "🔒";
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    opacity: 0.15;
}

.tagline-box h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #581c87;
}

.tagline-box p {
    margin: 0.5rem 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #6b21a8;
}

.tagline-box .tagline-subtitle {
    font-size: 0.9rem;
    color: #7c3aed;
    font-style: italic;
}

.tagline-box a {
    color: var(--section4-secondary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.tagline-box a:hover {
    color: #6d28d9;
    text-decoration-thickness: 2px;
}

/* Compact version for other pages */
.tagline-box.compact {
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background: linear-gradient(135deg, #fafbfc 0%, #faf5ff 100%);
}

.tagline-box.compact h3 {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
    color: #581c87;
}

.tagline-box.compact p {
    font-size: 0.9rem;
    margin: 0.25rem 0;
    color: #6b21a8;
}

.tagline-box.compact::before {
    font-size: 2rem;
    right: 1.5rem;
}

/* =====================================================
   BUILDING TRANSACTIONS PAGE STYLES
   ===================================================== */

/* Kitchen Introduction */
.kitchen-intro {
    text-align: center;
    margin: 2rem 0 3rem 0;
}

.large-image {
    width: 95%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.2s;
}

.large-image:hover {
    transform: scale(1.02);
}

/* Approach Cards for Serial vs Concurrent */
.approach-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin: 1.5rem 0;
}

.approach-card.serial {
    border-left: 4px solid #ef4444;
    background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
}

.approach-card.concurrent {
    border-left: 4px solid #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #f0f9ff 100%);
}

.approach-card h4 {
    color: var(--section4-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.pros, .cons {
    background: rgba(255,255,255,0.7);
    padding: 1rem;
    border-radius: 8px;
}

.pros h5 {
    color: #059669;
    margin-bottom: 0.5rem;
}

.cons h5 {
    color: #dc2626;
    margin-bottom: 0.5rem;
}

/* Insight Box */
.insight-box {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    border: 2px solid var(--section4-primary);
    border-radius: 16px;
    padding: 2rem;
    margin: 2rem 0;
}

.insight-box h3 {
    color: var(--section4-secondary);
    margin-bottom: 1rem;
}

.isolation-examples {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.isolation-item {
    background: rgba(255,255,255,0.8);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.isolation-item h4 {
    margin-bottom: 1rem;
}

/* Database Overview */
.database-overview {
    text-align: center;
    margin: 3rem 0;
}

/* Analogy Mapping */
.analogy-mapping ul {
    list-style: none;
    padding: 0;
}

.analogy-mapping li {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    font-size: 1.1rem;
}

.analogy-mapping strong {
    color: var(--section4-primary);
}

/* Schedule Comparison */
.schedule-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.schedule-type {
    background: white;
    border: 2px solid var(--section4-primary);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.schedule-visual {
    margin: 1rem 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
}

.tx {
    display: inline-block;
    margin: 0.25rem 0;
}

.tx1 { color: #059669; }
.tx2 { color: #dc2626; }
.tx3 { color: #2563eb; }
.mixed { color: var(--section4-primary); }

/* Roadmap Grid */
.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.roadmap-item {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.roadmap-item.foundation {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-left: 4px solid #0284c7;
}

.roadmap-item.concurrency {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-left: 4px solid #059669;
}

.roadmap-item.recovery {
    background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
    border-left: 4px solid #ea580c;
}

.roadmap-item.distributed {
    background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%);
    border-left: 4px solid #d97706;
}

.step-number {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    background: var(--section4-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.roadmap-item h4 {
    margin-bottom: 1rem;
    color: var(--section4-secondary);
}

.roadmap-item p {
    margin: 0.5rem 0;
}

.roadmap-item p:first-of-type {
    font-weight: 600;
    color: var(--section4-primary);
}

/* Context Grid */
.context-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.context-item {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    border: 2px solid var(--section4-primary);
    text-align: center;
}

.context-item h4 {
    color: var(--section4-primary);
    margin-bottom: 1rem;
}

.context-item.ticketmaster {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
}

.context-item.banking {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.context-item.ecommerce {
    background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
}

/* Challenge Preview */
.challenge-preview {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid var(--section4-primary);
    border-radius: 16px;
    padding: 2rem;
    margin: 3rem 0;
}

.challenge-preview h3 {
    text-align: center;
    color: var(--section4-secondary);
    margin-bottom: 2rem;
}

.tension-visual {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2rem 0;
}

.tension-side {
    flex: 1;
    text-align: center;
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.tension-side h4 {
    color: var(--section4-primary);
    margin-bottom: 1rem;
}

.vs-symbol {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--section4-primary);
    margin: 0 2rem;
}

.challenge-question {
    background: rgba(139, 92, 246, 0.1);
    padding: 2rem;
    border-radius: 12px;
    margin-top: 2rem;
    text-align: center;
}

.challenge-question h4 {
    color: var(--section4-secondary);
    margin-bottom: 1rem;
}

/* Next Steps */
.next-steps {
    text-align: center;
    margin: 3rem 0;
}

.next-steps h3 {
    color: var(--section4-primary);
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.cta-button.primary {
    background: var(--section4-primary);
    color: white;
}

.cta-button.secondary {
    background: white;
    color: var(--section4-primary);
    border: 2px solid var(--section4-primary);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .pros-cons {
        grid-template-columns: 1fr;
    }
    
    .isolation-examples {
        grid-template-columns: 1fr;
    }
    
    .tension-visual {
        flex-direction: column;
        gap: 1rem;
    }
    
    .vs-symbol {
        margin: 1rem 0;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* =====================================================
   REORDERING RULES PAGE STYLES
   ===================================================== */

/* Reordering Examples */
.reordering-examples {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
}

.reorder-option {
    background: white;
    border: 2px solid var(--section4-primary);
    border-radius: 12px;
    padding: 1.5rem;
}

.reorder-option h4 {
    color: var(--section4-primary);
    margin-bottom: 1rem;
}

.sequence-steps {
    margin: 1rem 0;
}

.step {
    padding: 0.5rem 0;
    border-left: 3px solid rgba(139, 92, 246, 0.3);
    padding-left: 1rem;
    margin: 0.5rem 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
}

.result {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #10b981;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    font-weight: 600;
    color: #047857;
    text-align: center;
}

/* Performance Benefits */
.performance-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.benefit-item {
    background: rgba(255, 255, 255, 0.8);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--section4-primary);
}

.benefit-item h4 {
    color: var(--section4-secondary);
    margin-bottom: 0.5rem;
}

/* Control Box */
.control-box {
    background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
    border: 2px solid #ea580c;
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
}

.control-box h4 {
    color: #ea580c;
    margin-bottom: 1rem;
}

.code-example {
    background: #1e293b;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.code-example pre {
    color: #e2e8f0;
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
}

/* Bad/Good Sequences */
.bad-sequence, .good-sequence {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1rem 0;
}

.bad-sequence {
    border-left: 4px solid #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.good-sequence {
    border-left: 4px solid #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.sequence-display {
    background: rgba(255, 255, 255, 0.95);
    color: #1e293b;
    padding: 1.5rem;
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 1rem 0;
    border: 1px solid #cbd5e1;
}

.sequence-display strong {
    color: #0f172a;
    font-weight: 600;
}

.bad-result {
    background: #fecaca;
    color: #991b1b;
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    font-weight: 600;
}

.good-result {
    background: #bbf7d0;
    color: #047857;
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    font-weight: 600;
}

/* Integrity Explanation */
.integrity-explanation {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid var(--section4-primary);
    border-radius: 16px;
    padding: 2rem;
    margin: 2rem 0;
}

.integrity-requirements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.requirement {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 3px solid var(--section4-primary);
}

.requirement h4 {
    color: var(--section4-secondary);
    margin-bottom: 0.5rem;
}

/* Bridge Explanation */
.bridge-explanation {
    background: linear-gradient(135deg, #e0f2fe 0%, #b3e5fc 100%);
    border: 2px solid #0284c7;
    border-radius: 16px;
    padding: 2rem;
    margin: 3rem 0;
}

.bridge-explanation h3 {
    color: #0c4a6e;
    margin-bottom: 2rem;
    text-align: center;
}

.connection-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.connection-step {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    flex: 1;
    min-width: 200px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.step-number {
    width: 2rem;
    height: 2rem;
    background: #0284c7;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin: 0 auto 1rem auto;
}

.connection-step h4 {
    color: #0c4a6e;
    margin-bottom: 0.5rem;
}

.arrow {
    font-size: 1.5rem;
    color: #0284c7;
    font-weight: 700;
}

/* Next Topics */
.next-topics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.topic-preview {
    background: white;
    border: 2px solid var(--section4-primary);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.topic-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.2);
}

.topic-preview h4 {
    color: var(--section4-primary);
    margin-bottom: 1rem;
}

.preview-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 1rem;
}

/* Trade-off Visualization */
.tradeoff-visualization {
    background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
    border: 2px solid var(--section4-primary);
    border-radius: 16px;
    padding: 2rem;
    margin: 3rem 0;
}

.tradeoff-visualization h3 {
    color: var(--section4-secondary);
    text-align: center;
    margin-bottom: 2rem;
}

.tradeoff-scale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2rem 0;
    gap: 2rem;
}

.scale-side {
    flex: 1;
    background: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
}

.scale-side.safety {
    border: 2px solid #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.scale-side.performance {
    border: 2px solid #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.scale-side h4 {
    margin-bottom: 1rem;
}

.scale-side.safety h4 {
    color: #dc2626;
}

.scale-side.performance h4 {
    color: #059669;
}

.scale-center {
    text-align: center;
    padding: 1rem;
}

.balance-point {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.scale-center p {
    font-weight: 600;
    color: var(--section4-primary);
}

.solution-highlight {
    background: rgba(139, 92, 246, 0.1);
    padding: 2rem;
    border-radius: 12px;
    margin-top: 2rem;
    text-align: center;
}

.solution-highlight h4 {
    color: var(--section4-secondary);
    margin-bottom: 1rem;
}

/* Responsive Design for Reordering Rules */
@media (max-width: 768px) {
    .reordering-examples {
        grid-template-columns: 1fr;
    }
    
    .connection-flow {
        flex-direction: column;
    }
    
    .arrow {
        transform: rotate(90deg);
    }
    
    .tradeoff-scale {
        flex-direction: column;
        gap: 1rem;
    }
    
    .balance-point {
        font-size: 2rem;
    }
}

/* =====================================================
   VISUAL TIMELINE NOTATION STYLES
   ===================================================== */

/* Timeline Container */
.timeline-visual {
    background: white;
    border: 1px solid var(--section4-primary);
    border-radius: 6px;
    padding: 0.75rem;
    margin: 0.5rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.schedule-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--section4-secondary);
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Timeline Layout */
.timeline {
    margin: 2rem 0;
    position: relative;
    padding: 1rem 0;
}

.transaction-row {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    gap: 1rem;
    min-height: 50px;
}

.tx-label {
    font-size: 1.25rem;
    font-weight: 700;
    min-width: 40px;
    text-align: center;
}

.transaction-row.t1 .tx-label {
    color: #dc2626;
}

.transaction-row.t2 .tx-label {
    color: #2563eb;
}

/* Operation Boxes */
.operation-box {
    background: white;
    border: 2px solid;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 0.95rem;
    margin-right: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.transaction-row.t1 .operation-box {
    border-color: #dc2626;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #991b1b;
}

.transaction-row.t2 .operation-box {
    border-color: #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1e40af;
}

/* Timeline Arrow */
.timeline-arrow {
    position: absolute;
    bottom: -2rem;
    left: 60px;
    right: 2rem;
    height: 2px;
    background: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-weight: 600;
    color: #6b7280;
}

.timeline-arrow::after {
    content: "→";
    margin-left: 0.5rem;
    font-size: 1.25rem;
}

/* Balance Display */
.balance-display {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
    align-items: center;
}

.balance-table {
    text-align: center;
    flex: 0 0 auto;
}

.table-header {
    font-weight: 600;
    color: var(--section4-secondary);
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
}

.balance-table table {
    border-collapse: collapse;
    background: white;
    border: 1px solid var(--section4-primary);
    border-radius: 4px;
    overflow: hidden;
}

.balance-table th {
    background: var(--section4-primary);
    color: white;
    padding: 0.3rem 0.6rem;
    font-weight: 600;
    font-size: 0.7rem;
}

.balance-table td {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
}

.balance-table.initial th {
    background: #6b7280;
}

.balance-table.initial td {
    background: #f8fafc;
    color: #374151;
}

.balance-table.final td {
    background: #f0fdf4;
    color: #047857;
}

.balance-table.final.problem td {
    background: #fef2f2;
    color: #991b1b;
}

/* Problem Highlighting */
.problem-highlight {
    position: relative;
}

.problem-highlight::after {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 3px solid #ef4444;
    border-radius: 50%;
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Schedule Comparison Grid */
.schedule-comparison-visual {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 2rem 0;
}

/* Interleaved Timeline Special Styling */
.timeline.interleaved .transaction-row {
    position: relative;
}

.timeline.interleaved .operation-box {
    position: relative;
}

.timeline.interleaved .operation-box.delayed {
    margin-left: 8rem;
}

/* Result Status Indicators */
.result-status {
    text-align: center;
    padding: 0.35rem;
    border-radius: 4px;
    font-weight: 600;
    margin-top: 0.5rem;
    font-size: 0.75rem;
}

.result-status.ok {
    background: #f0fdf4;
    color: #047857;
    border: 1px solid #10b981;
}

.result-status.problem {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #ef4444;
}

/* Mathematical Notation Support */
.math-expression {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.8);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
}

/* Responsive Design for Timeline */
@media (max-width: 768px) {
    .balance-display {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .transaction-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .operation-box {
        margin-right: 0.25rem;
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
    
    .timeline-arrow {
        left: 40px;
    }
}

/* Horizontal Timeline Layout (matching screenshot) */
.timeline.horizontal {
    position: relative;
    padding: 0.5rem;
    margin: 0.5rem 0;
    background: white;
    border-radius: 6px;
}

.transaction-rows {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.transaction-row-horizontal {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 40px;
}

.transaction-row-horizontal .tx-label {
    font-weight: 700;
    font-size: 1rem;
    min-width: 2rem;
    text-align: center;
}

.transaction-row-horizontal.t1 .tx-label {
    color: #dc2626;
}

.transaction-row-horizontal.t2 .tx-label {
    color: #2563eb;
}

.operations-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    flex: 1;
    height: 32px;
    align-items: center;
}

.operation-box-horizontal {
    padding: 0.3rem 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 0.75rem;
    border: 2px solid;
    border-radius: 4px;
    background: white;
    width: 100%;
    max-width: 100px;
    text-align: center;
    box-sizing: border-box;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Grid positioning for operations */
.operation-box-horizontal.time-1 { grid-column: 1; }
.operation-box-horizontal.time-2 { grid-column: 2; }
.operation-box-horizontal.time-3 { grid-column: 3; }
.operation-box-horizontal.time-4 { grid-column: 4; }

.transaction-row-horizontal.t1 .operation-box-horizontal {
    border-color: #dc2626;
    color: #dc2626;
}

.transaction-row-horizontal.t2 .operation-box-horizontal {
    border-color: #2563eb;
    color: #2563eb;
}

/* Time Arrow */
.time-arrow {
    position: absolute;
    bottom: 0.25rem;
    left: 2.5rem;
    right: 0.5rem;
    height: 1px;
    background: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.time-arrow::after {
    content: "→ Time";
    font-weight: 600;
    color: #6b7280;
    margin-left: auto;
    background: white;
    padding-left: 0.25rem;
    font-size: 0.7rem;
}

/* Timeline with vertical operations layout (keep for backward compatibility) */
.timeline.vertical {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.operation-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: white;
    border: 1px solid #cbd5e1;
}

.operation-step .tx-label {
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 2.5rem;
    text-align: center;
}

.operation-step.t1 {
    border-left: 4px solid #dc2626;
}

.operation-step.t1 .tx-label {
    color: #dc2626;
}

.operation-step.t2 {
    border-left: 4px solid #2563eb;
}

.operation-step.t2 .tx-label {
    color: #2563eb;
}

.operation-step .operation-box {
    flex: 1;
    padding: 0.5rem 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    background: #f1f5f9;
    border-radius: 6px;
    color: #334155;
    border: none;
    box-shadow: none;
}

/* =====================================================
   IMAGE MODAL FOR LECTURES
   ===================================================== */

/* Image Modal for Lectures */
.image-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 95%;
    max-height: 95%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 10001;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.modal-close:hover {
    color: #ff6b6b;
}

.modal-caption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #f1f1f1;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    text-align: center;
    max-width: 90%;
}