/* ==== One-time page-transition suppression (Send only) ==== */
/* When html has .no-animate, disable animate.css and any CSS transitions */
html.no-animate .animate__animated {
    animation: none !important;
}

html.no-animate *,
html.no-animate *::before,
html.no-animate *::after {
    transition: none !important;
}
/* Hide any page loader on this one load */
html.no-animate .page-loader {
    display: none !important;
    animation: none !important;
}
/* Stop shimmer animation as well */
html.no-animate .loader-shimmer > span {
    animation: none !important;
}

/* Prevent layout shifts when vertical scrollbar appears/disappears between pages */
html {
    scrollbar-gutter: stable;
}

/* ===== Tooltips ===== */
.tooltip-parent {
    position: relative;
}

.tooltip {
    display: none;
    white-space: nowrap;
    border-radius: .375rem;
    background: #1e293b;
    color: #f1f5f9;
    font-size: .75rem;
    padding: .25rem .5rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
    z-index: 3500;
    pointer-events: none;
}

.tooltip-local {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%) translateY(8px);
}

.tooltip-fixed-side {
    position: fixed;
    transform: translateY(-50%);
}

.tooltip-parent:hover .tooltip,
.tooltip-parent:focus-within .tooltip {
    display: block;
}

body.hide-tooltips .tooltip {
    display: none !important;
}

.tooltip-parent[aria-expanded="true"] .tooltip {
    display: none !important;
}

/* ===== Sidebar flyouts (scoped!) ===== */
/* ⛔️ היה כאן: .submenu { position: fixed; ... } – זה דרס תתי-תפריטים סטטיים.
   ✅ במקום זאת, נרכז את הסטייל לפליי-אאוטים בלבד. */
aside[data-sidebar="main"] .docker-flyout {
    position: fixed;
    z-index: 4000;
    width: 11rem;
    border-radius: .75rem;
    background: #334155;
    color: #e5e7eb;
    border: 1px solid rgba(71,85,105,.6);
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
    padding: .5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
}
/* הצגה ב-hover/focus (אם אין JS) */
[data-menu="docker-group"]:is(:hover, :focus-within) .docker-flyout {
    opacity: 1;
    visibility: visible;
    transform: none;
}

#chat-top-panel {
    z-index: 5000;
}

/* ===== Page Loader (scoped to content area) ===== */
/* Common loader styles */
.page-loader {
    inset: 0;
    z-index: 9999;
    display: none; /* .show => flex */
    align-items: center;
    justify-content: center;
    background: rgba(2,6,23,0.85);
    backdrop-filter: blur(6px);
}
/* Full-screen variant if ever needed */
.page-loader--fixed {
    position: fixed;
}
/* Inset variant: covers only its positioned parent (#content-shell) */
.page-loader--inset {
    position: absolute;
}
/* Visible state */
.page-loader.show {
    display: flex;
}

.loader-shimmer {
    height: 6px;
    width: 14rem;
    overflow: hidden;
    border-radius: 9999px;
    background: rgba(148,163,184,.35);
}

    .loader-shimmer > span {
        display: block;
        height: 100%;
        width: 40%;
        background: currentColor;
        animation: loader-slide 1.2s linear infinite;
    }

@keyframes loader-slide {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(50%);
    }

    100% {
        transform: translateX(300%);
    }
}

/* ===== Restore Tailwind responsive display utilities (shim) ===== */
@media (min-width: 640px) {
    .sm\:block {
        display: block !important;
    }

    .sm\:inline-block {
        display: inline-block !important;
    }

    .sm\:flex {
        display: flex !important;
    }
}

@media (min-width: 768px) {
    .md\:block {
        display: block !important;
    }

    .md\:inline-flex {
        display: inline-flex !important;
    }

    .md\:flex {
        display: flex !important;
    }
}

/* Utilities בטוחים לשימוש מקומי (במקום .hidden) */
.u-hidden {
    display: none !important;
}

.only-md-flex {
    display: none;
}

@media (min-width: 768px) {
    .only-md-flex {
        display: flex !important;
    }
}

/* ===== Global Theme Layer (gray / light / black) =====
   Goal:
   - Default stays GRAY (no white flash)
   - LIGHT uses a soft white across the site
   - BLACK adds a deeper dark option
   - Icons follow text color (currentColor)
*/

:root {
    /* If UI customization provides --ui-bg, we use it for the gray theme. */
    --app-bg-gray: var(--ui-bg, #0F172A);
    --app-bg-layer-gray:
        radial-gradient(circle at 20% 20%, rgba(30,41,59,.6) 0%, rgba(15,23,42,0) 60%),
        radial-gradient(circle at 80% 10%, rgba(2,6,23,.6) 0%, rgba(15,23,42,0) 70%),
        linear-gradient(to bottom right,
            rgba(15,23,42,1) 0%,
            rgba(30,41,59,1) 50%,
            rgba(15,23,42,1) 100%);
    --app-bg-layer-black:
        radial-gradient(circle at 20% 20%, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 60%),
        radial-gradient(circle at 80% 10%, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 70%),
        linear-gradient(to bottom right,
            rgba(0,0,0,1) 0%,
            rgba(10,10,10,1) 50%,
            rgba(0,0,0,1) 100%);
    --app-bg-layer-light:
        radial-gradient(circle at 20% 20%, rgba(226,232,240,.9) 0%, rgba(248,250,252,0) 60%),
        radial-gradient(circle at 80% 10%, rgba(203,213,225,.9) 0%, rgba(248,250,252,0) 70%),
        linear-gradient(to bottom right,
            rgba(248,250,252,1) 0%,
            rgba(226,232,240,1) 50%,
            rgba(248,250,252,1) 100%);
}

html[data-theme="gray"] {
    color-scheme: dark;
    --app-bg-layer: var(--app-bg-layer-gray);
}

html[data-theme="black"] {
    color-scheme: dark;
    --app-bg-layer: var(--app-bg-layer-black);
}

html[data-theme="light"] {
    color-scheme: light;
    --app-bg-layer: var(--app-bg-layer-light);
}

/* Background layer */
html[data-theme="gray"] body {
    background-color: var(--app-bg-gray) !important;
    color: #f1f5f9;
}

html[data-theme="black"] body {
    background-color: #000 !important;
    color: #f8fafc;
}

html[data-theme="light"] body {
    /* Soft white (not pure #fff) */
    background-color: #f8fafc !important;
    color: #0f172a;
}

/* Roles table header: black in dark themes */
html[data-theme="gray"] table.roles-table thead,
html[data-theme="black"] table.roles-table thead {
    background-color: rgba(0,0,0,.65) !important;
}

html[data-theme="light"] table.roles-table thead {
    background-color: rgba(15,23,42,.06) !important;
    color: #0f172a;
}

html[data-theme="gray"] .roles-table-shell,
html[data-theme="black"] .roles-table-shell {
    background-color: rgba(0,0,0,.35) !important;
}

html[data-theme="gray"] table.roles-table,
html[data-theme="black"] table.roles-table {
    background-color: rgba(0,0,0,.45) !important;
}

html[data-theme="gray"] table.roles-table tbody tr,
html[data-theme="black"] table.roles-table tbody tr {
    background-color: rgba(0,0,0,.18) !important;
}

html[data-theme="gray"] table.roles-table tbody tr:hover,
html[data-theme="black"] table.roles-table tbody tr:hover {
    background-color: rgba(255,255,255,.05) !important;
}

/* General Settings (Key/Value/Notes tables): follow UI customization tokens */
section[data-page="general-settings"] {
    /* Fallbacks match the previous look if UI variables are missing. */
    --gs-table-bg: var(--ui-card, rgba(0,0,0,.42));
    --gs-table-head-bg: rgba(0,0,0,.78);
    --gs-table-row-bg: transparent;
    --gs-table-row-alt-bg: rgba(0,0,0,.18);
    --gs-table-row-hover-bg: rgba(255,255,255,.05);
    --gs-table-divider: rgba(148,163,184,.28);

    /* Extra surfaces used by Tailwind utility classes within this page (inputs/tabs). */
    --gs-surface-1: var(--ui-card, rgba(0,0,0,.42));
    --gs-surface-2: rgba(0,0,0,.35);
    --gs-input-bg: rgba(0,0,0,.35);
}

/* Dark themes: derive from ui-card / ui-bg when possible. */
/* Gray theme: avoid pure black; match the site's slate/card palette */
html[data-theme="gray"] section[data-page="general-settings"] {
    --gs-table-bg: color-mix(in srgb, var(--ui-card, rgba(51,65,85,0.8)) 95%, transparent);
    /* Similar to Tailwind bg-slate-800/80 feel, but derived from ui tokens */
    --gs-table-head-bg: color-mix(in srgb, var(--ui-card, rgba(51,65,85,0.8)) 78%, var(--ui-bg, #0F172A) 22%);
    --gs-table-row-bg: transparent;
    --gs-table-row-alt-bg: color-mix(in srgb, var(--ui-card, rgba(51,65,85,0.8)) 70%, var(--ui-bg, #0F172A) 30%);
    --gs-table-row-hover-bg: color-mix(in srgb, var(--ui-brand, #3B82F6) 12%, var(--ui-card, rgba(51,65,85,0.8)) 88%);
    --gs-table-divider: color-mix(in srgb, currentColor 16%, transparent);

    --gs-surface-1: color-mix(in srgb, var(--ui-card, rgba(51,65,85,0.8)) 92%, transparent);
    --gs-surface-2: color-mix(in srgb, var(--ui-card, rgba(51,65,85,0.8)) 72%, var(--ui-bg, #0F172A) 28%);
    --gs-input-bg: color-mix(in srgb, var(--ui-card, rgba(51,65,85,0.8)) 84%, var(--ui-bg, #0F172A) 16%);
}

/* Black theme: keep the header darker and more contrasty */
html[data-theme="black"] section[data-page="general-settings"] {
    --gs-table-bg: color-mix(in srgb, var(--ui-card, rgba(51,65,85,0.8)) 88%, #000 12%);
    --gs-table-head-bg: color-mix(in srgb, #000 70%, var(--ui-card, rgba(51,65,85,0.8)) 30%);
    --gs-table-row-bg: transparent;
    --gs-table-row-alt-bg: color-mix(in srgb, #000 35%, var(--ui-card, rgba(51,65,85,0.8)) 65%);
    --gs-table-row-hover-bg: color-mix(in srgb, var(--ui-brand, #3B82F6) 12%, #000 88%);
    --gs-table-divider: color-mix(in srgb, currentColor 16%, transparent);

    --gs-surface-1: color-mix(in srgb, var(--ui-card, rgba(51,65,85,0.8)) 86%, #000 14%);
    --gs-surface-2: color-mix(in srgb, #000 55%, var(--ui-card, rgba(51,65,85,0.8)) 45%);
    --gs-input-bg: color-mix(in srgb, #000 35%, var(--ui-card, rgba(51,65,85,0.8)) 65%);
}

/* Light theme: keep a soft, readable look using ui-card + a tiny brand tint on hover. */
html[data-theme="light"] section[data-page="general-settings"] {
    --gs-table-bg: color-mix(in srgb, var(--ui-card, rgba(255,255,255,.92)) 92%, transparent);
    --gs-table-head-bg: color-mix(in srgb, var(--ui-brand, #3B82F6) 10%, var(--ui-card, rgba(255,255,255,.92)) 90%);
    --gs-table-row-bg: transparent;
    --gs-table-row-alt-bg: color-mix(in srgb, #0f172a 3%, transparent);
    --gs-table-row-hover-bg: color-mix(in srgb, var(--ui-brand, #3B82F6) 9%, transparent);
    --gs-table-divider: color-mix(in srgb, #0f172a 12%, transparent);

    --gs-surface-1: color-mix(in srgb, var(--ui-card, rgba(255,255,255,.92)) 92%, transparent);
    --gs-surface-2: color-mix(in srgb, #0f172a 4%, var(--ui-card, rgba(255,255,255,.92)) 96%);
    --gs-input-bg: color-mix(in srgb, #0f172a 3%, var(--ui-card, rgba(255,255,255,.92)) 97%);
}

section[data-page="general-settings"] table {
    background-color: var(--gs-table-bg) !important;
}

section[data-page="general-settings"] table thead tr {
    background-color: var(--gs-table-head-bg) !important;
    color: inherit;
}

section[data-page="general-settings"] table tbody tr {
    background-color: var(--gs-table-row-bg) !important;
}

section[data-page="general-settings"] table tbody tr:nth-child(even) {
    background-color: var(--gs-table-row-alt-bg) !important;
}

section[data-page="general-settings"] table tbody tr:hover {
    background-color: var(--gs-table-row-hover-bg) !important;
}

/* Override Tailwind divide color used on tbody. */
section[data-page="general-settings"] tbody.divide-y > :not([hidden]) ~ :not([hidden]) {
    border-top-color: var(--gs-table-divider) !important;
}

/* Make the surrounding cards match the UI theme as well (prevents bright borders). */
section[data-page="general-settings"] .bg-slate-700\/80 {
    background-color: var(--ui-card, rgba(51,65,85,0.8)) !important;
}

/* These utility classes are heavily used in the Settings tables (header rows, tabs, inputs). */
section[data-page="general-settings"] .bg-slate-800\/80 {
    background-color: var(--gs-table-head-bg) !important;
}

section[data-page="general-settings"] .bg-slate-800\/40 {
    background-color: var(--gs-input-bg) !important;
}

section[data-page="general-settings"] .bg-slate-800\/50 {
    background-color: var(--gs-surface-2) !important;
}

section[data-page="general-settings"] .bg-slate-800\/60 {
    background-color: var(--gs-surface-2) !important;
}

section[data-page="general-settings"] .bg-slate-800\/40:focus,
section[data-page="general-settings"] .bg-slate-800\/40:focus-visible {
    background-color: var(--gs-input-bg) !important;
}

section[data-page="general-settings"] .border-slate-600\/50 {
    border-color: var(--gs-table-divider) !important;
}

section[data-page="general-settings"] .border-slate-500\/60 {
    border-color: var(--gs-table-divider) !important;
}

/* Theme icons inside #theme-toggle */
#theme-toggle [data-theme-icon] {
    display: none;
}
html[data-theme="light"] #theme-toggle [data-theme-icon="light"] { display: block; }
html[data-theme="gray"]  #theme-toggle [data-theme-icon="gray"] { display: block; }
html[data-theme="black"] #theme-toggle [data-theme-icon="black"] { display: block; }

/* Topbar + Sidebar use the same Tailwind classes (bg-slate-700, borders, etc).
   Theme-specific palette mapping is handled below via the utility overrides. */

/* Common Tailwind utility overrides for LIGHT so the site doesn't keep dark text/bg classes */
html[data-theme="light"] .bg-slate-900 { background-color: #f8fafc !important; }
html[data-theme="light"] .bg-slate-900\/60 { background-color: rgba(248,250,252,.75) !important; }
html[data-theme="light"] .bg-slate-800 { background-color: #ffffff !important; }
html[data-theme="light"] .bg-slate-800\/80 { background-color: rgba(255,255,255,.88) !important; }
html[data-theme="light"] .bg-slate-800\/60 { background-color: rgba(255,255,255,.82) !important; }
html[data-theme="light"] .bg-slate-800\/40 { background-color: rgba(255,255,255,.72) !important; }
html[data-theme="light"] .bg-slate-700 { background-color: #f1f5f9 !important; }
html[data-theme="light"] .bg-slate-700\/80 { background-color: rgba(241,245,249,.86) !important; }
html[data-theme="light"] .bg-slate-700\/70 { background-color: rgba(241,245,249,.82) !important; }
html[data-theme="light"] .bg-slate-700\/60 { background-color: rgba(241,245,249,.78) !important; }
html[data-theme="light"] .bg-slate-700\/50 { background-color: rgba(241,245,249,.70) !important; }

html[data-theme="light"] .text-slate-100 { color: #0f172a !important; }
html[data-theme="light"] .text-slate-200 { color: #0f172a !important; }
html[data-theme="light"] .text-slate-300 { color: #334155 !important; }
html[data-theme="light"] .text-slate-400 { color: #475569 !important; }
html[data-theme="light"] .text-slate-500 { color: #64748b !important; }

html[data-theme="light"] .border-slate-600 { border-color: rgba(148,163,184,.75) !important; }
html[data-theme="light"] .border-slate-600\/50 { border-color: rgba(148,163,184,.55) !important; }
html[data-theme="light"] .border-slate-500\/60 { border-color: rgba(148,163,184,.65) !important; }
html[data-theme="light"] .border-slate-600\/40 { border-color: rgba(148,163,184,.45) !important; }

/* Deeper blacks for BLACK theme (keeps the gray look but darker) */
html[data-theme="black"] .bg-slate-900 { background-color: #000 !important; }
html[data-theme="black"] .bg-slate-800 { background-color: rgba(17,17,17,1) !important; }
html[data-theme="black"] .bg-slate-700 { background-color: rgba(28,28,28,1) !important; }
html[data-theme="black"] .bg-slate-700\/80 { background-color: rgba(28,28,28,.86) !important; }
html[data-theme="black"] .bg-slate-800\/40 { background-color: rgba(17,17,17,.70) !important; }

/* ===== Cyber Zabbix -> MainProject format compatibility =====
   Many CyberManagement Zabbix pages were authored with darker surfaces (bg-slate-900/950)
   and sky buttons. MainProject uses slate/card surfaces + brand buttons.
   We keep markup stable and map common utility classes to the MainProject look.
*/

/* Card surfaces (map darker backgrounds to the main card surface) */
.bg-slate-900\/90,
.bg-slate-900\/80,
.bg-slate-900\/70,
.bg-slate-900\/60,
.bg-slate-900\/50,
.bg-slate-900 {
    background-color: var(--ui-card, rgba(51,65,85,0.8)) !important;
}

.bg-slate-950\/80,
.bg-slate-950\/60,
.bg-slate-950 {
    background-color: color-mix(in srgb, var(--ui-card, rgba(51,65,85,0.8)) 86%, #000 14%) !important;
}

/* Common card borders */
.border-slate-800\/80,
.border-slate-800,
.border-slate-700\/80,
.border-slate-700\/70,
.border-slate-700\/60,
.border-slate-700 {
    border-color: rgba(71,85,105,.6) !important;
}

/* Common table separators in those pages */
.border-slate-800,
.divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(71,85,105,.6) !important;
}

/* Primary actions: sky -> brand */
.bg-sky-600 {
    background-color: var(--ui-brand, #2563eb) !important;
}

.hover\:bg-sky-500:hover {
    background-color: color-mix(in srgb, var(--ui-brand, #2563eb) 86%, #fff 14%) !important;
}

.bg-sky-600\/80 {
    background-color: color-mix(in srgb, var(--ui-brand, #2563eb) 80%, transparent) !important;
}

.hover\:bg-sky-500\/90:hover {
    background-color: color-mix(in srgb, var(--ui-brand, #2563eb) 90%, transparent) !important;
}

.border-sky-600\/70 {
    border-color: color-mix(in srgb, var(--ui-brand, #2563eb) 70%, transparent) !important;
}

/* ===== Zabbix-native shell helpers ===== */
section[data-zbx-page] {
    --zbx-panel-bg: rgba(51,65,85,.82);
    --zbx-panel-border: rgba(100,116,139,.42);
    --zbx-panel-muted: #94a3b8;
    --zbx-panel-text: #e2e8f0;
    --zbx-surface: rgba(15,23,42,.38);
    --zbx-surface-strong: rgba(15,23,42,.58);
    --zbx-accent: var(--ui-brand, #3b82f6);
}

section[data-zbx-page] .zbx-panel {
    border-radius: 1rem;
    border: 1px solid var(--zbx-panel-border);
    background: var(--zbx-panel-bg);
    color: var(--zbx-panel-text);
    box-shadow: 0 10px 30px rgba(2, 6, 23, .22);
    overflow: hidden;
}

section[data-zbx-page] .zbx-panel__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid rgba(100,116,139,.25);
}

section[data-zbx-page] .zbx-panel__title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #cbd5e1;
}

section[data-zbx-page] .zbx-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid rgba(100,116,139,.2);
    background: rgba(15,23,42,.18);
}

section[data-zbx-page] .zbx-toolbar__group {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

section[data-zbx-page] .zbx-toolbar__meta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

section[data-zbx-page] .zbx-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--zbx-accent) 35%, transparent);
    background: color-mix(in srgb, var(--zbx-accent) 14%, transparent);
    color: color-mix(in srgb, var(--zbx-accent) 74%, white 26%);
    padding: .2rem .7rem;
    font-size: .72rem;
    font-weight: 700;
}

section[data-zbx-page] .zbx-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border-radius: 9999px;
    border: 1px solid rgba(100,116,139,.45);
    background: rgba(15,23,42,.28);
    color: var(--zbx-panel-text);
    padding: .45rem .9rem;
    font-size: .84rem;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

section[data-zbx-page] .zbx-btn:hover {
    background: rgba(71,85,105,.7);
}

section[data-zbx-page] .zbx-btn--primary {
    background: color-mix(in srgb, var(--zbx-accent) 84%, transparent);
    border-color: color-mix(in srgb, var(--zbx-accent) 72%, transparent);
    color: white;
}

section[data-zbx-page] .zbx-btn--primary:hover {
    background: color-mix(in srgb, var(--zbx-accent) 92%, white 8%);
}

section[data-zbx-page] .zbx-input {
    border-radius: .7rem;
    border: 1px solid rgba(100,116,139,.45);
    background: rgba(15,23,42,.42);
    color: var(--zbx-panel-text);
    padding: .45rem .75rem;
    font-size: .8rem;
}

section[data-zbx-page] .zbx-input::placeholder {
    color: #94a3b8;
}

section[data-zbx-page] .zbx-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    padding: 1rem;
}

section[data-zbx-page] .zbx-kpi {
    border-radius: .9rem;
    border: 1px solid rgba(100,116,139,.3);
    background: var(--zbx-surface);
    padding: .9rem 1rem;
}

section[data-zbx-page] .zbx-kpi__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--zbx-panel-muted);
}

section[data-zbx-page] .zbx-kpi__value {
    margin-top: .25rem;
    font-size: 1.55rem;
    line-height: 1.1;
    font-weight: 700;
    color: #f8fafc;
}

section[data-zbx-page] .zbx-kpi__hint {
    margin-top: .15rem;
    font-size: .78rem;
    color: #cbd5e1;
}

section[data-zbx-page] .zbx-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: #94a3b8;
}

section[data-zbx-page] .zbx-empty i {
    font-size: 1.8rem;
    color: #64748b;
}

section[data-zbx-page] .zbx-empty__title {
    font-size: .95rem;
    font-weight: 600;
    color: #e2e8f0;
}

section[data-zbx-page] .zbx-table-wrap {
    overflow-x: auto;
}

section[data-zbx-page] .zbx-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .92rem;
}

section[data-zbx-page] .zbx-table thead {
    background: rgba(15,23,42,.55);
}

section[data-zbx-page] .zbx-table th {
    padding: .7rem .85rem;
    text-align: left;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
    white-space: nowrap;
}

section[data-zbx-page] .zbx-table td {
    padding: .8rem .85rem;
    color: #e2e8f0;
    border-top: 1px solid rgba(100,116,139,.18);
    vertical-align: middle;
}

section[data-zbx-page] .zbx-table tbody tr:hover {
    background: rgba(15,23,42,.22);
}

section[data-zbx-page] .zbx-note {
    font-size: .78rem;
    color: #cbd5e1;
}