/* ============================================================================
   HamThings v2 — porting fedele CSS custom da SAK index.html righe 15-159
   ============================================================================
   AdminLTE 3.2 + Bootstrap 4.6 base, override + animations specifiche SAK.
   Mantenere allineato a /tmp/sak-frontend-snapshot/sak/index.html. */

/* === Row highlight (DataTables / live update) ============================ */
.row-new { animation: highlight 2s ease-out; }
@keyframes highlight {
    from { background-color: #d4edda; }
    to   { background-color: transparent; }
}
.row-active { background-color: #fff3cd !important; }

/* Mute row (PR-D-7d ext): TX silenziata verso il mesh.  Sfondo grigio +
   testo attenuato per indicare visivamente "questa TX e' stata bloccata
   in uscita dal cluster".  Override row-active: se contemporaneamente
   active+muted, il muted vince (il QSO live in corso ma silenziato e'
   l'event piu' rilevante per il sysop). */
.lh-row-muted        { background-color: #e9ecef !important; }
.lh-row-muted td     { color: #6c757d; }
.lh-row-muted b      { text-decoration: line-through; }

/* === Talkgroup badge ===================================================== */
.badge-tg { font-size: 0.9em; }

/* === Filter form === */
.lh-filter { max-width: 250px; }

/* === Signal bar (RSSI inline) ============================================ */
.signal-bar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 75px; height: 16px; background: #ddd; border-radius: 3px;
    overflow: hidden; position: relative; vertical-align: middle;
}
.signal-fill {
    height: 100%; border-radius: 3px;
    position: absolute; top: 0; left: 0;
}
.signal-text {
    position: relative; z-index: 1;
    font-size: 10px; color: #999; font-weight: bold;
}

/* === Mode badges (codec/protocol) ======================================= */
.mode-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 55px; height: 16px;
    border-radius: 3px;
    font-size: 10px; font-weight: bold; color: #fff;
    vertical-align: middle;
}
.mode-analog { background: #6c757d; }
.mode-hose   { background: #ffc107; color: #333; }
.mode-bcn    { background: #17a2b8; }
.mode-dmr    { background: #0d6efd; }
.mode-dstar  { background: #6610f2; }
.mode-fusion { background: #d63384; }

/* === Radial progress (Dashboard widgets) ================================ */
.radial-progress circle:nth-child(2) { transition: stroke-dashoffset 1s ease; }

/* === Sidebar nav treeview (sub-menu compact) ============================ */
.nav-treeview { padding-left: 15px !important; }
.nav-treeview .nav-link { font-size: 0.85em; }
#nav-sysop-repeaters .nav-link { padding: 0.15rem 0.5rem 0.15rem 1rem; font-size: 0.85em; }
.nav-treeview .nav-icon { font-size: 0.75em; }

/* === Info box height ==================================================== */
.info-box { min-height: 70px; }

/* === TX source marker on map (pulsing blue dot + mic) =================== */
@keyframes sak-tx-pulse {
    0%   { transform: scale(1);   opacity: 1;   }
    70%  { transform: scale(2.2); opacity: 0.1; }
    100% { transform: scale(1);   opacity: 1;   }
}
.tx-source-marker .tx-ring {
    fill: #007bff; opacity: 0.6;
    transform-origin: center; transform-box: fill-box;
    animation: sak-tx-pulse 1.4s ease-out infinite;
}
.tx-source-marker .tx-core {
    fill: #007bff; stroke: #ffffff; stroke-width: 1.5;
}
.tx-source-marker .tx-icon {
    font-family: "Font Awesome 5 Free"; font-weight: 900;
    fill: #ffffff; pointer-events: none;
    text-anchor: middle; dominant-baseline: central;
}

/* === Mono utility ======================================================= */
.text-mono { font-family: monospace; }

/* === HoseLine VU meter ================================================== */
.hl-vu {
    display: flex; gap: 2px;
    padding: 2px 3px; background: #1a1a1a; border-radius: 3px;
    vertical-align: middle;
}
.hl-vu .seg {
    flex: 1 1 auto; min-width: 3px; height: 14px;
    background: #2a2a2a; border-radius: 1px;
    transition: background 0.05s;
}
.hl-vu .seg.lit       { background: #28a745; }
.hl-vu .seg.lit.hi    { background: #ffc107; }
.hl-vu .seg.lit.peak  { background: #dc3545; }

/* === On-air talker pill ================================================= */
.on-air-item {
    background: #fff8e1; border: 1px solid #ffc107; border-radius: 8px;
    padding: 8px 14px; margin: 4px;
    display: inline-flex; align-items: center; gap: 10px;
    animation: on-air-pulse 1.4s ease-in-out infinite;
}
.on-air-item b { font-size: 1.1rem; }
.on-air-item .mic { color: #dc3545; }

/* === Listener row (sober blue) ========================================== */
.listener-item {
    background: #e7f1ff; border: 1px solid #0d6efd; border-radius: 8px;
    padding: 6px 12px; margin: 4px;
    display: inline-flex; align-items: center; gap: 8px;
}
.listener-item b { font-size: 1rem; }
.listener-item i.fa-headphones { color: #0d6efd; }

@keyframes on-air-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,0.5); }
    50%      { box-shadow: 0 0 0 8px rgba(220,53,69,0); }
}

/* === Reflector (Cluster Nodes) cards ==================================== */
.refl-card {
    border: 1px solid #dee2e6; border-radius: 8px;
    padding: 8px 14px; margin: 4px;
    display: inline-flex; align-items: center; gap: 10px;
    min-width: 200px; background: #fff;
}
.refl-dot {
    display: inline-block;
    width: 12px; height: 12px; border-radius: 50%;
    background: #adb5bd; flex-shrink: 0;
}
.refl-dot.online  { background: #28a745; box-shadow: 0 0 6px #28a745; }
.refl-dot.offline { background: #dc3545; }

/* === Heartbeat icons ==================================================== */
.heart-healthy {
    color: #17a2b8;
    animation: heart-beat 1.2s ease-in-out infinite;
    display: inline-block;
    transform-origin: center;
}
.heart-failed  { color: #dc3545; }
@keyframes heart-beat {
    0%   { transform: scale(1); }
    15%  { transform: scale(1.25); }
    30%  { transform: scale(1); }
    45%  { transform: scale(1.25); }
    60%  { transform: scale(1); }
    100% { transform: scale(1); }
}

/* === Metric mini chart ================================================== */
.metric-chart { padding: 4px 8px; }
.metric-label {
    font-size: 0.85rem; color: #6c757d;
    margin-bottom: 2px;
    display: flex; justify-content: space-between; align-items: baseline;
}
.metric-value { font-weight: bold; color: #212529; font-family: monospace; }
.metric-svg   { width: 100%; height: 60px; background: #f8f9fa; border-radius: 3px; }

/* === Wiki layout (sidebar nav + content) ================================ */
#wiki-sidebar .nav-link {
    padding: 0.35rem 1rem; font-size: 0.9em;
    color: #495057; border-radius: 0;
}
#wiki-sidebar .nav-link:hover { background: #f1f3f5; }
#wiki-sidebar .nav-link.active {
    background: #e7f1ff; color: #0d6efd; font-weight: 600;
    border-left: 3px solid #0d6efd; padding-left: calc(1rem - 3px);
}
#wiki-sidebar .wiki-section {
    font-size: 0.75em; text-transform: uppercase; color: #adb5bd;
    padding: 0.5rem 1rem 0.25rem; letter-spacing: 0.05em;
}
#wiki-content h2 { font-size: 1.6rem; margin-bottom: 0.75rem; }
#wiki-content h3 { font-size: 1.2rem; margin-top: 1.4rem; }
#wiki-content h4 { font-size: 1.05rem; margin-top: 1.1rem; color: #495057; }
#wiki-content code   { background: #f1f3f5; padding: 1px 5px; border-radius: 3px; font-size: 0.92em; }
#wiki-content pre    { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 4px; padding: 10px 14px; font-size: 0.9em; overflow-x: auto; }
#wiki-content pre code { background: transparent; padding: 0; }
#wiki-content p      { line-height: 1.55; }
#wiki-content table  { width: auto; margin: 0.75rem 0; }
#wiki-content table th, #wiki-content table td { padding: 4px 10px; border: 1px solid #e9ecef; }
#wiki-content .wiki-callout {
    border-left: 4px solid #0d6efd; background: #e7f1ff;
    padding: 10px 14px; margin: 0.75rem 0; border-radius: 3px;
}
#wiki-content .wiki-callout.warn { border-left-color: #ffc107; background: #fff8e1; }

/* === Maintenance banner =================================================
   (mostrato quando il backend e' unreachable, da JS; default hidden) */
#maint-banner {
    margin: 6px 12px;
    padding: 3px 10px;
    background: #fff3cd; color: #856404;
    border: 1px solid #ffc107; border-radius: 3px;
    font-size: 0.85rem; font-weight: 500; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 50vw;
    display: none;  /* JS toggla a inline-block */
}
#maint-banner i.fas { margin-right: 6px; }

/* === Custom badges per service subtypes (LINK / GATEWAY) ================ */
.badge-purple { background-color: #6f42c1; color: #fff; }
.badge-orange { background-color: #fd7e14; color: #fff; }

/* === DataTables: integrate con AdminLTE =================================
   Sopprime margini extra e aggiusta search/length su navbar. */
.dataTables_wrapper .row { margin: 0 -7.5px; }
.dataTables_wrapper .row > div { padding: 0 7.5px; }
.dataTables_filter input,
.dataTables_length select { margin-left: 0.4em; }
table.dataTable { width: 100% !important; }

/* === Brand/header tweaks ================================================ */
.app-brand {
    font-weight: 600;
    letter-spacing: .02em;
}

/* === Stat-card (deprecato BS5 shim, mantenere per back-compat) ========== */
.stat-card { border-left: 4px solid #17a2b8; transition: transform .15s ease; }
.stat-card:hover { transform: translateY(-2px); }
.stat-card .stat-value { font-size: 2rem; font-weight: 600; line-height: 1; }
.stat-card .stat-label { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; }

/* === Empty state ======================================================== */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}
.empty-state .empty-icon {
    font-size: 3rem;
    opacity: .3;
    margin-bottom: 1rem;
}
.loading-inline {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #ddd;
    border-top-color: #17a2b8;
    border-radius: 50%;
    animation: ht-spin 0.6s linear infinite;
}
@keyframes ht-spin { to { transform: rotate(360deg); } }

/* === Public/auth pages (login/signup/reset/verify) — palette SAK =========
   SAK usa modali Bootstrap modal-sm sopra la dashboard pubblica. HamThings
   v2 usa pagine dedicate (architettura diversa: backend sempre-auth).
   Rendiamo la card simile a un modal-sm su bg AdminLTE neutro #f4f6f9. */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f6f9;  /* AdminLTE 3 body bg default */
    padding: 1rem;
}
.login-card {
    width: 100%;
    max-width: 320px;  /* matches modal-sm */
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
}
.login-card .card-body { background: #fff; }
.login-card .app-brand {
    color: #495057;
    font-weight: 600;
}
.login-card .btn-primary {
    width: 100%;
    font-weight: 500;
}
.login-card hr { border-top-color: #e9ecef; }
.login-card a { color: #007bff; text-decoration: none; }
.login-card a:hover { text-decoration: underline; }