/* Estilos gerais para o corpo da página */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5;
    color: #333;
    display: grid; 
    grid-template-columns: auto 1fr auto; 
    grid-template-rows: 1fr auto; 
    grid-template-areas: 
        "pin main pout"
        "instructions instructions instructions"; 
    align-items: start; 
    min-height: 100vh;
    gap: 20px; 
    padding: 20px; 
    box-sizing: border-box;
}

/* Contêineres externos para PIN e POUT */
.io-outer-column {
    grid-area: var(--area); 
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    padding: 20px;
    background-color: #e9ecef; 
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.08);
    min-height: 150px; 
    height: fit-content; 
    align-self: center; 
}
#pinOuterContainer { --area: pin; }
#poutOuterContainer { --area: pout; }

.io-outer-item-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.io-outer-item-container h2 {
    font-size: 1.4em; 
    color: #007bff;
    margin-bottom: 15px;
}

.io-outer-input, .io-outer-value {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 2.8em; 
    font-weight: bold;
    color: #28a745; 
    padding: 10px;
    border-radius: 6px;
    background-color: #fff; 
    min-width: 100px; 
    text-align: center;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.io-outer-input { 
    border: 1px solid #ced4da;
    width: 120px; 
}


/* Container principal que organiza as colunas internas */
.container {
    grid-area: main; 
    display: flex;
    flex-wrap: wrap; 
    gap: 20px; 
    width: 100%; 
    padding: 0; 
    box-sizing: border-box;
}

/* Estilo base para cada coluna interna */
.column {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    min-height: 400px; 
}

.editor-column { flex: 1.2; min-width: 250px; } 
.assembler-column { 
    flex: 0.5; 
    min-width: 150px; 
} 
.processor-column { flex: 0.8; min-width: 200px; } 

header h1 {
    font-size: 1.5em;
    color: #007bff;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
}

#assemblyCode {
    width: calc(100% - 16px); 
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 8px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95em;
    resize: vertical; 
    box-sizing: border-box;
    background-color: #f8f9fa;
    color: #212529;
    min-height: 300px; 
    margin-bottom: 10px; 
}

.example-buttons-container {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
    gap: 10px; 
    margin-top: 10px; 
}

.example-button {
    background-color: #6c757d; 
    color: white;
    border: none;
    padding: 10px 5px; 
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85em; 
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.1s ease;
    text-align: center; 
}

.example-button:hover {
    background-color: #5a6268;
}

.example-button:active {
    transform: scale(0.98);
}


#assembleButton, #clockButton {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-bottom: 10px; 
    align-self: flex-start; 
}

#assembleButton:hover, #clockButton:hover { background-color: #0056b3; }
#assembleButton:active, #clockButton:active { transform: scale(0.98); }

#clockButton { background-color: #28a745; margin-top: 0; }
#clockButton:hover { background-color: #1e7e34; }

/* Estilos para os indicadores de estágio em triângulo */
.stage-indicators-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas de igual largura */
    grid-template-rows: auto auto;    /* Duas linhas, altura automática */
    gap: 5px; /* Pequeno espaço entre os indicadores */
    margin-bottom: 15px; 
    width: 100%;
    max-width: 280px; /* Largura máxima para o container dos indicadores */
    margin-left: auto; /* Centraliza o container se ele for menor que 100% */
    margin-right: auto;
}

.stage-indicator {
    padding: 6px 10px; /* Ajustado padding */
    border: 1px solid #ced4da;
    border-radius: 15px; 
    font-size: 0.8em; /* Fonte um pouco menor para caber melhor */
    color: #6c757d; 
    background-color: #e9ecef; 
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    text-align: center;
    /* flex-grow: 1; Removido pois o grid controla o tamanho */
    /* margin: 0 3px; Removido, o gap do grid cuida disso */
}

/* Posicionamento específico para cada indicador */
#stageIndicatorFetch {
    grid-column: 1 / 3; /* Ocupa as duas colunas */
    grid-row: 1 / 2;    /* Primeira linha */
    justify-self: center; /* Centraliza horizontalmente na sua célula do grid */
    width: fit-content; /* Largura baseada no conteúdo */
    min-width: 100px; /* Largura mínima para o indicador de busca */
}

#stageIndicatorExecute { /* Execução - em baixo à esquerda */
    grid-column: 1 / 2; /* Primeira coluna */
    grid-row: 2 / 3;    /* Segunda linha */
}

#stageIndicatorDecode { /* Decodificação - em baixo à direita */
    grid-column: 2 / 3; /* Segunda coluna */
    grid-row: 2 / 3;    /* Segunda linha */
}


.stage-indicator.active {
    background-color: #007bff; 
    color: white;
    border-color: #0056b3;
    font-weight: bold;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 0.9em;
}

.info-message {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 0.9em;
}

.memory-view {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 5px; 
    max-height: 400px; 
    overflow-y: auto; 
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.memory-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px; 
    background-color: #e9ecef;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    border: 1px solid #d1d1d1;
    transition: background-color 0.2s ease, border-color 0.2s ease; 
}

.mem-address { font-weight: bold; color: #495057; margin-right: 5px; }
.mem-value { color: #191970; font-weight: bold; }

.memory-cell.pc-highlight {
    background-color: #ffc107; 
    border-color: #e0a800;
}
.memory-cell.pc-highlight .mem-value { color: #000; }

.blink-highlight {
    background-color: #00bcd4 !important; 
    color: #000000 !important;
    border-color: #008fa1 !important;
    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, border-color 0.1s ease-in-out;
}
.io-outer-column.blink-highlight .io-outer-input, 
.io-outer-column.blink-highlight .io-outer-value {
    background-color: #00bcd4 !important; 
    border-color: #008fa1 !important;
    color: #000000 !important;
}
.io-outer-column.blink-highlight h2 {
     color: #0056b3 !important; 
}
.register-item.blink-highlight, 
#regIR.blink-highlight, 
#regZFlag.blink-highlight { 
    background-color: #00bcd4 !important; 
    border-color: #008fa1 !important;
}
#regIR.blink-highlight span, 
#regZFlag.register-item.blink-highlight .reg-value, 
#regZFlag.register-item.blink-highlight .reg-name 
 { 
    color: #000000 !important;
}
.register-item.blink-highlight .reg-name,
.register-item.blink-highlight .reg-value {
    color: #000000 !important;
}


.register-group { margin-bottom: 20px; }
.register-group h2 { 
    font-size: 1.2em;
    color: #343a40;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 5px;
}
.assembler-column h2 { 
    font-size: 1.2em;
    color: #343a40;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 5px;
}

#generalRegistersView {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    grid-template-rows: repeat(2, auto);    
    gap: 10px;
}

#specialRegistersView.registers-view { 
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
    gap: 10px;
}

.register-item { 
    background-color: #f8f9fa;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.95em;
    display: flex;
    align-items: center; 
    justify-content: space-between; 
    transition: background-color 0.2s ease, border-color 0.2s ease;
    min-height: 38px; 
}

.reg-name { 
    font-weight: bold; 
    color: #007bff; 
    margin-right: 10px; 
    white-space: nowrap; 
}
.reg-value { 
    color: #28a745; 
    font-weight: bold; 
    text-align: right; 
}


.instruction-set-container-wrapper {
    grid-area: instructions;
    width: 100%; 
    display: flex; 
    justify-content: center;
    padding-top: 20px; 
}

.instruction-set-container {
    width: 100%;
    max-width: 1400px; 
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.instruction-set-container header h1 { font-size: 1.3em; }

.instruction-table {
    width: 100%;
    border-collapse: collapse; 
    margin-bottom: 20px;
}
.instruction-table th, .instruction-table td {
    border: 1px solid #dee2e6; 
    padding: 10px;
    text-align: left;
    font-size: 0.9em;
}
.instruction-table th {
    background-color: #e9ecef; 
    color: #495057;
    font-weight: bold;
}
.instruction-table tr:nth-child(even) { background-color: #f8f9fa; }
.instruction-table td:nth-child(1), 
.instruction-table td:nth-child(4), 
.instruction-table td:nth-child(5) { 
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

.opcode-details {
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}
.opcode-details h3 { margin-top: 0; color: #007bff; font-size: 1.1em; }
.opcode-details p, .opcode-details ul { font-size: 0.9em; line-height: 1.6; }
.opcode-details ul { padding-left: 20px; }
.opcode-details ul ul { padding-left: 20px; margin-top: 5px; }
.opcode-details strong { color: #343a40; }

.memory-view::-webkit-scrollbar { width: 8px; }
.memory-view::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.memory-view::-webkit-scrollbar-thumb { background: #007bff; border-radius: 4px; }
.memory-view::-webkit-scrollbar-thumb:hover { background: #0056b3; }

@media (max-width: 1200px) { 
    body {
        grid-template-columns: 1fr; 
        grid-template-rows: auto auto auto auto; 
        grid-template-areas: 
            "pin"
            "main"
            "pout"
            "instructions";
        align-items: stretch; 
    }
    .io-outer-column {
        justify-content: start; 
        min-height: auto; 
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 15px; 
        align-self: stretch; 
    }
    .io-outer-column:last-of-type { 
        margin-bottom: 0; 
    }
    .io-outer-item-container h2 { font-size: 1.2em; margin-bottom: 10px;}
    .io-outer-input, .io-outer-value { font-size: 2em; min-width: 80px; }
    .io-outer-input { width: 100px; }
    .container { 
        max-width: 100%; 
        flex-direction: column; 
    } 
    .column { 
        width: 100%;
        min-width: unset; 
        flex-basis: auto; 
        margin-bottom: 15px;
    }
    .column:last-child {
        margin-bottom: 0;
    }
    .assembler-column { 
        flex: 0.8; 
    }

    .example-buttons-container {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); 
    }
     #generalRegistersView { 
        grid-template-columns: repeat(2, 1fr); 
    }
    #specialRegistersView.registers-view {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    }
}


@media (max-width: 900px) {
    #assembleButton, #clockButton { width: auto; } 
    .stage-indicators-container { 
        /* flex-wrap: wrap;  Removido pois o grid já lida com o layout */
        max-width: 240px; /* Ajusta a largura máxima para telas menores */
    } 
    .stage-indicator { font-size: 0.75em; padding: 5px 8px; }
    #stageIndicatorFetch { min-width: 90px; }
}

@media (max-width: 600px) {
    body { padding: 10px; gap: 10px;} 
    .column { padding: 15px; }
    .editor-column, .assembler-column, .processor-column { min-height: 300px; } 

    #generalRegistersView, #specialRegistersView.registers-view { 
        grid-template-columns: 1fr; 
    }
    #assembleButton, #clockButton { width: 100%; text-align: center; }
    
    .io-outer-item-container h2 { font-size: 1.1em; margin-bottom: 8px;}
    .io-outer-input, .io-outer-value { font-size: 1.8em; padding: 8px; }
    .io-outer-input { width: 90px; }

    .instruction-table th, .instruction-table td { font-size: 0.8em; padding: 6px; }
    .instruction-table { display: block; overflow-x: auto; }
    
    .stage-indicators-container {
        max-width: 200px; /* Ainda menor para telas muito pequenas */
        gap: 3px;
    }
    .stage-indicator { 
        min-width: 60px; 
        font-size: 0.7em;
        padding: 4px 6px;
    } 
    #stageIndicatorFetch { min-width: 80px; }


    .example-buttons-container {
        grid-template-columns: 1fr; 
    }
    .example-button {
        margin-bottom: 8px; 
    }
    .example-button:last-child {
        margin-bottom: 0;
    }
}