/* ================================
   Caja genérica
   ================================ */
.box {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.box h3 {
    font-family: monospace;
    font-size: 1.1em;
    font-weight: bold;
    margin: 0 0 10px 0;
    padding: 0;
}

/* ================================
   Texto preformateado
   ================================ */
pre {
    background-color: #eee;
    padding: 10px;
    border-radius: 3px;
    overflow-x: auto;
}

/* ================================
   Botones
   ================================ */
.btn {
    display: inline-block;
    padding: 8px 12px;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 10px;
}

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

/* ================================
   NUEVO LAYOUT: 3 COLUMNAS
   ================================ */
.fail2ban-grid {
    display: grid;
    grid-template-columns: 220px 1fr 1fr;
    gap: 20px;
    align-items: flex-start;
}

/* ================================
   Listas de jails
   ================================ */
.jail-list {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
    font-family: monospace;
    font-size: 0.9em;
}

/* ================================
   Lista de eventos
   ================================ */
.event-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: monospace;
    font-size: 0.9em;
}

.event-list li {
    padding: 4px 0;
    border-bottom: 1px solid #ddd;
    white-space: pre-wrap;
}

/* Colores Found / Ban / Unban */
.event-list .found {
    color: #0077cc;
    font-weight: bold;
}

.event-list .ban {
    color: #cc0000;
    font-weight: bold;
}

.event-list .unban {
    color: #009900;
    font-weight: bold;
}

/* ================================
   Header de eventos (3 columnas)
   ================================ */
.event-header {
    display: grid;
    grid-template-columns: auto auto 1fr; /* título | filtro | botón */
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}

.event-header h3 {
    margin: 0;
    white-space: nowrap;
    font-size: 1.2em;
}

/* ================================
   Formulario de filtrado
   ================================ */
.event-controls {
    display: contents; /* deja que los hijos ocupen las columnas del grid */
}

.filter-form {
    display: contents; /* cada elemento ocupa su columna */
}

.filter-form label {
    white-space: nowrap;
    font-size: 0.9em;
    color: #555;
}

.filter-form .btn {
    margin-top: 0;
    justify-self: end; /* botón a la derecha */
}

/* ================================
   Journal
   ================================ */
#journal-container {
    margin-bottom: 15px;
    font-family: monospace;
    font-size: 0.9em;
}

/* ================================
   Jail seleccionada (datos)
   ================================ */
.jail-info-left div {
    padding: 2px 0;
    margin: 0;
    font-family: monospace;
    font-size: 0.9em;
}

/* ================================
   IPs baneadas (columna 3)
   ================================ */
.jail-info-right div {
    padding: 2px 0;
    margin: 0;
    font-family: monospace;
    font-size: 0.9em;
}

.jail-info-right strong {
    font-weight: normal;
}

/* ================================
   Ajustes visuales
   ================================ */
.jail-list li,
.jail-selected li {
    padding: 3px 0 !important;
    margin: 0 !important;
}

/* Mantener altura mínima en jails activas */
.col-jails .box {
    min-height: 135px;
}
/* ================================
   WHOIS PANEL
   ================================ */
.whois-box {
    border: 1px solid #ccc;
    padding: 15px;
    margin-top: 20px;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.whois-box h3 {
    margin-top: 0;
    font-family: monospace;
}

.whois-box pre {
    background-color: #eee;
    padding: 10px;
    border-radius: 3px;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.controls-grid {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 10px;
    align-items: center;
}