/* Reset e tipografia */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Arial, sans-serif;
  background: #4F4F4F;
  padding: 20px;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px #000;
}

h1 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.3rem;
}

input[type="text"],
input[type="number"],
select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

button {
  padding: 0.6rem 1.2rem;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}

fieldset {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

legend {
  font-weight: bold;
  padding: 0 0.5rem;
}

/* Salvamento Automático em 2 colunas */
.two-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Tabela PON */
.table-pon {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}
.table-pon th,
.table-pon td {
  border: 1px solid #ccc;
  padding: 4px;
  text-align: center;
  font-size: 0.85rem;
}

/* Grid VLAN Acesso */
#vlan_grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  margin-top: 1rem;
}

.panel {
  background: #e9ecef;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.panel-header {
  background: #9FC5E8;
  color: #000;
  padding: 6px 0;
  font-weight: bold;
  font-size: 0.9rem;
}

.panel-body {
  padding: 8px;
}

.panel .form-group {
  margin-bottom: 0.5rem;
}

.panel .form-group label {
  font-size: 0.75rem;
  color: #555;
  margin-bottom: 3px;
}

.panel .form-group input {
  width: 100%;
  padding: 6px 4px;
  font-size: 0.9rem;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
}

/* Select cores sim/não */
select.yes {
  background-color: #d4edda;
}
select.no {
  background-color: #f8d7da;
}
/* OLT slots colors */
#olt_model option.c650 { background: #cce5ff; }

/* VLAN Inband slots colors */
#vlan_mgmt_slot option.c650 { background: #cce5ff; }
#vlan_mgmt_slot option.c600 { background: #99ccff; }

/* Hostname com fundo azul claro */
#nome_hostname {
  background-color: #cce5ff;
}

/* Uplink_slot option bg */
#uplink_slot option {
  background: #cce5ff;
}

/* Campos de Salvamento Automático */
#auto_write_time,
#auto_write_interval {
  background-color: #cce5ff;  /* azul claro */
}

/* Backup Remoto: pinta o <select> conforme o valor escolhido */
#backup_proto.ftp {
  background-color: #fff9c4;  /* amarelo claro */
}
#backup_proto.tftp {
  background-color: #ffe0b2;  /* laranja claro */
}

/* mantém os inputs/selects internos coloridos como antes */
#backup_ftp_section input,
#backup_ftp_section select {
  background-color: #fff9c4 !important;
}
#backup_tftp_section input,
#backup_tftp_section select {
  background-color: #ffe0b2 !important;
}

/* SNMP: dropdown option colors */
#snmp_version option[value="v2c"] {
  background-color: #E6E6FA;  /* lilás claro */
  color: #000;
}
#snmp_version option[value="v3"] {
  background-color: #D8BFD8;  /* lilás um pouco mais escuro */
  color: #000;
}

/* SNMP: input backgrounds */
#snmp_v2c_section input {
  background-color: #E6E6FA;
}
#snmp_v3_section input {
  background-color: #D8BFD8;
}
/* Modal de Changelog */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;              /* alterado via inline-style */
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  position: relative;
}

.modal-content h2 {
  margin-top: 0;
}

/* Itens de lista dentro do changelog com fonte reduzida */
#changelog-modal .modal-content ul li {
  font-size: 0.85rem;
  line-height: 1.4;
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #333;
  cursor: pointer;
}

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


/* classes utilitárias */
.hidden { display: none; }
.center { text-align: center; }


.button-group {
  margin-top: 1rem;
  text-align: center;
}
.blue-btn {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 0.5rem;
}
.blue-btn:hover {
  background-color: #0056b3;
}