/* ==========================================================================
   NetBackup Manager - Tema "Dark Tech / Cyberpunk Network"
   Reescrito completamente. Sobrescreve Bootstrap 5 para um visual dark neon.
   ========================================================================== */

/* -------------------------------------------------------------- Variáveis */
:root {
    --nb-bg:            #0a0e1a;   /* background principal */
    --nb-bg-2:          #0d1226;   /* cards / superfícies */
    --nb-sidebar-bg:    #080c18;   /* sidebar */
    --nb-surface:       #0d1226;
    --nb-surface-2:     #0d1a35;   /* header de tabela */
    --nb-border:        #1a2a4a;   /* borda padrão */
    --nb-border-soft:   #14203a;

    --nb-cyan:          #00d4ff;   /* accent primário */
    --nb-cyan-dim:      #0099cc;
    --nb-purple:        #7b2fff;   /* accent secundário */
    --nb-green:         #00ff88;   /* verde matrix */
    --nb-red:           #ff3366;   /* vermelho neon */
    --nb-amber:         #ffaa00;   /* amarelo */

    --nb-text:          #e0e8ff;   /* texto principal */
    --nb-muted:         #6b7fa3;   /* texto secundário */

    --nb-sidebar-width: 260px;

    --nb-font-tech: 'Rajdhani', 'Share Tech Mono', system-ui, sans-serif;
    --nb-font-mono: 'Share Tech Mono', 'Rajdhani', monospace;
    --nb-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --nb-glow-cyan:   0 0 12px rgba(0, 212, 255, 0.45);
    --nb-glow-purple: 0 0 12px rgba(123, 47, 255, 0.45);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    background-color: var(--nb-bg);
    font-family: var(--nb-font-body);
    color: var(--nb-text);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* ------------------------------------------------------ Fundo animado tech */
/* Grade de pontos/linhas animada */
.nb-bg-grid {
    position: fixed;
    inset: 0;
    z-index: -3;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.05) 1px, transparent 1px),
        radial-gradient(circle at 50% 40%, rgba(123, 47, 255, 0.10), transparent 60%);
    background-size: 44px 44px, 44px 44px, 100% 100%;
    animation: nb-grid-pan 30s linear infinite;
    pointer-events: none;
}

@keyframes nb-grid-pan {
    0%   { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 44px 44px, 44px 44px, 0 0; }
}

/* Scanline sutil percorrendo a tela */
.nb-scanline {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 212, 255, 0.06) 48%,
        rgba(0, 212, 255, 0.12) 50%,
        rgba(0, 212, 255, 0.06) 52%,
        transparent 100%);
    height: 200%;
    animation: nb-scan 7s linear infinite;
    opacity: 0.6;
}

@keyframes nb-scan {
    0%   { transform: translateY(-50%); }
    100% { transform: translateY(0%); }
}

/* Leve overlay de "ruído" via linhas horizontais finas */
.nb-scanline::after {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.015) 0px,
        rgba(255, 255, 255, 0.015) 1px,
        transparent 1px,
        transparent 3px);
    pointer-events: none;
}

/* Partículas flutuantes (CSS puro) */
.nb-particles {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.nb-particles span {
    position: absolute;
    bottom: -20px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--nb-cyan);
    box-shadow: 0 0 8px var(--nb-cyan);
    opacity: 0.5;
    animation: nb-float linear infinite;
}

.nb-particles span:nth-child(even) {
    background: var(--nb-purple);
    box-shadow: 0 0 8px var(--nb-purple);
}

.nb-particles span:nth-child(3n) {
    background: var(--nb-green);
    box-shadow: 0 0 8px var(--nb-green);
}

@keyframes nb-float {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.6; }
    100% { transform: translateY(-102vh) translateX(30px); opacity: 0; }
}

/* -------------------------------------------------- Scrollbar customizada */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--nb-surface); }
::-webkit-scrollbar-thumb {
    background: var(--nb-cyan);
    border-radius: 8px;
    border: 2px solid var(--nb-surface);
}
::-webkit-scrollbar-thumb:hover { background: #33ddff; }
* { scrollbar-color: var(--nb-cyan) var(--nb-surface); scrollbar-width: thin; }

/* -------------------------------------------------- Seleção de texto ciana */
::selection { background: rgba(0, 212, 255, 0.35); color: #fff; }
::-moz-selection { background: rgba(0, 212, 255, 0.35); color: #fff; }

/* ---------------------------------------------------------- Tipografia base */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nb-font-tech);
    letter-spacing: 0.02em;
    color: var(--nb-text);
}

a { color: var(--nb-cyan); }
a:hover { color: #33ddff; }

code, .font-monospace { font-family: var(--nb-font-mono) !important; color: var(--nb-cyan); }

/* Fade-in ao carregar a página */
.nb-content, .nb-login-card {
    animation: nb-fade-in 0.5s ease both;
}

@keyframes nb-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Fix: modais Bootstrap dentro de .nb-content ficavam presos atrás do
   backdrop (stacking context criado pelo transform da animação).
   Garante que o transform seja removido ao fim da animação. */
.nb-content { animation-fill-mode: forwards; }
.nb-content:has(.modal.show) { animation: none; transform: none; }

/* ------------------------------------------------------------------ Login */
.nb-login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    position: relative;
}

.nb-login-card {
    width: 100%;
    max-width: 430px;
    background: rgba(13, 18, 38, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid var(--nb-border);
    border-radius: 16px;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.15), 0 24px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.nb-login-header {
    background: linear-gradient(135deg, #080c18 0%, #10193a 100%);
    color: #fff;
    text-align: center;
    padding: 2.4rem 1.5rem 1.9rem;
    border-bottom: 1px solid var(--nb-border);
    position: relative;
}

.nb-login-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--nb-cyan), var(--nb-purple));
    box-shadow: var(--nb-glow-cyan);
}

.nb-login-header .nb-logo-icon {
    font-size: 2.8rem;
    color: var(--nb-cyan);
    filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.7));
    animation: nb-pulse 2.6s ease-in-out infinite;
}

.nb-login-header h1 {
    font-family: var(--nb-font-tech);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0.6rem 0 0.2rem;
    color: #fff;
}

.nb-login-header p {
    margin: 0;
    color: var(--nb-muted);
    font-size: 0.9rem;
}

.nb-login-body { padding: 1.9rem 1.9rem 2.1rem; }

/* ---------------------------------------------------------------- Sidebar */
.nb-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--nb-sidebar-width);
    background: var(--nb-sidebar-bg);
    color: var(--nb-muted);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform 0.25s ease;
    border-right: 1px solid var(--nb-border);
    box-shadow: 4px 0 24px rgba(0, 212, 255, 0.10),
                1px 0 0 rgba(0, 212, 255, 0.35);
}

.nb-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.3rem 1.4rem;
    border-bottom: 1px solid var(--nb-border);
    color: #fff;
    text-decoration: none;
}

.nb-sidebar-brand .nb-brand-icon {
    font-size: 1.8rem;
    color: var(--nb-cyan);
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.8));
    animation: nb-pulse 2.6s ease-in-out infinite;
}

@keyframes nb-pulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.5)); opacity: 0.9; }
    50%      { filter: drop-shadow(0 0 16px rgba(0, 212, 255, 0.95)); opacity: 1; }
}

.nb-sidebar-brand .nb-brand-text {
    font-family: var(--nb-font-tech);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

.nb-sidebar-brand .nb-brand-text small {
    display: block;
    font-weight: 400;
    font-size: 0.66rem;
    letter-spacing: 0.28em;
    color: var(--nb-cyan);
}

.nb-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.9rem 0.7rem;
}

.nb-nav-section {
    font-family: var(--nb-font-mono);
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #3f5680;
    padding: 0.9rem 0.85rem 0.4rem;
    font-weight: 600;
}

.nb-nav-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.25rem;
    border-radius: 8px;
    color: var(--nb-muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    position: relative;
    border-left: 3px solid transparent;
    transition: background 0.18s, color 0.18s, border-color 0.18s,
                transform 0.18s, box-shadow 0.18s;
}

.nb-nav-link i {
    font-size: 1.15rem;
    width: 1.3rem;
    text-align: center;
    color: var(--nb-cyan);
    transition: filter 0.18s;
}

.nb-nav-link:hover {
    background: rgba(0, 212, 255, 0.07);
    color: var(--nb-text);
    transform: translateX(4px);
    border-left-color: rgba(0, 212, 255, 0.5);
    box-shadow: inset 0 0 18px rgba(0, 212, 255, 0.06);
}

.nb-nav-link:hover i { filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.8)); }

.nb-nav-link.active {
    background: rgba(0, 212, 255, 0.10);
    color: var(--nb-cyan);
    border-left-color: var(--nb-cyan);
    box-shadow: inset 0 0 22px rgba(0, 212, 255, 0.10),
                -2px 0 10px rgba(0, 212, 255, 0.20);
    font-weight: 600;
}

.nb-nav-link.active i {
    color: var(--nb-cyan);
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.9));
}

.nb-sidebar-footer {
    padding: 0.9rem 1.2rem;
    border-top: 1px solid var(--nb-border);
    font-size: 0.72rem;
    color: var(--nb-muted);
    font-family: var(--nb-font-mono);
}

.nb-sidebar-footer i { color: var(--nb-cyan); }

/* --------------------------------------------------------------- Main area */
.nb-main {
    margin-left: var(--nb-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.nb-topbar {
    background: rgba(8, 12, 24, 0.92);
    backdrop-filter: blur(8px);
    padding: 0.7rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid var(--nb-border);
}

.nb-topbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--nb-cyan), var(--nb-purple));
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

.nb-topbar-title {
    font-family: var(--nb-font-tech);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    color: var(--nb-text);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.nb-topbar-title::after {
    content: "_";
    color: var(--nb-cyan);
    animation: nb-blink 1.1s step-end infinite;
    margin-left: 2px;
}

@keyframes nb-blink { 50% { opacity: 0; } }

.nb-topbar-user { display: flex; align-items: center; gap: 0.8rem; }

.nb-user-link { text-decoration: none; display: flex; align-items: center; gap: 0.7rem; }
.nb-user-link.dropdown-toggle::after { color: var(--nb-cyan); }

.nb-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--nb-cyan), var(--nb-purple));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
}

.nb-user-meta { line-height: 1.15; text-align: right; }

.nb-user-meta .nb-user-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--nb-text);
}

.nb-user-meta .nb-user-role {
    font-size: 0.68rem;
    color: var(--nb-cyan);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--nb-font-mono);
}

.nb-content { padding: 1.7rem 1.6rem; flex: 1; position: relative; }

/* --------------------------------------------------------------- Menu btn */
.nb-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    color: var(--nb-cyan);
    cursor: pointer;
}

/* ------------------------------------------------------------- Stat cards */
.nb-stat-card {
    border: 1px solid var(--nb-border);
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(13, 26, 53, 0.7), rgba(13, 18, 38, 0.9));
    backdrop-filter: blur(6px);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.nb-stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--nb-cyan);
    box-shadow: var(--nb-glow-cyan), 0 10px 30px rgba(0, 0, 0, 0.5);
}

.nb-stat-icon {
    width: 58px;
    height: 58px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: #fff;
    flex-shrink: 0;
}

.nb-stat-value {
    font-family: var(--nb-font-mono);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--nb-text);
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.25);
}

.nb-stat-label {
    color: var(--nb-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Barra de progresso animada nos stat cards */
.nb-stat-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.nb-stat-progress span {
    display: block;
    height: 100%;
    width: 0;
    transition: width 1.2s ease 0.2s;
}

.nb-grad-cyan   { background: linear-gradient(135deg, #00d4ff, #0099cc); box-shadow: var(--nb-glow-cyan); }
.nb-grad-green  { background: linear-gradient(135deg, #00ff88, #00b35f); box-shadow: 0 0 12px rgba(0,255,136,0.5); }
.nb-grad-purple { background: linear-gradient(135deg, #7b2fff, #4d1fb0); box-shadow: var(--nb-glow-purple); }
.nb-grad-amber  { background: linear-gradient(135deg, #ffaa00, #cc7a00); box-shadow: 0 0 12px rgba(255,170,0,0.5); }
.nb-grad-red    { background: linear-gradient(135deg, #ff3366, #cc0033); box-shadow: 0 0 12px rgba(255,51,102,0.5); }

.nb-bar-cyan   { background: linear-gradient(90deg, #00d4ff, #7b2fff); }
.nb-bar-green  { background: linear-gradient(90deg, #00ff88, #00d4ff); }
.nb-bar-purple { background: linear-gradient(90deg, #7b2fff, #00d4ff); }
.nb-bar-amber  { background: linear-gradient(90deg, #ffaa00, #ff3366); }

/* Compat: mantém classes antigas usadas em qualquer lugar */
.bg-grad-blue   { background: linear-gradient(135deg, #00d4ff, #0099cc); }
.bg-grad-green  { background: linear-gradient(135deg, #00ff88, #00b35f); }
.bg-grad-orange { background: linear-gradient(135deg, #ffaa00, #cc7a00); }
.bg-grad-red    { background: linear-gradient(135deg, #ff3366, #cc0033); }
.bg-grad-purple { background: linear-gradient(135deg, #7b2fff, #4d1fb0); }

/* ------------------------------------------------------------------ Cards */
.card {
    border: 1px solid var(--nb-border);
    border-radius: 12px;
    background: rgba(13, 18, 38, 0.78);
    backdrop-filter: blur(6px);
    color: var(--nb-text);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.card:hover {
    border-color: rgba(0, 212, 255, 0.55);
    box-shadow: 0 0 18px rgba(0, 212, 255, 0.15), 0 8px 28px rgba(0, 0, 0, 0.5);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--nb-border);
    font-family: var(--nb-font-tech);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--nb-text);
    padding: 1rem 1.25rem;
    border-radius: 12px 12px 0 0 !important;
    position: relative;
}

/* Linha inferior gradiente ciano → roxo no header dos cards */
.card-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--nb-cyan), var(--nb-purple));
    opacity: 0.85;
}

.card-header i { color: var(--nb-cyan); }
.card-body { color: var(--nb-text); }

/* ----------------------------------------------------------------- Tables */
.table {
    margin-bottom: 0;
    color: var(--nb-text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--nb-text);
    border-color: var(--nb-border);
}

.table thead th {
    background: var(--nb-surface-2);
    color: var(--nb-cyan);
    font-family: var(--nb-font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    border-bottom: 1px solid var(--nb-border);
    border-top: none;
    white-space: nowrap;
}

.table tbody tr {
    background: transparent;
    border-left: 3px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

/* Linhas alternadas (zebra) escuras */
.table tbody tr:nth-child(odd)  { background-color: #0a0e1a; }
.table tbody tr:nth-child(even) { background-color: #0d1226; }

.table-hover tbody tr:hover {
    background-color: rgba(0, 212, 255, 0.06);
    border-left-color: var(--nb-cyan);
    box-shadow: inset 0 0 18px rgba(0, 212, 255, 0.05);
}

.table td, .table th {
    vertical-align: middle;
    font-size: 0.9rem;
    border-color: var(--nb-border-soft);
    color: var(--nb-text);
}

.table td.fw-semibold, .table .fw-semibold { color: var(--nb-text); }

/* ----------------------------------------------------------------- Badges */
.nb-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.35em 0.75em;
    border-radius: 6px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-family: var(--nb-font-mono);
    letter-spacing: 0.03em;
}

/* Status badges (sobrescreve utilidades bg-*-subtle do Bootstrap) */
.bg-success-subtle   { background-color: rgba(0, 255, 136, 0.15) !important; }
.bg-danger-subtle    { background-color: rgba(255, 51, 102, 0.15) !important; }
.bg-warning-subtle   { background-color: rgba(255, 170, 0, 0.15) !important; }
.bg-primary-subtle   { background-color: rgba(0, 212, 255, 0.15) !important; }
.bg-info-subtle      { background-color: rgba(0, 212, 255, 0.15) !important; }
.bg-secondary-subtle { background-color: rgba(107, 127, 163, 0.15) !important; }

.text-success { color: var(--nb-green) !important; }
.text-danger  { color: var(--nb-red) !important; }
.text-warning { color: var(--nb-amber) !important; }
.text-primary { color: var(--nb-cyan) !important; }
.text-info    { color: var(--nb-cyan) !important; }
.text-secondary { color: var(--nb-muted) !important; }
.text-muted   { color: var(--nb-muted) !important; }
.text-dark    { color: var(--nb-text) !important; }

/* Dá borda neon aos nb-badge de status conforme a cor de texto */
.nb-badge.text-success { border-color: var(--nb-green); }
.nb-badge.text-danger  { border-color: var(--nb-red); }
.nb-badge.text-warning { border-color: var(--nb-amber); }
.nb-badge.text-primary,
.nb-badge.text-info    { border-color: var(--nb-cyan); }
.nb-badge.text-secondary { border-color: var(--nb-muted); }

/* Neutraliza fundos claros do Bootstrap */
.bg-light, .bg-white { background-color: var(--nb-surface-2) !important; color: var(--nb-text) !important; }
.border { border-color: var(--nb-border) !important; }

/* Badge padrão do Bootstrap */
.badge { font-family: var(--nb-font-mono); font-weight: 600; }
.badge.bg-light, .badge.bg-secondary { background-color: var(--nb-surface-2) !important; color: var(--nb-text) !important; border: 1px solid var(--nb-border); }
.badge.bg-primary { background-color: rgba(0,212,255,0.18) !important; color: var(--nb-cyan) !important; border: 1px solid var(--nb-cyan); }

/* Vendor badges coloridos por fabricante */
.nb-vendor-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.35em 0.75em;
    border-radius: 6px;
    color: #fff;
    font-family: var(--nb-font-mono);
    letter-spacing: 0.03em;
    border: 1px solid transparent;
}

.vendor-huawei   { background: rgba(123, 47, 255, 0.18);  color: #b98cff; border-color: var(--nb-purple); }   /* roxo */
.vendor-mikrotik { background: rgba(0, 212, 255, 0.18);   color: #66e5ff; border-color: var(--nb-cyan); }     /* ciano */
.vendor-datacom  { background: rgba(0, 255, 136, 0.15);   color: #66ffb3; border-color: var(--nb-green); }    /* verde */
.vendor-cisco    { background: rgba(45, 130, 255, 0.18);  color: #82b4ff; border-color: #2d82ff; }            /* azul */
.vendor-juniper  { background: rgba(255, 170, 0, 0.16);   color: #ffc866; border-color: var(--nb-amber); }    /* laranja */
.vendor-outros   { background: rgba(107, 127, 163, 0.18); color: #a7b6d4; border-color: var(--nb-muted); }

/* ------------------------------------------------------------------ Forms */
.form-label {
    font-family: var(--nb-font-mono);
    font-weight: 600;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nb-muted);
    margin-bottom: 0.35rem;
}

.form-control, .form-select {
    background-color: var(--nb-surface);
    border-radius: 4px;
    border: 1px solid var(--nb-border);
    padding: 0.55rem 0.85rem;
    font-size: 0.92rem;
    color: var(--nb-text);
}

.form-control:focus, .form-select:focus {
    background-color: var(--nb-surface);
    border-color: var(--nb-cyan);
    box-shadow: 0 0 0 0.15rem rgba(0, 212, 255, 0.18), var(--nb-glow-cyan);
    color: var(--nb-text);
}

.form-control::placeholder { color: #45577a; }

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300d4ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-select option { background: var(--nb-surface); color: var(--nb-text); }

.form-control:disabled, .form-select:disabled { background-color: #0a1122; color: var(--nb-muted); }

textarea.form-control { font-family: var(--nb-font-mono); }

.input-group-text {
    background-color: var(--nb-surface-2);
    border: 1px solid var(--nb-border);
    color: var(--nb-cyan);
}

.nb-input-hint {
    font-size: 0.78rem;
    color: var(--nb-muted);
    margin-top: 0.25rem;
}

/* Switches / checkboxes */
.form-check-input {
    background-color: var(--nb-surface);
    border: 1px solid var(--nb-border);
}
.form-check-input:checked {
    background-color: var(--nb-cyan);
    border-color: var(--nb-cyan);
    box-shadow: var(--nb-glow-cyan);
}
.form-check-input:focus {
    border-color: var(--nb-cyan);
    box-shadow: 0 0 0 0.15rem rgba(0, 212, 255, 0.18);
}
.form-check-label { color: var(--nb-text); }

/* ---------------------------------------------------------------- Botões */
.btn {
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.02em;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.15s, filter 0.2s;
}

.btn:active { transform: translateY(1px); }

/* Efeito ripple */
.btn .nb-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: nb-ripple 0.6s linear;
    background: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

@keyframes nb-ripple {
    to { transform: scale(4); opacity: 0; }
}

.btn-primary {
    background: linear-gradient(135deg, var(--nb-cyan), var(--nb-cyan-dim));
    border: none;
    color: #06121a;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #33ddff, #00b3e6);
    color: #06121a;
    box-shadow: var(--nb-glow-cyan), 0 0 22px rgba(0, 212, 255, 0.5);
}

.btn-danger {
    background: linear-gradient(135deg, var(--nb-red), #cc0033);
    border: none;
    color: #fff;
}
.btn-danger:hover, .btn-danger:focus {
    background: linear-gradient(135deg, #ff4d7a, #e60039);
    box-shadow: 0 0 20px rgba(255, 51, 102, 0.6);
    color: #fff;
}

.btn-success {
    background: linear-gradient(135deg, var(--nb-green), #00b35f);
    border: none;
    color: #04160c;
}
.btn-success:hover, .btn-success:focus {
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
    color: #04160c;
}

.btn-warning {
    background: linear-gradient(135deg, var(--nb-amber), #cc7a00);
    border: none;
    color: #1a1200;
}
.btn-warning:hover, .btn-warning:focus {
    box-shadow: 0 0 20px rgba(255, 170, 0, 0.6);
    color: #1a1200;
}

/* Botões outline no tema dark */
.btn-outline-primary   { color: var(--nb-cyan); border-color: var(--nb-cyan); background: transparent; }
.btn-outline-primary:hover   { background: rgba(0,212,255,0.15); color: #fff; box-shadow: var(--nb-glow-cyan); border-color: var(--nb-cyan); }
.btn-outline-success   { color: var(--nb-green); border-color: var(--nb-green); background: transparent; }
.btn-outline-success:hover   { background: rgba(0,255,136,0.15); color: #fff; box-shadow: 0 0 12px rgba(0,255,136,0.5); border-color: var(--nb-green); }
.btn-outline-danger    { color: var(--nb-red); border-color: var(--nb-red); background: transparent; }
.btn-outline-danger:hover    { background: rgba(255,51,102,0.15); color: #fff; box-shadow: 0 0 12px rgba(255,51,102,0.5); border-color: var(--nb-red); }
.btn-outline-info      { color: var(--nb-cyan); border-color: var(--nb-cyan); background: transparent; }
.btn-outline-info:hover      { background: rgba(0,212,255,0.15); color: #fff; box-shadow: var(--nb-glow-cyan); border-color: var(--nb-cyan); }
.btn-outline-warning   { color: var(--nb-amber); border-color: var(--nb-amber); background: transparent; }
.btn-outline-warning:hover   { background: rgba(255,170,0,0.15); color: #fff; box-shadow: 0 0 12px rgba(255,170,0,0.5); border-color: var(--nb-amber); }
.btn-outline-secondary { color: var(--nb-muted); border-color: var(--nb-border); background: transparent; }
.btn-outline-secondary:hover { background: rgba(107,127,163,0.12); color: var(--nb-text); border-color: var(--nb-muted); }

.btn-outline-secondary.disabled, .btn.disabled { opacity: 0.5; }

/* ------------------------------------------------------------------ Modais */
.modal-content {
    background: rgba(13, 18, 38, 0.97);
    backdrop-filter: blur(10px);
    border: 1px solid var(--nb-border);
    border-radius: 12px;
    color: var(--nb-text);
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.15), 0 24px 60px rgba(0, 0, 0, 0.7);
}

.modal-header {
    border-bottom: 1px solid var(--nb-border);
    position: relative;
}
.modal-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--nb-cyan), var(--nb-purple));
}
.modal-title { font-family: var(--nb-font-tech); letter-spacing: 0.04em; }
.modal-footer { border-top: 1px solid var(--nb-border); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* --------------------------------------------------------------- Dropdown */
.dropdown-menu {
    background: rgba(13, 18, 38, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid var(--nb-border);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 212, 255, 0.12);
}
.dropdown-item { color: var(--nb-text); }
.dropdown-item:hover, .dropdown-item:focus {
    background: rgba(0, 212, 255, 0.10);
    color: var(--nb-cyan);
}
.dropdown-item.text-danger:hover { background: rgba(255, 51, 102, 0.12); color: var(--nb-red); }
.dropdown-divider { border-color: var(--nb-border); }

/* ----------------------------------------------------------------- Alerts */
.alert { border-radius: 8px; border: 1px solid var(--nb-border); background: var(--nb-surface); color: var(--nb-text); }
.alert-info    { border-color: var(--nb-cyan);  background: rgba(0, 212, 255, 0.10); color: #a6ecff; }
.alert-success { border-color: var(--nb-green); background: rgba(0, 255, 136, 0.10); color: #a6ffcf; }
.alert-danger  { border-color: var(--nb-red);   background: rgba(255, 51, 102, 0.10); color: #ffb3c6; }
.alert-warning { border-color: var(--nb-amber); background: rgba(255, 170, 0, 0.10); color: #ffe0a6; }
.alert i { color: inherit; }

/* --------------------------------------------------------------- List group */
.list-group-item {
    background: transparent;
    border-color: var(--nb-border-soft);
    color: var(--nb-text);
    transition: background 0.15s;
}
.list-group-item:hover { background: rgba(0, 212, 255, 0.05); }

/* --------------------------------------------------------------- Pagination */
.pagination .page-link {
    background: var(--nb-surface);
    border: 1px solid var(--nb-border);
    color: var(--nb-cyan);
}
.pagination .page-link:hover { background: rgba(0, 212, 255, 0.12); color: #fff; }
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--nb-cyan), var(--nb-cyan-dim));
    border-color: var(--nb-cyan);
    color: #06121a;
    box-shadow: var(--nb-glow-cyan);
}
.pagination .page-item.disabled .page-link { background: var(--nb-surface); color: var(--nb-muted); border-color: var(--nb-border-soft); }

/* ------------------------------------------------------------------ Toast */
.toast-container { z-index: 1090; }

.toast {
    background: rgba(13, 18, 38, 0.98) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--nb-border) !important;
    border-left-width: 4px !important;
    border-radius: 8px;
    color: var(--nb-text);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
}

.toast .toast-header {
    background: transparent;
    color: var(--nb-text);
    border-bottom: 1px solid var(--nb-border);
    font-family: var(--nb-font-tech);
    letter-spacing: 0.03em;
}
.toast .toast-body { color: var(--nb-text); }

.toast:has(.text-success) { border-left-color: var(--nb-green) !important; }
.toast:has(.text-danger)  { border-left-color: var(--nb-red) !important; }
.toast:has(.text-warning) { border-left-color: var(--nb-amber) !important; }
.toast:has(.text-info)    { border-left-color: var(--nb-cyan) !important; }

/* ---------------------------------------------------------- Loading spinner */
.nb-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 212, 255, 0.15);
    border-top-color: var(--nb-cyan);
    border-radius: 50%;
    animation: nb-spin 0.8s linear infinite;
    box-shadow: var(--nb-glow-cyan);
}

@keyframes nb-spin { to { transform: rotate(360deg); } }

.spinner-border { color: var(--nb-cyan); }

/* --------------------------------------------------------------- Utility */
hr { border-color: var(--nb-border); opacity: 1; }

.nb-empty {
    text-align: center;
    padding: 2.6rem 1rem;
    color: var(--nb-muted);
}

.nb-empty i {
    font-size: 2.6rem;
    color: var(--nb-cyan);
    opacity: 0.6;
    display: block;
    margin-bottom: 0.6rem;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.4));
}

.nb-toggle-pass { cursor: pointer; }

/* ------------------------------------------------------------- Responsive */
@media (max-width: 991.98px) {
    .nb-sidebar { transform: translateX(-100%); }
    .nb-sidebar.show { transform: translateX(0); }
    .nb-main { margin-left: 0; }
    .nb-menu-toggle { display: inline-block; }
}

.nb-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1035;
}
.nb-sidebar-backdrop.show { display: block; }

@media (min-width: 992px) {
    .nb-sidebar-backdrop { display: none !important; }
}



/* ============================================================
   Auditoria — badges extras e detalhes
   ============================================================ */
.nb-badge-cyan {
    background-color: rgba(0, 212, 255, 0.15) !important;
    color: var(--nb-cyan) !important;
    border-color: var(--nb-cyan) !important;
}
.nb-badge-purple {
    background-color: rgba(123, 47, 255, 0.18) !important;
    color: #b98cff !important;
    border-color: var(--nb-purple) !important;
}
.nb-audit-row:hover { background-color: rgba(0, 212, 255, 0.06); }
.nb-audit-details {
    background: var(--nb-surface-2);
    border: 1px solid var(--nb-border);
    border-radius: 8px;
    padding: 0.75rem;
    color: var(--nb-text);
    font-family: var(--nb-font-mono);
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow: auto;
    margin: 0;
}

/* ============================================================
   Conectividade — indicadores de status (pulsante)
   ============================================================ */
.nb-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.78rem;
    font-family: var(--nb-font-mono);
    font-weight: 600;
}
.nb-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    background: var(--nb-muted);
    box-shadow: 0 0 0 0 rgba(107, 127, 163, 0.5);
}
.nb-status-dot.online {
    background: var(--nb-green);
    animation: nb-pulse-green 1.8s infinite;
}
.nb-status-dot.offline {
    background: var(--nb-red);
    box-shadow: 0 0 6px rgba(255, 51, 102, 0.7);
}
.nb-status-dot.unknown { background: var(--nb-muted); }
.nb-status.online  { color: var(--nb-green); }
.nb-status.offline { color: var(--nb-red); }
.nb-status.unknown { color: var(--nb-muted); }
.nb-status-latency { color: var(--nb-muted); font-size: 0.72rem; }

@keyframes nb-pulse-green {
    0%   { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(0, 255, 136, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); }
}

/* Card de dispositivos offline no dashboard */
.nb-offline-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}



/* ============================ NTP / TIME MODULE ============================ */
.nb-ntp-status-card {
    background:
        radial-gradient(1200px 200px at 0% 0%, rgba(0, 212, 255, 0.06), transparent 60%),
        var(--nb-card-bg, rgba(13, 22, 42, 0.6));
}

.nb-time-hero {
    padding: 1rem 0.5rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(123, 47, 255, 0.06));
    border: 1px solid rgba(0, 212, 255, 0.18);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nb-time-big {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 2px;
    color: #00ff88;
    text-shadow: 0 0 18px rgba(0, 255, 136, 0.45);
}

.nb-time-date {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: #9db4d8;
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.nb-time-label {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.7rem;
    color: #6b7fa3;
    margin-bottom: 0.25rem;
}

.nb-time-cell {
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    background: rgba(10, 16, 32, 0.55);
    border: 1px solid rgba(26, 42, 74, 0.7);
    height: 100%;
    text-align: left;
}

.nb-time-mono {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: #e0e8ff;
    font-size: 0.92rem;
    word-break: break-word;
}

.nb-track-item {
    padding: 0.65rem 0.8rem;
    border-radius: 12px;
    background: rgba(10, 16, 32, 0.55);
    border: 1px solid rgba(26, 42, 74, 0.7);
    height: 100%;
}

.nb-track-label {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.66rem;
    color: #6b7fa3;
    margin-bottom: 0.2rem;
}

.nb-track-value {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: #e0e8ff;
    font-size: 0.85rem;
    word-break: break-word;
}

/* ===== IPv6 / long host addresses: prevent layout break ===== */
.nb-host-cell {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nb-host-inline {
    display: inline-block;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* ===== Cron preset selector (device form) ===== */
.nb-cron-tabs {
    display: inline-flex;
    gap: 4px;
    background: #0d1226;
    border: 1px solid #1a2a4a;
    border-radius: 8px;
    padding: 4px;
}
.nb-cron-tab {
    background: transparent;
    border: none;
    color: #8aa0c8;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.nb-cron-tab:hover { color: #e0e8ff; }
.nb-cron-tab.active {
    background: rgba(0, 212, 255, 0.15);
    color: #00d4ff;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.25);
}
.nb-cron-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 575.98px) {
    .nb-cron-grid { grid-template-columns: repeat(2, 1fr); }
}
.cron-preset-card {
    cursor: pointer;
    border: 1px solid #1a2a4a;
    border-radius: 8px;
    padding: 12px;
    background: #0d1226;
    transition: all 0.2s;
    text-align: center;
}
.cron-preset-card:hover {
    border-color: rgba(0, 212, 255, 0.5);
    background: rgba(0, 212, 255, 0.05);
}
.cron-preset-card.selected {
    border-color: #00d4ff;
    background: rgba(0, 212, 255, 0.15);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}
.cron-preset-card .cron-icon { font-size: 1.5rem; line-height: 1.2; }
.cron-preset-card .cron-label { font-size: 0.8rem; color: #e0e8ff; margin-top: 4px; }
.cron-preset-card .cron-value { font-size: 0.7rem; color: #00d4ff; font-family: monospace; margin-top: 2px; }



/* ============================================================
   Backups — visualização e ações em lote
   ============================================================ */

/* Barra flutuante de ações em lote */
.nb-bulk-bar {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(140%);
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #0d1226 0%, #0d1a35 100%);
    border: 1px solid var(--nb-cyan);
    border-radius: 12px;
    box-shadow: 0 0 22px rgba(0, 212, 255, 0.45), 0 8px 30px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
    max-width: calc(100vw - 32px);
    flex-wrap: wrap;
    justify-content: center;
}
.nb-bulk-bar.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.nb-bulk-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nb-font-tech);
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--nb-cyan);
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
    white-space: nowrap;
}
.nb-bulk-count i { font-size: 1.15rem; }
.nb-bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Checkboxes de seleção */
.nb-check-all,
.nb-check-item {
    cursor: pointer;
    background-color: var(--nb-bg-2);
    border-color: var(--nb-border);
}
.nb-check-all:checked,
.nb-check-item:checked {
    background-color: var(--nb-cyan);
    border-color: var(--nb-cyan);
    box-shadow: 0 0 6px rgba(0, 212, 255, 0.6);
}
.nb-check-all:indeterminate {
    background-color: var(--nb-cyan-dim);
    border-color: var(--nb-cyan);
}

/* Modal de visualização de backup */
.nb-view-modal {
    background: var(--nb-bg-2);
    border: 1px solid var(--nb-cyan);
    box-shadow: 0 0 26px rgba(0, 212, 255, 0.3);
    color: var(--nb-text);
}
.nb-view-modal .modal-header,
.nb-view-modal .modal-footer {
    border-color: var(--nb-border);
}
.nb-view-modal .modal-title {
    color: var(--nb-cyan);
    font-family: var(--nb-font-tech);
    letter-spacing: 0.5px;
}
.nb-view-meta {
    font-family: var(--nb-font-mono);
    color: var(--nb-muted);
}
.nb-view-pre {
    background: var(--nb-bg);
    border: 1px solid var(--nb-border);
    border-radius: 8px;
    padding: 14px 16px;
    width: 100%;
    height: 62vh;
    resize: none;
    font-family: var(--nb-font-mono);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--nb-green);
    white-space: pre;
    overflow: auto;
    margin: 0;
    outline: none;
    box-shadow: none;
    cursor: text;
    /* textarea nativo — muito mais rápido que <pre> para textos grandes */
}
.nb-view-truncated {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 6px;
    color: #ffc107;
    font-size: 0.8rem;
    padding: 6px 12px;
    margin-bottom: 10px;
}
.nb-view-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 0;
    color: var(--nb-muted);
    font-family: var(--nb-font-mono);
    font-size: 0.85rem;
}
.nb-view-pre::-webkit-scrollbar { width: 10px; height: 10px; }
.nb-view-pre::-webkit-scrollbar-track { background: var(--nb-bg); }
.nb-view-pre::-webkit-scrollbar-thumb {
    background: var(--nb-border);
    border-radius: 6px;
}
.nb-view-pre::-webkit-scrollbar-thumb:hover { background: var(--nb-cyan-dim); }