/* =====================================================================
   RESETS GLOBAIS E FUNDO PRINCIPAL
   ===================================================================== */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #0b1120;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #ffffff;
    overflow-x: hidden; /* Evita scroll horizontal em ecrãs pequenos */
}

/* =====================================================================
   CABEÇALHO (BRAND) E BARRA DE SETUP
   ===================================================================== */
.sim-header {
    background-color: #0f172a;
    text-align: center;
    padding: 10px;
    border-bottom: 2px solid #1e293b;
}

.sim-brand {
    font-size: 20px;
    font-weight: bold;
    color: #e2e8f0;
}

.sim-setup-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #020617;
    padding: 15px 20px;
    border-bottom: 1px solid #1e293b;
    flex-wrap: wrap; 
    gap: 15px;
}

.setup-step {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 140px;
}

.setup-step label {
    font-size: 11px;
    font-weight: bold;
    color: #38bdf8;
    text-transform: uppercase;
}

.setup-step select {
    background-color: #1e293b;
    color: #f8fafc;
    border: 1px solid #334155;
    padding: 8px;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    cursor: pointer;
}

/* =====================================================================
   ESTRUTURA FLEXBOX PRINCIPAL (COLUNAS)
   ===================================================================== */
.sim-main-layout {
    display: flex;
    flex-direction: row; 
    gap: 10px; 
    width: 100%;
    max-width: 1500px; /* Largura máxima para não esticar muito em ecrãs gigantes */
    margin: 0 auto;
    min-height: calc(100vh - 150px); /* Ocupa o resto do ecrã abaixo do cabeçalho */
    padding: 10px;
    box-sizing: border-box;
}

.sim-coluna-esquerda {
    flex: 1; /* Ocupa o espaço maior */
    display: flex;
    flex-direction: column;
    gap: 15px; 
    min-width: 0;
}

.sim-coluna-direita {
    width: 100%;
    max-width: 500px; /* Largura fixa para os painéis de texto */
    height: calc(100vh - 350px);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sim-coluna-direita h3 { 
    color: #38bdf8; 
    margin-top: 0; 
    font-size: 1.3rem; 
}

#sim-code {
    background-color: #0f172a; 
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    max-height: calc(100vh - 400px);
}

#code_display {
    background: #000;
    color: #0f0;
    font-family: 'Consolas', 'Monaco', 'Fira Code', monospace; /* Fonte mais "máquina" */
    font-size: 14px;    /* Ligeiramente maior para leitura fácil */
    line-height: 1.6;   /* Espaçamento entre linhas para não parecer amontoado */
    overflow-y: auto;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #1e293b;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
    width:93%;
    height: 100%; min-height: 350px;
}
.gcode-line { 
    padding: 4px 8px; 
    border-radius: 4px; 
    transition: background 0.2s; 
    cursor: default; 
}
.gcode-line.active { 
    background: #38bdf8; background: #ffffff;
    color: #000; 
    font-weight: bold; 
}
.gcode-comment { 
    color: #888; 
}
.gcode-number { 
    color: #f59e0b; 
    font-weight: bold; 
    margin-right: 5px; 
}

/* =====================================================================
   O MUNDO 3D E BOTÕES DE CÂMARA
   ===================================================================== */
#canvas-wrapper {
    position: relative; 
    flex: 1; 
    width: 100%;
    min-height: 400px;
    background-color: #1e293b;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #334155;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

#sim-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#view-controls {
    position: absolute; 
    top: 10px; 
    left: 10px; 
    display: flex; 
    gap: 5px; 
    z-index: 10;
}

#view-controls button {
    background: #0f172a;background: #5b85e7;
    color: #94a3b8;color: #ffffff;
    border: 1px solid #334155;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}
#view-controls button:hover { background: #334155; color: #fff; }

/* =====================================================================
   DASHBOARD INFERIOR (PLAYBACK E HUD)
   ===================================================================== */
#sim-dashboard {
    background-color: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}

.dashboard-playback { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

.dashboard-playback button {
    display: flex; align-items: center; gap: 8px;
    border: none; padding: 10px 24px; border-radius: 25px;
    color: white; font-weight: 700; font-size: 14px;
    cursor: pointer; transition: all 0.2s ease;
}
.dashboard-playback button:disabled { opacity: 0.4; cursor: not-allowed; }
.dashboard-playback button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.1); }

.btn-continuo { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.btn-passo { background: #475569; }
.btn-anterior { background: linear-gradient(135deg, #f59e0b, #d97706); color: #000;}
.btn-proximo { background: linear-gradient(135deg, #10b981, #059669); }
.btn-reset { background: #64748b; }

.dashboard-hud-row {
    display: flex; justify-content: space-between; align-items: center;
    background-color: #020617; padding: 12px 20px;
    border-radius: 8px; border: 1px solid #1e293b;
    flex-wrap: wrap;
    gap: 15px;
}

.hud-config { display: flex; gap: 20px; align-items: center; flex-wrap: wrap;}
.config-item { display: flex; align-items: center; gap: 10px; }
.hud-label { color: #f8fafc; font-weight: bold; font-size: 14px; }
.hud-value { color: #22d3ee; font-family: 'Fira Code', monospace; font-weight: bold; font-size: 16px; }
.hud-sep { color: #475569; margin: 0 10px; }
.input-dark { background: #1e293b; border: 1px solid #334155; color: #22d3ee; padding: 4px 8px; border-radius: 4px; width: 50px; font-family: 'Fira Code', monospace; }

/* =====================================================================
   PAINEL EXTRA (GEMINI)
   ===================================================================== */
.sim-extra-panel {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 15px;
}

.btn-gemini {
    width: 100%;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    transition: transform 0.2s;
}

.btn-gemini:hover { transform: scale(1.02); }

.gemini-info {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 10px;
    line-height: 1.4;
}

/* =====================================================================
   MOBILE RESPONSIVENESS (TELEMÓVEIS E TABLETS)
   ===================================================================== */
@media screen and (max-width: 1100px) {
    .sim-main-layout { flex-direction: column; }
    .sim-coluna-direita { width: 100%; min-width: 100%; }
    .dashboard-hud-row { flex-direction: column; align-items: flex-start;}
    .hud-display { display: flex; flex-wrap: wrap; gap: 5px; }
}

/* Remove qualquer estilo de fonte herdado que possa estar a interferir */
pre[class*="language-gcode"], code[class*="language-gcode"] {
    background: #020617 !important;
    font-family: 'Courier New', monospace !important;
}


.token.program  { color: #fbbf24 !important; } /* O */
.token.comment  { color: #e8e5dfd0 !important; } /* O */
.token.sequence { color: #f59e0b !important; } /* N */
.token.ijk {
    color: #fbbf24 !important; 
    font-weight: bold;
}
.token.gcode    { color: #f472b6 !important; font-weight: bold; } /* G */
.token.mcode    { color: #fbbf24 !important; } /* M */
.token.tool     { color: #34d399 !important; } /* T */
.token.spindle  { color: #c084fc !important; } /* S */
.token.feed     { color: #fb7185 !important; } /* F */
.token.axis     { color: #38bdf8 !important; } /* X/Y/Z */



/*
Para sobrepor---------------------------------------------------------------------------------------
*/
.modal-header {
    
    padding: 15px 20px;
    border-bottom: 1px solid #334155;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1e293b;
    

    padding-top: 5px !important;
    padding-bottom: 5px !important;
}