/* ntu-live.css -- styling voor de live-data panels op de NTU-detailpagina. */

@keyframes ofspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Wijziging-flash: neutraal (achtergrond) of richting-gebonden (tekstkleur).
   Keyframes met alleen 'from' animeren terug naar de basiswaarde van het element. */
@keyframes ntu-kf-bg   { from { background-color: #fcf8e3; } }
@keyframes ntu-kf-up   { from { color: #2e7d32; } }
@keyframes ntu-kf-down { from { color: #c0392b; } }
.ntu-flash      { animation: ntu-kf-bg   1.6s ease; }
.ntu-flash-up   { animation: ntu-kf-up   1.6s ease; }
.ntu-flash-down { animation: ntu-kf-down 1.6s ease; }

/* Richting-gebonden ACHTERGROND-flash: voor cellen waarvan de waarde een
   gekleurde badge is (poort Up/Down, CATV, WAN Enabled). Een tekstkleur-flash is
   daar onzichtbaar (badge-tekst is wit), dus flashen we de celachtergrond groen
   (positieve wijziging) of rood (negatieve). */
@keyframes ntu-kf-up-bg   { from { background-color: #dff0d8; } }   /* groen */
@keyframes ntu-kf-down-bg { from { background-color: #f2dede; } }   /* rood  */
.ntu-flash-up-bg   { animation: ntu-kf-up-bg   1.6s ease; }
.ntu-flash-down-bg { animation: ntu-kf-down-bg 1.6s ease; }

/* Caret in de panel-header wordt een spinner tijdens het laden. */
.panel-heading .accordion-toggle.ntu-live-loading:after {
    content: "\e031";              /* glyphicon-refresh */
    display: inline-block;
    animation: ofspin 1s linear infinite;
}

/* Vaste kolombreedtes: de kolommen worden bepaald door de <th>-breedtes en NIET
   door de celinhoud, zodat wisselende waardes (rates, signaal, IP, badge) de
   kolommen niet meer laten verschuiven tijdens het live verversen. Inhoud die
   niet past wordt afgekapt i.p.v. de kolom op te rekken. */
.ntu-wc, .ntu-ct {
    table-layout: fixed;
    width: 100%;
}
.ntu-wc td, .ntu-wc th, .ntu-ct td, .ntu-ct th {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Wireless clients: smooth signaalkleur + fade in/out van rijen. */
.ntu-wc tr, .ntu-ct tr {
    transition: opacity 0.5s ease;
}
.ntu-wc tr.ntu-wc-new, .ntu-ct tr.ntu-wc-new {
    opacity: 0;
}
.ntu-wc tr.ntu-wc-leaving, .ntu-ct tr.ntu-wc-leaving {
    opacity: 0;
}
/* Kwaliteitskolommen (Strength / SNR / TX-CCQ): gecentreerd. */
.ntu-wc th.ntu-q, .ntu-wc td.ntu-q { text-align: center; }

/* MAC: vendor-badge op een nieuwe regel onder het adres, nooit breder dan het
   MAC-adres (anders afgekapt met ellipsis). Geldt voor zowel Wireless (.ntu-wc)
   als Wired (.ntu-ct) clients, zodat beide er gelijk uitzien. */
.ntu-wc-macwrap   { display: inline-block; max-width: 100%; }
.ntu-wc-macaddr   { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Badges (vendor + optioneel de bekende-entiteit) staan samen op één regel onder
   de MAC, naast elkaar. De regel clipt als geheel zodat hij nooit breder wordt
   dan de kolom (geen kolom-jitter). */
.ntu-wc-badges {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ntu-wc-badges .label {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.ntu-wc-badges .label + .label { margin-left: 4px; }

/* IP: hostname op een nieuwe regel onder het adres (zelfde opzet als de MAC). */
.ntu-wc-ipwrap { display: inline-block; max-width: 100%; }
.ntu-wc-ipaddr { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntu-wc-host {
    display: block;
    color: #888;
    font-size: 90%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Gegokte vendor-badge (op basis van hostnaam): geen ingekleurd vlak maar een
   "ghost" badge -- transparant met een dunne gestreepte rand en gedempte tekst.
   De streepjesrand leest als "voorlopig/geschat" en valt rustig weg t.o.v. de
   stevige blauwe (zekere) badge. */
.ntu-wc-brand-guess {
    background-color: transparent;
    color: #9b9b9b;
    border: 1px dashed #c4c4c4;
}

/* "Geen apparaten"-regel: gecentreerd en gedempt binnen de tabel. */
.ntu-empty-row td {
    text-align: center;
    color: #999;
    padding: 14px;
}

/* Kwaliteitscellen (Signal / SNR / TX-CCQ): originele grenswaardes, maar de
   achtergrond animeert smooth bij een drempel-overgang. */
.ntu-wc td.ntu-q      { transition: background-color 0.8s ease; }
.ntu-wc td.ntu-q-good { background-color: #dff0d8; }   /* groen  (bootstrap success) */
.ntu-wc td.ntu-q-warn { background-color: #fcf8e3; }   /* geel   (bootstrap warning) */
.ntu-wc td.ntu-q-bad  { background-color: #f2dede; }   /* rood   (bootstrap danger)  */

/* DFS/radar-badge in de Wireless Clients-panelkop. Rustige gele "soft" badge
   (lichte vulling + gedempte amberkleurige tekst, geen rood): informeert dat een
   5GHz-radio nu een DFS-radarcheck doet zonder de aandacht op te eisen. Staat in
   de altijd-zichtbare panelkop, dus zichtbaar in zowel in- als uitgeklapte stand. */
.ntu-dfs-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 1px 9px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.6;
    vertical-align: middle;
    color: #8a6d3b;                 /* bootstrap warning-tekst (amber) */
    background-color: #fcf8e3;      /* bootstrap warning-vlak (licht geel) */
    border: 1px solid #faebcc;
}
.ntu-dfs-badge.ntu-dfs-hidden { display: none; }
/* Statische radar-ringen; enkel de sweep-lijn draait rond het middelpunt (8,8 in
   de viewBox) -- leest als "bezig met scannen / nog niet klaar", zonder dat het
   hele icoontje raar ronddraait. */
.ntu-dfs-ico { flex: 0 0 auto; }
.ntu-dfs-beam {
    transform-box: view-box;
    transform-origin: 8px 8px;
    animation: ntu-dfs-sweep 1.6s linear infinite;
}
@keyframes ntu-dfs-sweep { to { transform: rotate(360deg); } }

/* Actiekolom (kick-knop) in de wireless-clients-tabel: knop gecentreerd. De knop
   is dezelfde min-knop als bij port-forwards / DHCP-leases (btn-default +
   glyphicon-minus). Tijdens het kicken draait de glyph (ntu-spin). */
.ntu-wc th.ntu-wc-actioncol { text-align: center; }
.ntu-wc td.ntu-wc-action { text-align: center; vertical-align: middle; padding-left: 4px; padding-right: 4px; }
.ntu-wc td.ntu-wc-action .ntu-wc-kick.ntu-spin { animation: ofspin 1s linear infinite; }