/* =====================================================
   RESET E BASE
===================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: Arial, sans-serif; background: #f0f0f0; padding: 10px; }

/* =====================================================
   HEADER
===================================================== */
.header { background: #0d47a1; color: white; padding: 15px; border-radius: 4px; margin-bottom: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.header h1 { font-size: 1.5em; margin-bottom: 5px; }
.header p  { font-size: 0.9em; opacity: 0.9; }

/* =====================================================
   BARRA SSH
===================================================== */
.ssh-bar { background: white; border: 1px solid #ddd; border-radius: 4px; padding: 15px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.ssh-field { display: flex; flex-direction: column; gap: 3px; }
.ssh-field label { font-weight: bold; font-size: 0.9em; color: #333; }
.ssh-field input  { padding: 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.85em; }
.ssh-buttons { display: flex; gap: 8px; }
.ssh-buttons button { padding: 6px 12px; background: #0d6efd; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 0.85em; flex: 1; }
.ssh-buttons button:hover { background: #0a58ca; }
.status-badge   { padding: 6px 10px; border-radius: 4px; font-size: 0.85em; font-weight: bold; }
.status-offline { background: #f8d7da; color: #721c24; }
.status-online  { background: #d4edda; color: #155724; }

/* =====================================================
   ABAS PRINCIPAIS (MASTER / SLAVE)
===================================================== */
.tabs-wrapper { display: flex; gap: 5px; margin-bottom: 10px; border-bottom: 2px solid #ddd; overflow-x: auto; }
.tab-button { padding: 10px 16px; background: white; border: 1px solid #ddd; border-bottom: none; border-radius: 4px 4px 0 0; cursor: pointer; font-weight: bold; color: #555; font-size: 0.9em; white-space: nowrap; }
.tab-button:hover  { background: #f5f5f5; }
.tab-button.active { background: white; color: #0d47a1; border-color: #0d47a1; border-bottom-color: white; }
.tab-content        { display: none; }
.tab-content.active { display: block; }

/* =====================================================
   SUB-ABAS (DNSSEC, etc.)
===================================================== */
.tabs-nav { display: flex; gap: 4px; margin-bottom: 8px; border-bottom: 1px solid #ddd; overflow-x: auto; }
.sub-tab-button        { padding: 8px 12px; background: #f5f5f5; border: 1px solid #ccc; cursor: pointer; font-size: 0.8em; font-weight: bold; color: #555; border-radius: 3px 3px 0 0; }
.sub-tab-button.active { background: white; border-color: #0d47a1; color: #0d47a1; }

/* =====================================================
   SEÇÕES / CARDS
===================================================== */
.section        { background: white; border: 1px solid #ddd; border-radius: 4px; padding: 12px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.section-title  { font-size: 1em; font-weight: bold; color: #0d47a1; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #0d47a1; }
.scroll-wrapper { padding-right: 5px; }
.grid-info      { background: #f8f9fa; border-left: 3px solid #0d47a1; padding: 10px; margin: 8px 0; border-radius: 2px; font-size: 0.85em; }

/* =====================================================
   GRIDS DE LAYOUT
===================================================== */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: end; }

@media (max-width: 1024px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .ssh-bar { grid-template-columns: 1fr; } .tab-button { flex: 1; text-align: center; } }
@media (max-width: 600px)  { .grid-5 { grid-template-columns: 1fr; } }

/* =====================================================
   FORMULÁRIOS
===================================================== */
.form-group { display: flex; flex-direction: column; gap: 3px; }
.form-group label { font-weight: bold; font-size: 0.85em; color: #333; }
.form-group input,
.form-group textarea,
.form-group select { padding: 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.85em; font-family: monospace; }

/* =====================================================
   EDITORES DE CÓDIGO / TEXTAREA
===================================================== */
.textarea-group          { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.textarea-group label    { font-weight: bold; font-size: 0.85em; color: #333; }
.textarea-group textarea { width: 100%; min-height: 120px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 0.8em; resize: vertical; }
.code-editor             { background: white; color: black; font-family: Consolas, 'Courier New', monospace; font-size: 0.95em; min-height: 200px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }

/* Editores principais com altura maior */
#zone_editor,
#named_local_editor,
#options_editor,
#options_slave_editor { min-height: 300px; }

/* =====================================================
   BOTÕES
===================================================== */
.button-group        { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; justify-content: flex-start; }
.button-group button { padding: 8px 14px; background: #198754; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 0.85em; transition: background 0.2s; white-space: nowrap; }
.button-group button:hover { background: #157347; }

/* Variantes de cor */
.button-group button.primary       { background: #0d6efd; }
.button-group button.primary:hover { background: #0a58ca; }
.button-group button.info          { background: #0dcaf0; color: #000; }
.button-group button.info:hover    { background: #31d5ff; }
.button-group button.warn          { background: #ffc107; color: #000; }
.button-group button.warn:hover    { background: #ffb300; }
.button-group button.danger        { background: #dc3545; color: white; }
.button-group button.danger:hover  { background: #c82333; }

/* Classes diretas (fora de .button-group) */
.danger  { background-color: #d9534f; color: white; }
.warn    { background-color: #f0ad4e; color: white; }
.primary { background-color: #0d6efd; color: white; }

/* =====================================================
   LOG DE OPERAÇÕES
===================================================== */
.log-container { background: white; border: 1px solid #ddd; border-radius: 4px; padding: 12px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.log-title     { font-size: 0.95em; font-weight: bold; color: #333; margin-bottom: 8px; }
.log-content   { background: #1e1e1e; color: #00ff00; padding: 10px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 0.8em; max-height: 250px; overflow-y: auto; line-height: 1.3; white-space: pre-wrap; word-wrap: break-word; }