/* style.css - Arquivo CSS unificado */
/* Estilos gerais */
body { 
    margin: 0;
    padding: 0;
    font-family: 'Courier New', monospace;
    background: linear-gradient(135deg, #4a00e0, #8e2de2);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    background-color: #1e1e1e;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    width: 90%;
    max-width: 600px;
    color: #fff;
}

/* Títulos */
h1 {
    font-size: 60px;
    margin-bottom: 40px;
    color: #fff;
    text-align: center;
}

h2 {
    font-size: 40px;
    margin-bottom: 40px;
    color: #fff;
    text-align: center;
}

h3 {
    color: #2c3e50;
    margin-bottom: 20px;
    text-align: center;
}

/* Formulários */
.form-group {
    margin-bottom: 20px;
    text-align: center;
}

input[type="text"] {
    padding: 10px;
    border: none;
    border-radius: 6px;
    width: 200px;
    margin-right: 10px;
    font-family: 'Courier New', monospace;
}

/* Botões */
button {
    background-color: #6200ee;
    color: white;
    padding: 10px 30px;
    border: none;
    font-size: 20px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

button:hover {
    background-color: #7c29ff;
}

.btn-voltar {
    background-color: #666;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 20px;
    text-decoration: none;
    display: inline-block;
    font-family: 'Courier New', monospace;
}

.btn-voltar:hover {
    background-color: #777;
}

.btn-download {
    background-color: #28a745;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 10px;
    font-family: 'Courier New', monospace;
    font-size: 16px;
}

.btn-view {
    background-color: #17a2b8;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 10px;
    font-family: 'Courier New', monospace;
    font-size: 16px;
}

.btn-download:hover {
    background-color: #218838;
}

.btn-view:hover {
    background-color: #138496;
}

.botao-voltar {
    text-align: center;
    background: #2d2d2d;
    padding: 15px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Itens de resultado */
.item { 
    margin: 15px 0; 
    padding: 15px; 
    background: #2d2d2d;
    border-radius: 5px;
    border-left: 4px solid #6200ee;
}

.success { color: #0f0; }
.error { color: #f55; }
.info { color: #0cf; }
.warning { color: #ff0; }

.interface-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.interface-item {
    padding: 8px;
    background: #3d3d3d;
    border-radius: 3px;
    font-size: 14px;
}

.interface-item.error {
    border-left-color: #f55;
    background: #3d2d2d;
}

.modelo-destaque {
    font-size: 1.3em;
    font-weight: bold;
    color: #0cf;
    text-align: center;
    padding: 10px;
    background: #2d2d2d;
    border-radius: 5px;
    margin: 15px 0;
    border: 2px solid #0cf;
}

.botao-voltar {
    text-align: center;
    background: #2d2d2d;
    padding: 15px;
    border-radius: 5px;
}

.botao-voltar a {
    color: #0cf;
    text-decoration: none;
    font-weight: bold;
}

.botao-voltar a:hover {
    text-decoration: underline;
}

/* SERIAL */
.btn-serial {
    background-color: #007bff;
    color: white;
    padding: 15px 30px;
    border: none;
    font-size: 18px;
    border-radius: 8px;
    cursor: pointer;
    margin: 10px 0;
    width: 100%;
    max-width: 400px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

.btn-ssh {
    background-color: #ff8400;
    color: white;
    padding: 15px 30px;
    border: none;
    font-size: 18px;
    border-radius: 8px;
    cursor: pointer;
    margin: 10px 0;
    width: 100%;
    max-width: 400px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

.btn-serial:hover {
    background-color: #0056b3;
}

.btn-ssh:hover {
    background-color: #b76208;
}

.divider {
    text-align: center;
    margin: 20px 0;
    color: #ccc;
    font-weight: bold;
    font-size: 16px;
}

.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* style.css - garantir que a tela inicial fique atrás do spinner */
.tela-inicial {
    position: relative;
    z-index: 1;
}

/* Botões normais */
.btn-serial, .btn-ssh {
    position: relative;
    z-index: 1;
}

/* Overlay do spinner deve cobrir TUDO */
.spinner-overlay {
    z-index: 10000 !important;
}

/* Módulo Toshiba */
.obsoleto {
  color: red;
  font-weight: bold;
  animation: piscar 1s infinite;
}

@keyframes piscar {
  10%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

/* ## FIM ## Módulo Toshiba */

.nao-identificado {
    color: red;
    font-weight: bold;
    animation: piscar 1s infinite;
}

.valor {
    color: #0f0; /* ou outra cor que queira para valores válidos */
}

/* 🔥 ADICIONADO:Estilos para múltiplos módulos */
.simcard-module {
    border-left: 4px solid #4CAF50;
    padding-left: 15px;
    /* margin-left: 10px; */
    margin-top: 10px;
    /* background: #c3c3e1; */
    border-radius: 5px;
}

.simcard-details {
    margin-top: 8px;
    padding: 10px;
    background: #3d3d3d;
    border-radius: 6px;
    /* border: 1px solid #e0e0e0; */
}

.simcard-row {
    display: flex;
    margin-bottom: 5px;
}

.simcard-label {
    font-weight: bold;
    width: 120px;
    color: #ffffff;
}

.simcard-value {
    flex: 1;
}

.modulo-header {
    color: #ffffff;
    font-size: 1.1em;
    margin-bottom: 8px;
    padding-bottom: 5px;
    /* border-bottom: 1px dashed #ddd; */
}

.back-button {
    display: block; /* Muda de inline-block para block */
    padding: 8px 20px; /* Reduzido de 15px 35px */
    background: linear-gradient(90deg, #3a8eff, #0066ff);
    color: white;
    text-decoration: none;
    border-radius: 8px; /* Reduzido de 12px */
    font-size: 1rem; /* Reduzido de 1.2rem */
    font-weight: bold;
    margin: 30px auto 0; /* Centraliza horizontalmente */
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
/*    box-shadow: 0 5px 15px rgba(58, 142, 255, 0.4);*/ /* Sombra mais suave */
    width: fit-content; /* Ajusta largura ao conteúdo */
}

.back-button:hover {
    transform: translateY(-3px);
/*    box-shadow: 0 8px 20px rgba(58, 142, 255, 0.6); */
    background: linear-gradient(90deg, #1a75ff, #0047b3);
}

/* Estilo para detalhes de hostname */
.hostname-detalhes {
    border-left: 4px solid #3498db;
    background: #f8f9fa;
}

.hostname-detalhes .detalhes-container {
    margin-top: 10px;
    padding: 10px;
    background: white;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.detalhe-item {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #eee;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.detalhe-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.detalhe-item .modulo {
    font-weight: bold;
    color: #2c3e50;
    min-width: 80px;
}

.detalhe-item .iccid {
    color: #7f8c8d;
    font-size: 0.9em;
    font-family: monospace;
    background: #f1f1f1;
    padding: 2px 6px;
    border-radius: 3px;
}

.detalhe-item .hostname {
    color: #27ae60;
    font-weight: bold;
    margin-left: auto;
}

.mensagem-hostname .error {
    color: #e74c3c;
    font-weight: bold;
    background: #ffe6e6;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
}

.mensagem-hostname .info {
    color: #3498db;
    /* background: #e6f2ff; */
    padding: 10px 5px;
    /* border-radius: 5px; */
    display: inline-block;
}

/* Para hostname com conflito */
.item .info[style*="CONFLITO"] {
    color: #e74c3c !important;
    font-weight: bold;
}

/* =========================================== */
/* 🔥 NOVOS ESTILOS DO HTML (ACRESCENTADOS) */
/* =========================================== */

/* Container branco para formulário - ESTILO ORIGINAL (claro) */
.form-container > div {
    text-align: center;
    background: white;
    padding: 30px;
    border-radius: 10px;
    max-width: 400px;
    margin: 0 auto;
}

/* Label do número de série - ESTILO ORIGINAL (claro) */
.form-container label {
    display: block;
    margin-bottom: 5px;
    color: #555;
    font-weight: bold;
    text-align: left;
}

/* Input do número de série */
.form-container input[type="text"] {
    padding: 12px;
    width: 100%;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    margin-right: 0;
    margin-bottom: 5px;
}

/* Texto de exemplo - ESTILO ORIGINAL (claro) */
.form-container small {
    color: #888;
    font-size: 0.9em;
    display: block;
    text-align: left;
    margin-top: 5px;
}

/* Container dos agentes */
.form-container > div > div {
    margin: 20px 0;
}

/* Botões de agente - ESTILO ORIGINAL (claro) */
.agent-button {
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: #f9f9f9;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s;
    width: 100%;
}

.agent-button:hover {
    border-color: #4CAF50;
    background: #f0f8f0;
}

/* Container interno do botão de agente */
.agent-button > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Círculo numérico do agente - ESTILO ORIGINAL */
.agent-button .agent-number {
    width: 40px;
    height: 40px;
    background: #4CAF50;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Texto do agente - ESTILO ORIGINAL (claro) */
.agent-button .agent-text {
    font-weight: bold;
    color: #2c3e50;
}

.agent-button .agent-status {
    font-size: 0.9em;
    color: #666;
}

/* Status do agente selecionado */
#agentStatus {
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
    display: none;
    background: #e8f5e9;
    border: 1px solid #4CAF50;
    color: #2e7d32;
}

/* Mensagem de erro */
#errorMessage {
    color: red;
    margin-top: 10px;
    padding: 10px;
    background: #ffe6e6;
    border-radius: 5px;
    display: none;
}

/* Textos informativos - ESTILO ORIGINAL (claro) */
.form-container p {
    margin-top: 15px;
    color: #666;
    font-size: 0.9em;
    text-align: center;
}

/* Seção do título */
.section-title {
    text-align: center;
    margin-bottom: 30px;
}

/* Layout dos botões de agente lado a lado */
.form-container .agent-buttons-container {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* Agente 2 específico - ESTILO ORIGINAL */
.agent-button[data-ip="192.168.8.149"] .agent-number {
    background: #2196F3;
}

/* Botão SSH estendido */
.btn-ssh {
    margin-top: 15px;
    width: 100%;
    padding: 12px;
}

/* =========================================== */
/* 🔥 TEMA DARK ESPECÍFICO PARA INVENTORY */
/* Use a classe .inventory-theme no container principal */
/* =========================================== */

/* Container do formulário - TEMA DARK */
.inventory-theme .form-container > div {
    background: #3d3d3d !important;
    color: #ffffff !important;
}

/* Título h3 - TEMA DARK */
.inventory-theme h3 {
    color: #ffffff !important;
}

/* Label - TEMA DARK */
.inventory-theme .form-container label {
    color: #ffffff !important;
}

.inventory-theme .form-container label span {
    color: #999999 !important;
}

/* Texto de exemplo - TEMA DARK */
.inventory-theme .form-container small {
    color: #aaaaaa !important;
}

/* Botões de agente - TEMA DARK */
.inventory-theme .agent-button {
    border: 2px solid #555555 !important;
    background: #4a4a4a !important;
    color: #ffffff !important;
}

.inventory-theme .agent-button:hover {
    border-color: #4CAF50 !important;
    background: #5a5a5a !important;
}

/* Texto do agente - TEMA DARK */
.inventory-theme .agent-button .agent-text {
    color: #ffffff !important;
}

.inventory-theme .agent-button .agent-status {
    color: #aaaaaa !important;
}

/* Textos informativos - TEMA DARK */
.inventory-theme .form-container p {
    color: #ffffff !important;
}

/* Status do agente selecionado - TEMA DARK */
.inventory-theme #agentStatus {
    background: #2d4a2d !important;
    border: 1px solid #4CAF50 !important;
    color: #a5d6a7 !important;
}

/* Mensagem de erro - TEMA DARK */
.inventory-theme #errorMessage {
    background: #4a2d2d !important;
    border: 1px solid #f55 !important;
}

/* Input - TEMA DARK */
.inventory-theme .form-container input[type="text"] {
    background: #2d2d2d !important;
    border-color: #555 !important;
    color: #ffffff !important;
}

.inventory-theme .form-container input[type="text"]:focus {
    border-color: #4CAF50 !important;
    outline: none;
}

/* =========================================== */
/* 🔥 ESTILOS ESPECÍFICOS PARA AGENTE SELECIONADO NO TEMA DARK */
/* Apenas quando .agent-button.selected dentro de .inventory-theme */
/* =========================================== */

/* Agente selecionado - APENAS NO TEMA DARK */
.inventory-theme .agent-button.selected {
    border-color: #4CAF50 !important;
    background: #2d4a2d !important;
    /* border-width: 3px !important; */
}

/* Texto do agente selecionado - APENAS NO TEMA DARK */
.inventory-theme .agent-button.selected .agent-text {
    color: #ffffff !important;
    font-weight: bold !important;
}

.inventory-theme .agent-button.selected .agent-status {
    color: #a5d6a7 !important;
    font-weight: bold !important;
}

/* Círculo do agente selecionado - APENAS NO TEMA DARK */
.inventory-theme .agent-button.selected .agent-number {
    background: #4CAF50 !important;
    color: white !important;
    font-weight: bold !important;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5) !important;
}

/* Agente 2 específico quando selecionado - APENAS NO TEMA DARK */
.inventory-theme .agent-button[data-ip="192.168.8.149"].selected .agent-number {
    background: #2196F3 !important;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.5) !important;
}

/* Efeito visual extra para seleção - APENAS NO TEMA DARK */
.inventory-theme .agent-button.selected {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3) !important;
}