/* Estilo de LazaroV2 WebAdmin: Bootstrap 5 + barra lateral + tarjetas. */
body { background-color: #f8f9fa; }
.navbar-brand { font-weight: 700; letter-spacing: .5px; }
.sidebar { min-height: calc(100vh - 57px); background: #fff; border-right: 1px solid #dee2e6; }
.sidebar .nav-link { color: #495057; border-radius: 6px; margin-bottom: 2px; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { background: #e9ecef; color: #0d6efd; }
.sidebar .nav-link.btn-primary { background: #0d6efd; color: #fff !important; }
.sidebar .nav-link.btn-primary:hover { background: #0b5ed7; }
.sidebar .nav-link i { width: 20px; display: inline-block; }
@media (min-width: 768px) { .sidebar { position: sticky; top: 57px; align-self: flex-start; height: calc(100vh - 57px); overflow-y: auto; } }

.card-header { background: #fff; font-weight: 500; }
.card { border-color: #e3e6ea; }
.login-card { margin-top: 12vh; }
.search-box { max-width: 280px; }
.dash-table { max-height: 620px; overflow-y: auto; }
tr.row-off td { opacity: .55; }
.badge { font-weight: 500; }

pre.config-preview { background: #1e1e1e; color: #d4d4d4; border-radius: 8px; padding: 1rem; font-size: .8rem; max-height: 340px; overflow: auto; }
.chart-box { position: relative; height: 260px; }

/* Barra de latidos, como la de Kuma */
.beat-bar { display: flex; gap: 2px; align-items: center; height: 22px; min-width: 120px; }
.beat { flex: 1 1 0; max-width: 8px; min-width: 3px; height: 100%; border-radius: 3px; background: #dee2e6; }
.beat.up { background: #20c997; }
.beat.down { background: #dc3545; }
.beat.pending { background: #ffc107; }
.beat.maintenance { background: #0dcaf0; }
.beat.empty { background: #eef0f2; }
.beat:hover { transform: scaleY(1.15); }
#monitor-beats .beat-bar { height: 30px; }
#monitor-beats .beat { max-width: 12px; }

.logs-box { max-height: 560px; min-height: 240px; white-space: pre-wrap; word-break: break-all; font-size: .76rem; }
.font-sans { font-family: var(--bs-body-font-family); }

/* Tarjetas de resumen del dashboard */
.stat-card { color: inherit; transition: box-shadow .15s, transform .15s; }
.stat-card:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.08); transform: translateY(-1px); }
.stat-card .card-body { padding: 1rem 1.1rem; }
.stat-icon { width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: .5rem; }
.stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { color: #6c757d; font-size: .85rem; }
.stat-sub { font-size: .78rem; margin-top: .25rem; min-height: 1.1em; }
.web-target { max-width: 340px; }
.incident-msg { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Contenedores en árbol */
.tree-table tr.tree-parent > td { background: #f6f8fb; border-top: 2px solid #dee2e6; cursor: pointer; }
.tree-table tr.tree-parent:hover > td { background: #eef2f8; }
.tree-table tr.tree-collapsed { display: none; }
.tree-branch { padding-left: 2.1rem; }
/* Líneas del árbol sobre la celda entera (no el contenido): la vertical sigue sin cortes de fila en
   fila hasta el último servicio y de ella sale un ramal a cada uno. */
.tree-table tr.tree-child > td:first-child { position: relative; }
.tree-table tr.tree-child > td:first-child::before { content: ""; position: absolute; left: 1.1rem; top: -1px; bottom: -1px; border-left: 1px solid #adb5bd; }
.tree-table tr.tree-child.tree-last > td:first-child::before { bottom: 50%; border-bottom-left-radius: 5px; border-bottom: 1px solid #adb5bd; width: .95rem; }
.tree-table tr.tree-child > td:first-child::after { content: ""; position: absolute; left: 1.1rem; top: 50%; width: .95rem; border-top: 1px solid #adb5bd; }
.tree-table tr.tree-child.tree-last > td:first-child::after { display: none; }
/* y nace debajo de la flecha del proyecto cuando está desplegado */
.tree-table tr.tree-parent > td:first-child { position: relative; }
.tree-table tr.tree-parent:has(.tree-toggle[aria-expanded="true"]) > td:first-child::after { content: ""; position: absolute; left: 1.1rem; top: 1.85rem; bottom: -1px; border-left: 1px solid #adb5bd; }
.tree-toggle { width: 1.3rem; }

/* Usuario de solo lectura: se ocultan los controles que cambian algo (el servidor igual da 403). */
body.readonly form[method=post]:not(.allow-readonly), body.readonly [data-admin-only],
body.readonly a[href$="/edit"], body.readonly a[href^="/sites/new"], body.readonly a[href^="/monitors/new"],
body.readonly a[href^="/notifications/new"], body.readonly a[href^="/templates/new"] { display: none !important; }