/* SIMULATOR - RETRO SCHEMATIC STYLE (Restored) */

.sim-embed {
    background-color: #F8F8F8;
    border: 2px solid #666;
    /* HEAVY BORDER */
    padding: 0;
    margin: 25px 0;
    font-family: var(--font-mono);
    box-shadow: none;
    border-radius: 0;
    /* Square corners */
}

.sim-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #AAA;
    padding: 10px;
    margin-bottom: 0;
    background: #EEE;
    /* Gray header bar */
}

.sim-title {
    font-weight: bold;
    font-size: 14px;
    font-family: var(--font-ui);
    color: #333;
    text-transform: none;
    /* Less modern */
}

.sim-controls {
    display: flex;
}

.sim-controls button,
button.btn {
    background: #DDD;
    border: 1px solid #666;
    /* Beveled look */
    border-radius: 2px;
    padding: 4px 10px;
    font-family: var(--font-ui);
    font-size: 11px;
    cursor: pointer;
    margin-left: 5px;
    color: #000;
    box-shadow: 1px 1px 0 #FFF inset;
}

.sim-controls button:active,
button.btn:active {
    background: #BBB;
    border-style: inset;
}

/* Canvas/Internal Area */
.sim-canvas,
.hierarchy-sim,
.cache-sim,
.prefetch-sim,
.tlb-sim,
.mesi-sim {
    background-color: #FFF;
    padding: 20px;
    position: relative;
    min-height: 200px;
    border-top: 1px solid #CCC;
}

/* Metrics */
.sim-metrics {
    font-size: 12px;
    font-family: var(--font-mono);
    border-top: 1px solid #CCC;
    padding: 10px;
    background: #FAFAFA;
    color: #333;
}

.metric-value {
    font-weight: bold;
    color: #000;
}

/* SPECIFIC SIMULATOR STYLES */

/* Transistor */
.mosfet {
    width: 60px;
    height: 60px;
    border: 2px solid #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: #FFF;
}

.mosfet.conducting {
    background-color: #E0E0E0;
}

.wire {
    position: absolute;
    background: #666;
    height: 2px !important;
}

.wire.hot {
    background: #FF0000;
    height: 3px !important;
}

.output-bulb {
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    border-radius: 50%;
    background: #FFF;
    transition: background 0.1s, box-shadow 0.1s;
}

/* Hierarchy */
.hierarchy-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.level-btn {
    padding: 8px 16px;
    background: #CCC;
    border: 1px outset #EEE;
    color: #000;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 11px;
}

.level-btn:active {
    border-style: inset;
}

.level-btn.active {
    background: #FFFF00;
    /* Yellow highlight */
    border: 1px solid #000;
    font-weight: bold;
}

.hierarchy-display {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    border: 1px solid #CCC;
    padding: 10px;
}

.vis-column {
    background: #EEE;
    padding: 15px;
    width: 45%;
    border: 1px solid #999;
}

.vis-column h3 {
    margin: 0 0 10px 0;
    font-size: 12px;
    border-bottom: 1px solid #999;
}

.hierarchy-bar-container {
    width: 100%;
    height: 30px;
    background: #FFF;
    /* White background for empty bar */
    border: 1px inset #999;
    /* Inset border for depth */
    margin-top: 10px;
}

.hierarchy-bar {
    height: 100%;
    background: #FF0000;
    width: 1%;
}

/* Cache Grid */
.cache-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border: 1px solid #000;
    padding: 5px;
    background: #CCC;
}

.cache-row {
    display: flex;
    align-items: center;
    gap: 1px;
    background: #FFF;
    padding: 2px;
}

.cache-cell {
    width: 20px;
    height: 20px;
    background: #FFF;
    border: 1px solid #999;
}

.cache-cell.fetched {
    background-color: #CCCCFF;
    /* Light Blue */
    border: 1px solid #0000FF;
}

.cache-cell.used {
    background-color: #00FF00;
    /* Green */
    border: 1px solid #006600;
}

/* Prefetch */
.prefetch-strip {
    display: flex;
    flex-wrap: wrap;
    /* or no-wrap if we want a single long line, usually wrap is safer for mobile unless scroll */
    gap: 4px;
    padding: 10px 0;
    overflow-x: auto;
}

.mem-block {
    width: 30px;
    height: 40px;
    background: #FFF;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #000;
}

.mem-block.prefetched {
    background: #0000FF;
    /* Blue */
    color: #FFF;
}

.mem-block.accessed {
    background: #008800;
    /* Green */
    color: #FFF;
}

/* TLB */
.tlb-box {
    border: 2px solid #000;
    padding: 10px;
    background: #EEE;
    width: 300px;
}

.tlb-entry {
    background: #FFF;
    border: 1px solid #999;
    padding: 5px;
    margin-bottom: 2px;
    font-family: monospace;
    font-size: 12px;
}

.tlb-entry.occupied {
    background: #CCDDFF;
    border: 1px solid #0000FF;
}

/* MESI */
.bus-status {
    background: #EEE;
    color: #000;
    padding: 5px;
    border: 2px outset #FFF;
    text-align: center;
    font-family: monospace;
    margin-bottom: 20px;
}

.core-box {
    background: #EEE;
    border: 2px solid #666;
    padding: 10px;
    width: 40%;
    text-align: center;
}

.core-box.active {
    background: #FFF;
    border-color: #000;
}

.state-badge {
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 11px;
    border-radius: 50%;
    margin-right: 5px;
}

.state-badge.M {
    background: #FF0000;
    color: #FFF;
}

/* Red */
.state-badge.E {
    background: #FFAA00;
    color: #000;
}

/* Orange */
.state-badge.S {
    background: #0000FF;
    color: #FFF;
}

/* Blue */
.state-badge.I {
    background: #DDD;
    color: #666;
}

/* Caption */
.sim-caption {
    padding: 10px;
    background: #FFFFCC;
    /* Light Yellow Note */
    border-top: 1px solid #999;
    font-size: 12px;
    border-top: 1px solid #AAA;
}

/* Fallback for inline title if needed, though sim-header handles it */
.lab-title {
    display: none;
}