/* ============================================
NODE HUB - Corporate Design System
============================================ */

/* ---- Fonts (carregadas via <link> no header.php) ---- */

/* ---- Design Tokens ---- */
:root {
/* Primary Palette — Violet */
--primary: #5b37db;
--primary-dark: #4a2ac2;
--primary-darker: #3c1fa6;
--primary-light: #8f74ff;
--primary-subtle: #f0ebff;

/* Accent */
--accent: #22d3ee;
--accent-dark: #0ea5b7;
--accent-light: #67e8f9;
--accent-subtle: #ecfeff;

/* Header palette */
--header-bg: linear-gradient(135deg, #0d2f67 0%, #0a2755 100%);
--header-bg-solid: #0b2f66;
--header-surface: rgba(255, 255, 255, 0.1);
--header-surface-strong: rgba(255, 255, 255, 0.16);
--header-border: rgba(255, 255, 255, 0.14);
--header-text: #f7faff;
--header-muted: #d6e4ff;

/* Purple Action Buttons (header/cards tone) */
--btn-purple-start: #0f3b78;
--btn-purple-mid: #244d8e;
--btn-purple-end: #5b37db;
--btn-purple-hover-start: #0d336a;
--btn-purple-hover-mid: #1f427a;
--btn-purple-hover-end: #4f2ec7;
--btn-purple-border: rgba(146, 173, 234, 0.42);
--btn-purple-shadow: 0 10px 24px rgba(9, 35, 78, 0.34), 0 0 0 1px rgba(143, 116, 255, 0.2);
--btn-purple-shadow-hover: 0 14px 30px rgba(8, 32, 69, 0.42), 0 0 0 1px rgba(143, 116, 255, 0.3);

/* Neutrals */
--bg: #f5f8ff;
--bg-alt: #ecf2fb;
--surface: #ffffff;
--card-bg: #ffffff;
--surface-2: #f8fafc;
--surface-3: #f1f5f9;
--text: #0f172a;
--text-secondary: #25364d;
--muted: #50637d;
--muted-light: #5d6f86;
--border: #d6deec;
--border-light: #e8effa;

/* Semantic */
--success: #22c55e;
--success-dark: #16a34a;
--success-subtle: #f0fdf4;
--warning: #f59e0b;
--warning-dark: #d97706;
--warning-subtle: #fffbeb;
--danger: #ef4444;
--danger-dark: #dc2626;
--danger-subtle: #fef2f2;
--info: #3b82f6;
--info-dark: #2563eb;
--info-subtle: #eff6ff;

/* Analytics palette: vivid enough for charts without overpowering the UI */
--analytics-ok: #10b981;
--analytics-nok: #ef4444;
--analytics-warning: #f59e0b;
--analytics-manut: #8b5cf6;
--analytics-info: #2563eb;
--analytics-backup: #4f46e5;
--analytics-neutral: #64748b;
--analytics-cyan: #06b6d4;
--analytics-lime: #65a30d;
--analytics-ok-soft: rgba(16, 185, 129, 0.16);
--analytics-nok-soft: rgba(239, 68, 68, 0.16);
--analytics-warning-soft: rgba(245, 158, 11, 0.17);
--analytics-manut-soft: rgba(139, 92, 246, 0.17);
--analytics-info-soft: rgba(37, 99, 235, 0.16);
--analytics-ok-ring: rgba(16, 185, 129, 0.28);
--analytics-nok-ring: rgba(239, 68, 68, 0.28);
--analytics-warning-ring: rgba(245, 158, 11, 0.30);
--analytics-manut-ring: rgba(139, 92, 246, 0.30);
--analytics-info-ring: rgba(37, 99, 235, 0.28);

/* Shadows */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
--shadow-primary: 0 6px 18px rgba(91, 55, 219, 0.28);
--shadow-success: 0 4px 14px rgba(34, 197, 94, 0.25);
--shadow-danger: 0 4px 14px rgba(239, 68, 68, 0.25);

/* Radii */
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-full: 9999px;

/* Transitions */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

/* Layout */
--sidebar-width: 272px;
--topbar-height: 64px;
--anchor-offset: 136px;

/* Typography Scale */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'Manrope', var(--font-sans);
--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.8125rem;  /* 13px */
--text-base: 0.875rem; /* 14px */
--text-md: 0.9375rem;  /* 15px */
--text-lg: 1rem;       /* 16px */
--text-xl: 1.125rem;   /* 18px */
--text-2xl: 1.25rem;   /* 20px */
--text-3xl: 1.5rem;    /* 24px */
--text-4xl: 2rem;      /* 32px */

/* Spacing Scale */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;

/* Z-Index Scale */
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-popover: 500;
--z-toast: 600;
}

/* Cadastro de site: provisionamento Comba/DAU para monitoramento. */
.site-monitor-provision {
border: 1px solid var(--border-light);
border-radius: var(--radius);
background: var(--bg);
overflow: hidden;
}
.site-monitor-provision__head {
display: grid;
gap: 6px;
padding: 14px 16px;
border-bottom: 1px solid var(--border-light);
background: linear-gradient(180deg, #f8fbff, #eef6ff);
}
.site-monitor-master-toggle {
font-weight: 800;
color: var(--text-secondary);
}
.site-monitor-provision__body {
display: grid;
gap: 14px;
padding: 16px;
}
.site-monitor-provision__body.is-disabled {
opacity: .68;
}
.site-monitor-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.site-monitor-grid--network {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.site-monitor-auto .info-checkbox-item {
min-height: 40px;
align-items: center;
}
.site-dau-ip-list {
display: grid;
gap: 8px;
}
.site-dau-ip-row {
display: grid;
grid-template-columns: 90px minmax(160px, 1fr) minmax(180px, 1.15fr);
gap: 10px;
align-items: end;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--surface);
padding: 10px;
}
.site-dau-ip-row--profile {
grid-template-columns: 90px minmax(150px, 1fr) minmax(170px, 1fr) minmax(190px, 1fr);
}
.site-dau-ip-row__idx {
display: inline-flex;
align-items: center;
justify-content: center;
height: 38px;
border-radius: var(--radius-sm);
background: rgba(91,55,219,.09);
color: var(--primary-dark);
font-size: var(--text-xs);
font-weight: 900;
}
.site-dau-ip-row__field {
display: grid;
gap: 5px;
}
.site-dau-ip-row__field label {
font-size: var(--text-xs);
font-weight: 800;
color: var(--text-secondary);
}
.site-monitor-note {
border: 1px solid rgba(91,55,219,.18);
border-radius: var(--radius-sm);
background: rgba(91,55,219,.06);
color: var(--text-secondary);
padding: 10px 12px;
font-size: var(--text-sm);
line-height: 1.45;
}
html.dark .site-monitor-provision {
background: var(--surface, #172033);
border-color: var(--border, #243352);
}
html.dark .site-monitor-provision__head {
background: #17233a;
border-color: #304967;
}
html.dark .site-dau-ip-row {
background: #17233a;
border-color: #304967;
}
html.dark .site-dau-ip-row__idx {
background: rgba(143,116,255,.16);
color: #c4b5fd;
}
html.dark .site-monitor-note {
background: rgba(143,116,255,.12);
border-color: rgba(143,116,255,.28);
color: #e8ecf4;
}
@media (max-width: 980px) {
.site-monitor-grid,
.site-monitor-grid--network,
.site-dau-ip-row {
grid-template-columns: 1fr;
}
.site-dau-ip-row__idx {
justify-content: flex-start;
padding: 0 12px;
}
}

/* ---- Reset ---- */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
}

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 800px 400px at 10% 0%, rgba(91, 55, 219, 0.05), transparent 60%),
radial-gradient(ellipse 600px 300px at 90% 5%, rgba(34, 211, 238, 0.05), transparent 50%);
z-index: -1;
pointer-events: none;
}

/* Transicao suave na troca de tema */
html.theme-animating,
html.theme-animating body {
transition: background-color 180ms ease, color 180ms ease;
}

html.theme-animating body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2000;
background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.12), rgba(15, 23, 42, 0.08) 55%, transparent 100%);
animation: themeSwitchFlash 180ms ease-out;
}

@keyframes themeSwitchFlash {
0% { opacity: 0.18; }
100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
html.theme-animating,
html.theme-animating body,
html.theme-animating * {
transition: none !important;
}
html.theme-animating body::after {
animation: none !important;
opacity: 0 !important;
}
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--muted-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

h1, h2, h3, h4, h5, h6 {
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.3;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
border-radius: 4px;
}

/* ---- Container ---- */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 28px 32px;
}

/* ============================================
TOPBAR
============================================ */
.topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--topbar-height);
background: var(--header-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
color: var(--header-text);
display: flex;
align-items: center;
padding: 0 24px;
box-shadow: 0 1px 0 var(--header-border);
z-index: 1000;
transition: box-shadow var(--transition);
}

.topbar.scrolled {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.menu-toggle {
display: flex;
align-items: center;
justify-content: center;
background: var(--header-surface);
border: 1px solid var(--header-border);
color: var(--header-text);
width: 40px;
height: 40px;
cursor: pointer;
margin-right: 16px;
border-radius: var(--radius-sm);
transition: var(--transition);
font-size: 20px;
}

.menu-toggle:hover {
background: var(--header-surface-strong);
border-color: rgba(255, 255, 255, 0.22);
}

.topbar-brand {
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
min-width: 0;
}

.topbar-home-link {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: inherit;
flex-shrink: 0;
}

.topbar-home-link .topbar-title {
flex: 0;
}

.topbar-logo {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: var(--radius-sm);
font-weight: 800;
font-size: 14px;
color: white;
}

.topbar-title {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.02em;
flex: 1;
}

.topbar-title span {
color: var(--primary-light);
}

.site-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 220px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 36px;
padding: 0 10px;
border-radius: var(--radius-sm);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
background: rgba(143, 116, 255, 0.22);
color: var(--header-muted);
border: 1px solid rgba(143, 116, 255, 0.34);
margin-left: 10px;
white-space: nowrap;
}
.site-indicator svg { opacity: 0.8; }

.site-switcher {
position: relative;
margin-left: 10px;
}

.site-switcher .site-indicator {
margin-left: 0;
cursor: default;
transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.site-switcher-caret {
opacity: 0.85;
transition: transform 0.22s ease;
}

.site-switcher-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 300px;
background: rgba(10, 33, 72, 0.98);
border: 1px solid var(--header-border);
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.22s ease, visibility 0.22s;
z-index: 1003;
}

.site-switcher:hover .site-switcher-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}

.site-switcher.open .site-switcher-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}

.site-switcher:hover .site-switcher-caret {
transform: rotate(180deg);
}

.site-switcher.open .site-switcher-caret {
transform: rotate(180deg);
}

.site-switcher-item {
display: grid;
gap: 2px;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid transparent;
transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-switcher-item:hover {
background: rgba(143, 116, 255, 0.18);
border-color: rgba(143, 116, 255, 0.3);
}

.site-switcher-item.current {
background: rgba(34, 211, 238, 0.14);
border-color: rgba(34, 211, 238, 0.3);
}

.site-switcher-item-main {
font-size: 12px;
font-weight: 700;
color: var(--header-text);
}

.site-switcher-item-sub {
font-size: 11px;
color: #bed0ed;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.site-switcher-divider {
height: 1px;
background: var(--header-border);
margin: 6px 2px;
}

.site-switcher-exit .site-switcher-item-main {
color: #fca5a5;
}

.topbar-user {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 500;
height: 36px;
background: var(--header-surface);
padding: 0 12px 0 8px;
border-radius: var(--radius-sm);
border: 1px solid var(--header-border);
transition: var(--transition);
}

.topbar-user:hover {
background: var(--header-surface-strong);
}

.topbar-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--accent));
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: white;
overflow: hidden;
}

.topbar-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* ============================================
SIDEBAR
============================================ */

/* Hover zone — invisible trigger on left edge (desktop only) */
.sidebar-hover-zone {
position: fixed;
top: var(--topbar-height);
left: 0;
width: 6px;
height: calc(100vh - var(--topbar-height));
z-index: 997;
/* cursor: default; */
}
@media (max-width: 768px) {
.sidebar-hover-zone { display: none; }
}

/* Pin indicator on hamburger button */
.menu-toggle.pinned {
background: rgba(143, 116, 255, 0.22);
color: var(--primary-light);
}
.menu-toggle.pinned svg { stroke: var(--primary-light); }

.sidebar {
position: fixed;
top: var(--topbar-height);
left: 0;
width: var(--sidebar-width);
height: calc(100vh - var(--topbar-height));
background: linear-gradient(180deg, #0b2f66 0%, #0a254f 100%);
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
transform: translate3d(calc(-1 * var(--sidebar-width)), 0, 0);
will-change: transform;
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
z-index: 999;
overflow-y: auto;
display: flex;
flex-direction: column;
contain: paint;
}

.sidebar.active { transform: translate3d(0, 0, 0); }

/* Sidebar pinned preload — prevent flash on page navigation */
@media (min-width: 769px) {
html.sidebar-pinned-preload .sidebar {
left: 0 !important;
transform: translate3d(0, 0, 0) !important;
transition: none !important;
}
html.sidebar-pinned-preload .main-content {
margin-left: var(--sidebar-width) !important;
transition: none !important;
}
html.sidebar-pinned-preload .sidebar-overlay {
display: none !important;
}
}

.sidebar-header {
padding: 24px 20px 16px;
border-bottom: 1px solid var(--header-border);
}

.sidebar-header h2 {
font-size: 11px;
color: var(--muted-light);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
}

.sidebar-menu {
padding: 8px 0;
flex: 1;
}

.sidebar-link {
display: flex;
align-items: center;
padding: 11px 20px;
color: #c8d8f2;
text-decoration: none;
transition: var(--transition);
border-left: 3px solid transparent;
gap: 14px;
margin: 2px 0;
font-size: 14px;
font-weight: 500;
}

.sidebar-link:hover {
background: rgba(143, 116, 255, 0.18);
border-left-color: rgba(143, 116, 255, 0.45);
color: #eef4ff;
}

.sidebar-link.active {
background: rgba(143, 116, 255, 0.28);
border-left-color: var(--primary);
color: #ffffff;
font-weight: 600;
}

.sidebar-link.active .icon { color: var(--primary-light); }

.sidebar-link-hud-back {
border-left: 2px solid rgba(56, 189, 248, 0.45);
}

.sidebar-link.logout {
color: #fca5a5;
margin-top: 8px;
border-top: 1px solid var(--header-border);
padding-top: 14px;
}

.sidebar-link.logout:hover {
background: rgba(239, 68, 68, 0.1);
border-left-color: #f87171;
color: #fecaca;
}

.sidebar-link .icon {
font-size: 18px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}

.sidebar-link .icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

.sidebar-link .text { font-size: 14px; }

/* Sidebar Overlay */
.sidebar-overlay {
position: fixed;
top: var(--topbar-height);
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 160ms ease, visibility 0s linear 160ms;
z-index: 998;
}

.sidebar-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 160ms ease;
}

/* ============================================
MAIN CONTENT
============================================ */
.main-content {
margin-top: var(--topbar-height);
min-height: calc(100vh - var(--topbar-height) - 60px);
padding: 0;
transition: margin-left 180ms ease;
}

@media (min-width: 769px) {
body.sidebar-open .main-content {
margin-left: var(--sidebar-width);
}

body.sidebar-open .sidebar {
left: 0;
transform: translate3d(0, 0, 0);
}
.sidebar-overlay { display: none !important; }
}

/* ============================================
PAGE HEADER
============================================ */
.page-header, .dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
gap: 16px;
}

.page-header h2, .dashboard-header h2 {
font-size: 26px;
color: var(--text);
font-weight: 800;
letter-spacing: -0.03em;
display: flex;
align-items: center;
gap: 10px;
}

.page-header h2 svg, .dashboard-header h2 svg {
flex-shrink: 0;
}

.section-header h3 {
display: flex;
align-items: center;
gap: 8px;
}

.section-header h3 svg { flex-shrink: 0; }

.remotas-list > h3 {
display: flex;
align-items: center;
gap: 8px;
}

.dashboard-actions {
display: flex;
gap: 10px;
}

.home-site-strip {
margin: -6px 0 20px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
gap: 0;
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}

.home-site-strip-cover {
order: 2;
position: relative;
min-height: 140px;
padding: 14px;
text-decoration: none;
display: flex;
align-items: flex-start;
justify-content: space-between;
background:
linear-gradient(180deg, rgba(10, 28, 58, 0.14), rgba(10, 28, 58, 0.62)),
radial-gradient(circle at 18% 20%, rgba(108, 140, 255, 0.54), transparent 44%),
linear-gradient(145deg, #183b78, #355daa);
background-size: cover;
background-position: center;
border-left: 1px solid rgba(209, 224, 245, 0.75);
}

.home-site-strip-cover.has-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 28, 58, 0.12), rgba(10, 28, 58, 0.66));
pointer-events: none;
}

.home-site-strip-cover .badge {
position: relative;
z-index: 1;
}

.home-site-strip-content {
order: 1;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
}

.home-site-strip-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
min-width: 0;
}

.home-site-strip-title-main {
min-width: 0;
}

.home-site-strip-head h3 {
margin: 0;
font-size: 22px;
line-height: 1;
overflow-wrap: anywhere;
}

.home-site-strip-name {
margin: 0;
font-size: 15px;
font-weight: 700;
color: var(--text-secondary);
}

.home-site-strip-address {
margin: 0;
font-size: 13px;
color: var(--muted);
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.home-site-strip-tags {
margin-top: auto;
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.home-site-strip-tag {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 4px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
color: #42587e;
background: #edf3ff;
border: 1px solid #d3dff3;
}

.home-site-strip-iot {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: 14px;
width: fit-content;
max-width: 100%;
flex: 0 0 auto;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
text-decoration: none;
color: inherit;
}

.home-iot-offline {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 5px 10px;
border: 1px solid rgba(220, 38, 38, 0.30);
border-radius: 999px;
background: rgba(220, 38, 38, 0.10);
color: #b91c1c;
font-size: 12px;
font-weight: 900;
line-height: 1;
text-decoration: none;
white-space: nowrap;
}

.home-iot-offline:hover,
.home-iot-offline:focus-visible {
border-color: rgba(220, 38, 38, 0.46);
background: rgba(220, 38, 38, 0.15);
color: #991b1b;
outline: none;
}

.home-iot-door-group {
display: inline-flex;
align-items: center;
gap: 0;
padding: 0;
text-decoration: none;
color: inherit;
}

.home-iot-door-group .home-iot-door-icon-only {
--door-icon-w: 28px;
--door-icon-h: 42px;
--door-frame-left: 5px;
--door-frame-top: 5px;
--door-frame-w: 19px;
--door-frame-h: 31px;
--door-panel-left: 7px;
--door-panel-top: 7px;
--door-panel-w: 15px;
--door-panel-h: 27px;
--door-knob-top: 13px;
--door-perspective: 54px;
}

.home-iot-door-summary {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 42px;
padding: 5px 10px 5px 8px;
border-radius: 12px;
border: 1px solid rgba(34, 197, 94, 0.34);
background: rgba(34, 197, 94, 0.12);
color: #15803d;
text-decoration: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.home-iot-door-summary.is-open {
border-color: rgba(239, 68, 68, 0.46);
background: rgba(239, 68, 68, 0.14);
color: #dc2626;
}

.home-iot-door-symbol {
position: relative;
width: 28px;
height: 28px;
flex: 0 0 28px;
border-radius: 9px;
border: 1px solid rgba(34, 197, 94, 0.36);
background: rgba(34, 197, 94, 0.12);
}

.home-iot-door-summary.is-open .home-iot-door-symbol {
border-color: rgba(239, 68, 68, 0.46);
background: rgba(239, 68, 68, 0.14);
}

.home-iot-door-symbol::before {
content: '';
position: absolute;
left: 9px;
top: 5px;
width: 11px;
height: 18px;
border: 1.5px solid currentColor;
border-radius: 3px;
opacity: 0.42;
}

.home-iot-door-symbol > span {
position: absolute;
left: 9px;
top: 6px;
width: 11px;
height: 16px;
border: 1.5px solid currentColor;
border-radius: 3px;
background: rgba(255, 255, 255, 0.06);
transform-origin: left center;
transition: transform 180ms ease;
}

.home-iot-door-symbol > span::after {
content: '';
position: absolute;
right: 2px;
top: 7px;
width: 2.5px;
height: 2.5px;
border-radius: 999px;
background: currentColor;
}

.home-iot-door-summary.is-open .home-iot-door-symbol > span {
transform: perspective(48px) rotateY(58deg) translateX(1px);
}

.home-iot-door-copy {
display: grid;
gap: 2px;
min-width: 0;
line-height: 1;
}

.home-iot-door-copy small {
color: currentColor;
font-size: 9px;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
opacity: 0.82;
white-space: nowrap;
}

.home-iot-door-copy strong {
color: currentColor;
font-size: 16px;
font-weight: 950;
line-height: 1;
white-space: nowrap;
}

.home-iot-door-icon-only {
--door-icon-w: 30px;
--door-icon-h: 38px;
--door-frame-left: 8px;
--door-frame-top: 5px;
--door-frame-w: 17px;
--door-frame-h: 28px;
--door-panel-left: 8px;
--door-panel-top: 6px;
--door-panel-w: 16px;
--door-panel-h: 26px;
--door-stroke: 1.7px;
--door-knob-right: 3px;
--door-knob-top: 12px;
--door-knob-size: 2.5px;
--door-perspective: 48px;
--door-open-transform: perspective(var(--door-perspective)) rotateY(-66deg) translateX(3px);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--door-icon-w);
height: var(--door-icon-h);
flex: 0 0 var(--door-icon-w);
border: 0;
border-radius: 0;
background: transparent;
color: #16a34a;
box-shadow: none;
text-decoration: none;
transition: color 180ms ease, transform 180ms ease;
}

.home-iot-door-icon-only.is-open {
color: #dc2626;
}

.home-iot-door-icon-only.is-unknown {
color: #64748b;
}

.home-iot-door-icon-only:hover,
.home-iot-door-icon-only:focus-visible {
transform: translateY(-1px);
outline: none;
}

.home-iot-door-icon-only::before {
content: '';
position: absolute;
left: var(--door-frame-left);
top: var(--door-frame-top);
width: var(--door-frame-w);
height: var(--door-frame-h);
border: var(--door-stroke) solid currentColor;
border-radius: 4px;
opacity: 0.46;
}

.home-iot-door-icon-only > span {
position: absolute;
left: var(--door-panel-left);
top: var(--door-panel-top);
width: var(--door-panel-w);
height: var(--door-panel-h);
border: var(--door-stroke) solid currentColor;
border-radius: 4px;
background: rgba(255, 255, 255, 0.06);
background-clip: padding-box;
transform-origin: left center;
transition: transform 320ms cubic-bezier(.2, .8, .2, 1);
}

.home-iot-door-icon-only > span::after {
content: '';
position: absolute;
right: var(--door-knob-right);
top: var(--door-knob-top);
width: var(--door-knob-size);
height: var(--door-knob-size);
border-radius: 999px;
background: currentColor;
}

.home-iot-door-icon-only.is-open > span {
transform: var(--door-open-transform);
}

.home-iot-door-icon-only.is-changing {
animation: homeIotDoorPulse 520ms ease both;
}

.home-iot-door-icon-only.is-changing.is-open > span {
animation: homeIotDoorOpen 520ms cubic-bezier(.2, .8, .2, 1) both;
}

.home-iot-door-icon-only.is-changing.is-closed > span {
animation: homeIotDoorClose 520ms cubic-bezier(.2, .8, .2, 1) both;
}

.home-iot-temp-carousel {
display: grid;
grid-template-rows: auto auto;
gap: 4px;
min-width: 112px;
max-width: 152px;
padding: 5px 8px;
border: 1px solid rgba(96, 165, 250, 0.28);
border-radius: 10px;
background: rgba(37, 99, 235, 0.10);
color: #1e3a8a;
}

.home-iot-temp-carousel--flat {
min-width: 88px;
max-width: 130px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}

.home-iot-temp-carousel--flat .home-iot-temp-track {
min-height: 30px;
}

.home-iot-temp-carousel--flat .home-iot-temp-slide.is-active {
gap: 2px;
}

.home-iot-temp-carousel--flat .home-iot-temp-slide span {
color: #2563eb;
font-size: 10px;
}

.home-iot-temp-carousel--flat .home-iot-temp-slide strong {
color: #22c55e;
font-size: 20px;
}

.home-iot-temp-carousel--flat .home-iot-temp-dots {
justify-content: flex-start;
}

.home-iot-temp-track {
position: relative;
min-height: 28px;
overflow: hidden;
}

.home-iot-temp-slide {
display: none;
min-width: 0;
line-height: 1;
}

.home-iot-temp-slide.is-active {
display: grid;
gap: 3px;
}

.home-iot-temp-slide span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #2563eb;
font-size: 10px;
font-weight: 850;
text-transform: uppercase;
}

.home-iot-temp-slide strong {
color: #16a34a;
font-size: 16px;
font-weight: 900;
line-height: 1;
white-space: nowrap;
transition: color 180ms ease, transform 180ms ease;
font-variant-numeric: tabular-nums;
}

.home-iot-temp-slide strong.is-rising {
color: #ef4444;
animation: homeIotTempBump 680ms ease both;
}

.home-iot-temp-slide strong.is-falling {
color: #2563eb;
animation: homeIotTempBump 680ms ease both;
}

.home-iot-temp-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}

.home-iot-temp-dots button {
width: 6px;
height: 6px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(96, 165, 250, 0.45);
cursor: pointer;
}

.home-iot-temp-dots button.is-active {
width: 14px;
background: #22c55e;
}

.home-iot-reading {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 30px;
padding: 4px 9px;
border-radius: 9px;
border: 1px solid rgba(96, 165, 250, 0.28);
background: rgba(37, 99, 235, 0.10);
color: #1e3a8a;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-iot-reading-label {
font-size: 10px;
font-weight: 850;
line-height: 1;
color: #2563eb;
text-transform: uppercase;
}

.home-iot-reading strong {
font-size: 15px;
font-weight: 850;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
}

.home-iot-temperature strong {
font-size: 17px;
}

.home-iot-door {
width: auto !important;
min-width: 0 !important;
height: auto !important;
min-height: 30px;
justify-content: center;
padding: 4px 9px !important;
gap: 6px;
color: #166534;
border: 1px solid rgba(34, 197, 94, 0.32) !important;
background: rgba(34, 197, 94, 0.10) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
font-size: inherit !important;
}

.home-iot-door.is-open {
color: #9a3412;
border-color: rgba(249, 115, 22, 0.38) !important;
background: rgba(249, 115, 22, 0.13) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.home-iot-door-icon {
position: relative;
display: inline-block;
width: 18px;
height: 22px;
flex: 0 0 18px;
color: currentColor;
}

.home-iot-door .home-iot-reading-label,
.home-iot-door strong {
display: inline-flex !important;
}

.home-iot-door .home-iot-reading-label {
color: currentColor !important;
opacity: 0.78;
}

.home-iot-door strong {
color: currentColor !important;
font-size: 13px;
}

.home-iot-door.is-open .home-iot-door-icon {
color: currentColor;
}

.home-iot-door-icon::before {
content: '';
position: absolute;
inset: 1px 1px 1px 5px;
border: 1.5px solid currentColor;
border-radius: 4px;
background: transparent;
opacity: 0.56;
}

.home-iot-door-icon span {
position: absolute;
left: 5px;
top: 3px;
width: 10px;
height: 16px;
border: 1.5px solid currentColor;
border-radius: 4px;
background: transparent;
box-shadow: none;
transform-origin: left center;
transition: transform 180ms ease;
}

.home-iot-door-icon span::after {
content: '';
position: absolute;
right: 2px;
top: 7px;
width: 2.5px;
height: 2.5px;
border-radius: 999px;
background: currentColor;
}

.home-iot-door.is-open .home-iot-door-icon span {
transform: perspective(38px) rotateY(56deg) translateX(1px);
}

html.dark .home-iot-reading {
color: #dbeafe;
border-color: rgba(96, 165, 250, 0.30);
background: rgba(37, 99, 235, 0.14);
}

html.dark .home-iot-reading-label {
color: #93c5fd;
}

html.dark .home-iot-door {
color: #86efac;
border-color: rgba(34, 197, 94, 0.32) !important;
background: rgba(34, 197, 94, 0.13) !important;
}

html.dark .home-iot-door.is-open {
color: #fdba74;
border-color: rgba(249, 115, 22, 0.40) !important;
background: rgba(249, 115, 22, 0.16) !important;
}

html.dark .home-iot-door-icon-only.is-closed {
color: #86efac;
}

html.dark .home-iot-door-icon-only.is-open {
color: #fca5a5;
}

html.dark .home-iot-offline {
border-color: rgba(248, 113, 113, 0.38);
background: rgba(248, 113, 113, 0.14);
color: #fecaca;
}

html.dark .home-iot-door-summary {
color: #86efac;
border-color: rgba(34, 197, 94, 0.34);
background: rgba(34, 197, 94, 0.14);
}

html.dark .home-iot-door-summary.is-open {
color: #fca5a5;
border-color: rgba(248, 113, 113, 0.44);
background: rgba(239, 68, 68, 0.15);
}

html.dark .home-iot-temp-carousel {
color: #dbeafe;
border-color: rgba(96, 165, 250, 0.30);
background: rgba(37, 99, 235, 0.14);
}

html.dark .home-iot-temp-carousel--flat {
border-color: transparent;
background: transparent;
}

html.dark .home-iot-temp-slide span {
color: #93c5fd;
}

@keyframes homeIotTempBump {
0% { transform: translateY(0) scale(1); }
38% { transform: translateY(-1px) scale(1.08); }
100% { transform: translateY(0) scale(1); }
}

@keyframes homeIotDoorPulse {
0% { transform: translateY(0) scale(1); }
45% { transform: translateY(-1px) scale(1.08); }
100% { transform: translateY(0) scale(1); }
}

@keyframes homeIotDoorOpen {
0% { transform: perspective(42px) rotateY(0deg) translateX(0); }
100% { transform: var(--door-open-transform); }
}

@keyframes homeIotDoorClose {
0% { transform: var(--door-open-transform); }
100% { transform: perspective(42px) rotateY(0deg) translateX(0); }
}

@media (min-width: 769px) {
.home-site-strip-monitoring {
display: none !important;
}
}

/* ============================================
BUTTONS
============================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
min-height: 40px;
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: var(--radius);
cursor: pointer;
text-decoration: none;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
position: relative;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14); }
.btn:active { transform: translateY(0); }

.btn-primary {
background: linear-gradient(135deg, #1c4f97 0%, #2a5ea6 58%, #6850e5 100%);
color: #f7fbff;
box-shadow: 0 8px 18px rgba(9, 35, 78, 0.22);
border-color: rgba(164, 188, 232, 0.48);
}
.btn-primary:hover {
background: linear-gradient(135deg, #1a498b 0%, #275497 58%, #5b42d3 100%);
box-shadow: 0 10px 22px rgba(8, 32, 69, 0.28);
}

.btn-secondary {
background: linear-gradient(145deg, #ffffff, #f7fbff);
color: #1d3357;
border: 1px solid #c7d6ed;
box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
background: linear-gradient(145deg, #ffffff, #eef5ff);
border-color: #9fb8e2;
}

.btn-success {
background: rgba(22, 163, 74, 0.13);
color: #166534;
border-color: rgba(22, 163, 74, 0.52);
box-shadow: 0 2px 6px rgba(22, 163, 74, 0.14);
}
.btn-success:hover {
background: rgba(22, 163, 74, 0.20);
border-color: rgba(22, 163, 74, 0.68);
box-shadow: 0 4px 10px rgba(22, 163, 74, 0.20);
}

.btn-warning {
background: rgba(217, 119, 6, 0.13);
color: #92400e;
border-color: rgba(217, 119, 6, 0.54);
box-shadow: 0 2px 6px rgba(217, 119, 6, 0.14);
}
.btn-warning:hover {
background: rgba(217, 119, 6, 0.20);
border-color: rgba(217, 119, 6, 0.72);
box-shadow: 0 4px 10px rgba(217, 119, 6, 0.20);
}

.btn-danger {
background: rgba(220, 38, 38, 0.11);
color: #991b1b;
border-color: rgba(220, 38, 38, 0.50);
box-shadow: 0 2px 6px rgba(220, 38, 38, 0.13);
}
.btn-danger:hover {
background: rgba(220, 38, 38, 0.18);
border-color: rgba(220, 38, 38, 0.68);
box-shadow: 0 4px 10px rgba(220, 38, 38, 0.18);
}

.btn-info {
background: rgba(37, 99, 235, 0.11);
color: #1e40af;
border-color: rgba(37, 99, 235, 0.50);
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.14);
}
.btn-info:hover {
background: rgba(37, 99, 235, 0.18);
border-color: rgba(37, 99, 235, 0.68);
box-shadow: 0 4px 10px rgba(37, 99, 235, 0.20);
}

.btn-ghost {
background: linear-gradient(145deg, #ffffff, #f6faff);
color: #4b5f82;
border: 1px solid #cfdbef;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.btn-ghost:hover { background: linear-gradient(145deg, #ffffff, #edf4ff); color: #1d3357; border-color: #a6bde3; }

.btn-sm {
padding: 6px 12px;
font-size: 12px;
min-height: 32px;
border-radius: var(--radius-sm);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.btn-sm:hover { transform: translateY(0); box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12); }

/* ============================================
STATS GRID
============================================ */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-bottom: 32px;
}

.stat-card {
background: var(--surface);
padding: 24px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
gap: 18px;
border: 1px solid var(--border-light);
transition: var(--transition);
position: relative;
overflow: hidden;
}

.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--primary-light));
opacity: 0;
transition: var(--transition);
}

.stat-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
cursor: pointer;
}
.stat-card:hover::before { opacity: 1; }

/* Stat Card — Estado ativo ao clicar */
.stat-card.stat-active {
border-color: var(--primary) !important;
box-shadow: 0 0 0 3px rgba(91, 55, 219,0.2), var(--shadow-md) !important;
transform: translateY(-3px);
}
.stat-card.stat-active::before { opacity: 1; }
.stat-card.alert.stat-active {
border-color: var(--danger) !important;
box-shadow: 0 0 0 3px rgba(239,68,68,0.2), var(--shadow-md) !important;
}

/* Stat Pills clicáveis */
.stat-pill[data-filter] {
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
}
.stat-pill[data-filter]:hover {
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Lista de equipamentos destacada ao scrollar */
.remotas-list.list-highlighted {
animation: none;
}
@keyframes highlightListSection {
0% { box-shadow: none; border-radius: 12px; }
100% { box-shadow: none; }
}

.stat-card.alert { border-left: 4px solid var(--danger); }
.stat-card.alert::before { background: linear-gradient(90deg, var(--danger), #fb923c); }

.stat-icon {
width: 52px;
height: 52px;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
background: var(--primary-subtle);
color: var(--primary);
}

.stat-card.alert .stat-icon {
background: var(--danger-subtle);
color: var(--danger);
}

.stat-info h3 {
font-size: 28px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.03em;
margin-bottom: 2px;
line-height: 1;
}

.stat-info p {
color: var(--muted);
font-size: 13px;
font-weight: 500;
}

.stat-info small {
color: var(--muted-light);
font-size: 12px;
display: inline-flex;
gap: 6px;
margin-top: 4px;
flex-wrap: wrap;
}

.stat-pill {
display: inline-block;
padding: 2px 8px;
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
}

.stat-pill.stat-ok { background: var(--success-subtle); color: var(--success-dark); }
.stat-pill.stat-nok { background: var(--danger-subtle); color: var(--danger-dark); }
.stat-pill.stat-vago { background: var(--warning-subtle); color: var(--warning-dark); }
.stat-pill.stat-manut { background: var(--analytics-manut-soft); color: var(--analytics-manut); }
html.dark .stat-pill.stat-manut { background: var(--analytics-manut-soft); color: var(--analytics-manut); }

/* ============================================
TABLES
============================================ */
.table-responsive {
overflow-x: auto;
overflow-y: visible;
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
-webkit-overflow-scrolling: touch;
}

.table {
width: 100%;
border-collapse: collapse;
}

.table thead { background: var(--bg-alt); }

.table th {
padding: 12px 12px;
text-align: left;
font-weight: 600;
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}

.table td {
padding: 12px 12px;
text-align: left;
border-bottom: 1px solid var(--border-light);
vertical-align: middle;
font-size: 14px;
color: var(--text-secondary);
}

.table .col-spare { min-width: 92px; white-space: nowrap; }

.table .col-localizacao,
.table .col-pendencia { max-width: 260px; }

.text-truncate {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.table tbody tr {
transition: var(--transition-fast);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: rgba(91, 55, 219, 0.03); }

.table tbody tr.updated { animation: highlight 2s; }

@keyframes highlight {
0% { background-color: var(--warning-subtle); }
100% { background-color: transparent; }
}

.actions {
display: inline-flex;
gap: 6px;
align-items: center;
white-space: nowrap;
flex-shrink: 0;
}

.actions .btn-sm {
padding: 7px 9px;
min-width: 42px;
justify-content: center;
}

.actions .btn-sm .btn-label,
.actions .btn-sm .btn-text {
display: none;
}

/* All table action cells: keep header/body aligned */
.table th:last-child,
.table td:last-child {
text-align: center;
}
.table td.actions,
.table .cell-actions {
text-align: center;
}

#sparePartsTable .table td.actions {
display: table-cell;
white-space: nowrap;
vertical-align: middle;
}

#sparePartsTable .table td.actions .btn {
margin: 0 3px;
}

.cell-actions {
display: flex;
gap: 5px;
justify-content: center;
}

/* ============================================
BADGES
============================================ */
.badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
background: var(--bg-alt);
color: var(--text-secondary);
}

.badge-master { background: #eef2ff; color: #4338ca; }
.badge-remota { background: #ecfdf5; color: #065f46; }
.badge-poi { background: #fef3c7; color: #92400e; }
.badge-dpu { background: #fef2f2; color: #dc2626; }
.badge-dau { background: #ecfdf5; color: #059669; }
.badge-deu { background: #f0ebff; color: #4a2ac2; }
.badge-acu { background: #fffbeb; color: #d97706; }
.badge-warning { background: var(--warning-subtle); color: #92400e; }

.status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 12px;
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
line-height: 1;
}

.status-ok { background: var(--success-subtle); color: #166534; }
.status-nok { background: var(--danger-subtle); color: #991b1b; }
.status-vago { background: var(--info-subtle); color: #1e40af; }
.status-badge.status-manutencao { background: var(--warning-subtle); color: #92400e; }

/* ============================================
FORMS
============================================ */
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 8px;
}

.form-group { margin-bottom: 20px; }

.form-group label {
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 13px;
color: var(--text-secondary);
}

.form-group .required { color: var(--danger); }

.form-control {
width: 100%;
padding: 10px 14px;
border: 1.5px solid var(--border);
border-radius: var(--radius);
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--text);
background: var(--surface);
transition: var(--transition);
}

.form-control:hover { border-color: var(--muted-light); }

.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(91, 55, 219, 0.12);
}

.form-control::placeholder { color: var(--muted-light); }

textarea.form-control {
resize: vertical;
font-family: inherit;
min-height: 80px;
}

select.form-control {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}

.form-actions {
display: flex;
gap: 12px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--border-light);
flex-wrap: wrap;
align-items: center;
}

.form-actions-delete {
margin-left: auto;
}

/* ============================================
FILTERS
============================================ */
.filters-bar {
background: var(--surface);
padding: 20px;
border-radius: var(--radius-lg);
margin-bottom: 20px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
}

.filters-mobile-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.filters-mobile-header:has(+ .filters-collapsed),
.filters-bar:not(:has(form:not(.filters-collapsed))) .filters-mobile-header {
margin-bottom: 0;
}
.filters-mobile-header span {
font-size: 13px;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.filters-toggle {
border: 1px solid var(--border);
background: var(--bg, #f3f7fc);
color: var(--muted);
padding: 6px 13px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
font-family: 'Inter', sans-serif;
cursor: pointer;
flex-shrink: 0;
user-select: none;
display: inline-flex;
align-items: center;
gap: 5px;
line-height: 1;
transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.filters-toggle:hover { background: rgba(91,55,219,.08); color: var(--primary); border-color: rgba(91,55,219,.35); }
.filters-toggle .chevron {
width: 15px;
height: 15px;
flex-shrink: 0;
transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.filters-toggle[data-open="true"] .chevron { transform: rotate(180deg); }
.filters-collapsed { display: none !important; }
.filters-bar form.filters-animating,
.filters-form.filters-animating {
overflow: hidden;
transform-origin: top center;
}

.filters-bar form,
.filters-form {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 14px;
align-items: end;
}

.filter-group {
display: flex;
flex-direction: column;
gap: 6px;
}

.filter-group label {
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}

.filter-group select,
.filter-group input,
.filters-form select,
.filters-form input {
padding: 10px 14px;
border: 1.5px solid var(--border);
border-radius: var(--radius);
background-color: var(--surface);
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--text);
transition: var(--transition);
}

.filter-group select,
.filters-form select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
cursor: pointer;
}

.filter-group select:focus,
.filter-group input:focus,
.filters-form select:focus,
.filters-form input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(91, 55, 219, 0.12);
}

.filters-equipamentos .filter-group { grid-column: span 4; }

.filters-equipamentos .filter-search {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "label label" "input actions";
gap: 8px 12px;
}

.filters-equipamentos .filter-actions {
display: flex;
gap: 10px;
grid-area: actions;
}

.filters-equipamentos .filter-search label { grid-area: label; }
.filters-equipamentos .filter-search input { grid-area: input; }
.filters-equipamentos .filter-actions .btn { white-space: nowrap; }

/* Spare Parts: 4 campos de filtro em uma unica linha no desktop. */
#spare-filters {
grid-template-columns:
minmax(180px, 1fr)
minmax(180px, 1fr)
minmax(180px, 1fr)
minmax(340px, 1.45fr);
align-items: end;
gap: 14px;
}

#spare-filters .filter-group {
grid-column: auto;
min-width: 0;
}

#spare-filters .filter-search {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"label label"
"input actions";
gap: 8px 10px;
}

#spare-filters .filter-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
grid-area: actions;
}

#spare-filters .filter-actions .btn {
min-height: 42px;
padding-inline: 14px;
}

@media (max-width: 1360px) {
#spare-filters {
grid-template-columns: repeat(2, minmax(240px, 1fr));
}

#spare-filters .filter-search {
grid-column: 1 / -1;
}
}

.filters-form label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}

.filters-form .btn {
align-self: flex-end;
min-height: 42px;
padding: 10px 20px;
font-size: 13px;
}

.result-count {
margin-bottom: 16px;
color: var(--muted);
font-size: 14px;
}
.result-count strong { color: var(--text); }

/* ============================================
EQUIPMENT DETAIL
============================================ */
.equipamento-detail {
background: var(--surface);
padding: 32px;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
}

.detail-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-light);
flex-wrap: wrap;
}

.detail-header h3 { font-size: 22px; }

.detail-maint-btn {
margin-left: auto;
width: 46px;
height: 46px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #8a4b0f;
background: linear-gradient(145deg, #fff8e8, #ffefcc);
border: 1px solid #f1ce88;
box-shadow: 0 6px 16px rgba(180, 117, 19, 0.2);
transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

.detail-maint-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(180, 117, 19, 0.25);
filter: saturate(1.03);
}

.detail-maint-btn:focus-visible {
outline: 2px solid #d08a17;
outline-offset: 2px;
}

.detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 32px;
}

.detail-item {
padding: 18px;
background: var(--bg-alt);
border-radius: var(--radius);
border: 1px solid var(--border-light);
transition: var(--transition);
}

.detail-item:hover { border-color: var(--border); }
.detail-item.full-width { grid-column: 1 / -1; }

.detail-item label {
display: block;
font-weight: 600;
color: var(--muted);
margin-bottom: 6px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
}

.detail-item span {
color: var(--text);
font-size: 15px;
}

.alert-text {
color: var(--danger) !important;
font-weight: 600;
}

.detail-section {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--border-light);
}

.detail-section h4 {
margin-bottom: 20px;
color: var(--text);
font-size: 18px;
display: flex;
align-items: center;
gap: 8px;
}

.detail-section h4 svg { flex-shrink: 0; }

/* ============================================
PHOTOS
============================================ */
.fotos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 16px;
}

.fotos-grid--edit {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 20px;
}

.foto-item {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 2px solid var(--border-light);
background: var(--bg);
}

.foto-item img {
width: 100%;
height: 170px;
object-fit: cover;
display: block;
transition: transform 0.35s ease, filter 0.35s ease;
}

.foto-item--interactive:hover img {
transform: scale(1.05);
filter: brightness(0.6);
}

/* Overlay com botões de ação */
.foto-item__overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
opacity: 0;
transition: opacity 0.25s ease;
z-index: 2;
}

.foto-item--interactive:hover .foto-item__overlay {
opacity: 1;
}

.foto-item__badge {
position: absolute;
bottom: 8px;
left: 8px;
background: rgba(15, 23, 42, 0.75);
color: white;
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 20px;
backdrop-filter: blur(4px);
z-index: 1;
}

/* Botões de ação reutilizáveis */
button.foto-action-btn,
.foto-action-btn {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.95);
color: #0f172a;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
padding: 0;
margin: 0;
line-height: 1;
font-size: 0;
-webkit-appearance: none;
appearance: none;
flex-shrink: 0;
}

button.foto-action-btn:hover,
.foto-action-btn:hover {
background: #ffffff;
transform: scale(1.15);
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
}

button.foto-action-btn.foto-action-btn--danger,
.foto-action-btn--danger {
background: rgba(239, 68, 68, 0.92);
color: #fff;
}

button.foto-action-btn.foto-action-btn--danger:hover,
.foto-action-btn--danger:hover {
background: #dc2626;
color: #fff;
}

.foto-action-btn--light {
background: rgba(255, 255, 255, 0.92);
color: #0f172a;
}

.foto-action-btn svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}

.foto-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
padding: 12px 8px 8px;
display: flex;
justify-content: space-between;
align-items: center;
}

.fotos-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}

.foto-card {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow);
cursor: pointer;
transition: var(--transition-slow);
border: 2px solid var(--border-light);
}

.foto-card--interactive:hover {
border-color: var(--primary-light);
box-shadow: var(--shadow-lg);
}

.foto-card--interactive:hover img {
transform: scale(1.05);
filter: brightness(0.65);
}

.foto-card img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
transition: transform 0.35s ease, filter 0.35s ease;
}

.foto-card__overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
opacity: 0;
transition: opacity 0.25s ease;
z-index: 2;
}

.foto-card--interactive:hover .foto-card__overlay {
opacity: 1;
}

.foto-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
padding: 20px 12px 10px;
text-align: center;
z-index: 1;
}

/* ============================================
UPLOAD
============================================ */

/* Styled file input (replaces default browser button) */
.file-upload-styled {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
border: 2px dashed var(--border);
border-radius: var(--radius-lg);
background: var(--bg);
color: var(--text-secondary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
min-height: 48px;
}

.file-upload-styled:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-subtle);
}

.file-upload-styled input[type="file"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}

.file-upload-styled svg {
flex-shrink: 0;
opacity: 0.7;
}

.file-upload-styled:hover svg {
opacity: 1;
}

.upload-container, #upload-container {
display: flex;
flex-direction: column;
gap: 10px;
}

.upload-item {
display: flex;
gap: 10px;
align-items: center;
padding: 12px;
background: var(--bg-alt);
border-radius: var(--radius);
border: 1px solid var(--border-light);
}

.upload-item-inline { align-items: center; justify-content: space-between; }
.upload-item-inline .form-control { min-width: 220px; flex: 1 1 auto; }

.upload-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.upload-actions-inline { flex: 0 0 auto; align-items: center; }

.upload-chip {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 10px 20px;
border-radius: var(--radius);
border: 1px solid rgba(148, 163, 184, 0.28);
font-size: 14px;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.upload-chip span { color: inherit; }
.upload-chip:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14); }
.upload-chip:active { transform: translateY(0); }

.chip-icon {
width: 16px;
height: 16px;
display: inline-block;
color: currentColor;
}

.upload-chip-camera {
background: linear-gradient(135deg, #1c4f97 0%, #2a5ea6 58%, #6850e5 100%);
color: #f7fbff;
border-color: rgba(164, 188, 232, 0.48);
box-shadow: 0 8px 18px rgba(9, 35, 78, 0.22);
}
.upload-chip-camera:hover {
background: linear-gradient(135deg, #1a498b 0%, #275497 58%, #5b42d3 100%);
box-shadow: 0 10px 22px rgba(8, 32, 69, 0.28);
}

.upload-chip-gallery {
background: linear-gradient(145deg, #ffffff, #f7fbff);
color: #1d3357;
border-color: #c7d6ed;
box-shadow: var(--shadow-xs);
}
.upload-chip-gallery:hover {
background: linear-gradient(145deg, #ffffff, #eef5ff);
border-color: #9fb8e2;
}

.upload-chip.is-disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.upload-chip.is-disabled .input-hidden {
pointer-events: none;
}

.input-hidden { display: none; }

.upload-chip .input-hidden {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}

html.dark .upload-chip-gallery {
background: #1b2740;
color: #c5d3ec;
border-color: #334760;
box-shadow: none;
}
html.dark .upload-chip-gallery:hover {
background: var(--bg-alt);
color: var(--text);
}

.upload-shell {
background: var(--bg-alt);
border: 2px dashed var(--border);
border-radius: var(--radius-lg);
padding: 20px;
transition: var(--transition);
}

.upload-shell:hover {
border-color: var(--primary);
background: var(--primary-subtle);
}

.upload-toolbar { display: flex; justify-content: flex-start; margin-bottom: 16px; }

.upload-preview-panel {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius);
padding: 16px;
min-height: 100px;
}

.upload-preview-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: var(--muted);
margin-bottom: 12px;
font-weight: 600;
}

.upload-count { font-weight: 700; color: var(--primary); }

.upload-previews {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 220px));
gap: 14px;
justify-content: flex-start;
}

.upload-preview-item {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 10px;
box-shadow: var(--shadow-xs);
overflow: hidden;
}

.upload-preview-item img {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 10px;
display: block;
}

.preview-info {
margin-top: 8px;
font-size: 11px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preview-actions { display: flex; gap: 8px; margin-top: 8px; }

@media (max-width: 768px) {
.upload-previews {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}

.upload-preview-item img {
height: 96px;
}
}

/* ============================================
VERSIONS
============================================ */
.versoes-list { display: flex; flex-direction: column; gap: 12px; }

.versao-item {
padding: 16px 18px;
background: var(--bg-alt);
border-left: 3px solid var(--primary);
border-radius: 0 var(--radius) var(--radius) 0;
transition: var(--transition);
}

.versao-item:hover { background: var(--primary-subtle); }

.versao-header {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 14px;
}

.versao-header strong { color: var(--primary-dark); }
.versao-header span { color: var(--muted); font-size: 13px; }
.versao-info p { margin-bottom: 4px; color: var(--text-secondary); font-size: 14px; }
.versao-info small { color: var(--muted); font-size: 12px; }

/* ============================================
BACKUP PAGE
============================================ */

/* --- Ações principais --- */
.backup-actions-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 24px;
margin-bottom: 28px;
}

/* Ordem visual da central de backup */
.backup-layout {
display: flex;
flex-direction: column;
}

.backup-layout .backup-reports-section {
order: 1;
}

.backup-layout .backup-actions-row {
order: 2;
}

.backup-layout .backups-list {
order: 3;
}

.backup-layout .backup-stat-card {
min-width: 0;
}

.backup-layout .backup-stat-card .stat-info {
min-width: 0;
overflow: hidden;
}

.backup-layout .backup-stat-date {
display: flex;
flex-direction: column;
gap: 2px;
font-size: clamp(20px, 2vw, 24px);
line-height: 1.05;
letter-spacing: 0;
white-space: normal;
}

.backup-layout .backup-stat-date span {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}

.backup-actions-row .backup-panel:nth-child(3) {
grid-column: 1 / -1;
}

.backup-panel {
background: var(--surface);
border-radius: var(--radius-xl);
padding: 22px;
border: 1px solid var(--border-light);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 16px;
transition: var(--transition);
position: relative;
overflow: hidden;
}

.backup-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
opacity: 0;
transition: var(--transition);
}

.backup-actions-row .backup-panel:nth-child(1)::before { background: linear-gradient(90deg, var(--primary), var(--primary-light)); }
.backup-actions-row .backup-panel:nth-child(2)::before { background: linear-gradient(90deg, var(--warning), #fbbf24); }
.backup-actions-row .backup-panel:nth-child(3)::before { background: linear-gradient(90deg, var(--success), #10b981); }

.backup-panel:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.backup-panel:hover::before { opacity: 1; }

.backup-panel-header {
display: flex;
align-items: flex-start;
gap: 14px;
}

.backup-panel-icon {
width: 46px;
height: 46px;
min-width: 46px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.backup-panel-header h3 {
font-size: 17px;
font-weight: 700;
color: var(--text);
margin-bottom: 4px;
}

.backup-panel-header p {
color: var(--muted);
font-size: 14px;
line-height: 1.5;
margin: 0;
}

.panel-note {
display: block;
color: var(--muted-light);
font-size: 12px;
line-height: 1.5;
}

.panel-btns-row {
display: flex;
gap: 10px;
margin-top: 8px;
}

.panel-btns-row form { display: flex; }
.panel-btns-row .btn { padding: 12px 18px; font-size: 14px; font-weight: 600; justify-content: center; }
.panel-btns-row form,
.panel-btns-row > .btn,
.panel-btns-row > .backup-file-btn {
flex: 1;
}

.panel-btns-row .btn,
.panel-btns-row .backup-file-btn {
min-height: 46px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.backup-import-form {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}

.backup-schedule-form {
gap: 14px;
}

.backup-schedule-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}

.backup-schedule-grid .form-group {
min-width: 0;
margin-bottom: 0;
}

.backup-schedule-grid .form-group label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.backup-schedule-grid .form-control {
min-height: 48px;
}

.backup-schedule-form .state-note {
margin-top: 0;
}

.backup-import-form .file-upload-styled {
width: 100%;
justify-content: center;
box-sizing: border-box;
padding: 12px 18px;
min-height: 48px;
}

.backup-import-form .btn { padding: 12px 18px; font-size: 14px; font-weight: 600; justify-content: center; }

.backup-import-actions {
margin-top: 0;
}

.backup-file-btn {
width: auto !important;
border-style: solid;
border-width: 1px;
background: var(--bg);
color: var(--text-secondary);
padding: 0 16px;
}

.backup-file-btn:hover {
background: var(--bg-alt);
color: var(--text);
}

.backup-file-btn svg {
opacity: 0.85;
}

.backup-json-btn {
border: 1px solid var(--border) !important;
background: var(--bg) !important;
color: var(--text-secondary) !important;
}

.backup-json-btn:hover {
background: var(--bg-alt) !important;
border-color: var(--primary-light) !important;
color: var(--text) !important;
}

.backup-site-transfer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}

.backup-site-transfer .backup-panel {
min-width: 0;
}

.backup-site-transfer .backup-panel-header > div:last-child {
min-width: 0;
}

.backup-site-transfer .backup-panel-header h3,
.backup-site-transfer .backup-panel-header p,
.backup-site-transfer .panel-note,
.backup-site-transfer .file-upload-styled__text,
.backup-site-transfer .btn {
overflow-wrap: anywhere;
}

.backup-site-transfer .backup-import-actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}

.backup-site-transfer .backup-import-actions .btn,
.backup-site-transfer .backup-file-btn {
width: 100% !important;
min-width: 0;
}

/* Evita botão gigante no card de agendamento */
.backup-panel .backup-import-form > .btn.btn-primary {
width: auto !important;
min-width: 220px;
align-self: flex-start;
}

.form-group label.file-upload-styled {
display: inline-flex;
margin-bottom: 0;
}

.perfil-file-btn {
width: 100%;
justify-content: center;
padding: 12px 18px;
min-height: 48px;
border-style: solid;
border-width: 1px;
border-color: var(--border);
background: var(--bg);
}

.file-image-preview {
display: flex;
align-items: center;
margin-top: 8px;
min-height: 0;
}

.file-image-preview__img {
width: 88px;
height: 88px;
border-radius: 10px;
border: 1px solid var(--border);
object-fit: cover;
box-shadow: var(--shadow-xs);
background: var(--surface);
}

/* --- Relatórios & Exportações: full-width --- */
.backup-reports-section {
background: var(--surface);
border-radius: var(--radius-xl);
padding: 28px;
border: 1px solid var(--border-light);
box-shadow: var(--shadow-sm);
margin-bottom: 28px;
}

.backup-reports-header {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 20px;
}

.backup-reports-header h3 {
font-size: 17px;
font-weight: 700;
color: var(--text);
margin-bottom: 4px;
}

.backup-reports-header p {
color: var(--muted);
font-size: 14px;
line-height: 1.5;
margin: 0;
}

.backup-reports-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}

.backup-report-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 22px 16px;
background: var(--bg-alt, #f8fafc);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
cursor: pointer;
transition: var(--transition);
text-decoration: none;
text-align: center;
font-family: inherit;
color: inherit;
font-size: inherit;
}

.backup-report-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--primary);
background: var(--surface);
}

.report-card-icon {
width: 50px;
height: 50px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.report-card-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
}

.report-card-desc {
font-size: 12px;
color: var(--muted);
line-height: 1.4;
}

/* --- Legacy panel-btns (manter compatibilidade) --- */
.panel-btns { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.panel-btns form { display: flex; width: 100%; }
.panel-btns .btn { display: flex; width: 100%; justify-content: center; align-items: center; box-sizing: border-box; padding: 12px 18px; font-size: 14px; font-weight: 600; }

.backups-list { margin-top: 8px; }
.backups-list .section-header { margin-bottom: 16px; }

.backups-list {
padding: 12px;
}

.backups-list .section-header {
padding: 4px 8px 10px;
margin-bottom: 10px;
}

.backups-list .section-header h3 {
margin: 0;
display: inline-flex;
align-items: center;
gap: 10px;
line-height: 1.1;
}

.backups-list .section-header .expand-toggle {
margin-right: 6px;
min-width: 128px;
justify-content: center;
}

.backups-list .backup-table-desktop {
margin: 0 8px 8px;
border: 1px solid var(--border-light);
border-radius: 14px;
overflow: hidden;
}

.backups-list .table thead th,
.backups-list .table tbody td {
vertical-align: middle;
}

.backups-list .table td.actions {
white-space: nowrap;
}

/* Backup cards mobile: hidden on desktop, shown on mobile */
.backup-cards-mobile { display: none; }

.backup-card-item {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 16px;
margin-bottom: 12px;
box-shadow: var(--shadow-xs);
transition: var(--transition);
position: relative;
overflow: hidden;
}

.backup-card-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--primary), var(--primary-light));
border-radius: 4px 0 0 4px;
}

.backup-card-top {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 10px;
}

.backup-card-icon {
width: 42px;
height: 42px;
min-width: 42px;
border-radius: var(--radius-sm);
background: var(--primary-subtle);
display: flex;
align-items: center;
justify-content: center;
}

.backup-card-meta {
flex: 1;
min-width: 0;
}

.backup-card-name {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text);
line-height: 1.3;
word-break: break-all;
margin-bottom: 6px;
}

.backup-card-details {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
font-size: 12px;
color: var(--muted);
}

.backup-card-dot { color: var(--border); }

.backup-card-details .badge {
font-size: 10px;
padding: 2px 8px;
}

.backup-card-date {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--muted);
margin-bottom: 14px;
padding-left: 54px;
}

.backup-card-date svg { color: var(--muted-light); flex-shrink: 0; }

.backup-card-actions {
display: flex;
gap: 8px;
}

.backup-card-actions .btn {
flex: 1;
justify-content: center;
min-height: 40px;
font-size: 13px;
}

.backup-card-actions .backup-card-form {
flex: 1;
display: flex;
}

.backup-card-actions .backup-card-form .btn {
width: 100%;
}

.backup-info-modal {
max-width: 780px;
}

.backup-info-grid {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.backup-info-item {
background: var(--bg-alt, #f8fafc);
border: 1px solid var(--border-light);
border-radius: 10px;
padding: 10px 12px;
min-height: 66px;
display: flex;
flex-direction: column;
gap: 6px;
}

.backup-info-item label {
margin: 0;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--muted);
font-weight: 700;
}

.backup-info-item span,
.backup-info-item code {
margin: 0;
color: var(--text);
font-size: 13px;
line-height: 1.35;
word-break: break-word;
}

.backup-info-item code {
background: rgba(15, 23, 42, 0.06);
border-radius: 7px;
padding: 4px 6px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.backup-info-item-full {
grid-column: 1 / -1;
}

.backup-info-modal-card .modal-body {
padding-top: 18px;
}

.backup-info-table {
border-radius: 12px;
overflow: hidden;
}

.backup-info-table thead th {
white-space: nowrap;
}

.backup-info-table tbody td:first-child {
width: 210px;
font-weight: 700;
color: #2f4f79;
}

.backup-info-table tbody code {
display: inline-block;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
padding: 3px 6px;
border-radius: 8px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(15, 23, 42, 0.04);
}

html.dark .backup-info-item {
background: rgba(15, 23, 42, 0.7);
border-color: #334155;
}

html.dark .backup-info-item label {
color: #94a3b8;
}

html.dark .backup-info-item span,
html.dark .backup-info-item code {
color: #e2e8f0;
}

html.dark .backup-info-item code {
background: rgba(2, 6, 23, 0.6);
}

html.dark .backup-info-table tbody td:first-child {
color: #c9ddfa;
}

html.dark .backup-info-table tbody code {
border-color: rgba(148, 163, 184, 0.22);
background: rgba(2, 6, 23, 0.56);
}

@media (max-width: 900px) {
.backup-actions-row { grid-template-columns: 1fr; }
.backup-actions-row .backup-panel:nth-child(3) { grid-column: auto; }
.backup-reports-grid { grid-template-columns: repeat(2, 1fr); }
.panel-btns-row { flex-direction: column; }
.backup-info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
.backup-reports-grid { grid-template-columns: 1fr; }
}

/* ============================================
EMPTY STATE
============================================ */
.empty-state {
padding: 48px 20px;
text-align: center;
border: 2px dashed var(--border);
border-radius: var(--radius-lg);
background: var(--bg-alt);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}

.empty-state svg { margin-bottom: 8px; opacity: 0.5; }
.empty-state h4 { color: var(--text-secondary); margin-bottom: 4px; font-size: 18px; }
.empty-state p { color: var(--muted); font-size: 14px; }

.tool-empty-state {
margin: 12px 0 0;
border-style: solid;
border-color: rgba(99, 119, 199, 0.22);
background:
radial-gradient(circle at 50% 0%, rgba(73, 99, 215, 0.08) 0%, rgba(73, 99, 215, 0) 42%),
linear-gradient(180deg, #fbfdff 0%, #f3f7ff 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.tool-empty-state--compact {
min-height: 0;
padding: 28px 20px;
}

.tool-empty-state .btn {
margin-top: 8px;
}

.tool-empty-state h4 {
color: var(--text);
font-weight: 800;
}

.tool-empty-state p {
max-width: 560px;
line-height: 1.5;
}

.tool-empty-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 8px;
}

.tool-empty-actions .btn {
margin-top: 0;
}

td > .tool-empty-state,
.table-responsive .tool-empty-state {
margin: 0;
}

.tool-empty-state[style*="grid-column"] {
width: 100%;
}

/* ============================================
CONFIG PAGE
============================================ */
.config-sections {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 20px;
}

.config-card {
background: var(--surface);
padding: 28px;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
transition: var(--transition);
}

.config-card:hover { box-shadow: var(--shadow); }

.config-card h3 {
margin-bottom: 20px;
color: var(--text);
font-size: 17px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-light);
}

.config-card p {
margin-bottom: 10px;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.6;
}

.config-card p strong { color: var(--text); font-weight: 600; }

.config-card-icon {
width: 48px;
height: 48px;
border-radius: var(--radius);
background: var(--primary-subtle);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}

.config-card-body {
margin-top: 8px;
}

.config-info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border-light);
font-size: 14px;
}

.config-info-row:last-child { border-bottom: none; }

.config-label {
color: var(--muted);
font-weight: 400;
}

.config-value {
color: var(--text);
font-weight: 500;
text-align: right;
}

/* ============================================
MODAL
============================================ */
.modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(4px);
}

.modal-content {
margin: auto;
display: block;
max-width: 90%;
max-height: 85vh;
margin-top: 5vh;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
}

.close {
position: absolute;
top: 20px;
right: 30px;
color: #f8fafc;
font-size: 36px;
font-weight: 300;
cursor: pointer;
transition: var(--transition);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
}

.close:hover { background: rgba(255, 255, 255, 0.2); }

/* ============================================
FOOTER
============================================ */
.footer {
background: linear-gradient(135deg, #0d2f67 0%, #0a2755 100%);
color: var(--muted-light);
text-align: center;
padding: 20px 24px;
margin-top: 0;
border-top: 1px solid var(--header-border);
}

.footer p { margin: 0; font-size: 13px; font-weight: 500; }
.footer a { color: var(--primary-light); font-weight: 600; }

/* ============================================
MOBILE BOTTOM NAV
============================================ */
.mobile-nav {
position: fixed;
left: 12px;
right: 12px;
bottom: 12px;
background: rgba(10, 39, 85, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: var(--radius-xl);
padding: 8px 12px;
display: none;
gap: 4px;
justify-content: space-around;
align-items: center;
box-shadow: var(--shadow-xl);
z-index: 1001;
border: 1px solid var(--header-border);
padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

.mobile-nav a {
color: #c7d8f8;
text-decoration: none;
font-size: 10px;
font-weight: 600;
display: flex;
flex: 1 1 0;
min-width: 0;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.2;
gap: 4px;
padding: 6px 8px;
border-radius: var(--radius);
transition: var(--transition);
}

.mobile-nav a .nav-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
border-radius: var(--radius);
font-size: 16px;
transition: var(--transition);
}
.mobile-nav a .nav-icon svg {
width: 18px;
height: 18px;
display: block;
flex: 0 0 auto;
}

/* Compat: mobile-nav with <span> instead of .nav-icon */
.mobile-nav a span:first-child:not(.nav-icon) {
display: inline-flex;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
border-radius: var(--radius);
font-size: 16px;
background: rgba(198, 216, 248, 0.18);
transition: var(--transition);
}

.mobile-nav a.active { color: white; }

.mobile-nav a.active .nav-icon,
.mobile-nav a.active span:first-child:not(.nav-icon) {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
box-shadow: var(--shadow-primary);
}

/* ============================================
RECENT UPDATES
============================================ */
.recent-updates {
background: var(--surface);
padding: 28px;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
}

.recent-updates h3 { margin: 0; color: var(--text); font-size: 18px; }

.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}

.expand-toggle {
margin-left: auto;
appearance: none;
border: 1px solid var(--border);
background: var(--bg, #f3f7fc);
color: var(--muted);
border-radius: 8px;
padding: 6px 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
justify-content: center;
font-size: 12px;
font-weight: 600;
line-height: 1;
flex-shrink: 0;
user-select: none;
transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.expand-toggle:hover {
background: rgba(91, 55, 219, 0.08);
border-color: rgba(91, 55, 219, 0.35);
color: var(--primary);
}

.expand-toggle:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(91, 55, 219, 0.16);
}

/* SVG chevron (substitui o triângulo CSS) */
.expand-toggle .chevron {
display: inline-block;
width: 15px;
height: 15px;
flex-shrink: 0;
transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.expand-toggle[data-expanded="true"] .chevron {
transform: rotate(180deg);
}

.recent-updates .table-responsive {
overflow: hidden;
will-change: max-height;
transition: max-height 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.recent-table tbody tr.recent-row-extra {
transform-origin: top center;
transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.recent-table tbody tr.recent-row-extra.recent-row-collapsed {
opacity: 0;
transform: translateY(-8px) scaleY(0.985);
}

.recent-table tbody tr.recent-row-extra.recent-row-hidden {
display: none;
}

.btn-icon {
font-size: 12px;
line-height: 1;
padding: 6px 10px;
}

/* ============================================
   TWIN ROW — Mon + Últimas lado a lado
============================================ */
.db-twin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
  --db-twin-col-width: calc(50% - 8px);
}

.db-twin-row .db-section {
  flex: 1 1 var(--db-twin-col-width);
  max-width: var(--db-twin-col-width);
  min-width: 0;
  will-change: flex-basis, max-width;
  transition: flex-basis 440ms cubic-bezier(0.16, 1, 0.3, 1),
              max-width 440ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 260ms ease;
}

.db-twin-row[data-returning="true"] .db-section {
  transition: flex-basis 640ms cubic-bezier(0.2, 0.8, 0.2, 1),
              max-width 640ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 280ms ease;
}

.db-twin-row[data-layout-animating="true"] .db-section {
  will-change: transform, flex-basis, max-width;
}

.db-twin-row[data-layout-measuring="true"] .db-section {
  transition: none !important;
}

/* com uma seção expandida, as duas passam a ocupar linha inteira */
.db-twin-row[data-has-expanded="true"] .db-section,
.db-twin-row .db-section[data-collapsed="false"] {
  flex-basis: 100%;
  max-width: 100%;
}

/* em mobile: sempre empilhado */
@media (max-width: 768px) {
  .db-twin-row {
    --db-twin-col-width: 100%;
  }
  .db-twin-row .db-section {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* ============================================
   RECENT UPDATES — CARD GRID (nova UI)
============================================ */
.db-section-ultimas .db-section-icon {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
}

.recent-updates-grid {
  display: grid;
  gap: 6px;
  padding: 12px 16px 14px;
}

.ru-card {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 14px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.ru-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.ru-status-ok            { border-left-color: var(--success) !important; }
.ru-status-nok           { border-left-color: var(--danger)  !important; }
.ru-status-manutencao    { border-left-color: var(--warning)  !important; }

.ru-card-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  flex-shrink: 0;
}

/* chip de tipo horizontal (sem número) */
.ru-type-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: nowrap;
}
.ru-type-master { border-color: rgba(99,102,241,0.5);  color: #6366f1; background: rgba(99,102,241,0.07); }
.ru-type-remota  { border-color: rgba(34,197,94,0.5);   color: #16a34a; background: rgba(34,197,94,0.07);  }
.ru-type-poi     { border-color: rgba(234,179,8,0.5);   color: #ca8a04; background: rgba(234,179,8,0.07);  }
.ru-type-dpu     { border-color: rgba(249,115,22,0.5);  color: #ea580c; background: rgba(249,115,22,0.07); }
.ru-type-dau     { border-color: rgba(168,85,247,0.5);  color: #9333ea; background: rgba(168,85,247,0.07); }
.ru-type-deu     { border-color: rgba(20,184,166,0.5);  color: #0d9488; background: rgba(20,184,166,0.07); }
.ru-type-acu     { border-color: rgba(239,68,68,0.5);   color: #dc2626; background: rgba(239,68,68,0.07);  }

html.dark .ru-type-master { background: rgba(99,102,241,0.12); }
html.dark .ru-type-remota  { background: rgba(34,197,94,0.12);  }
html.dark .ru-type-poi     { background: rgba(234,179,8,0.12);  }
html.dark .ru-type-dpu     { background: rgba(249,115,22,0.12); }
html.dark .ru-type-dau     { background: rgba(168,85,247,0.12); }
html.dark .ru-type-deu     { background: rgba(20,184,166,0.12); }
html.dark .ru-type-acu     { background: rgba(239,68,68,0.12);  }

/* status pill para o novo layout */
.ru-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
  line-height: 1.4;
}
.ru-s-ok          { background: rgba(34,197,94,.1);  border-color: rgba(34,197,94,.3);  color: #16a34a; }
.ru-s-nok         { background: rgba(239,68,68,.1);  border-color: rgba(239,68,68,.3);  color: #dc2626; }
.ru-s-manutencao  { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); color: #d97706; }

html.dark .ru-s-ok         { color: #4ade80; }
html.dark .ru-s-nok        { color: #f87171; }
html.dark .ru-s-manutencao { color: #fbbf24; }

.ru-card-center {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ru-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ru-meta {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ru-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* collapse: ocultar/mostrar cards extras */
.recent-updates-grid .ru-card {
  transition: opacity 280ms ease, transform 320ms cubic-bezier(0.22,1,0.36,1);
}
.recent-updates-grid .ru-card.ru-row-collapsed {
  opacity: 0;
  transform: translateY(-6px) scaleY(0.97);
  pointer-events: none;
}
.recent-updates-grid .ru-card.ru-row-hidden { display: none; }

/* ============================================ */
.remotas-list {
margin-top: 32px;
padding-top: 28px;
border-top: 1px solid var(--border-light);
}

.remotas-list > h3 { font-size: 18px; margin-bottom: 20px; }

/* ============================================
EQUIPMENT CARDS
============================================ */
.equipamentos-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin-top: 20px;
align-items: stretch;
}

/* Ajustes de alinhamento do filtro acima dos cards no dashboard */
#lista-equipamentos .dashboard-equip-header {
margin-bottom: 14px;
align-items: center;
}

#lista-equipamentos .dashboard-equip-header h3 {
margin-bottom: 0;
}

#lista-equipamentos .dashboard-equip-header .view-toggle {
margin-left: auto;
}

#lista-equipamentos .filters-mobile-header {
margin-bottom: 8px;
}

#dashboard-filters {
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 10px 12px;
margin-bottom: 10px;
}

#dashboard-filters label {
gap: 4px;
}

#dashboard-filters .filter-order,
#dashboard-filters .filter-tipo,
#dashboard-filters .filter-status,
#dashboard-filters .filter-pendencia {
grid-column: span 2;
}

#dashboard-filters .filter-busca {
grid-column: span 2;
}

#dashboard-filters .dashboard-filter-actions {
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
align-self: end;
}

#dashboard-filters .dashboard-filter-actions .btn {
width: 100%;
justify-content: center;
text-align: center;
}

#dashboard-filters .filter-group input,
#dashboard-filters .filter-group select {
width: 100%;
}

@media (max-width: 1200px) {
#dashboard-filters {
grid-template-columns: repeat(6, minmax(0, 1fr));
}

#dashboard-filters .filter-order,
#dashboard-filters .filter-tipo,
#dashboard-filters .filter-status,
#dashboard-filters .filter-pendencia,
#dashboard-filters .filter-busca {
grid-column: span 2;
}

#dashboard-filters .dashboard-filter-actions {
grid-column: 1 / -1;
grid-template-columns: repeat(2, minmax(160px, 1fr));
justify-self: end;
max-width: 360px;
width: 100%;
}
}

@media (max-width: 900px) {
#dashboard-filters {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

#dashboard-filters .filter-order,
#dashboard-filters .filter-tipo,
#dashboard-filters .filter-status,
#dashboard-filters .filter-pendencia,
#dashboard-filters .filter-busca {
grid-column: span 1;
}

#dashboard-filters .dashboard-filter-actions {
grid-column: 1 / -1;
max-width: none;
}
}

#lista-equipamentos .equipamentos-cards {
margin-top: 10px;
}

#lista-equipamentos .dashboard-equip-table-view {
margin-top: 10px;
}

#lista-equipamentos .dashboard-equip-table-view .actions {
white-space: nowrap;
}

#lista-equipamentos .dashboard-empty-row td {
padding: 0;
border: 0;
}

#lista-equipamentos .dashboard-equip-empty {
min-height: 210px;
margin: 0;
padding: 34px 22px;
justify-content: center;
border-style: solid;
border-color: rgba(99, 119, 199, 0.24);
background:
radial-gradient(circle at 50% 0%, rgba(73, 99, 215, 0.09) 0%, rgba(73, 99, 215, 0) 42%),
linear-gradient(180deg, #fbfdff 0%, #f2f7ff 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

#lista-equipamentos .dashboard-equip-empty-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 14px;
color: #315dc2;
background: linear-gradient(145deg, rgba(229, 236, 255, 0.96), rgba(214, 225, 255, 0.9));
border: 1px solid rgba(88, 111, 196, 0.18);
box-shadow: 0 12px 24px rgba(54, 75, 145, 0.12);
}

#lista-equipamentos .dashboard-equip-empty-icon svg {
width: 24px;
height: 24px;
margin: 0;
opacity: 0.9;
}

#lista-equipamentos .dashboard-equip-empty h4 {
color: var(--text);
font-size: 18px;
font-weight: 800;
margin: 4px 0 0;
}

#lista-equipamentos .dashboard-equip-empty p {
max-width: 460px;
line-height: 1.5;
margin: 0;
}

#dashboardEquipViewCards .dashboard-equip-empty {
grid-column: 1 / -1;
}

#dashboardEquipViewCards .dashboard-equip-empty-cards {
min-height: 230px;
}

html.dark body:not(.login-page) #lista-equipamentos .dashboard-equip-empty {
border-color: #334b73;
background:
radial-gradient(circle at 50% 0%, rgba(87, 120, 255, 0.18) 0%, rgba(87, 120, 255, 0) 44%),
linear-gradient(180deg, #1a2740 0%, #152238 100%);
}

html.dark body:not(.login-page) #lista-equipamentos .dashboard-equip-empty-icon {
color: #a8c1ff;
background: linear-gradient(145deg, rgba(43, 61, 98, 0.95), rgba(30, 45, 76, 0.9));
border-color: #405b8f;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

.equipamento-card {
--equip-status-color: var(--primary);
--equip-status-glow: rgba(91, 55, 219, 0.18);
position: relative;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 292px;
height: 100%;
transition: var(--transition);
}
.equipamento-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, rgba(11, 47, 102, 0.08), rgba(91, 55, 219, 0.7), rgba(34, 211, 238, 0.55), rgba(11, 47, 102, 0.08));
opacity: 0.35;
z-index: 2;
pointer-events: none;
}
.equipamento-card::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 3px;
background: var(--equip-status-color);
box-shadow: 0 0 12px var(--equip-status-glow);
z-index: 3;
pointer-events: none;
}

.equipamento-card-preview-carousel {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}

.equipamento-card-preview {
position: absolute;
inset: 0;
z-index: 0;
background-position: 88% center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
filter: grayscale(0.02) saturate(0.98) brightness(0.9) contrast(1.08);
transform: scale(1.075);
pointer-events: none;
will-change: opacity, transform, filter;
transition: opacity 260ms ease-in-out, transform 360ms cubic-bezier(0.22, 1, 0.36, 1), filter 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.equipamento-card-preview::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(248, 250, 252, 0.96) 0%, rgba(248, 250, 252, 0.9) 24%, rgba(248, 250, 252, 0.62) 56%, rgba(248, 250, 252, 0.18) 82%, rgba(248, 250, 252, 0.04) 100%),
linear-gradient(180deg, rgba(230, 240, 252, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
opacity: 1;
transition: opacity 260ms ease-in-out;
}

.equipamento-card-link,
.equipamento-card-actions,
.equipamento-card-reading-bg {
position: relative;
z-index: 1;
}

.equipamento-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: var(--primary-light);
}

.equipamento-card.is-photo-preview-active .equipamento-card-preview.is-active,
.equipamento-card:has(.equipamento-meta--photos:hover) .equipamento-card-preview.is-active,
.equipamento-card:has(.equip-foto-foot:hover) .equipamento-card-preview.is-active {
opacity: 0.43;
filter: grayscale(0.01) saturate(1.02) brightness(0.88) contrast(1.1);
transform: scale(1.035);
}

.equipamento-card.is-photo-preview-active .equipamento-card-preview.is-active::after,
.equipamento-card:has(.equipamento-meta--photos:hover) .equipamento-card-preview.is-active::after,
.equipamento-card:has(.equip-foto-foot:hover) .equipamento-card-preview.is-active::after {
opacity: 0.72;
}

.equipamento-card.equip-status-ok {
--equip-status-color: var(--success);
--equip-status-glow: rgba(34, 197, 94, 0.22);
}
.equipamento-card.equip-status-nok {
--equip-status-color: var(--danger);
--equip-status-glow: rgba(239, 68, 68, 0.24);
}
.equipamento-card.equip-status-vago {
--equip-status-color: var(--info);
--equip-status-glow: rgba(14, 165, 233, 0.22);
}
.equipamento-card.equip-status-manutencao {
--equip-status-color: var(--warning);
--equip-status-glow: rgba(245, 158, 11, 0.24);
}

.equipamento-card-link {
display: block;
padding: 14px 14px 10px;
text-decoration: none;
color: inherit;
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 6px;
}

.equipamento-card-reading-bg {
transition: background-color 220ms ease, box-shadow 220ms ease, color 220ms ease;
}

.equipamento-card.is-photo-preview-active .equipamento-card-reading-bg {
display: inline;
padding: 0.05em 0.34em 0.12em;
border-radius: 10px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
background: rgba(255, 255, 255, 0.76);
box-shadow: 0 6px 16px rgba(148, 163, 184, 0.16);
}

.equipamento-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 6px;
gap: 8px;
flex-wrap: wrap;
}

.equipamento-card-header-right {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
min-width: 0;
}

.equip-status-stack {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
white-space: nowrap;
vertical-align: middle;
}

.equip-status-stack--table {
gap: 8px;
}

.equip-monitor-dot-indicator {
--equip-monitor-color: #64748b;
--equip-monitor-bg: rgba(100, 116, 139, 0.12);
--equip-monitor-border: rgba(100, 116, 139, 0.34);
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
min-width: 22px;
border: 1px solid var(--equip-monitor-border);
border-radius: 999px;
background: var(--equip-monitor-bg);
color: var(--equip-monitor-color);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
vertical-align: middle;
}

.equip-monitor-dot-indicator--table {
width: 20px;
height: 20px;
min-width: 20px;
}

.equip-monitor-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.14);
}

.equip-monitor-dot-indicator.is-online {
--equip-monitor-color: #16a34a;
--equip-monitor-bg: rgba(34, 197, 94, 0.13);
--equip-monitor-border: rgba(34, 197, 94, 0.42);
}

.equip-monitor-dot-indicator.is-online .equip-monitor-dot {
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}

.equip-monitor-dot-indicator.is-degradado {
--equip-monitor-color: #d97706;
--equip-monitor-bg: rgba(245, 158, 11, 0.14);
--equip-monitor-border: rgba(245, 158, 11, 0.46);
}

.equip-monitor-dot-indicator.is-degradado .equip-monitor-dot {
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.equip-monitor-dot-indicator.is-offline {
--equip-monitor-color: #dc2626;
--equip-monitor-bg: rgba(239, 68, 68, 0.13);
--equip-monitor-border: rgba(239, 68, 68, 0.46);
}

.equip-monitor-dot-indicator.is-offline .equip-monitor-dot {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.equip-monitor-dot-indicator.is-unknown,
.equip-monitor-dot-indicator.is-unmonitored {
--equip-monitor-color: #64748b;
--equip-monitor-bg: rgba(100, 116, 139, 0.12);
--equip-monitor-border: rgba(100, 116, 139, 0.34);
}

.equip-foto-badge {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 28px;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid #c6dbff;
background: linear-gradient(145deg, #e9f2ff, #ddeaff);
color: #1d4c92;
font-size: 12px;
font-weight: 700;
line-height: 1;
box-shadow: 0 4px 10px rgba(29, 76, 146, 0.12);
}

.equip-foto-badge svg {
width: 13px;
height: 13px;
}

.equip-table-photo-tag {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 8px;
padding: 2px 7px;
border-radius: 999px;
border: 1px solid #c6dbff;
background: #eef4ff;
color: #1d4c92;
font-size: 11px;
font-weight: 700;
line-height: 1;
vertical-align: middle;
}

.equip-table-photo-tag svg {
width: 11px;
height: 11px;
}

.equipamento-card-title,
.equipamento-card h4 {
font-size: 16px;
margin: 0;
color: var(--text);
line-height: 1.35;
overflow-wrap: anywhere;
letter-spacing: -0.01em;
min-height: 34px;
}

.equipamento-card-meta-list {
display: grid;
gap: 4px;
align-content: start;
min-height: 60px;
}

.equipamento-meta {
font-size: 13px;
color: var(--muted);
margin: 0;
line-height: 1.45;
overflow-wrap: anywhere;
}

.equipamento-meta--updated {
margin-top: auto;
padding-top: 0;
}

.equipamento-card-notes {
display: grid;
gap: 4px;
align-content: start;
min-height: 44px;
}

.equipamento-desc {
font-size: 13px;
color: var(--text-secondary);
margin: 0;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.equipamento-desc--muted {
color: var(--muted);
}

.equipamento-card-actions {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 8px;
padding: 8px 10px 10px;
border-top: 1px solid var(--border-light);
background: linear-gradient(180deg, rgba(241,245,249,0.6), rgba(248,250,252,0.9));
margin-top: auto;
min-height: 58px;
}
.equipamento-card-actions .btn {
flex: 0 0 auto;
min-width: 86px;
min-height: 36px;
justify-content: center;
border-radius: 12px;
font-weight: 700;
}

.equipamento-card-actions-main {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}

.equipamentos-cards .equipamento-card-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
}

.equipamentos-cards .equipamento-card-actions:has(.equip-foto-foot) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.equipamentos-cards .equipamento-card-actions-main {
display: contents;
}

.equipamentos-cards .equipamento-card-actions-main .btn {
width: 100%;
min-width: 0;
height: 40px;
padding: 0 12px;
gap: 8px;
align-items: center;
justify-content: center;
}

.equipamentos-cards .equip-foto-foot {
align-self: stretch;
justify-self: stretch;
height: 40px;
margin-left: 0;
}

.equipamento-meta--photos,
.equip-foto-foot {
cursor: pointer;
}

.equipamento-meta--photos {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
}

.equipamento-meta--photos:hover,
.equip-foto-foot:hover {
color: var(--primary-dark);
}

.equip-foto-foot {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid #c6dbff;
background: #eef4ff;
color: #1d4c92;
font-size: 12px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}

.equip-foto-foot svg {
width: 12px;
height: 12px;
}

/* ============================================
EQUIPMENT LIST
============================================ */
.equipamentos-list {
background: var(--surface);
padding: 24px;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
}

/* ============================================
LOGIN PAGE
============================================ */
.login-page {
min-height: 100vh;
font-family: 'Manrope', sans-serif;
background: #efeef6;
position: relative;
isolation: isolate;
overflow: hidden;
overflow: clip;
scroll-behavior: smooth;
}

.login-page input,
.login-page button,
.login-page select,
.login-page textarea,
.login-page a {
font-family: inherit;
}

.login-scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
transform-origin: 0 50%;
transform: scaleX(0);
z-index: 9999;
background: linear-gradient(90deg, #6f43f6 0%, #44b5ff 100%);
box-shadow: 0 0 14px rgba(111, 67, 246, 0.55);
pointer-events: none;
}

.login-bg-grid {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.26;
background-image:
linear-gradient(rgba(164, 173, 197, 0.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(164, 173, 197, 0.15) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: radial-gradient(circle at 50% 18%, black 35%, transparent 85%);
}

.login-particles {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
}

.login-particles span {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.58);
box-shadow: 0 0 16px rgba(255, 255, 255, 0.6);
animation: particleFloat 14s linear infinite;
}

.login-particles span:nth-child(1) { left: 8%; top: 72%; animation-duration: 11s; }
.login-particles span:nth-child(2) { left: 19%; top: 58%; animation-duration: 16s; animation-delay: 1.2s; }
.login-particles span:nth-child(3) { left: 31%; top: 66%; animation-duration: 12s; animation-delay: 2.1s; }
.login-particles span:nth-child(4) { left: 44%; top: 75%; animation-duration: 14s; animation-delay: 0.8s; }
.login-particles span:nth-child(5) { left: 63%; top: 69%; animation-duration: 13s; animation-delay: 1.7s; }
.login-particles span:nth-child(6) { left: 74%; top: 57%; animation-duration: 15s; animation-delay: 0.4s; }
.login-particles span:nth-child(7) { left: 84%; top: 62%; animation-duration: 12.5s; animation-delay: 2.6s; }
.login-particles span:nth-child(8) { left: 92%; top: 76%; animation-duration: 17s; animation-delay: 1.1s; }

.login-page::before {
content: '';
position: absolute;
inset: 120px -20% 30% -20%;
z-index: 0;
background: radial-gradient(circle at 18% 24%, rgba(16, 35, 80, 0.16), transparent 56%);
pointer-events: none;
}

.login-page::after {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 900px;
z-index: 0;
background-image:
linear-gradient(90deg, rgba(5, 10, 28, 0.82) 0%, rgba(8, 17, 45, 0.7) 35%, rgba(8, 18, 40, 0.3) 70%, rgba(3, 8, 18, 0.1) 100%),
linear-gradient(180deg, rgba(9, 16, 42, 0.38) 0%, rgba(16, 24, 60, 0.42) 58%, rgba(47, 32, 112, 0.84) 100%),
url('../img/login-hero-ai.png');
background-image:
linear-gradient(90deg, rgba(5, 10, 28, 0.82) 0%, rgba(8, 17, 45, 0.7) 35%, rgba(8, 18, 40, 0.3) 70%, rgba(3, 8, 18, 0.1) 100%),
linear-gradient(180deg, rgba(9, 16, 42, 0.38) 0%, rgba(16, 24, 60, 0.42) 58%, rgba(47, 32, 112, 0.84) 100%),
image-set(
url('../img/login-hero-ai.webp') type('image/webp'),
url('../img/login-hero-ai.png') type('image/png')
);
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
pointer-events: none;
}

.login-top-strip {
position: sticky;
top: 0;
z-index: 30;
background: linear-gradient(90deg, rgba(55, 22, 150, 0.97) 0%, rgba(75, 35, 185, 0.97) 50%, rgba(55, 22, 150, 0.97) 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
transition: min-height 220ms ease, background 220ms ease, border-color 220ms ease;
}

.login-top-strip-inner {
max-width: 1220px;
margin: 0 auto;
min-height: 44px;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 26px;
color: rgba(255, 255, 255, 0.96);
font-size: 13px;
transition: min-height 220ms ease, font-size 220ms ease;
}

.login-top-strip-inner strong {
color: #ffffff;
font-weight: 700;
margin-right: 6px;
}

.login-nav {
position: sticky;
top: 44px;
z-index: 29;
background: #061f43;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: top 220ms ease, background 220ms ease, border-color 220ms ease;
}

.login-nav-inner {
max-width: 1220px;
margin: 0 auto;
min-height: 78px;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
transition: min-height 220ms ease, padding 220ms ease;
}

.login-nav-brand {
display: flex;
align-items: center;
gap: 10px;
color: #f8fbff;
}

.login-nav-brand .brand-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(145deg, #6d4bff, #4f25d9);
color: white;
font-size: 16px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 28px rgba(33, 9, 92, 0.45);
transition: transform 220ms ease;
}

.login-nav-brand strong {
font-size: 38px;
line-height: 1;
letter-spacing: -0.02em;
}

.login-nav-links {
display: flex;
align-items: center;
gap: 16px;
}

.login-nav-links a {
color: rgba(247, 252, 255, 0.97);
font-weight: 600;
font-size: 15px;
text-decoration: none;
padding: 8px 10px;
border-radius: 10px;
transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.login-nav-links a:hover { background: rgba(255, 255, 255, 0.14); }
.login-nav-links a:hover { transform: translateY(-1px); }
.login-nav-links a.is-active,
.login-nav-actions a.is-active {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
}

.login-nav-actions {
display: flex;
align-items: center;
gap: 10px;
}

.login-nav-btn {
min-height: 42px;
padding: 10px 18px;
border-radius: 8px;
border: 1px solid transparent;
background: transparent;
color: #ffffff;
font-weight: 700;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 7px;
position: relative;
overflow: hidden;
transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.login-nav-btn-primary {
background: linear-gradient(135deg, #6033e0 0%, #5628d1 50%, #4a1fc9 100%);
color: #ffffff;
border-color: rgba(96, 51, 224, 0.6);
box-shadow: 0 5px 18px rgba(86, 40, 209, 0.4);
font-weight: 800;
letter-spacing: 0.01em;
}

.login-nav-btn-ghost {
background: transparent;
color: rgba(255, 255, 255, 0.9);
border-color: rgba(255, 255, 255, 0.28);
box-shadow: none;
font-weight: 600;
}

.login-nav-btn:hover {
transform: translateY(-1px);
}

.login-nav-btn-primary:hover {
background: linear-gradient(135deg, #5428c8 0%, #4920b8 50%, #3d18a8 100%);
color: #ffffff;
border-color: rgba(86, 40, 209, 0.8);
box-shadow: 0 10px 28px rgba(86, 40, 209, 0.55);
}

.login-nav-btn-ghost:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.45);
color: #ffffff;
box-shadow: none;
}

.login-shell {
width: 100%;
max-width: 1220px;
margin: 0 auto;
padding: 0 48px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
align-items: center;
gap: 60px;
min-height: calc(100dvh - 122px);
position: relative;
z-index: 2;
}

@media (min-width: 1121px) {
.login-shell {
align-items: center;
}
.login-showcase {
min-height: auto;
display: flex;
flex-direction: column;
}
.login-quick-links {
margin-top: 8px;
}
}

.login-mobile-cue {
display: none;
}

.login-scroll-guide {
position: fixed;
right: 28px;
bottom: 28px;
z-index: 60;
min-height: 46px;
padding: 8px 10px 8px 16px;
border-radius: 999px;
border: 1px solid rgba(174, 211, 255, 0.34);
background:
linear-gradient(145deg, rgba(10, 35, 76, 0.78), rgba(68, 45, 163, 0.78)),
rgba(5, 16, 38, 0.72);
color: #eff7ff;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow: 0 20px 44px rgba(5, 16, 38, 0.28), 0 0 0 5px rgba(56, 189, 248, 0.07);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
cursor: pointer;
opacity: 1;
transform: translateY(0);
transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.login-scroll-guide svg {
width: 24px;
height: 24px;
padding: 5px;
border-radius: 999px;
background: linear-gradient(135deg, #38bdf8, #6d4bff);
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
animation: loginScrollGuidePulse 1.4s ease-in-out infinite;
}

.login-scroll-guide:hover,
.login-scroll-guide:focus-visible {
border-color: rgba(124, 211, 255, 0.72);
box-shadow: 0 24px 54px rgba(5, 16, 38, 0.34), 0 0 0 7px rgba(56, 189, 248, 0.12);
outline: none;
}

.login-scroll-guide.is-hidden {
opacity: 0;
transform: translateY(16px);
pointer-events: none;
}

.login-showcase {
color: #f6f8ff;
display: flex;
flex-direction: column;
gap: 20px;
max-width: 520px;
position: relative;
padding: 0;
}

.login-showcase-tag {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 4px;
color: rgba(200, 210, 255, 0.85);
background: rgba(255, 255, 255, 0.1);
border: none;
white-space: nowrap;
align-self: flex-start;
}

.login-showcase h1 {
font-size: clamp(26px, 2.8vw, 38px);
line-height: 1.18;
color: #ffffff;
letter-spacing: -0.02em;
font-weight: 800;
margin: 0;
background: linear-gradient(135deg, #ffffff 0%, #c8d8ff 50%, #a78bfa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.login-showcase > p {
font-size: 15px;
line-height: 1.6;
color: rgba(220, 228, 255, 0.7);
max-width: 44ch;
margin: 0;
}

.login-showcase-line {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 2px;
}

.login-showcase-line span {
min-height: 30px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(214, 230, 255, 0.24);
background: rgba(255, 255, 255, 0.08);
color: rgba(235, 244, 255, 0.92);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
}

.login-showcase-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 2px;
}

.login-showcase-metric {
min-height: 108px;
padding: 12px;
border-radius: 14px;
border: 1px solid rgba(214, 230, 255, 0.22);
background:
linear-gradient(160deg, rgba(8, 21, 50, 0.72), rgba(18, 40, 80, 0.34)),
rgba(255, 255, 255, 0.06);
box-shadow: 0 16px 34px rgba(2, 8, 24, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
gap: 7px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

.login-showcase-metric-icon {
width: 34px;
height: 34px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #dff7ff;
background: linear-gradient(145deg, rgba(29, 173, 235, 0.26), rgba(118, 96, 255, 0.2));
border: 1px solid rgba(190, 230, 255, 0.28);
box-shadow: 0 10px 18px rgba(3, 13, 32, 0.2);
}

.login-showcase-metric-icon svg {
width: 18px;
height: 18px;
}

.login-showcase-metric strong {
color: #ffffff;
font-size: 13px;
line-height: 1.15;
}

.login-showcase-metric span:last-child {
color: rgba(224, 237, 255, 0.78);
font-size: 12px;
line-height: 1.35;
}

.login-showcase-benefits {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
margin-top: 2px;
max-width: 520px;
}

.login-showcase-benefits .login-mobile-marketing {
display: block;
margin: 0;
padding: 12px;
border-radius: 14px;
border: 1px solid rgba(214, 230, 255, 0.22);
background:
linear-gradient(160deg, rgba(8, 21, 50, 0.74), rgba(18, 40, 80, 0.42)),
rgba(255, 255, 255, 0.06);
box-shadow: 0 16px 34px rgba(2, 8, 24, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

.login-showcase-benefits .login-mobile-marketing-title {
margin: 0 0 4px;
color: #ffffff;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}

.login-showcase-benefits .login-mobile-marketing-subtitle {
margin: 0 0 8px;
color: rgba(224, 237, 255, 0.78);
font-size: 12px;
line-height: 1.35;
}

.login-showcase-benefits .login-mobile-marketing-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 6px;
}

@media (min-width: 769px) {
.login-showcase-benefits .login-mobile-marketing-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

.login-showcase-benefits .login-mobile-marketing-list li {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
align-items: center;
gap: 8px;
min-height: 32px;
padding: 7px 9px;
border-radius: 10px;
border: 1px solid rgba(210, 230, 255, 0.18);
background: rgba(10, 29, 66, 0.5);
color: rgba(235, 244, 255, 0.88);
font-size: 12px;
line-height: 1.32;
}

.login-showcase-benefits .login-mobile-marketing-bullet {
width: 16px;
height: 16px;
border-radius: 999px;
background: linear-gradient(135deg, #4bbcff 0%, #6c54ff 100%);
box-shadow: 0 5px 12px rgba(43, 126, 206, 0.24);
position: relative;
}

.login-showcase-benefits .login-mobile-marketing-bullet::after {
content: '';
position: absolute;
left: 5px;
top: 4px;
width: 6px;
height: 4px;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
transform: rotate(-45deg);
}

.login-quick-links {
display: grid;
gap: 8px;
margin-top: 8px;
}

.login-quick-link {
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
color: #f4f8ff;
text-decoration: none;
display: grid;
grid-template-columns: 24px 1fr 24px;
align-items: center;
gap: 10px;
padding: 11px 14px;
font-size: 14px;
transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.login-quick-link-icon {
width: 22px;
height: 22px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #f6f9ff;
}

.login-quick-link-icon svg {
width: 14px;
height: 14px;
}

.login-quick-link .text {
font-size: 15px;
line-height: 1.35;
font-weight: 600;
}

.login-quick-link .arrow {
text-align: right;
color: #e2dcff;
font-weight: 700;
transition: transform var(--transition), color var(--transition);
}

.login-quick-link:hover {
transform: translateY(-2px);
border-color: rgba(248, 243, 255, 0.62);
background: linear-gradient(130deg, rgba(82, 58, 167, 0.64), rgba(122, 96, 205, 0.56));
box-shadow: 0 10px 22px rgba(24, 13, 64, 0.22);
}

.login-quick-link:hover .arrow {
transform: translateX(2px);
color: #ffffff;
}

.login-emoji-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 2px;
}

.login-emoji-chips span {
padding: 8px 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.34);
background: rgba(14, 20, 43, 0.34);
color: #f7f9ff;
font-size: 14px;
font-weight: 700;
animation: loginChipGlow 4.6s ease-in-out infinite;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.login-kpi-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 2px;
}

.login-kpi-box {
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.34);
background: rgba(17, 24, 50, 0.46);
padding: 10px 10px 9px;
display: flex;
flex-direction: column;
gap: 2px;
min-height: 78px;
justify-content: center;
}

.login-kpi-box strong {
color: #ffffff;
font-size: 26px;
letter-spacing: -0.01em;
line-height: 1;
}

.login-kpi-box span {
color: rgba(232, 240, 255, 0.95);
font-size: 12px;
line-height: 1.3;
}

.login-cta {
width: fit-content;
margin-top: 12px;
color: #1d2d49;
text-decoration: none;
font-weight: 800;
font-size: 16px;
padding: 12px 18px;
border: 1px solid #ffffff;
border-radius: 10px;
transition: transform var(--transition), background var(--transition), box-shadow var(--transition), border-color var(--transition);
position: relative;
overflow: hidden;
background: linear-gradient(145deg, #ffffff, #ebefff);
box-shadow: 0 16px 30px rgba(13, 8, 45, 0.3);
display: inline-flex;
align-items: center;
gap: 8px;
}

.login-cta:hover {
background: linear-gradient(145deg, #f6f9ff, #e2e9ff);
border-color: #dfe7ff;
transform: translateY(-1px);
}

.login-cta:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.34), 0 14px 28px rgba(27, 11, 83, 0.38);
}

.login-card {
background: #f5f5f8;
border-radius: 16px;
padding: 32px 34px;
border: 1px solid #d6d9e3;
box-shadow: 0 20px 44px rgba(13, 19, 35, 0.25);
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
overflow: hidden;
max-width: 480px;
width: 100%;
margin-left: auto;
animation: loginEnter 550ms ease-out;
}

@media (max-width: 1320px) {
.login-shell {
grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
gap: 22px;
padding-top: 22px;
}
.login-showcase h1 {
font-size: clamp(24px, 2.8vw, 34px);
}
.login-showcase > p {
font-size: 18px;
max-width: 32ch;
}
}

@media (max-width: 1120px) {
.login-shell {
grid-template-columns: 1fr;
gap: 16px;
min-height: auto;
}
.login-card {
max-width: 100%;
margin-left: 0;
}
}

.login-card::before {
content: '';
position: absolute;
top: -60px;
right: -50px;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(85, 23, 201, 0.22), transparent 70%);
filter: blur(24px);
pointer-events: none;
}

@keyframes loginEnter {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}

.login-brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 4px;
position: relative;
z-index: 1;
}

.login-brand .brand-icon {
width: 44px;
height: 44px;
background: linear-gradient(145deg, #6638e6, #4f22cf);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
letter-spacing: 0.02em;
font-weight: 800;
color: white;
box-shadow: 0 10px 24px rgba(37, 13, 107, 0.35);
}

/* Compat: login-brand with plain <span> */
.login-brand > span:first-child:not(.brand-icon) {
width: 44px;
height: 44px;
background: linear-gradient(145deg, #6638e6, #4f22cf);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 800;
color: white;
box-shadow: 0 10px 24px rgba(37, 13, 107, 0.35);
}

.login-brand h2 {
font-size: 32px;
line-height: 1;
margin-bottom: 2px;
color: #152744;
letter-spacing: -0.03em;
}

.login-brand h2 span { color: #5628d1; }
.login-brand p { font-size: 13px; color: #66758f; }

.login-card h3 {
font-size: 38px;
margin-bottom: 0;
color: #172845;
letter-spacing: -0.03em;
line-height: 1.05;
}

.login-card-subtitle {
font-size: 15px;
color: #6a7890;
margin-bottom: 8px;
}

.login-card .form-group { margin-bottom: 10px; }
.login-card .form-group label { font-size: 13px; color: #46546a; font-weight: 700; }


.login-card .form-control {
min-height: 48px;
padding: 11px 15px;
font-size: 15px;
background: #ffffff;
border: 1px solid #c8cfdd;
border-radius: 8px;
}

.login-card .form-control:focus {
background: #ffffff;
border-color: #5a2ed4;
box-shadow: 0 0 0 3px rgba(90, 46, 212, 0.14);
}

.login-actions { margin-top: 4px; }

.login-actions .btn {
width: 100%;
min-height: 48px;
padding: 10px 14px;
font-size: 17px;
font-weight: 700;
border-radius: 8px;
background: linear-gradient(135deg, #6033e0 0%, #5628d1 50%, #4a1fc9 100%);
border-color: #5628d1;
box-shadow: 0 4px 16px rgba(86, 40, 209, 0.35);
transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.login-actions .btn:hover {
background: linear-gradient(135deg, #5428c8 0%, #4920b8 50%, #3d18a8 100%);
border-color: #4e23c0;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(86, 40, 209, 0.45);
}

.erro {
background: #fff1f1;
color: #991b1b;
padding: 11px 14px;
border-radius: 8px;
margin-bottom: 16px;
font-size: 14px;
font-weight: 500;
border: 1px solid #f6cbcb;
display: flex;
align-items: center;
gap: 8px;
}

.erro svg { flex-shrink: 0; color: var(--danger); }

.info-login {
margin-top: 4px;
padding: 9px 12px;
background: #eceffd;
border-radius: 8px;
font-size: 12px;
color: #495976;
border: 1px solid #d1d8ef;
line-height: 1.45;
display: flex;
align-items: center;
gap: 8px;
position: relative;
z-index: 1;
}

.info-login svg { flex-shrink: 0; color: #4d2cc3; }
.info-login strong { color: #4d2cc3; }

.login-card-assurance {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 8px;
position: relative;
z-index: 1;
}

.login-assurance-item {
min-height: 84px;
padding: 10px;
border-radius: 14px;
border: 1px solid rgba(181, 195, 224, 0.76);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(238, 244, 255, 0.78)),
rgba(255, 255, 255, 0.72);
display: flex;
flex-direction: column;
gap: 5px;
box-shadow: 0 8px 18px rgba(28, 44, 74, 0.07);
}

.login-assurance-icon {
width: 30px;
height: 30px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #285fc8;
background: linear-gradient(145deg, #e8f5ff, #efeaff);
border: 1px solid #d0ddf4;
box-shadow: 0 8px 16px rgba(48, 73, 128, 0.1);
}

.login-assurance-icon svg {
width: 16px;
height: 16px;
}

.login-assurance-item strong {
color: #1c3152;
font-size: 12px;
line-height: 1.15;
}

.login-assurance-item span:last-child {
color: #61728f;
font-size: 11px;
line-height: 1.3;
}

html.dark .login-assurance-item {
background: linear-gradient(180deg, rgba(31, 38, 54, 0.86), rgba(18, 29, 52, 0.84));
border-color: rgba(148, 163, 184, 0.26);
box-shadow: 0 10px 20px rgba(2, 6, 23, 0.22);
}

html.dark .login-assurance-icon {
background: linear-gradient(145deg, rgba(59, 130, 246, 0.18), rgba(129, 140, 248, 0.18));
border-color: rgba(129, 140, 248, 0.28);
color: #bfdbfe;
}

html.dark .login-assurance-item strong { color: #eef4ff; }
html.dark .login-assurance-item span:last-child { color: #a8b6cf; }

.login-steps {
position: relative;
z-index: 2;
background:
radial-gradient(circle at 12% 18%, rgba(109, 82, 255, 0.08), transparent 28%),
linear-gradient(180deg, #f2f0fb 0%, #e9ecf7 100%);
border-top: 1px solid #d3d7e2;
}

/* Stats counter bar */
.login-stats {
position: relative;
z-index: 2;
background:
radial-gradient(circle at 12% 24%, rgba(140, 108, 255, 0.18), transparent 24%),
radial-gradient(circle at 86% 28%, rgba(61, 169, 255, 0.16), transparent 24%),
linear-gradient(135deg, #1d1144 0%, #2d1c73 46%, #203d84 100%);
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
overflow: hidden;
}

.login-stats::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
radial-gradient(circle at 20% 50%, rgba(111, 67, 246, 0.22), transparent 50%),
radial-gradient(circle at 80% 50%, rgba(61, 169, 255, 0.18), transparent 50%);
background-size: 25% 100%, auto, auto;
pointer-events: none;
}

.login-stats-inner {
max-width: 1220px;
margin: 0 auto;
padding: 10px 24px 12px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
position: relative;
}

.login-stat {
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
min-height: 82px;
padding: 10px 14px;
border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
border: 1px solid rgba(217, 227, 255, 0.14);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 14px rgba(8, 10, 32, 0.1);
backdrop-filter: none;
-webkit-backdrop-filter: none;
transition: border-color 180ms ease, box-shadow 180ms ease;
}

.login-stat:hover {
border-color: rgba(232, 239, 255, 0.28);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 16px rgba(8, 10, 32, 0.12);
}

.login-stat-value {
font-size: clamp(28px, 2.9vw, 40px);
font-weight: 800;
letter-spacing: -0.03em;
background: linear-gradient(135deg, #ffffff 0%, #c4d4ff 60%, #a78bfa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-top: 0;
}

.login-stat-label {
font-size: 12px;
font-weight: 800;
color: rgba(231, 239, 255, 0.92);
letter-spacing: -0.01em;
max-width: 13ch;
line-height: 1.2;
}

.login-marquee {
position: relative;
z-index: 2;
overflow: hidden;
border-top: 1px solid rgba(189, 205, 234, 0.82);
border-bottom: 1px solid rgba(91, 67, 190, 0.26);
background:
radial-gradient(circle at 8% 28%, rgba(55, 133, 255, 0.16), transparent 30%),
radial-gradient(circle at 82% 8%, rgba(112, 83, 225, 0.15), transparent 30%),
linear-gradient(90deg, #edf5ff 0%, #f9fbff 42%, #eef3ff 100%);
--marquee-edge: 132px;
--marquee-speed: 34s;
}

.login-marquee-shell {
max-width: none;
margin: 0;
padding: 18px 0 20px;
display: block;
position: relative;
}

.login-marquee-header {
display: none;
}

.login-marquee-kicker {
width: fit-content;
min-height: 34px;
padding: 7px 13px 7px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.86);
border: 1px solid rgba(190, 205, 230, 0.9);
color: #274469;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 12px 24px rgba(31, 55, 90, 0.08);
white-space: nowrap;
}

.login-marquee-kicker span {
width: 9px;
height: 9px;
border-radius: 50%;
background: #2fcf91;
box-shadow: 0 0 0 5px rgba(47, 207, 145, 0.14);
flex: 0 0 auto;
}

.login-marquee-board {
position: relative;
overflow: hidden;
display: grid;
gap: 10px;
padding: 10px 0;
border-radius: 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(235, 243, 255, 0.42)),
linear-gradient(90deg, rgba(255, 255, 255, 0.66), rgba(224, 235, 255, 0.36), rgba(255, 255, 255, 0.58));
border-top: 1px solid rgba(255, 255, 255, 0.86);
border-bottom: 1px solid rgba(183, 202, 234, 0.7);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 20px 48px rgba(40, 59, 112, 0.12);
min-width: 0;
}

.login-marquee-board::before,
.login-marquee-board::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: var(--marquee-edge);
z-index: 3;
pointer-events: none;
}

.login-marquee-board::before {
left: 0;
background: linear-gradient(90deg, rgba(239, 247, 255, 0.98), rgba(239, 247, 255, 0));
}

.login-marquee-board::after {
right: 0;
background: linear-gradient(270deg, rgba(238, 244, 255, 0.98), rgba(238, 244, 255, 0));
}

.login-marquee-lane {
position: relative;
overflow: hidden;
border-radius: 0;
padding: 3px 0;
background: transparent;
}

.login-marquee-lane-secondary {
display: block;
}

.login-marquee-lane::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
border: 0;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(224, 235, 250, 0.08));
pointer-events: none;
}

.login-marquee-track {
display: flex;
width: max-content;
padding: 3px 0;
animation: loginMarquee var(--marquee-speed) linear infinite;
will-change: transform;
transform: translate3d(0, 0, 0);
}

.login-marquee-lane-secondary .login-marquee-track {
animation-name: loginMarqueeReverse;
animation-duration: 38s;
opacity: 0.96;
}

.login-marquee-group {
display: flex;
gap: 12px;
padding: 0 6px;
}

.login-marquee-chip {
border-radius: 16px;
min-height: 46px;
padding: 8px 18px 8px 9px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.9));
border: 1px solid rgba(178, 196, 228, 0.92);
box-shadow: 0 14px 30px rgba(35, 52, 95, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.96);
color: #172c4c;
font-size: 14px;
font-weight: 800;
letter-spacing: 0;
display: inline-flex;
align-items: center;
gap: 10px;
white-space: nowrap;
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.login-marquee-lane-secondary .login-marquee-chip {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 247, 255, 0.88));
}

.login-marquee-chip-icon {
width: 28px;
height: 28px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, rgba(22, 95, 196, 0.14), rgba(92, 67, 214, 0.12));
color: #285bc0;
flex-shrink: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.login-marquee-lane-secondary .login-marquee-chip-icon {
background: linear-gradient(145deg, rgba(33, 142, 194, 0.14), rgba(85, 83, 216, 0.1));
color: #2773af;
}

.login-marquee-chip-icon svg {
width: 16px;
height: 16px;
}

.login-marquee-chip-label {
display: block;
}

.login-marquee-chip:hover {
transform: translateY(-2px);
border-color: rgba(99, 130, 190, 0.76);
box-shadow: 0 18px 34px rgba(35, 52, 95, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.login-workflow {
position: relative;
z-index: 2;
background:
radial-gradient(circle at 88% 12%, rgba(99, 170, 255, 0.1), transparent 26%),
linear-gradient(180deg, #edf1ff 0%, #e7eefc 100%);
border-top: 1px solid #d4ddef;
}

.login-workflow-inner {
max-width: 1220px;
margin: 0 auto;
padding: 48px 24px 56px;
}

.login-workflow-header {
margin-bottom: 18px;
}

.login-workflow-header h2 {
color: #1f3252;
font-size: clamp(30px, 3.6vw, 42px);
letter-spacing: -0.03em;
margin-bottom: 6px;
}

.login-workflow-header p {
color: #52647f;
font-size: 16px;
}

.login-workflow-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}

.login-workflow-card {
border-radius: 12px;
border: 1px solid #cdd8ec;
background: #ffffff;
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
counter-increment: workflow-step;
}

.login-workflow-card::before {
content: counter(workflow-step);
position: absolute;
top: 12px;
right: 14px;
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(145deg, #ece8ff, #e0e8ff);
border: 1px solid #d3cbff;
color: #5628d1;
font-size: 13px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}

.login-workflow-grid {
counter-reset: workflow-step;
}

.login-workflow-icon {
width: 42px;
height: 42px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #4f2ac5;
background: #ece8ff;
border: 1px solid #d3cbff;
transition: transform 220ms ease, box-shadow 220ms ease;
}

.login-workflow-card:hover .login-workflow-icon {
transform: scale(1.08) rotate(-3deg);
box-shadow: 0 8px 20px rgba(79, 42, 197, 0.22);
}

.login-workflow-icon svg {
width: 21px;
height: 21px;
}

.login-workflow-card h3 {
color: #223756;
font-size: 19px;
letter-spacing: -0.01em;
}

.login-workflow-card p {
color: #53657f;
font-size: 14px;
line-height: 1.6;
}

.login-workflow-card {
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.login-workflow-card:hover {
transform: translateY(-3px);
border-color: #b3bfe0;
box-shadow: 0 12px 28px rgba(20, 31, 57, 0.12);
}

.login-steps-inner {
max-width: 1220px;
margin: 0 auto;
padding: 54px 24px 78px;
position: relative;
}

.login-section-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 32px;
margin-bottom: 14px;
padding: 7px 12px;
border-radius: 999px;
background: linear-gradient(145deg, #ffffff, #edf2ff);
border: 1px solid #cad5ea;
color: #4f2ac5;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
box-shadow: 0 8px 18px rgba(28, 40, 68, 0.07);
}

.login-section-kicker::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(145deg, #6638e6, #4f22cf);
box-shadow: 0 0 0 4px rgba(102, 56, 230, 0.12);
}

.login-steps-inner h2 {
text-align: left;
font-size: clamp(34px, 4.1vw, 52px);
color: #202f46;
letter-spacing: -0.03em;
margin-bottom: 30px;
}

.login-steps-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}

.login-steps-grid article {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.98));
border: 1px solid #ccd3e1;
border-radius: 20px;
padding: 22px 22px 24px;
position: relative;
overflow: hidden;
box-shadow: 0 14px 30px rgba(24, 37, 64, 0.06);
}

.login-steps-grid article::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, rgba(96, 51, 224, 0.78), rgba(61, 169, 255, 0.74));
opacity: 0.92;
transform: scaleX(.34);
transform-origin: left center;
transition: transform 260ms ease, opacity 220ms ease;
}

.login-steps-grid article:hover::before {
opacity: 1;
transform: scaleX(1);
}

.login-steps-grid article::after {
content: '';
position: absolute;
inset: auto -40px -40px auto;
width: 130px;
height: 130px;
border-radius: 50%;
background: radial-gradient(circle, rgba(111, 67, 246, 0.11), transparent 68%);
pointer-events: none;
}

.login-steps-grid h3 {
color: #223452;
font-size: 18px;
letter-spacing: -0.01em;
margin-bottom: 8px;
}

.login-steps-grid p {
color: #4f5f77;
font-size: 14px;
line-height: 1.7;
}

.login-step-card {
display: flex;
flex-direction: column;
gap: 12px;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.login-step-card:hover {
transform: translateY(-6px);
border-color: #aebad3;
box-shadow: 0 22px 36px rgba(20, 31, 57, 0.12);
}

.login-step-card:hover .login-step-icon {
transform: scale(1.08) rotate(-3deg);
box-shadow: 0 8px 20px rgba(79, 42, 197, 0.22);
}

.login-step-icon {
width: 48px;
height: 48px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #4f2ac5;
background: linear-gradient(145deg, #ece8ff, #e2edff);
border: 1px solid #d3cbff;
transition: transform 220ms ease, box-shadow 220ms ease;
box-shadow: 0 10px 22px rgba(79, 42, 197, 0.12);
}

.login-step-icon svg {
width: 22px;
height: 22px;
}

.login-interactive {
position: relative;
z-index: 2;
background:
radial-gradient(circle at 10% 18%, rgba(122, 96, 205, 0.08), transparent 24%),
linear-gradient(180deg, #f7f9fd 0%, #f1f6fd 100%);
border-top: 1px solid #dbe1ee;
}

.login-interactive-inner {
max-width: 1220px;
margin: 0 auto;
padding: 52px 24px 84px;
}

.login-interactive-header {
margin-bottom: 22px;
}

.login-interactive-header h2 {
color: #1d2f4b;
font-size: clamp(30px, 3.8vw, 46px);
letter-spacing: -0.03em;
margin-bottom: 8px;
}

.login-interactive-header p {
color: #4d5d75;
font-size: 17px;
}

.login-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 24px;
width: 100%;
padding: 8px;
border-radius: 16px;
background: rgba(247, 251, 255, 0.92);
border: 1px solid rgba(199, 214, 238, 0.9);
box-shadow: 0 16px 32px rgba(19, 41, 78, 0.1);
position: sticky;
top: calc(var(--anchor-offset, 116px) + 12px);
z-index: 8;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
justify-content: center;
}

.login-filter-btn {
min-height: 38px;
padding: 8px 14px;
flex: 1 1 0;
max-width: 190px;
border-radius: 10px;
border: 1px solid #c8d5ea;
background: linear-gradient(145deg, #ffffff, #eef3ff);
color: #29405f;
font-weight: 800;
font-size: 13px;
letter-spacing: 0.01em;
cursor: pointer;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
position: relative;
overflow: hidden;
box-shadow: 0 4px 10px rgba(30, 47, 77, 0.06);
display: inline-flex;
align-items: center;
justify-content: center;
}

.login-filter-btn::before {
content: '';
position: absolute;
left: 14px;
right: 14px;
bottom: 5px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(96, 51, 224, 0.9), rgba(61, 169, 255, 0.8));
opacity: 0;
transform: scaleX(0.55);
transition: opacity 160ms ease, transform 160ms ease;
}

.login-filter-btn::after {
display: none;
}

.login-filter-btn:hover {
border-color: #aebfe0;
background: linear-gradient(145deg, #ffffff, #eaf1ff);
color: #1d2f4c;
box-shadow: 0 6px 12px rgba(30, 47, 77, 0.08);
}

.login-filter-btn.active {
background: linear-gradient(135deg, var(--btn-purple-start) 0%, var(--btn-purple-mid) 58%, var(--btn-purple-end) 100%);
border-color: var(--btn-purple-border);
color: #ffffff;
box-shadow: 0 8px 18px rgba(56, 35, 133, 0.22);
}

.login-filter-btn.active::before {
opacity: 1;
transform: scaleX(1);
background: rgba(255, 255, 255, 0.82);
}

.login-feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-items: start;
}

.login-feature-card {
position: relative;
isolation: isolate;
overflow: hidden;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 248, 255, 0.98)) padding-box, linear-gradient(145deg, #c8d4ea, #dce6f8 58%, #bccae4) border-box;
border: 1px solid transparent;
border-radius: 24px;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
min-height: 0;
box-shadow: 0 10px 24px rgba(22, 34, 58, 0.07);
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease, opacity 180ms ease, border-color 180ms ease;
animation: none;
grid-column: span 1;
}


.login-feature-card::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 3px;
background: linear-gradient(90deg, rgba(96, 51, 224, 0.78), rgba(61, 169, 255, 0.74));
opacity: 0.86;
}

.login-feature-card::after {
content: '';
position: absolute;
inset: -1px;
background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.52) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
pointer-events: none;
z-index: 0;
}

.login-feature-card > * {
position: relative;
z-index: 1;
}

.login-feature-card:nth-child(2) { animation-delay: 70ms; }
.login-feature-card:nth-child(3) { animation-delay: 120ms; }
.login-feature-card:nth-child(4) { animation-delay: 170ms; }
.login-feature-card:nth-child(5) { animation-delay: 220ms; }
.login-feature-card:nth-child(6) { animation-delay: 270ms; }

.login-feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 38px rgba(17, 27, 49, 0.14);
}

.login-feature-card:hover::after {
transform: translateX(120%);
}

.login-feature-card.is-expanded {
grid-column: span 1;
box-shadow: 0 18px 34px rgba(17, 27, 49, 0.14);
border-color: #b5c8e6;
}

.login-feature-card.is-hidden {
opacity: 0;
transform: scale(0.98);
pointer-events: none;
display: none;
}

.login-feature-toggle {
width: 100%;
padding: 20px 20px 88px;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
appearance: none;
-webkit-appearance: none;
color: inherit;
text-align: left;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 14px;
align-items: start;
cursor: pointer;
position: relative;
overflow: hidden;
}

.login-feature-toggle:hover {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(112, 139, 199, 0.04));
}

.login-feature-toggle::after {
content: '';
position: absolute;
left: 20px;
right: 20px;
bottom: 16px;
height: 54px;
border-radius: 14px;
border: 1px solid rgba(183, 199, 229, 0.74);
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0)),
var(--feature-banner, linear-gradient(90deg, rgba(61, 169, 255, 0.12), rgba(96, 51, 224, 0.1)));
background-size: cover, cover;
background-position: center, var(--feature-banner-position, center);
background-repeat: no-repeat;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
pointer-events: none;
}

.login-feature-card.is-expanded .login-feature-toggle {
padding-bottom: 124px;
}

.login-feature-card.is-expanded .login-feature-toggle::after {
height: 88px;
bottom: 18px;
border-radius: 16px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 12px 26px rgba(28, 52, 92, 0.08);
}

.login-feature-card[data-feature] .login-feature-toggle::after {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0)),
var(--feature-banner-image, linear-gradient(90deg, rgba(61, 169, 255, 0.12), rgba(96, 51, 224, 0.1)));
}

.login-feature-card[data-feature="probes"] .login-feature-toggle::after {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0)),
url('../img/feature-banners/feature-probes.webp');
}

.login-feature-card[data-feature="alarms"] .login-feature-toggle::after {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0)),
url('../img/feature-banners/feature-alarms.webp');
}

.login-feature-card[data-feature="discovery"] .login-feature-toggle::after {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0)),
url('../img/feature-banners/feature-discovery.webp');
}

.login-feature-card[data-feature="dashboard"] .login-feature-toggle::after {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0)),
url('../img/feature-banners/feature-dashboard.webp');
}

.login-feature-card[data-feature="inventory"] .login-feature-toggle::after {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0)),
url('../img/feature-banners/feature-inventory.webp');
background-position: center, center 46%;
}

.login-feature-card[data-feature="field-updates"] .login-feature-toggle::after {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0)),
url('../img/feature-banners/feature-field-updates.webp');
}

.login-feature-card[data-feature="topology"] .login-feature-toggle::after {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02) 38%, rgba(255, 255, 255, 0)),
url('../img/feature-banners/feature-inventory.webp');
background-position: center, center 46%;
}

.login-feature-card[data-feature="permissions"] .login-feature-toggle::after {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0)),
url('../img/feature-banners/feature-permissions.webp');
}

.login-feature-card[data-feature="reports"] .login-feature-toggle::after {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0)),
url('../img/feature-banners/feature-reports.webp');
}

.login-feature-card[data-feature="iot"] .login-feature-toggle::after,
.login-feature-card[data-feature="iot-doors"] .login-feature-toggle::after {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0)),
linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(56, 189, 248, 0.16) 48%, rgba(124, 92, 255, 0.14));
}

.login-feature-card[data-feature="workorders"] .login-feature-toggle::after {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0)),
url('../img/feature-banners/feature-workorders.webp');
}

.login-feature-card[data-feature="approval"] .login-feature-toggle::after {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0)),
url('../img/feature-banners/feature-approval.webp');
}

.login-feature-card[data-feature="spare"] .login-feature-toggle::after {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04) 44%, rgba(255, 255, 255, 0)),
url('../img/feature-banners/feature-spare.webp');
}

.login-feature-card[data-feature="backup"] .login-feature-toggle::after {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0)),
url('../img/feature-banners/feature-backup.webp');
}

.login-feature-card[data-feature="restore"] .login-feature-toggle::after {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0)),
url('../img/feature-banners/feature-restore.webp');
}

.login-feature-card[data-feature="inventory"] .login-feature-toggle::after,
.login-feature-card[data-feature="topology"] .login-feature-toggle::after {
background-position: center, center 46%;
}

.login-feature-card[data-group="monitoramento"] .login-feature-toggle::after {
border-color: rgba(96, 165, 250, 0.52);
}

.login-feature-card[data-group="gestao"] .login-feature-toggle::after {
border-color: rgba(129, 140, 248, 0.48);
}

.login-feature-card[data-group="iot"] .login-feature-toggle::after {
border-color: rgba(34, 197, 94, 0.48);
}

.login-feature-card[data-group="manutencao"] .login-feature-toggle::after {
border-color: rgba(56, 189, 248, 0.48);
}

.login-feature-card[data-group="backup"] .login-feature-toggle::after {
border-color: rgba(52, 211, 153, 0.44);
}

.login-feature-icon {
width: 52px;
height: 52px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #4f2ac5;
background: linear-gradient(145deg, #efeaff, #e5ebff);
border: 1px solid #cfd5ff;
box-shadow: 0 10px 18px rgba(88, 65, 178, 0.16);
animation: loginFeatureBreathe 5.6s ease-in-out infinite;
transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

.login-feature-icon svg {
width: 23px;
height: 23px;
}

.login-feature-toggle-body {
min-width: 0;
}

.login-feature-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
min-width: 0;
}

.login-feature-title {
color: #1f3250;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.18;
display: block;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.login-feature-title::after {
content: '';
display: block;
width: 34px;
height: 3px;
margin-top: 10px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(96, 51, 224, 0.82), rgba(61, 169, 255, 0.68));
}

.login-feature-toggle-indicator {
position: relative;
width: 34px;
height: 34px;
border-radius: 12px;
border: 1px solid #d7e0f0;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(238, 244, 255, 0.94));
flex-shrink: 0;
}

.login-feature-toggle-indicator::before,
.login-feature-toggle-indicator::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 2px;
border-radius: 999px;
background: #4b5f82;
transform: translate(-50%, -50%);
transition: transform 180ms ease, opacity 180ms ease;
}

.login-feature-toggle-indicator::after {
transform: translate(-50%, -50%) rotate(90deg);
}

.login-feature-card.is-expanded .login-feature-toggle-indicator::after {
opacity: 0;
}

.login-feature-summary {
color: #4f607b;
line-height: 1.55;
font-size: 15px;
display: block;
margin-top: 10px;
max-width: 42ch;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.login-feature-details {
padding: 0 20px 20px;
display: grid;
gap: 14px;
overflow: hidden;
height: 0;
opacity: 0;
transition: height 240ms ease, opacity 180ms ease;
}

.login-feature-details[hidden] {
display: none !important;
}

.login-feature-detail-block + .login-feature-detail-block {
margin-top: 0;
}

.login-feature-detail-label {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 10px;
border-radius: 999px;
background: rgba(93, 63, 226, 0.08);
color: #5947ad;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
margin-bottom: 8px;
}

.login-feature-details p {
color: #4f607b;
line-height: 1.6;
font-size: 15px;
margin: 0;
}

.login-feature-detail-list {
margin: 0;
padding-left: 18px;
color: #4f607b;
display: grid;
gap: 8px;
font-size: 14px;
}

.login-feature-action {
width: fit-content;
margin-top: 18px;
min-height: 40px;
padding: 9px 16px;
border-radius: 12px;
border: 1px solid #acbce0;
background: linear-gradient(145deg, #ffffff, #edf3ff);
color: #213754;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.01em;
cursor: pointer;
text-decoration: none;
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: 0 4px 10px rgba(39, 55, 86, 0.08);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
}

.login-feature-action::after {
content: '↗';
font-size: 13px;
line-height: 1;
transform: translateX(0);
transition: transform var(--transition-fast);
}

.login-feature-action:hover {
border-color: var(--btn-purple-border);
background: linear-gradient(135deg, var(--btn-purple-start) 0%, var(--btn-purple-mid) 58%, var(--btn-purple-end) 100%);
color: #ffffff;
box-shadow: var(--btn-purple-shadow);
transform: translateY(-1px);
}

.login-feature-action:hover::after {
transform: translate(2px, -1px);
}

.login-feature-action:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}

.login-feature-card:hover .login-feature-icon {
transform: translateY(-2px) scale(1.06) rotate(-2deg);
box-shadow: 0 14px 22px rgba(88, 65, 178, 0.24);
}

.login-feature-card.is-expanded .login-feature-icon {
transform: translateY(-2px) scale(1.04);
box-shadow: 0 16px 26px rgba(88, 65, 178, 0.26);
}

.login-feature-action::after {
content: '->';
}

@media (max-width: 1120px) {
.login-feature-grid { grid-template-columns: 1fr; }
}

.login-help {
position: relative;
z-index: 2;
background:
radial-gradient(circle at 86% 16%, rgba(103, 160, 255, 0.08), transparent 24%),
linear-gradient(180deg, #eef2f8 0%, #e8eef7 100%);
border-top: 1px solid #d5dcea;
}

.login-help-inner,
.login-contact-inner,
.login-faq-inner {
max-width: 1220px;
margin: 0 auto;
padding: 48px 24px;
}

.login-help-header,
.login-contact-header,
.login-faq-header {
margin-bottom: 18px;
}

.login-help-header h2,
.login-contact-header h2,
.login-faq-header h2 {
color: #1f3150;
font-size: clamp(30px, 3.6vw, 42px);
letter-spacing: -0.03em;
margin-bottom: 6px;
}

.login-help-header p,
.login-contact-header p,
.login-faq-header p {
color: #50617a;
font-size: 16px;
}

.login-help-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}

.login-help-item {
background: linear-gradient(180deg, #ffffff, #f8fbff);
border: 1px solid #cad4e6;
border-radius: 18px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
box-shadow: 0 12px 24px rgba(28, 44, 74, 0.05);
}

.login-help-item:hover {
transform: translateY(-5px);
border-color: #afc0df;
box-shadow: 0 20px 34px rgba(33, 49, 80, 0.11);
}

.login-help-item-head {
color: #223552;
display: flex;
align-items: center;
gap: 10px;
}

.login-help-item h3 {
font-weight: 800;
font-size: 20px;
letter-spacing: -0.01em;
line-height: 1.25;
}

.login-help-item p {
color: #53647d;
line-height: 1.6;
font-size: 14px;
}

.login-help-action {
width: fit-content;
margin-top: auto;
min-height: 36px;
padding: 8px 14px;
border-radius: 10px;
border: 1px solid #b7c5df;
background: linear-gradient(145deg, #ffffff, #eef3ff);
color: #29405f;
text-decoration: none;
font-size: 14px;
font-weight: 800;
display: inline-flex;
align-items: center;
transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.login-help-action:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}

.login-help-action:hover {
transform: translateY(-1px);
border-color: var(--btn-purple-border);
background: linear-gradient(135deg, var(--btn-purple-start) 0%, var(--btn-purple-mid) 58%, var(--btn-purple-end) 100%);
color: #ffffff;
box-shadow: var(--btn-purple-shadow);
}

.login-help-icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #4b29c1;
background: linear-gradient(145deg, #ebe7ff, #e6f0ff);
border: 1px solid #d4ccff;
box-shadow: 0 10px 18px rgba(75, 41, 193, 0.1);
}

.login-help-icon svg {
width: 20px;
height: 20px;
display: block;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
}

.login-faq {
position: relative;
z-index: 2;
background:
radial-gradient(circle at 14% 14%, rgba(108, 82, 255, 0.07), transparent 22%),
linear-gradient(180deg, #e9eef8 0%, #e3ebf8 100%);
border-top: 1px solid #d2dbea;
}

.login-faq-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.login-faq-item {
background: linear-gradient(180deg, #ffffff, #f8fbff);
border: 1px solid #cad4e6;
border-radius: 18px;
padding: 18px;
box-shadow: 0 12px 24px rgba(28, 44, 74, 0.05);
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.login-faq-title {
color: #223552;
font-weight: 800;
font-size: 20px;
line-height: 1.25;
margin: 0;
}

.login-faq-item summary::-webkit-details-marker { display: none; }

.login-faq-item summary::after {
content: '›';
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: linear-gradient(145deg, #efeaff, #e6efff);
border: 1px solid #d6d6ff;
color: #572cd0;
font-size: 20px;
line-height: 1;
transition: transform 220ms ease, background 220ms ease;
}

.login-faq-item p {
margin-top: 10px;
color: #53647d;
line-height: 1.6;
font-size: 14px;
}

.login-faq-item:hover {
transform: translateY(-3px);
border-color: #b7c5df;
box-shadow: 0 18px 30px rgba(33, 49, 80, 0.1);
}

.login-faq-item[open] {
border-color: #afc0df;
box-shadow: 0 18px 30px rgba(33, 49, 80, 0.11);
}

.login-faq-item[open] summary::after {
content: '−';
transform: rotate(180deg);
}

.login-faq-item[open] summary::after {
content: '›';
transform: rotate(90deg);
}

.login-contact {
position: relative;
z-index: 2;
background: #e6edf7;
border-top: 1px solid #cfd9ea;
}

.login-contact-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}

.login-contact-card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.98));
border: 1px solid #c6d1e5;
border-radius: 18px;
padding: 18px;
text-decoration: none;
display: flex;
flex-direction: column;
gap: 8px;
cursor: default;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
box-shadow: 0 12px 26px rgba(14, 25, 54, 0.12);
}

.login-contact-card:hover {
transform: translateY(-5px);
border-color: #99afd0;
box-shadow: 0 22px 38px rgba(17, 27, 49, 0.16);
}

.login-feature-title,
.login-help-header h2,
.login-faq-header h2,
.login-contact-header h2,
.login-interactive-header h2,
.login-workflow-header h2 {
text-wrap: balance;
}

.login-contact-icon {
width: 44px;
height: 44px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #2f5ec5;
background: linear-gradient(145deg, #ebf2ff, #dfe8ff);
border: 1px solid #c8d8ff;
box-shadow: 0 10px 20px rgba(47, 94, 197, 0.12);
}

.login-contact-icon svg {
width: 20px;
height: 20px;
}

.login-contact-card strong {
color: #213552;
font-size: 18px;
}

.login-contact-card span {
color: #51627c;
font-size: 14px;
}

.login-footer {
position: relative;
z-index: 2;
border-top: 1px solid rgba(255, 255, 255, 0.12);
background: linear-gradient(180deg, #071f43 0%, #061835 100%);
}

.login-footer-inner {
max-width: 1220px;
margin: 0 auto;
padding: 18px 24px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}

.login-footer-social {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}

.login-social-link {
width: 36px;
height: 36px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(224, 235, 255, 0.9);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(189, 213, 255, 0.18);
box-shadow: 0 10px 20px rgba(4, 10, 24, 0.18);
transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.login-social-link svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}

.login-social-link:hover,
.login-social-link:focus-visible {
color: #ffffff;
background: rgba(89, 121, 255, 0.2);
border-color: rgba(184, 205, 255, 0.42);
transform: translateY(-1px);
outline: none;
}

.login-footer-brand {
display: flex;
align-items: center;
gap: 12px;
color: #f5f8ff;
}

.login-footer-brand .brand-icon {
width: 38px;
height: 38px;
border-radius: 11px;
background: linear-gradient(145deg, #6d4bff, #4f25d9);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
box-shadow: 0 10px 22px rgba(33, 9, 92, 0.32);
object-fit: cover;
flex: 0 0 auto;
}

.login-footer-brand strong {
display: block;
font-size: 15px;
letter-spacing: -0.01em;
}

.login-footer-brand span:last-child {
display: block;
font-size: 13px;
color: rgba(214, 228, 255, 0.72);
}

.login-footer-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 10px 18px;
color: rgba(214, 228, 255, 0.8);
font-size: 13px;
}

/* Anchor alignment for in-page navigation */
.login-page [id] {
scroll-margin-top: calc(var(--anchor-offset) + 8px);
}

.login-page.scrolled .login-top-strip {
background: rgba(55, 22, 150, 0.98);
border-bottom-color: rgba(255, 255, 255, 0.1);
}

.login-page.scrolled .login-top-strip-inner {
min-height: 38px;
font-size: 12px;
}

.login-page.scrolled .login-nav {
top: 38px;
background: linear-gradient(90deg, rgba(4, 27, 58, 0.98) 0%, rgba(7, 38, 82, 0.98) 55%, rgba(10, 47, 95, 0.98) 100%);
}

.login-page.scrolled .login-nav-inner {
min-height: 68px;
padding: 0 20px;
}

.login-page.scrolled .login-nav-brand .brand-icon {
transform: scale(0.92);
}

.login-page.scrolled .login-scroll-progress {
height: 2px;
}

.reveal {
opacity: 0;
transform: translateY(8px);
transition: opacity 220ms ease, transform 220ms ease;
}

.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}

.tilt-card {
transform-style: flat;
will-change: auto;
transition: box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.tilt-card:hover {
will-change: auto;
}

.ripple {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
transform: translate(-50%, -50%) scale(1);
background: rgba(255, 255, 255, 0.45);
animation: rippleFx 500ms ease-out forwards;
pointer-events: none;
}

/* Professional login presentation pass */
.login-page::before {
background:
radial-gradient(circle at 18% 20%, rgba(42, 175, 255, 0.14), transparent 34%),
radial-gradient(circle at 82% 30%, rgba(118, 96, 255, 0.12), transparent 38%);
animation: none;
}

.login-page::after {
animation: none;
background-position: center top;
}

.login-top-strip-inner {
min-height: 38px;
font-size: 12px;
}

.login-nav {
top: 38px;
}

.login-nav-inner {
min-height: 72px;
}

.login-nav-brand strong {
font-size: 34px;
}

.login-nav {
background: linear-gradient(90deg, rgba(3, 19, 43, 0.98) 0%, rgba(6, 34, 70, 0.98) 58%, rgba(9, 46, 89, 0.98) 100%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}

.login-shell {
position: relative;
min-height: calc(100dvh - 110px);
padding: 20px 48px 26px;
gap: 48px;
}

.login-shell::before,
.login-shell::after {
content: '';
position: absolute;
border-radius: 14px;
z-index: 0;
pointer-events: none;
}

.login-shell::before {
width: 92px;
height: 92px;
left: -16px;
top: 34px;
background: linear-gradient(145deg, rgba(41, 166, 255, 0.32), rgba(93, 122, 255, 0.16));
border: 1px solid rgba(171, 221, 255, 0.28);
box-shadow: 0 18px 36px rgba(14, 91, 168, 0.18);
animation: loginFloat 7.8s ease-in-out infinite;
}

.login-shell::after {
width: 70px;
height: 70px;
right: 40%;
bottom: 28px;
background: linear-gradient(145deg, rgba(76, 207, 255, 0.26), rgba(86, 113, 255, 0.18));
border: 1px solid rgba(171, 221, 255, 0.24);
box-shadow: 0 16px 32px rgba(10, 78, 150, 0.16);
animation: loginFloatSoft 6.6s ease-in-out infinite;
animation-delay: 0.8s;
}

.login-shell::before,
.login-shell::after {
display: block;
opacity: 0.95;
}

.login-showcase,
.login-card {
position: relative;
z-index: 1;
}

.login-showcase-tag {
background: linear-gradient(130deg, rgba(224, 246, 255, 0.18), rgba(198, 188, 255, 0.16));
border: 1px solid rgba(216, 234, 255, 0.18);
animation: none;
}

.login-showcase {
gap: 15px;
}

.login-showcase h1 {
background: linear-gradient(135deg, #ffffff 0%, #dff7ff 52%, #bfb4ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.login-showcase > p {
color: rgba(229, 240, 255, 0.84);
}

.login-showcase-line span {
background: linear-gradient(145deg, rgba(18, 64, 113, 0.44), rgba(86, 70, 170, 0.28));
border-color: rgba(210, 236, 255, 0.24);
}

.login-showcase-metric:hover,
.login-quick-link:hover {
border-color: rgba(210, 236, 255, 0.48);
background:
linear-gradient(150deg, rgba(18, 64, 113, 0.68), rgba(75, 58, 152, 0.46)),
rgba(255, 255, 255, 0.06);
}

.login-quick-link-icon {
background: linear-gradient(145deg, rgba(34, 185, 240, 0.18), rgba(123, 97, 255, 0.18));
border-color: rgba(208, 232, 255, 0.24);
color: #dff7ff;
}

.login-showcase-metrics {
gap: 8px;
}

.login-showcase-metric {
min-height: 86px;
padding: 10px;
border-radius: 12px;
gap: 5px;
}

.login-showcase-metric-icon {
width: 28px;
height: 28px;
border-radius: 9px;
}

.login-showcase-metric-icon svg {
width: 15px;
height: 15px;
}

.login-showcase-metric strong {
font-size: 20px;
line-height: 1;
letter-spacing: -0.02em;
}

.login-showcase-metric span:last-child {
font-size: 11px;
line-height: 1.25;
}

.login-cta {
background: linear-gradient(145deg, #ffffff, #ebefff);
box-shadow: 0 16px 30px rgba(13, 8, 45, 0.3);
}

.login-card {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.96));
border-color: rgba(211, 221, 240, 0.95);
box-shadow: 0 28px 58px rgba(9, 17, 42, 0.32);
animation: loginEnter 550ms ease-out;
max-width: 430px;
padding: 24px 28px;
border-radius: 14px;
gap: 5px;
}

@media (min-width: 1121px) {
.login-card {
min-height: clamp(540px, 60dvh, 570px);
justify-content: center;
gap: 8px;
}
}

.login-card::before {
background: radial-gradient(circle, rgba(48, 172, 229, 0.2), transparent 70%);
}

.login-card h3,
.login-brand h2 {
color: #142943;
}

.login-card-subtitle,
.login-brand p {
color: #65758e;
}

.login-brand {
gap: 10px;
margin-bottom: 0;
}

.login-brand .brand-icon {
width: 38px;
height: 38px;
border-radius: 10px;
}

.login-brand h2 {
font-size: 28px;
}

.login-card h3 {
font-size: 32px;
}

.login-card-subtitle {
font-size: 14px;
margin-bottom: 4px;
}

.login-card .form-control {
min-height: 44px;
padding: 10px 13px;
}

.login-actions .btn {
min-height: 46px;
}

.info-login {
font-size: 11px;
padding: 8px 10px;
}

@media (min-width: 1121px) {
.login-card .form-control {
min-height: 50px;
}

.login-actions .btn {
min-height: 52px;
}
}

.login-card-assurance {
border-top: 1px solid rgba(207, 216, 235, 0.78);
padding-top: 8px;
gap: 6px;
}

.login-assurance-item {
min-height: 44px;
padding: 7px;
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
align-items: center;
column-gap: 7px;
}

.login-assurance-icon {
width: 24px;
height: 24px;
border-radius: 8px;
}

.login-assurance-icon svg {
width: 14px;
height: 14px;
}

.login-assurance-item strong {
font-size: 11px;
line-height: 1.1;
}

.login-assurance-item span:last-child {
display: none;
}

@media (max-height: 760px) and (min-width: 1121px) {
.login-shell {
padding-top: 14px;
padding-bottom: 18px;
}
.login-card {
padding: 22px 26px;
}
.login-card-assurance {
display: none;
}
}

.login-actions .btn {
background: linear-gradient(135deg, var(--btn-purple-start) 0%, var(--btn-purple-mid) 58%, var(--btn-purple-end) 100%);
border-color: var(--btn-purple-border);
box-shadow: var(--btn-purple-shadow);
}

.login-actions .btn:hover {
background: linear-gradient(135deg, var(--btn-purple-hover-start) 0%, var(--btn-purple-hover-mid) 58%, var(--btn-purple-hover-end) 100%);
box-shadow: var(--btn-purple-shadow-hover);
}

.login-steps {
background:
radial-gradient(circle at 12% 16%, rgba(49, 139, 255, 0.08), transparent 34%),
linear-gradient(180deg, #f5f8ff 0%, #edf3fb 100%);
}

.login-interactive {
background:
radial-gradient(circle at 88% 8%, rgba(69, 176, 255, 0.09), transparent 26%),
linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
}

.login-section-lead {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.78fr);
align-items: center;
gap: 26px;
margin-bottom: 24px;
}

.login-section-lead .login-section-kicker {
margin-bottom: 14px;
}

.login-section-lead h2 {
margin-bottom: 10px;
}

.login-section-lead-copy > p,
.login-section-lead .login-workflow-header p {
max-width: 55ch;
color: #53647f;
font-size: 16px;
line-height: 1.65;
margin: 0;
}

.login-section-lead .login-workflow-header {
margin-bottom: 0;
}

.login-section-visual {
margin: 0;
overflow: hidden;
border-radius: 18px;
aspect-ratio: 16 / 9;
border: 1px solid rgba(191, 205, 230, 0.9);
background: #ffffff;
box-shadow: 0 18px 36px rgba(18, 34, 64, 0.12);
}

.login-section-visual img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.login-section-visual picture {
display: block;
width: 100%;
height: 100%;
}

@media (max-width: 980px) {
.login-section-lead {
grid-template-columns: 1fr;
gap: 16px;
}
.login-section-visual {
border-radius: 16px;
}
}

.login-workflow,
.login-help,
.login-faq {
background:
radial-gradient(circle at 86% 14%, rgba(55, 151, 242, 0.08), transparent 26%),
linear-gradient(180deg, #f2f6fd 0%, #e9f0f9 100%);
}

.login-workflow-card,
.login-steps-grid article,
.login-help-item,
.login-faq-item,
.login-contact-card {
border-color: rgba(188, 203, 229, 0.92);
box-shadow: 0 16px 32px rgba(21, 36, 67, 0.08);
}

.login-workflow-card:hover,
.login-steps-grid article:hover,
.login-help-item:hover,
.login-faq-item:hover,
.login-contact-card:hover {
border-color: rgba(82, 128, 201, 0.44);
box-shadow: 0 20px 38px rgba(18, 34, 64, 0.14);
}

.login-feature-card {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 255, 0.98)) padding-box,
linear-gradient(145deg, #c8d4ea, #dce6f8 58%, #bccae4) border-box;
border-color: transparent;
}

.login-workflow-icon,
.login-step-icon,
.login-help-icon,
.login-contact-icon {
background: linear-gradient(145deg, #e8f6ff, #eeeaff);
border-color: rgba(188, 209, 245, 0.92);
color: #2867c7;
box-shadow: 0 10px 20px rgba(47, 94, 197, 0.12);
}

.login-feature-card:nth-child(3n+1) .login-feature-icon {
background: linear-gradient(145deg, #e8f6ff, #e9edff);
color: #245fc5;
}

.login-feature-card:nth-child(3n+2) .login-feature-icon {
background: linear-gradient(145deg, #ecfff8, #e5f1ff);
color: #0f7a8b;
}

.login-feature-card:nth-child(3n+3) .login-feature-icon {
background: linear-gradient(145deg, #f4efff, #e5f1ff);
color: #5b3fc4;
}

.login-step-card:hover .login-step-icon,
.login-contact-card:hover .login-contact-icon {
animation: none;
}

.login-step-icon,
.login-help-icon,
.login-contact-icon {
animation: none;
}

.login-feature-icon,
.login-mobile-cue,
.login-scroll-guide svg {
animation: none !important;
}

.login-page .login-particles span {
animation: particleFloat 14s linear infinite !important;
}

.login-page .login-shell::before {
animation: loginSquareDriftA 8.4s ease-in-out infinite !important;
}

.login-page .login-shell::after {
animation: loginSquareDriftB 7.2s ease-in-out infinite !important;
animation-delay: 0.8s;
}

.login-page .login-card {
animation: loginEnter 550ms ease-out !important;
}

.login-page .login-feature-card:hover,
.login-page .login-filter-btn:hover,
.login-page .login-contact-card:hover,
.login-page .login-help-item:hover,
.login-page .login-step-card:hover {
transform: none !important;
}

.login-page .login-card.tilt-card {
--login-tilt-x: 0deg;
--login-tilt-y: 0deg;
transform-style: preserve-3d;
transform-origin: center center;
will-change: transform;
transition: transform 220ms ease-out, box-shadow 180ms ease;
}

.login-page .login-card.tilt-card.is-tilt-ready,
.login-page .login-card.tilt-card.is-tilting,
.login-page .login-card.tilt-card.is-resetting,
body.login-page .login-shell.is-visible .login-card.tilt-card.is-tilt-ready,
body.login-page .login-shell.is-visible .login-card.tilt-card.is-tilting,
body.login-page .login-shell.is-visible .login-card.tilt-card.is-resetting {
animation: none !important;
}

.login-page .login-card.tilt-card.is-tilt-ready {
transform: perspective(1200px) rotateX(var(--login-tilt-x)) rotateY(var(--login-tilt-y)) translateZ(0);
}

.login-page .login-card.tilt-card.is-tilting {
transition: transform 170ms cubic-bezier(0.18, 0.72, 0.26, 1), box-shadow 180ms ease;
}

.login-page .login-card.tilt-card.is-tilting {
box-shadow: 0 34px 66px rgba(20, 16, 48, 0.34);
}

.login-page .login-card.tilt-card.is-resetting {
transition: transform 620ms cubic-bezier(0.18, 0.9, 0.22, 1.18), box-shadow 320ms ease;
}

.login-page.is-scrolling .login-particles span,
.login-page.is-scrolling .login-step-icon,
.login-page.is-scrolling .login-feature-icon,
.login-page.is-scrolling .login-help-icon,
.login-page.is-scrolling .login-contact-icon,
.login-page.is-scrolling .login-filter-btn.active,
.login-page.is-scrolling .login-mobile-cue,
.login-page.is-scrolling .login-scroll-guide svg,
.login-page.is-scrolling .login-shell::before,
.login-page.is-scrolling .login-shell::after {
animation-play-state: paused !important;
}

.login-page.is-scrolling::before,
.login-page.is-scrolling::after {
animation-play-state: paused !important;
}

.login-step-card:nth-child(2) .login-step-icon,
.login-feature-card:nth-child(2) .login-feature-icon,
.login-help-item:nth-child(2) .login-help-icon,
.login-contact-card:nth-child(2) .login-contact-icon {
animation-delay: 0.6s;
}

.login-step-card:nth-child(3) .login-step-icon,
.login-feature-card:nth-child(3) .login-feature-icon,
.login-help-item:nth-child(3) .login-help-icon,
.login-contact-card:nth-child(3) .login-contact-icon {
animation-delay: 1.2s;
}

.login-contact {
background:
radial-gradient(circle at 15% 20%, rgba(56, 189, 248, 0.16), transparent 34%),
radial-gradient(circle at 80% 15%, rgba(135, 117, 255, 0.18), transparent 32%),
linear-gradient(180deg, #081f42 0%, #0d2b55 100%);
border-top: 0;
}

.login-contact-header h2,
.login-contact-header p {
color: #f4f8ff;
}

.login-contact-card {
background: rgba(255, 255, 255, 0.96);
}

/* Hero login card information */
.login-card .login-mobile-marketing {
display: block;
margin-top: 6px;
padding: 10px 11px;
border-radius: 13px;
border: 1px solid rgba(205, 217, 238, 0.92);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.96));
box-shadow: 0 10px 22px rgba(20, 40, 78, 0.08);
position: relative;
z-index: 1;
}

.login-card .login-mobile-marketing-title {
margin: 0 0 4px;
color: #28466f;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
}

.login-card .login-mobile-marketing-subtitle {
margin: 0 0 8px;
color: #617591;
font-size: 11px;
line-height: 1.35;
}

.login-card .login-mobile-marketing-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 6px;
}

.login-card .login-mobile-marketing-list li {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
align-items: center;
gap: 8px;
min-height: 32px;
padding: 7px 8px;
border-radius: 10px;
border: 1px solid rgba(214, 225, 243, 0.98);
background: #f7faff;
color: #425e85;
font-size: 11px;
line-height: 1.3;
}

.login-card .login-mobile-marketing-bullet {
width: 16px;
height: 16px;
border-radius: 999px;
background: linear-gradient(135deg, #2f63cc 0%, #5145ca 100%);
box-shadow: 0 5px 12px rgba(46, 57, 150, 0.28);
position: relative;
}

.login-card .login-mobile-marketing-bullet::after {
content: '';
position: absolute;
left: 5px;
top: 4px;
width: 6px;
height: 4px;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
transform: rotate(-45deg);
}

.login-card .login-card-assurance {
display: grid;
grid-template-columns: 1fr;
gap: 7px;
margin-top: 8px;
padding-top: 0;
border-top: 0;
}

.login-card .login-assurance-item {
min-height: 48px;
padding: 8px 10px;
border-radius: 12px;
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
grid-template-rows: auto auto;
align-items: center;
column-gap: 9px;
row-gap: 1px;
}

.login-card .login-assurance-icon {
grid-row: 1 / 3;
width: 28px;
height: 28px;
border-radius: 10px;
}

.login-card .login-assurance-item strong {
font-size: 12px;
line-height: 1.1;
}

.login-card .login-assurance-item span:last-child {
display: block;
font-size: 11px;
line-height: 1.25;
}

@media (max-height: 760px) and (min-width: 1121px) {
.login-card .login-card-assurance,
.login-card .login-mobile-marketing {
display: grid;
}
.login-card .login-mobile-marketing {
display: block;
}
}

/* Login presentation consistency refresh */
.login-steps,
.login-workflow,
.login-interactive,
.login-help,
.login-faq {
border-top: 1px solid #dbe6f4;
background:
radial-gradient(circle at 12% 8%, rgba(72, 143, 226, 0.07), transparent 30%),
linear-gradient(180deg, #f7fbff 0%, #eef5fd 100%);
}

.login-steps-inner,
.login-workflow-inner,
.login-interactive-inner,
.login-help-inner,
.login-faq-inner,
.login-contact-inner {
max-width: 1220px;
}

.login-steps-inner,
.login-workflow-inner,
.login-interactive-inner {
padding-top: 58px;
padding-bottom: 60px;
}

.login-help-inner,
.login-faq-inner,
.login-contact-inner {
padding-top: 56px;
padding-bottom: 58px;
}

.login-section-kicker,
.login-help-header .login-section-kicker,
.login-faq-header .login-section-kicker,
.login-contact-header .login-section-kicker {
border-color: rgba(185, 203, 230, 0.88);
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 10px 24px rgba(23, 42, 78, 0.06);
}

.login-steps-grid article,
.login-workflow-card,
.login-feature-card,
.login-help-item,
.login-faq-item,
.login-contact-card {
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.96));
border-color: rgba(191, 205, 229, 0.88);
box-shadow: 0 18px 38px rgba(21, 36, 67, 0.09);
}

.login-steps-grid article:hover,
.login-workflow-card:hover,
.login-help-item:hover,
.login-faq-item:hover,
.login-contact-card:hover {
border-color: rgba(90, 128, 194, 0.42);
box-shadow: 0 22px 44px rgba(18, 34, 64, 0.14);
}

.login-step-icon,
.login-workflow-icon,
.login-feature-icon,
.login-help-icon,
.login-contact-icon {
border-radius: 13px;
background: linear-gradient(145deg, #e7f4ff, #f0edff);
border-color: rgba(188, 209, 245, 0.92);
color: #2f68c2;
}

.login-contact {
background:
radial-gradient(circle at 15% 20%, rgba(56, 189, 248, 0.14), transparent 34%),
radial-gradient(circle at 80% 15%, rgba(135, 117, 255, 0.14), transparent 32%),
linear-gradient(180deg, #092344 0%, #0d2d54 100%);
}

/* Desktop marketing rebuild for the login page */
.login-desktop-marketing {
display: none;
position: relative;
z-index: 2;
}

.login-feature-stage,
.login-module-grid {
display: none;
}

@media (min-width: 901px) {
.login-top-strip,
.login-nav {
position: relative;
top: auto;
}

.login-page.scrolled .login-nav {
top: auto;
}

.login-top-strip-inner,
.login-page.scrolled .login-top-strip-inner {
min-height: 40px;
font-size: 12px;
}

.login-top-strip-inner {
gap: 34px;
}

.login-top-strip-inner span {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}

.login-top-strip-inner span::before {
content: '';
width: 7px;
height: 7px;
border-radius: 999px;
background: #34d399;
box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.16);
}

.login-top-strip-inner span:nth-child(2)::before {
background: #38bdf8;
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.16);
}

.login-top-strip-inner span:nth-child(3)::before {
background: #a78bfa;
box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.16);
}

.login-desktop-marketing {
display: block;
overflow: hidden;
background: #f4f8ff;
}

.login-legacy-mobile {
display: none !important;
}

.login-proof-band {
background:
radial-gradient(circle at 12% 12%, rgba(56, 189, 248, 0.18), transparent 32%),
radial-gradient(circle at 86% 18%, rgba(124, 92, 255, 0.2), transparent 34%),
linear-gradient(135deg, #071d3d 0%, #0a315d 48%, #30206f 100%);
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-bottom: 1px solid rgba(9, 31, 69, 0.3);
color: #eef6ff;
}

.login-proof-inner {
max-width: 1220px;
margin: 0 auto;
padding: 42px 24px;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1fr);
gap: 34px;
align-items: center;
}

.login-proof-copy h2 {
max-width: 720px;
margin: 0 0 12px;
font-size: clamp(34px, 4vw, 54px);
line-height: 1.04;
letter-spacing: -0.03em;
color: #ffffff;
}

.login-proof-copy p {
max-width: 66ch;
margin: 0;
font-size: 17px;
line-height: 1.65;
color: rgba(226, 239, 255, 0.82);
}

.login-proof-band .login-section-kicker,
.login-product-section-dark .login-section-kicker {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(190, 220, 255, 0.22);
color: #cfeaff;
box-shadow: none;
}

.login-proof-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.login-proof-grid span {
min-height: 72px;
padding: 16px 18px;
border-radius: 16px;
border: 1px solid rgba(186, 216, 255, 0.18);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
rgba(5, 20, 46, 0.24);
color: rgba(239, 247, 255, 0.92);
font-weight: 800;
line-height: 1.35;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 36px rgba(0, 0, 0, 0.14);
}

.login-product-section {
position: relative;
isolation: isolate;
overflow: hidden;
}

.login-product-section::before,
.login-product-section::after {
content: '';
position: absolute;
z-index: 0;
pointer-events: none;
}

.login-product-section::before {
width: 82px;
height: 82px;
border-radius: 18px;
border: 1px solid rgba(75, 155, 255, 0.22);
background: linear-gradient(145deg, rgba(56, 189, 248, 0.18), rgba(124, 92, 255, 0.08));
box-shadow: 0 20px 42px rgba(24, 72, 150, 0.12);
animation: loginSquareDriftA 8.4s ease-in-out infinite;
}

.login-product-section::after {
width: 12px;
height: 12px;
border-radius: 999px;
background: rgba(52, 211, 153, 0.82);
box-shadow:
0 0 0 6px rgba(52, 211, 153, 0.1),
120px 52px 0 -2px rgba(56, 189, 248, 0.72),
218px -26px 0 -3px rgba(124, 92, 255, 0.72),
302px 86px 0 -4px rgba(255, 255, 255, 0.46);
animation: particleFloat 13s linear infinite;
}

.login-product-inner {
z-index: 1;
}

.login-product-section-light {
background:
radial-gradient(circle at 11% 14%, rgba(86, 130, 255, 0.1), transparent 28%),
linear-gradient(180deg, #f8fbff 0%, #eef5fd 100%);
color: #172842;
}

.login-product-section-light::before {
right: clamp(22px, 7vw, 120px);
top: 54px;
transform: rotate(8deg);
}

.login-product-section-light::after {
left: clamp(24px, 9vw, 130px);
bottom: 78px;
}

.login-product-section-dark {
background:
radial-gradient(circle at 15% 18%, rgba(42, 177, 255, 0.14), transparent 32%),
radial-gradient(circle at 92% 20%, rgba(124, 92, 255, 0.18), transparent 34%),
linear-gradient(180deg, #06162f 0%, #081f3f 52%, #0a1530 100%);
color: #edf6ff;
}

.login-product-section-dark::before {
left: clamp(18px, 5vw, 86px);
bottom: 64px;
border-color: rgba(171, 221, 255, 0.24);
background: linear-gradient(145deg, rgba(56, 189, 248, 0.16), rgba(124, 92, 255, 0.13));
box-shadow: 0 22px 46px rgba(0, 0, 0, 0.2);
animation-name: loginSquareDriftB;
}

.login-product-section-dark::after {
right: clamp(24px, 9vw, 150px);
top: 92px;
background: rgba(96, 165, 250, 0.82);
box-shadow:
0 0 0 6px rgba(96, 165, 250, 0.12),
-126px 46px 0 -2px rgba(52, 211, 153, 0.7),
-234px -28px 0 -3px rgba(167, 139, 250, 0.78),
-316px 94px 0 -4px rgba(255, 255, 255, 0.42);
}

.login-monitoring-showcase::before {
top: 66px;
bottom: auto;
left: auto;
right: clamp(20px, 4vw, 72px);
transform: rotate(-10deg);
}

.login-evidence-section::before {
left: clamp(18px, 4vw, 68px);
top: auto;
bottom: 62px;
}

.login-mobile-proof::before {
left: auto;
right: clamp(18px, 4vw, 70px);
top: 72px;
bottom: auto;
}

.login-product-inner {
max-width: 1220px;
margin: 0 auto;
padding: 70px 24px;
position: relative;
}

.login-product-inner-split {
display: grid;
grid-template-columns: minmax(0, 0.82fr) minmax(560px, 1.18fr);
gap: 42px;
align-items: center;
}

.login-product-inner-reverse {
grid-template-columns: minmax(560px, 1.12fr) minmax(0, 0.88fr);
}

.login-product-copy h2,
.login-product-head h2 {
margin: 0 0 12px;
font-size: clamp(34px, 4.2vw, 56px);
line-height: 1.02;
letter-spacing: -0.035em;
color: #172842;
}

.login-product-section-dark .login-product-copy h2,
.login-product-section-dark .login-product-head h2 {
color: #ffffff;
background: linear-gradient(135deg, #ffffff 0%, #dff7ff 58%, #bfb4ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.login-product-copy > p,
.login-product-head > p {
margin: 0;
max-width: 60ch;
font-size: 16px;
line-height: 1.72;
color: #53657f;
}

.login-product-section-dark .login-product-copy > p,
.login-product-section-dark .login-product-head > p {
color: rgba(221, 235, 255, 0.82);
}

.login-product-frame {
position: relative;
margin: 0;
overflow: hidden;
border-radius: 20px;
border: 1px solid rgba(166, 190, 225, 0.74);
background: #081a36;
box-shadow: 0 28px 60px rgba(14, 30, 62, 0.18);
isolation: isolate;
}

.login-product-section-dark .login-product-frame {
border-color: rgba(112, 164, 226, 0.34);
box-shadow: 0 32px 74px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(116, 175, 255, 0.08);
}

.login-product-frame::before {
content: '';
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 28%),
linear-gradient(0deg, rgba(4, 13, 30, 0.12), transparent 38%);
pointer-events: none;
}

.login-product-frame::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -32%;
width: 26%;
z-index: 3;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transform: skewX(-14deg);
animation: loginFrameSheen 7.8s ease-in-out infinite;
pointer-events: none;
}

.login-product-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
image-rendering: auto;
backface-visibility: hidden;
}

.login-product-frame-wide,
.login-product-frame-monitor {
aspect-ratio: 1774 / 887;
}

.login-frame-tilt-right {
transform: perspective(1200px) rotateY(-7deg) rotateX(2deg);
transform-origin: center;
box-shadow: 0 34px 80px rgba(16, 36, 74, 0.24);
}

.login-visual-stack {
position: relative;
min-height: 500px;
perspective: 1200px;
}

.login-stack-main {
position: absolute;
inset: 42px 0 auto 0;
z-index: 2;
transform: rotateY(7deg) rotateX(2deg);
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.32);
}

.login-stack-float {
position: absolute;
right: -20px;
bottom: 8px;
z-index: 3;
width: 48%;
aspect-ratio: 1774 / 887;
transform: rotateY(-12deg) rotateX(5deg) translateZ(70px);
box-shadow: 0 28px 66px rgba(0, 0, 0, 0.42);
}

.login-stack-float-dark {
border-color: rgba(70, 144, 230, 0.5);
}

.login-benefit-list {
display: grid;
gap: 12px;
margin-top: 24px;
}

.login-benefit-list article {
padding: 15px 16px;
border-radius: 16px;
border: 1px solid rgba(183, 202, 232, 0.86);
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 14px 30px rgba(20, 37, 68, 0.07);
}

.login-benefit-list article strong {
display: block;
margin-bottom: 5px;
font-size: 15px;
color: #1d3556;
}

.login-benefit-list article span {
display: block;
font-size: 14px;
line-height: 1.5;
color: #53657f;
}

.login-benefit-list-dark article {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(184, 215, 255, 0.18);
box-shadow: none;
}

.login-benefit-list-dark article strong {
color: #f4f9ff;
}

.login-benefit-list-dark article span {
color: rgba(220, 235, 255, 0.78);
}

.login-signal-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-top: 24px;
}

.login-signal-grid article {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 4px 14px;
padding: 15px;
border-radius: 16px;
border: 1px solid rgba(156, 202, 255, 0.18);
background:
linear-gradient(145deg, rgba(12, 47, 88, 0.64), rgba(54, 42, 112, 0.24)),
rgba(255, 255, 255, 0.04);
}

.login-signal-grid article span {
grid-row: 1 / 3;
width: 42px;
height: 42px;
border-radius: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, rgba(56, 189, 248, 0.18), rgba(124, 92, 255, 0.2));
border: 1px solid rgba(190, 223, 255, 0.18);
color: #bfeaff;
font-size: 12px;
font-weight: 900;
}

.login-signal-grid article strong {
font-size: 16px;
color: #ffffff;
}

.login-signal-grid article p {
margin: 0;
color: rgba(220, 235, 255, 0.75);
font-size: 13px;
line-height: 1.55;
}

.login-iot-showcase {
background:
radial-gradient(circle at 16% 18%, rgba(34, 197, 94, 0.13), transparent 30%),
radial-gradient(circle at 84% 14%, rgba(124, 92, 255, 0.18), transparent 34%),
linear-gradient(180deg, #06162f 0%, #071d3b 54%, #061226 100%);
color: #eef6ff;
}

.login-iot-showcase::before {
left: clamp(18px, 5vw, 86px);
right: auto;
top: 74px;
bottom: auto;
border-color: rgba(171, 221, 255, 0.2);
background: linear-gradient(145deg, rgba(56, 189, 248, 0.13), rgba(124, 92, 255, 0.16));
box-shadow: 0 22px 46px rgba(0, 0, 0, 0.2);
}

.login-iot-showcase::after {
right: clamp(24px, 8vw, 142px);
left: auto;
top: auto;
bottom: 82px;
background: rgba(52, 211, 153, 0.8);
box-shadow:
0 0 0 6px rgba(52, 211, 153, 0.1),
-116px 48px 0 -2px rgba(56, 189, 248, 0.66),
-226px -30px 0 -3px rgba(167, 139, 250, 0.7);
}

.login-iot-showcase .login-product-inner-split {
grid-template-columns: minmax(0, 0.76fr) minmax(620px, 1.24fr);
gap: 52px;
}

.login-iot-points {
max-width: 520px;
gap: 10px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.login-iot-points article {
min-height: 0;
padding: 15px;
border-radius: 14px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
rgba(5, 20, 46, 0.38);
border-color: rgba(184, 215, 255, 0.16);
}

.login-iot-points article strong {
margin-bottom: 6px;
}

.login-iot-points article span {
font-size: 13px;
line-height: 1.45;
}

.login-iot-visual {
position: relative;
min-height: 520px;
perspective: 1200px;
display: grid;
align-items: center;
}

.login-iot-visual::before {
content: '';
position: absolute;
inset: 9% 3% 8% 6%;
border-radius: 34px;
background:
radial-gradient(circle at 76% 22%, rgba(124, 92, 255, 0.2), transparent 38%),
radial-gradient(circle at 34% 78%, rgba(56, 189, 248, 0.14), transparent 36%),
rgba(255, 255, 255, 0.035);
border: 1px solid rgba(148, 189, 255, 0.12);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.login-iot-shot {
position: relative;
margin: 0;
overflow: hidden;
border: 1px solid rgba(142, 173, 220, 0.62);
background: #07182f;
box-shadow: 0 30px 72px rgba(0, 0, 0, 0.34);
isolation: isolate;
}

.login-iot-shot::before {
content: '';
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 28%),
linear-gradient(0deg, rgba(4, 13, 30, 0.1), transparent 42%);
pointer-events: none;
}

.login-iot-shot img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
image-rendering: auto;
backface-visibility: hidden;
}

.login-iot-desktop-shot {
width: min(100%, 760px);
aspect-ratio: 1719 / 915;
border-radius: 20px;
justify-self: end;
transform: perspective(1200px) rotateY(-3deg) rotateX(1.2deg);
transform-origin: center;
}

.login-iot-mobile-shot {
position: absolute;
right: 8px;
bottom: 22px;
z-index: 4;
width: clamp(150px, 17vw, 218px);
aspect-ratio: 853 / 1844;
border: 0;
border-radius: 0;
overflow: visible;
background: transparent;
box-shadow: none;
transform: rotateZ(2deg) translateZ(90px);
}

.login-iot-mobile-shot::before {
display: none;
}

.login-iot-mobile-shot img {
object-fit: contain;
filter:
drop-shadow(0 24px 38px rgba(0, 0, 0, 0.42))
drop-shadow(0 0 18px rgba(99, 102, 241, 0.18));
}

.login-product-head {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.72fr);
gap: 34px;
align-items: end;
margin-bottom: 28px;
}

.login-showcase-mosaic {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}

.login-showcase-mosaic .login-product-frame {
aspect-ratio: 1774 / 887;
}

.login-evidence-rail {
margin-top: 22px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}

.login-evidence-rail article {
position: relative;
min-height: 112px;
padding: 16px;
border-radius: 18px;
border: 1px solid rgba(164, 189, 225, 0.84);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(235, 244, 255, 0.88)),
radial-gradient(circle at 100% 0%, rgba(91, 127, 255, 0.12), transparent 42%);
box-shadow: 0 18px 40px rgba(23, 42, 78, 0.1);
overflow: hidden;
}

.login-evidence-rail article::before {
content: '';
position: absolute;
left: 16px;
top: 14px;
width: 34px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, #22c55e, #38bdf8, #7c5cff);
}

.login-evidence-rail span {
display: block;
margin-top: 18px;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #4c63d8;
}

.login-evidence-rail strong {
display: block;
margin-top: 7px;
font-size: 14px;
line-height: 1.48;
color: #1d3556;
}

.login-mobile-proof-inner {
display: grid;
grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1fr);
gap: 46px;
align-items: center;
}

.login-phone-gallery {
position: relative;
min-height: 650px;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
perspective: 1200px;
}

.login-phone-gallery::before {
content: '';
position: absolute;
width: 540px;
height: 540px;
border-radius: 999px;
background:
radial-gradient(circle, rgba(56, 189, 248, 0.16), rgba(124, 92, 255, 0.1) 42%, transparent 68%);
filter: blur(10px);
opacity: 0.8;
}

.login-phone-gallery figure {
position: relative;
z-index: 1;
margin: 0;
width: 238px;
border-radius: 0;
overflow: visible;
background: transparent;
box-shadow: none;
animation: loginPhoneFloat 7s ease-in-out infinite;
}

.login-phone-gallery figure:nth-child(2) {
z-index: 3;
width: 268px;
margin-left: -58px;
margin-right: -58px;
margin-top: 34px;
transform: translateZ(90px);
animation-delay: 0.9s;
}

.login-phone-gallery figure:nth-child(3) {
z-index: 1;
width: 222px;
margin-top: 108px;
transform: rotateY(-18deg) rotateZ(2deg);
animation-delay: 1.5s;
}

.login-phone-gallery figure:nth-child(1) {
transform: rotateY(18deg) rotateZ(-2deg);
}

.login-phone-gallery img {
display: block;
width: 100%;
height: auto;
filter:
drop-shadow(0 26px 36px rgba(0, 0, 0, 0.38))
drop-shadow(0 0 28px rgba(56, 189, 248, 0.08));
}

.login-interactive {
background:
radial-gradient(circle at 12% 18%, rgba(56, 189, 248, 0.16), transparent 32%),
radial-gradient(circle at 84% 18%, rgba(124, 92, 255, 0.2), transparent 34%),
linear-gradient(180deg, #071a36 0%, #091f42 54%, #06142b 100%);
border-top: 0;
color: #eef6ff;
overflow: hidden;
}

.login-interactive::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 86px 86px;
mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
pointer-events: none;
}

.login-interactive::after {
content: '';
position: absolute;
right: clamp(18px, 7vw, 110px);
top: 92px;
width: 86px;
height: 86px;
border-radius: 20px;
border: 1px solid rgba(171, 221, 255, 0.22);
background:
linear-gradient(145deg, rgba(56, 189, 248, 0.16), rgba(124, 92, 255, 0.18));
box-shadow:
0 22px 48px rgba(0, 0, 0, 0.18),
-190px 70px 0 -38px rgba(52, 211, 153, 0.34),
-94px 210px 0 -42px rgba(96, 165, 250, 0.36);
animation: loginSquareDriftA 8.2s ease-in-out infinite;
pointer-events: none;
}

.login-interactive-inner {
position: relative;
z-index: 1;
padding-top: 74px;
padding-bottom: 78px;
}

.login-interactive-header {
max-width: 780px;
}

.login-interactive-header h2 {
color: #ffffff;
font-size: clamp(36px, 4.2vw, 58px);
line-height: 1.03;
background: linear-gradient(135deg, #ffffff 0%, #dff7ff 58%, #bfb4ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.login-interactive-header p {
max-width: 68ch;
color: rgba(220, 235, 255, 0.78);
}

.login-interactive .login-filters,
.login-interactive .login-feature-grid {
display: none;
}

.login-feature-stage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.78fr) minmax(600px, 1.22fr);
gap: 44px;
align-items: center;
min-height: 560px;
margin-top: 30px;
padding: 22px;
border-radius: 28px;
border: 1px solid rgba(160, 205, 255, 0.16);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
rgba(2, 12, 32, 0.34);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 34px 80px rgba(0, 0, 0, 0.24);
overflow: hidden;
}

.login-feature-stage::before {
content: '';
position: absolute;
width: 360px;
height: 360px;
right: 14%;
top: 11%;
border-radius: 999px;
background: radial-gradient(circle, rgba(56, 189, 248, 0.22), rgba(124, 92, 255, 0.12) 42%, transparent 68%);
filter: blur(10px);
}

.login-feature-stage-copy {
position: relative;
z-index: 2;
padding-left: 10px;
}

.login-feature-stage-copy h3 {
margin: 0 0 12px;
font-size: clamp(28px, 3.2vw, 44px);
line-height: 1.08;
letter-spacing: -0.03em;
color: #ffffff;
}

.login-feature-stage-copy p {
margin: 0;
max-width: 52ch;
font-size: 15px;
line-height: 1.72;
color: rgba(219, 234, 254, 0.78);
}

.login-feature-stage-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}

.login-stage-cta {
min-height: 42px;
padding: 10px 16px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 13px;
font-weight: 900;
color: #ffffff;
background: linear-gradient(135deg, #2563eb 0%, #6537df 100%);
border: 1px solid rgba(143, 177, 255, 0.46);
box-shadow: 0 16px 34px rgba(60, 80, 210, 0.26);
}

.login-stage-cta-ghost {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(200, 222, 255, 0.2);
box-shadow: none;
}

.login-module-orbit {
position: relative;
min-height: 500px;
perspective: 1300px;
z-index: 2;
}

.login-orbit-screen {
position: absolute;
margin: 0;
overflow: hidden;
border-radius: 20px;
border: 1px solid rgba(166, 210, 255, 0.24);
background: #06152e;
box-shadow: 0 34px 80px rgba(0, 0, 0, 0.36);
}

.login-orbit-screen img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
image-rendering: auto;
backface-visibility: hidden;
}

.login-orbit-screen-main {
inset: 42px 14px auto 34px;
aspect-ratio: 1774 / 887;
z-index: 2;
transform: rotateY(-8deg) rotateX(4deg);
}

.login-orbit-screen-left {
left: -20px;
bottom: 42px;
width: 48%;
aspect-ratio: 1774 / 887;
z-index: 3;
transform: rotateY(14deg) rotateX(3deg) translateZ(80px);
}

.login-orbit-phone {
position: absolute;
right: -8px;
bottom: -34px;
z-index: 4;
width: 178px;
margin: 0;
transform: rotateY(-20deg) rotateZ(4deg) translateZ(110px);
}

.login-orbit-phone img {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 30px 48px rgba(0, 0, 0, 0.5));
}

.login-module-chip {
position: absolute;
z-index: 5;
min-height: 38px;
padding: 9px 13px;
border-radius: 999px;
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(178, 206, 242, 0.78);
color: #172842;
font-size: 12px;
font-weight: 900;
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

.login-module-chip-monitor {
right: 90px;
top: 18px;
}

.login-module-chip-report {
left: 18px;
bottom: 24px;
}

.login-module-chip-iot {
right: 34px;
bottom: 96px;
background: linear-gradient(145deg, rgba(229, 255, 244, 0.94), rgba(221, 247, 255, 0.92));
border-color: rgba(85, 218, 153, 0.56);
color: #07543b;
}

.login-module-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
}

.login-module-grid article {
position: relative;
min-height: 142px;
padding: 18px;
border-radius: 20px;
border: 1px solid rgba(172, 213, 255, 0.16);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
rgba(5, 20, 46, 0.42);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 50px rgba(0, 0, 0, 0.18);
overflow: hidden;
}

.login-module-grid article::before {
content: '';
position: absolute;
left: 18px;
top: 18px;
width: 34px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, #34d399, #38bdf8, #8b5cf6);
}

.login-module-grid strong {
display: block;
margin: 18px 0 8px;
font-size: 16px;
color: #ffffff;
}

.login-module-grid span {
display: block;
font-size: 13px;
line-height: 1.58;
color: rgba(220, 235, 255, 0.76);
}

.login-help {
background:
radial-gradient(circle at 15% 15%, rgba(124, 92, 255, 0.1), transparent 30%),
linear-gradient(180deg, #f8fbff 0%, #edf4fd 100%);
}

.login-help-item {
border-radius: 20px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.96));
border-color: rgba(188, 205, 232, 0.82);
box-shadow: 0 22px 52px rgba(24, 44, 80, 0.12);
}

.login-faq {
background:
radial-gradient(circle at 86% 12%, rgba(56, 189, 248, 0.12), transparent 32%),
linear-gradient(180deg, #081c39 0%, #0b274d 100%);
border-top: 0;
}

.login-faq-header h2,
.login-faq-header p {
color: #ffffff;
}

.login-faq-item {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(190, 220, 255, 0.18);
box-shadow: none;
}

.login-faq-title {
color: #ffffff;
}

.login-faq-item p {
color: rgba(220, 235, 255, 0.78);
}

.login-contact {
margin-top: -1px;
background:
radial-gradient(circle at 12% 20%, rgba(56, 189, 248, 0.18), transparent 34%),
radial-gradient(circle at 86% 0%, rgba(124, 92, 255, 0.2), transparent 36%),
linear-gradient(180deg, #071b38 0%, #0a2a52 62%, #071a36 100%);
border-top: 0 !important;
color: #eef6ff;
overflow: hidden;
}

.login-contact::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(180deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 88px 88px;
mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
pointer-events: none;
}

.login-contact::after {
content: '';
position: absolute;
right: clamp(18px, 8vw, 130px);
bottom: 56px;
width: 72px;
height: 72px;
border-radius: 18px;
border: 1px solid rgba(171, 221, 255, 0.18);
background: linear-gradient(145deg, rgba(56, 189, 248, 0.12), rgba(124, 92, 255, 0.18));
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.18),
-184px -38px 0 -31px rgba(52, 211, 153, 0.28),
-308px 36px 0 -36px rgba(96, 165, 250, 0.26);
animation: loginSquareDriftB 7.4s ease-in-out infinite;
pointer-events: none;
}

.login-contact-inner {
position: relative;
z-index: 1;
}

.login-contact-header {
max-width: 760px;
}

.login-contact-header .login-section-kicker {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(190, 220, 255, 0.22);
color: #cfeaff;
box-shadow: none;
}

.login-contact-header h2 {
margin-bottom: 10px;
font-size: clamp(34px, 4vw, 54px);
line-height: 1.04;
letter-spacing: -0.035em;
color: #ffffff;
}

.login-contact-header p {
max-width: 70ch;
color: rgba(221, 235, 255, 0.8);
font-size: 16px;
line-height: 1.68;
}

.login-contact-grid {
margin-top: 24px;
gap: 14px;
}

.login-contact-card {
min-height: 172px;
padding: 20px;
border-radius: 22px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
rgba(5, 20, 46, 0.42);
border: 1px solid rgba(172, 213, 255, 0.18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 50px rgba(0, 0, 0, 0.18);
}

.login-contact-card:hover {
border-color: rgba(97, 195, 255, 0.34);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 62px rgba(0, 0, 0, 0.26);
}

.login-contact-icon {
color: #bdeaff;
background: linear-gradient(145deg, rgba(56, 189, 248, 0.14), rgba(124, 92, 255, 0.18));
border-color: rgba(184, 215, 255, 0.2);
box-shadow: none;
}

.login-contact-card strong {
color: #ffffff;
}

.login-contact-card span {
color: rgba(220, 235, 255, 0.74);
line-height: 1.56;
}

body.login-page .login-scroll-scene {
scroll-snap-align: start;
scroll-snap-stop: normal;
}

body.login-page .login-product-section,
body.login-page .login-interactive {
min-height: 100svh;
}

body.login-page .login-contact {
min-height: auto;
}

body.login-page .login-product-section {
display: flex;
align-items: center;
}

body.login-page .login-product-section > .login-product-inner {
width: 100%;
}

.login-scroll-scene {
--scene-focus: 0;
--scene-progress: 0;
--scene-opacity: 1;
--scene-copy-y: 0px;
--scene-visual-y: 0px;
--scene-visual-scale: 1;
--scene-soft-scale: 1;
--scene-float-x: 0px;
--scene-float-x-reverse: 0px;
--scene-float-y: 0px;
--scene-glow-size: 0px;
--scene-brightness: 1;
--scene-saturate: 1;
}

.login-scroll-scene :is(
.login-proof-copy,
.login-proof-grid,
.login-product-copy,
.login-product-head,
.login-interactive-header,
.login-feature-stage-copy,
.login-help-header,
.login-faq-header,
.login-contact-header
) {
opacity: var(--scene-opacity);
transform: translate3d(0, var(--scene-copy-y), 0);
transition:
opacity 520ms ease,
transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
}

.login-scroll-scene :is(
.login-product-frame,
.login-visual-stack,
.login-showcase-mosaic,
.login-phone-gallery,
.login-iot-visual,
.login-module-orbit
) {
transition:
transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
filter 680ms ease,
opacity 520ms ease;
will-change: transform, opacity, filter;
}

.login-scroll-scene .login-product-frame {
filter: brightness(var(--scene-brightness)) saturate(var(--scene-saturate));
}

.login-scroll-scene .login-frame-tilt-right {
transform:
perspective(1200px)
rotateY(-9deg)
rotateX(2.8deg)
translate3d(0, var(--scene-visual-y), 0)
scale(var(--scene-visual-scale));
}

.login-monitoring-showcase .login-visual-stack,
.login-evidence-section .login-showcase-mosaic,
.login-mobile-proof .login-phone-gallery,
.login-iot-showcase .login-iot-visual,
.login-interactive .login-module-orbit {
opacity: var(--scene-opacity);
transform: translate3d(0, var(--scene-visual-y), 0) scale(var(--scene-visual-scale));
}

.login-scroll-scene .login-stack-main {
transform:
rotateY(9deg)
rotateX(2.8deg)
translate3d(0, var(--scene-visual-y), 0)
scale(var(--scene-soft-scale));
}

.login-scroll-scene .login-stack-float {
transform:
rotateY(-15deg)
rotateX(5deg)
translate3d(var(--scene-float-x), var(--scene-float-y), 96px)
scale(var(--scene-soft-scale));
}

.login-scroll-scene .login-orbit-screen-main {
transform:
rotateY(-11deg)
rotateX(4deg)
translate3d(0, var(--scene-visual-y), 0)
scale(var(--scene-soft-scale));
}

.login-scroll-scene .login-orbit-screen-left {
transform:
rotateY(17deg)
rotateX(3.5deg)
translate3d(var(--scene-float-x), var(--scene-float-y), 108px)
scale(var(--scene-soft-scale));
}

.login-scroll-scene .login-orbit-phone {
transform:
rotateY(-26deg)
rotateZ(5deg)
translate3d(var(--scene-float-x-reverse), var(--scene-float-y), 150px)
scale(var(--scene-visual-scale));
}

.login-scroll-scene :is(
.login-proof-grid span,
.login-benefit-list article,
.login-signal-grid article,
.login-evidence-rail article,
.login-module-grid article,
.login-help-item,
.login-faq-item,
.login-contact-card
) {
transition:
transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 260ms ease,
box-shadow 420ms ease,
filter 420ms ease,
background 260ms ease;
}

.login-scroll-scene.is-scene-active :is(
.login-proof-grid span,
.login-benefit-list article,
.login-signal-grid article,
.login-evidence-rail article,
.login-module-grid article,
.login-help-item,
.login-faq-item,
.login-contact-card
) {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 26px 64px rgba(10, 30, 72, 0.2),
0 0 var(--scene-glow-size) rgba(56, 189, 248, 0.26);
}

.login-scroll-scene.is-scene-centered :is(
.login-product-frame,
.login-phone-gallery img,
.login-iot-shot img,
.login-orbit-phone img
) {
filter:
brightness(var(--scene-brightness))
saturate(var(--scene-saturate))
drop-shadow(0 34px 58px rgba(0, 0, 0, 0.34))
drop-shadow(0 0 var(--scene-glow-size) rgba(72, 190, 255, 0.24));
}

.login-scroll-scene.is-scene-centered .login-evidence-rail article::before,
.login-scroll-scene.is-scene-centered .login-module-grid article::before {
box-shadow: 0 0 18px rgba(56, 189, 248, 0.54);
}
}

@media (min-width: 901px) and (max-width: 1120px) {
body.login-page .login-iot-showcase .login-product-inner-split {
grid-template-columns: 1fr;
gap: 30px;
}

body.login-page .login-iot-showcase .login-product-copy {
max-width: 720px;
}

body.login-page .login-iot-points {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: none;
}

body.login-page .login-iot-visual {
min-height: 480px;
}

body.login-page .login-iot-desktop-shot {
width: 82%;
justify-self: start;
}

body.login-page .login-iot-mobile-shot {
right: 4%;
bottom: 8px;
width: clamp(150px, 24vw, 210px);
}
}

@media (max-width: 900px) {
.login-desktop-marketing {
display: none !important;
}

.login-scroll-guide {
display: none !important;
}
}

@keyframes loginFrameSheen {
0%, 18% { transform: translateX(0) skewX(-14deg); opacity: 0; }
28% { opacity: 1; }
48%, 100% { transform: translateX(640%) skewX(-14deg); opacity: 0; }
}

@keyframes loginPhoneFloat {
0%, 100% { transform: translateY(0) rotate(-1.2deg); }
50% { transform: translateY(-12px) rotate(1.2deg); }
}

@keyframes loginMarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}

@keyframes loginMarqueeReverse {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}

@keyframes marqueeDotPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(102, 56, 230, 0.14); }
50% { box-shadow: 0 0 0 5px rgba(102, 56, 230, 0.28), 0 0 12px rgba(102, 56, 230, 0.2); }
}

@keyframes loginTagGlow {
0%, 100% { border-color: rgba(255, 255, 255, 0.22); box-shadow: none; }
50% { border-color: rgba(167, 139, 250, 0.5); box-shadow: 0 0 18px rgba(167, 139, 250, 0.15); }
}

@keyframes loginChipGlow {
0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); }
}

@keyframes loginFilterPulse {
0%, 100% { box-shadow: 0 12px 26px rgba(76, 42, 178, 0.34); }
50% { box-shadow: 0 14px 28px rgba(76, 42, 178, 0.48); }
}

@keyframes loginHeroShift {
0% { opacity: 1; }
100% { opacity: 0.96; }
}

@keyframes loginOrbsDrift {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(1%, 1.5%, 0); }
}

@keyframes loginFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}

@keyframes loginFloatSoft {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}

@keyframes loginFeatureBreathe {
0%, 100% { box-shadow: 0 10px 18px rgba(88, 65, 178, 0.16); }
50% { box-shadow: 0 14px 22px rgba(88, 65, 178, 0.24); }
}

@keyframes loginIconPulse {
0% { transform: scale(1); }
35% { transform: scale(1.1); }
100% { transform: scale(1); }
}

@keyframes loginCardRise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes loginCardFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}

@keyframes loginSquareDriftA {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
50% { transform: translate3d(0, -10px, 0) rotate(5deg); }
}

@keyframes loginSquareDriftB {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
50% { transform: translate3d(0, 8px, 0) rotate(-4deg); }
}

@keyframes loginCueBounce {
0%, 100% { transform: translate(-50%, 0); }
50% { transform: translate(-50%, 6px); }
}

@keyframes loginScrollGuidePulse {
0%, 100% { transform: translateY(0); box-shadow: 0 0 0 rgba(56, 189, 248, 0); }
50% { transform: translateY(4px); box-shadow: 0 0 18px rgba(56, 189, 248, 0.38); }
}

@keyframes loginScrollGuidePulseTop {
0%, 100% { transform: rotate(180deg) translateY(0); box-shadow: 0 0 0 rgba(56, 189, 248, 0); }
50% { transform: rotate(180deg) translateY(4px); box-shadow: 0 0 18px rgba(56, 189, 248, 0.38); }
}

@keyframes particleFloat {
0% { transform: translateY(0) scale(1); opacity: 0.12; }
20% { opacity: 0.48; }
100% { transform: translateY(-180px) scale(0.72); opacity: 0; }
}

@keyframes rippleFx {
from { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
to { opacity: 0; transform: translate(-50%, -50%) scale(24); }
}

@media (prefers-reduced-motion: reduce) {
.login-card { animation: none !important; }
.login-cta { transition: none !important; }
.login-page::before,
.login-page::after,
.login-bg-grid,
.login-particles,
.login-filter-btn,
.login-feature-card,
.login-mobile-cue,
.login-scroll-guide,
.login-step-icon,
.login-feature-icon,
.login-help-icon,
.login-contact-icon,
.login-shell::before,
.login-shell::after {
animation: none !important;
}
.login-marquee-track {
animation: none !important;
transform: none !important;
}
.login-scroll-guide {
display: none !important;
}
.reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}

/* ============================================
TOAST NOTIFICATIONS
============================================ */
.toast-container {
position: fixed;
top: calc(var(--topbar-height) + 16px);
right: 20px;
z-index: 10001;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
}

.toast {
background: #ffffff;
border-radius: var(--radius);
padding: 14px 16px;
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.04);
border: 1px solid rgba(133, 154, 184, 0.42);
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 300px;
max-width: 420px;
pointer-events: all;
animation: toastIn 0.3s ease-out;
position: relative;
overflow: hidden;
backdrop-filter: none;
}

.toast::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
}

.toast-success::before { background: var(--success); }
.toast-error::before { background: var(--danger); }
.toast-warning::before { background: var(--warning); }
.toast-info::before { background: var(--info); }

.toast-success { background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 72%); border-color: rgba(34, 197, 94, 0.42); }
.toast-error { background: linear-gradient(180deg, #fff1f2 0%, #ffffff 72%); border-color: rgba(239, 68, 68, 0.42); }
.toast-warning { background: linear-gradient(180deg, #fffbeb 0%, #ffffff 72%); border-color: rgba(245, 158, 11, 0.48); }
.toast-info { background: linear-gradient(180deg, #eff6ff 0%, #ffffff 72%); border-color: rgba(59, 130, 246, 0.40); }

.toast-icon {
width: 28px;
height: 28px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 28px;
margin-top: 1px;
}
.toast-icon svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.toast-success .toast-icon { background: rgba(34, 197, 94, 0.14); color: var(--success); }
.toast-error .toast-icon { background: rgba(239, 68, 68, 0.14); color: var(--danger); }
.toast-warning .toast-icon { background: rgba(245, 158, 11, 0.16); color: var(--warning); }
.toast-info .toast-icon { background: rgba(59, 130, 246, 0.14); color: var(--info); }
.toast-body { flex: 1; }
.toast-title { font-weight: 800; font-size: 14px; color: var(--text); margin-bottom: 3px; line-height: 1.2; }
.toast-message { font-size: 13px; color: var(--muted); line-height: 1.42; }

.toast-close {
background: rgba(100, 116, 139, 0.10);
border: 1px solid rgba(100, 116, 139, 0.16);
color: var(--muted-light);
cursor: pointer;
width: 26px;
height: 26px;
padding: 0;
font-size: 18px;
line-height: 1;
transition: var(--transition);
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 26px;
}
.toast-close:hover { color: var(--text); background: var(--bg-alt); }

.toast.toast-exit { animation: toastOut 0.3s ease-in forwards; }

@keyframes toastIn {
from { opacity: 0; transform: translateX(100%); }
to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(100%); }
}

/* ============================================
ANIMATIONS
============================================ */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}

.animate-in { animation: fadeInUp 0.4s ease-out; }

.stagger-in > * {
animation: fadeInUp 0.4s ease-out both;
animation-delay: 0s !important;
}

/* ============================================
UTILITIES
============================================ */
.text-muted { color: var(--muted); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.font-bold { font-weight: 700; }

.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

.divider {
height: 1px;
background: var(--border-light);
margin: 24px 0;
}

/* Compat: old backup classes */
.backup-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 40px;
}

.action-card {
background: var(--surface);
padding: 28px;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
text-align: center;
border: 1px solid var(--border-light);
}

.action-card h3 { margin-bottom: 12px; color: var(--text); }
.action-card p { color: var(--muted); margin-bottom: 20px; }

/* ============================================
DARK MODE
============================================ */
html.dark {
--bg: #0c1222;
--bg-alt: #131c31;
--surface: #172033;
--card-bg: #172033;
--surface-2: #1a2540;
--surface-3: #243352;
--text: #e8ecf4;
--text-secondary: #d3deef;
--muted: #aebad0;
--muted-light: #c7d2e3;
--border: #243352;
--border-light: #1a2540;
--primary-subtle: rgba(91, 55, 219, 0.12);
--accent-subtle: rgba(34, 211, 238, 0.12);
--success-subtle: rgba(34, 197, 94, 0.12);
--warning-subtle: rgba(245, 158, 11, 0.12);
--danger-subtle: rgba(239, 68, 68, 0.12);
--info-subtle: rgba(59, 130, 246, 0.12);
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow: 0 4px 6px rgba(0, 0, 0, 0.35);
--shadow-md: 0 10px 15px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.35);
--shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.5);
--header-bg: linear-gradient(135deg, #0a224a 0%, #091a3a 100%);
--header-bg-solid: #091f44;
--header-surface: rgba(255, 255, 255, 0.08);
--header-surface-strong: rgba(255, 255, 255, 0.14);
--header-border: rgba(148, 163, 184, 0.24);
--header-text: #f2f7ff;
--header-muted: #c2d2ee;
--analytics-ok: #10b981;
--analytics-nok: #ef4444;
--analytics-warning: #f59e0b;
--analytics-manut: #8b5cf6;
--analytics-info: #2563eb;
--analytics-backup: #4f46e5;
--analytics-neutral: #64748b;
--analytics-cyan: #06b6d4;
--analytics-lime: #65a30d;
--analytics-ok-soft: rgba(16, 185, 129, 0.16);
--analytics-nok-soft: rgba(239, 68, 68, 0.16);
--analytics-warning-soft: rgba(245, 158, 11, 0.17);
--analytics-manut-soft: rgba(139, 92, 246, 0.17);
--analytics-info-soft: rgba(37, 99, 235, 0.16);
--analytics-ok-ring: rgba(16, 185, 129, 0.28);
--analytics-nok-ring: rgba(239, 68, 68, 0.28);
--analytics-warning-ring: rgba(245, 158, 11, 0.30);
--analytics-manut-ring: rgba(139, 92, 246, 0.30);
--analytics-info-ring: rgba(37, 99, 235, 0.28);
color-scheme: dark;
}

html.dark body::before {
background:
radial-gradient(ellipse 800px 400px at 10% 0%, rgba(91, 55, 219, 0.08), transparent 60%),
radial-gradient(ellipse 600px 300px at 90% 5%, rgba(34, 211, 238, 0.08), transparent 50%);
}

html.dark ::-webkit-scrollbar-thumb { background: #334155; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

html.dark .topbar { background: var(--header-bg); }
html.dark .sidebar { background: linear-gradient(180deg, #091f44 0%, #081936 100%); }

html.dark .login-page { background: #1a1d2a; }
html.dark .login-stats { background: linear-gradient(135deg, #0f0d1e 0%, #161236 40%, #0e1528 100%); }
html.dark .login-steps { background: #1e2231; border-top-color: rgba(148, 163, 184, 0.16); }
html.dark .login-card { background: #1f2636; border-color: rgba(148, 163, 184, 0.24); box-shadow: 0 20px 44px rgba(2, 6, 23, 0.4); }
html.dark .login-brand h2,
html.dark .login-card h3 { color: #f8fafc; }
html.dark .login-brand p,
html.dark .login-card-subtitle { color: #a6b6cc; }
html.dark .login-card .form-control { background-color: rgba(15, 23, 42, 0.72); border-color: rgba(148, 163, 184, 0.3); color: #e2e8f0; }
html.dark .login-card .form-control:focus { background-color: rgba(15, 23, 42, 0.9); }
html.dark .info-login { background: rgba(94, 63, 190, 0.22); border-color: rgba(129, 140, 248, 0.26); color: #d3ddf0; }
html.dark .login-steps-inner h2 { color: #f8fafc; }
html.dark .login-steps-grid article { background: #232b3d; border-color: rgba(148, 163, 184, 0.22); }
html.dark .login-steps-grid h3 { color: #f1f5f9; }
html.dark .login-steps-grid p { color: #a3b3ca; }
html.dark .login-step-icon { color: #c8b9ff; background: rgba(89, 67, 165, 0.35); border-color: rgba(166, 149, 255, 0.4); }
html.dark .login-interactive { background: #1b2232; border-top-color: rgba(148, 163, 184, 0.2); }
html.dark .login-interactive-header h2 { color: #f8fafc; }
html.dark .login-interactive-header p { color: #b5c1d4; }
html.dark .login-filters { background: linear-gradient(145deg, rgba(37, 49, 72, 0.9), rgba(30, 42, 64, 0.9)); border-color: rgba(148, 163, 184, 0.28); box-shadow: 0 12px 24px rgba(2, 6, 23, 0.3); }
html.dark .login-filter-btn { background: transparent; border-color: transparent; color: #d7e4fb; }
html.dark .login-filter-btn:hover { background: rgba(60, 76, 110, 0.5); border-color: rgba(148, 163, 184, 0.45); color: #f2f7ff; }
html.dark .login-filter-btn.active { background: linear-gradient(135deg, var(--btn-purple-start) 0%, var(--btn-purple-mid) 58%, var(--btn-purple-end) 100%); border-color: var(--btn-purple-border); color: #fff; box-shadow: var(--btn-purple-shadow-hover); }
html.dark .login-feature-card { background: linear-gradient(180deg, rgba(35, 45, 66, 0.98), rgba(29, 41, 62, 0.98)) padding-box, linear-gradient(145deg, rgba(108, 126, 162, 0.45), rgba(78, 95, 130, 0.55), rgba(108, 130, 171, 0.4)) border-box; border-color: transparent; box-shadow: 0 10px 24px rgba(2, 6, 23, 0.32); }
html.dark .login-feature-card:hover { box-shadow: 0 18px 34px rgba(2, 6, 23, 0.46); }
html.dark .login-feature-card::before { background: linear-gradient(90deg, rgba(132, 108, 255, 0.9), rgba(90, 192, 255, 0.8)); }
html.dark .login-feature-icon { color: #cfccff; background: linear-gradient(145deg, rgba(95, 70, 180, 0.46), rgba(52, 94, 173, 0.34)); border-color: rgba(173, 160, 255, 0.35); box-shadow: 0 10px 20px rgba(24, 13, 58, 0.45); }
html.dark .login-feature-title { color: #f2f5fb; }
html.dark .login-feature-summary,
html.dark .login-feature-details p,
html.dark .login-feature-detail-list { color: #b8c5da; }
html.dark .login-feature-action { color: #eaf0fd; background: linear-gradient(145deg, rgba(60, 76, 112, 0.55), rgba(45, 63, 95, 0.62)); border-color: rgba(148, 163, 184, 0.42); box-shadow: 0 6px 16px rgba(2, 6, 23, 0.32); }
html.dark .login-feature-action:hover { background: linear-gradient(135deg, var(--btn-purple-start) 0%, var(--btn-purple-mid) 58%, var(--btn-purple-end) 100%); border-color: var(--btn-purple-border); color: #ffffff; box-shadow: var(--btn-purple-shadow-hover); }
html.dark .login-emoji-chips span { background: rgba(255, 255, 255, 0.08); border-color: rgba(198, 209, 230, 0.32); }
html.dark .login-kpi-box { background: rgba(6, 14, 34, 0.45); border-color: rgba(198, 209, 230, 0.32); }
html.dark .login-marquee { background: linear-gradient(90deg, #1f2738 0%, #1c263a 100%); border-bottom-color: rgba(148, 163, 184, 0.22); }
html.dark .login-marquee::before { background: linear-gradient(90deg, rgba(31, 39, 56, 0.98), rgba(31, 39, 56, 0)); }
html.dark .login-marquee::after { background: linear-gradient(270deg, rgba(28, 38, 58, 0.98), rgba(28, 38, 58, 0)); }
html.dark .login-marquee-kicker { color: #dbeafe; background: rgba(31, 42, 62, 0.86); border-color: rgba(148, 163, 184, 0.28); box-shadow: 0 12px 24px rgba(2, 6, 23, 0.3); }
html.dark .login-marquee-board { background: linear-gradient(180deg, rgba(33, 44, 65, 0.94), rgba(25, 36, 56, 0.82)) padding-box, linear-gradient(135deg, rgba(96, 115, 150, 0.6), rgba(55, 72, 104, 0.62), rgba(92, 111, 149, 0.52)) border-box; box-shadow: 0 24px 48px rgba(2, 6, 23, 0.34); }
html.dark .login-marquee-board::before { background: linear-gradient(90deg, rgba(32, 43, 64, 0.98), rgba(32, 43, 64, 0)); }
html.dark .login-marquee-board::after { background: linear-gradient(270deg, rgba(26, 37, 57, 0.98), rgba(26, 37, 57, 0)); }
html.dark .login-marquee-lane { background: linear-gradient(90deg, rgba(48, 61, 85, 0.54), rgba(28, 38, 58, 0.32)); }
html.dark .login-marquee-lane::before { border-color: rgba(148, 163, 184, 0.22); }
html.dark .login-marquee-chip { background: linear-gradient(145deg, #273247, #243043); border-color: rgba(148, 163, 184, 0.32); color: #e8eef9; box-shadow: 0 6px 14px rgba(2, 6, 23, 0.32); }
html.dark .login-marquee-chip-icon { background: linear-gradient(145deg, rgba(102, 56, 230, 0.24), rgba(70, 133, 255, 0.18)); color: #d7e4ff; }
html.dark .login-workflow { background: linear-gradient(180deg, #1c2436 0%, #1a2437 100%); border-top-color: rgba(148, 163, 184, 0.18); }
html.dark .login-workflow-header h2 { color: #f8fafc; }
html.dark .login-workflow-header p { color: #b2c1d7; }
html.dark .login-workflow-card { background: #243046; border-color: rgba(148, 163, 184, 0.3); }
html.dark .login-workflow-card h3 { color: #f0f5fc; }
html.dark .login-workflow-card p { color: #b3c1d8; }
html.dark .login-help { background: #1e2739; border-top-color: rgba(148, 163, 184, 0.2); }
html.dark .login-faq { background: #1b2436; border-top-color: rgba(148, 163, 184, 0.2); }
html.dark .login-contact { background: #1a2233; border-top-color: rgba(148, 163, 184, 0.2); }
html.dark .login-help-header h2,
html.dark .login-contact-header h2,
html.dark .login-faq-header h2 { color: #f8fafc; }
html.dark .login-help-header p,
html.dark .login-contact-header p,
html.dark .login-faq-header p { color: #b2c0d8; }
html.dark .login-help-item { background: #252f44; border-color: rgba(148, 163, 184, 0.3); }
html.dark .login-help-item h3 { color: #ecf2ff; }
html.dark .login-help-item p { color: #b7c4da; }
html.dark .login-help-icon { color: #cdc3ff; background: rgba(92, 70, 166, 0.38); border-color: rgba(173, 160, 255, 0.34); }
html.dark .login-help-action { color: #eaf0fd; background: rgba(80, 97, 129, 0.35); border-color: rgba(148, 163, 184, 0.35); }
html.dark .login-help-action:hover { background: linear-gradient(135deg, var(--btn-purple-start) 0%, var(--btn-purple-mid) 58%, var(--btn-purple-end) 100%); border-color: var(--btn-purple-border); color: #ffffff; box-shadow: var(--btn-purple-shadow-hover); }
html.dark .login-faq-item { background: #252f44; border-color: rgba(148, 163, 184, 0.3); }
html.dark .login-faq-title { color: #ecf2ff; }
html.dark .login-faq-item p { color: #b7c4da; }
html.dark .login-contact-card { background: #233047; border-color: rgba(148, 163, 184, 0.3); }
html.dark .login-contact-card strong { color: #f2f6fc; }
html.dark .login-contact-card span { color: #b5c3da; }
html.dark .login-contact-icon { color: #b8d4ff; background: rgba(61, 96, 175, 0.32); border-color: rgba(141, 174, 255, 0.35); }
html.dark .login-quick-link { background: linear-gradient(145deg, rgba(25, 35, 60, 0.82), rgba(23, 31, 52, 0.82)); border-color: rgba(170, 186, 220, 0.34); color: #eef4ff; }
html.dark .login-quick-link:hover { border-color: rgba(196, 208, 241, 0.56); background: linear-gradient(145deg, rgba(34, 46, 76, 0.9), rgba(30, 40, 66, 0.9)); }
html.dark .login-cta { color: #1c2d49; background: linear-gradient(145deg, #f8fbff, #e8eeff); border-color: #eef3ff; }

html.dark .stat-card { background: var(--surface); border-color: var(--border); }
html.dark .home-site-strip { background: var(--surface); border-color: var(--border); }
html.dark .home-site-strip-name { color: #d7e3f8; }
html.dark .home-site-strip-address { color: #9cb0ce; }
html.dark .home-site-strip-tag { background: #1a2942; border-color: #324a70; color: #c6d7f2; }
html.dark .table thead { background: var(--bg-alt); }
html.dark .table td { color: var(--text-secondary); }
html.dark .table tbody tr:hover { background: rgba(91, 55, 219, 0.06); }
html.dark .status-nok {
color: #ffffff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

html.dark .form-control { background-color: var(--bg-alt); border-color: var(--border); color: var(--text); }
html.dark .form-control:focus { background-color: var(--surface); }
html.dark select.form-control {
background-color: var(--bg-alt);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}

html.dark .toast {
background: #18243a;
border-color: rgba(121, 145, 180, 0.42);
box-shadow: 0 22px 54px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
html.dark .toast-success { background: linear-gradient(180deg, #173525 0%, #18243a 72%); border-color: rgba(34, 197, 94, 0.46); }
html.dark .toast-error { background: linear-gradient(180deg, #3a1b24 0%, #18243a 72%); border-color: rgba(239, 68, 68, 0.48); }
html.dark .toast-warning { background: linear-gradient(180deg, #352816 0%, #18243a 72%); border-color: rgba(245, 158, 11, 0.54); }
html.dark .toast-info { background: linear-gradient(180deg, #173154 0%, #18243a 72%); border-color: rgba(59, 130, 246, 0.46); }
html.dark .toast-message { color: #c2d2ee; }
html.dark .toast-close { background: rgba(255, 255, 255, 0.12); border-color: rgba(148, 163, 184, 0.32); color: #dce7f8; }
html.dark .modal { background-color: rgba(0, 0, 0, 0.9); }
html.dark .footer { background: linear-gradient(135deg, #0a224a 0%, #091a3a 100%); }
html.dark .mobile-nav { background: rgba(9, 31, 68, 0.96); }
html.dark .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
html.dark .btn-secondary:hover { background: var(--bg-alt); }
html.dark .btn-ghost { background: #1b2740; color: #c5d3ec; border-color: #334760; box-shadow: none; }
html.dark .btn-ghost:hover { background: var(--bg-alt); color: var(--text); }
html.dark .btn-info {
background: rgba(59, 130, 246, 0.22);
color: #bfdbfe;
border-color: rgba(96, 165, 250, 0.60);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
html.dark .btn-info:hover {
background: rgba(59, 130, 246, 0.34);
border-color: rgba(147, 197, 253, 0.80);
color: #dbeafe;
}
html.dark .btn-warning {
background: rgba(217, 119, 6, 0.22);
color: #fde68a;
border-color: rgba(251, 191, 36, 0.60);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
html.dark .btn-warning:hover {
background: rgba(245, 158, 11, 0.34);
border-color: rgba(253, 211, 77, 0.80);
color: #fef3c7;
}
html.dark .btn-danger {
background: rgba(220, 38, 38, 0.22);
color: #fecaca;
border-color: rgba(248, 113, 113, 0.60);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
html.dark .btn-danger:hover {
background: rgba(239, 68, 68, 0.34);
border-color: rgba(252, 165, 165, 0.80);
color: #fee2e2;
}
html.dark .btn-success {
background: rgba(22, 163, 74, 0.22);
color: #bbf7d0;
border-color: rgba(74, 222, 128, 0.60);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
html.dark .btn-success:hover {
background: rgba(34, 197, 94, 0.34);
border-color: rgba(134, 239, 172, 0.80);
color: #dcfce7;
}
html.dark .btn-icon {
background: #1b2740;
border-color: #334760;
color: #c5d3ec;
box-shadow: none;
}

html.dark .equipamento-card {
background: var(--surface);
border-color: var(--border);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}
html.dark .equipamento-card::before {
background: linear-gradient(90deg, rgba(91, 55, 219, 0.15), rgba(91, 55, 219, 0.7), rgba(34, 211, 238, 0.5), rgba(91, 55, 219, 0.15));
opacity: 0.6;
}
html.dark .equipamento-card-preview {
opacity: 0;
filter: grayscale(0.08) saturate(0.82) brightness(0.8) contrast(1.08);
}
html.dark .equipamento-card-preview::after {
background:
linear-gradient(90deg, rgba(23, 32, 51, 0.99) 0%, rgba(23, 32, 51, 0.96) 24%, rgba(23, 32, 51, 0.78) 56%, rgba(23, 32, 51, 0.36) 82%, rgba(23, 32, 51, 0.12) 100%),
linear-gradient(180deg, rgba(15, 23, 42, 0.18) 0%, rgba(15, 23, 42, 0.06) 100%);
}
html.dark .equipamento-card.is-photo-preview-active .equipamento-card-preview.is-active,
html.dark .equipamento-card:has(.equipamento-meta--photos:hover) .equipamento-card-preview.is-active,
html.dark .equipamento-card:has(.equip-foto-foot:hover) .equipamento-card-preview.is-active {
opacity: 0.28;
filter: grayscale(0.05) saturate(0.9) brightness(0.78) contrast(1.1);
}

html.dark .equipamento-card.is-photo-preview-active .equipamento-card-preview.is-active::after,
html.dark .equipamento-card:has(.equipamento-meta--photos:hover) .equipamento-card-preview.is-active::after,
html.dark .equipamento-card:has(.equip-foto-foot:hover) .equipamento-card-preview.is-active::after {
opacity: 0.82;
}

html.dark .equipamento-card.is-photo-preview-active .equipamento-card-reading-bg {
background: rgba(15, 23, 42, 0.62);
box-shadow: 0 8px 18px rgba(2, 6, 23, 0.28);
}
html.dark .equipamento-card:hover {
border-color: var(--primary-light);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}
html.dark .equipamento-card h4 { color: #e9f0ff; }
html.dark .equipamento-meta { color: #9fb4d4; }
html.dark .equipamento-desc { color: #b9c9e4; }
html.dark .equip-monitor-dot-indicator {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html.dark .equip-monitor-dot-indicator.is-online {
--equip-monitor-color: #4ade80;
--equip-monitor-bg: rgba(34, 197, 94, 0.16);
--equip-monitor-border: rgba(74, 222, 128, 0.38);
}
html.dark .equip-monitor-dot-indicator.is-degradado {
--equip-monitor-color: #facc15;
--equip-monitor-bg: rgba(245, 158, 11, 0.18);
--equip-monitor-border: rgba(251, 191, 36, 0.42);
}
html.dark .equip-monitor-dot-indicator.is-offline {
--equip-monitor-color: #f87171;
--equip-monitor-bg: rgba(239, 68, 68, 0.18);
--equip-monitor-border: rgba(248, 113, 113, 0.44);
}
html.dark .equip-monitor-dot-indicator.is-unknown,
html.dark .equip-monitor-dot-indicator.is-unmonitored {
--equip-monitor-color: #cbd5e1;
--equip-monitor-bg: rgba(148, 163, 184, 0.12);
--equip-monitor-border: rgba(148, 163, 184, 0.28);
}
html.dark .equipamento-card-actions {
border-top-color: var(--border);
background: var(--surface-2);
}
html.dark .card-check-wrapper {
background: rgba(15, 23, 42, 0.88);
border-color: var(--border);
}
html.dark .equip-foto-badge,
html.dark .equip-table-photo-tag,
html.dark .equip-foto-foot {
border-color: rgba(122, 162, 229, 0.45);
background: rgba(45, 88, 152, 0.26);
color: #cfe4ff;
}
html.dark .detail-item { background: var(--bg-alt); border-color: var(--border); }
html.dark .detail-item:hover { border-color: var(--muted-light); }
html.dark .config-card { background: var(--surface); border-color: var(--border); }
html.dark .backup-panel { background: var(--surface); border-color: var(--border); }
html.dark .backup-card-item { background: var(--surface); border-color: var(--border); }
html.dark .backup-reports-section { background: var(--surface); border-color: var(--border); }
html.dark .backup-report-card { background: var(--bg-alt); border-color: var(--border); }
html.dark .backup-report-card:hover { background: var(--surface-2); border-color: var(--primary); }

/* Home & Analytics Dark Overrides */
html.dark .home-hero { background: linear-gradient(135deg, rgba(91, 55, 219,0.06), rgba(16,185,129,0.03)); }
html.dark .home-stat-card { background: var(--surface); }
html.dark .home-type-card { background: var(--surface); }
html.dark .home-card { background: var(--surface); }
html.dark .kpi-card { background: var(--surface); }
html.dark .operation-bar { background: var(--surface); }
html.dark .dash-section { background: var(--surface); }
html.dark .master-health-card { background: var(--bg-alt); }
html.dark .tipo-detail-card { background: var(--bg-alt); }

/* Password Modal Dark Mode */
html.dark .password-modal { background: var(--surface); }
html.dark .password-modal-title { color: var(--text); }
html.dark .password-modal-desc { color: var(--muted); }
html.dark .password-modal-desc strong { color: var(--text); }
html.dark .password-modal-field .form-control {
background-color: var(--bg-alt);
border-color: var(--border);
color: var(--text);
}
html.dark .password-modal-field .form-control:focus {
background-color: var(--surface);
}
html.dark .password-modal-error { background: rgba(239,68,68,0.1); }

/* Confirm Overlay Dark Mode */
html.dark .confirm-modal { background: var(--surface); }
html.dark .confirm-title { color: var(--text); }
html.dark .confirm-message { color: var(--muted); }

/* Form Validation */
.form-control.is-invalid {
border-color: var(--danger) !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.form-control.is-invalid:focus {
border-color: var(--danger) !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* ============================================
TOPBAR SEARCH (Global Search)
============================================ */
.topbar-search {
position: relative;
flex: 0 1 360px;
width: 360px;
max-width: 100%;
margin: 0;
}

.topbar-search-area {
display: flex;
align-items: center;
gap: 10px;
flex: 1 1 auto;
min-width: 0;
margin: 0 12px 0 auto;
justify-content: flex-end;
}

.search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: rgba(255,255,255,0.4);
pointer-events: none;
z-index: 2;
}

.search-input {
width: 100%;
height: 36px;
padding: 8px 68px 8px 34px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
font-family: 'Inter', sans-serif;
font-size: 13px;
color: #f8fafc;
transition: var(--transition);
outline: none;
}

.search-input::placeholder { color: rgba(255, 255, 255, 0.35); }

.search-input:focus {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.22);
box-shadow: none;
}

.search-kbd {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
padding: 2px 6px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 4px;
font-size: 10px;
font-family: 'Inter', monospace;
color: rgba(255,255,255,0.35);
line-height: 1.3;
pointer-events: none;
}

.search-results {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
max-height: 380px;
overflow-y: auto;
z-index: 9999;
}

.search-results.active { display: block; }

.search-results-header {
padding: 10px 14px;
font-size: 11px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 1px solid var(--border-light);
}

.search-result-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
cursor: pointer;
transition: var(--transition-fast);
text-decoration: none;
color: var(--text);
border-bottom: 1px solid var(--border-light);
}

.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover,
.search-result-item.focused { background: var(--primary-subtle); }

.search-result-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: var(--bg-alt);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.search-result-icon svg {
width: 16px;
height: 16px;
stroke: var(--primary);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

.search-result-info { flex: 1; min-width: 0; }
.search-result-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-meta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.search-result-meta .badge { font-size: 10px; padding: 1px 6px; }

.search-no-results {
padding: 24px 14px;
text-align: center;
color: var(--muted);
font-size: 13px;
}

.search-no-results svg { display: block; margin: 0 auto 8px; opacity: 0.4; }

/* ============================================
TOPBAR ACTIONS
============================================ */
.topbar-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}

/* Indicador de usuarios online no dropdown do usuario (admin) */
.user-dropdown-online {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-muted);
cursor: pointer;
}
.user-dropdown-online:hover {
color: var(--text);
background: var(--bg-alt);
}
.user-dropdown-online .online-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 2px rgba(34,197,94,.25);
animation: pulse-dot 2s infinite;
flex-shrink: 0;
}
@keyframes pulse-dot {
0%,100% { box-shadow: 0 0 0 2px rgba(34,197,94,.25); }
50%      { box-shadow: 0 0 0 5px rgba(34,197,94,.1); }
}

/* ── Modal: Usuários Online ── */
.online-users-list {
list-style: none;
margin: 0;
padding: 0;
}
.online-users-list .online-user {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border-radius: var(--radius);
font-size: 14px;
color: var(--text);
transition: background 0.15s;
}
.online-users-list .online-user:not(:last-child) {
border-bottom: 1px solid var(--border);
}
.online-users-list .online-user:hover {
background: var(--bg-alt);
}
.online-users-list .user-indicator {
width: 9px;
height: 9px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 2px rgba(34,197,94,.25);
animation: pulse-dot 2s infinite;
flex-shrink: 0;
margin-top: 6px;
}
.online-users-list .online-user-main {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.online-users-list .online-user-main strong {
font-size: 14px;
font-weight: 700;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.online-users-list .online-user-main small {
font-size: 12px;
line-height: 1.35;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.online-users-list .editing-badge {
margin-left: auto;
align-self: center;
font-size: 11px;
font-weight: 600;
color: var(--primary);
background: rgba(var(--primary-rgb, 59,130,246), 0.1);
padding: 2px 8px;
border-radius: 9999px;
}
.online-users-empty {
text-align: center;
color: var(--muted);
font-size: 14px;
padding: 24px 0;
margin: 0;
}

.topbar-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: var(--header-surface);
border: 1px solid var(--header-border);
color: var(--header-muted);
cursor: pointer;
transition: var(--transition);
}

.topbar-btn:hover {
background: var(--header-surface-strong);
border-color: rgba(255,255,255,0.22);
color: var(--header-text);
}

#darkModeToggle {
position: relative;
overflow: hidden;
}

#darkModeToggle::before {
content: '';
position: absolute;
inset: 5px;
border-radius: 999px;
background: radial-gradient(circle at 30% 30%, rgba(255, 210, 74, 0.25), rgba(143, 116, 255, 0.08) 65%, transparent 100%);
opacity: 0;
transform: scale(0.6);
transition: opacity 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}

#darkModeToggle:hover::before,
#darkModeToggle.theme-toggle-animating::before {
opacity: 1;
transform: scale(1);
}

#darkModeToggle .icon-sun,
#darkModeToggle .icon-moon {
position: absolute;
inset: 0;
margin: auto;
pointer-events: none;
transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 480ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms ease;
will-change: transform, opacity;
}

#darkModeToggle .icon-sun {
opacity: 1;
transform: rotate(0deg) scale(1);
filter: drop-shadow(0 0 0 rgba(255, 193, 7, 0));
}

#darkModeToggle .icon-moon {
opacity: 0;
transform: rotate(110deg) scale(0.38);
filter: drop-shadow(0 0 0 rgba(147, 197, 253, 0));
}

html.dark #darkModeToggle .icon-sun {
opacity: 0;
transform: rotate(-120deg) scale(0.35);
filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.24));
}

html.dark #darkModeToggle .icon-moon {
opacity: 1;
transform: rotate(0deg) scale(1);
filter: drop-shadow(0 0 10px rgba(147, 197, 253, 0.3));
}

#darkModeToggle.theme-toggle-animating .icon-sun {
transform: rotate(140deg) scale(0.25);
}

#darkModeToggle.theme-toggle-animating .icon-moon {
transform: rotate(0deg) scale(1.06);
}

/* ---- Topbar Notifications ---- */
.topbar-notify {
position: relative;
z-index: 1002;
}

.topbar-notify-btn {
position: relative;
transform-origin: 50% 10%;
}

.topbar-notify-btn svg {
transform-origin: 50% 10%;
}

@keyframes topbarBellRing {
0% { transform: rotate(0deg) scale(1); }
14% { transform: rotate(18deg) scale(1.04); }
28% { transform: rotate(-14deg) scale(1.04); }
42% { transform: rotate(10deg) scale(1.02); }
56% { transform: rotate(-8deg) scale(1.02); }
70% { transform: rotate(5deg) scale(1.01); }
84% { transform: rotate(-3deg) scale(1.01); }
100% { transform: rotate(0deg) scale(1); }
}

@keyframes topbarBellPop {
0% { transform: scale(1); filter: brightness(1); }
45% { transform: scale(1.18); filter: brightness(1.15); }
100% { transform: scale(1); filter: brightness(1); }
}

.topbar-notify-btn.is-click-anim svg {
animation: topbarBellRing 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.topbar-notify-btn.is-click-anim .topbar-notify-badge:not([hidden]) {
animation: topbarBellPop 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.topbar-notify-btn.is-critical {
border-color: rgba(248, 113, 113, 0.5);
color: #fecaca;
}

.topbar-notify-badge {
position: absolute;
top: -6px;
right: -7px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: linear-gradient(135deg, #b91c1c 0%, #991b1b 58%, #7f1d1d 100%);
color: #fff;
font-size: 10px;
font-weight: 850;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(254, 202, 202, 0.72);
box-shadow:
0 0 0 2px color-mix(in srgb, var(--header-bg-solid) 88%, #ffffff 12%),
0 8px 18px rgba(127, 29, 29, 0.32);
line-height: 1;
letter-spacing: 0;
}

.topbar-notify-badge::after {
content: "";
position: absolute;
inset: 2px 3px auto 3px;
height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.24);
pointer-events: none;
}

.topbar-notify-badge[hidden] {
display: none !important;
}

.topbar-notify:not(.is-hydrated) .topbar-notify-badge {
display: none !important;
}

.topbar-notify-panel {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: min(460px, 95vw);
max-height: min(76vh, 640px);
overflow: hidden;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 24px 56px rgba(11, 23, 50, 0.26);
z-index: 1200;
}

.topbar-notify-panel[hidden] {
display: none !important;
}

.topbar-notify.open .topbar-notify-panel {
display: flex;
}

.topbar-notify-head,
.topbar-notify-foot {
padding: 11px 14px;
border-bottom: 1px solid var(--border-light);
background: var(--surface);
}

.topbar-notify-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}

.topbar-notify-head strong {
font-size: 13px;
color: var(--text);
}

.topbar-notify-head span {
font-size: 12px;
color: var(--muted);
}

.topbar-notify-controls {
padding: 10px 14px;
border-bottom: 1px solid var(--border-light);
background: var(--surface);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.topbar-notify-tabs,
.topbar-notify-modal-tabs {
display: inline-flex;
gap: 8px;
flex-wrap: wrap;
}

.topbar-notify-tab {
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--muted);
border-radius: 10px;
padding: 6px 10px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
}

.topbar-notify-tab:hover {
border-color: #8ea7cd;
color: var(--text);
}

.topbar-notify-tab.is-active {
background: linear-gradient(135deg, #2a57a2, #5b37db);
border-color: rgba(114, 147, 220, 0.62);
color: #f6f9ff;
}

.topbar-notify-foot {
border-top: 1px solid var(--border-light);
border-bottom: 0;
}

.topbar-notify-foot .btn {
width: 100%;
justify-content: center;
}

.topbar-notify-empty {
margin: 0;
padding: 16px 14px;
color: var(--muted);
font-size: 13px;
text-align: center;
}

.topbar-notify-list {
margin: 0;
padding: 0;
list-style: none;
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
background: var(--surface);
}

.topbar-notify-item + .topbar-notify-item {
border-top: 1px solid var(--border-light);
}

.topbar-notify-item-row,
.topbar-notify-modal-item-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
}

.topbar-notify-item-link {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px 10px;
padding: 12px 14px;
text-decoration: none;
transition: background-color 0.15s ease;
}

.topbar-notify-item-link:hover {
background: var(--bg-alt);
}

.topbar-notify-item.is-unread .topbar-notify-item-link,
.topbar-notify-modal-item.is-unread a {
background: linear-gradient(90deg, rgba(91, 55, 219, 0.12), rgba(91, 55, 219, 0));
}

.topbar-notify-item.is-unread .topbar-notify-main strong,
.topbar-notify-modal-item.is-unread .topbar-notify-modal-main strong {
color: #264b94;
}

.topbar-notify-main {
min-width: 0;
}

.topbar-notify-main strong {
display: block;
font-size: 13px;
color: var(--text);
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.topbar-notify-main small {
display: block;
margin-top: 2px;
font-size: 11px;
color: var(--muted);
white-space: normal;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.35;
overflow-wrap: anywhere;
}

.topbar-notify-date {
display: block;
margin-top: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.03em;
color: #6f85a6;
text-transform: uppercase;
}

.topbar-notify-tag {
font-size: 11px;
font-weight: 700;
line-height: 1.2;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid transparent;
white-space: nowrap;
}

.topbar-notify-item.type-atrasado .topbar-notify-tag,
.topbar-notify-modal-item.type-atrasado .topbar-notify-modal-tag {
color: #991b1b;
background: #fee2e2;
border-color: #fecaca;
}

.topbar-notify-item.type-critico .topbar-notify-item-link,
.topbar-notify-modal-item.type-critico a {
box-shadow: inset 3px 0 0 rgba(153, 27, 27, 0.72);
}

.topbar-notify-item.type-critico .topbar-notify-tag,
.topbar-notify-modal-item.type-critico .topbar-notify-modal-tag {
color: #7f1d1d;
background: #fee2e2;
border-color: #fca5a5;
}

.topbar-notify-item.type-hoje .topbar-notify-tag,
.topbar-notify-modal-item.type-hoje .topbar-notify-modal-tag {
color: #92400e;
background: #fef3c7;
border-color: #fde68a;
}

.topbar-notify-item.type-curto .topbar-notify-tag,
.topbar-notify-modal-item.type-curto .topbar-notify-modal-tag {
color: #1e40af;
background: #dbeafe;
border-color: #bfdbfe;
}

.topbar-notify-item.type-proximo .topbar-notify-tag,
.topbar-notify-modal-item.type-proximo .topbar-notify-modal-tag {
color: #166534;
background: #dcfce7;
border-color: #bbf7d0;
}

.topbar-notify-item.type-concluido .topbar-notify-tag,
.topbar-notify-modal-item.type-concluido .topbar-notify-modal-tag {
color: #155e75;
background: #cffafe;
border-color: #a5f3fc;
}

.topbar-notify-modal {
position: fixed;
inset: 0;
z-index: 1600;
display: flex;
align-items: center !important;
justify-content: center !important;
padding: 18px;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
}

.topbar-notify-modal[hidden] {
display: none !important;
}

.topbar-notify-modal.is-open {
opacity: 1;
pointer-events: auto;
}

.topbar-notify-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(6, 19, 41, 0.56);
backdrop-filter: blur(2px);
opacity: 0;
transition: opacity 0.22s ease;
}

.topbar-notify-modal.is-open .topbar-notify-modal-backdrop {
opacity: 1;
}

.topbar-notify-modal-dialog {
position: relative;
width: min(560px, 94vw);
height: min(68vh, 560px);
max-height: min(68vh, 560px);
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: 0 30px 80px rgba(7, 18, 38, 0.42);
overflow: hidden;
z-index: 1;
margin: 0 auto;
transform: translateY(18px) scale(0.985);
opacity: 0;
transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
}

.topbar-notify-modal.is-open .topbar-notify-modal-dialog {
transform: translateY(0) scale(1);
opacity: 1;
}

.topbar-notify-modal-head {
padding: 14px 16px;
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.topbar-notify-modal-head-main {
min-width: 0;
}

.topbar-notify-modal-head h3 {
margin: 0;
font-size: 17px;
color: var(--text);
}

.topbar-notify-modal-subtitle {
margin: 4px 0 0;
font-size: 12px;
color: var(--muted);
}

.topbar-notify-modal-close {
width: 32px;
height: 32px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg-alt);
color: var(--muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
}

.topbar-notify-modal-close:hover {
color: var(--text);
border-color: var(--muted-light);
}

body.topbar-notify-modal-open {
overflow: hidden;
}

.topbar-notify-modal-meta {
padding: 10px 16px;
border-bottom: 1px solid var(--border-light);
font-size: 12px;
color: var(--muted);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}

.topbar-notify-modal-controls {
padding: 12px 16px;
border-bottom: 1px solid var(--border-light);
display: grid;
gap: 10px;
background: var(--surface);
}

.topbar-notify-modal-search {
min-height: 38px;
}

.topbar-notify-modal-body {
padding: 0;
overflow-y: auto;
flex: 1 1 auto;
}

.topbar-notify-modal-empty {
margin: 0;
padding: 18px 16px;
text-align: center;
color: var(--muted);
}

.topbar-notify-modal-list {
margin: 0;
padding: 10px 12px 12px;
list-style: none;
display: grid;
gap: 8px;
background: linear-gradient(180deg, rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0));
}

.topbar-notify-modal-item {
border: 1px solid var(--border-light);
border-radius: 12px;
overflow: hidden;
background: var(--surface);
}

.topbar-notify-modal-item + .topbar-notify-modal-item {
border-top: 0;
}

.topbar-notify-modal-item a {
text-decoration: none;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 12px 14px;
}

.topbar-notify-modal-item a:hover {
background: var(--bg-alt);
}

.topbar-notify-dismiss {
width: 30px;
border: 0;
border-left: 1px solid var(--border-light);
background: transparent;
color: #8fa7cc;
font-size: 18px;
line-height: 1;
cursor: pointer;
transition: var(--transition);
}

.topbar-notify-dismiss:hover {
background: rgba(239, 68, 68, 0.14);
color: #d73c3c;
}

.topbar-notify-modal-main {
min-width: 0;
}

.topbar-notify-modal-main strong {
display: block;
color: var(--text);
line-height: 1.4;
}

.topbar-notify-modal-main small {
display: block;
margin-top: 4px;
color: var(--muted);
font-size: 12px;
line-height: 1.4;
}

.topbar-notify-modal-main time {
display: block;
margin-top: 6px;
color: #6f85a6;
font-size: 11px;
font-weight: 700;
}

.topbar-notify-modal-tag {
font-size: 12px;
font-weight: 700;
line-height: 1.2;
padding: 5px 9px;
border-radius: 999px;
border: 1px solid transparent;
white-space: nowrap;
}

.topbar-notify-modal-foot {
padding: 12px 16px;
border-top: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
background: var(--surface);
}

.topbar-notify-modal-foot .btn {
min-width: 96px;
justify-content: center;
}

html.dark .topbar-notify-panel,
html.dark .topbar-notify-modal-dialog {
background: #121c31;
border-color: #2f4469;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

html.dark .topbar-notify-head,
html.dark .topbar-notify-controls,
html.dark .topbar-notify-foot,
html.dark .topbar-notify-list,
html.dark .topbar-notify-modal-head,
html.dark .topbar-notify-modal-meta,
html.dark .topbar-notify-modal-controls,
html.dark .topbar-notify-modal-foot {
background: #121c31;
border-color: #243754;
}

html.dark .topbar-notify-modal-list {
background: linear-gradient(180deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0));
}

html.dark .topbar-notify-modal-item {
border-color: #2f4469;
background: #121c31;
}

html.dark .topbar-notify-head strong,
html.dark .topbar-notify-main strong,
html.dark .topbar-notify-modal-head h3,
html.dark .topbar-notify-modal-main strong {
color: #e7efff;
}

html.dark .topbar-notify-head span,
html.dark .topbar-notify-main small,
html.dark .topbar-notify-empty,
html.dark .topbar-notify-modal-subtitle,
html.dark .topbar-notify-modal-meta,
html.dark .topbar-notify-modal-main small,
html.dark .topbar-notify-modal-empty {
color: #b0c1de;
}

html.dark .topbar-notify-date,
html.dark .topbar-notify-modal-main time {
color: #87a4cf;
}

html.dark .topbar-notify-item + .topbar-notify-item,
html.dark .topbar-notify-modal-item + .topbar-notify-modal-item {
border-top-color: #243754;
}

html.dark .topbar-notify-item-link:hover,
html.dark .topbar-notify-modal-item a:hover {
background: #17263f;
}

html.dark .topbar-notify-tab {
background: #17263f;
border-color: #314b73;
color: #a9bfdf;
}

html.dark .topbar-notify-tab:hover {
color: #e0ebff;
border-color: #5578ad;
}

html.dark .topbar-notify-tab.is-active {
background: linear-gradient(135deg, #3c66b0, #5b37db);
border-color: #6e8ec2;
color: #f4f8ff;
}

html.dark .topbar-notify-item.is-unread .topbar-notify-item-link,
html.dark .topbar-notify-modal-item.is-unread a {
background: linear-gradient(90deg, rgba(103, 133, 245, 0.2), rgba(103, 133, 245, 0));
}

html.dark .topbar-notify-item.is-unread .topbar-notify-main strong,
html.dark .topbar-notify-modal-item.is-unread .topbar-notify-modal-main strong {
color: #dce9ff;
}

html.dark .topbar-notify-item.type-critico .topbar-notify-tag,
html.dark .topbar-notify-modal-item.type-critico .topbar-notify-modal-tag {
color: #fecaca;
background: rgba(127, 29, 29, 0.42);
border-color: rgba(248, 113, 113, 0.5);
}

html.dark .topbar-notify-modal-close {
background: #17263f;
border-color: #314b73;
color: #9eb6dc;
}

html.dark .topbar-notify-dismiss {
border-left-color: #243754;
color: #87a4cf;
}

html.dark .topbar-notify-dismiss:hover {
background: rgba(239, 68, 68, 0.24);
color: #ffd6d6;
}

/* Dark mode toggle icon states */
html:not(.dark) .icon-moon { opacity: 0; }
html.dark .icon-sun { opacity: 0; }

/* ============================================
SIDEBAR BADGE (Counters)
============================================ */
.sidebar-badge {
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 6px;
border-radius: var(--radius-full);
background: rgba(143, 116, 255, 0.2);
color: #e5ddff;
font-size: 11px;
font-weight: 700;
letter-spacing: -0.02em;
}

.sidebar-link.active .sidebar-badge {
background: rgba(143, 116, 255, 0.34);
color: #ffffff;
}

/* ============================================
BREADCRUMB
============================================ */
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
font-size: 13px;
color: var(--muted);
border-bottom: 1px solid var(--border-light);
background: var(--surface);
}

.breadcrumb a {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--primary);
font-weight: 500;
transition: var(--transition);
}

.breadcrumb a:hover { color: var(--primary-dark); }
.breadcrumb a svg { flex-shrink: 0; }

.breadcrumb-sep {
display: flex;
align-items: center;
color: var(--muted-light);
}

.breadcrumb-current {
color: var(--text);
font-weight: 600;
}

/* ============================================
CONFIRM MODAL (Custom)
============================================ */
.confirm-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(6px);
z-index: 10002;
align-items: center;
justify-content: center;
}

.confirm-overlay.active { display: flex; }

.confirm-modal {
background: var(--surface);
border-radius: var(--radius-xl);
padding: 32px;
max-width: 400px;
width: 90%;
box-shadow: var(--shadow-xl);
text-align: center;
animation: confirmIn 0.25s ease-out;
}

@keyframes confirmIn {
from { opacity: 0; transform: scale(0.9) translateY(10px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}

.confirm-icon {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
font-size: 24px;
}

.confirm-icon.danger,
.confirm-icon.error {
background: var(--danger-subtle);
color: var(--danger);
}

.confirm-icon.warning {
background: var(--warning-subtle);
color: var(--warning);
}

.confirm-title {
font-size: 18px;
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
}

.confirm-message {
font-size: 14px;
color: var(--muted);
margin-bottom: 24px;
line-height: 1.6;
}

.confirm-actions {
display: flex;
gap: 10px;
justify-content: center;
}

.confirm-actions .btn {
min-width: 110px;
}

/* Confirmacoes globais devem seguir o tema visual da pagina. */
.confirm-overlay {
background: rgba(6, 14, 28, 0.58);
}

.confirm-modal {
background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
border: 1px solid var(--border);
color: var(--text);
}

.confirm-title {
color: var(--text);
}

.confirm-message {
color: var(--text-secondary);
}

.confirm-icon.info {
background: var(--info-subtle);
color: var(--info);
}

.confirm-icon.success {
background: var(--success-subtle);
color: var(--success);
}

html.dark .confirm-overlay {
background: rgba(3, 8, 18, 0.74);
}

html.dark .confirm-modal {
background: linear-gradient(180deg, #14213a 0%, #10203a 100%);
border-color: rgba(139, 170, 217, 0.36);
box-shadow: 0 20px 54px rgba(0, 0, 0, 0.46);
}

html.dark .confirm-title {
color: #ffffff;
}

html.dark .confirm-message {
color: #d7e5f8;
}

/* ============================================
PASSWORD CONFIRMATION MODAL
============================================ */
.password-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(8px);
z-index: 10003;
align-items: center;
justify-content: center;
padding: 20px;
}

.password-modal-overlay.active {
display: flex;
}

.password-modal {
background: var(--surface);
border-radius: var(--radius-xl);
padding: 32px;
max-width: 420px;
width: 100%;
box-shadow: var(--shadow-xl);
text-align: center;
animation: passwordModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes passwordModalIn {
from { opacity: 0; transform: scale(0.92) translateY(12px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}

.password-modal-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--danger-subtle);
color: var(--danger);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}

.password-modal-title {
font-size: 18px;
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
}

.password-modal-desc {
font-size: 14px;
color: var(--muted);
line-height: 1.6;
margin-bottom: 20px;
}

.password-modal-desc strong {
color: var(--text);
font-weight: 600;
word-break: break-all;
}

.password-modal-field {
margin-bottom: 20px;
text-align: left;
}

.password-modal-field .form-control {
width: 100%;
padding: 12px 16px;
font-size: 15px;
border: 2px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg);
color: var(--text);
transition: border-color 0.2s;
}

.password-modal-field .form-control:focus {
border-color: var(--danger);
outline: none;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.password-modal-error {
display: none;
margin: 8px 0 0;
padding: 8px 12px;
background: var(--danger-subtle);
color: var(--danger);
border-radius: var(--radius);
font-size: 13px;
font-weight: 500;
text-align: center;
}

.password-modal-actions {
display: flex;
gap: 10px;
justify-content: center;
}

.password-modal-actions .btn {
min-width: 120px;
}

.password-modal-actions .btn-danger {
display: inline-flex;
align-items: center;
gap: 6px;
}

.spinner-sm {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spinSm 0.6s linear infinite;
}

@keyframes spinSm {
to { transform: rotate(360deg); }
}

/* ============================================
STAT PROGRESS BARS (Mini Charts)
============================================ */
.stat-progress {
width: 100%;
height: 6px;
background: var(--bg-alt);
border-radius: var(--radius-full);
overflow: hidden;
margin-top: 10px;
display: flex;
}

.stat-progress-ok {
background: var(--success);
height: 100%;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-progress-nok {
background: var(--danger);
height: 100%;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-progress-vago {
background: var(--info);
height: 100%;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-progress-manut {
background: var(--analytics-manut);
height: 100%;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
NUMERIC PAGINATION
============================================ */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border-light);
flex-wrap: wrap;
}

.page-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
background: var(--surface);
border: 1px solid var(--border);
text-decoration: none;
transition: var(--transition);
cursor: pointer;
}

.page-num:hover {
background: var(--primary-subtle);
border-color: var(--primary);
color: var(--primary);
}

.page-num.active {
background: linear-gradient(135deg, var(--btn-purple-start) 0%, var(--btn-purple-mid) 58%, var(--btn-purple-end) 100%);
border-color: var(--btn-purple-border);
color: white;
box-shadow: 0 6px 14px rgba(9, 35, 78, 0.22);
pointer-events: none;
}

.page-num.disabled {
opacity: 0.4;
pointer-events: none;
}

.page-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 36px;
color: var(--muted);
font-weight: 600;
font-size: 14px;
}

.page-nav {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 12px;
height: 36px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
background: var(--surface);
border: 1px solid var(--border);
text-decoration: none;
transition: var(--transition);
gap: 4px;
}

.page-nav:hover { background: var(--bg-alt); border-color: var(--muted-light); }
.page-nav.disabled { opacity: 0.4; pointer-events: none; }
.page-nav svg { width: 14px; height: 14px; }

/* ============================================
VERSION TIMELINE
============================================ */
.version-toolbar {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 14px;
}

.version-filter-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 10px;
}

.version-toolbar-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.version-result-summary {
font-size: 12px;
color: var(--muted);
font-weight: 600;
}

.timeline {
position: relative;
padding-left: 32px;
}

.timeline::before {
content: '';
position: absolute;
left: 11px;
top: 8px;
bottom: 8px;
width: 2px;
background: linear-gradient(180deg, var(--primary), var(--primary-light), var(--border));
border-radius: 2px;
}

.timeline-item {
position: relative;
padding-bottom: 24px;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-dot {
position: absolute;
left: -32px;
top: 4px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--surface);
border: 3px solid var(--primary);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: var(--transition);
}

.timeline-item:first-child .timeline-dot {
background: var(--primary);
border-color: var(--primary);
}

.timeline-item:first-child .timeline-dot::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}

.timeline-content {
background: var(--bg-alt);
border-radius: var(--radius);
padding: 16px 18px;
border: 1px solid var(--border-light);
transition: var(--transition);
}

.timeline-content:hover {
border-color: var(--primary-light);
background: var(--primary-subtle);
}

.timeline-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
flex-wrap: wrap;
gap: 8px;
}

.timeline-version {
font-weight: 700;
color: var(--primary-dark);
font-size: 14px;
}

.timeline-eye-btn {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: auto;
}

.timeline-date {
font-size: 12px;
color: var(--muted);
display: flex;
align-items: center;
gap: 4px;
}

.timeline-body p { color: var(--text-secondary); font-size: 14px; margin-bottom: 4px; }
.timeline-body small { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.timeline-item.is-filtered-out,
.timeline-item.is-collapsed-hidden { display: none; }

.version-diff-row {
display: block;
padding: 10px 12px;
border: 1px solid var(--border-light);
border-radius: 10px;
background: var(--bg-alt);
margin-bottom: 8px;
line-height: 1.45;
font-size: 13px;
}

.version-diff-row strong {
color: var(--text);
margin-right: 6px;
}

.version-diff-before {
color: var(--muted);
}

.version-diff-arrow {
color: var(--primary);
margin: 0 6px;
font-weight: 700;
}

.version-diff-after {
color: var(--text-secondary);
font-weight: 600;
}

@media (max-width: 900px) {
.version-filter-grid {
grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 560px) {
.version-filter-grid {
grid-template-columns: 1fr;
}
.version-toolbar-actions {
flex-direction: column;
align-items: stretch;
}
}

/* ============================================
LIGHTBOX (Photo Viewer)
============================================ */
.lightbox-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
backdrop-filter: blur(8px);
z-index: 10003;
align-items: center;
justify-content: center;
flex-direction: column;
}

.lightbox-overlay.active { display: flex; }

.lightbox-close {
position: absolute;
top: 16px;
right: 20px;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
font-size: 20px;
z-index: 2;
}

.lightbox-close:hover { background: rgba(255,255,255,0.2); }

.lightbox-img {
max-width: 90vw;
max-height: 80vh;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
object-fit: contain;
animation: lightboxIn 0.3s ease-out;
}

@keyframes lightboxIn {
from { opacity: 0; transform: scale(0.92); }
to { opacity: 1; transform: scale(1); }
}

.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
z-index: 2;
}

.lightbox-nav:hover { background: rgba(255,255,255,0.2); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

.lightbox-counter {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.7);
font-size: 13px;
font-weight: 500;
background: rgba(0,0,0,0.4);
padding: 6px 14px;
border-radius: var(--radius-full);
}


/* ======================================================================
CHARTS (Dashboard)
====================================================================== */
.charts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 32px;
}

.chart-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
}
.chart-card:hover {
border-color: var(--primary-light);
box-shadow: 0 4px 20px rgba(91, 55, 219, 0.08);
}

.chart-header {
padding: 20px 24px 0;
}
.chart-header h3 {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 600;
color: var(--text);
margin: 0;
}

.chart-body {
padding: 16px 24px 24px;
height: 280px;
position: relative;
}

.chart-empty-msg {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
height: 100%;
color: var(--text-muted, #64748b);
font-size: 13px;
opacity: 0.6;
}
.chart-empty-msg span {
text-align: center;
}


/* ======================================================================
VIEW TOGGLE (Table / Grid)
====================================================================== */
.page-header-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

.equipamentos-header-actions {
flex-wrap: nowrap;
justify-content: flex-end;
min-width: max-content;
}

.equipamentos-header-actions .view-toggle,
.equipamentos-header-actions .equipamentos-new-btn {
flex: 0 0 auto;
}

.equipamentos-header-actions .equipamentos-new-btn {
white-space: nowrap;
}

.view-toggle {
display: inline-grid;
grid-template-columns: repeat(2, 36px);
align-items: center;
gap: 4px;
padding: 4px;
background: rgba(15, 23, 42, 0.03);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.view-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: transparent;
border: none;
border-radius: 10px;
color: var(--muted);
cursor: pointer;
transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.view-btn:hover {
color: var(--text);
background: rgba(91, 55, 219, 0.08);
}
.view-btn.active {
color: #eef5ff;
background: linear-gradient(135deg, var(--btn-purple-start) 0%, var(--btn-purple-mid) 58%, var(--btn-purple-end) 100%);
box-shadow: 0 8px 18px rgba(91, 55, 219, 0.22);
}
.view-btn svg {
width: 16px;
height: 16px;
stroke-width: 2.2;
}
html.dark .view-toggle {
background: rgba(15, 23, 42, 0.34);
border-color: rgba(148, 163, 184, 0.18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html.dark .view-btn {
color: #8fa3c2;
}
html.dark .view-btn:hover {
color: #eaf2ff;
background: rgba(148, 163, 184, 0.12);
}

/* Grid View */
.equip-grid-view {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
margin-top: 8px;
align-items: stretch;
}

.equip-grid-view .equipamento-card {
position: relative;
min-height: 308px;
}

.equip-grid-view .equipamento-card .equipamento-card-link {
padding-right: 48px;
}

.equip-grid-view .equipamento-card-actions {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
align-items: stretch;
}

.equip-grid-view .equipamento-card-actions .btn {
min-width: 0;
width: 100%;
padding: 8px 6px;
font-size: 12px;
white-space: nowrap;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
}

.equip-grid-view .equipamento-card-actions .btn svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}

.card-check-wrapper {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
width: 26px;
height: 26px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--border-light);
display: grid;
place-items: center;
}

.equip-grid-view .equipamento-card .card-check-wrapper {
position: absolute;
top: 12px;
right: 12px;
z-index: 4;
}

.card-check-wrapper input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--primary);
cursor: pointer;
}

.btn-maintenance-active {
color: #92400e;
border-color: rgba(217, 119, 6, 0.62);
background: rgba(217, 119, 6, 0.14);
box-shadow: 0 2px 6px rgba(217, 119, 6, 0.16);
}
.btn-maintenance-active:hover {
color: #78350f;
border-color: rgba(217, 119, 6, 0.80);
background: rgba(217, 119, 6, 0.22);
box-shadow: 0 4px 10px rgba(217, 119, 6, 0.22);
}
.btn-maintenance-disabled {
color: #8ea1bc !important;
border-color: #cfdae9 !important;
background: #edf2f9 !important;
box-shadow: none !important;
opacity: 1 !important;
}
.btn-maintenance-disabled svg {
opacity: 0.75;
}
html.dark .btn-maintenance-active {
color: #fde68a;
border-color: rgba(251, 191, 36, 0.62);
background: rgba(217, 119, 6, 0.24);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
html.dark .btn-maintenance-active:hover {
color: #fef3c7;
border-color: rgba(253, 211, 77, 0.82);
background: rgba(245, 158, 11, 0.36);
}
html.dark .btn-maintenance-disabled {
color: #93a6c3 !important;
border-color: #3f526d !important;
background: #213048 !important;
}


/* ======================================================================
BATCH ACTIONS (Toolbar)
====================================================================== */
.col-check {
width: 40px;
text-align: center;
}
.col-check input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--primary);
cursor: pointer;
}

.batch-toolbar {
position: fixed;
bottom: -80px;
left: 50%;
transform: translateX(-50%);
z-index: 900;
transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.batch-toolbar.active {
bottom: 90px;
}

.batch-toolbar-inner {
display: flex;
align-items: center;
gap: 12px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 12px 20px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(91, 55, 219, 0.15);
backdrop-filter: blur(12px);
}

html.dark .batch-toolbar-inner {
background: rgba(30, 41, 59, 0.95);
}

.batch-count {
font-size: 13px;
font-weight: 600;
color: var(--primary);
white-space: nowrap;
}

.batch-actions {
display: flex;
gap: 6px;
}


/* ======================================================================
COPY TO CLIPBOARD
====================================================================== */
.copyable {
display: inline-flex;
align-items: center;
gap: 6px;
position: relative;
}

.copy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--muted);
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
opacity: 0.5;
}
.copyable:hover .copy-btn {
opacity: 1;
}
.copy-btn:hover {
color: var(--primary);
border-color: var(--primary-light);
background: rgba(91, 55, 219, 0.06);
}
.copy-btn.copied {
color: var(--success);
border-color: var(--success);
background: rgba(16, 185, 129, 0.1);
opacity: 1;
}


/* ======================================================================
KEYBOARD SHORTCUTS OVERLAY
====================================================================== */
.shortcuts-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
justify-content: center;
align-items: center;
}
.shortcuts-overlay.active {
display: flex;
}

.shortcuts-modal {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
width: 480px;
max-width: 90vw;
max-height: 85vh;
overflow-y: auto;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
animation: modalIn 0.25s ease-out;
}

.shortcuts-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid var(--border);
}
.shortcuts-header h3 {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 600;
margin: 0;
color: var(--text);
}
.shortcuts-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--muted);
font-size: 18px;
cursor: pointer;
transition: all 0.2s;
}
.shortcuts-close:hover {
color: var(--text);
background: rgba(239, 68, 68, 0.1);
border-color: #ef4444;
}

.shortcuts-body {
padding: 20px 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}

.shortcut-group h4 {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin: 0 0 12px;
}

.shortcut-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
font-size: 13px;
color: var(--text);
}
.shortcut-row kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 6px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 4px;
font-family: inherit;
font-size: 11px;
font-weight: 600;
color: var(--text);
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}


/* ======================================================================
LOADING SKELETONS
====================================================================== */
.skeleton {
position: relative;
overflow: hidden;
background: var(--bg-elevated) !important;
color: transparent !important;
border-color: transparent !important;
border-radius: var(--radius);
pointer-events: none;
user-select: none;
}
.skeleton * {
visibility: hidden;
}
.skeleton::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(91, 55, 219,0.06), transparent);
animation: skeletonShimmer 1.5s infinite;
}

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

.skeleton-text {
display: block;
height: 14px;
border-radius: 4px;
background: var(--bg-elevated);
position: relative;
overflow: hidden;
}
.skeleton-text::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(91, 55, 219,0.06), transparent);
animation: skeletonShimmer 1.5s infinite;
}
.skeleton-text.w-50 { width: 50%; }
.skeleton-text.w-75 { width: 75%; }
.skeleton-text.w-100 { width: 100%; }


/* ======================================================================
HOME PAGE (Página Inicial)
====================================================================== */
.home-hero {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 32px;
padding: 32px 36px;
background: linear-gradient(135deg, rgba(91, 55, 219,0.08), var(--analytics-ok-soft));
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}

.home-hero h2 {
font-size: 28px;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--text);
margin-bottom: 4px;
}
.home-hero p {
color: var(--muted);
font-size: 15px;
}

.home-hero-actions { flex-shrink: 0; }

/* Home Stats Row */
.home-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 28px;
}

.home-stat-card {
display: flex;
align-items: center;
gap: 14px;
padding: 20px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
transition: border-color 0.2s, box-shadow 0.2s;
}
.home-stat-card:hover {
border-color: var(--primary-light);
box-shadow: var(--shadow);
}

.home-stat-icon {
width: 44px;
height: 44px;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.home-stat-total { background: rgba(91, 55, 219,0.1); color: var(--primary); }
.home-stat-ok { background: var(--analytics-ok-soft); color: var(--analytics-ok); }
.home-stat-nok { background: var(--analytics-nok-soft); color: var(--analytics-nok); }
.home-stat-warn { background: var(--analytics-warning-soft); color: var(--analytics-warning); }

.home-stat-data { display: flex; flex-direction: column; }
.home-stat-value { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.1; }
.home-stat-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.home-stat-pct { font-size: 11px; color: var(--accent); font-weight: 700; }

/* Home Types */
.home-types {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.home-type-card {
padding: 18px 20px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.home-type-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.home-type-header strong { font-size: 22px; color: var(--text); }
.home-type-bar {
display: flex;
height: 8px;
border-radius: 4px;
overflow: hidden;
background: var(--border-light);
margin-bottom: 10px;
}
.home-type-fill-ok { background: var(--analytics-ok); }
.home-type-fill-nok { background: var(--analytics-nok); }
.home-type-fill-vago { background: var(--analytics-warning); }
.home-type-pills { display: flex; gap: 6px; flex-wrap: wrap; }

/* Home Grid */
.home-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 20px;
}

.home-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
}
.home-card h3 {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 700;
color: var(--text);
margin-bottom: 18px;
}

.home-shortcuts {
display: flex;
flex-direction: column;
gap: 8px;
}
.home-shortcut {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border-radius: var(--radius);
transition: background 0.2s;
}
.home-shortcut:hover { background: var(--bg-alt); }
.home-shortcut-icon {
width: 40px;
height: 40px;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.home-shortcut strong { display: block; font-size: 14px; color: var(--text); }
.home-shortcut span { font-size: 12px; color: var(--muted); }

.home-activity { display: flex; flex-direction: column; gap: 4px; }
.home-activity-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: var(--radius);
transition: background 0.2s;
}
.home-activity-item:hover { background: var(--bg-alt); }

.status-dot-sm {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.status-dot-ok { background: var(--analytics-ok); }
.status-dot-nok { background: var(--analytics-nok); }
.status-dot-vago { background: var(--analytics-warning); }
.status-dot-manutencao { background: var(--analytics-manut); }

.home-activity-info { flex: 1; min-width: 0; }
.home-activity-info strong { display: block; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-activity-info > span { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

.home-card-link {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 16px;
padding: 10px;
border-top: 1px solid var(--border);
font-size: 13px;
font-weight: 600;
color: var(--primary);
transition: color 0.2s;
}
.home-card-link:hover { color: var(--primary-dark); }


/* ======================================================================
ANALYTICS DASHBOARD PAGE
====================================================================== */
.dash-hero {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin-bottom: 32px;
}
.dash-hero h2 {
font-size: 26px;
font-weight: 800;
letter-spacing: -0.03em;
display: flex;
align-items: center;
gap: 10px;
color: var(--text);
}
.dash-subtitle {
color: var(--muted);
font-size: 14px;
margin-top: 4px;
}
.dash-hero-actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }

/* ── Dashboard Tabs / Sub-menu ── */
.dash-tabs {
display: flex;
gap: 6px;
margin-bottom: 28px;
background: var(--card-bg);
border-radius: 14px;
padding: 6px;
border: 1px solid var(--border);
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.dash-tab {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: var(--muted);
text-decoration: none;
transition: all 0.25s ease;
flex: 1;
justify-content: center;
white-space: nowrap;
}
.dash-tab:hover {
color: var(--text);
background: var(--surface);
}
.dash-tab.active {
background: linear-gradient(135deg, var(--btn-purple-start) 0%, var(--btn-purple-mid) 58%, var(--btn-purple-end) 100%);
border: 1px solid var(--btn-purple-border);
color: #fff;
box-shadow: 0 6px 14px rgba(9, 35, 78, 0.22);
}
.dash-tab.active svg { stroke: #fff; }
.dash-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 22px;
padding: 0 7px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
background: rgba(0,0,0,0.08);
color: var(--muted);
}
.dash-tab.active .dash-tab-count {
background: rgba(255,255,255,0.2);
color: #fff;
}
html.dark .dash-tab-count {
background: rgba(255,255,255,0.08);
}
html.dark .dash-tab.active .dash-tab-count {
background: rgba(255,255,255,0.2);
}

/* ── Tab Content ── */
.dash-tab-content {
display: none;
}
.dash-tab-content.active {
display: block;
animation: fadeSlideIn 0.35s ease;
}
@keyframes fadeSlideIn {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: translateY(0); }
}

/* Bottom actions (mobile only) */
.dash-bottom-actions {
display: none;
flex-direction: column;
gap: 10px;
margin-top: 8px;
padding: 24px 0;
}
.dash-bottom-actions .btn {
width: 100%;
justify-content: center;
}

/* KPI Grid */
.kpi-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
margin-bottom: 28px;
}

/* Layout dedicado para KPIs da aba Monitoramento (4 cards por linha) */
.kpi-grid-monitoramento {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kpi-grid-monitoramento .kpi-card {
min-height: 98px;
}

@media (max-width: 1200px) {
.kpi-grid-monitoramento {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 640px) {
.kpi-grid-monitoramento {
grid-template-columns: 1fr;
}
}

.kpi-card {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 18px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
transition: all 0.2s;
position: relative;
overflow: hidden;
}
.kpi-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
border-radius: 4px 0 0 4px;
}
.kpi-card:hover {
box-shadow: var(--shadow);
transform: translateY(-2px);
cursor: pointer;
}

/* KPI Card Interactive — Estado ativo ao clicar */
.kpi-card.kpi-active {
border-color: var(--primary) !important;
box-shadow: 0 0 0 3px rgba(91, 55, 219,0.2), var(--shadow) !important;
transform: translateY(-3px);
}
.kpi-card.kpi-active.kpi-ok { border-color: var(--analytics-ok) !important; box-shadow: 0 0 0 3px var(--analytics-ok-ring), var(--shadow) !important; }
.kpi-card.kpi-active.kpi-nok { border-color: var(--analytics-nok) !important; box-shadow: 0 0 0 3px var(--analytics-nok-ring), var(--shadow) !important; }
.kpi-card.kpi-active.kpi-manut { border-color: var(--analytics-manut) !important; box-shadow: 0 0 0 3px var(--analytics-manut-ring), var(--shadow) !important; }
.kpi-card.kpi-active.kpi-pendencia { border-color: var(--analytics-warning) !important; box-shadow: 0 0 0 3px var(--analytics-warning-ring), var(--shadow) !important; }
.kpi-card.kpi-active.kpi-backup { border-color: var(--analytics-backup) !important; box-shadow: 0 0 0 3px var(--analytics-manut-ring), var(--shadow) !important; }

/* Seção destacada quando scrollada via KPI */
.dash-section.section-highlighted {
animation: highlightSection 1.5s ease;
}
@keyframes highlightSection {
0% { box-shadow: 0 0 0 4px rgba(91, 55, 219,0.4); }
100% { box-shadow: none; }
}

.kpi-total::before { background: var(--primary); }
.kpi-ok::before { background: var(--analytics-ok); }
.kpi-nok::before { background: var(--analytics-nok); }
.kpi-vago::before { background: var(--analytics-warning); }
.kpi-pendencia::before { background: var(--analytics-warning); }
.kpi-manut::before { background: var(--analytics-manut); }
.kpi-manut .kpi-icon { background: var(--analytics-manut-soft); color: var(--analytics-manut); }
.kpi-backup::before { background: var(--analytics-backup); }

.kpi-icon {
width: 42px;
height: 42px;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.kpi-total .kpi-icon { background: rgba(91, 55, 219,0.1); color: var(--primary); }
.kpi-ok .kpi-icon { background: var(--analytics-ok-soft); color: var(--analytics-ok); }
.kpi-nok .kpi-icon { background: var(--analytics-nok-soft); color: var(--analytics-nok); }
.kpi-vago .kpi-icon { background: var(--analytics-warning-soft); color: var(--analytics-warning); }
.kpi-pendencia .kpi-icon { background: var(--analytics-warning-soft); color: var(--analytics-warning); }
.kpi-pendencia.pulse-alert {
animation: pulseAlert 2s ease-in-out infinite;
border-color: var(--analytics-warning-ring);
}
.kpi-backup .kpi-icon { background: var(--analytics-manut-soft); color: var(--analytics-backup); }

.kpi-data { display: flex; flex-direction: column; min-width: 0; }
.kpi-value { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.1; }
.kpi-label { font-size: 11px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.kpi-pct { font-size: 12px; font-weight: 700; }
.kpi-pct-ok { color: var(--analytics-ok); }
.kpi-pct-nok { color: var(--analytics-nok); }
.kpi-pct-vago { color: var(--analytics-warning); }
.kpi-pct-manut { color: var(--analytics-manut); }
.kpi-sub { font-size: 10px; color: var(--muted-light); }

/* Analytics: status por equipamentos com leitura mais forte no modo claro. */
body:not(.login-page) .kpi-grid-equipamentos {
grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
gap: 14px;
}

body:not(.login-page) .kpi-grid-equipamentos .kpi-card {
isolation: isolate;
min-height: 112px;
border-color: rgba(111, 135, 168, 0.28);
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
box-shadow: 0 12px 24px rgba(40, 65, 97, 0.08);
}

body:not(.login-page) .kpi-grid-equipamentos .kpi-card::before {
width: 100%;
height: 4px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

body:not(.login-page) .kpi-grid-equipamentos .kpi-card::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.72;
pointer-events: none;
}

body:not(.login-page) .kpi-grid-equipamentos .kpi-card > * {
position: relative;
z-index: 1;
}

body:not(.login-page) .kpi-grid-equipamentos .kpi-icon {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.64), 0 8px 18px rgba(17, 38, 68, 0.12);
}

body:not(.login-page) .kpi-grid-equipamentos .kpi-total::after {
background: radial-gradient(circle at top right, rgba(91, 55, 219, 0.18), transparent 56%), linear-gradient(135deg, rgba(91, 55, 219, 0.08), transparent 54%);
}

body:not(.login-page) .kpi-grid-equipamentos .kpi-ok::after {
background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.20), transparent 56%), linear-gradient(135deg, rgba(16, 185, 129, 0.09), transparent 54%);
}

body:not(.login-page) .kpi-grid-equipamentos .kpi-nok::after {
background: radial-gradient(circle at top right, rgba(239, 68, 68, 0.20), transparent 56%), linear-gradient(135deg, rgba(239, 68, 68, 0.09), transparent 54%);
}

body:not(.login-page) .kpi-grid-equipamentos .kpi-manut::after {
background: radial-gradient(circle at top right, rgba(139, 92, 246, 0.22), transparent 56%), linear-gradient(135deg, rgba(139, 92, 246, 0.10), transparent 54%);
}

body:not(.login-page) .kpi-grid-equipamentos .kpi-pendencia::after {
background: radial-gradient(circle at top right, rgba(245, 158, 11, 0.22), transparent 56%), linear-gradient(135deg, rgba(245, 158, 11, 0.10), transparent 54%);
}

body:not(.login-page) .kpi-grid-equipamentos .kpi-backup::after {
background: radial-gradient(circle at top right, rgba(79, 70, 229, 0.20), transparent 56%), linear-gradient(135deg, rgba(79, 70, 229, 0.09), transparent 54%);
}

/* Operation Bar */
.operation-bar {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
margin-bottom: 28px;
}
.operation-bar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.operation-bar-header h3 {
font-size: 15px;
font-weight: 700;
color: var(--text);
}
.operation-pct {
font-size: 28px;
font-weight: 800;
color: var(--analytics-ok);
}
.operation-track {
display: flex;
height: 12px;
border-radius: 6px;
overflow: hidden;
background: var(--border-light);
margin-bottom: 12px;
}
.operation-fill { transition: width 0.6s ease; }
.operation-ok { background: var(--analytics-ok); }
.operation-nok { background: var(--analytics-nok); }
.operation-vago { background: var(--analytics-warning); }
.operation-manut { background: var(--analytics-manut); }
.operation-legend {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.operation-legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--muted);
font-weight: 500;
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.dot-ok { background: var(--analytics-ok); }
.dot-nok { background: var(--analytics-nok); }
.dot-vago { background: var(--analytics-warning); }
.dot-manut { background: var(--analytics-manut); }

/* Dash Sections */
.dash-section {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
margin-bottom: 24px;
}
.dash-section .section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.section-badge {
font-size: 12px;
font-weight: 600;
padding: 4px 12px;
border-radius: var(--radius-full);
background: rgba(91, 55, 219,0.1);
color: var(--primary);
}
.section-badge-danger { background: var(--analytics-nok-soft); color: var(--analytics-nok); }
.section-badge-warning { background: var(--analytics-warning-soft); color: var(--analytics-warning); }

/* Master Health Grid */
.master-health-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
}
.master-health-card {
padding: 18px 20px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
transition: all 0.2s;
}
.master-health-card:hover { box-shadow: var(--shadow-sm); }
.master-health-card.health-good { border-left: 4px solid var(--analytics-ok); }
.master-health-card.health-warn { border-left: 4px solid var(--analytics-warning); }
.master-health-card.health-bad { border-left: 4px solid var(--analytics-nok); }

.master-health-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.master-health-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.master-health-name {
font-weight: 700;
font-size: 14px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.2s;
}
.master-health-name:hover { color: var(--primary); }
.master-health-pct {
font-size: 20px;
font-weight: 800;
flex-shrink: 0;
}
.health-good .master-health-pct { color: var(--analytics-ok); }
.health-warn .master-health-pct { color: var(--analytics-warning); }
.health-bad .master-health-pct { color: var(--analytics-nok); }

.master-health-local {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--muted);
margin-bottom: 10px;
}
.master-health-bar {
display: flex;
height: 6px;
border-radius: 3px;
overflow: hidden;
background: var(--border-light);
margin-bottom: 10px;
}
.health-bar-ok { background: var(--analytics-ok); }
.health-bar-nok { background: var(--analytics-nok); }
.health-bar-vago { background: var(--analytics-warning); }
.master-health-stats {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.mh-stat {
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-full);
}
.mh-ok { background: var(--analytics-ok-soft); color: var(--analytics-ok); }
.mh-nok { background: var(--analytics-nok-soft); color: var(--analytics-nok); }
.mh-vago { background: var(--analytics-warning-soft); color: var(--analytics-warning); }
.mh-total { background: var(--bg-alt); color: var(--muted); }

/* Pendencias List */
.pendencias-list { display: flex; flex-direction: column; gap: 4px; }
.pendencia-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 14px 16px;
border-radius: var(--radius);
transition: background 0.2s;
}
.pendencia-item:hover { background: var(--bg-alt); }
.pendencia-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.pendencia-info strong { display: block; font-size: 13px; color: var(--text); }
.pendencia-meta { font-size: 11px; color: var(--muted); }
.pendencia-right { flex: 1; min-width: 0; text-align: right; }
.pendencia-text {
font-size: 13px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 400px;
margin-left: auto;
}
.pendencia-date { font-size: 11px; color: var(--muted-light); }

/* Dual Grid */
.dash-dual-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 24px;
}

/* Activity Feed */
.activity-feed { display: flex; flex-direction: column; gap: 2px; max-height: 500px; overflow-y: auto; }
.activity-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 12px;
border-radius: var(--radius);
transition: background 0.2s;
}
.activity-item:hover { background: var(--bg-alt); }
.activity-dot {
width: 10px;
height: 10px;
border-radius: 50%;
margin-top: 4px;
flex-shrink: 0;
}
.activity-content { flex: 1; min-width: 0; }
.activity-main {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 3px;
}
.activity-main strong { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.activity-time { margin-left: auto; }

/* Timeline Compact */
.timeline-compact .timeline-item { padding-bottom: 14px; }
.timeline-compact .timeline-content { padding: 8px 12px; }
.timeline-desc { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Empty State Small */
.empty-state-sm {
text-align: center;
padding: 32px 16px;
color: var(--muted);
font-size: 13px;
}

/* Tipo Detail Grid */
.tipo-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.tipo-detail-card {
text-align: center;
padding: 24px 20px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
}
.tipo-detail-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.tipo-detail-total { font-size: 13px; color: var(--muted); font-weight: 600; }
.tipo-detail-ring {
width: 100px;
height: 100px;
margin: 0 auto 16px;
position: relative;
}
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { stroke: var(--border-light); }
.ring-fill { stroke: var(--analytics-ok); stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.ring-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 800;
color: var(--text);
}
.tipo-detail-stats {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.td-stat {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--muted);
}
.td-stat strong { color: var(--text); }

/* ============================================
MINI CHARTS (HOME)
============================================ */
.mini-charts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-top: 24px;
}
.mini-chart-card {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 20px;
}
.mini-chart-card h4 {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-bottom: 12px;
}
.mini-chart-body { height: 180px; position: relative; }

/* ============================================
PULSE ANIMATION (PENDÊNCIAS)
============================================ */
@keyframes pulseAlert {
0%, 100% { box-shadow: 0 0 0 0 rgba(207, 102, 102, 0.28); }
50% { box-shadow: 0 0 0 8px rgba(207, 102, 102, 0); }
}
.stat-card.alert.pulse-alert {
animation: pulseAlert 2s ease-in-out infinite;
border-color: var(--analytics-nok-ring);
}

/* ============================================
ZEBRA STRIPES + STATUS ICONS
============================================ */
.table tbody tr:nth-child(even) { background: rgba(0,0,0,0.015); }
html.dark .table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.table tbody tr:hover { background: rgba(91, 55, 219, 0.04); }

/* Analytics: tabela operacional de alarmes */
.dash-table-wrap {
width: 100%;
overflow: auto;
border: 1px solid var(--border-light);
border-radius: var(--radius);
background: var(--surface);
}

.dash-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}

.dash-table thead th {
padding: 11px 14px;
font-size: var(--text-xs);
font-weight: 850;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text-secondary);
background: var(--bg-alt);
border-bottom: 1px solid var(--border-light);
text-align: left;
white-space: nowrap;
}

.dash-table tbody td {
padding: 12px 14px;
border-bottom: 1px solid var(--border-light);
color: var(--text-secondary);
vertical-align: middle;
font-size: var(--text-sm);
}

.dash-table tbody tr:last-child td { border-bottom: 0; }
.dash-table tbody tr { transition: background 160ms ease; }
.dash-table tbody tr:hover { background: rgba(36, 77, 142, 0.06); }

.dash-monitor-alerts {
padding: 18px;
}

.dash-monitor-alerts .section-header {
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-light);
}

.dash-monitor-alerts-wrap {
max-height: 560px;
}

.dash-monitor-alerts-table th:nth-child(1),
.dash-monitor-alerts-table td:nth-child(1) {
width: 92px;
}

.dash-monitor-alerts-table th:nth-child(3),
.dash-monitor-alerts-table td:nth-child(3) {
width: 180px;
}

.dash-monitor-alerts-table th:nth-child(4),
.dash-monitor-alerts-table td:nth-child(4) {
width: 140px;
}

.dash-monitor-alert-main {
display: grid;
gap: 3px;
min-width: 0;
}

.dash-monitor-alert-main strong {
display: block;
color: var(--text);
font-weight: 850;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.dash-monitor-alert-main small {
display: block;
color: var(--muted);
font-size: var(--text-xs);
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.dash-monitor-alert-equip {
font-weight: 750;
color: var(--text) !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.dash-monitor-alert-time {
color: var(--muted) !important;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}

.dash-monitor-alerts .badge-sm {
min-width: 48px;
justify-content: center;
font-weight: 850;
letter-spacing: .02em;
}

html.dark .dash-table-wrap {
background: #17243a;
border-color: #2f4468;
}

html.dark .dash-table thead th {
background: #20304d;
border-color: #344b70;
color: #c9d8ee;
}

html.dark .dash-table tbody td {
border-color: #273b5c;
color: #d8e5f7;
}

html.dark .dash-table tbody tr:hover {
background: rgba(95, 143, 203, 0.1);
}

html.dark .dash-monitor-alert-main strong,
html.dark .dash-monitor-alert-equip {
color: #f3f7ff !important;
}

html.dark .dash-monitor-alert-main small,
html.dark .dash-monitor-alert-time {
color: #aebfda !important;
}

@media (max-width: 760px) {
.dash-table thead { display: none; }
.dash-table,
.dash-table tbody,
.dash-table tr,
.dash-table td { display: block; width: 100%; }
.dash-table tbody tr {
padding: 10px 12px;
border-bottom: 1px solid var(--border-light);
}
.dash-table tbody td {
padding: 4px 0;
border: 0;
}
.dash-table tbody td::before {
content: attr(data-label);
display: block;
font-size: 10px;
font-weight: 850;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 2px;
}
.dash-monitor-alerts-table th:nth-child(1),
.dash-monitor-alerts-table td:nth-child(1),
.dash-monitor-alerts-table th:nth-child(3),
.dash-monitor-alerts-table td:nth-child(3),
.dash-monitor-alerts-table th:nth-child(4),
.dash-monitor-alerts-table td:nth-child(4) {
width: 100%;
}
.dash-monitor-alert-main strong,
.dash-monitor-alert-main small {
white-space: normal;
}
}

/* ============================================
PRINT FRIENDLY (ANALYTICS)
============================================ */
@media print {
.topbar, .sidebar, .sidebar-overlay, .mobile-nav,
.footer, .toast-container, .shortcuts-overlay,
.confirm-overlay, .lightbox-overlay, .password-modal-overlay,
.dash-hero-actions, .breadcrumb,
.batch-toolbar, .dash-tabs,
.dash-bottom-actions { display: none !important; }

/* Somente a aba ativa aparece na impressão */
.dash-tab-content { display: none !important; }
.dash-tab-content.active { display: block !important; }

/* Título da aba impressa */
.dash-print-tab-title {
display: block !important;
font-size: 16px;
font-weight: 700;
color: #000;
border-bottom: 2px solid #333;
padding-bottom: 8px;
margin-bottom: 16px;
}

.main-content {
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
}

body { background: #fff !important; color: #000 !important; }

.kpi-card, .chart-card, .master-health-card,
.dash-section, .tipo-detail-card {
break-inside: avoid;
box-shadow: none !important;
border: 1px solid #ddd !important;
}

.charts-grid { grid-template-columns: 1fr 1fr !important; }
.kpi-grid { grid-template-columns: repeat(3, 1fr) !important; }

.dash-hero { padding: 16px 0 !important; }
.dash-hero h2 { font-size: 20px !important; }
.operation-bar { margin: 12px 0 !important; }

/* KPI cards interactive state não aparece na impressão */
.kpi-card.kpi-active {
border-color: #ddd !important;
box-shadow: none !important;
}
}

/* Título da aba para impressão — escondido na tela */
.dash-print-tab-title { display: none; }

/* ============================================
DARK MODE BADGE OVERRIDES (5G)
============================================ */
html.dark .badge-master { background: rgba(67, 56, 202, 0.2); color: #a5b4fc; }
html.dark .badge-remota { background: rgba(5, 150, 105, 0.2); color: #6ee7b7; }
html.dark .badge-poi { background: rgba(217, 119, 6, 0.2); color: #fcd34d; }
html.dark .badge-dpu { background: rgba(220, 38, 38, 0.2); color: #fca5a5; }
html.dark .badge-dau { background: rgba(5, 150, 105, 0.15); color: #5eead4; }
html.dark .badge-deu { background: rgba(79, 70, 229, 0.2); color: #c4b5fd; }
html.dark .badge-acu { background: rgba(217, 119, 6, 0.15); color: #fdba74; }

/* ============================================
PROFESSIONAL ENHANCEMENTS v3.1
============================================ */

/* Smooth focus visible for accessibility */
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
border-radius: 4px;
}

/* Better form field transitions */
.form-control {
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

/* Subtle card lift effect */
.stat-card,
.config-card,
.backup-panel,
.equipamento-detail {
transition: transform var(--transition), box-shadow var(--transition);
}

.stat-card:hover,
.config-card:hover {
transform: translateY(-2px);
}

/* Better table row interactions */
.table tbody tr {
transition: background var(--transition-fast);
}

/* Loading spinner for buttons */
.spinner-sm {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spinnerRotate 0.6s linear infinite;
vertical-align: middle;
}

@keyframes spinnerRotate {
to { transform: rotate(360deg); }
}

/* Button disabled state */
.btn:disabled,
.btn[disabled] {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}

/* Enhanced empty state */
.empty-state {
text-align: center;
padding: 48px 24px;
}

.empty-state svg {
margin-bottom: 16px;
opacity: 0.5;
}

.empty-state h4 {
font-size: 16px;
color: var(--text-secondary);
margin-bottom: 8px;
}

.empty-state p {
font-size: 14px;
color: var(--muted);
}

/* Better selection color */
::selection {
background: rgba(91, 55, 219, 0.2);
color: var(--text);
}

/* Improved scrollbar in dark mode */
html.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

/* ============================================
INFO SITE — Page Styles
============================================ */

/* Info Site — Seções */
.info-section {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
margin-bottom: 20px;
box-shadow: var(--shadow-sm);
overflow: hidden;
}

.info-section__header {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 24px;
border-bottom: 1px solid var(--border-light);
background: var(--bg);
}

.info-section__header svg {
color: var(--primary);
flex-shrink: 0;
}

.info-section__header h3 {
font-size: 15px;
font-weight: 700;
color: var(--text);
margin: 0;
}

.info-section__body {
padding: 24px;
}

/* Info Site - Seletor de Site */
.site-picker-toolbar {
display: grid;
grid-template-columns: minmax(260px, 1.5fr) minmax(180px, 1fr) minmax(180px, 1fr);
gap: 12px;
margin-bottom: 12px;
}

.site-picker-toolbar__search,
.site-picker-toolbar__filter {
min-width: 0;
}

.site-picker-toolbar label {
display: block;
font-size: 12px;
color: var(--muted);
margin-bottom: 6px;
font-weight: 600;
}

.site-picker-summary {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--muted);
margin-bottom: 14px;
}

.site-picker-summary strong {
color: var(--text);
font-size: 16px;
}

.site-picker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
margin-bottom: 14px;
}

.site-picker-card {
appearance: none;
border: 1px solid var(--border);
border-radius: var(--radius);
background: linear-gradient(180deg, var(--surface), var(--bg-alt));
color: var(--text);
text-align: left;
padding: 14px;
cursor: pointer;
box-shadow: var(--shadow-xs);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.site-picker-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}

.site-picker-card.selected {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-subtle);
background: linear-gradient(180deg, rgba(91, 55, 219, 0.07), var(--surface));
}

.site-picker-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}

.site-picker-card__head h4 {
margin: 0;
font-size: 16px;
line-height: 1.2;
}

.site-picker-card__head p {
margin: 2px 0 0;
color: var(--muted);
font-size: 12px;
font-weight: 600;
}

.site-picker-card__meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
}

.site-picker-card__address {
margin: 0;
color: var(--text-secondary);
font-size: 12px;
line-height: 1.45;
min-height: 34px;
}

.site-picker-empty {
margin-bottom: 14px;
padding: 28px 16px;
}

/* Hints */
.info-cep-search {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}

.info-cep-search-btn {
min-height: 44px;
padding-inline: 14px;
}

/* Info site: CEP primeiro, Rua segundo, Numero terceiro */
.info-site-address-row .group-cep { order: 1; }
.info-site-address-row .group-logradouro { order: 2; }
.info-site-address-row .group-numero { order: 3; }

.info-hint {
display: block;
margin-top: 4px;
font-size: 12px;
color: var(--muted);
}

/* Toggle switch */
.info-toggle {
display: flex;
align-items: center;
gap: 12px;
padding-top: 8px;
}

.info-toggle__label {
font-size: 14px;
color: var(--text-secondary);
font-weight: 500;
}

.info-switch {
position: relative;
width: 44px;
height: 24px;
display: inline-block;
}

.info-switch input {
opacity: 0;
width: 0;
height: 0;
}

.info-switch__slider {
position: absolute;
inset: 0;
background: var(--muted-light);
border-radius: 24px;
cursor: pointer;
transition: var(--transition);
}

.info-switch__slider::before {
content: '';
position: absolute;
width: 18px;
height: 18px;
left: 3px;
bottom: 3px;
background: white;
border-radius: 50%;
transition: var(--transition);
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.info-switch input:checked + .info-switch__slider {
background: var(--success, #22c55e);
}

.info-switch input:checked + .info-switch__slider::before {
transform: translateX(20px);
}

/* Fotos grid */
.info-photos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 420px));
gap: 18px;
align-items: start;
justify-content: start;
}

.info-photo-card {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
min-width: 0;
}

.info-photo-card > label {
font-weight: 600;
font-size: 13px;
color: var(--text-secondary);
}

/* Thumbnail com overlay */
.info-photo-thumb {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border-light);
background: var(--bg);
height: 154px;
box-shadow: var(--shadow-sm);
}

.info-photo-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease, filter 0.35s ease;
}

.info-photo-thumb--logo img {
object-fit: contain;
padding: 16px;
background: #071124;
}

.info-photo-thumb:hover img {
transform: scale(1.03);
filter: brightness(0.7);
}

.info-photo-thumb--logo:hover img {
transform: none;
filter: brightness(0.82);
}

.info-photo-thumb__overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
opacity: 0;
transition: opacity 0.25s ease;
z-index: 2;
}

.info-photo-thumb:hover .info-photo-thumb__overlay {
opacity: 1;
}

.info-photo-btn {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.95);
color: #0f172a;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 3px 12px rgba(0,0,0,0.25);
padding: 0;
line-height: 1;
-webkit-appearance: none;
appearance: none;
}

.info-photo-btn:hover {
background: #ffffff;
transform: scale(1.15);
box-shadow: 0 5px 18px rgba(0,0,0,0.3);
}

.info-photo-btn--danger {
background: rgba(239, 68, 68, 0.92);
color: #fff;
}

.info-photo-btn--danger:hover {
background: #dc2626;
color: #fff;
}

.info-photo-thumb__badge {
position: absolute;
bottom: 8px;
left: 8px;
background: rgba(15, 23, 42, 0.75);
color: white;
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 20px;
backdrop-filter: blur(4px);
z-index: 1;
}

/* Upload vazio */
.info-photo-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 24px;
border: 2px dashed var(--border);
border-radius: var(--radius-lg);
color: var(--muted);
background: var(--bg);
height: 154px;
cursor: pointer;
transition: all 0.25s ease;
}

.info-photo-empty:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-subtle);
}

.info-photo-empty span {
font-size: 13px;
font-weight: 500;
}

/* Botão substituir foto */
.info-upload-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 18px;
min-height: 48px;
border-radius: var(--radius-lg);
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
background: var(--bg);
border: 1px solid var(--border);
cursor: pointer;
transition: all 0.25s ease;
align-self: stretch;
width: 100%;
}

.info-upload-btn:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-subtle);
}

.info-upload-btn input[type="file"] {
display: none;
}

/* Alertas Info */
.info-alert {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-radius: var(--radius-lg);
margin-bottom: 20px;
font-size: 14px;
font-weight: 500;
}

.info-alert--success {
background: rgba(34, 197, 94, 0.08);
color: var(--success, #16a34a);
border: 1px solid rgba(34, 197, 94, 0.18);
}

.info-alert--error {
background: rgba(239, 68, 68, 0.08);
color: var(--danger, #dc2626);
border: 1px solid rgba(239, 68, 68, 0.18);
}

.info-alert.is-hiding {
opacity: 0;
transform: translateY(-8px);
transition: opacity 260ms ease, transform 260ms ease;
}

.mobile-help-trigger {
display: none;
}

.mobile-intro-help .info-alert-copy {
min-width: 0;
}

/* Checkbox grid operadoras */
.info-checkbox-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 4px;
}

.form-group label.info-checkbox-item,
.info-checkbox-item {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
border: 2px solid var(--border);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 13.5px;
font-weight: 500;
color: var(--text-secondary);
background: var(--surface);
user-select: none;
margin-bottom: 0;
}

.info-checkbox-item:hover {
border-color: var(--primary-light);
background: var(--primary-subtle);
}

.info-checkbox-item input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}

.info-checkbox-box {
width: 20px;
height: 20px;
border: 2px solid var(--muted-light);
border-radius: 6px;
flex-shrink: 0;
position: relative;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}

.info-checkbox-box::after {
content: '';
display: block;
width: 5px;
height: 9px;
border: solid transparent;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg) translateY(-1px);
transition: all 0.15s ease;
}

/* Checked state */
.info-checkbox-item:has(input:checked) {
border-color: var(--primary);
background: var(--primary-subtle);
color: var(--primary-dark);
font-weight: 600;
}

.info-checkbox-item:has(input:checked) .info-checkbox-box {
background: var(--primary);
border-color: var(--primary);
}

.info-checkbox-item:has(input:checked) .info-checkbox-box::after {
border-color: white;
}

.info-checkbox-text {
display: inline-flex;
align-items: center;
line-height: 1.2;
}

@media (max-width: 768px) {
.info-photos-grid {
grid-template-columns: 1fr;
}
.info-cep-search {
grid-template-columns: 1fr;
}
.info-cep-search-btn {
width: 100%;
}
.info-photo-thumb__overlay {
opacity: 1;
}
.info-section__body {
padding: 16px;
}
.info-checkbox-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}

/* ============================================
NODE HUB v4 — NOVOS COMPONENTES
============================================ */

/* ── User Dropdown HUD ── */
.topbar-user {
position: relative;
cursor: pointer;
user-select: none;
}
.topbar-user .dropdown-chevron {
transition: transform 0.2s;
opacity: 0.6;
}
.topbar-user.open .dropdown-chevron {
transform: rotate(180deg);
}
.user-dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 260px;
background: rgba(9, 31, 68, 0.98);
border: 1px solid var(--header-border);
border-radius: var(--radius-lg);
box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.15);
z-index: 1000;
overflow: hidden;
color: var(--header-text);
}
.topbar-user.open .user-dropdown { display: block; }
.user-dropdown-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: rgba(255, 255, 255, 0.05);
border-bottom: 1px solid var(--header-border);
}
.user-dropdown-header strong {
display: block;
font-size: 14px;
color: var(--header-text);
}
.user-dropdown-header small {
display: block;
font-size: 12px;
color: #bed0ed;
word-break: break-all;
}
.user-dropdown-divider {
height: 1px;
background: var(--header-border);
}
.user-dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
color: var(--header-text);
font-size: 13px;
font-weight: 500;
transition: background 0.15s;
text-decoration: none;
}
.user-dropdown-item:hover { background: rgba(143, 116, 255, 0.2); }
.user-dropdown-item svg { color: #bed0ed; flex-shrink: 0; }
.user-dropdown-logout { color: #f87171; }
.user-dropdown-logout svg { color: #f87171; }
.user-dropdown-logout:hover { background: rgba(239,68,68,0.12); }

/* ── Sidebar Separator ── */
.sidebar-separator {
padding: 18px 20px 6px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: rgba(148,163,184,0.5);
}
.sidebar-separator span { display: block; }

/* ── Sidebar badge variants ── */
.sidebar-badge.badge-warning {
background: #f59e0b;
color: #fff;
}
.sidebar-badge.badge-danger {
background: #ef4444;
color: #fff;
}

/* ── Page Header Flex ── */
.page-header-flex {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 28px;
flex-wrap: wrap;
gap: 16px;
}
.page-header-flex .page-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 22px;
font-weight: 800;
color: var(--text);
margin: 0;
}
.page-header-flex .page-title svg { color: var(--primary); }
.page-subtitle {
font-size: 13px;
color: var(--muted);
margin-top: 4px;
}

/* ── Modal Overlay (Manutenção, Spare Parts) ── */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 9999;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal-overlay.active {
display: flex;
}
.modal-overlay .modal-content {
background: var(--card-bg, #ffffff);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
width: 100%;
max-width: 640px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
margin: 0;
animation: modalSlideIn 0.25s ease-out;
}
@keyframes modalSlideIn {
from { opacity: 0; transform: translateY(-12px) scale(0.98); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-overlay .modal-content.modal-lg {
max-width: 800px;
}
/* Form inside modal must participate in flex layout */
.modal-overlay .modal-content > form {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
.modal-overlay .modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--border);
background: var(--card-bg, #ffffff);
}
.modal-overlay .modal-header h3 {
font-size: 17px;
font-weight: 700;
color: var(--text);
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.modal-overlay .modal-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: var(--bg-alt);
color: var(--muted);
border-radius: var(--radius);
cursor: pointer;
transition: all 0.15s;
font-size: 18px;
}
.modal-overlay .modal-close:hover {
background: var(--border);
color: var(--text);
}
.modal-overlay .modal-body {
padding: 24px;
overflow-y: auto;
flex: 1;
background: var(--card-bg, #ffffff);
}
.modal-overlay .modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 16px 24px;
border-top: 1px solid var(--border);
background: var(--bg-alt, #f1f5f9);
}

/* ── Modal Form Overrides ── */
.modal-overlay .form-row {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 16px;
}
.modal-overlay .form-group {
margin-bottom: 4px;
}
.modal-overlay .form-group label {
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 13px;
color: var(--text-secondary);
}
.modal-overlay .form-group .required { color: var(--danger); }

.modal-overlay .form-control {
width: 100%;
padding: 10px 14px;
border: 1.5px solid var(--border);
border-radius: var(--radius);
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--text);
background: var(--surface);
transition: var(--transition);
box-sizing: border-box;
}
.modal-overlay .form-control:hover { border-color: var(--muted-light); }
.modal-overlay .form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(91, 55, 219, 0.12);
}
.modal-overlay .form-control::placeholder { color: var(--muted-light); }

.modal-overlay select.form-control {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.modal-overlay textarea.form-control {
resize: vertical;
font-family: inherit;
min-height: 70px;
}

/* ── Form Grid (2 cols / 3 cols) ── */
.form-grid {
display: grid;
gap: 16px;
margin-bottom: 16px;
}
.form-grid-2 { grid-template-columns: 1fr 1fr; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid .form-group { margin-bottom: 0; }
.form-hint {
display: block;
font-size: 11px;
color: var(--muted);
margin-top: 4px;
}
.file-input {
padding: 8px 12px;
border: 1px dashed var(--border);
border-radius: var(--radius);
background: var(--bg-alt);
width: 100%;
cursor: pointer;
}

/* ── KPI Grid variants ── */
.kpi-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.kpi-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 28px; }
.kpi-grid-4 .kpi-card,
.kpi-grid-5 .kpi-card {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 18px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
transition: all 0.2s;
position: relative;
overflow: hidden;
}
.kpi-grid-4 .kpi-card::before,
.kpi-grid-5 .kpi-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
border-radius: 4px 0 0 4px;
}
.kpi-grid-4 .kpi-card:hover,
.kpi-grid-5 .kpi-card:hover {
box-shadow: var(--shadow);
transform: translateY(-2px);
}
.kpi-alert { border-color: var(--analytics-nok-ring); animation: pulseAlert 2s ease-in-out infinite; }
.kpi-info { display: flex; flex-direction: column; min-width: 0; }
.kpi-info .kpi-value { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.1; }
.kpi-info .kpi-label { font-size: 11px; color: var(--muted); font-weight: 500; }

/* ── Filter Bar ── */
.filter-bar {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
margin-bottom: 24px;
}
.filter-form {
display: flex;
align-items: flex-end;
gap: 12px;
flex-wrap: wrap;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.filter-group label {
font-size: 11px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.filter-group select,
.filter-group input {
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg);
color: var(--text);
font-size: 13px;
min-width: 150px;
}
.filter-search {
flex: 1;
min-width: 200px;
}
.filter-search input { width: 100%; }

/* ── Compatibility Panel ── */
.compat-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
margin-bottom: 24px;
}
.compat-card h3 {
font-size: 15px;
font-weight: 700;
color: var(--text);
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.compat-card h3 svg { color: #10b981; }
.compat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.compat-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: all 0.15s;
}
.compat-item:hover {
border-color: var(--primary);
box-shadow: 0 0 0 1px var(--primary);
}
.compat-item strong {
font-size: 13px;
color: var(--text);
}
.compat-item small {
display: block;
font-size: 11px;
color: var(--muted);
margin-top: 2px;
}

/* ── Stock indicators ── */
.stock-qty {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
}
.stock-ok { background: rgba(16,185,129,0.1); color: #10b981; }
.stock-low { background: rgba(239,68,68,0.1); color: #ef4444; }
.row-alert { background: rgba(239,68,68,0.04) !important; }
.row-alert td { border-color: rgba(239,68,68,0.15) !important; }
.row-notify-focus {
animation: rowNotifyFocus 2.4s ease;
background: rgba(59, 130, 246, 0.08) !important;
}
.row-notify-focus td {
border-color: rgba(59, 130, 246, 0.28) !important;
}
@keyframes rowNotifyFocus {
0% { background: rgba(59, 130, 246, 0.22); }
100% { background: rgba(59, 130, 246, 0.08); }
}

/* ── Detail View ── */
.detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.detail-section {
margin-bottom: 20px;
}
.detail-section h4 {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--primary);
margin-bottom: 12px;
padding-bottom: 6px;
border-bottom: 2px solid var(--primary);
display: inline-block;
}
.detail-row {
display: flex;
padding: 8px 0;
border-bottom: 1px solid var(--border);
}
.detail-row:last-child { border: none; }
.detail-label {
font-size: 12px;
font-weight: 600;
color: var(--muted);
min-width: 130px;
flex-shrink: 0;
}
.detail-value {
font-size: 13px;
color: var(--text);
font-weight: 500;
}
.detail-text {
font-size: 13px;
color: var(--text);
line-height: 1.6;
padding: 10px 14px;
background: var(--bg-alt);
border-radius: var(--radius);
border: 1px solid var(--border);
}

.manut-foto-upload {
border: 1px dashed var(--border);
border-radius: var(--radius);
padding: 12px;
background: var(--bg-alt);
}

.manut-foto-hint {
display: block;
margin-top: 8px;
font-size: 12px;
color: var(--muted);
}

.manut-foto-hint.is-error {
color: #dc2626;
font-weight: 600;
}

.manut-foto-list {
margin-top: 10px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}

.manut-foto-chip {
text-decoration: none;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
padding: 6px 8px;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
transition: var(--transition);
}

.manut-foto-chip img {
width: 28px;
height: 28px;
object-fit: cover;
border-radius: 6px;
border: 1px solid var(--border);
}

.manut-foto-chip:hover {
border-color: var(--primary-light);
background: var(--primary-subtle);
}

.manut-detalhe-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px;
border-radius: var(--radius);
border: 1px solid var(--border-light);
background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(91,55,219,0.08));
margin-bottom: 16px;
}

.manut-detalhe-main h4 {
margin: 0;
font-size: 18px;
color: var(--text);
font-weight: 700;
}

.manut-detalhe-main p {
margin: 4px 0 0;
font-size: 13px;
color: var(--text-secondary);
}

.manut-detalhe-badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
}

.manut-detalhe-fotos-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.manut-detalhe-foto-item {
text-decoration: none;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: var(--surface);
color: var(--text);
transition: var(--transition);
}

.manut-detalhe-foto-item img {
width: 100%;
height: 120px;
object-fit: cover;
display: block;
}

.manut-detalhe-foto-item span {
display: block;
padding: 8px 10px;
font-size: 12px;
font-weight: 600;
}

.manut-detalhe-foto-item:hover {
border-color: var(--primary-light);
transform: translateY(-1px);
}

.manut-detalhe-fotos-empty {
border: 1px dashed var(--border);
border-radius: var(--radius);
padding: 14px;
font-size: 13px;
color: var(--muted);
background: var(--bg-alt);
}

@media (max-width: 768px) {
.manut-detalhe-hero {
flex-direction: column;
align-items: flex-start;
}

.manut-detalhe-fotos-grid {
grid-template-columns: 1fr;
}
}

/* ── Badges (New) ── */
.badge-purple { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.badge-outline {
background: transparent;
border: 1px solid var(--border);
color: var(--muted);
}
.badge-blue { background: rgba(59,130,246,0.1); color: #3b82f6; }
.badge-sm { font-size: 10px; padding: 2px 6px; }

/* ── Equipment cell ── */
.equip-cell {
display: flex;
flex-direction: column;
gap: 2px;
}
.equip-cell strong { font-size: 13px; color: var(--text); }
.equip-cell small { font-size: 11px; color: var(--muted); }

/* ── Action Buttons ── */
.action-btns {
display: flex;
gap: 4px;
}
.btn-icon {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #c8d7ee;
background: linear-gradient(145deg, #ffffff, #edf4ff);
color: #4e648a;
border-radius: var(--radius);
cursor: pointer;
transition: transform 0.15s, background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
padding: 0;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.btn-icon:hover {
transform: translateY(-1px);
background: linear-gradient(135deg, #2a5ea6 0%, #6850e5 100%);
color: #ffffff;
border-color: rgba(147, 171, 230, 0.5);
box-shadow: 0 8px 16px rgba(34, 64, 120, 0.22);
}
.btn-icon-danger:hover {
background: linear-gradient(135deg, #f66e6e 0%, #e74b4b 100%);
color: #ffffff;
border-color: rgba(220, 38, 38, 0.36);
box-shadow: 0 8px 16px rgba(220, 38, 38, 0.2);
}

/* ── Empty State ── */
.empty-state {
text-align: center;
padding: 48px 20px;
color: var(--muted);
}
.empty-state svg { margin-bottom: 12px; opacity: 0.4; }
.empty-state p { font-size: 14px; }

/* ── Pagination ── */
.pagination-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 24px;
}
.pagination-bar a,
.pagination-bar span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 13px;
font-weight: 600;
color: var(--text);
background: var(--card-bg);
text-decoration: none;
transition: all 0.15s;
}
.pagination-bar a:hover {
background: linear-gradient(135deg, var(--btn-purple-start) 0%, var(--btn-purple-mid) 58%, var(--btn-purple-end) 100%);
color: #ffffff;
border-color: var(--btn-purple-border);
}
.pagination-bar .active {
background: linear-gradient(135deg, var(--btn-purple-start) 0%, var(--btn-purple-mid) 58%, var(--btn-purple-end) 100%);
color: white;
border-color: var(--btn-purple-border);
}

/* ── Profile Page ── */
.profile-layout {
display: grid;
grid-template-columns: 320px 1fr;
gap: 28px;
align-items: flex-start;
}
.profile-card {
text-align: center;
padding: 32px 24px;
}
.profile-avatar-section {
margin-bottom: 20px;
}
.profile-avatar-img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--primary);
margin-bottom: 12px;
}
.profile-avatar-placeholder {
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), #8b5cf6);
color: white;
font-size: 36px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.profile-avatar-section h2 {
font-size: 18px;
font-weight: 700;
color: var(--text);
margin: 0;
}
.profile-cargo {
font-size: 13px;
color: var(--primary);
font-weight: 600;
margin: 4px 0;
}
.profile-email {
font-size: 12px;
color: var(--muted);
}
.profile-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin: 20px -24px;
}
.profile-stat {
display: flex;
flex-direction: column;
align-items: center;
padding: 14px 8px;
background: var(--card-bg);
}
.profile-stat strong {
font-size: 20px;
font-weight: 800;
color: var(--text);
}
.profile-stat span {
font-size: 10px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.profile-meta {
padding: 0 8px;
}
.profile-meta-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--muted);
padding: 6px 0;
}
.profile-meta-item svg { flex-shrink: 0; opacity: 0.6; }
.profile-forms .card {
padding: 0;
margin-bottom: 24px;
}
.profile-forms .card-header {
padding: 20px 24px;
border-bottom: 1px solid var(--border);
}
.profile-forms .card-header h3 {
font-size: 16px;
font-weight: 700;
color: var(--text);
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.profile-forms .card-header h3 svg { color: var(--primary); }
.profile-forms form {
padding: 24px;
}

/* ── Card component ── */
.card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}

/* ── btn-sm ── */
.btn-sm {
padding: 6px 14px;
font-size: 12px;
}

/* ── Dark mode overrides for v4 components ── */
html.dark .modal-overlay { background: rgba(0, 0, 0, 0.75); }
html.dark .modal-overlay .modal-content { background: #1e293b; border-color: #334155; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6); }
html.dark .modal-overlay .modal-header { background: #1e293b; border-bottom-color: #334155; }
html.dark .modal-overlay .modal-header h3 { color: #f1f5f9; }
html.dark .modal-overlay .modal-close { background: #334155; color: #94a3b8; }
html.dark .modal-overlay .modal-close:hover { background: #475569; color: #f1f5f9; }
html.dark .modal-overlay .modal-body { background: #1e293b; }
html.dark .modal-overlay .modal-footer { background: #172033; border-top-color: #334155; }
html.dark .modal-overlay .form-group label { color: #94a3b8; }
html.dark .modal-overlay .form-control { background-color: #0f172a; border-color: #334155; color: #e2e8f0; }
html.dark .modal-overlay .form-control:hover { border-color: #475569; }
html.dark .modal-overlay .form-control:focus { background-color: #0f172a; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91, 55, 219, 0.2); }
html.dark .modal-overlay .form-control::placeholder { color: #475569; }
html.dark .modal-overlay select.form-control {
background-color: #0f172a;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
html.dark .filter-group select,
html.dark .filter-group input,
html.dark .filters-form select,
html.dark .filters-form input { background-color: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.1); color: var(--text); }
html.dark .filter-group select,
html.dark .filters-form select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px 12px;
padding-right: 36px;
}
html.dark .compat-item { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.08); }
html.dark .detail-text { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.08); }
html.dark .file-input { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.1); }
html.dark .profile-stat { background: var(--surface, #1e293b); }
html.dark .stock-ok { background: rgba(16,185,129,0.15); }
html.dark .stock-low { background: rgba(239,68,68,0.15); }
html.dark .row-alert { background: rgba(239,68,68,0.08) !important; }
html.dark .row-notify-focus { background: rgba(96, 165, 250, 0.16) !important; }
html.dark .row-notify-focus td { border-color: rgba(96, 165, 250, 0.34) !important; }

/* ── Responsive v4 ── */
@media (max-width: 1024px) {
.kpi-grid-5 { grid-template-columns: repeat(3, 1fr); }
.kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
.profile-layout { grid-template-columns: 1fr; }
.detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.kpi-grid-5,
.kpi-grid-4 { grid-template-columns: 1fr 1fr; }
.form-grid-2,
.form-grid-3 { grid-template-columns: 1fr; }
.filter-form { flex-direction: column; }
.filter-group { width: 100%; }
.filter-group select,
.filter-group input { min-width: unset; width: 100%; }
.compat-grid { grid-template-columns: 1fr; }
.page-header-flex { flex-direction: column; }
.modal-overlay .modal-content { max-height: 95vh; }
.modal-overlay .form-row { grid-template-columns: 1fr; }
.pagination-bar { flex-wrap: wrap; }
}
/* ============================================
NODE HUB - Design System Overrides v5.1
============================================ */
:root {
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;

--text-xs: 12px;
--text-sm: 13px;
--text-md: 14px;
--text-lg: 16px;
--text-2xl: 26px;

--btn-h: 42px;
--btn-h-sm: 34px;
--control-h: 42px;

--card-radius-unified: var(--radius-lg);
--card-border-unified: 1px solid var(--border);
--card-shadow-unified: var(--shadow-sm);
}

body {
line-height: 1.55;
}

.container {
padding: var(--space-6) var(--space-8) var(--space-8);
}

.page-header,
.dashboard-header {
margin-bottom: var(--space-8);
gap: var(--space-4);
}

.page-header h2,
.dashboard-header h2 {
font-size: var(--text-2xl);
}

.page-header-main {
display: flex;
flex-direction: column;
gap: 4px;
}

.page-subtitle {
margin: 0;
color: var(--muted);
font-size: var(--text-sm);
font-weight: 500;
line-height: 1.5;
}

.btn {
min-height: var(--btn-h);
padding: 0 var(--space-4);
border-radius: var(--radius-sm);
font-size: var(--text-md);
}

.btn-sm {
min-height: var(--btn-h-sm);
padding: 0 var(--space-3);
font-size: var(--text-xs);
}

.btn:focus-visible {
outline: 3px solid rgba(30, 64, 175, 0.24);
outline-offset: 1px;
}

.btn:disabled,
.btn[disabled] {
opacity: 0.55;
cursor: not-allowed;
filter: saturate(0.7);
}

.form-control,
.filter-group select,
.filter-group input,
.filters-form select,
.filters-form input {
min-height: var(--control-h);
}

/* Filtros: botao e campo com a mesma altura em toda a ferramenta */
.filters-form .btn,
.filters-form .btn-sm,
.filters-form .filter-actions .btn,
.filters-form .filter-actions .btn-sm,
#dashboard-filters .dashboard-filter-actions .btn,
#dashboard-filters .dashboard-filter-actions .btn-sm,
#hud-filtros .filter-actions .btn,
#hud-filtros .filter-actions .btn-sm,
#hud-manut-filters-form .filter-actions .btn,
#hud-manut-filters-form .filter-actions .btn-sm,
.filters-equipamentos .filter-actions .btn,
.filters-equipamentos .filter-actions .btn-sm {
min-height: var(--control-h);
height: var(--control-h);
padding-top: 0;
padding-bottom: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}

.stat-card,
.backup-panel,
.backup-reports-section,
.chart-card,
.dash-section,
.equipamento-detail,
.config-card,
.home-card,
.master-health-card,
.tipo-detail-card,
.table-responsive {
border: var(--card-border-unified);
border-radius: var(--card-radius-unified);
box-shadow: var(--card-shadow-unified);
}

.filters-bar {
padding: var(--space-6);
margin-bottom: var(--space-6);
border-radius: var(--card-radius-unified);
}

.backup-panel-header p,
.page-subtitle,
.dash-subtitle,
.empty-state p {
color: #43566e;
}

.badge {
font-size: var(--text-xs);
font-weight: 700;
color: #243244;
}

.status-badge {
font-size: var(--text-xs);
}

.table th {
padding: var(--space-3);
font-size: var(--text-xs);
}

.table td {
font-size: var(--text-md);
}

.table tbody tr:hover {
background: rgba(91, 55, 219, 0.04);
}

/* Remove destaque roxo ao navegar por cards/KPI e aplicar scroll */
.remotas-list {
border-top-color: #dbe3ed;
}

.remotas-list.list-highlighted,
.dash-section.section-highlighted {
animation: none;
box-shadow: none;
background: linear-gradient(180deg, rgba(14, 116, 144, 0.06), rgba(14, 116, 144, 0));
}

.kpi-card.kpi-active.kpi-manut {
border-color: var(--analytics-manut) !important;
box-shadow: 0 0 0 3px var(--analytics-manut-ring), var(--shadow) !important;
}

.kpi-card.kpi-active.kpi-backup {
border-color: var(--analytics-backup) !important;
box-shadow: 0 0 0 3px var(--analytics-info-ring), var(--shadow) !important;
}

.state-note {
display: block;
margin-top: var(--space-2);
font-size: var(--text-sm);
font-weight: 500;
line-height: 1.45;
}
.state-note.state-success { color: #166534; }
.state-note.state-warning { color: #92400e; }
.state-note.state-danger { color: #991b1b; }
.state-note.state-loading { color: #1e40af; }

/* Dashboard: menos ruído visual */
.kpi-sub {
opacity: 0.9;
}

.chart-header h3 {
font-size: 14px;
}

@media (max-width: 768px) {
.container {
padding: var(--space-4);
}

.page-header,
.dashboard-header {
margin-bottom: var(--space-6);
}

.page-header h2,
.dashboard-header h2 {
font-size: 22px;
}

.page-subtitle {
font-size: 12px;
}

.actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.actions .btn-sm {
flex: 1 1 120px;
}
}

@media (max-width: 360px) {
.btn,
.btn-sm {
width: 100%;
}

.page-header-actions {
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}

.backup-card-actions {
flex-direction: column;
}

.backup-card-actions .btn,
.backup-card-actions .backup-card-form {
width: 100%;
}
}

/* ============================================
HUD DE SITES (pós-login)
============================================ */
.hud-container { max-width: 1480px; }

.hud-content-layout {
display: block;
}

.hud-content-main {
min-width: 0;
}

.hud-tree-hover-zone {
position: fixed;
top: var(--topbar-height);
right: 0;
width: 0;
height: calc(100vh - var(--topbar-height));
z-index: 997;
pointer-events: none;
display: none;
}

.hud-tree-sidebar {
position: fixed;
top: var(--topbar-height);
right: 0;
width: var(--sidebar-width);
height: calc(100vh - var(--topbar-height));
background: linear-gradient(180deg, #0b2f66 0%, #0a254f 100%);
box-shadow: -8px 0 26px rgba(0, 0, 0, 0.2);
transform: translateX(calc(100% + 14px));
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: transform var(--transition-slow), opacity 220ms ease, visibility 0s linear 220ms;
z-index: 999;
overflow-y: auto;
display: flex;
flex-direction: column;
will-change: transform, opacity;
}

.hud-tree-sidebar.active {
transform: translateX(0);
opacity: 1;
visibility: visible;
pointer-events: auto;
transition-delay: 0s, 0s, 0s;
}

.hud-tree-trigger {
position: fixed;
top: calc(var(--topbar-height) + 44vh);
right: 0;
width: 24px;
height: 86px;
border: 1px solid rgba(137, 171, 221, 0.46);
border-right: 0;
border-radius: 12px 0 0 12px;
background: linear-gradient(180deg, rgba(23, 64, 126, 0.95) 0%, rgba(16, 43, 86, 0.95) 100%);
color: #dcebff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 998;
box-shadow: -4px 0 16px rgba(2, 12, 34, 0.32);
transition: right var(--transition-slow), transform 180ms ease, opacity 180ms ease;
animation: hudTreeNudge 1.8s ease-in-out infinite;
}

.hud-tree-trigger svg {
width: 13px;
height: 13px;
}

.hud-tree-trigger:hover {
transform: translateX(-2px);
opacity: 1;
}

.hud-tree-trigger.is-open {
right: calc(var(--sidebar-width) - 1px);
animation: none;
}

.hud-tree-trigger.is-open svg {
transform: rotate(180deg);
}

.hud-tree-head {
padding: 24px 20px 16px;
border-bottom: 1px solid var(--header-border);
color: #c8d8f2;
}

.hud-tree-head h4 {
margin: 0;
font-size: 11px;
color: var(--muted-light);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
}

.hud-tree-head span {
display: inline-block;
margin-top: 8px;
font-size: 12px;
color: #d8e6fb;
font-weight: 700;
}

.hud-tree-body {
overflow: auto;
padding: 8px 0;
}

.hud-tree-group {
border: 0;
background: transparent;
margin: 2px 0;
overflow: visible;
}

.hud-tree-group .smooth-details-content {
overflow: hidden;
}

.hud-tree-group summary {
list-style: none;
cursor: pointer;
padding: 11px 20px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-weight: 500;
color: #c8d8f2;
border-left: 3px solid transparent;
transition: var(--transition);
}

.hud-tree-group summary::-webkit-details-marker {
display: none;
}

.hud-tree-group summary:hover {
background: rgba(143, 116, 255, 0.18);
border-left-color: rgba(143, 116, 255, 0.45);
color: #eef4ff;
}

.hud-tree-group[open] > summary {
background: rgba(143, 116, 255, 0.22);
border-left-color: var(--primary);
color: #ffffff;
font-weight: 600;
}

.hud-tree-count {
min-width: 22px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #ffffff;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.hud-tree-list {
list-style: none;
margin: 0;
padding: 2px 0 8px;
display: grid;
gap: 4px;
}

.hud-tree-link {
display: grid;
grid-template-columns: 9px 1fr auto;
gap: 8px;
align-items: center;
padding: 9px 20px 9px 34px;
border-left: 3px solid transparent;
color: #d3e2f8;
text-decoration: none;
font-size: 13px;
cursor: pointer;
will-change: transform;
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}

.hud-tree-link:hover {
background: rgba(143, 116, 255, 0.18);
border-left-color: rgba(143, 116, 255, 0.45);
color: #eef4ff;
transform: translate3d(3px, 0, 0);
}

.hud-tree-link.is-current {
background: rgba(143, 116, 255, 0.28);
border-left-color: var(--primary);
color: #ffffff;
font-weight: 600;
}

.hud-tree-link.is-inactive {
opacity: 0.74;
}

.hud-tree-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.16);
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
}

.hud-tree-link:hover .hud-tree-dot {
transform: scale(1.18);
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
}

.hud-tree-link.is-inactive .hud-tree-dot {
background: #94a3b8;
box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.18);
}

.hud-tree-code {
font-weight: 700;
letter-spacing: 0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.hud-tree-uf {
font-size: 11px;
font-weight: 700;
color: #9eb7db;
}

.hud-hero {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
align-items: start;
gap: 14px;
margin-bottom: 18px;
padding: 18px;
border-radius: 18px;
border: 1px solid rgba(147, 177, 227, 0.34);
box-shadow: 0 14px 28px rgba(4, 12, 32, 0.34);
background:
radial-gradient(circle at 74% 46%, rgba(126, 87, 255, 0.24), transparent 34%),
radial-gradient(circle at 80% 52%, rgba(34, 211, 238, 0.16), transparent 42%),
linear-gradient(160deg, #050b1e 0%, #08152f 52%, #0a1f45 100%);
color: #e8f1ff;
position: relative;
overflow: hidden;
isolation: isolate;
}

.hud-hero::before,
.hud-hero::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}

.hud-hero::before {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 30%);
}

.hud-hero::after {
background:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 130px),
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 130px);
opacity: 0.45;
}

.hud-hero-orb {
position: absolute;
width: clamp(250px, 30vw, 390px);
aspect-ratio: 1 / 1;
right: -52px;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
z-index: 0;
overflow: hidden;
background:
radial-gradient(circle at 34% 30%, rgba(194, 126, 255, 0.68) 0%, rgba(138, 91, 255, 0.64) 26%, rgba(73, 84, 226, 0.58) 58%, rgba(32, 120, 230, 0.46) 76%, rgba(32, 120, 230, 0.02) 100%),
radial-gradient(circle at 62% 68%, rgba(27, 88, 189, 0.66), rgba(11, 40, 95, 0.62) 62%, rgba(11, 40, 95, 0.12) 100%);
border: 1px solid rgba(173, 202, 248, 0.34);
box-shadow: 0 0 20px rgba(122, 95, 255, 0.22), 0 0 48px rgba(59, 130, 246, 0.16);
opacity: 0.9;
animation: hudOrbFloat 11s ease-in-out infinite;
}

.hud-hero-orb-grid,
.hud-hero-orb-glow {
position: absolute;
inset: 0;
pointer-events: none;
}

.hud-hero-orb-grid {
background:
repeating-linear-gradient(20deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 17px),
repeating-linear-gradient(-20deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 17px);
opacity: 0.26;
}

.hud-hero-orb-glow {
background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.33), rgba(255, 255, 255, 0) 48%);
}

.hud-orb-point {
position: absolute;
width: 7px;
height: 7px;
border-radius: 999px;
transform: translate(-50%, -50%);
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.hud-orb-point.is-ftta { background: #22d3ee; }
.hud-orb-point.is-hibrido { background: #8f74ff; }
.hud-orb-point.is-legado { background: #93c5fd; }
.hud-orb-point.is-passive { opacity: 0.62; }
.hud-orb-point.is-active { opacity: 0.98; }

.hud-hero-main,
.hud-hero-kpi-panel,
.hud-kpi-carousel-window {
position: relative;
z-index: 1;
}

.hud-hero-side {
position: relative;
z-index: 1;
display: block;
min-height: 0;
}

.hud-side-card {
--hud-side-accent: #5f8fcb;
border: 2px solid var(--hud-side-accent);
border-radius: 14px;
background: linear-gradient(160deg, rgba(229, 239, 253, 0.92) 0%, rgba(216, 230, 248, 0.94) 100%);
box-shadow: 0 16px 32px rgba(8, 16, 38, 0.34);
padding: 10px;
display: grid;
gap: 10px;
}

.hud-side-card[data-view="geral"] { --hud-side-accent: #5f8fcb; }
.hud-side-card[data-view="alarmes"] { --hud-side-accent: #d97706; }
.hud-side-card[data-view="manutencoes"] { --hud-side-accent: #0f766e; }
.hud-side-card[data-view="mapa"] { --hud-side-accent: #2563eb; }

.hud-side-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.hud-side-head strong {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #21436d;
}

.hud-side-counter {
font-size: 12px;
font-weight: 700;
color: #365577;
}

.hud-side-tabs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}

.hud-side-tab {
appearance: none;
border: 1px solid #cadaef;
border-radius: 10px;
background: #ffffff;
color: #2f5078;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
min-height: 36px;
padding: 7px 8px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
transition: border-color 220ms ease, background-color 220ms ease, color 220ms ease, transform 220ms ease;
}

.hud-side-tab:hover {
transform: translate3d(0, -1px, 0);
border-color: #aec5e6;
}

.hud-side-tab.is-active {
border-color: var(--hud-side-accent);
background: #edf4ff;
color: #173a66;
box-shadow: 0 0 0 1px rgba(95, 143, 203, 0.28);
}

.hud-side-carousel-window {
overflow: hidden;
border-radius: 12px;
}

.hud-side-carousel-track {
display: flex;
align-items: flex-start;
transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.28s ease;
will-change: transform, height;
}

.hud-side-slide {
flex: 0 0 100%;
min-width: 0;
display: none;
}

.hud-side-slide.is-active {
display: block;
}

.hud-side-slide > .hud-map-panel,
.hud-side-slide > .hud-alarms-preview {
height: auto;
}

.hud-alarms-actions .hud-hero-action {
min-height: 36px;
min-width: 156px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.hud-hero-main {
display: grid;
align-content: start;
gap: 10px;
padding: 12px;
border-radius: 12px;
border: 1px solid rgba(152, 182, 230, 0.28);
background: rgba(7, 16, 39, 0.58);
backdrop-filter: blur(2px);
}

.hud-hero-tools {
position: relative;
margin-top: 10px;
width: fit-content;
}

.hud-chip {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 800;
color: #d9e9ff;
border: 1px solid rgba(191, 213, 247, 0.34);
background: rgba(255, 255, 255, 0.08);
width: fit-content;
}

.hud-hero h2 {
margin: 4px 0 2px;
font-size: clamp(30px, 3vw, 44px);
line-height: 1.02;
color: #f8fbff;
letter-spacing: -0.02em;
}

.hud-hero p {
margin: 0;
max-width: 54ch;
color: #c9dcfa;
font-size: 14px;
line-height: 1.4;
}

.hud-hero-pills {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 2px;
}

.hud-hero-pill {
min-width: 0;
border: 1px solid rgba(179, 204, 241, 0.28);
border-radius: 10px;
background: rgba(8, 31, 67, 0.46);
padding: 9px 10px;
display: grid;
gap: 3px;
--mouse-rx: 0deg;
--mouse-ry: 0deg;
--mouse-lift: 0px;
transform: translate3d(0, var(--mouse-lift), 0) rotateX(var(--mouse-rx)) rotateY(var(--mouse-ry));
transform-style: preserve-3d;
backface-visibility: hidden;
will-change: transform;
transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), border-color 260ms ease, box-shadow 260ms ease;
}

.hud-hero-pill span {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #d3e5ff;
font-weight: 800;
}

.hud-hero-pill strong {
font-size: clamp(22px, 2.1vw, 30px);
line-height: 1;
color: #ffffff;
letter-spacing: -0.02em;
}

.hud-hero-analytics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
align-items: stretch;
position: relative;
isolation: isolate;
overflow: visible;
--hud-analytics-bg: linear-gradient(160deg, rgba(8, 29, 62, 0.62), rgba(8, 29, 62, 0.48));
--hud-analytics-border: rgba(173, 199, 238, 0.3);
--hud-analytics-muted: #c8dcfa;
--hud-analytics-text: #f8fbff;
--hud-analytics-chip-bg: rgba(9, 32, 68, 0.48);
}

.hud-hero-analytics::after {
content: none;
position: absolute;
inset: -10px;
border-radius: 14px;
background: radial-gradient(circle at 50% 45%, rgba(6, 18, 40, 0.18), rgba(6, 18, 40, 0.34));
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease;
z-index: 0;
}

.hud-hero-analytics.has-chart-modal::after {
opacity: 1;
}

.hud-analytic-card {
border: 1px solid var(--hud-analytics-border);
border-radius: 10px;
background: var(--hud-analytics-bg);
padding: 10px;
display: grid;
grid-template-rows: auto 1fr;
gap: 10px;
min-height: 132px;
position: relative;
overflow: hidden;
z-index: 1;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
transform-origin: center center;
transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), border-color 320ms ease, box-shadow 420ms ease, opacity 220ms ease, filter 220ms ease;
will-change: transform;
}

.hud-analytic-card:hover {
transform: translate3d(0, -14px, 0) scale(1.14) !important;
border-color: rgba(194, 217, 248, 0.56);
box-shadow: 0 28px 54px rgba(6, 20, 46, 0.42), 0 0 0 1px rgba(153, 187, 238, 0.35);
z-index: 3;
}

/* Garante que apenas o card sob o cursor expanda (sem efeito em bloco). */
.hud-hero-analytics:hover .hud-analytic-card:not(:hover) {
transform: translate3d(0, 0, 0) scale(1) !important;
filter: none !important;
opacity: 1 !important;
z-index: 1;
}

.hud-hero-analytics .hud-analytic-card {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
animation: hudCardIn 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hud-hero-analytics .hud-analytic-card:nth-child(2) { animation-delay: 0.06s; }
.hud-hero-analytics .hud-analytic-card:nth-child(3) { animation-delay: 0.12s; }

.hud-hero-analytics .hud-analytic-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
opacity: 0.7;
}

.hud-hero-analytics .hud-analytic-card::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -60%;
width: 44%;
pointer-events: none;
background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.11) 48%, transparent 78%);
opacity: 0.14;
transform: skewX(-18deg) translate3d(0, 0, 0);
animation: hudCardSheen 13.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.hud-hero-analytics .hud-analytic-card:nth-child(2)::after { animation-delay: 0.5s; }
.hud-hero-analytics .hud-analytic-card:nth-child(3)::after { animation-delay: 1s; }

.hud-analytic-card header strong,
.hud-analytic-card .hud-donut-center,
.hud-analytic-card .hud-status-bars b,
.hud-analytic-card .hud-spark-legend b {
transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 300ms ease;
}

.hud-analytic-card:hover header strong,
.hud-analytic-card:hover .hud-donut-center,
.hud-analytic-card:hover .hud-status-bars b,
.hud-analytic-card:hover .hud-spark-legend b {
transform: scale(1.035);
letter-spacing: 0.01em;
}

.hud-analytic-card .hud-status-track {
transition: transform 320ms ease;
}

.hud-analytic-card:hover .hud-status-track {
transform: scaleY(1.03);
}

.hud-analytic-card .hud-spark-wrap,
.hud-analytic-card .hud-donut {
transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), filter 320ms ease;
}

.hud-analytic-card:hover .hud-spark-wrap,
.hud-analytic-card:hover .hud-donut {
transform: scale(1.018);
filter: saturate(1.03) brightness(1.015);
}

.hud-analytic-card:hover .hud-spark-legend,
.hud-analytic-card:hover .hud-donut-legend,
.hud-analytic-card:hover .hud-status-bars {
transform: scale(1.015);
transform-origin: top left;
}

.hud-analytic-card header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}

.hud-analytic-card header span {
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hud-analytics-muted);
font-weight: 800;
}

.hud-analytic-card header strong {
font-size: 18px;
line-height: 1;
color: var(--hud-analytics-text);
letter-spacing: -0.02em;
}

.hud-status-bars {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 6px;
}

.hud-status-bars li {
display: grid;
grid-template-columns: 36px 1fr 34px;
gap: 6px;
align-items: center;
}

.hud-status-bars label {
font-size: 11px;
color: #c7daf7;
font-weight: 700;
}

.hud-status-bars b {
font-size: 11px;
color: #f8fbff;
text-align: right;
font-weight: 800;
}

.hud-status-track {
height: 8px;
border-radius: 999px;
background: rgba(164, 190, 229, 0.22);
overflow: hidden;
}

.hud-status-track span {
display: block;
height: 100%;
border-radius: 999px;
transform-origin: left center;
transform: scaleX(0);
animation: hudBarGrow 680ms cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
}

.hud-status-bars li:nth-child(1) .hud-status-track span { animation-delay: 0.08s; }
.hud-status-bars li:nth-child(2) .hud-status-track span { animation-delay: 0.14s; }
.hud-status-bars li:nth-child(3) .hud-status-track span { animation-delay: 0.2s; }

.hud-status-track span.ok {
background: linear-gradient(90deg, #22d3ee, #60a5fa);
}

.hud-status-track span.coverage {
background: linear-gradient(90deg, #38bdf8, #60a5fa);
}

.hud-status-track span.online {
background: linear-gradient(90deg, #22c55e, #2dd4bf);
}

.hud-status-track span.coleta {
background: linear-gradient(90deg, #8f74ff, #60a5fa);
}

.hud-status-track span.nok {
background: linear-gradient(90deg, #f97316, #fb7185);
}

.hud-status-track span.manut {
background: linear-gradient(90deg, #8f74ff, #a78bfa);
}

.hud-analytic-status .hud-status-bars {
display: flex;
flex-direction: column;
justify-content: space-evenly;
gap: 10px;
min-height: 96px;
}

.hud-analytic-status .hud-status-bars li {
    grid-template-columns: minmax(42px, max-content) minmax(74px, 1fr) minmax(30px, max-content);
    gap: 6px;
}

.hud-analytic-status .hud-status-bars label,
.hud-analytic-status .hud-status-bars b {
    font-size: 11px;
    letter-spacing: 0.01em;
    min-width: 0;
    white-space: nowrap;
}

.hud-analytic-status .hud-status-track {
height: 8px;
}

.hud-analytic-note {
margin: auto 0 0;
padding-top: 8px;
font-size: 10.5px;
line-height: 1.45;
color: rgba(203, 220, 245, 0.82);
font-weight: 600;
}

.hud-spark-wrap {
border: 1px solid rgba(173, 199, 238, 0.28);
border-radius: 8px;
background: linear-gradient(180deg, rgba(8, 30, 64, 0.30), rgba(8, 30, 64, 0.20));
padding: 5px;
}

.hud-sparkline {
width: 100%;
height: 60px;
display: block;
overflow: visible;
}

.hud-spark-axis {
stroke: rgba(180, 207, 244, 0.34);
stroke-width: 1.4;
stroke-linecap: round;
}

.hud-spark-segment {
fill: none;
stroke: var(--seg-color, #22d3ee);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.18));
stroke-dasharray: var(--dash-len, 0);
stroke-dashoffset: var(--dash-len, 0);
animation: hudSparkDraw 860ms cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
animation-delay: var(--draw-delay, 0s);
}

.hud-spark-dot {
fill: var(--dot-color, #22d3ee);
stroke: rgba(255, 255, 255, 0.9);
stroke-width: 1.3;
filter: drop-shadow(0 0 3px rgba(12, 23, 43, 0.18));
opacity: 0;
transform-box: fill-box;
transform-origin: center center;
animation: hudSparkDotIn 380ms ease forwards;
animation-delay: var(--dot-delay, 0s);
}

.hud-spark-legend {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
}

.hud-spark-legend span {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 16px;
border-radius: 999px;
border: 1px solid rgba(174, 200, 236, 0.26);
background: rgba(10, 33, 71, 0.46);
font-size: 10.5px;
color: #c6d9f6;
font-weight: 700;
opacity: 0;
transform: translateY(2px);
animation: hudLegendIn 360ms ease forwards;
animation-delay: var(--legend-delay, 0s);
min-width: 0;
}

.hud-filter-chip {
cursor: pointer;
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.hud-filter-chip:hover {
transform: translate3d(0, -1px, 0);
border-color: rgba(201, 220, 246, 0.5);
}

.hud-filter-chip.is-active {
border-color: rgba(143, 116, 255, 0.68) !important;
box-shadow: 0 0 0 1px rgba(143, 116, 255, 0.32) inset;
background: rgba(23, 43, 88, 0.62);
}

.hud-spark-legend span::before {
content: '';
position: absolute;
left: 7px;
top: 50%;
width: 6px;
height: 6px;
border-radius: 999px;
transform: translateY(-50%);
background: var(--legend-color, #22d3ee);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.hud-spark-legend b {
color: #ffffff;
font-weight: 800;
flex-shrink: 0;
}

.hud-spark-legend em {
font-style: normal;
}

.hud-analytic-region .hud-spark-wrap {
padding: 6px;
}

.hud-analytic-region .hud-sparkline {
height: 58px;
}

.hud-analytic-region .hud-spark-legend {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
align-content: start;
}

.hud-analytic-region .hud-spark-legend span {
width: 100%;
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 4px;
padding: 3px 6px 3px 15px;
}

.hud-analytic-region .hud-spark-legend span em {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.hud-analytic-region:hover .hud-spark-legend span em {
text-overflow: ellipsis;
white-space: nowrap;
}

.hud-donut-wrap {
display: grid;
place-items: center;
}

.hud-donut {
width: 78px;
height: 78px;
border-radius: 50%;
position: relative;
box-shadow: inset 0 0 0 1px rgba(184, 208, 241, 0.2);
animation: hudDonutIn 760ms cubic-bezier(0.2, 0.65, 0.2, 1) both;
animation-delay: 0.08s;
}

.hud-donut::after {
content: '';
position: absolute;
inset: 11px;
border-radius: 50%;
background: rgba(7, 25, 54, 0.9);
border: 1px solid rgba(171, 198, 235, 0.2);
}

.hud-donut-center {
position: absolute;
inset: 0;
display: grid;
place-items: center;
z-index: 1;
font-size: 16px;
font-weight: 800;
color: #ffffff;
}

.hud-donut-legend {
display: grid;
gap: 4px;
}

.hud-donut-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10.5px;
color: #c6d9f6;
font-weight: 700;
opacity: 0;
transform: translateY(2px);
animation: hudLegendIn 360ms ease forwards;
}

.hud-donut-legend span:nth-child(1) { animation-delay: 0.14s; }
.hud-donut-legend span:nth-child(2) { animation-delay: 0.2s; }
.hud-donut-legend span:nth-child(3) { animation-delay: 0.26s; }
.hud-donut-legend span:nth-child(4) { animation-delay: 0.32s; }

.hud-donut-legend i {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 999px;
flex-shrink: 0;
}

.hud-donut-legend i.ftta { background: #22d3ee; }
.hud-donut-legend i.hibrido { background: #8f74ff; }
.hud-donut-legend i.legado { background: #93c5fd; }
.hud-donut-legend i.online { background: #22c55e; }
.hud-donut-legend i.degradado { background: #f59e0b; }
.hud-donut-legend i.offline { background: #ef4444; }
.hud-donut-legend i.desconhecido { background: #93c5fd; }

.hud-analytic-type {
grid-template-rows: auto auto 1fr;
}

.hud-analytic-type .hud-donut-wrap {
align-content: center;
margin-top: 2px;
}

.hud-analytic-type .hud-donut {
width: 92px;
height: 92px;
animation: hudDonutIn 760ms cubic-bezier(0.2, 0.65, 0.2, 1) both, hudDonutFloat 7.2s ease-in-out 1.4s infinite;
}

.hud-analytic-type .hud-donut::after {
inset: 13px;
}

.hud-analytic-type .hud-donut-center {
font-size: 18px;
font-weight: 800;
}

.hud-analytic-type .hud-donut-legend {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
}

.hud-analytic-type .hud-donut-legend span {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 9px;
white-space: nowrap;
padding: 2px 6px;
border-radius: 999px;
border: 1px solid rgba(179, 204, 240, 0.3);
background: var(--hud-analytics-chip-bg);
max-width: 100%;
}

.hud-analytic-type .hud-donut-legend i {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}

@keyframes hudCardIn {
from {
opacity: 0;
transform: translate3d(0, 10px, 0) scale(0.986);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}

@keyframes hudCardSheen {
0% {
transform: skewX(-18deg) translate3d(0, 0, 0);
opacity: 0;
}
12% {
opacity: 0.1;
}
36% {
transform: skewX(-18deg) translate3d(260%, 0, 0);
opacity: 0;
}
100% {
transform: skewX(-18deg) translate3d(260%, 0, 0);
opacity: 0;
}
}

@keyframes hudBarGrow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}

@keyframes hudSparkDraw {
from { stroke-dashoffset: var(--dash-len, 0); }
to { stroke-dashoffset: 0; }
}

@keyframes hudSparkDotIn {
from {
opacity: 0;
transform: scale(0.82);
}
to {
opacity: 1;
transform: scale(1);
}
}

@keyframes hudLegendIn {
from {
opacity: 0;
transform: translateY(2px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes hudDonutIn {
from {
opacity: 0;
transform: rotate(-90deg) scale(0.88);
}
to {
opacity: 1;
transform: rotate(0deg) scale(1);
}
}

@keyframes hudDonutFloat {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(0, -0.5px, 0) scale(1.006); }
}

@media (prefers-reduced-motion: reduce) {
.hud-hero-analytics .hud-analytic-card,
.hud-hero-analytics .hud-analytic-card::after,
.hud-status-track span,
.hud-spark-segment,
.hud-spark-dot,
.hud-spark-legend span,
.hud-donut,
.hud-donut-legend span {
animation: none !important;
opacity: 1 !important;
transform: none !important;
stroke-dashoffset: 0 !important;
}
}

.hud-hero-intel {
margin-top: 2px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(179, 206, 244, 0.24);
background: rgba(9, 30, 66, 0.5);
}

.hud-hero-intel-kicker {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #ccddf8;
}

.hud-hero-intel strong {
display: block;
margin-top: 4px;
color: #ffffff;
font-size: 22px;
line-height: 1.3;
}

.hud-hero-intel p {
margin-top: 3px;
font-size: 12px;
color: #cbddfa;
max-width: none;
}

.hud-hero-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 7px;
align-items: stretch;
}

.hud-hero-action {
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
min-width: 0;
width: 100%;
padding: 6px 10px;
border-radius: 9px;
border: 1px solid rgba(188, 211, 244, 0.3);
background: rgba(8, 29, 62, 0.32);
color: #dbe8fb;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.01em;
text-align: center;
line-height: 1.35;
transition: var(--transition);
}

.hud-hero-action:hover {
border-color: rgba(212, 229, 252, 0.5);
background: rgba(8, 29, 62, 0.5);
}

.hud-hero-kpi-panel {
align-self: start;
display: grid;
gap: 8px;
padding: 10px;
border-radius: 12px;
border: 1px solid rgba(181, 205, 241, 0.3);
background: rgba(8, 17, 42, 0.6);
backdrop-filter: blur(2px);
}

.hud-hero-kpi-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}

.hud-kpi-mini {
appearance: none;
border: 1px solid rgba(176, 201, 238, 0.25);
background: rgba(8, 30, 64, 0.48);
color: #dbe8ff;
border-radius: 10px;
padding: 9px 10px;
display: grid;
gap: 5px;
text-align: left;
cursor: pointer;
transition: var(--transition);
--mouse-rx: 0deg;
--mouse-ry: 0deg;
--mouse-lift: 0px;
transform: translate3d(0, var(--mouse-lift), 0) rotateX(var(--mouse-rx)) rotateY(var(--mouse-ry));
transform-style: preserve-3d;
backface-visibility: hidden;
will-change: transform;
}

.hud-kpi-mini span {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #cde0fe;
font-weight: 800;
}

.hud-kpi-mini strong {
font-size: 26px;
line-height: 1;
color: #ffffff;
}

.hud-kpi-mini:hover {
border-color: rgba(207, 225, 252, 0.42);
background: rgba(8, 30, 64, 0.64);
}

.hud-kpi-mini.is-active {
border-color: rgba(212, 227, 249, 0.64);
box-shadow: 0 0 0 1px rgba(143, 116, 255, 0.4);
background: rgba(8, 30, 64, 0.72);
}

.hud-hero-kpi-foot {
border: 1px solid rgba(176, 201, 238, 0.24);
border-radius: 10px;
background: rgba(8, 30, 64, 0.4);
padding: 9px 10px;
display: grid;
gap: 4px;
}

.hud-hero-kpi-foot strong {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #d6e7ff;
}

.hud-hero-kpi-foot span {
font-size: 12px;
line-height: 1.35;
color: #c6d9f6;
}

.hud-map-panel {
border: 1px solid rgba(181, 205, 241, 0.3);
border-radius: 12px;
background: rgba(8, 17, 42, 0.6);
backdrop-filter: blur(2px);
display: grid;
grid-template-rows: auto 1fr;
gap: 8px;
padding: 10px;
min-height: 280px;
}

.hud-map-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}

.hud-map-head strong {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #d6e7ff;
}

.hud-map-head span {
font-size: 12px;
color: #c6d9f6;
font-weight: 700;
}

.hud-brazil-map {
min-height: 250px;
height: 100%;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(176, 201, 238, 0.22);
background: rgba(5, 22, 50, 0.52);
}

.hud-brazil-map .leaflet-control-zoom a {
background: rgba(9, 28, 61, 0.9);
color: #dbe8fb;
border-bottom-color: rgba(176, 201, 238, 0.25);
}

.hud-brazil-map .leaflet-control-attribution {
background: rgba(8, 17, 42, 0.74);
color: #aac3e6;
font-size: 10px;
}

.hud-brazil-map .leaflet-control-attribution a {
color: #c8ddff;
}

.hud-map-error {
margin: 0;
font-size: 12px;
color: #d5e4fa;
padding: 10px;
}

.hud-alarms-preview {
border: 1px solid rgba(181, 205, 241, 0.3);
border-radius: 12px;
background: rgba(8, 17, 42, 0.6);
backdrop-filter: blur(2px);
display: grid;
gap: 8px;
padding: 10px;
}

.hud-alarms-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}

.hud-alarms-head strong {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #d6e7ff;
}

.hud-alarms-head span {
font-size: 10px;
color: #c6d9f6;
border: 1px solid rgba(176, 201, 238, 0.24);
border-radius: 999px;
padding: 2px 8px;
}

.hud-alarms-text {
margin: 0;
font-size: 12px;
color: #c8dbfa;
line-height: 1.4;
}

.hud-alarms-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.hud-alarms-kpis {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}

.hud-alarms-kpi {
border: 1px solid rgba(176, 201, 238, 0.24);
border-radius: 10px;
background: rgba(8, 30, 64, 0.42);
padding: 8px 10px;
display: grid;
gap: 2px;
}

.hud-alarms-kpi span {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #cde0fe;
font-weight: 800;
}

.hud-alarms-kpi strong {
font-size: 22px;
line-height: 1;
color: #ffffff;
}

.hud-alarms-kpi small {
font-size: 10px;
color: #c8dbfa;
}

.hud-alarms-kpi.is-critical {
border-color: rgba(239, 68, 68, 0.36);
background: rgba(127, 29, 29, 0.28);
}

.hud-alarms-list {
display: grid;
gap: 6px;
}

.hud-alarms-item {
border: 1px solid rgba(176, 201, 238, 0.22);
border-radius: 9px;
background: rgba(8, 30, 64, 0.34);
padding: 7px 9px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
cursor: pointer;
will-change: transform;
transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, box-shadow 240ms ease, background-color 220ms ease;
}

.hud-alarms-item:hover {
transform: translate3d(0, -2px, 0);
border-color: rgba(198, 220, 248, 0.42);
box-shadow: 0 10px 20px rgba(7, 24, 50, 0.18);
}

.hud-alarms-item strong {
display: block;
font-size: 12px;
color: #f0f6ff;
}

.hud-alarms-item span {
display: block;
margin-top: 1px;
font-size: 10.5px;
color: #c8dbfa;
}

.hud-alarms-item em {
font-style: normal;
font-size: 10px;
color: #b9cff0;
white-space: nowrap;
}

.hud-alarms-item.is-empty {
justify-content: flex-start;
cursor: default;
}

.hud-alarms-chip {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
border-radius: 999px;
padding: 4px 8px;
border: 1px solid rgba(176, 201, 238, 0.24);
}

.hud-alarms-chip.is-critical { background: rgba(239, 68, 68, 0.2); color: #fecaca; }
.hud-alarms-chip.is-warn { background: rgba(245, 158, 11, 0.2); color: #fed7aa; }
.hud-alarms-chip.is-info { background: rgba(34, 211, 238, 0.2); color: #a5f3fc; }

.hud-alarms-actions {
display: flex;
justify-content: flex-start;
}

.hud-map-marker {
background: transparent !important;
border: 0 !important;
}

.hud-map-marker span {
display: block;
width: 12px;
height: 12px;
border-radius: 999px;
border: 2px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 0 0 3px rgba(9, 28, 61, 0.45);
}

.hud-map-marker.is-ftta span { background: #22d3ee; }
.hud-map-marker.is-hibrido span { background: #8f74ff; }
.hud-map-marker.is-legado span { background: #93c5fd; }
.hud-map-marker.is-geocoded span { box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.28); }
.hud-map-marker.is-estimated span { border-style: dashed; opacity: 0.88; }
.hud-map-marker.is-passive { opacity: 0.62; }

.hud-hero-kpi-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 2px 2px 2px;
}

.hud-hero-kpi-head span {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 800;
color: #d6e7ff;
}

.hud-hero-kpi-head small {
font-size: 10px;
color: #b9cff0;
font-weight: 700;
}

.hud-kpi-carousel-window {
overflow: hidden;
border-radius: 10px;
border: 1px solid rgba(176, 201, 238, 0.22);
background: rgba(5, 22, 50, 0.48);
min-height: 156px;
}

.hud-kpi-carousel-track {
display: flex;
width: 100%;
transition: transform 0.45s cubic-bezier(.22, .61, .36, 1);
}

.hud-kpi {
appearance: none;
width: 100%;
text-align: left;
cursor: pointer;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03));
border: 1px solid rgba(177, 203, 240, 0.24);
border-radius: 10px;
padding: 11px 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 6px;
min-height: 154px;
box-shadow: none;
position: relative;
overflow: hidden;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
animation: none;
}

.hud-kpi-slide {
flex: 0 0 100%;
}

.hud-kpi::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 2px;
background: linear-gradient(180deg, #8f74ff, #22d3ee);
opacity: 0.75;
}

.hud-kpi-slide-label {
display: inline-flex;
width: fit-content;
font-size: 10px;
color: #d4e4fd;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
}

.hud-kpi:hover {
border-color: rgba(204, 223, 251, 0.44);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
}

.hud-kpi.is-active {
border-color: rgba(212, 227, 249, 0.6);
box-shadow: 0 0 0 1px rgba(143, 116, 255, 0.42);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
}

.hud-kpi-slide.is-current {
border-color: rgba(212, 227, 249, 0.52);
}

.hud-kpi strong {
font-size: clamp(40px, 3.4vw, 58px);
color: #ffffff;
line-height: 1;
letter-spacing: -0.02em;
}

.hud-kpi small {
margin: 0;
font-size: 12px;
line-height: 1.35;
color: #c8dbfa;
font-weight: 600;
}

.hud-kpi-carousel-controls {
display: grid;
grid-template-columns: 30px 1fr 30px;
align-items: center;
gap: 8px;
}

.hud-kpi-nav {
appearance: none;
border: 1px solid rgba(188, 212, 248, 0.34);
background: rgba(6, 25, 55, 0.44);
color: #e8f2ff;
width: 30px;
height: 30px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
}

.hud-kpi-nav svg {
width: 12px;
height: 12px;
}

.hud-kpi-nav:hover {
border-color: rgba(221, 234, 255, 0.52);
background: rgba(6, 25, 55, 0.62);
}

.hud-kpi-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}

.hud-kpi-dot {
width: 7px;
height: 7px;
border-radius: 999px;
border: 0;
padding: 0;
background: rgba(196, 215, 243, 0.36);
cursor: pointer;
transition: width 0.2s ease, background 0.2s ease;
}

.hud-kpi-dot.is-active {
width: 14px;
background: linear-gradient(90deg, #8f74ff, #22d3ee);
}

.hud-filters {
background: var(--surface);
padding: 22px 22px 18px;
container-type: inline-size;
container-name: hud-filters-panel;
}

.hud-notify-btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 8px 12px;
border-radius: 12px;
border: 1px solid rgba(196, 216, 247, 0.4);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
color: #e9f2ff;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
}

.hud-notify-btn:hover {
transform: translateY(-1px);
border-color: rgba(217, 233, 255, 0.58);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1));
}

.hud-notify-btn.is-critical {
border-color: rgba(255, 198, 198, 0.6);
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.22);
}

.hud-notify-icon {
width: 16px;
height: 16px;
display: inline-flex;
}

.hud-notify-icon svg {
width: 16px;
height: 16px;
}

.hud-notify-label {
font-size: 13px;
}

.hud-notify-count {
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #5b37db, #4f46e5);
color: #fff;
font-size: 12px;
font-weight: 800;
}

.hud-notify-panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: min(520px, 92vw);
max-height: 430px;
overflow: auto;
border: 1px solid #c5d9f1;
border-radius: 14px;
background: #f7fbff;
box-shadow: 0 20px 36px rgba(4, 22, 47, 0.24);
z-index: 30;
}

.hud-notify-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
border-bottom: 1px solid #d3e2f4;
}

.hud-notify-head strong {
font-size: 14px;
color: #10294b;
}

.hud-notify-head span {
font-size: 12px;
color: #59759a;
font-weight: 700;
}

.hud-notify-empty {
padding: 14px;
margin: 0;
color: #516b8d;
font-size: 13px;
}

.hud-notify-list {
list-style: none;
margin: 0;
padding: 8px;
display: grid;
gap: 8px;
}

.hud-notify-item a {
text-decoration: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
border: 1px solid #d2e0f1;
border-radius: 10px;
padding: 9px 10px;
background: #ffffff;
color: #10294b;
transition: var(--transition);
}

.hud-notify-item a:hover {
border-color: #b9cff0;
box-shadow: 0 8px 18px rgba(10, 37, 79, 0.12);
transform: translateY(-1px);
}

.hud-notify-item strong {
display: block;
font-size: 13px;
}

.hud-notify-item small {
display: block;
margin-top: 2px;
color: #5d779b;
font-size: 11px;
}

.hud-notify-item span {
font-size: 11px;
font-weight: 700;
color: #324a6b;
border-radius: 999px;
padding: 3px 8px;
background: #edf4fc;
border: 1px solid #cfdeef;
white-space: nowrap;
}

.hud-notify-item.type-atrasado span {
color: #b91c1c;
border-color: #fecaca;
background: #fee2e2;
}

.hud-notify-item.type-hoje span {
color: #b45309;
border-color: #fde68a;
background: #ffedd5;
}

.hud-notify-item.type-curto span {
color: #1d4ed8;
border-color: #bfdbfe;
background: #dbeafe;
}

.hud-notify-foot {
border-top: 1px solid #d3e2f4;
padding: 10px 12px;
display: flex;
justify-content: flex-end;
}

.hud-updates {
margin-bottom: 14px;
padding: 16px;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
background: var(--surface);
box-shadow: var(--shadow-xs);
}

.hud-updates-head {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}

.hud-updates-head h3 {
margin: 0 0 2px;
font-size: 18px;
}

.hud-updates-head p {
margin: 0;
color: var(--muted);
font-size: 13px;
}

.hud-updates-empty {
border: 1px dashed #c7d8ee;
border-radius: 12px;
padding: 12px 14px;
color: #597297;
font-size: 13px;
}

.hud-updates-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}

.hud-update-card {
border: 1px solid #cddcf0;
border-radius: 12px;
background: linear-gradient(180deg, #ffffff, #f6faff);
padding: 11px;
display: grid;
gap: 8px;
min-height: 142px;
}

.hud-update-card header,
.hud-update-card footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}

.hud-update-mod {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
color: #2d4d77;
text-transform: uppercase;
padding: 3px 6px;
border: 1px solid #c6d8ef;
border-radius: 999px;
background: #edf4fc;
}

.hud-update-card time {
font-size: 11px;
color: #60799b;
font-weight: 600;
}

.hud-update-card h4 {
margin: 0;
font-size: 14px;
color: #10294b;
}

.hud-update-card p {
margin: 0;
font-size: 12px;
line-height: 1.45;
color: #4f678a;
}

.hud-update-card footer span {
font-size: 11px;
color: #3f5c82;
font-weight: 700;
}

.hud-filters .filters-form {
display: grid;
grid-template-columns: minmax(260px, 1.8fr) repeat(3, minmax(180px, 1fr));
align-items: end;
gap: 12px 14px;
}

.hud-filters .filter-group {
min-width: 0;
background: linear-gradient(180deg, rgba(248, 251, 255, 0.92), rgba(240, 246, 255, 0.92));
border: 1px solid #d5e1f2;
border-radius: 12px;
padding: 8px 10px 10px;
gap: 5px;
}

.hud-filters .filter-group label {
font-size: 11px;
letter-spacing: 0.06em;
color: #5a7293;
}

.hud-filters .filter-group input,
.hud-filters .filter-group select {
min-height: 40px;
border-color: #b9cbe4;
background: #f3f7fc;
}

.hud-filters .filter-group input:focus,
.hud-filters .filter-group select:focus {
border-color: #7da5d9;
background: #ffffff;
}

.hud-filters .filter-actions {
display: inline-flex;
gap: 8px;
align-self: end;
grid-column: 1 / -1;
justify-content: flex-end;
padding-top: 2px;
}

.hud-filters .filter-actions .btn {
white-space: nowrap;
min-width: 112px;
}

/* Variante canônica de filtros HUD sem caixas por campo. */
.hud-filters--clean {
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
}

.hud-filters--clean .filters-mobile-header {
margin-bottom: 10px;
}

.hud-filters--clean .filter-group {
background: transparent;
border: 0;
padding: 0;
}

.hud-filters--clean .filter-group label {
color: #5a7191;
font-weight: 700;
}

.hud-filters--clean .filter-group input,
.hud-filters--clean .filter-group select {
background: var(--surface);
border-color: #b7cae3;
color: #213754;
}

.hud-filters--clean .filter-actions {
grid-column: auto;
align-self: end;
justify-content: flex-end;
padding-top: 0;
gap: 8px;
}

.hud-filters--clean .filter-actions .btn {
min-width: 100px;
}

/* HUD principal: layout limpo + fit horizontal. */
#hud-filtros .filters-form {
grid-template-columns: minmax(260px, 1.8fr) repeat(4, minmax(180px, 1fr)) auto;
gap: 10px 12px;
}

@container hud-filters-panel (max-width: 1560px) {
#hud-filtros .filters-form {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

#hud-filtros .filter-group:first-child {
grid-column: span 2;
}

#hud-filtros .filter-actions {
grid-column: 1 / -1;
justify-content: flex-end;
}
}

@container hud-filters-panel (max-width: 1080px) {
#hud-filtros .filters-form {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

#hud-filtros .filter-group:first-child,
#hud-filtros .filter-actions {
grid-column: 1 / -1;
}

#hud-filtros .filter-actions {
justify-content: flex-start;
flex-wrap: wrap;
}

#hud-filtros .filter-actions .btn {
flex: 1 1 180px;
min-width: 0;
}
}

@container hud-filters-panel (max-width: 640px) {
#hud-filtros .filters-form {
grid-template-columns: 1fr;
}

#hud-filtros .filter-group:first-child {
grid-column: auto;
}
}

#hud-manut-filters-form {
display: grid;
grid-template-columns: repeat(5, minmax(150px, 1fr)) auto;
align-items: end;
gap: 12px;
}

#hud-manut-filters-form .filter-group {
min-width: 0;
}

#hud-manut-filters-form .filter-actions {
display: inline-flex;
gap: 8px;
align-self: end;
}

.hud-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(325px, 1fr));
gap: 16px;
}

.hud-sites-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}

.hud-sites-toolbar-meta {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}

.hud-sites-toolbar-meta strong {
margin: 0;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text);
}

.hud-sites-toolbar-meta span {
font-size: 13px;
color: #536b8d;
font-weight: 600;
}

.hud-sites-view-toggle {
display: flex;
grid-template-columns: none;
flex-shrink: 0;
}

.hud-sites-view-toggle .view-btn {
width: auto;
min-width: 92px;
padding: 0 14px;
gap: 8px;
font-weight: 800;
letter-spacing: 0.02em;
}

.hud-sites-view-toggle .view-btn span {
white-space: nowrap;
}

#hud-sites-list[data-sites-view="list"] .hud-grid {
grid-template-columns: 1fr;
gap: 12px;
}

#hud-sites-list[data-sites-view="list"] .hud-card {
display: grid;
grid-template-columns: 78px minmax(0, 1fr);
min-height: 0;
--hud-hover-lift: -1px;
border-radius: 18px;
align-items: center;
}

#hud-sites-list[data-sites-view="list"] .hud-card:hover {
--hud-hover-lift: -4px;
--hud-hover-scale: 1.01;
}

#hud-sites-list[data-sites-view="list"] .hud-card-preview-link {
height: 100%;
}

#hud-sites-list[data-sites-view="list"] .hud-card-preview {
height: 100%;
min-height: 92px;
border-right: 1px solid rgba(157, 176, 208, 0.18);
}

#hud-sites-list[data-sites-view="list"] .hud-card-overlay {
top: 8px;
left: 8px;
right: auto;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 5px;
}

#hud-sites-list[data-sites-view="list"] .hud-card-overlay .badge,
#hud-sites-list[data-sites-view="list"] .hud-card-overlay .status-badge {
min-height: 0;
padding: 3px 8px;
font-size: 9px;
border-radius: 999px;
}

#hud-sites-list[data-sites-view="list"] .hud-card-body {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"title stats"
"meta stats"
"addr stats";
align-content: center;
align-items: center;
column-gap: 18px;
row-gap: 4px;
padding: 10px 14px 10px 14px;
}

#hud-sites-list[data-sites-view="list"] .hud-card-body > * {
min-width: 0;
}

#hud-sites-list[data-sites-view="list"] .hud-card-title {
grid-area: title;
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
}

#hud-sites-list[data-sites-view="list"] .hud-card-title h3 {
font-size: 15px;
line-height: 1.05;
white-space: nowrap;
flex-shrink: 0;
}

#hud-sites-list[data-sites-view="list"] .hud-card-title p {
margin: 0;
font-size: 12px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #48688f;
font-weight: 700;
}

#hud-sites-list[data-sites-view="list"] .hud-card-meta {
grid-area: meta;
gap: 6px;
line-height: 1;
}

#hud-sites-list[data-sites-view="list"] .hud-meta-item {
min-height: 20px;
padding: 2px 8px;
font-size: 10px;
}

#hud-sites-list[data-sites-view="list"] .hud-card-endereco {
grid-area: addr;
min-height: 0;
max-height: none;
font-size: 11px;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: unset;
line-clamp: unset;
color: #4c6484;
}

#hud-sites-list[data-sites-view="list"] .hud-card-stats {
grid-area: stats;
margin-top: 0;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 0;
width: auto;
max-width: none;
align-self: center;
}

#hud-sites-list[data-sites-view="list"] .hud-card-stats div {
display: inline-flex;
align-items: baseline;
justify-content: flex-start;
gap: 4px;
padding: 0 10px;
border-radius: 0;
background: transparent;
border: 0;
min-width: 0;
box-shadow: none;
position: relative;
white-space: nowrap;
}

#hud-sites-list[data-sites-view="list"] .hud-card-stats div:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 22px;
transform: translateY(-50%);
background: rgba(125, 145, 177, 0.34);
}

#hud-sites-list[data-sites-view="list"] .hud-card-stats div:first-child {
padding-left: 0;
}

#hud-sites-list[data-sites-view="list"] .hud-card-stats div:last-child {
padding-right: 0;
}

#hud-sites-list[data-sites-view="list"] .hud-card-stats div:nth-child(2) strong {
color: #15803d;
}

#hud-sites-list[data-sites-view="list"] .hud-card-stats div:nth-child(3) strong {
color: #dc2626;
}

#hud-sites-list[data-sites-view="list"] .hud-card-stats div:nth-child(4) strong {
color: #b45309;
}

#hud-sites-list[data-sites-view="list"] .hud-card-stats strong {
font-size: 15px;
line-height: 1;
}

#hud-sites-list[data-sites-view="list"] .hud-card-stats span {
font-size: 10px;
color: #637b9d;
font-weight: 700;
letter-spacing: 0.01em;
white-space: nowrap;
}

#hud-sites-list[data-sites-view="list"] .hud-card-actions {
display: none !important;
padding: 0;
border: 0;
}

#hud-sites-list[data-sites-view="list"] .hud-card-actions .btn {
width: auto;
justify-content: center;
min-width: 110px;
min-height: 36px;
padding: 8px 18px;
font-size: 13px;
line-height: 1.3;
white-space: nowrap;
}

#hud-sites-list[data-sites-view="list"] .hud-card-actions .btn-ghost {
color: #244e82;
border-color: #aac2e4;
}

#hud-sites-list[data-sites-view="list"] .hud-card-actions .btn-ghost:hover {
color: #153760;
border-color: #86a9d8;
}

.hud-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-xs);
display: flex;
flex-direction: column;
min-height: 390px;
transition: border-color 0.34s ease, box-shadow 0.34s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
scroll-margin-top: calc(var(--topbar-height) + 20px);
--hud-hover-lift: 0px;
--hud-hover-scale: 1;
--mouse-lift: 0px;
--mouse-rx: 0deg;
--mouse-ry: 0deg;
--mouse-glow-x: 50%;
--mouse-glow-y: 50%;
transform: translate3d(0, calc(var(--hud-hover-lift) + var(--mouse-lift)), 0) rotateX(var(--mouse-rx)) rotateY(var(--mouse-ry)) scale(var(--hud-hover-scale));
transform-style: preserve-3d;
backface-visibility: hidden;
will-change: transform;
}

.hud-card:hover {
box-shadow: 0 16px 30px rgba(8, 28, 62, 0.14);
border-color: #bfd5f3;
--hud-hover-lift: -8px;
--hud-hover-scale: 1.06;
}

.hud-card.hud-card-focus {
box-shadow: 0 0 0 3px rgba(91, 55, 219, 0.24), 0 14px 28px rgba(8, 28, 62, 0.18);
border-color: rgba(91, 55, 219, 0.48);
}

.hud-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, rgba(11, 47, 102, 0.12), rgba(91, 55, 219, 0.8), rgba(34, 211, 238, 0.7), rgba(11, 47, 102, 0.12));
opacity: 0;
transition: opacity 0.34s ease;
}

.hud-card:hover::before {
opacity: 1;
}

.hud-card::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
background: radial-gradient(
240px circle at var(--mouse-glow-x) var(--mouse-glow-y),
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.06) 28%,
rgba(255, 255, 255, 0) 62%
);
transition: opacity 260ms ease;
}

.hud-card.is-mouse-active::after {
opacity: 1;
}

.hud-magnetic {
will-change: transform;
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, box-shadow 220ms ease;
}

.hud-analytic-card.is-mouse-active,
.hud-hero-pill.is-mouse-active,
.hud-kpi-mini.is-mouse-active,
.hud-alarms-item.is-mouse-active {
box-shadow: 0 12px 24px rgba(8, 28, 62, 0.22);
}

.hud-card-preview-link {
display: block;
color: inherit;
text-decoration: none;
}

.hud-card-preview {
position: relative;
height: 150px;
background:
linear-gradient(120deg, rgba(143, 116, 255, 0.2), rgba(34, 211, 238, 0.22)),
linear-gradient(180deg, #0d2f67, #0a244c);
background-size: cover;
background-position: center;
cursor: pointer;
}

.hud-card-preview.has-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0.44));
}

.hud-card-overlay {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
z-index: 1;
display: flex;
gap: 8px;
justify-content: space-between;
}

/* HUD cards: badges com contraste alto (independente de tema). */
.hud-card-overlay .badge,
.hud-card-overlay .status-badge {
background: #0b1220 !important;
color: #f8fafc !important;
border: 1px solid rgba(203, 213, 225, 0.85) !important;
box-shadow: 0 2px 10px rgba(2, 6, 23, 0.55) !important;
font-weight: 800;
letter-spacing: 0.02em;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.hud-card-overlay .status-ok {
background: #15803d !important;
color: #ffffff !important;
border-color: #86efac !important;
}
.hud-card-overlay .status-nok {
background: #b91c1c !important;
color: #ffffff !important;
border-color: #fca5a5 !important;
}
.hud-card-overlay .badge-remota {
background: #0f766e !important;
color: #ffffff !important;
border-color: #99f6e4 !important;
}
.hud-card-overlay .badge-warning {
background: #b45309 !important;
color: #ffffff !important;
border-color: #fcd34d !important;
}
.hud-card-overlay .badge-master {
background: #4338ca !important;
color: #ffffff !important;
border-color: #c4b5fd !important;
}

.hud-card-body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 14px 10px;
flex: 1;
}

.hud-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}

.hud-card-brand {
width: 68px;
height: 42px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0;
}

.hud-card-brand img {
width: 100%;
height: 100%;
object-fit: contain;
}

.hud-card-brand span {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #355783;
}

.hud-card-title h3 {
margin: 0;
font-size: 18px;
letter-spacing: 0.02em;
}

.hud-card-title p {
margin: 3px 0 0;
font-size: 13px;
color: #4d607a;
font-weight: 600;
}

.hud-card-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
}

.hud-meta-item {
display: inline-flex;
align-items: center;
min-height: 24px;
font-size: 11px;
padding: 3px 8px;
border-radius: 999px;
color: #274065;
background: #edf3fb;
border: 1px solid #ccdbef;
}

.hud-card-endereco {
margin: 0;
font-size: 12px;
line-height: 1.45;
color: #4f6482;
min-height: 34px;
}

.hud-card-stats {
margin-top: auto;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 9px;
}

.hud-card-stats div {
border: 1px solid #cfdded;
border-radius: 10px;
padding: 9px 8px;
background: #f2f7fd;
text-align: center;
}

.hud-card-stats strong {
display: block;
font-size: 16px;
line-height: 1;
}

.hud-card-stats span {
font-size: 11px;
color: #4f6482;
}

.hud-card-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px 14px 14px;
}

@media (max-width: 1080px) {
.hud-sites-toolbar {
flex-wrap: wrap;
align-items: flex-start;
}

.hud-sites-view-toggle {
margin-left: auto;
}

#hud-sites-list[data-sites-view="list"] .hud-card {
grid-template-columns: 1fr;
}

#hud-sites-list[data-sites-view="list"] .hud-card-preview {
min-height: 126px;
}

#hud-sites-list[data-sites-view="list"] .hud-card-body {
grid-template-columns: 1fr;
grid-template-areas:
"title"
"meta"
"addr"
"stats";
row-gap: 8px;
column-gap: 0;
}

#hud-sites-list[data-sites-view="list"] .hud-card-stats {
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
max-width: none;
}

#hud-sites-list[data-sites-view="list"] .hud-card-stats div {
padding: 0 10px 0 0;
}

#hud-sites-list[data-sites-view="list"] .hud-card-stats div::after {
display: none;
}

#hud-sites-list[data-sites-view="list"] .hud-card-actions {
border-left: 0;
border-top: 1px solid var(--border);
padding-top: 12px;
justify-content: flex-start;
}
}

@media (max-width: 640px) {
.hud-sites-view-toggle {
width: 100%;
}

.hud-sites-view-toggle .view-btn {
flex: 1 1 0;
min-width: 0;
}
}

/* Clique para expandir itens da HUD */
.hud-click-expand {
cursor: zoom-in;
}

.hud-click-expand:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

.hud-click-expand.is-expanded {
cursor: zoom-out;
}

.hud-card.hud-click-expand,
.hud-card.hud-click-expand.is-expanded {
cursor: pointer;
}

.hud-card-endereco {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: 3.1em;
transition: max-height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hud-card.is-expanded .hud-card-endereco {
line-clamp: unset;
-webkit-line-clamp: unset;
max-height: 12em;
}

.hud-card.is-expanded {
box-shadow: 0 18px 34px rgba(8, 28, 62, 0.2);
}

.hud-alarms-item > div {
min-width: 0;
}

.hud-alarms-item span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
transition: white-space 240ms ease;
}

.hud-alarms-item.is-expanded {
align-items: flex-start;
padding-bottom: 10px;
}

.hud-alarms-item.is-expanded span {
white-space: normal;
overflow: visible;
}

.hud-alarms-item.is-expanded em {
white-space: normal;
text-align: right;
}

.hud-update-card {
transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease;
}

.hud-update-card.is-expanded {
transform: translate3d(0, -2px, 0);
box-shadow: 0 14px 28px rgba(12, 33, 66, 0.16);
}

html:not(.dark) .hud-hero {
border-color: #c9d9ef;
box-shadow: 0 10px 24px rgba(21, 57, 104, 0.12);
background:
radial-gradient(circle at 72% 46%, rgba(126, 87, 255, 0.14), transparent 34%),
radial-gradient(circle at 80% 52%, rgba(34, 211, 238, 0.1), transparent 42%),
linear-gradient(160deg, #edf4ff 0%, #e5efff 52%, #dce9ff 100%);
color: #0f2b4f;
}

html:not(.dark) .hud-hero::before {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent 34%);
}

html:not(.dark) .hud-hero::after {
opacity: 0.22;
}

html:not(.dark) .hud-hero-main {
border-color: #ccdaef;
background: rgba(255, 255, 255, 0.82);
}

html:not(.dark) .hud-chip {
color: #1c3f6f;
border-color: #b6cae7;
background: rgba(255, 255, 255, 0.82);
}

html:not(.dark) .hud-hero h2 {
color: #0f2a4a;
}

html:not(.dark) .hud-hero p {
color: #365577;
}

html:not(.dark) .hud-hero-pill {
border-color: #cadaef;
background: #f5f9ff;
}

html:not(.dark) .hud-hero-pill span {
color: #4f698c;
}

html:not(.dark) .hud-hero-pill strong {
color: #183a66;
}

html:not(.dark) .hud-hero-analytics {
--hud-analytics-bg: linear-gradient(160deg, #f7fbff 0%, #f1f7ff 100%);
--hud-analytics-border: #cadaef;
--hud-analytics-muted: #4f698c;
--hud-analytics-text: #14345d;
--hud-analytics-chip-bg: #edf4fc;
}

html:not(.dark) .hud-analytic-card {
border-color: var(--hud-analytics-border);
background: var(--hud-analytics-bg);
}

html:not(.dark) .hud-analytic-card:hover {
border-color: #b9d0ec;
box-shadow: 0 10px 20px rgba(20, 52, 93, 0.12);
}

html:not(.dark) .hud-analytic-card header span {
color: var(--hud-analytics-muted);
}

html:not(.dark) .hud-analytic-card header strong,
html:not(.dark) .hud-status-bars b,
html:not(.dark) .hud-spark-legend b,
html:not(.dark) .hud-donut-center {
color: #14345d;
}

html:not(.dark) .hud-status-bars label,
html:not(.dark) .hud-spark-legend span,
html:not(.dark) .hud-donut-legend span {
color: #3d5f88;
}

html:not(.dark) .hud-spark-legend b {
color: #163c6b;
}

html:not(.dark) .hud-analytic-note {
color: #56749a;
}

html:not(.dark) .hud-status-track {
background: #dce8f8;
}

html:not(.dark) .hud-spark-wrap {
border-color: #cadaef;
background: #f7fbff;
}

html:not(.dark) .hud-spark-axis {
stroke: #c4d5ec;
}

html:not(.dark) .hud-spark-segment {
filter: drop-shadow(0 1px 2px rgba(16, 59, 114, 0.16));
}

html:not(.dark) .hud-spark-dot {
stroke: #f8fbff;
}

html:not(.dark) .hud-spark-legend span {
border-color: #d4e1f3;
background: var(--hud-analytics-chip-bg);
}

html:not(.dark) .hud-analytic-type .hud-donut-legend span {
border-color: #d2e1f2;
background: var(--hud-analytics-chip-bg);
}

html:not(.dark) .hud-donut::after {
background: #f8fbff;
border-color: #cadaef;
}

html:not(.dark) .hud-hero-intel {
border-color: #cadaef;
background: #eef5ff;
}

html:not(.dark) .hud-hero-intel-kicker {
color: #4f698c;
}

html:not(.dark) .hud-hero-intel strong {
color: #14345d;
}

html:not(.dark) .hud-hero-intel p {
color: #365577;
}

html:not(.dark) .hud-hero-action {
border-color: #cadaef;
background: #ffffff;
color: #1b3d69;
}

html:not(.dark) .hud-hero-action:hover {
border-color: #b7cde9;
background: #f4f8ff;
}

html:not(.dark) .hud-side-card {
background: linear-gradient(160deg, #f8fbff 0%, #edf4ff 100%);
border-color: var(--hud-side-accent);
box-shadow: 0 12px 24px rgba(50, 74, 126, 0.2);
}

html:not(.dark) .hud-side-head strong {
color: #3f5e85;
}

html:not(.dark) .hud-side-counter {
color: #2f5078;
}

html:not(.dark) .hud-side-tab {
border-color: #cadaef;
background: #f7fbff;
color: #2f5078;
}

html:not(.dark) .hud-side-tab:hover {
border-color: #aec5e6;
background: #edf4ff;
}

html:not(.dark) .hud-side-tab.is-active {
border-color: var(--hud-side-accent);
background: #edf4ff;
color: #173a66;
box-shadow: 0 0 0 1px rgba(95, 143, 203, 0.18);
}

html:not(.dark) .hud-hero-kpi-panel,
html:not(.dark) .hud-map-panel {
border-color: #c9d9ef;
background: rgba(255, 255, 255, 0.82);
}

html:not(.dark) .hud-alarms-preview {
border-color: #cadaef;
background: linear-gradient(160deg, #f7fbff 0%, #f1f7ff 100%);
}

html:not(.dark) .hud-alarms-head strong { color: #21436d; }
html:not(.dark) .hud-alarms-head span { color: #4f698c; border-color: #cadaef; background: #edf4fc; }
html:not(.dark) .hud-alarms-text { color: #4f698c; }
html:not(.dark) .hud-alarms-chip { border-color: #cadaef; }
html:not(.dark) .hud-alarms-chip.is-critical { background: #fee2e2; color: #b91c1c; }
html:not(.dark) .hud-alarms-chip.is-warn { background: #ffedd5; color: #9a3412; }
html:not(.dark) .hud-alarms-chip.is-info { background: #e0f2fe; color: #075985; }
html:not(.dark) .hud-alarms-kpi {
border-color: #cadaef;
background: #edf4fc;
}
html:not(.dark) .hud-alarms-kpi span { color: #4f698c; }
html:not(.dark) .hud-alarms-kpi strong { color: #14345d; }
html:not(.dark) .hud-alarms-kpi small { color: #5f789b; }
html:not(.dark) .hud-alarms-kpi.is-critical {
border-color: #fecaca;
background: #fee2e2;
}
html:not(.dark) .hud-alarms-item {
border-color: #cadaef;
background: #f7fbff;
}
html:not(.dark) .hud-alarms-item strong { color: #14345d; }
html:not(.dark) .hud-alarms-item span,
html:not(.dark) .hud-alarms-item em { color: #4f698c; }

html:not(.dark) .hud-hero-kpi-head span,
html:not(.dark) .hud-map-head strong,
html:not(.dark) .hud-hero-kpi-foot strong {
color: #4f698c;
}

html:not(.dark) .hud-hero-kpi-head small,
html:not(.dark) .hud-map-head span,
html:not(.dark) .hud-hero-kpi-foot span {
color: #365577;
}

html:not(.dark) .hud-kpi-mini {
border-color: #cadaef;
background: #f6faff;
color: #173a66;
}

html:not(.dark) .hud-kpi-mini span {
color: #4f698c;
}

html:not(.dark) .hud-kpi-mini strong {
color: #14345d;
}

html:not(.dark) .hud-kpi-mini:hover {
border-color: #b7cde9;
background: #eef5ff;
}

html:not(.dark) .hud-kpi-mini.is-active {
border-color: #9ab7e0;
box-shadow: 0 0 0 1px rgba(143, 116, 255, 0.22);
background: #edf5ff;
}

html:not(.dark) .hud-hero-kpi-foot {
border-color: #cadaef;
background: #f5f9ff;
}

html:not(.dark) .hud-brazil-map {
border-color: #cadaef;
background: #f8fbff;
}

html:not(.dark) .hud-brazil-map .leaflet-control-zoom a {
background: rgba(255, 255, 255, 0.95);
color: #183a66;
border-bottom-color: #cadaef;
}

html:not(.dark) .hud-brazil-map .leaflet-control-attribution {
background: rgba(255, 255, 255, 0.9);
color: #4f698c;
}

html:not(.dark) .hud-brazil-map .leaflet-control-attribution a {
color: #365577;
}

html.dark .hud-hero {
border-color: rgba(148, 163, 184, 0.32);
box-shadow: 0 14px 32px rgba(1, 8, 22, 0.52);
background:
radial-gradient(circle at 74% 46%, rgba(126, 87, 255, 0.2), transparent 34%),
radial-gradient(circle at 80% 52%, rgba(34, 211, 238, 0.14), transparent 42%),
linear-gradient(160deg, #040918 0%, #081126 52%, #0a1b3d 100%);
}

html.dark .hud-hero-kpi-panel {
border-color: rgba(148, 163, 184, 0.34);
background: rgba(8, 14, 34, 0.72);
}

html.dark .hud-side-card {
border-color: var(--hud-side-accent);
background: linear-gradient(160deg, rgba(11, 32, 64, 0.78) 0%, rgba(6, 20, 44, 0.86) 100%);
}

html.dark .hud-side-head strong {
color: #d6e5ff;
}

html.dark .hud-side-counter {
color: #bfd3f4;
}

html.dark .hud-side-tab {
border-color: rgba(148, 163, 184, 0.44);
background: rgba(9, 23, 49, 0.74);
color: #d6e5ff;
}

html.dark .hud-side-tab:hover {
border-color: rgba(186, 208, 242, 0.68);
}

html.dark .hud-side-tab.is-active {
background: #e6effc;
color: #183a66;
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.36);
}

html.dark .hud-hero-main {
border-color: rgba(148, 163, 184, 0.32);
background: rgba(5, 12, 30, 0.72);
}

html.dark .hud-hero-orb {
opacity: 0.76;
}

html.dark .hud-orb-point {
border-color: rgba(255, 255, 255, 0.78);
box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.55);
}

html.dark .hud-hero-kpi-head span {
color: #d8e8ff;
}

html.dark .hud-hero-kpi-head small {
color: #b4c8e8;
}

html.dark .hud-hero-pill {
border-color: rgba(148, 163, 184, 0.3);
background: rgba(11, 26, 56, 0.68);
}

html.dark .hud-hero-pill span {
color: #cfe0fb;
}

html.dark .hud-hero-intel {
border-color: rgba(148, 163, 184, 0.34);
background: linear-gradient(140deg, rgba(143, 116, 255, 0.22), rgba(34, 211, 238, 0.15));
}

html.dark .hud-hero-intel p {
color: #d5e5ff;
}

html.dark .hud-hero-action {
border-color: rgba(148, 163, 184, 0.38);
background: rgba(9, 25, 54, 0.56);
color: #deebff;
}

html.dark .hud-hero-action:hover {
border-color: rgba(197, 214, 236, 0.5);
background: rgba(9, 25, 54, 0.76);
}

html.dark .hud-filters {
background: var(--surface);
}

html.dark .hud-filters .filter-group {
background: linear-gradient(180deg, rgba(16, 30, 56, 0.86), rgba(13, 25, 47, 0.86));
border-color: rgba(88, 112, 148, 0.45);
}

html.dark .hud-filters .filter-group label {
color: #aecdf5;
}

html.dark .hud-filters .filter-group input,
html.dark .hud-filters .filter-group select {
background: rgba(7, 17, 34, 0.64);
border-color: rgba(104, 131, 171, 0.5);
color: #d9e8ff;
}

html.dark .hud-filters .filter-group input:focus,
html.dark .hud-filters .filter-group select:focus {
background: rgba(7, 17, 34, 0.9);
border-color: #7ea7e3;
}

html.dark .hud-filters--clean {
background: transparent;
}

html.dark .hud-filters--clean .filter-group {
background: transparent;
border-color: transparent;
}

html.dark .hud-filters--clean .filter-group label {
color: var(--muted);
}

html.dark .hud-filters--clean .filter-group input,
html.dark .hud-filters--clean .filter-group select {
background: var(--surface);
}

html.dark .hud-card {
background: var(--surface);
}

/* Contraste alto para badges do card de site no HUD (modo escuro). */
html.dark .hud-card-overlay .badge,
html.dark .hud-card-overlay .status-badge {
background: #0b1220 !important;
color: #f8fafc !important;
border: 1px solid #94a3b8 !important;
box-shadow: 0 2px 10px rgba(2, 6, 23, 0.5) !important;
font-weight: 700;
}
html.dark .hud-card-overlay .status-ok {
background: #047857 !important;
color: #ecfdf5 !important;
border-color: #34d399 !important;
}
html.dark .hud-card-overlay .status-nok {
background: #b91c1c !important;
color: #fef2f2 !important;
border-color: #f87171 !important;
}
html.dark .hud-card-overlay .badge-remota {
background: #065f46 !important;
color: #ecfdf5 !important;
border-color: #34d399 !important;
}
html.dark .hud-card-overlay .badge-warning {
background: #b45309 !important;
color: #fffbeb !important;
border-color: #f59e0b !important;
}
html.dark .hud-card-overlay .badge-master {
background: #3730a3 !important;
color: #eef2ff !important;
border-color: #818cf8 !important;
}

html.dark .hud-card-brand {
background: transparent;
box-shadow: none;
}

html.dark .hud-card-brand span {
color: #b8cff1;
}

html.dark .hud-tree-sidebar {
background: linear-gradient(180deg, #091f44 0%, #081936 100%);
}

html.dark .hud-tree-group summary {
color: #d5e3f8;
}

html.dark .hud-tree-link {
color: #d5e3f8;
}

html.dark .hud-tree-link:hover {
background: rgba(143, 116, 255, 0.2);
border-left-color: rgba(143, 116, 255, 0.5);
}

html.dark .hud-tree-link.is-current {
background: rgba(143, 116, 255, 0.3);
border-left-color: #8f74ff;
}

html.dark .hud-tree-uf {
color: #a9bfde;
}

html.dark .hud-kpi {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
border-color: rgba(148, 163, 184, 0.28);
}

html.dark .hud-kpi:hover {
border-color: rgba(186, 208, 242, 0.38);
box-shadow: 0 14px 28px rgba(1, 8, 22, 0.34);
}

html.dark .hud-kpi-slide-label,
html.dark .hud-kpi small {
color: #cde0ff;
}

html.dark .hud-kpi.is-active {
border-color: rgba(180, 197, 226, 0.48);
box-shadow: 0 0 0 2px rgba(143, 116, 255, 0.32), 0 12px 28px rgba(2, 9, 21, 0.44);
}

html.dark .hud-kpi-carousel-window {
border-color: rgba(148, 163, 184, 0.26);
background: rgba(8, 20, 43, 0.74);
}

html.dark .hud-kpi-nav {
border-color: rgba(148, 163, 184, 0.34);
background: rgba(8, 21, 43, 0.64);
}

html.dark .hud-kpi-nav:hover {
border-color: rgba(186, 208, 242, 0.46);
background: rgba(8, 21, 43, 0.82);
}

html.dark .hud-kpi-dot {
background: rgba(148, 163, 184, 0.48);
}

html.dark .hud-kpi-mini,
html.dark .hud-hero-kpi-foot {
border-color: rgba(148, 163, 184, 0.32);
background: rgba(9, 23, 49, 0.7);
}

html.dark .hud-kpi-mini span,
html.dark .hud-hero-kpi-foot strong {
color: #d6e5ff;
}

html.dark .hud-hero-kpi-foot span {
color: #bfd3f4;
}

html.dark .hud-map-panel {
border-color: rgba(148, 163, 184, 0.32);
background: rgba(9, 23, 49, 0.74);
}

html.dark .hud-alarms-preview {
border-color: rgba(66, 104, 171, 0.62);
background: rgba(7, 19, 47, 0.76);
}

@media (max-width: 640px) {
.hud-alarms-kpis {
grid-template-columns: 1fr;
}
.hud-alarms-item {
flex-direction: column;
gap: 4px;
}
}

html.dark .hud-map-head strong {
color: #d6e5ff;
}

html.dark .hud-map-head span {
color: #bfd3f4;
}

html.dark .hud-notify-btn {
border-color: rgba(148, 163, 184, 0.34);
color: #e3edfb;
background: linear-gradient(135deg, rgba(148, 163, 184, 0.2), rgba(148, 163, 184, 0.08));
}

html.dark .hud-notify-btn:hover {
border-color: rgba(177, 194, 219, 0.5);
background: linear-gradient(135deg, rgba(148, 163, 184, 0.26), rgba(148, 163, 184, 0.12));
}

html.dark .hud-notify-panel {
border-color: #25374f;
background: #0f1f35;
}

html.dark .hud-notify-head,
html.dark .hud-notify-foot {
border-color: #25374f;
}

html.dark .hud-notify-head strong {
color: #e4efff;
}

html.dark .hud-notify-head span,
html.dark .hud-notify-empty {
color: #9db0cb;
}

html.dark .hud-notify-item a {
background: #122844;
border-color: #2b405f;
color: #e8f1ff;
}

html.dark .hud-notify-item small {
color: #9eb4d3;
}

html.dark .hud-notify-item span {
background: #162f4f;
border-color: #304765;
color: #bfd2eb;
}

html.dark .hud-updates {
background: var(--surface);
border-color: var(--border);
}

html.dark .hud-updates-empty {
border-color: #365070;
color: #9eb4d2;
}

html.dark .hud-update-card {
border-color: #2a3d58;
background: linear-gradient(180deg, #15263e, #102036);
}

html.dark .hud-update-card h4 {
color: #ecf3ff;
}

html.dark .hud-update-card p {
color: #9eb2cd;
}

html.dark .hud-update-mod {
border-color: #3c516e;
color: #c2d3ea;
background: #1b3252;
}

html.dark .hud-update-card time,
html.dark .hud-update-card footer span {
color: #9db3d1;
}

html.dark .hud-card-title p,
html.dark .hud-card-endereco,
html.dark .hud-card-stats span {
color: var(--muted);
}

html.dark .hud-meta-item {
background: #1e293b;
border-color: #334155;
color: #cbd5e1;
}

html.dark .hud-card-stats div {
background: #0f172a;
border-color: #253449;
}

html.dark .hud-card {
background: linear-gradient(135deg, rgba(17, 31, 55, 0.98), rgba(21, 33, 56, 0.98));
border-color: rgba(118, 153, 202, 0.46);
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
}

html.dark .hud-card-title h3,
html.dark #hud-sites-list[data-sites-view="list"] .hud-card-title h3 {
color: #f8fbff;
font-weight: 900;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.24);
}

html.dark .hud-card-title p,
html.dark #hud-sites-list[data-sites-view="list"] .hud-card-title p {
color: #9fc0ea;
font-weight: 800;
}

html.dark .hud-card-meta .hud-meta-item,
html.dark .hud-card-endereco,
html.dark #hud-sites-list[data-sites-view="list"] .hud-card-endereco {
color: #a8bad5;
}

html.dark .hud-meta-item {
background: rgba(148, 163, 184, 0.12);
border-color: rgba(190, 210, 237, 0.32);
}

html.dark .hud-card-stats strong,
html.dark #hud-sites-list[data-sites-view="list"] .hud-card-stats strong {
color: #f8fbff;
font-weight: 900;
}

html.dark .hud-card-stats span,
html.dark #hud-sites-list[data-sites-view="list"] .hud-card-stats span {
color: #adc2de;
font-weight: 800;
}

html.dark .hud-card-actions .btn,
html.dark #hud-sites-list[data-sites-view="list"] .hud-card-actions .btn {
min-height: 38px;
border-radius: 12px;
font-weight: 900;
text-shadow: none;
}

html.dark .hud-card-actions .btn-primary,
html.dark #hud-sites-list[data-sites-view="list"] .hud-card-actions .btn-primary {
background: linear-gradient(135deg, #2563eb, #6d5dfc);
border: 1px solid rgba(191, 219, 254, 0.68);
color: #ffffff;
box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
}

html.dark .hud-card-actions .btn-ghost,
html.dark #hud-sites-list[data-sites-view="list"] .hud-card-actions .btn-ghost {
background: rgba(37, 99, 235, 0.16);
border-color: rgba(147, 197, 253, 0.6);
color: #dceafe;
}

html.dark .hud-card-actions .btn-ghost:hover,
html.dark #hud-sites-list[data-sites-view="list"] .hud-card-actions .btn-ghost:hover {
background: rgba(59, 130, 246, 0.28);
border-color: rgba(191, 219, 254, 0.78);
color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
.site-switcher-caret,
.site-switcher-dropdown,
.site-switcher-item,
.hud-card,
.hud-hero-pill,
.hud-kpi,
.hud-kpi-mini,
.hud-kpi-carousel-track,
.hud-magnetic,
.smooth-details-content,
.recent-table tbody tr.recent-row-extra,
.hud-hero-analytics::after,
.hud-hero-analytics .hud-analytic-card,
.hud-hero-orb,
.hud-hero::before,
.hud-hero::after,
.hud-tree-trigger {
transition: none !important;
animation: none !important;
}
}

@keyframes hudHeroGlow {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
50% { transform: translate3d(8px, -7px, 0) scale(1.04); opacity: 0.96; }
}

@keyframes hudKpiRise {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes hudOrbFloat {
0%, 100% { transform: translate3d(0, -50%, 0) scale(1); }
50% { transform: translate3d(-5px, -50%, 0) scale(1.015); }
}

@keyframes hudTreeNudge {
0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.92; }
50% { transform: translate3d(-2px, 0, 0); opacity: 1; }
}

@media (max-width: 1200px) {
.hud-hero {
grid-template-columns: 1fr;
}

.hud-hero-analytics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hud-analytic-type {
grid-column: 1 / -1;
}

.hud-analytic-type .hud-donut-legend {
justify-content: flex-start;
flex-wrap: wrap;
}

.hud-analytic-region .hud-spark-legend {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hud-tree-hover-zone {
display: none;
}

.hud-tree-trigger {
display: none;
}

.hud-tree-sidebar {
width: 100%;
position: static;
right: auto;
transform: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
height: auto;
margin-top: 12px;
box-shadow: var(--shadow-xs);
border-radius: var(--radius-lg);
}

.hud-filters .filters-form {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

#hud-filtros .filters-form {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hud-filters .filter-actions {
grid-column: 1 / -1;
justify-content: flex-start;
}

#hud-manut-filters-form {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

#hud-manut-filters-form .filter-actions {
grid-column: 1 / -1;
justify-content: flex-start;
}

.hud-hero-tools {
width: 100%;
}

.hud-notify-btn {
width: 100%;
justify-content: space-between;
}
}

@media (max-width: 780px) {
.hud-hero-analytics {
grid-template-columns: 1fr;
}

.hud-analytic-region .hud-spark-legend {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hud-analytic-type .hud-donut {
width: 88px;
height: 88px;
}

#hud-manut-filters-form {
grid-template-columns: 1fr;
}
}

@media (min-width: 769px) {
#hud-filtros .filters-form {
display: flex;
flex-wrap: nowrap;
align-items: end;
gap: 10px 12px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 4px;
scrollbar-width: thin;
scrollbar-color: rgba(126, 167, 227, 0.45) transparent;
}

#hud-filtros .filters-form::-webkit-scrollbar {
height: 8px;
}

#hud-filtros .filters-form::-webkit-scrollbar-track {
background: transparent;
}

#hud-filtros .filters-form::-webkit-scrollbar-thumb {
background: rgba(126, 167, 227, 0.45);
border-radius: 999px;
}

#hud-filtros .filter-group {
flex: 1 0 136px;
min-width: 136px;
}

#hud-filtros .filter-group:first-child {
flex: 1.75 0 280px;
min-width: 280px;
}

#hud-filtros .filter-actions {
flex: 0 0 auto;
margin-left: auto;
display: inline-flex;
flex-wrap: nowrap;
align-items: end;
justify-content: flex-end;
padding-left: 4px;
}

#hud-filtros .filter-actions .btn {
flex: 0 0 auto;
min-width: 96px;
}
}

/* =========================================================
APP UI CONSISTENCY PATCH (exceto login)
========================================================= */
body:not(.login-page) .btn {
border-radius: 12px;
min-height: 42px;
font-weight: 700;
letter-spacing: 0.01em;
transition:
transform 0.16s ease,
box-shadow 0.16s ease,
filter 0.16s ease,
background-color 0.16s ease,
border-color 0.16s ease,
color 0.16s ease;
}

body:not(.login-page) .btn:hover {
transform: translateY(-1px);
}

body:not(.login-page) .btn:active {
transform: translateY(0);
}

body:not(.login-page) .btn.btn-sm {
min-height: 36px;
border-radius: 10px;
padding: 7px 12px;
font-weight: 700;
}

body:not(.login-page) .actions .btn.btn-sm {
min-width: 42px;
padding: 7px 10px;
}

body:not(.login-page) .btn-primary {
box-shadow: 0 10px 24px rgba(15, 43, 92, 0.22);
}

body:not(.login-page) .btn-primary:hover {
box-shadow: 0 12px 28px rgba(15, 43, 92, 0.28);
}

body:not(.login-page) .btn-warning {
color: #2f220c;
}

html.dark body:not(.login-page) .btn-warning {
color: #fde68a;
}

body:not(.login-page) .btn-icon svg,
body:not(.login-page) .actions .btn svg,
body:not(.login-page) .page-header .btn svg {
stroke-width: 2;
}

body:not(.login-page) .modal-overlay {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}

body:not(.login-page) .modal-overlay .modal-content {
border-radius: 18px;
box-shadow: 0 26px 62px rgba(15, 23, 42, 0.32);
}

body:not(.login-page) .modal-overlay .modal-header,
body:not(.login-page) .modal-overlay .modal-footer {
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.98));
}

body:not(.login-page) .table thead th {
letter-spacing: 0.06em;
font-weight: 700;
}

body:not(.login-page) .table tbody td {
vertical-align: middle;
}

body:not(.login-page) .search-feedback {
padding: 16px;
text-align: center;
}

body:not(.login-page) .search-feedback-empty {
color: var(--muted);
}

body:not(.login-page) .search-feedback-error {
color: var(--danger, #ef4444);
}

body:not(.login-page) .table-meta-muted {
color: var(--muted);
}

body:not(.login-page) .cell-empty-muted {
text-align: center;
color: var(--muted);
}

body:not(.login-page) .table-no-margin {
margin: 0 !important;
}

body:not(.login-page) .table-gap-bottom-sm {
margin-bottom: 14px !important;
}

body:not(.login-page) .tree-item-muted {
padding-left: 28px !important;
color: var(--muted) !important;
}

body:not(.login-page) .form-help-text {
color: var(--muted);
font-size: 12px;
margin-top: 4px;
display: block;
}

body:not(.login-page) .btn-full {
width: 100%;
}

body:not(.login-page) .btn-inline-fit {
display: inline-flex;
width: auto;
}

body:not(.login-page) .detail-section-spaced-md {
margin-top: 16px;
}

body:not(.login-page) .detail-section-spaced-lg {
margin-top: 20px;
}

body:not(.login-page) .is-hidden {
display: none !important;
}

html.dark body:not(.login-page) .modal-overlay .modal-content {
box-shadow: 0 26px 62px rgba(0, 0, 0, 0.62);
}

html.dark body:not(.login-page) .modal-overlay .modal-header,
html.dark body:not(.login-page) .modal-overlay .modal-footer {
background: linear-gradient(180deg, #1f2d47, #1a263d);
}

html.dark body:not(.login-page) .table-meta-muted,
html.dark body:not(.login-page) .cell-empty-muted,
html.dark body:not(.login-page) .form-help-text,
html.dark body:not(.login-page) .search-feedback-empty {
color: #a6bbdb;
}

html.dark body:not(.login-page) .search-feedback-error {
color: #fda4af;
}

/* ===== HUD BADGES DARK MODE: FINAL OVERRIDE (alto contraste) ===== */
html.dark .hud-card-overlay .badge,
html.dark .hud-card-overlay .status-badge {
background: #020617 !important;
color: #ffffff !important;
border: 1px solid #cbd5e1 !important;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55) !important;
font-weight: 800 !important;
text-shadow: none !important;
}
html.dark .hud-card-overlay .status-ok {
background: #166534 !important;
color: #ffffff !important;
border-color: #86efac !important;
}
html.dark .hud-card-overlay .status-nok {
background: #991b1b !important;
color: #ffffff !important;
border-color: #fca5a5 !important;
}
html.dark .hud-card-overlay .badge-remota {
background: #115e59 !important;
color: #ffffff !important;
border-color: #99f6e4 !important;
}
html.dark .hud-card-overlay .badge-warning {
background: #9a3412 !important;
color: #ffffff !important;
border-color: #fcd34d !important;
}
html.dark .hud-card-overlay .badge-master {
background: #312e81 !important;
color: #ffffff !important;
border-color: #c4b5fd !important;
}

/* ===== FINAL PATCH: NOK + tipo de site HUD (prioridade maxima) ===== */
html.dark .status-badge.status-nok {
background: #c44755 !important;
border-color: #f0a8b1 !important;
color: #ffffff !important;
}

html.dark .hud-card-overlay .hud-site-type-badge {
color: #dbe7fb !important;
font-weight: 600 !important;
border: none !important;
box-shadow: none !important;
}
html.dark .hud-card-overlay .hud-site-type-badge.badge-remota {
background: rgba(45, 212, 191, 0.14) !important;
color: #d2f6ef !important;
}
html.dark .hud-card-overlay .hud-site-type-badge.badge-warning {
background: rgba(251, 191, 36, 0.14) !important;
color: #f7e7c5 !important;
}
html.dark .hud-card-overlay .hud-site-type-badge.badge-master {
background: rgba(129, 140, 248, 0.16) !important;
color: #dde2ff !important;
}

/* ===== HARD OVERRIDES (inicio + NOK em tabela recente) ===== */
.recent-table .status-badge.status-nok {
color: #ffffff !important;
background: #c44755 !important;
border: 1px solid #f0a8b1 !important;
}
.recent-table .status-badge.status-manutencao {
color: #ffdcb3 !important;
background: rgba(180, 83, 9, 0.28) !important;
border: 1px solid rgba(252, 211, 77, 0.48) !important;
}

.status-badge.status-nok {
color: #ffffff !important;
background: #c44755 !important;
border: 1px solid #f0a8b1 !important;
}
.hud-card-overlay .hud-site-type-badge {
border: none !important;
box-shadow: none !important;
}

/* ===== DARK CONTRAST CONSISTENTE (status + badges) ===== */
html.dark body:not(.login-page) .badge {
color: #e7eefb;
background: rgba(71, 85, 105, 0.4);
border: 1px solid rgba(148, 163, 184, 0.34);
}

html.dark body:not(.login-page) .status-badge {
color: #e8effc;
background: rgba(51, 65, 85, 0.45);
border: 1px solid rgba(148, 163, 184, 0.32);
}

html.dark body:not(.login-page) .status-badge.status-ok,
html.dark body:not(.login-page) .status-ok {
color: #f0fdf4 !important;
background: rgba(22, 163, 74, 0.28) !important;
border-color: rgba(134, 239, 172, 0.44) !important;
}

html.dark body:not(.login-page) .status-badge.status-nok,
html.dark body:not(.login-page) .status-nok {
color: #ffffff !important;
background: rgba(185, 28, 28, 0.34) !important;
border-color: rgba(252, 165, 165, 0.46) !important;
}

html.dark body:not(.login-page) .status-badge.status-manutencao {
color: #fff7ed !important;
background: rgba(180, 83, 9, 0.3) !important;
border-color: rgba(253, 186, 116, 0.45) !important;
}
.status-badge.status-manutencao {
color: #8a3b00 !important;
background: #fef3c7 !important;
border: 1px solid #f59e0b !important;
}

.hud-card-overlay .hud-site-type-badge.badge-remota {
color: #0f4f5a !important;
background: rgba(20, 184, 166, 0.22) !important;
border: none !important;
box-shadow: none !important;
}
.hud-card-overlay .hud-site-type-badge.badge-warning {
color: #6b3f0b !important;
background: rgba(249, 115, 22, 0.22) !important;
border: none !important;
box-shadow: none !important;
}
.hud-card-overlay .hud-site-type-badge.badge-master {
color: #2f3d9b !important;
background: rgba(99, 102, 241, 0.22) !important;
border: none !important;
box-shadow: none !important;
}

/* Modo claro: contraste do tipo do site sobre topo azul do card */
html:not(.dark) .hud-card-overlay .hud-site-type-badge {
font-weight: 600 !important;
}
html:not(.dark) .hud-card-overlay .hud-site-type-badge.badge-remota {
color: #ecfeff !important;
background: rgba(15, 118, 110, 0.52) !important;
}
html:not(.dark) .hud-card-overlay .hud-site-type-badge.badge-warning {
color: #fff7ed !important;
background: rgba(154, 52, 18, 0.52) !important;
}
html:not(.dark) .hud-card-overlay .hud-site-type-badge.badge-master {
color: #eef2ff !important;
background: rgba(67, 56, 202, 0.5) !important;
}

/* Badge "Ativo" do HUD: visual mais limpo e consistente */
html:not(.dark) .hud-card-overlay .status-badge.status-ok {
color: #f0fdf4 !important;
background: linear-gradient(135deg, #15803d, #16a34a) !important;
border: 1px solid rgba(187, 247, 208, 0.38) !important;
box-shadow: 0 1px 4px rgba(22, 163, 74, 0.16) !important;
}

html:not(.dark) .hud-card-overlay .status-ok {
border-color: rgba(187, 247, 208, 0.38) !important;
box-shadow: 0 1px 4px rgba(22, 163, 74, 0.16) !important;
}

html.dark .hud-card-overlay .status-badge.status-ok {
color: #ecfdf5 !important;
background: linear-gradient(135deg, #166534, #15803d) !important;
border: 1px solid rgba(134, 239, 172, 0.5) !important;
box-shadow: 0 2px 10px rgba(6, 78, 59, 0.4) !important;
}

/* ===== PATCH FINAL: CONTRASTE MANUTENCAO (claro + escuro) ===== */
body:not(.login-page) .status-badge.status-manutencao {
color: #7c2d12 !important;
background: #ffedd5 !important;
border: 1px solid #fdba74 !important;
}

.recent-table .status-badge.status-manutencao {
color: #7c2d12 !important;
background: #ffedd5 !important;
border: 1px solid #fdba74 !important;
}

html.dark body:not(.login-page) .status-badge.status-manutencao,
html.dark .recent-table .status-badge.status-manutencao {
color: #fff7ed !important;
background: rgba(194, 65, 12, 0.5) !important;
border: 1px solid rgba(253, 186, 116, 0.75) !important;
}

/* ===== HUD REFLEXO EM SEQUENCIA ===== */
@keyframes hudSweepShine {
0% { transform: translate3d(-170%, 0, 0) skewX(-20deg); opacity: 0; }
12% { opacity: 0.04; }
32% { opacity: 0.1; }
56% { transform: translate3d(220%, 0, 0) skewX(-20deg); opacity: 0; }
100% { transform: translate3d(220%, 0, 0) skewX(-20deg); opacity: 0; }
}

.hud-hero-pill,
.hud-analytic-card,
.hud-hero-intel,
.hud-map-panel,
.hud-alarms-preview,
.hud-alarms-kpi,
.hud-alarms-item {
position: relative;
overflow: hidden;
--hud-shine-delay: 0s;
transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 280ms ease, box-shadow 300ms ease;
}

.hud-hero-pill::after,
.hud-analytic-card::after,
.hud-hero-intel::after,
.hud-map-panel::after,
.hud-alarms-preview::after,
.hud-alarms-kpi::after,
.hud-alarms-item::after {
content: '';
position: absolute;
top: -40%;
left: -25%;
width: 35%;
height: 180%;
pointer-events: none;
background: linear-gradient(
110deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.02) 35%,
rgba(255, 255, 255, 0.14) 50%,
rgba(255, 255, 255, 0.02) 65%,
rgba(255, 255, 255, 0) 100%
);
transform: translate3d(-170%, 0, 0) skewX(-20deg);
animation: hudSweepShine 14.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
animation-delay: var(--hud-shine-delay);
}

.hud-hero-pills .hud-hero-pill:nth-child(1) { --hud-shine-delay: .10s; }
.hud-hero-pills .hud-hero-pill:nth-child(2) { --hud-shine-delay: .45s; }
.hud-hero-pills .hud-hero-pill:nth-child(3) { --hud-shine-delay: .80s; }

.hud-hero-analytics .hud-analytic-card:nth-child(1) { --hud-shine-delay: .20s; }
.hud-hero-analytics .hud-analytic-card:nth-child(2) { --hud-shine-delay: .55s; }
.hud-hero-analytics .hud-analytic-card:nth-child(3) { --hud-shine-delay: .90s; }

.hud-hero-side .hud-map-panel { --hud-shine-delay: .35s; }
.hud-hero-side .hud-alarms-preview { --hud-shine-delay: .70s; }

.hud-alarms-kpis .hud-alarms-kpi:nth-child(1) { --hud-shine-delay: .85s; }
.hud-alarms-kpis .hud-alarms-kpi:nth-child(2) { --hud-shine-delay: 1.15s; }
.hud-alarms-list .hud-alarms-item:nth-child(1) { --hud-shine-delay: 1.00s; }
.hud-alarms-list .hud-alarms-item:nth-child(2) { --hud-shine-delay: 1.25s; }
.hud-alarms-list .hud-alarms-item:nth-child(3) { --hud-shine-delay: 1.50s; }

@media (prefers-reduced-motion: reduce) {
.hud-hero-pill::after,
.hud-analytic-card::after,
.hud-hero-intel::after,
.hud-map-panel::after,
.hud-alarms-preview::after,
.hud-alarms-kpi::after,
.hud-alarms-item::after {
animation: none !important;
}
}

/* ============================================
CONSISTENCY LAYER (HUD LANGUAGE APP-WIDE)
============================================ */
:root {
--ui-surface-bg: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%);
--ui-surface-border: #ccdaef;
--ui-surface-shadow: 0 10px 24px rgba(20, 56, 105, 0.10);
--ui-field-bg: #ffffff;
--ui-field-border: #b7c9e3;
--ui-field-hover: #9fb8db;
--ui-field-focus: #5f8fcb;
--ui-title: #183863;
--ui-muted: #5a7396;
}

body:not(.login-page) .page-header,
body:not(.login-page) .dashboard-header {
background: var(--ui-surface-bg);
border: 1px solid var(--ui-surface-border);
border-radius: 14px;
padding: 14px 18px;
box-shadow: var(--ui-surface-shadow);
margin-bottom: 20px;
}

body:not(.login-page) .page-subtitle {
color: var(--ui-muted);
}

body:not(.login-page) .filters-bar:not(.hud-filters) {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
}

body:not(.login-page) .filters-mobile-header span,
body:not(.login-page) .section-header h3,
body:not(.login-page) .page-header h2,
body:not(.login-page) .dashboard-header h2 {
color: var(--ui-title);
}

body:not(.login-page) .filters-form input,
body:not(.login-page) .filters-form select,
body:not(.login-page) .filter-group input,
body:not(.login-page) .filter-group select,
body:not(.login-page) .form-control {
background: var(--ui-field-bg);
border: 1px solid var(--ui-field-border);
border-radius: 12px;
color: #1d2d44;
}

body:not(.login-page) .filters-form input:hover,
body:not(.login-page) .filters-form select:hover,
body:not(.login-page) .filter-group input:hover,
body:not(.login-page) .filter-group select:hover,
body:not(.login-page) .form-control:hover {
border-color: var(--ui-field-hover);
}

body:not(.login-page) .filters-form input::placeholder,
body:not(.login-page) .filter-group input::placeholder,
body:not(.login-page) .form-control::placeholder {
color: #6c85a8;
}

body:not(.login-page) .filters-form input:focus,
body:not(.login-page) .filters-form select:focus,
body:not(.login-page) .filter-group input:focus,
body:not(.login-page) .filter-group select:focus,
body:not(.login-page) .form-control:focus {
border-color: var(--ui-field-focus);
box-shadow: 0 0 0 3px rgba(95, 143, 203, 0.18);
background: #ffffff;
}

body:not(.login-page) .filters-form input[readonly],
body:not(.login-page) .filters-form select[disabled],
body:not(.login-page) .filter-group input[readonly],
body:not(.login-page) .filter-group select[disabled],
body:not(.login-page) .form-control[readonly],
body:not(.login-page) .form-control[disabled] {
background: #eef3fb;
border-color: #c9d6ea;
color: #6f82a1;
cursor: not-allowed;
}

body:not(.login-page) .equipamento-detail,
body:not(.login-page) .config-card,
body:not(.login-page) .backup-panel,
body:not(.login-page) .backup-reports-section,
body:not(.login-page) .backups-list,
body:not(.login-page) .dash-section,
body:not(.login-page) .home-card,
body:not(.login-page) .stat-card,
body:not(.login-page) .kpi-card,
body:not(.login-page) .operation-bar,
body:not(.login-page) .master-health-card,
body:not(.login-page) .tipo-detail-card,
body:not(.login-page) .table-responsive {
border-radius: 14px;
border-color: var(--ui-surface-border);
box-shadow: var(--ui-surface-shadow);
}

body:not(.login-page) .table {
border-radius: 12px;
overflow: hidden;
}

body:not(.login-page) .table thead th {
background: linear-gradient(180deg, #eef5ff 0%, #e8f1ff 100%);
color: #30527c;
border-bottom: 1px solid #c7d8ee;
}

body:not(.login-page) .table tbody tr {
transition: background-color 180ms ease;
}

body:not(.login-page) .table tbody tr:hover {
background: #f5f9ff;
}

/* Backup: evita "card dentro de card" na lista de backups */
body:not(.login-page) .backups-list .table-responsive {
background: transparent;
border: 0;
box-shadow: none;
border-radius: 12px;
}

body:not(.login-page) .btn {
border-radius: 12px;
}

body:not(.login-page) .btn-primary {
background: linear-gradient(135deg, #103a78 0%, #2a569a 56%, #5b37db 100%);
border-color: rgba(150, 178, 229, 0.5);
color: #ffffff;
box-shadow: 0 8px 18px rgba(15, 54, 109, 0.30);
}

body:not(.login-page) .btn-primary:hover {
filter: saturate(1.04) brightness(1.03);
box-shadow: 0 12px 22px rgba(15, 54, 109, 0.36);
}

body:not(.login-page) .btn-ghost,
body:not(.login-page) .btn-secondary {
background: linear-gradient(180deg, #ffffff 0%, #eff5ff 100%);
border-color: #b9cce8;
color: #234975;
}

body:not(.login-page) .btn-ghost:hover,
body:not(.login-page) .btn-secondary:hover {
background: linear-gradient(180deg, #ffffff 0%, #e8f1ff 100%);
border-color: #9bb7df;
}

.form-control.is-loading {
background-image: linear-gradient(90deg, rgba(95, 143, 203, 0.08), rgba(95, 143, 203, 0.16), rgba(95, 143, 203, 0.08));
background-size: 220% 100%;
animation: siteCepLoading 1s linear infinite;
}

.site-infra-form-row {
gap: 16px;
margin-bottom: 4px;
align-items: start;
}

.site-infra-group {
margin-bottom: 16px;
}

.site-infra-group--operators .info-checkbox-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}

.site-infra-group--brand .form-control,
.site-infra-group--metric .form-control {
min-height: 50px;
}

.site-brand-inline {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}

.site-brand-inline--other {
grid-template-columns: minmax(180px, 0.9fr) minmax(220px, 1.1fr);
align-items: center;
}

.site-brand-inline__other {
min-width: 0;
}

.site-brand-inline__other[hidden] {
display: none !important;
}

.site-infra-form-row--status {
grid-template-columns: minmax(240px, 360px);
}

.site-infra-form-row--top {
grid-template-columns: 1fr 1fr;
}

.site-infra-form-row--arch {
grid-template-columns: 1fr 1fr;
}

.site-status-shell {
min-height: 42px;
padding: 2px 0 0;
align-items: center;
}

@media (max-width: 820px) {
.site-infra-group--operators .info-checkbox-grid {
grid-template-columns: 1fr;
}

.site-brand-inline--other {
grid-template-columns: 1fr;
}

.site-infra-form-row--status {
grid-template-columns: 1fr;
}

.site-infra-form-row--top {
grid-template-columns: 1fr;
}

.site-infra-form-row--arch {
grid-template-columns: 1fr;
}
}

@keyframes siteCepLoading {
0% { background-position: 0% 0; }
100% { background-position: 220% 0; }
}

body:not(.login-page) .badge,
body:not(.login-page) .status-badge {
border-radius: 999px;
border: 1px solid rgba(173, 195, 227, 0.64);
font-weight: 700;
letter-spacing: 0.01em;
}

body:not(.login-page) .empty-state {
border-radius: 14px;
border: 1px solid var(--ui-surface-border);
background: linear-gradient(180deg, #f9fcff 0%, #f1f7ff 100%);
}

html.dark body:not(.login-page) .page-header,
html.dark body:not(.login-page) .dashboard-header,
html.dark body:not(.login-page) .equipamento-detail,
html.dark body:not(.login-page) .config-card,
html.dark body:not(.login-page) .backup-panel,
html.dark body:not(.login-page) .backup-reports-section,
html.dark body:not(.login-page) .backups-list,
html.dark body:not(.login-page) .dash-section,
html.dark body:not(.login-page) .home-card,
html.dark body:not(.login-page) .stat-card,
html.dark body:not(.login-page) .kpi-card,
html.dark body:not(.login-page) .operation-bar,
html.dark body:not(.login-page) .master-health-card,
html.dark body:not(.login-page) .tipo-detail-card,
html.dark body:not(.login-page) .table-responsive,
html.dark body:not(.login-page) .empty-state {
background: linear-gradient(180deg, #1a2740 0%, #152238 100%);
border-color: #2f4468;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
}

html.dark body:not(.login-page) .page-header h2,
html.dark body:not(.login-page) .dashboard-header h2 {
color: #f8fbff;
}

html.dark body:not(.login-page) .page-subtitle,
html.dark body:not(.login-page) .dashboard-header .page-subtitle {
color: #c5d7f3;
}

html.dark body:not(.login-page) .filters-mobile-header span,
html.dark body:not(.login-page) .section-header h3,
html.dark body:not(.login-page) .remotas-list > h3,
html.dark body:not(.login-page) .form-group label,
html.dark body:not(.login-page) .filter-group label,
html.dark body:not(.login-page) .filters-form label {
color: #dbe7fb;
}

html.dark body:not(.login-page) .section-header h3 svg,
html.dark body:not(.login-page) .remotas-list > h3 svg {
stroke: #8fb4ff;
}

html.dark body:not(.login-page) .table thead th {
background: linear-gradient(180deg, #223553 0%, #1d2f4b 100%);
color: #d6e4fb;
border-bottom-color: #2c4264;
}

html.dark body:not(.login-page) .table tbody tr:hover {
background: #1c2d49;
}

html.dark body:not(.login-page) .backups-list .table-responsive {
background: transparent;
border: 0;
box-shadow: none;
}

html.dark body:not(.login-page) .filters-form input,
html.dark body:not(.login-page) .filters-form select,
html.dark body:not(.login-page) .filter-group input,
html.dark body:not(.login-page) .filter-group select,
html.dark body:not(.login-page) .form-control {
background: #1b2d4a;
border-color: #3d557b;
color: #e2ebfb;
}

html.dark body:not(.login-page) .filters-form input:hover,
html.dark body:not(.login-page) .filters-form select:hover,
html.dark body:not(.login-page) .filter-group input:hover,
html.dark body:not(.login-page) .filter-group select:hover,
html.dark body:not(.login-page) .form-control:hover {
border-color: #5877a8;
}

html.dark body:not(.login-page) .filters-form input:focus,
html.dark body:not(.login-page) .filters-form select:focus,
html.dark body:not(.login-page) .filter-group input:focus,
html.dark body:not(.login-page) .filter-group select:focus,
html.dark body:not(.login-page) .form-control:focus {
border-color: #6d96d5;
box-shadow: 0 0 0 3px rgba(109, 150, 213, 0.24);
background: #22395d;
}

html.dark body:not(.login-page) .filters-form input::placeholder,
html.dark body:not(.login-page) .filter-group input::placeholder,
html.dark body:not(.login-page) .form-control::placeholder {
color: #9db4d8;
}

html.dark body:not(.login-page) .filters-form input[readonly],
html.dark body:not(.login-page) .filters-form select[disabled],
html.dark body:not(.login-page) .filter-group input[readonly],
html.dark body:not(.login-page) .filter-group select[disabled],
html.dark body:not(.login-page) .form-control[readonly],
html.dark body:not(.login-page) .form-control[disabled] {
background: #17263f;
border-color: #304865;
color: #8ca2c5;
cursor: not-allowed;
}

/* Dark mode: evita botoes claros fora do padrao (ex: Limpar) */
html.dark body:not(.login-page) .btn-ghost,
html.dark body:not(.login-page) .btn-secondary {
background: linear-gradient(180deg, #213654 0%, #1c2e4a 100%);
border-color: #3f5a82;
color: #d6e5ff;
}

html.dark body:not(.login-page) .btn-ghost:hover,
html.dark body:not(.login-page) .btn-secondary:hover {
background: linear-gradient(180deg, #284065 0%, #213654 100%);
border-color: #5b7bac;
color: #ecf3ff;
}

/* ═══════════════════════════════════════════════════════════════
Dashboard Sections: Inventário + Monitoramento
═══════════════════════════════════════════════════════════════ */

/* Section wrapper */
.db-section {
margin-bottom: 16px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-xs);
overflow: hidden;
}

/* Section header row */
.db-section-head {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
border-bottom: 1px solid var(--border);
min-height: 58px;
transition: border-bottom-color 300ms ease, padding 260ms ease, min-height 260ms ease, gap 220ms ease;
}

.db-section[data-collapsed="true"] .db-section-head {
border-bottom-color: transparent;
}

/* Hover feedback no cabeçalho (clicavel) */
.db-section-head:hover {
background: rgba(91,55,219,.04);
}
html.dark .db-section-head:hover {
background: rgba(91,55,219,.08);
}

/* Title group */
.db-section-title {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
min-width: 0;
}

.db-section-title > div {
min-width: 0;
}

.db-section-icon {
width: 34px;
height: 34px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(91, 55, 219, 0.1);
color: var(--primary);
flex-shrink: 0;
}

.db-section-mon .db-section-icon {
background: rgba(34, 197, 94, 0.1);
color: #16a34a;
}

.db-section-title strong {
display: block;
font-size: 15px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.01em;
line-height: 1.2;
}

.db-section-title small {
display: block;
font-size: 13px;
color: var(--muted);
margin-top: 2px;
font-weight: 500;
line-height: 1.3;
max-height: 40px;
opacity: 1;
overflow: hidden;
transition: max-height 220ms ease, opacity 180ms ease, margin-top 180ms ease;
}

.db-twin-row .db-section-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
column-gap: 12px;
row-gap: 10px;
}

.db-twin-row .db-section-title {
grid-column: 1;
grid-row: 1;
}

.db-twin-row .db-section-toggle {
grid-column: 2;
grid-row: 1;
align-self: center;
justify-self: end;
}

/* ── Summary (visible when collapsed) ──────────────────────── */
.db-section-summary {
display: flex;
align-items: center;
gap: 6px;
overflow: hidden;
max-width: 0;
max-height: 0;
opacity: 0;
pointer-events: none;
white-space: nowrap;
transition: max-width 400ms cubic-bezier(0.22, 1, 0.36, 1),
max-height 320ms cubic-bezier(0.22, 1, 0.36, 1),
opacity    300ms ease,
gap        220ms ease;
min-width: 0;
}

.db-twin-row[data-returning="true"] .db-section-summary {
transition-duration: 460ms, 360ms, 340ms, 260ms;
}

.db-section-summary.is-visible {
max-width: 900px;
max-height: 220px;
opacity: 1;
pointer-events: auto;
}

.db-twin-row .db-section-summary {
grid-column: 1 / -1;
grid-row: 2;
justify-content: flex-start;
align-items: stretch;
align-content: flex-start;
flex-wrap: wrap;
row-gap: 8px;
column-gap: 8px;
white-space: normal;
}

.db-twin-row .db-section-summary.is-visible {
max-width: 100%;
}

.db-twin-row .db-section[data-collapsed="false"] .db-section-head {
row-gap: 0;
align-items: center;
}

.db-twin-row .db-section[data-collapsed="false"] .db-section-summary {
display: none;
}

.db-twin-row .db-section-summary:not(.is-visible) {
row-gap: 0;
column-gap: 0;
padding: 0;
border: 0;
}

.db-twin-row[data-has-expanded="true"] .db-section[data-collapsed="true"] .db-section-head {
display: flex;
align-items: center;
gap: 12px;
padding-top: 10px;
padding-bottom: 10px;
min-height: 58px;
}

.db-twin-row[data-has-expanded="true"] .db-section[data-collapsed="true"] .db-section-title {
flex: 0 1 auto;
min-width: 0;
}

.db-twin-row[data-has-expanded="true"] .db-section[data-collapsed="true"] .db-section-summary {
grid-column: auto;
grid-row: auto;
flex: 0 1 auto;
align-items: flex-start;
align-content: flex-start;
flex-wrap: nowrap;
row-gap: 0;
column-gap: 8px;
white-space: nowrap;
min-width: 0;
justify-content: flex-start;
}

.db-twin-row[data-has-expanded="true"] .db-section[data-collapsed="true"] .db-section-summary.is-visible {
max-width: none;
}

.db-twin-row[data-has-expanded="true"] .db-section[data-collapsed="true"] .db-section-toggle {
grid-column: auto;
grid-row: auto;
margin-left: auto;
align-self: center;
justify-self: auto;
}

.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-section-head {
display: flex;
align-items: center;
gap: 12px;
padding-top: 10px;
padding-bottom: 10px;
min-height: 58px;
}

.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-section-title {
flex: 0 1 auto;
min-width: 0;
}

.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-section-title strong {
font-size: 14px;
}

.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-section-title small {
max-height: 0;
opacity: 0;
margin-top: 0;
}

.db-twin-row[data-returning="true"][data-has-expanded="false"] .db-section[data-collapsed="true"] .db-section-title small {
transition-duration: 280ms, 240ms, 240ms;
transition-delay: 80ms, 80ms, 80ms;
}

.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-section-summary {
grid-column: auto;
flex: 1 1 auto;
align-items: flex-start;
align-content: flex-start;
flex-wrap: nowrap;
row-gap: 0;
column-gap: 6px;
white-space: nowrap;
min-width: 0;
justify-content: flex-start;
margin-left: auto;
overflow: hidden;
}

.db-twin-row[data-has-expanded="false"] .db-section-mon[data-collapsed="true"] .db-section-title {
flex: 0 0 auto;
max-width: 155px;
}

.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-section-summary.is-visible {
max-width: none;
}

.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-section-toggle {
grid-column: auto;
margin-left: auto;
align-self: center;
justify-self: auto;
}

.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-sum-kv,
.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-sum-chip {
padding: 2px 8px;
border-radius: 7px;
gap: 0;
}

.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-sum-k,
.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-sum-chip span {
font-size: 8px;
}

.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-sum-v,
.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-sum-chip strong {
font-size: 13px;
}

.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-sum-sep {
height: 22px;
}

.db-sum-kv {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
padding: 3px 10px;
border-radius: 8px;
background: var(--bg, #f3f7fc);
border: 1px solid var(--border);
gap: 1px;
flex-shrink: 0;
transition: padding 220ms ease, border-radius 220ms ease, gap 220ms ease, background-color 180ms ease, border-color 180ms ease;
}

.db-sum-pct {
background: rgba(34, 197, 94, 0.08);
border-color: rgba(34, 197, 94, 0.3);
}

.db-sum-k {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--muted);
line-height: 1;
transition: font-size 220ms ease, color 180ms ease;
}

.db-sum-v {
font-size: 15px;
font-weight: 800;
line-height: 1.1;
color: var(--text);
transition: font-size 220ms ease, color 180ms ease;
}

.db-sum-pct .db-sum-k { color: #16a34a; }
.db-sum-pct .db-sum-v { color: #15803d; }

.db-sum-ok {
background: rgba(34,197,94,.08);
border-color: rgba(34,197,94,.28) !important;
}
.db-sum-ok .db-sum-k { color: #16a34a; }
.db-sum-ok .db-sum-v { color: #15803d; }

.db-sum-nok {
background: rgba(239,68,68,.08);
border-color: rgba(239,68,68,.28) !important;
}
.db-sum-nok .db-sum-k { color: #dc2626; }
.db-sum-nok .db-sum-v { color: #b91c1c; }

.db-sum-manut {
background: rgba(245,158,11,.08);
border-color: rgba(245,158,11,.28) !important;
}
.db-sum-manut .db-sum-k { color: #d97706; }
.db-sum-manut .db-sum-v { color: #b45309; }

.db-sum-empty {
background: #f8fafc;
border-color: #cbd5e1 !important;
}
.db-sum-empty .db-sum-k {
color: #64748b;
}
.db-sum-empty .db-sum-v {
color: #334155;
font-size: 12px;
letter-spacing: 0;
text-transform: none;
}

.db-sum-sep {
width: 1px;
height: 26px;
background: var(--border);
border-radius: 1px;
flex-shrink: 0;
transition: height 220ms ease, opacity 220ms ease, background-color 180ms ease;
}

/* Type chips */
.db-sum-chip {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
padding: 3px 10px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg, #f3f7fc);
flex-shrink: 0;
gap: 1px;
transition: padding 220ms ease, border-radius 220ms ease, gap 220ms ease, background-color 180ms ease, border-color 180ms ease;
}

.db-sum-chip span {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
line-height: 1;
transition: font-size 220ms ease, color 180ms ease;
}

.db-sum-chip strong {
font-size: 15px;
font-weight: 800;
color: var(--text);
line-height: 1.1;
transition: font-size 220ms ease, color 180ms ease;
}

.db-chip-master { border-color: rgba(99,102,241,0.45); }
.db-chip-remota { border-color: rgba(34,197,94,0.45);  }
.db-chip-poi    { border-color: rgba(234,179,8,0.45);  }
.db-chip-dpu    { border-color: rgba(249,115,22,0.45); }
.db-chip-dau    { border-color: rgba(168,85,247,0.45); }
.db-chip-deu    { border-color: rgba(20,184,166,0.45); }
.db-chip-acu    { border-color: rgba(239,68,68,0.45);  }

/* ── Toggle button ─────────────────────────────────────────── */
.db-section-toggle {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 13px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg, #f3f7fc);
color: var(--muted);
font-size: 12px;
font-weight: 600;
cursor: pointer;
flex-shrink: 0;
transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
line-height: 1;
user-select: none;
}

.db-twin-row .db-section-toggle {
margin-left: 0;
}

.db-section-toggle:hover {
background: rgba(91, 55, 219, 0.08);
color: var(--primary);
border-color: rgba(91, 55, 219, 0.35);
}

.db-section-toggle svg {
transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
flex-shrink: 0;
}

.db-section[data-collapsed="true"] .db-section-toggle svg {
transform: rotate(180deg);
}

/* ── Body (collapsible) ────────────────────────────────────── */
.db-section-body {
transition: height 420ms cubic-bezier(0.22, 1, 0.36, 1);
overflow: hidden;
}

.db-section-body .stats-grid {
padding: 14px 16px 16px;
margin-top: 0;
}

.db-section-mon .db-section-body {
display: grid;
align-content: start;
}

.db-section-mon .stats-grid-mon {
align-content: start;
margin-bottom: 0;
}

@media (min-width: 1024px) {
.db-section-mon .stats-grid-mon {
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
}

.db-section-mon .stat-card {
padding: 16px 14px;
gap: 12px;
min-height: 118px;
}

.db-section-mon .stat-card.mon-last {
grid-column: auto;
}

.db-section-mon .stat-card.mon-last .stat-info h3 {
font-size: 1rem;
line-height: 1.05;
}
}

/* ── Card entrance animation ───────────────────────────────── */
@keyframes dbCardIn {
from {
opacity: 0;
transform: translateY(16px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

.db-card-in {
animation: dbCardIn 440ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.db-section.is-collapsing .db-section-body .stat-card,
.db-section.is-collapsing .db-section-body .ru-card,
.db-section.is-collapsing .db-section-body .db-insight-card {
opacity: 0 !important;
transform: translateY(-6px) scale(0.985) !important;
transition: opacity 180ms ease, transform 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
pointer-events: none;
}

/* ── Monitoring card accent colors ─────────────────────────── */
.stat-card.mon-pct  {
border-color: rgba(34,197,94,0.4);
background: linear-gradient(135deg, rgba(240,253,244,0.85) 0%, #fff 65%);
}
.stat-card.mon-nok  { border-color: rgba(239,68,68,0.35); }
.stat-card.mon-manut{ border-color: rgba(245,158,11,0.35); }
.stat-card.mon-last { border-color: rgba(99,102,241,0.35); cursor: pointer; }

.stat-card.mon-pct .stat-icon  { background: rgba(34,197,94,0.11); color: #16a34a; }
.stat-card.mon-nok .stat-icon  { color: #ef4444; }
.stat-card.mon-manut .stat-icon { color: #f59e0b; }
.stat-card.mon-last .stat-icon  { color: #818cf8; }

/* % Online ring */
.stat-pct-ring {
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 10px;
font-weight: 800;
line-height: 1;
background: conic-gradient(
var(--pct-color, #22c55e) var(--pct-deg, 0deg),
rgba(34,197,94,0.14) 0deg
);
box-shadow: inset 0 0 0 7px rgba(240,253,244,0.95);
color: var(--pct-color, #22c55e);
}

.db-section-mon .stat-card.mon-pct {
align-items: center;
gap: 14px;
padding: 16px;
}

.db-section-mon .stat-card.mon-pct .stat-icon {
width: 54px;
height: 54px;
flex: 0 0 54px;
border-radius: 16px;
background: rgba(34, 197, 94, 0.16);
}

.db-section-mon .stat-card.mon-pct .stat-pct-ring {
width: 46px;
height: 46px;
font-size: 10px;
box-shadow: inset 0 0 0 8px rgba(11, 33, 55, 0.9);
}

.db-section-mon .stat-card.mon-pct .stat-info {
gap: 4px;
}

.db-section-mon .stat-card.mon-pct .stat-info h3 {
font-size: clamp(1.65rem, 2.1vw, 2.15rem);
line-height: 0.95;
letter-spacing: 0;
color: #f8fbff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

.db-section-mon .stat-card.mon-pct .stat-info p {
font-size: 14px;
font-weight: 800;
color: #e0ebff;
}

.db-section-mon .stat-card.mon-pct .db-inv-note {
display: inline-flex;
align-items: center;
width: max-content;
max-width: 100%;
padding: 2px 7px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.14);
font-size: 9px;
font-style: normal;
font-weight: 800;
line-height: 1.3;
color: var(--muted, #93a4bd);
}

.db-section-mon .stat-card:not(.mon-pct) {
background: linear-gradient(135deg, rgba(18, 36, 62, 0.98), rgba(21, 32, 54, 0.98));
border-color: rgba(111, 145, 190, 0.44);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 30px rgba(2, 8, 23, 0.16);
}

.db-section-mon .stat-card:not(.mon-pct) .stat-info h3 {
color: #f8fbff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
}

.db-section-mon .stat-card:not(.mon-pct) .stat-info p {
color: #dbe8fb;
font-weight: 800;
}

.db-section-mon .stat-card:not(.mon-pct) .stat-info small {
color: #b8c8df;
}

.db-section-mon .stat-card:not(.mon-pct) .stat-icon {
background: rgba(77, 101, 140, 0.28);
box-shadow: inset 0 0 0 1px rgba(160, 183, 217, 0.1);
}

.db-section-mon .stat-card.mon-nok {
border-color: rgba(248, 113, 113, 0.5);
}

.db-section-mon .stat-card.mon-manut {
border-color: rgba(251, 191, 36, 0.52);
}

.db-section-mon .stat-card.mon-last {
border-color: rgba(165, 180, 252, 0.52);
}

.db-section-mon .stat-card.mon-alarm {
border-color: rgba(251, 113, 133, 0.5);
}

.db-section-mon .stat-card.mon-nok .stat-icon {
background: rgba(127, 29, 29, 0.36);
color: #ff6b6b;
}

.db-section-mon .stat-card.mon-manut .stat-icon {
background: rgba(113, 63, 18, 0.34);
color: #fbbf24;
}

.db-section-mon .stat-card.mon-last .stat-icon {
background: rgba(49, 46, 129, 0.34);
color: #a5b4fc;
}

.db-section-mon .stat-card.mon-alarm .stat-icon {
background: rgba(88, 28, 135, 0.34);
color: #a78bfa;
}

.db-section-mon .stat-card:hover,
.db-section-mon .stat-card:focus-visible {
border-color: rgba(191, 219, 254, 0.72);
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.18), 0 16px 34px rgba(2, 8, 23, 0.24);
}

.db-section-mon .db-section-toggle {
background: rgba(37, 99, 235, 0.18);
border-color: rgba(147, 197, 253, 0.42);
color: #dceafe;
font-weight: 800;
}

.db-section-mon .db-section-toggle:hover,
.db-section-mon .db-section-toggle:focus-visible {
background: rgba(59, 130, 246, 0.28);
border-color: rgba(191, 219, 254, 0.74);
color: #ffffff;
outline: none;
}

html.dark .db-section-mon .stat-card.mon-pct {
background: linear-gradient(135deg, rgba(12, 35, 55, 0.96) 0%, rgba(19, 30, 50, 0.96) 100%);
border-color: rgba(74, 222, 128, 0.32);
}

html.dark .db-section-mon .stat-card.mon-pct .stat-icon {
background: rgba(20, 83, 45, 0.46);
box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.14);
}

html.dark .db-section-mon .stat-card.mon-pct .stat-pct-ring {
box-shadow: inset 0 0 0 8px rgba(13, 31, 48, 0.96), 0 0 0 1px rgba(148, 163, 184, 0.12);
}

html.dark .db-section-mon .stat-card.mon-pct .db-inv-note {
background: rgba(148, 163, 184, 0.12);
color: #aebcd2;
}

/* Last update card name */
.mon-last-name {
font-size: 13px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
}

/* "último registro" note inside status cards */
.db-inv-note {
font-size: 10px;
font-weight: 500;
color: var(--muted);
font-style: italic;
letter-spacing: 0.01em;
}

/* ── Dark mode ─────────────────────────────────────────────── */
html.dark .db-section {
background: var(--surface);
border-color: var(--border);
}

html.dark .db-section-head {
border-bottom-color: var(--border);
}

html.dark .db-section[data-collapsed="true"] .db-section-head {
border-bottom-color: transparent;
}

html.dark .db-sum-kv,
html.dark .db-sum-chip {
background: rgba(255,255,255,0.04);
}
html.dark .db-sum-kv {
border-color: var(--border);
}
/* chips mantêm a borda colorida por tipo no dark; fallback apenas se sem classe específica */
html.dark .db-sum-chip:not([class*="db-chip-"]) {
border-color: var(--border);
}

html.dark .db-sum-pct {
background: rgba(34,197,94,0.1);
border-color: rgba(34,197,94,0.28);
}
html.dark .db-sum-ok {
background: rgba(34,197,94,.1);
border-color: rgba(34,197,94,.28);
}
html.dark .db-sum-ok .db-sum-k { color: #4ade80; }
html.dark .db-sum-ok .db-sum-v { color: #86efac; }
html.dark .db-sum-nok {
background: rgba(239,68,68,.1);
border-color: rgba(239,68,68,.28);
}
html.dark .db-sum-nok .db-sum-k { color: #f87171; }
html.dark .db-sum-nok .db-sum-v { color: #fca5a5; }
html.dark .db-sum-manut {
background: rgba(245,158,11,.1);
border-color: rgba(245,158,11,.28);
}
html.dark .db-sum-manut .db-sum-k { color: #fbbf24; }
html.dark .db-sum-manut .db-sum-v { color: #fcd34d; }

html.dark .db-sum-empty {
background: rgba(148, 163, 184, 0.1);
border-color: rgba(148, 163, 184, 0.28) !important;
}
html.dark .db-sum-empty .db-sum-k {
color: #aebcd2;
}
html.dark .db-sum-empty .db-sum-v {
color: #e2e8f0;
}

html.dark .db-section-toggle {
background: rgba(255,255,255,0.04);
border-color: var(--border);
color: var(--muted);
}

html.dark .db-section-toggle:hover {
background: rgba(91,55,219,0.16);
color: #a78bfa;
border-color: rgba(91,55,219,0.4);
}

/* dark: botões expandir padronizados em toda a ferramenta */
html.dark .expand-toggle,
html.dark .filters-toggle {
background: rgba(255,255,255,0.04);
border-color: var(--border);
color: var(--muted);
}

html.dark .expand-toggle:hover,
html.dark .filters-toggle:hover {
background: rgba(91,55,219,0.16);
color: #a78bfa;
border-color: rgba(91,55,219,0.4);
}

html.dark .stat-pct-ring {
background: conic-gradient(
var(--pct-color, #22c55e) var(--pct-deg, 0deg),
rgba(34,197,94,0.18) 0deg
);
box-shadow: inset 0 0 0 7px #1e2d42, 0 0 8px rgba(34,197,94,0.12);
}
html.dark .stat-card.mon-pct {
background: linear-gradient(135deg, rgba(34,197,94,0.09) 0%, #172033 65%);
border-color: rgba(34,197,94,0.5);
}
html.dark .stat-card.mon-pct .stat-icon {
background: rgba(34,197,94,0.17);
box-shadow: 0 0 0 1px rgba(34,197,94,0.25);
}
/* ── Empty-state: sem dados de monitoramento ─────────────── */
@media (max-width: 768px) {
.db-section-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 10px;
row-gap: 10px;
padding: 12px 14px;
}

.db-section-title {
grid-column: 1;
min-width: 0;
}

.db-section-title > div {
min-width: 0;
}

.db-section-title strong {
font-size: 1.05rem;
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.db-section-title small {
font-size: .82rem;
line-height: 1.25;
margin-top: 2px;
}

.db-section[data-collapsed="true"] .db-section-title small {
max-height: 0;
opacity: 0;
margin-top: 0;
}

.db-section[data-collapsed="true"] .db-section-title {
grid-column: 1;
grid-row: 1;
}

.db-section-toggle {
grid-column: 2;
grid-row: 1;
margin-left: 0;
padding: 0;
width: 40px;
height: 40px;
min-height: 40px;
min-width: 40px;
border-radius: 12px;
font-size: 0;
gap: 0;
align-self: center;
justify-content: center;
white-space: nowrap;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.db-section-toggle span {
display: none;
}

.db-section-toggle svg {
width: 16px;
height: 16px;
}

.db-section-summary {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
padding-top: 2px;
padding-bottom: 10px;
gap: 7px;
row-gap: 0;
column-gap: 7px;
flex-wrap: nowrap;
white-space: nowrap;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: rgba(99, 102, 241, 0.45) transparent;
}

.db-section-summary.is-visible {
max-width: none;
max-height: none;
}

.db-section-summary::-webkit-scrollbar {
height: 5px;
}

.db-section-summary::-webkit-scrollbar-thumb {
background: rgba(99, 102, 241, 0.35);
border-radius: 999px;
}

.db-section-summary::-webkit-scrollbar-track {
background: transparent;
}

.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-section-head,
.db-twin-row[data-has-expanded="true"] .db-section[data-collapsed="true"] .db-section-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
row-gap: 10px;
}

.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-section-title,
.db-twin-row[data-has-expanded="true"] .db-section[data-collapsed="true"] .db-section-title {
flex: initial;
grid-column: 1;
grid-row: 1;
}

.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-section-summary,
.db-twin-row[data-has-expanded="true"] .db-section[data-collapsed="true"] .db-section-summary {
grid-column: 1 / -1;
grid-row: 2;
flex: 0 0 100%;
min-width: 0;
align-items: center;
align-content: center;
flex-wrap: nowrap;
row-gap: 0;
column-gap: 7px;
white-space: nowrap;
}

.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-section-toggle,
.db-twin-row[data-has-expanded="true"] .db-section[data-collapsed="true"] .db-section-toggle {
grid-column: 2;
grid-row: 1;
margin-left: 0;
justify-self: end;
align-self: center;
}

.db-section[data-collapsed="true"] .db-sum-sep {
display: none;
}

.db-section[data-collapsed="true"] .db-sum-kv,
.db-section[data-collapsed="true"] .db-sum-chip {
padding: 5px 8px;
min-height: 42px;
min-width: 62px;
border-radius: 10px;
gap: 2px;
justify-content: center;
flex-shrink: 0;
align-items: flex-start;
text-align: left;
}

.db-section[data-collapsed="true"] .db-sum-k,
.db-section[data-collapsed="true"] .db-sum-chip span {
font-size: 8px;
text-align: left;
}

.db-section[data-collapsed="true"] .db-sum-v,
.db-section[data-collapsed="true"] .db-sum-chip strong {
font-size: 16px;
line-height: 1;
text-align: left;
}

.db-section[data-collapsed="true"] .db-sum-pct {
min-width: 64px;
}

.db-section-mon .stats-grid-mon {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.db-section-mon .stat-card {
padding: 14px 12px;
gap: 10px;
align-items: flex-start;
min-height: 96px;
}

.db-section-mon .stat-icon {
width: 42px;
height: 42px;
font-size: 20px;
}

.db-section-mon .stat-pct-ring {
width: 36px;
height: 36px;
font-size: 9px;
box-shadow: inset 0 0 0 6px rgba(240,253,244,0.95);
}

.db-section-mon .stat-card.mon-pct {
align-items: center;
gap: 14px;
padding: 16px;
}

.db-section-mon .stat-card.mon-pct .stat-icon {
width: 54px;
height: 54px;
flex: 0 0 54px;
border-radius: 16px;
background: rgba(34, 197, 94, 0.16);
}

.db-section-mon .stat-card.mon-pct .stat-pct-ring {
width: 46px;
height: 46px;
font-size: 10px;
box-shadow: inset 0 0 0 8px rgba(11, 33, 55, 0.9);
}

.db-section-mon .stat-card.mon-pct .stat-info {
gap: 4px;
}

.db-section-mon .stat-card.mon-pct .stat-info h3 {
font-size: clamp(1.65rem, 2.1vw, 2.15rem);
line-height: 0.95;
letter-spacing: 0;
color: var(--text-primary, #f3f7ff);
}

.db-section-mon .stat-card.mon-pct .stat-info p {
font-size: 14px;
font-weight: 800;
color: var(--text-secondary, #c9d6ea);
}

.db-section-mon .stat-card.mon-pct .db-inv-note {
display: inline-flex;
align-items: center;
width: max-content;
max-width: 100%;
padding: 2px 7px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.14);
font-size: 9px;
font-style: normal;
font-weight: 800;
line-height: 1.3;
color: var(--muted, #93a4bd);
}

html.dark .db-section-mon .stat-pct-ring {
box-shadow: inset 0 0 0 6px #1e2d42, 0 0 8px rgba(34,197,94,0.12);
}

html.dark .db-section-mon .stat-card.mon-pct {
background: linear-gradient(135deg, rgba(12, 35, 55, 0.96) 0%, rgba(19, 30, 50, 0.96) 100%);
border-color: rgba(74, 222, 128, 0.32);
}

html.dark .db-section-mon .stat-card.mon-pct .stat-icon {
background: rgba(20, 83, 45, 0.46);
box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.14);
}

html.dark .db-section-mon .stat-card.mon-pct .stat-pct-ring {
box-shadow: inset 0 0 0 8px rgba(13, 31, 48, 0.96), 0 0 0 1px rgba(148, 163, 184, 0.12);
}

html.dark .db-section-mon .stat-card.mon-pct .db-inv-note {
background: rgba(148, 163, 184, 0.12);
color: #aebcd2;
}

.db-section-mon .stat-info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}

.db-section-mon .stat-info h3 {
font-size: 16px;
line-height: 1.05;
letter-spacing: -0.02em;
margin-bottom: 0;
overflow-wrap: anywhere;
}

.db-section-mon .stat-info p {
font-size: 13px;
line-height: 1.2;
margin: 0;
white-space: normal;
overflow-wrap: anywhere;
}

.db-section-mon .stat-info small {
font-size: 10px;
line-height: 1.25;
margin-top: 2px;
display: flex;
flex-wrap: wrap;
gap: 4px;
white-space: normal;
overflow-wrap: anywhere;
}

.db-section-mon .db-inv-note {
font-size: 10px;
line-height: 1.25;
}

.db-section-mon .mon-alarm-pills {
gap: 4px;
margin-top: 4px;
}

.db-section-mon .mon-sev-chip {
font-size: 8px;
padding: 2px 6px;
}

.db-section-mon .stat-card.mon-last {
grid-column: 1 / -1;
min-height: 88px;
}

.db-section-mon .stat-card.mon-last .stat-info h3 {
font-size: 20px;
line-height: 1.05;
white-space: normal;
}

.db-section-mon .stat-card.mon-last .stat-info p {
font-size: 12px;
line-height: 1.25;
}
}

.db-sem-monit {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 36px 24px;
text-align: center;
color: var(--muted);
}
.db-sem-monit svg {
opacity: .35;
}
.db-sem-monit p {
margin: 0;
font-size: .9rem;
}
html.dark .db-sem-monit {
color: var(--muted);
}

/* ── Summary bar: variantes de alarme ───────────────────── */
.db-sum-alarm {
background: rgba(245,158,11,.08) !important;
border-color: rgba(245,158,11,.28) !important;
}
.db-sum-alarm .db-sum-k,
.db-sum-alarm .db-sum-v { color: #d97706 !important; }

.db-sum-alarm-critica {
background: rgba(239,68,68,.1) !important;
border-color: rgba(239,68,68,.3) !important;
}
.db-sum-alarm-critica .db-sum-k,
.db-sum-alarm-critica .db-sum-v { color: #dc2626 !important; }

.db-sum-alarm-ok {
background: rgba(34,197,94,.07) !important;
border-color: rgba(34,197,94,.2) !important;
}
.db-sum-alarm-ok .db-sum-k,
.db-sum-alarm-ok .db-sum-v { color: #16a34a !important; }

/* ── Card de alarmes: variantes ─────────────────────────── */
.stat-card.mon-alarm {
border-left: 3px solid rgba(100,116,139,.35);
}
.stat-card.mon-alarm-critica {
border-left: 3px solid #ef4444;
background: rgba(239,68,68,.04);
animation: alarmPulse 2.4s ease-in-out infinite;
}
@keyframes alarmPulse {
0%, 100% { box-shadow: var(--shadow-xs); }
50%       { box-shadow: 0 0 0 3px rgba(239,68,68,.15), var(--shadow-sm); }
}

/* ── Chips de severidade dentro do card de alarmes ──────── */
.mon-alarm-pills {
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-top: 2px;
}
.mon-sev-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 6px;
border-radius: 999px;
font-size: 9px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
border: 1px solid transparent;
white-space: nowrap;
}

.mon-sev-chip .mon-sev-sep {
opacity: 0.78;
font-weight: 800;
}
.mon-sev-chip.sev-critica {
background: rgba(239,68,68,.14);
color: #dc2626;
border-color: rgba(239,68,68,.3);
}
.mon-sev-chip.sev-maior {
background: rgba(249,115,22,.13);
color: #ea580c;
border-color: rgba(249,115,22,.28);
}
.mon-sev-chip.sev-menor {
background: rgba(245,158,11,.12);
color: #d97706;
border-color: rgba(245,158,11,.26);
}
.mon-sev-chip.sev-aviso {
background: rgba(59,130,246,.11);
color: #2563eb;
border-color: rgba(59,130,246,.25);
}
.mon-sev-chip.sev-info {
background: rgba(34,211,238,.1);
color: #0891b2;
border-color: rgba(34,211,238,.22);
}
.mon-sev-chip.sev-ok {
background: rgba(34,197,94,.1);
color: #16a34a;
border-color: rgba(34,197,94,.22);
}
.mon-sev-chip.sev-nr {
background: rgba(107,114,128,.1);
color: var(--muted);
border-color: var(--border);
}

/* dark overrides */
html.dark .mon-sev-chip.sev-critica { color: #fca5a5; background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.4); }
html.dark .mon-sev-chip.sev-maior   { color: #fdba74; background: rgba(249,115,22,.18); border-color: rgba(249,115,22,.36); }
html.dark .mon-sev-chip.sev-menor   { color: #fcd34d; background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.3); }
html.dark .mon-sev-chip.sev-aviso   { color: #93c5fd; background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.3); }
html.dark .mon-sev-chip.sev-info    { color: #a5f3fc; background: rgba(34,211,238,.14); border-color: rgba(34,211,238,.28); }
html.dark .mon-sev-chip.sev-ok      { color: #86efac; background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.28); }
html.dark .stat-card.mon-alarm-critica { background: rgba(239,68,68,.07); }
html.dark .db-sum-alarm-critica .db-sum-k,
html.dark .db-sum-alarm-critica .db-sum-v { color: #fca5a5 !important; }
html.dark .db-sum-alarm .db-sum-k,
html.dark .db-sum-alarm .db-sum-v { color: #fcd34d !important; }
html.dark .db-sum-alarm-ok .db-sum-k,
html.dark .db-sum-alarm-ok .db-sum-v { color: #86efac !important; }

/* Atualizacoes de Campo */
.field-updates-page .field-updates-title {
margin: 0;
line-height: 1.18;
letter-spacing: 0;
}
.field-updates-page .field-updates-queue {
margin-bottom: 16px;
}
.field-updates-page .field-updates-panel-head {
align-items: flex-start;
}
.field-updates-page .field-updates-panel-head > div {
display: grid;
gap: 4px;
min-width: 0;
}
.field-updates-page .field-updates-panel-head span {
color: #2f6fb6;
}
.field-updates-page .field-updates-panel-head p {
max-width: 520px;
text-align: right;
}
.field-updates-page .field-updates-empty {
min-height: 154px;
display: grid;
place-items: center;
align-content: center;
gap: 8px;
padding: 30px 18px;
text-align: center;
}
.field-updates-page .field-updates-empty h4 {
margin: 0;
color: var(--text);
font-size: 1rem;
font-weight: 850;
line-height: 1.25;
}
.field-updates-page .field-updates-empty p {
max-width: 520px;
margin: 0;
color: var(--text-secondary);
font-size: .92rem;
font-weight: 650;
line-height: 1.45;
}
html.dark body:not(.login-page) .field-updates-page .field-updates-panel-head span {
color: #93c5fd;
}
html.dark body:not(.login-page) .field-updates-page .field-updates-empty h4 {
color: #f8fbff;
}
html.dark body:not(.login-page) .field-updates-page .field-updates-empty p {
color: #c4d4eb;
}
.field-updates-page .field-updates-list {
display: grid;
gap: 14px;
}
.field-updates-page .field-updates-site-group {
border: 1px solid var(--border);
border-radius: 14px;
background:
linear-gradient(180deg, rgba(28, 50, 88, 0.78) 0%, rgba(20, 36, 66, 0.86) 100%),
var(--surface-1);
padding: 12px;
box-shadow: 0 10px 24px rgba(4, 10, 26, 0.24);
}
.field-updates-page .field-updates-site-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px 16px;
margin-bottom: 10px;
}
.field-updates-page .field-updates-site-ident {
display: grid;
gap: 2px;
min-width: 0;
}
.field-updates-page .field-updates-site-ident strong {
font-size: 1rem;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.field-updates-page .field-updates-site-ident span {
font-size: .85rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.field-updates-page .field-updates-site-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
color: var(--text-muted);
font-size: .86rem;
}
.field-updates-page .field-updates-site-open {
min-width: 0;
white-space: nowrap;
}
.field-updates-page .field-updates-row {
border: 1px solid var(--border);
border-radius: 12px;
background:
linear-gradient(180deg, rgba(26, 44, 78, 0.88) 0%, rgba(17, 30, 55, 0.92) 100%),
var(--surface-1);
padding: 10px 12px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 18px rgba(3, 10, 24, 0.2);
}
.field-updates-page .field-updates-form {
display: grid;
grid-template-columns: minmax(220px, 1.6fr) minmax(220px, 1.2fr) minmax(260px, 2fr) auto;
gap: 12px;
align-items: center;
}
.field-updates-page .field-updates-col {
min-width: 0;
}
.field-updates-page .field-updates-item-title {
font-size: 1.08rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.field-updates-page .field-updates-item-sub {
margin-top: 3px;
font-size: .92rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.field-updates-page .field-updates-tech-name {
font-weight: 700;
color: var(--text);
}
.field-updates-page .field-updates-tech-email,
.field-updates-page .field-updates-tech-date {
font-size: .88rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.field-updates-page .field-updates-tech-date {
margin-top: 2px;
}
.field-updates-page .field-updates-just-label {
display: block;
font-size: .84rem;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 4px;
}
.field-updates-page .field-updates-just-preview {
font-size: .93rem;
color: var(--text);
line-height: 1.35;
max-height: 2.7em;
overflow: hidden;
word-break: break-word;
}
.field-updates-page .field-updates-col-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.field-updates-page .field-updates-col-actions .btn {
min-width: 126px;
}
.field-updates-page .field-updates-history-table th:nth-child(3),
.field-updates-page .field-updates-history-table td:nth-child(3),
.field-updates-page .field-updates-history-table th:nth-child(7),
.field-updates-page .field-updates-history-table td:nth-child(7) {
max-width: 260px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.field-updates-page .field-updates-modal-body {
display: grid;
gap: 8px;
}
.field-updates-page .field-updates-modal-text {
margin: 0;
color: var(--text-muted);
}
.field-updates-page .field-updates-modal-item {
margin: 0;
font-weight: 700;
color: var(--text);
}

@media (max-width: 1320px) {
.field-updates-page .field-updates-panel-head p {
text-align: left;
}
.field-updates-page .field-updates-site-header {
flex-direction: column;
align-items: flex-start;
}
.field-updates-page .field-updates-site-meta {
justify-content: flex-start;
}
.field-updates-page .field-updates-form {
grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
}
.field-updates-page .field-updates-col-just {
grid-column: 1 / -1;
}
.field-updates-page .field-updates-col-actions {
justify-content: flex-start;
}
}

@media (max-width: 840px) {
.field-updates-page .field-updates-panel-head {
display: grid;
gap: 8px;
}
.field-updates-page .field-updates-empty {
min-height: 132px;
padding: 24px 14px;
}
.field-updates-page .field-updates-row {
padding: 10px;
}
.field-updates-page .field-updates-form {
grid-template-columns: 1fr;
gap: 10px;
}
.field-updates-page .field-updates-col-actions {
justify-content: flex-start;
}
.field-updates-page .field-updates-col-actions .btn {
min-width: 0;
flex: 1 1 calc(50% - 8px);
}
}

@media (min-width: 769px) {
.db-section-mon[data-collapsed="true"] .db-section-toggle {
background: #f8fafc !important;
border-color: #cbd5e1 !important;
color: #475569 !important;
box-shadow: none !important;
opacity: 1 !important;
}

.db-section-mon[data-collapsed="true"] .db-section-toggle:hover,
.db-section-mon[data-collapsed="true"] .db-section-toggle:focus-visible {
background: #eef6ff !important;
border-color: #60a5fa !important;
color: #1d4ed8 !important;
}

html.dark .db-section-mon[data-collapsed="true"] .db-section-toggle {
background: rgba(30, 41, 59, 0.92) !important;
border-color: rgba(96, 165, 250, 0.28) !important;
color: #cbd5e1 !important;
}

html.dark .db-section-mon[data-collapsed="true"] .db-section-toggle:hover,
html.dark .db-section-mon[data-collapsed="true"] .db-section-toggle:focus-visible {
background: rgba(37, 99, 235, 0.2) !important;
border-color: rgba(96, 165, 250, 0.48) !important;
color: #eff6ff !important;
}

.db-section[data-collapsed="true"] .db-section-head,
.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-section-head,
.db-twin-row[data-has-expanded="true"] .db-section[data-collapsed="true"] .db-section-head {
display: flex !important;
align-items: center !important;
gap: 14px !important;
}

.db-section[data-collapsed="true"] .db-section-title,
.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-section-title,
.db-twin-row[data-has-expanded="true"] .db-section[data-collapsed="true"] .db-section-title {
flex: 1 1 auto !important;
min-width: 0 !important;
}

.db-section[data-collapsed="true"] .db-section-title small,
.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-section-title small,
.db-twin-row[data-has-expanded="true"] .db-section[data-collapsed="true"] .db-section-title small {
display: none !important;
}

.db-section[data-collapsed="true"] .db-section-summary,
.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-section-summary,
.db-twin-row[data-has-expanded="true"] .db-section[data-collapsed="true"] .db-section-summary {
grid-column: auto !important;
grid-row: auto !important;
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin-left: auto !important;
justify-content: flex-end !important;
align-items: center !important;
align-content: center !important;
flex-wrap: nowrap !important;
row-gap: 0 !important;
column-gap: 8px !important;
white-space: nowrap !important;
}

.db-section[data-collapsed="true"] .db-section-toggle,
.db-twin-row[data-has-expanded="false"] .db-section[data-collapsed="true"] .db-section-toggle,
.db-twin-row[data-has-expanded="true"] .db-section[data-collapsed="true"] .db-section-toggle {
grid-column: auto !important;
grid-row: auto !important;
margin-left: 10px !important;
justify-self: auto !important;
align-self: center !important;
flex: 0 0 auto !important;
}

.db-section[data-collapsed="true"] .db-sum-kv,
.db-section[data-collapsed="true"] .db-sum-chip {
align-items: center !important;
text-align: center !important;
}

.db-section[data-collapsed="true"] .db-sum-k,
.db-section[data-collapsed="true"] .db-sum-v,
.db-section[data-collapsed="true"] .db-sum-chip span,
.db-section[data-collapsed="true"] .db-sum-chip strong {
display: block !important;
width: auto !important;
text-align: center !important;
}
}

/* Light theme safety pass: prevent dark card treatments leaking outside html.dark. */
html:not(.dark) .db-section-mon .stat-card {
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
border-color: #c7d7ef !important;
box-shadow: 0 10px 24px rgba(29, 62, 112, 0.08) !important;
color: #0f1f35 !important;
}

html:not(.dark) .db-section-mon .stat-card.mon-pct {
background: linear-gradient(135deg, rgba(240, 253, 244, 0.94) 0%, #ffffff 68%) !important;
border-color: rgba(34, 197, 94, 0.32) !important;
}

html:not(.dark) .db-section-mon .stat-card.mon-nok {
border-color: rgba(239, 68, 68, 0.36) !important;
}

html:not(.dark) .db-section-mon .stat-card.mon-manut {
border-color: rgba(245, 158, 11, 0.38) !important;
}

html:not(.dark) .db-section-mon .stat-card.mon-last {
border-color: rgba(99, 102, 241, 0.34) !important;
}

html:not(.dark) .db-section-mon .stat-card.mon-alarm {
border-color: rgba(244, 63, 94, 0.38) !important;
}

html:not(.dark) .db-section-mon .stat-card:hover,
html:not(.dark) .db-section-mon .stat-card:focus-visible {
border-color: #7fb2ef !important;
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.14), 0 12px 28px rgba(29, 62, 112, 0.12) !important;
}

html:not(.dark) .db-section-mon .stat-card .stat-info h3,
html:not(.dark) .db-section-mon .stat-card.mon-pct .stat-info h3,
html:not(.dark) .db-section-mon .stat-card.mon-last .stat-info h3 {
color: #111c2f !important;
text-shadow: none !important;
}

html:not(.dark) .db-section-mon .stat-card .stat-info p,
html:not(.dark) .db-section-mon .stat-card.mon-pct .stat-info p,
html:not(.dark) .db-section-mon .stat-card.mon-last .stat-info p {
color: #536985 !important;
text-shadow: none !important;
}

html:not(.dark) .db-section-mon .stat-card .stat-info small,
html:not(.dark) .db-section-mon .db-inv-note {
color: #64748b !important;
}

html:not(.dark) .db-section-mon .stat-card .stat-icon,
html:not(.dark) .db-section-mon .stat-card.mon-pct .stat-icon {
box-shadow: none !important;
}

html:not(.dark) .db-section-mon .stat-card.mon-nok .stat-icon {
background: rgba(239, 68, 68, 0.10) !important;
color: #dc2626 !important;
}

html:not(.dark) .db-section-mon .stat-card.mon-manut .stat-icon {
background: rgba(245, 158, 11, 0.12) !important;
color: #d97706 !important;
}

html:not(.dark) .db-section-mon .stat-card.mon-last .stat-icon {
background: rgba(99, 102, 241, 0.12) !important;
color: #4f46e5 !important;
}

html:not(.dark) .db-section-mon .stat-card.mon-alarm .stat-icon {
background: rgba(124, 58, 237, 0.12) !important;
color: #6d28d9 !important;
}

html:not(.dark) .db-section-mon .stat-card.mon-pct .stat-pct-ring,
html:not(.dark) .db-section-mon .stat-pct-ring {
box-shadow: inset 0 0 0 7px rgba(240, 253, 244, 0.98) !important;
color: var(--pct-color, #16a34a) !important;
}

html:not(.dark) .db-section-mon .mon-sev-chip {
text-shadow: none !important;
}

html:not(.dark) .db-section-mon .db-section-toggle {
background: var(--bg, #f3f7fc) !important;
border-color: var(--border, #c7d7ef) !important;
color: var(--muted, #5a7396) !important;
box-shadow: none !important;
opacity: 1 !important;
}

html:not(.dark) .db-section-mon .db-section-toggle:hover,
html:not(.dark) .db-section-mon .db-section-toggle:focus-visible {
background: rgba(91, 55, 219, 0.08) !important;
border-color: rgba(91, 55, 219, 0.35) !important;
color: var(--primary, #5b37db) !important;
outline: none !important;
}

/* Dashboard collapsed summary: compact, stable and consistent. */
.db-section[data-collapsed="true"] .db-section-head {
min-height: 54px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}

.db-section-head .db-section-toggle {
height: 34px !important;
min-height: 34px !important;
min-width: 112px !important;
width: 112px !important;
padding: 0 12px !important;
border-radius: 10px !important;
border: 1px solid var(--border, #c7d7ef) !important;
background: var(--bg, #f3f7fc) !important;
color: var(--muted, #5a7396) !important;
box-shadow: none !important;
font-size: 12px !important;
font-weight: 800 !important;
gap: 7px !important;
opacity: 1 !important;
}

.db-section-head .db-section-toggle span {
display: inline !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1 !important;
}

.db-section-head .db-section-toggle svg {
width: 14px !important;
height: 14px !important;
}

.db-section-head .db-section-toggle:disabled {
opacity: .72 !important;
cursor: wait !important;
}

.db-section-head .db-section-toggle:hover,
.db-section-head .db-section-toggle:focus-visible {
background: rgba(91, 55, 219, 0.08) !important;
border-color: rgba(91, 55, 219, 0.35) !important;
color: var(--primary, #5b37db) !important;
outline: none !important;
}

.db-section-summary {
align-items: center !important;
gap: 8px !important;
}

.db-section-summary .db-sum-kv,
.db-section-summary .db-sum-chip {
width: 54px !important;
min-width: 54px !important;
height: 34px !important;
min-height: 34px !important;
padding: 2px 6px !important;
border-radius: 9px !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 1px !important;
}

.db-section-summary .db-sum-kv .db-sum-k,
.db-section-summary .db-sum-chip span {
width: 100% !important;
text-align: center !important;
font-size: 8px !important;
line-height: 1 !important;
letter-spacing: .04em !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}

.db-section-summary .db-sum-kv .db-sum-v,
.db-section-summary .db-sum-chip strong {
width: 100% !important;
text-align: center !important;
font-size: 15px !important;
line-height: 1 !important;
}

.db-section-summary .db-sum-sep {
height: 24px !important;
}

.db-section-summary .db-sum-kv.db-sum-empty {
width: 112px !important;
min-width: 112px !important;
height: 34px !important;
flex-direction: row !important;
}

.db-section-summary .db-sum-kv.db-sum-empty .db-sum-k {
display: none !important;
}

.db-section-summary .db-sum-kv.db-sum-empty .db-sum-v {
font-size: 12px !important;
color: inherit !important;
}

#db-sum-mon.db-section-summary {
gap: 9px !important;
}

#db-sum-mon.db-section-summary .db-sum-kv {
width: auto !important;
min-width: 68px !important;
padding-left: 10px !important;
padding-right: 10px !important;
}

#db-sum-mon.db-section-summary .db-sum-kv.db-sum-pct,
#db-sum-mon.db-section-summary .db-sum-kv.db-sum-manut {
min-width: 82px !important;
}

#db-sum-mon.db-section-summary .db-sum-kv .db-sum-k {
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: .03em !important;
}

html.dark .db-section-head .db-section-toggle,
html.dark .db-section-summary .db-sum-empty {
background: rgba(255,255,255,0.04) !important;
border-color: var(--border, #243352) !important;
color: var(--muted, #bac4d6) !important;
}

html.dark .db-section-head .db-section-toggle:hover,
html.dark .db-section-head .db-section-toggle:focus-visible {
background: rgba(91,55,219,0.16) !important;
border-color: rgba(91,55,219,0.4) !important;
color: #a78bfa !important;
}

/* Desktop filters: one operational row per filter bar; overflow scrolls instead of wrapping. */
@media (min-width: 769px) {
body:not(.login-page) .filters-bar > form.filters-collapsed,
body:not(.login-page) .filters-form.filters-collapsed {
display: none !important;
}

body:not(.login-page) .filters-bar > form,
body:not(.login-page) .filters-form {
display: flex !important;
flex-wrap: nowrap !important;
align-items: end !important;
gap: 12px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding-bottom: 12px;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: rgba(126, 167, 227, 0.45) transparent;
}

body:not(.login-page) .filters-bar > form::-webkit-scrollbar,
body:not(.login-page) .filters-form::-webkit-scrollbar {
height: 8px;
}

body:not(.login-page) .filters-bar > form::-webkit-scrollbar-track,
body:not(.login-page) .filters-form::-webkit-scrollbar-track {
background: transparent;
}

body:not(.login-page) .filters-bar > form::-webkit-scrollbar-thumb,
body:not(.login-page) .filters-form::-webkit-scrollbar-thumb {
background: rgba(126, 167, 227, 0.45);
border-radius: 999px;
}

body:not(.login-page) .filters-form .filter-group,
body:not(.login-page) .filters-bar > form .filter-group,
body:not(.login-page) .filters-form label.filter-group,
body:not(.login-page) .filters-bar > form label.filter-group {
flex: 1 0 160px !important;
min-width: 160px !important;
max-width: none !important;
grid-column: auto !important;
}

body:not(.login-page) .filters-form .filter-search,
body:not(.login-page) .filters-bar > form .filter-search,
body:not(.login-page) .filters-form .filter-busca,
body:not(.login-page) .filters-bar > form .filter-busca {
flex: 1.35 0 240px !important;
min-width: 240px !important;
}

body:not(.login-page) .filters-form .filter-actions,
body:not(.login-page) .filters-bar > form .filter-actions,
body:not(.login-page) .filters-form .dashboard-filter-actions,
body:not(.login-page) .filters-bar > form .dashboard-filter-actions {
display: inline-flex !important;
flex: 0 0 auto !important;
grid-column: auto !important;
align-self: end !important;
align-items: end !important;
justify-content: flex-end !important;
gap: 8px !important;
width: auto !important;
max-width: none !important;
margin-left: auto !important;
}

body:not(.login-page) .filters-form .filter-actions .btn,
body:not(.login-page) .filters-bar > form .filter-actions .btn,
body:not(.login-page) .filters-form .dashboard-filter-actions .btn,
body:not(.login-page) .filters-bar > form .dashboard-filter-actions .btn {
flex: 0 0 auto !important;
width: auto !important;
min-width: 96px !important;
white-space: nowrap !important;
}

body:not(.login-page) .filters-form input,
body:not(.login-page) .filters-form select,
body:not(.login-page) .filters-bar > form input,
body:not(.login-page) .filters-bar > form select {
width: 100% !important;
}
}

/* Interaction typography system: one visual language for buttons, filters, chips and badges. */
body:not(.login-page) button,
body:not(.login-page) .btn,
body:not(.login-page) .btn-primary,
body:not(.login-page) .btn-secondary,
body:not(.login-page) .btn-outline,
body:not(.login-page) .btn-ghost,
body:not(.login-page) .topbar-btn,
body:not(.login-page) .site-switcher,
body:not(.login-page) .user-menu-trigger,
body:not(.login-page) .db-section-toggle,
body:not(.login-page) .filters-toggle,
body:not(.login-page) .view-btn,
body:not(.login-page) .tab-btn,
body:not(.login-page) .hud-tab,
body:not(.login-page) .monitor-tab,
body:not(.login-page) .quick-action,
body:not(.login-page) .action-btn,
body:not(.login-page) .menu-item {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1.1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}

body:not(.login-page) .btn-sm,
body:not(.login-page) .topbar-btn,
body:not(.login-page) .view-btn,
body:not(.login-page) .filters-toggle,
body:not(.login-page) .db-section-toggle,
body:not(.login-page) .hud-tab,
body:not(.login-page) .monitor-tab {
font-size: 12px !important;
}

body:not(.login-page) .btn-lg,
body:not(.login-page) .btn-mobile-hide-monitoring,
body:not(.login-page) .dashboard-action-primary,
body:not(.login-page) .hero-action,
body:not(.login-page) .site-primary-action {
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1.05 !important;
letter-spacing: 0 !important;
}

body:not(.login-page) .topbar-search input,
body:not(.login-page) .global-search-input,
body:not(.login-page) .filters-form input,
body:not(.login-page) .filters-form select,
body:not(.login-page) .filters-bar > form input,
body:not(.login-page) .filters-bar > form select,
body:not(.login-page) .form-control,
body:not(.login-page) input,
body:not(.login-page) select,
body:not(.login-page) textarea {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 13px;
font-weight: 600;
letter-spacing: 0;
}

body:not(.login-page) input::placeholder,
body:not(.login-page) textarea::placeholder {
font-weight: 600;
letter-spacing: 0;
}

body:not(.login-page) .badge,
body:not(.login-page) .status-badge,
body:not(.login-page) .hud-site-type-badge,
body:not(.login-page) .pill,
body:not(.login-page) .chip,
body:not(.login-page) .metric-chip,
body:not(.login-page) .counter-chip,
body:not(.login-page) .db-sum-k,
body:not(.login-page) .db-sum-chip span {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: .045em !important;
text-transform: uppercase !important;
}

body:not(.login-page) .db-sum-v,
body:not(.login-page) .db-sum-chip strong,
body:not(.login-page) .metric-chip strong,
body:not(.login-page) .counter-chip strong {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 15px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}

body:not(.login-page) .status-badge,
body:not(.login-page) .hud-site-type-badge,
body:not(.login-page) .pill,
body:not(.login-page) .chip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-height: 22px;
}

body:not(.login-page) .db-section-title,
body:not(.login-page) .section-title,
body:not(.login-page) .card-title,
body:not(.login-page) .panel-title,
body:not(.login-page) .hud-card-title h3,
body:not(.login-page) #hud-sites-list[data-sites-view="list"] .hud-card-title h3 {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-weight: 800 !important;
letter-spacing: -.01em !important;
}

body:not(.login-page) .hud-card-title p,
body:not(.login-page) #hud-sites-list[data-sites-view="list"] .hud-card-title p,
body:not(.login-page) .hud-card-endereco,
body:not(.login-page) #hud-sites-list[data-sites-view="list"] .hud-card-endereco {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
}

body:not(.login-page) .hud-card-stats strong,
body:not(.login-page) #hud-sites-list[data-sites-view="list"] .hud-card-stats strong {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 15px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
}

body:not(.login-page) .hud-card-stats span,
body:not(.login-page) #hud-sites-list[data-sites-view="list"] .hud-card-stats span,
body:not(.login-page) .hud-meta-item {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: .035em !important;
text-transform: none !important;
}

body:not(.login-page) .site-switcher span,
body:not(.login-page) .user-menu-trigger span,
body:not(.login-page) .topbar-btn span,
body:not(.login-page) .btn span,
body:not(.login-page) .db-section-toggle span,
body:not(.login-page) .filters-toggle span,
body:not(.login-page) .view-btn span {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit !important;
}

/* Analytics 2026: operational focus, no financial exposure. */
.dash-insight-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: 16px 0 22px;
}

.dash-insight-card {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"label value"
"hint value";
align-items: center;
gap: 4px 12px;
min-height: 74px;
padding: 14px 16px;
border: 1px solid var(--border, #c7d7ef);
border-radius: 14px;
background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(242,247,255,.92));
box-shadow: 0 10px 24px rgba(24, 58, 104, .08);
color: var(--text, #0f172a);
text-decoration: none;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.dash-insight-card:hover,
.dash-insight-card:focus-visible {
transform: translateY(-2px);
border-color: rgba(91, 55, 219, .38);
box-shadow: 0 14px 30px rgba(24, 58, 104, .13);
outline: none;
}

.dash-insight-card span {
grid-area: label;
font-size: 11px;
font-weight: 800;
line-height: 1;
letter-spacing: .045em;
text-transform: uppercase;
color: var(--muted, #607394);
}

.dash-insight-card strong {
grid-area: value;
font-size: 30px;
font-weight: 850;
line-height: 1;
letter-spacing: -.02em;
color: var(--primary, #5b37db);
}

.dash-insight-card small {
grid-area: hint;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
color: var(--muted, #607394);
}

html.dark .dash-insight-card {
background: linear-gradient(135deg, rgba(20,32,54,.96), rgba(15,27,48,.96));
border-color: rgba(125, 159, 210, .28);
box-shadow: 0 12px 28px rgba(0,0,0,.18);
color: var(--text, #e8ecf4);
}

html.dark .dash-insight-card:hover,
html.dark .dash-insight-card:focus-visible {
border-color: rgba(139, 119, 246, .52);
box-shadow: 0 16px 34px rgba(0,0,0,.26);
}

html.dark .dash-insight-card span,
html.dark .dash-insight-card small {
color: var(--muted, #bac4d6);
}

html.dark .dash-insight-card strong {
color: #a78bfa;
}

@media (max-width: 980px) {
.dash-insight-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 560px) {
.dash-insight-strip {
grid-template-columns: 1fr;
}
}

/* Site/status pills: one shape system, semantic colors per context. */
body:not(.login-page) .badge,
body:not(.login-page) .status-badge,
body:not(.login-page) .site-type-badge,
body:not(.login-page) .hud-site-type-badge,
body:not(.login-page) .home-site-strip-tag {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-height: 22px;
padding: 0 9px;
border-radius: 999px;
font-size: 10px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
white-space: nowrap;
border: 1px solid rgba(173, 195, 227, 0.58);
}

body:not(.login-page) .badge-remota,
body:not(.login-page) .site-type-badge.badge-remota,
body:not(.login-page) .hud-site-type-badge.badge-remota {
background: rgba(20, 184, 166, 0.14);
border-color: rgba(45, 212, 191, 0.34);
color: #0f766e;
}

body:not(.login-page) .badge-warning,
body:not(.login-page) .site-type-badge.badge-warning,
body:not(.login-page) .hud-site-type-badge.badge-warning {
background: rgba(249, 115, 22, 0.14);
border-color: rgba(251, 146, 60, 0.38);
color: #9a3412;
}

body:not(.login-page) .badge-master,
body:not(.login-page) .site-type-badge.badge-master,
body:not(.login-page) .hud-site-type-badge.badge-master {
background: rgba(99, 102, 241, 0.14);
border-color: rgba(129, 140, 248, 0.38);
color: #3730a3;
}

html.dark body:not(.login-page) .badge-remota,
html.dark body:not(.login-page) .site-type-badge.badge-remota,
html.dark body:not(.login-page) .hud-site-type-badge.badge-remota {
background: rgba(20, 184, 166, 0.18);
border-color: rgba(94, 234, 212, 0.36);
color: #a7f3d0;
}

html.dark body:not(.login-page) .badge-warning,
html.dark body:not(.login-page) .site-type-badge.badge-warning,
html.dark body:not(.login-page) .hud-site-type-badge.badge-warning {
background: rgba(249, 115, 22, 0.20);
border-color: rgba(251, 191, 36, 0.38);
color: #fed7aa;
}

html.dark body:not(.login-page) .badge-master,
html.dark body:not(.login-page) .site-type-badge.badge-master,
html.dark body:not(.login-page) .hud-site-type-badge.badge-master {
background: rgba(99, 102, 241, 0.22);
border-color: rgba(196, 181, 253, 0.40);
color: #ddd6fe;
}

.home-site-strip-cover.has-image::after,
.hud-card-preview.has-image::after {
background:
linear-gradient(180deg, rgba(2, 8, 23, 0.36) 0%, rgba(2, 8, 23, 0.18) 40%, rgba(2, 8, 23, 0.66) 100%),
linear-gradient(90deg, rgba(2, 8, 23, 0.24), rgba(2, 8, 23, 0.02) 48%, rgba(2, 8, 23, 0.26));
}

.home-site-strip-cover .badge,
.home-site-strip-cover .status-badge,
.home-site-strip-cover .site-type-badge,
.hud-card-overlay .badge,
.hud-card-overlay .status-badge,
.hud-card-overlay .site-type-badge,
.hud-card-overlay .hud-site-type-badge {
min-height: 24px !important;
padding: 0 10px !important;
font-size: 10px !important;
font-weight: 850 !important;
text-transform: uppercase !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.68) !important;
box-shadow: 0 5px 14px rgba(2, 8, 23, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.52) !important;
backdrop-filter: blur(8px) saturate(1.16);
-webkit-backdrop-filter: blur(8px) saturate(1.16);
}

.home-site-strip-cover .status-ok,
.hud-card-overlay .status-ok {
background: linear-gradient(135deg, rgba(21, 128, 61, 0.94), rgba(22, 163, 74, 0.88)) !important;
border-color: rgba(187, 247, 208, 0.72) !important;
}

.home-site-strip-cover .status-nok,
.hud-card-overlay .status-nok {
background: linear-gradient(135deg, rgba(153, 27, 27, 0.94), rgba(220, 38, 38, 0.86)) !important;
border-color: rgba(252, 165, 165, 0.72) !important;
}

.home-site-strip-cover .badge-remota,
.home-site-strip-cover .site-type-badge.badge-remota,
.hud-card-overlay .badge-remota,
.hud-card-overlay .site-type-badge.badge-remota,
.hud-card-overlay .hud-site-type-badge.badge-remota {
background: linear-gradient(135deg, rgba(15, 118, 110, 0.94), rgba(20, 184, 166, 0.78)) !important;
border-color: rgba(153, 246, 228, 0.72) !important;
}

.home-site-strip-cover .badge-warning,
.home-site-strip-cover .site-type-badge.badge-warning,
.hud-card-overlay .badge-warning,
.hud-card-overlay .site-type-badge.badge-warning,
.hud-card-overlay .hud-site-type-badge.badge-warning {
background: linear-gradient(135deg, rgba(146, 64, 14, 0.96), rgba(234, 88, 12, 0.84)) !important;
border-color: rgba(253, 186, 116, 0.82) !important;
}

.home-site-strip-cover .badge-master,
.home-site-strip-cover .site-type-badge.badge-master,
.hud-card-overlay .badge-master,
.hud-card-overlay .site-type-badge.badge-master,
.hud-card-overlay .hud-site-type-badge.badge-master {
background: linear-gradient(135deg, rgba(55, 48, 163, 0.94), rgba(79, 70, 229, 0.80)) !important;
border-color: rgba(196, 181, 253, 0.74) !important;
}

html.dark body:not(.login-page) .home-site-strip-cover .badge.status-ok,
html:not(.dark) body:not(.login-page) .home-site-strip-cover .badge.status-ok {
background: linear-gradient(135deg, rgba(21, 128, 61, 0.94), rgba(22, 163, 74, 0.88)) !important;
border-color: rgba(187, 247, 208, 0.72) !important;
color: #ffffff !important;
}

html.dark body:not(.login-page) .home-site-strip-cover .badge.status-nok,
html:not(.dark) body:not(.login-page) .home-site-strip-cover .badge.status-nok {
background: linear-gradient(135deg, rgba(153, 27, 27, 0.94), rgba(220, 38, 38, 0.86)) !important;
border-color: rgba(252, 165, 165, 0.72) !important;
color: #ffffff !important;
}

html.dark body:not(.login-page) .home-site-strip-cover .site-type-badge.badge-remota,
html:not(.dark) body:not(.login-page) .home-site-strip-cover .site-type-badge.badge-remota {
background: linear-gradient(135deg, rgba(15, 118, 110, 0.94), rgba(20, 184, 166, 0.78)) !important;
border-color: rgba(153, 246, 228, 0.72) !important;
color: #ffffff !important;
}

html.dark body:not(.login-page) .home-site-strip-cover .site-type-badge.badge-warning,
html:not(.dark) body:not(.login-page) .home-site-strip-cover .site-type-badge.badge-warning {
background: linear-gradient(135deg, rgba(146, 64, 14, 0.96), rgba(234, 88, 12, 0.84)) !important;
border-color: rgba(253, 186, 116, 0.82) !important;
color: #ffffff !important;
}

html.dark body:not(.login-page) .home-site-strip-cover .site-type-badge.badge-master,
html:not(.dark) body:not(.login-page) .home-site-strip-cover .site-type-badge.badge-master {
background: linear-gradient(135deg, rgba(55, 48, 163, 0.94), rgba(79, 70, 229, 0.80)) !important;
border-color: rgba(196, 181, 253, 0.74) !important;
color: #ffffff !important;
}

html.dark body:not(.login-page) .home-site-strip-cover .badge,
html:not(.dark) body:not(.login-page) .home-site-strip-cover .badge,
html.dark body:not(.login-page) .home-site-strip-cover .site-type-badge,
html:not(.dark) body:not(.login-page) .home-site-strip-cover .site-type-badge {
text-transform: uppercase !important;
}

/* Readability pass: keep compact operational text legible in both themes. */
body:not(.login-page) .db-section-title small,
body:not(.login-page) .db-section-summary,
body:not(.login-page) .db-inv-note,
body:not(.login-page) .dash-insight-card span,
body:not(.login-page) .dash-insight-card small,
body:not(.login-page) .field-updates-item-sub,
body:not(.login-page) .field-updates-tech-email,
body:not(.login-page) .field-updates-tech-date,
body:not(.login-page) .field-updates-just-label,
body:not(.login-page) .field-updates-modal-text {
color: var(--muted, #50637d) !important;
}

body:not(.login-page) .stat-info p,
body:not(.login-page) .stat-info small,
body:not(.login-page) .site-card-address,
body:not(.login-page) .site-card-meta,
body:not(.login-page) .home-site-strip-subtitle {
color: var(--text-secondary, #25364d) !important;
}

html.dark body:not(.login-page) .db-section-title small,
html.dark body:not(.login-page) .db-section-summary,
html.dark body:not(.login-page) .db-inv-note,
html.dark body:not(.login-page) .dash-insight-card span,
html.dark body:not(.login-page) .dash-insight-card small,
html.dark body:not(.login-page) .field-updates-item-sub,
html.dark body:not(.login-page) .field-updates-tech-email,
html.dark body:not(.login-page) .field-updates-tech-date,
html.dark body:not(.login-page) .field-updates-just-label,
html.dark body:not(.login-page) .field-updates-modal-text {
color: var(--muted, #aebad0) !important;
}

html.dark body:not(.login-page) .stat-info p,
html.dark body:not(.login-page) .stat-info small,
html.dark body:not(.login-page) .site-card-address,
html.dark body:not(.login-page) .site-card-meta,
html.dark body:not(.login-page) .home-site-strip-subtitle {
color: var(--text-secondary, #d3deef) !important;
}

body:not(.login-page) .hud-hero-analytics .hud-analytic-card,
body:not(.login-page) .hud-hero-analytics .hud-spark-legend span,
body:not(.login-page) .hud-hero-analytics .hud-donut-legend span,
body:not(.login-page) .hud-hero-analytics .hud-spark-dot {
opacity: 1 !important;
}

body:not(.login-page) .hud-hero-analytics .hud-spark-legend span,
body:not(.login-page) .hud-hero-analytics .hud-donut-legend span,
body:not(.login-page) .hud-hero-analytics .hud-spark-dot {
transform: none !important;
}

html:not(.dark) body:not(.login-page) .hud-hero-analytics {
--hud-analytics-muted: #344f72;
--hud-analytics-text: #0f2d50;
--hud-analytics-chip-bg: #e9f2fd;
}

html:not(.dark) body:not(.login-page) .hud-analytic-card header span,
html:not(.dark) body:not(.login-page) .hud-status-bars label,
html:not(.dark) body:not(.login-page) .hud-spark-legend span,
html:not(.dark) body:not(.login-page) .hud-donut-legend span {
color: #344f72 !important;
}

html:not(.dark) body:not(.login-page) .hud-analytic-card header strong,
html:not(.dark) body:not(.login-page) .hud-status-bars b,
html:not(.dark) body:not(.login-page) .hud-spark-legend b,
html:not(.dark) body:not(.login-page) .hud-donut-center {
color: #0f2d50 !important;
}

html:not(.dark) body:not(.login-page) .hud-analytic-note {
color: #405a7b !important;
}

html:not(.dark) body:not(.login-page) .hud-spark-axis {
stroke: #aebfd9 !important;
}

html:not(.dark) body:not(.login-page) .hud-status-track {
background: #cfddef !important;
}

html.dark body:not(.login-page) .hud-hero-analytics {
--hud-analytics-muted: #d2def0;
--hud-analytics-text: #f8fbff;
--hud-analytics-chip-bg: rgba(14, 39, 78, 0.68);
}

html.dark body:not(.login-page) .hud-analytic-card header span,
html.dark body:not(.login-page) .hud-status-bars label,
html.dark body:not(.login-page) .hud-spark-legend span,
html.dark body:not(.login-page) .hud-donut-legend span {
color: #d2def0 !important;
}

html.dark body:not(.login-page) .hud-analytic-note {
color: #c5d4ea !important;
}

/* Dashboard section toggles: same size and treatment for Inventory, Monitoring and Updates. */
body:not(.login-page) .db-section-head .db-section-toggle,
body:not(.login-page) .db-section-mon[data-collapsed="true"] .db-section-toggle {
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 112px !important;
width: 112px !important;
min-width: 112px !important;
max-width: 112px !important;
height: 34px !important;
min-height: 34px !important;
padding: 0 12px !important;
gap: 7px !important;
border-radius: 10px !important;
border: 1px solid #c7d7ef !important;
background: #f3f7fc !important;
color: #50637d !important;
box-shadow: none !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1 !important;
opacity: 1 !important;
}

body:not(.login-page) .db-section-head .db-section-toggle span,
body:not(.login-page) .db-section-mon[data-collapsed="true"] .db-section-toggle span {
display: inline !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1 !important;
}

body:not(.login-page) .db-section-head .db-section-toggle svg,
body:not(.login-page) .db-section-mon[data-collapsed="true"] .db-section-toggle svg {
width: 14px !important;
height: 14px !important;
flex: 0 0 14px !important;
}

body:not(.login-page) .db-section-head .db-section-toggle:hover,
body:not(.login-page) .db-section-head .db-section-toggle:focus-visible,
body:not(.login-page) .db-section-mon[data-collapsed="true"] .db-section-toggle:hover,
body:not(.login-page) .db-section-mon[data-collapsed="true"] .db-section-toggle:focus-visible {
background: rgba(91, 55, 219, 0.08) !important;
border-color: rgba(91, 55, 219, 0.35) !important;
color: #5b37db !important;
outline: none !important;
}

html.dark body:not(.login-page) .db-section-head .db-section-toggle,
html.dark body:not(.login-page) .db-section-mon[data-collapsed="true"] .db-section-toggle {
border-color: #344c70 !important;
background: rgba(255, 255, 255, 0.04) !important;
color: #c9d8ee !important;
}

html.dark body:not(.login-page) .db-section-head .db-section-toggle:hover,
html.dark body:not(.login-page) .db-section-head .db-section-toggle:focus-visible,
html.dark body:not(.login-page) .db-section-mon[data-collapsed="true"] .db-section-toggle:hover,
html.dark body:not(.login-page) .db-section-mon[data-collapsed="true"] .db-section-toggle:focus-visible {
background: rgba(91, 55, 219, 0.16) !important;
border-color: rgba(91, 55, 219, 0.40) !important;
color: #a78bfa !important;
}

/* ============================================
   NODEHUB V6 OPERATIONAL DESIGN SYSTEM
   ============================================ */
body:not(.login-page) .nh-page {
width: min(calc(100% - 32px), 1240px);
max-width: 1240px;
margin-inline: auto;
}

body:not(.login-page) .nh-page-wide {
width: min(calc(100% - 32px), 1440px);
max-width: 1440px;
}

body:not(.login-page) .container.nh-page {
padding-inline: 0;
}

body:not(.login-page) .nh-hero {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 20px;
padding: 18px;
border: 1px solid #c4d7f2;
border-radius: 14px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(237, 245, 255, 0.93));
box-shadow: 0 16px 34px rgba(20, 56, 105, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.80);
overflow: hidden;
}

body:not(.login-page) .nh-hero::before {
content: '';
position: absolute;
inset: 0 0 auto;
height: 3px;
background: linear-gradient(90deg, #5b37db, #38bdf8, #22c55e);
}

body:not(.login-page) .nh-hero-main {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}

body:not(.login-page) .nh-hero .page-header-main,
body:not(.login-page) .nh-hero .dash-hero-text {
display: grid;
gap: 4px;
min-width: 0;
}

body:not(.login-page) .nh-hero-icon {
width: 42px;
height: 42px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(91, 55, 219, 0.12);
color: var(--primary);
box-shadow: inset 0 0 0 1px rgba(91, 55, 219, 0.18);
flex: 0 0 42px;
}

body:not(.login-page) .nh-hero-icon svg {
width: 23px;
height: 23px;
stroke: currentColor !important;
}

body:not(.login-page) .nh-hero h1,
body:not(.login-page) .nh-hero h2 {
margin: 0;
font-size: 30px;
line-height: 1.05;
letter-spacing: 0;
color: #10213a;
}

body:not(.login-page) .nh-hero .page-subtitle,
body:not(.login-page) .nh-hero .dash-subtitle,
body:not(.login-page) .nh-hero-copy p {
margin: 4px 0 0;
max-width: 720px;
font-size: 13px;
font-weight: 650;
line-height: 1.45;
color: #405a7d;
}

body:not(.login-page) .nh-hero-actions,
body:not(.login-page) .nh-hero .page-header-actions,
body:not(.login-page) .nh-hero .dashboard-actions,
body:not(.login-page) .nh-hero .actions,
body:not(.login-page) .nh-hero .dash-hero-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
margin-left: auto;
}

body:not(.login-page) .nh-context-chips {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}

body:not(.login-page) .nh-chip,
body:not(.login-page) .nh-status-pill,
body:not(.login-page) .nh-context-chips > span,
body:not(.login-page) .nh-context-chips > a {
min-height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid #bfd2ee;
background: #edf5ff;
color: #24466f;
font-size: 11px;
font-weight: 850;
line-height: 1;
white-space: nowrap;
text-decoration: none;
}

body:not(.login-page) .nh-status-ok,
body:not(.login-page) .nh-status-pill.status-ok,
body:not(.login-page) .nh-chip.is-ok {
border-color: rgba(34, 197, 94, 0.42);
background: rgba(34, 197, 94, 0.12);
color: #15803d;
}

body:not(.login-page) .nh-status-nok,
body:not(.login-page) .nh-status-pill.status-nok,
body:not(.login-page) .nh-chip.is-danger {
border-color: rgba(239, 68, 68, 0.42);
background: rgba(239, 68, 68, 0.11);
color: #b91c1c;
}

body:not(.login-page) .nh-status-warning,
body:not(.login-page) .nh-status-manutencao,
body:not(.login-page) .nh-status-pill.status-manutencao,
body:not(.login-page) .nh-chip.is-warning {
border-color: rgba(245, 158, 11, 0.42);
background: rgba(245, 158, 11, 0.13);
color: #b45309;
}

body:not(.login-page) .nh-status-info,
body:not(.login-page) .nh-chip.is-info {
border-color: rgba(14, 165, 233, 0.38);
background: rgba(14, 165, 233, 0.12);
color: #0369a1;
}

body:not(.login-page) .nh-panel,
body:not(.login-page) .nh-page .info-section,
body:not(.login-page) .nh-page .filters-bar,
body:not(.login-page) .nh-page .backup-panel,
body:not(.login-page) .nh-page .rel-cards-section,
body:not(.login-page) .nh-page .rel-info-section,
body:not(.login-page) .nh-page .tech-section,
body:not(.login-page) .nh-page .review-site-section {
position: relative;
border: 1px solid #c6d8f1;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 250, 255, 0.94));
box-shadow: 0 16px 34px rgba(20, 56, 105, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72);
overflow: hidden;
}

body:not(.login-page) .nh-panel {
display: grid;
gap: 16px;
padding: 18px;
}

body:not(.login-page) .nh-panel::before,
body:not(.login-page) .nh-page .info-section::before,
body:not(.login-page) .nh-page .filters-bar::before,
body:not(.login-page) .nh-page .backup-panel::before,
body:not(.login-page) .nh-page .rel-cards-section::before,
body:not(.login-page) .nh-page .rel-info-section::before,
body:not(.login-page) .nh-page .tech-section::before,
body:not(.login-page) .nh-page .review-site-section::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--nh-panel-accent, #60a5fa);
}

body:not(.login-page) .nh-panel--identity { --nh-panel-accent: #5b37db; }
body:not(.login-page) .nh-panel--topology { --nh-panel-accent: #38bdf8; }
body:not(.login-page) .nh-panel--operation { --nh-panel-accent: #22c55e; }
body:not(.login-page) .nh-panel--media { --nh-panel-accent: #f59e0b; }
body:not(.login-page) .nh-panel--history { --nh-panel-accent: #8b5cf6; }
body:not(.login-page) .nh-panel--danger { --nh-panel-accent: #ef4444; }

body:not(.login-page) .nh-panel-head,
body:not(.login-page) .nh-page .info-section__header,
body:not(.login-page) .nh-page .backup-panel-header,
body:not(.login-page) .nh-page .rel-section-head,
body:not(.login-page) .nh-page .spare-form-section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #d8e5f6;
}

body:not(.login-page) .nh-panel-head span,
body:not(.login-page) .nh-page .info-section__header span,
body:not(.login-page) .nh-page .backup-panel-header span,
body:not(.login-page) .nh-page .rel-section-head span,
body:not(.login-page) .nh-page .spare-form-section-head span {
font-size: 11px;
font-weight: 850;
line-height: 1;
letter-spacing: 0;
color: #45658d;
}

body:not(.login-page) .nh-panel-head strong,
body:not(.login-page) .nh-panel-head h3,
body:not(.login-page) .nh-page .info-section__header h3,
body:not(.login-page) .nh-page .backup-panel-header h3,
body:not(.login-page) .nh-page .rel-section-head h3,
body:not(.login-page) .nh-page .spare-form-section-head h3 {
margin: 0;
font-size: 16px;
font-weight: 850;
line-height: 1.15;
letter-spacing: 0;
color: #10213a;
}

body:not(.login-page) .nh-panel-head p,
body:not(.login-page) .nh-page .backup-panel-header p,
body:not(.login-page) .nh-page .rel-section-head p,
body:not(.login-page) .nh-page .spare-form-section-head p {
margin: 0;
max-width: 560px;
font-size: 12px;
font-weight: 650;
line-height: 1.4;
color: #536b8d;
}

body:not(.login-page) .nh-panel-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 16px;
}

body:not(.login-page) .nh-kpi-strip,
body:not(.login-page) .nh-page > .stats-grid {
gap: 14px;
margin-bottom: 18px;
}

body:not(.login-page) .nh-kpi-strip .stat-card,
body:not(.login-page) .nh-page > .stats-grid .stat-card {
border-radius: 14px;
padding: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 250, 255, 0.93));
box-shadow: 0 12px 26px rgba(20, 56, 105, 0.08);
}

body:not(.login-page) .nh-filter-panel,
body:not(.login-page) .nh-page .filters-bar {
padding: 18px;
}

body:not(.login-page) .nh-action-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px;
border: 1px solid #c6d8f1;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 250, 255, 0.94));
box-shadow: 0 12px 26px rgba(20, 56, 105, 0.08);
}

body:not(.login-page) .nh-empty-state,
body:not(.login-page) .nh-page .tool-empty-state {
border-color: rgba(99, 119, 199, 0.25);
background:
radial-gradient(circle at 50% 0%, rgba(73, 99, 215, 0.09) 0%, rgba(73, 99, 215, 0) 42%),
linear-gradient(180deg, #fbfdff 0%, #f3f7ff 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

body:not(.login-page) .nh-table-card,
body:not(.login-page) .nh-page .table-responsive {
border: 1px solid #c6d8f1;
border-radius: 14px;
background: rgba(255, 255, 255, 0.84);
box-shadow: 0 12px 26px rgba(20, 56, 105, 0.06);
overflow: auto;
}

body:not(.login-page) .nh-workflow-note {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 10px;
align-items: center;
margin-bottom: 16px;
padding: 11px 14px;
border: 1px solid #bed2ef;
border-radius: 12px;
background: linear-gradient(135deg, #f8fbff, #edf5ff);
box-shadow: 0 10px 22px rgba(20, 56, 105, 0.08);
color: #25364d;
}

body:not(.login-page) .nh-workflow-note > strong {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 0 10px;
border-radius: 999px;
background: #dbeaff;
color: #143d6f;
font-size: 12px;
font-weight: 850;
white-space: nowrap;
}

body:not(.login-page) .nh-workflow-note span {
font-size: 13px;
font-weight: 650;
line-height: 1.42;
color: #405a7d;
}

body:not(.login-page) .nh-page .btn,
body:not(.login-page) .nh-hero .btn {
border-radius: 10px;
font-weight: 800;
}

body:not(.login-page) .nh-back-btn,
body:not(.login-page) .nh-mobile-header-back {
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 16px;
border-radius: 12px;
border: 1px solid #bed2ef;
background: rgba(239, 246, 255, 0.94);
color: #24466f;
font-size: 12px;
font-weight: 850;
line-height: 1;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

body:not(.login-page) .nh-back-btn svg,
body:not(.login-page) .nh-mobile-header-back svg {
width: 15px;
height: 15px;
flex: 0 0 15px;
}

body:not(.login-page) .nh-back-btn:hover,
body:not(.login-page) .nh-back-btn:focus-visible,
body:not(.login-page) .nh-mobile-header-back:hover,
body:not(.login-page) .nh-mobile-header-back:focus-visible {
border-color: #8fb4ee;
background: #e7f0ff;
color: #153966;
box-shadow: 0 10px 22px rgba(15, 54, 109, 0.12);
}

html.dark body:not(.login-page) .nh-hero,
html.dark body:not(.login-page) .nh-panel,
html.dark body:not(.login-page) .nh-page .info-section,
html.dark body:not(.login-page) .nh-page .filters-bar,
html.dark body:not(.login-page) .nh-page .backup-panel,
html.dark body:not(.login-page) .nh-page .rel-cards-section,
html.dark body:not(.login-page) .nh-page .rel-info-section,
html.dark body:not(.login-page) .nh-page .tech-section,
html.dark body:not(.login-page) .nh-page .review-site-section {
border-color: rgba(105, 138, 188, 0.42);
background: linear-gradient(180deg, rgba(22, 35, 58, 0.96), rgba(13, 24, 43, 0.96));
box-shadow: 0 18px 42px rgba(2, 6, 23, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.dark body:not(.login-page) .nh-hero h1,
html.dark body:not(.login-page) .nh-hero h2,
html.dark body:not(.login-page) .nh-panel-head strong,
html.dark body:not(.login-page) .nh-panel-head h3,
html.dark body:not(.login-page) .nh-page .info-section__header h3,
html.dark body:not(.login-page) .nh-page .backup-panel-header h3,
html.dark body:not(.login-page) .nh-page .rel-section-head h3,
html.dark body:not(.login-page) .nh-page .spare-form-section-head h3 {
color: #f8fbff;
}

html.dark body:not(.login-page) .nh-hero .page-subtitle,
html.dark body:not(.login-page) .nh-hero .dash-subtitle,
html.dark body:not(.login-page) .nh-hero-copy p,
html.dark body:not(.login-page) .nh-panel-head p,
html.dark body:not(.login-page) .nh-page .backup-panel-header p,
html.dark body:not(.login-page) .nh-page .rel-section-head p,
html.dark body:not(.login-page) .nh-page .spare-form-section-head p {
color: #c4d4eb;
}

html.dark body:not(.login-page) .nh-hero-icon {
background: rgba(139, 92, 246, 0.20);
color: #a78bfa;
box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.22);
}

html.dark body:not(.login-page) .nh-chip,
html.dark body:not(.login-page) .nh-status-pill,
html.dark body:not(.login-page) .nh-context-chips > span,
html.dark body:not(.login-page) .nh-context-chips > a {
border-color: rgba(130, 160, 210, 0.38);
background: rgba(255, 255, 255, 0.05);
color: #dbeafe;
}

html.dark body:not(.login-page) .nh-back-btn,
html.dark body:not(.login-page) .nh-mobile-header-back {
border-color: rgba(125, 159, 210, 0.46);
background: rgba(20, 38, 68, 0.76);
color: #dce8fb;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html.dark body:not(.login-page) .nh-back-btn:hover,
html.dark body:not(.login-page) .nh-back-btn:focus-visible,
html.dark body:not(.login-page) .nh-mobile-header-back:hover,
html.dark body:not(.login-page) .nh-mobile-header-back:focus-visible {
border-color: rgba(147, 197, 253, 0.68);
background: rgba(28, 56, 98, 0.92);
color: #ffffff;
box-shadow: 0 10px 22px rgba(2, 6, 23, 0.24);
}

html.dark body:not(.login-page) .nh-kpi-strip .stat-card,
html.dark body:not(.login-page) .nh-page > .stats-grid .stat-card,
html.dark body:not(.login-page) .nh-action-bar,
html.dark body:not(.login-page) .nh-table-card,
html.dark body:not(.login-page) .nh-page .table-responsive {
border-color: rgba(105, 138, 188, 0.34);
background: linear-gradient(180deg, rgba(22, 35, 58, 0.92), rgba(13, 24, 43, 0.92));
box-shadow: 0 14px 34px rgba(2, 6, 23, 0.26);
}

html.dark body:not(.login-page) .nh-empty-state,
html.dark body:not(.login-page) .nh-page .tool-empty-state {
border-color: rgba(105, 138, 188, 0.34);
background:
radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.12) 0%, rgba(96, 165, 250, 0) 44%),
linear-gradient(180deg, rgba(22, 35, 58, 0.92), rgba(13, 24, 43, 0.92));
}

html.dark body:not(.login-page) .nh-workflow-note {
border-color: rgba(105, 138, 188, 0.42);
background: linear-gradient(135deg, rgba(22, 35, 58, 0.96), rgba(13, 24, 43, 0.96));
color: #dbeafe;
}

html.dark body:not(.login-page) .nh-workflow-note > strong {
background: rgba(96, 165, 250, 0.16);
color: #dbeafe;
}

html.dark body:not(.login-page) .nh-workflow-note span {
color: #c4d4eb;
}

/* V6 alignment pass: icon + copy headers stay left-aligned. */
body:not(.login-page) .nh-page .backup-panel-header,
body:not(.login-page) .nh-page .backup-reports-header,
body:not(.login-page) .nh-page .rel-section-head,
body:not(.login-page) .nh-page .info-section__header,
body:not(.login-page) .nh-page .spare-form-section-head,
body:not(.login-page) .nh-page .tech-section-head,
body:not(.login-page) .nh-page .filters-section-head {
justify-content: flex-start;
text-align: left;
}

body:not(.login-page) .nh-page .backup-panel-header > :last-child,
body:not(.login-page) .nh-page .backup-reports-header > :last-child,
body:not(.login-page) .nh-page .rel-section-head > :last-child,
body:not(.login-page) .nh-page .info-section__header > :last-child,
body:not(.login-page) .nh-page .spare-form-section-head > :last-child,
body:not(.login-page) .nh-page .tech-section-head > :first-child,
body:not(.login-page) .nh-page .filters-section-head > :first-child {
min-width: 0;
margin-right: auto;
text-align: left;
}

body:not(.login-page) .nh-page .backup-panel-header :is(h2, h3, h4, p, span, small, strong),
body:not(.login-page) .nh-page .backup-reports-header :is(h2, h3, h4, p, span, small, strong),
body:not(.login-page) .nh-page .rel-section-head :is(h2, h3, h4, p, span, small, strong),
body:not(.login-page) .nh-page .info-section__header :is(h2, h3, h4, p, span, small, strong),
body:not(.login-page) .nh-page .spare-form-section-head :is(h2, h3, h4, p, span, small, strong),
body:not(.login-page) .nh-page .tech-section-head :is(h2, h3, h4, p, span, small, strong),
body:not(.login-page) .nh-page .filters-section-head :is(h2, h3, h4, p, span, small, strong) {
text-align: left;
}

/* Cadastro uses one neutral accent on every section side rail. */
body:not(.login-page) .cadastro-container .cadastro-panel {
--nh-panel-accent: #3b82f6 !important;
--cadastro-panel-accent: #3b82f6 !important;
}

body:not(.login-page) .cadastro-container .cadastro-panel::before {
background: #3b82f6 !important;
}

/* Info Site v6: evita painéis pretos herdados do dark mode legado. */
body:not(.login-page) .info-site-page .info-section {
border-color: #bfd5f2 !important;
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,251,255,0.95)) !important;
box-shadow: 0 16px 34px rgba(20, 56, 105, 0.08), inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

body:not(.login-page) .info-site-page .info-section::before {
background: #3b82f6 !important;
}

body:not(.login-page) .info-site-page .info-section__header {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 16px 20px !important;
border-bottom-color: #d8e5f6 !important;
background: linear-gradient(180deg, rgba(248,251,255,0.98), rgba(239,246,255,0.92)) !important;
}

body:not(.login-page) .info-site-page .info-section__header svg {
width: 20px !important;
height: 20px !important;
color: #5b37db !important;
}

body:not(.login-page) .info-site-page .info-section__header h3 {
font-size: 16px !important;
font-weight: 850 !important;
line-height: 1.15 !important;
color: #10213a !important;
}

body:not(.login-page) .info-site-page .info-section__body {
background: transparent !important;
}

html.dark body:not(.login-page) .info-site-page .info-section {
border-color: rgba(105, 138, 188, 0.48) !important;
background: linear-gradient(180deg, rgba(22, 43, 76, 0.96), rgba(16, 34, 63, 0.95)) !important;
box-shadow: 0 18px 42px rgba(2, 6, 23, 0.30), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

html.dark body:not(.login-page) .info-site-page .info-section__header {
border-bottom-color: rgba(126, 167, 227, 0.28) !important;
background: linear-gradient(180deg, rgba(27, 52, 88, 0.96), rgba(20, 42, 76, 0.92)) !important;
}

html.dark body:not(.login-page) .info-site-page .info-section__header svg {
color: #93c5fd !important;
}

html.dark body:not(.login-page) .info-site-page .info-section__header h3 {
color: #f8fbff !important;
}

html.dark body:not(.login-page) .info-site-page .info-hint {
color: #c4d4eb !important;
}

/* Dashboard: padroniza os modulos do inicio e evita encavalamento dos resumos. */
.db-section-summary .db-sum-kv.db-sum-alarm,
.db-section-summary .db-sum-kv.db-sum-alarm-critica,
.db-section-summary .db-sum-kv.db-sum-alarm-ok {
width: 72px !important;
min-width: 72px !important;
}

@media (min-width: 1024px) {
body:not(.login-page) .db-section-mon .stats-grid-mon {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
gap: 10px !important;
padding: 10px 14px 14px !important;
}

body:not(.login-page) .db-section-mon .stat-card {
min-height: 94px !important;
padding: 10px 12px !important;
gap: 10px !important;
}
}

@media (min-width: 769px) {
body:not(.login-page) .db-twin-row .db-section[data-collapsed="true"] .db-section-head,
body:not(.login-page) .db-section-ultimas[data-collapsed="true"] .db-section-head {
display: grid !important;
grid-template-columns: minmax(180px, 1fr) auto !important;
align-items: center !important;
column-gap: 12px !important;
row-gap: 10px !important;
min-height: 78px !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}

body:not(.login-page) .db-twin-row .db-section[data-collapsed="true"] .db-section-title,
body:not(.login-page) .db-section-ultimas[data-collapsed="true"] .db-section-title {
grid-column: 1 !important;
grid-row: 1 !important;
flex: initial !important;
max-width: 100% !important;
min-width: 0 !important;
}

body:not(.login-page) .db-twin-row .db-section[data-collapsed="true"] .db-section-title strong,
body:not(.login-page) .db-section-ultimas[data-collapsed="true"] .db-section-title strong {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}

body:not(.login-page) .db-twin-row .db-section[data-collapsed="true"] .db-section-summary,
body:not(.login-page) .db-section-ultimas[data-collapsed="true"] .db-section-summary {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
justify-content: flex-start !important;
align-items: center !important;
align-content: center !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding-bottom: 2px !important;
scrollbar-gutter: auto !important;
scrollbar-width: none;
flex-wrap: nowrap !important;
white-space: nowrap !important;
}

body:not(.login-page) .db-twin-row .db-section[data-collapsed="true"] .db-section-summary::-webkit-scrollbar,
body:not(.login-page) .db-section-ultimas[data-collapsed="true"] .db-section-summary::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}

body:not(.login-page) .db-twin-row .db-section[data-collapsed="true"] .db-section-toggle,
body:not(.login-page) .db-section-ultimas[data-collapsed="true"] .db-section-toggle {
grid-column: 2 !important;
grid-row: 1 !important;
margin-left: 0 !important;
justify-self: end !important;
}
}

@media (min-width: 769px) and (max-width: 1180px) {
body:not(.login-page) .db-twin-row {
--db-twin-col-width: 100%;
}
}

/* Dashboard do site: inventario aberto mais denso */
body:not(.login-page) #db-sec-inv .db-section-body .stats-grid {
grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
gap: 10px;
padding: 10px 14px 14px;
margin-bottom: 0;
}

body:not(.login-page) #db-sec-inv .stat-card {
min-height: 94px;
padding: 10px 11px;
gap: 9px;
align-items: center;
border-radius: 10px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 18px rgba(15, 35, 68, 0.08);
}

body:not(.login-page) #db-sec-inv .stat-card::before {
height: 2px;
}

body:not(.login-page) #db-sec-inv .stat-card:hover,
body:not(.login-page) #db-sec-inv .stat-card.stat-active {
transform: translateY(-1px);
}

body:not(.login-page) #db-sec-inv .stat-icon {
width: 36px;
height: 36px;
border-radius: 9px;
font-size: 18px;
}

body:not(.login-page) #db-sec-inv .stat-icon svg {
width: 19px;
height: 19px;
}

body:not(.login-page) #db-sec-inv .stat-info {
display: grid;
gap: 3px;
min-width: 0;
}

body:not(.login-page) #db-sec-inv .stat-info h3 {
font-size: 22px;
line-height: 0.95;
letter-spacing: 0;
margin: 0;
}

body:not(.login-page) #db-sec-inv .stat-info p {
font-size: 11px;
font-weight: 750;
line-height: 1.15;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

body:not(.login-page) #db-sec-inv .stat-info small {
display: flex;
gap: 4px;
margin-top: 0;
line-height: 1;
}

body:not(.login-page) #db-sec-inv .stat-pill {
padding: 2px 6px;
font-size: 10px;
font-weight: 800;
line-height: 1;
min-height: 18px;
display: inline-flex;
align-items: center;
}

body:not(.login-page) #db-sec-inv .stat-progress {
height: 5px;
margin-top: 2px;
}

@media (min-width: 1181px) {
body:not(.login-page) #db-sec-inv .db-section-body .stats-grid {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
}

@media (max-width: 768px) {
body:not(.login-page) #db-sec-inv .db-section-body .stats-grid {
grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
padding: 10px 12px 12px;
}
}

/* Dashboard do site: primeiro card do monitoramento com contraste melhor */
body:not(.login-page) .db-section-mon .stat-card.mon-pct {
background:
linear-gradient(135deg, rgba(12, 34, 55, 0.98), rgba(18, 31, 53, 0.98));
border-color: rgba(45, 212, 191, 0.46);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 30px rgba(2, 8, 23, 0.18);
}

body:not(.login-page) .db-section-mon .stat-card.mon-pct .stat-icon {
background: rgba(15, 23, 42, 0.34);
border: 1px solid rgba(45, 212, 191, 0.24);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 0 4px rgba(45, 212, 191, 0.06);
color: #e6fffb;
}

body:not(.login-page) .db-section-mon .stat-card.mon-pct .stat-pct-ring {
width: 48px;
height: 48px;
background:
radial-gradient(circle, rgba(10, 23, 40, 0.98) 0 49%, transparent 50%),
conic-gradient(var(--pct-color, #22c55e) var(--pct-deg, 0deg), rgba(148, 163, 184, 0.34) 0deg);
box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.13), 0 8px 16px rgba(2, 8, 23, 0.18);
color: #f8fbff;
font-size: 10px;
font-weight: 900;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
}

body:not(.login-page) .db-section-mon .stat-card.mon-pct .stat-info h3 {
color: #f8fbff;
text-shadow: none;
}

body:not(.login-page) .db-section-mon .stat-card.mon-pct .stat-info p {
color: #e5f2ff;
}

body:not(.login-page) .db-section-mon .stat-card.mon-pct .db-inv-note {
background: rgba(45, 212, 191, 0.1);
border: 1px solid rgba(45, 212, 191, 0.2);
color: #b8f4ea;
}

html:not(.dark) body:not(.login-page) .db-section-mon .stat-card.mon-pct {
background: linear-gradient(135deg, #f8fbff 0%, #edf7ff 100%) !important;
border-color: rgba(37, 99, 235, 0.48) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 22px rgba(37, 99, 235, 0.12) !important;
}

html:not(.dark) body:not(.login-page) .db-section-mon .stat-card.mon-pct .stat-icon {
background: #dff7f1 !important;
border-color: rgba(13, 148, 136, 0.32) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 0 0 4px rgba(13, 148, 136, 0.08) !important;
color: #0f766e !important;
}

html:not(.dark) body:not(.login-page) .db-section-mon .stat-card.mon-pct .stat-pct-ring {
background:
radial-gradient(circle, #ffffff 0 48%, transparent 49%),
conic-gradient(var(--pct-color, #16a34a) var(--pct-deg, 0deg), #91a4b7 0deg) !important;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.22), 0 8px 16px rgba(15, 23, 42, 0.12) !important;
color: var(--pct-color, #0f766e) !important;
text-shadow: none !important;
}

html:not(.dark) body:not(.login-page) .db-section-mon .stat-card.mon-pct .stat-info h3 {
color: #0f172a !important;
}

html:not(.dark) body:not(.login-page) .db-section-mon .stat-card.mon-pct .stat-info p {
color: #1e3a5f !important;
}

html:not(.dark) body:not(.login-page) .db-section-mon .stat-card.mon-pct .db-inv-note {
background: #dff7f1 !important;
border-color: rgba(13, 148, 136, 0.3) !important;
color: #0f766e !important;
}

/* Dashboard do site: monitoramento aberto redistribuido */
body:not(.login-page) .db-section-mon .mon-status-stack {
display: grid;
gap: 6px;
min-width: 0;
}

body:not(.login-page) .db-section-mon .stat-card.mon-online {
border-color: rgba(34, 197, 94, 0.48);
}

body:not(.login-page) .db-section-mon .stat-card.mon-online .stat-icon {
background: rgba(20, 83, 45, 0.34);
color: #4ade80;
}

body:not(.login-page) .db-section-mon .stat-card.mon-mini {
min-width: 0;
}

body:not(.login-page) .db-section-mon .stat-card.mon-alarm-wide {
min-width: 0;
}

body:not(.login-page) .db-section-mon .mon-alarm-hero {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}

body:not(.login-page) .db-section-mon .mon-alarm-breakdown {
display: grid;
gap: 8px;
min-width: 0;
}

body:not(.login-page) .db-section-mon .mon-alarm-state {
display: inline-flex;
align-items: center;
width: max-content;
max-width: 100%;
font-size: 10px;
font-weight: 850;
line-height: 1;
text-transform: uppercase;
color: #dbeafe;
}

body:not(.login-page) .db-section-mon .mon-alarm-side {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
min-width: 0;
overflow: hidden;
}

body:not(.login-page) .db-section-mon .mon-alarm-meta {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 800;
line-height: 1;
color: #b8c8df;
white-space: nowrap;
}

body:not(.login-page) .db-section-mon .mon-alarm-meta strong {
font-size: 13px;
line-height: 1;
color: #f8fbff;
}

body:not(.login-page) .db-section-mon .mon-alarm-action {
display: grid;
gap: 2px;
min-width: 132px;
max-width: 100%;
box-sizing: border-box;
padding: 7px 10px;
border-radius: 8px;
background: rgba(49, 46, 129, 0.24);
border: 1px solid rgba(165, 180, 252, 0.24);
color: #eef2ff;
text-decoration: none;
line-height: 1.1;
}

body:not(.login-page) .db-section-mon .mon-alarm-action span {
font-size: 11px;
font-weight: 900;
color: #f8fbff;
}

body:not(.login-page) .db-section-mon .mon-alarm-action strong {
font-size: 11px;
font-weight: 800;
color: #dbe8fb;
}

body:not(.login-page) .db-section-mon .mon-alarm-action small {
font-size: 9px;
font-style: italic;
font-weight: 700;
color: #b8c8df;
}

body:not(.login-page) .db-section-mon .mon-alarm-action:hover,
body:not(.login-page) .db-section-mon .mon-alarm-action:focus-visible {
background: rgba(79, 70, 229, 0.32);
border-color: rgba(199, 210, 254, 0.5);
outline: none;
}

@media (min-width: 1024px) {
body:not(.login-page) .db-section-mon .stats-grid-mon {
grid-template-columns: minmax(172px, 0.95fr) minmax(150px, 0.72fr) minmax(420px, 4.33fr) !important;
align-items: stretch;
gap: 10px !important;
}

body:not(.login-page) .db-section-mon .stat-card {
min-height: 118px !important;
}

body:not(.login-page) .db-section-mon .stat-card.mon-pct-feature {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 7px !important;
padding: 10px 12px !important;
}

body:not(.login-page) .db-section-mon .stat-card.mon-pct-feature .stat-icon {
width: 66px;
height: 66px;
flex: 0 0 66px;
border-radius: 18px;
}

body:not(.login-page) .db-section-mon .stat-card.mon-pct-feature .stat-pct-ring {
width: 58px;
height: 58px;
font-size: 12px;
}

body:not(.login-page) .db-section-mon .stat-card.mon-pct-feature .stat-info {
align-items: center;
gap: 2px;
}

body:not(.login-page) .db-section-mon .stat-card.mon-pct-feature .stat-info h3 {
font-size: 22px;
line-height: 1;
}

body:not(.login-page) .db-section-mon .stat-card.mon-pct-feature .stat-info p {
font-size: 12px;
line-height: 1.1;
}

body:not(.login-page) .db-section-mon .mon-status-stack {
grid-template-rows: repeat(3, minmax(0, 1fr));
align-self: stretch;
}

body:not(.login-page) .db-section-mon .mon-status-stack .stat-card {
min-height: 0 !important;
height: 100%;
padding: 6px 9px !important;
gap: 8px !important;
align-items: center;
border-radius: 9px;
}

body:not(.login-page) .db-section-mon .mon-status-stack .stat-icon {
width: 28px;
height: 28px;
border-radius: 8px;
font-size: 15px;
}

body:not(.login-page) .db-section-mon .mon-status-stack .stat-icon svg {
width: 17px;
height: 17px;
}

body:not(.login-page) .db-section-mon .mon-status-stack .stat-info h3 {
font-size: 18px;
line-height: 1;
}

body:not(.login-page) .db-section-mon .mon-status-stack .stat-info p {
font-size: 10px;
line-height: 1.05;
}

body:not(.login-page) .db-section-mon .stat-card.mon-alarm-wide {
display: grid;
grid-template-columns: minmax(150px, 0.78fr) minmax(260px, 1.75fr) minmax(190px, 0.95fr);
align-items: center;
column-gap: 14px !important;
padding: 12px 14px !important;
}

body:not(.login-page) .db-section-mon .mon-alarm-wide .stat-icon {
width: 52px;
height: 52px;
border-radius: 14px;
}

body:not(.login-page) .db-section-mon .mon-alarm-headline h3 {
font-size: 34px !important;
line-height: 0.95;
}

body:not(.login-page) .db-section-mon .mon-alarm-headline p {
font-size: 13px !important;
line-height: 1.05;
}

body:not(.login-page) .db-section-mon .mon-alarm-wide .mon-alarm-pills {
display: flex;
align-items: center;
gap: 5px;
margin-top: 0;
}

body:not(.login-page) .db-section-mon .mon-alarm-wide .mon-sev-chip {
font-size: 9px;
padding: 2px 7px;
}
}

@media (min-width: 769px) and (max-width: 1023px) {
body:not(.login-page) .db-section-mon .stats-grid-mon {
grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) !important;
gap: 10px !important;
}

body:not(.login-page) .db-section-mon .mon-status-stack {
grid-template-rows: repeat(3, minmax(42px, 1fr));
}

body:not(.login-page) .db-section-mon .mon-status-stack .stat-card {
min-height: 42px !important;
padding: 7px 10px !important;
}

body:not(.login-page) .db-section-mon .stat-card.mon-alarm-wide {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(150px, auto) minmax(220px, 1fr) minmax(0, 1fr);
align-items: center;
gap: 12px !important;
}

body:not(.login-page) .db-section-mon .stat-card.mon-alarm-wide .mon-alarm-side {
grid-column: 1 / -1;
display: flex;
justify-content: flex-start;
}
}

@media (max-width: 768px) {
body:not(.login-page) .db-section-mon .stats-grid-mon {
grid-template-columns: 1fr !important;
}

body:not(.login-page) .db-section-mon .stat-card.mon-pct-feature {
align-items: center;
text-align: left;
}

body:not(.login-page) .db-section-mon .mon-status-stack {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}

body:not(.login-page) .db-section-mon .mon-status-stack .stat-card {
min-height: 66px !important;
padding: 8px !important;
gap: 6px !important;
flex-direction: column;
align-items: flex-start;
}

body:not(.login-page) .db-section-mon .mon-status-stack .stat-icon {
width: 30px;
height: 30px;
border-radius: 8px;
font-size: 15px;
}

body:not(.login-page) .db-section-mon .mon-status-stack .stat-icon svg {
width: 17px;
height: 17px;
}

body:not(.login-page) .db-section-mon .mon-status-stack .stat-info h3 {
font-size: 18px;
}

body:not(.login-page) .db-section-mon .mon-status-stack .stat-info p {
font-size: 10px;
line-height: 1.05;
}

body:not(.login-page) .db-section-mon .stat-card.mon-alarm-wide {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px !important;
}

body:not(.login-page) .db-section-mon .mon-alarm-side {
justify-content: flex-start;
flex-wrap: wrap;
}
}

@media (max-width: 430px) {
body:not(.login-page) .db-section-mon .mon-status-stack {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}

body:not(.login-page) .db-section-mon .mon-status-stack .stat-card {
min-height: 48px !important;
padding: 7px 6px !important;
flex-direction: row;
align-items: center;
gap: 5px !important;
border-radius: 9px;
}

body:not(.login-page) .db-section-mon .mon-status-stack .stat-icon {
width: 26px;
height: 26px;
border-radius: 8px;
font-size: 13px;
}

body:not(.login-page) .db-section-mon .mon-status-stack .stat-icon svg {
width: 15px;
height: 15px;
}

body:not(.login-page) .db-section-mon .mon-status-stack .stat-info {
min-width: 0;
}

body:not(.login-page) .db-section-mon .mon-status-stack .stat-info h3 {
font-size: 16px;
letter-spacing: 0;
}

body:not(.login-page) .db-section-mon .mon-status-stack .stat-info p {
font-size: 9px;
line-height: 1;
overflow-wrap: anywhere;
}
}

html:not(.dark) body:not(.login-page) .db-section-mon .stat-card.mon-online {
border-color: rgba(34, 197, 94, 0.34) !important;
}

html:not(.dark) body:not(.login-page) .db-section-mon .stat-card.mon-online .stat-icon {
background: rgba(34, 197, 94, 0.10) !important;
color: #16a34a !important;
}

html:not(.dark) body:not(.login-page) .db-section-mon .mon-alarm-state {
color: #516987 !important;
}

html:not(.dark) body:not(.login-page) .db-section-mon .mon-alarm-meta,
html:not(.dark) body:not(.login-page) .db-section-mon .mon-alarm-meta strong {
color: #536985 !important;
}

html:not(.dark) body:not(.login-page) .db-section-mon .mon-alarm-action {
background: rgba(99, 102, 241, 0.08) !important;
border-color: rgba(99, 102, 241, 0.2) !important;
color: #1e2d4a !important;
}

html:not(.dark) body:not(.login-page) .db-section-mon .mon-alarm-action span,
html:not(.dark) body:not(.login-page) .db-section-mon .mon-alarm-action strong,
html:not(.dark) body:not(.login-page) .db-section-mon .mon-alarm-action small {
color: #334155 !important;
}

/* Dashboard do site: refinamento do monitoramento expandido. */
body:not(.login-page) .db-section-mon [hidden],
body:not(.login-page) .db-section-mon .mon-sev-chip[hidden],
body:not(.login-page) .db-section-mon .mon-alarm-meta[hidden] {
display: none !important;
}

body:not(.login-page) .db-section-mon .stat-card.mon-alarm-wide {
overflow: hidden;
}

body:not(.login-page) .db-section-mon .mon-alarm-wide .mon-alarm-pills {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
margin: 0;
}

body:not(.login-page) .db-section-mon .mon-alarm-wide .mon-sev-chip {
min-height: 24px;
padding: 4px 9px;
font-size: 10px;
font-weight: 850;
letter-spacing: 0;
}

body:not(.login-page) .db-section-mon .mon-alarm-wide .mon-sev-chip.sev-ok {
min-width: 134px;
justify-content: center;
}

body:not(.login-page) .db-section-mon .mon-alarm-state {
width: auto;
padding: 0;
font-size: 11px;
letter-spacing: 0;
}

body:not(.login-page) .db-section-mon .mon-alarm-action {
min-width: 0;
width: fit-content;
max-width: 178px;
padding: 7px 10px;
border-radius: 8px;
}

body:not(.login-page) .db-section-mon .mon-alarm-action span {
font-size: 12px;
line-height: 1.05;
}

body:not(.login-page) .db-section-mon .mon-alarm-action strong {
font-size: 11px;
line-height: 1.15;
}

@media (min-width: 1024px) {
body:not(.login-page) .db-section-mon .stats-grid-mon {
grid-template-columns: minmax(174px, .82fr) minmax(152px, .64fr) minmax(560px, 4.9fr) !important;
padding: 10px 18px 18px !important;
gap: 12px !important;
}

body:not(.login-page) .db-section-mon .stat-card.mon-alarm-wide {
grid-template-columns: minmax(180px, .72fr) minmax(320px, 1.65fr) minmax(170px, .62fr) !important;
column-gap: 18px !important;
padding: 14px 16px !important;
min-height: 118px !important;
}

body:not(.login-page) .db-section-mon .mon-alarm-hero {
gap: 14px;
}

body:not(.login-page) .db-section-mon .mon-alarm-headline h3 {
font-size: 40px !important;
}

body:not(.login-page) .db-section-mon .mon-alarm-headline p {
font-size: 15px !important;
}

body:not(.login-page) .db-section-mon .mon-alarm-breakdown {
align-content: center;
gap: 10px;
}

body:not(.login-page) .db-section-mon .mon-alarm-side {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: center;
justify-items: start;
gap: 8px;
}

body:not(.login-page) .db-section-mon .mon-alarm-meta {
justify-self: start;
font-size: 12px;
}

body:not(.login-page) .db-section-mon .mon-alarm-meta strong {
font-size: 18px;
}
}

@media (max-width: 560px) {
body:not(.login-page) .db-section-mon .stat-card.mon-alarm-wide {
gap: 14px !important;
}

body:not(.login-page) .db-section-mon .mon-alarm-wide .mon-alarm-pills {
gap: 6px;
}

body:not(.login-page) .db-section-mon .mon-alarm-side {
display: grid;
justify-content: stretch;
}
}

/* Dashboard do site: ultimas atualizacoes compactas */
body:not(.login-page) .db-insight-card {
border: 1px solid rgba(127, 155, 194, 0.32);
border-radius: 8px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 250, 255, 0.94));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 12px 24px rgba(19, 45, 86, 0.08);
}

html.dark body:not(.login-page) .db-insight-card {
border-color: rgba(125, 159, 210, 0.28);
background: linear-gradient(180deg, rgba(21, 36, 60, 0.92), rgba(17, 29, 49, 0.94));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 30px rgba(2, 8, 23, 0.2);
}

body:not(.login-page) .db-panel-eyebrow {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: #64748b;
}

html.dark body:not(.login-page) .db-panel-eyebrow {
color: #93a8c5;
}

body:not(.login-page) .db-activity-panel {
display: grid;
gap: 12px;
padding: 14px;
}

body:not(.login-page) .db-activity-feature {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 14px;
border-left: 3px solid rgba(148, 163, 184, 0.46);
}

body:not(.login-page) .db-activity-feature.ru-status-ok {
border-left-color: rgba(34, 197, 94, 0.8);
}

body:not(.login-page) .db-activity-feature.monitor-is-online {
border-left-color: rgba(34, 197, 94, 0.8);
}

body:not(.login-page) .db-activity-feature.ru-status-nok {
border-left-color: rgba(239, 68, 68, 0.82);
}

body:not(.login-page) .db-activity-feature.monitor-is-offline {
border-left-color: rgba(239, 68, 68, 0.82);
}

body:not(.login-page) .db-activity-feature.ru-status-manutencao {
border-left-color: rgba(245, 158, 11, 0.84);
}

body:not(.login-page) .db-activity-feature.monitor-is-degradado {
border-left-color: rgba(245, 158, 11, 0.84);
}

body:not(.login-page) .db-activity-feature.monitor-is-unknown,
body:not(.login-page) .db-activity-feature.monitor-is-unmonitored {
border-left-color: rgba(148, 163, 184, 0.64);
}

body:not(.login-page) .db-activity-feature strong {
display: block;
min-width: 0;
font-size: 17px;
font-weight: 900;
line-height: 1.15;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

body:not(.login-page) .db-activity-feature p,
body:not(.login-page) .db-activity-empty p {
margin: 0;
font-size: 12px;
line-height: 1.35;
color: var(--muted);
}

body:not(.login-page) .db-activity-feature-main {
display: grid;
gap: 3px;
min-width: 0;
}

body:not(.login-page) .db-activity-feature-head {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}

body:not(.login-page) .db-activity-feature-head .db-activity-dot {
flex: 0 0 auto;
}

body:not(.login-page) .db-activity-feature-side {
display: grid;
justify-items: end;
gap: 6px;
}

body:not(.login-page) .db-activity-feature-side time,
body:not(.login-page) .db-activity-meta time {
font-size: 11px;
font-weight: 750;
line-height: 1;
color: var(--muted);
white-space: nowrap;
}

body:not(.login-page) .db-activity-link {
font-size: 11px;
font-weight: 850;
color: #2563eb;
text-decoration: none;
}

html.dark body:not(.login-page) .db-activity-link {
color: #93c5fd;
}

body:not(.login-page) .db-inventory-status-pill {
min-height: 20px;
border-radius: 999px;
font-size: 10px;
font-weight: 850;
line-height: 1;
white-space: nowrap;
}

body:not(.login-page) .ru-s-desconhecido {
background: rgba(148, 163, 184, 0.12);
border-color: rgba(148, 163, 184, 0.28);
color: #64748b;
}

html.dark body:not(.login-page) .ru-s-desconhecido {
color: #cbd5e1;
}

body:not(.login-page) .db-activity-timeline {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}

body:not(.login-page) .db-activity-item {
display: grid;
grid-template-columns: 12px minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px;
min-width: 0;
padding: 10px 12px;
border-left-width: 0;
}

body:not(.login-page) .db-activity-dot {
width: 9px;
height: 9px;
border-radius: 999px;
background: #94a3b8;
box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.16);
}

body:not(.login-page) .ru-status-ok .db-activity-dot {
background: #22c55e;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}

body:not(.login-page) .db-activity-dot.is-online {
background: #22c55e;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}

body:not(.login-page) .ru-status-nok .db-activity-dot {
background: #ef4444;
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16);
}

body:not(.login-page) .db-activity-dot.is-offline {
background: #ef4444;
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16);
}

body:not(.login-page) .ru-status-manutencao .db-activity-dot {
background: #f59e0b;
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.16);
}

body:not(.login-page) .db-activity-dot.is-degradado {
background: #f59e0b;
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.16);
}

body:not(.login-page) .db-activity-dot.is-unknown,
body:not(.login-page) .db-activity-dot.is-unmonitored {
background: #94a3b8;
box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.16);
}

/* O ponto das atualizacoes sempre representa monitoramento, mesmo quando o status cadastral diverge. */
body:not(.login-page) .db-activity-feature .db-activity-dot.is-online,
body:not(.login-page) .db-activity-item .db-activity-dot.is-online {
background: #22c55e;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}

body:not(.login-page) .db-activity-feature .db-activity-dot.is-degradado,
body:not(.login-page) .db-activity-item .db-activity-dot.is-degradado {
background: #f59e0b;
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.16);
}

body:not(.login-page) .db-activity-feature .db-activity-dot.is-offline,
body:not(.login-page) .db-activity-item .db-activity-dot.is-offline {
background: #ef4444;
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16);
}

body:not(.login-page) .db-activity-feature .db-activity-dot.is-unknown,
body:not(.login-page) .db-activity-feature .db-activity-dot.is-unmonitored,
body:not(.login-page) .db-activity-item .db-activity-dot.is-unknown,
body:not(.login-page) .db-activity-item .db-activity-dot.is-unmonitored {
background: #94a3b8;
box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.16);
}

body:not(.login-page) .db-activity-main {
display: grid;
gap: 2px;
min-width: 0;
}

body:not(.login-page) .db-activity-main strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
font-weight: 850;
line-height: 1.2;
color: var(--text);
}

body:not(.login-page) .db-activity-main span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
line-height: 1.2;
color: var(--muted);
}

body:not(.login-page) .db-activity-meta {
display: grid;
justify-items: end;
gap: 5px;
}

body:not(.login-page) .db-activity-actions {
gap: 5px;
}

body:not(.login-page) .db-activity-empty {
display: grid;
gap: 6px;
padding: 16px;
}

body:not(.login-page) .db-activity-empty strong {
font-size: 18px;
font-weight: 900;
line-height: 1.15;
color: var(--text);
}

@media (max-width: 1180px) {
body:not(.login-page) .db-activity-timeline {
grid-template-columns: minmax(0, 1fr);
}
}

@media (max-width: 768px) {
body:not(.login-page) .db-activity-panel {
padding: 12px;
gap: 10px;
}

body:not(.login-page) .db-activity-feature {
grid-template-columns: minmax(0, 1fr);
}

body:not(.login-page) .db-activity-feature-side,
body:not(.login-page) .db-activity-meta {
justify-items: start;
}

body:not(.login-page) .db-activity-item {
grid-template-columns: 12px minmax(0, 1fr);
align-items: start;
}

body:not(.login-page) .db-activity-meta,
body:not(.login-page) .db-activity-actions {
grid-column: 2;
justify-self: start;
}
}

/* Login hero cohesion refresh */
@media (min-width: 901px) {
body.login-page {
background:
radial-gradient(circle at 11% 18%, rgba(56, 189, 248, 0.12), transparent 30%),
radial-gradient(circle at 84% 18%, rgba(124, 92, 255, 0.16), transparent 34%),
#06162f;
}

body.login-page::before {
inset: 112px 0 auto;
height: min(790px, calc(100dvh - 24px));
background:
linear-gradient(rgba(86, 147, 226, 0.075) 1px, transparent 1px),
linear-gradient(90deg, rgba(86, 147, 226, 0.075) 1px, transparent 1px),
radial-gradient(circle at 18% 22%, rgba(56, 189, 248, 0.2), transparent 31%),
radial-gradient(circle at 78% 20%, rgba(124, 92, 255, 0.18), transparent 36%);
background-size: 80px 80px, 80px 80px, auto, auto;
mask-image: linear-gradient(180deg, black 0%, black 68%, transparent 100%);
}

body.login-page::after {
height: max(900px, calc(100dvh + 140px));
background-image:
linear-gradient(90deg, rgba(3, 14, 33, 0.95) 0%, rgba(5, 22, 50, 0.9) 35%, rgba(6, 27, 59, 0.64) 68%, rgba(5, 17, 39, 0.76) 100%),
linear-gradient(180deg, rgba(4, 16, 39, 0.18) 0%, rgba(6, 24, 53, 0.34) 62%, rgba(6, 18, 39, 0.68) 100%),
image-set(
url('../img/login-hero-ai.webp') type('image/webp'),
url('../img/login-hero-ai.png') type('image/png')
);
filter: saturate(1.05) contrast(1.03);
}

body.login-page .login-top-strip {
background:
linear-gradient(90deg, rgba(3, 24, 54, 0.98) 0%, rgba(11, 48, 98, 0.98) 48%, rgba(67, 42, 163, 0.98) 100%);
border-bottom: 1px solid rgba(125, 211, 252, 0.24);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

body.login-page .login-top-strip-inner,
body.login-page.scrolled .login-top-strip-inner {
min-height: 36px;
gap: 28px;
color: rgba(226, 239, 255, 0.9);
font-size: 12px;
font-weight: 650;
}

body.login-page .login-top-strip-inner strong {
color: #ffffff;
font-weight: 900;
}

body.login-page .login-top-strip-inner span::before {
width: 8px;
height: 8px;
box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.14), 0 0 18px rgba(52, 211, 153, 0.34);
}

body.login-page .login-top-strip-inner span:nth-child(2)::before {
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.14), 0 0 18px rgba(56, 189, 248, 0.34);
}

body.login-page .login-top-strip-inner span:nth-child(3)::before {
box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.14), 0 0 18px rgba(167, 139, 250, 0.34);
}

body.login-page .login-nav,
body.login-page.scrolled .login-nav {
background:
linear-gradient(90deg, rgba(4, 25, 55, 0.99) 0%, rgba(6, 34, 73, 0.99) 54%, rgba(8, 42, 86, 0.99) 100%);
border-bottom: 1px solid rgba(148, 189, 255, 0.18);
box-shadow: 0 10px 32px rgba(2, 10, 28, 0.18);
}

body.login-page .login-nav-inner,
body.login-page.scrolled .login-nav-inner {
min-height: 76px;
}

body.login-page .login-nav-brand .brand-icon {
width: 48px;
height: 48px;
border: 1px solid rgba(192, 220, 255, 0.26);
box-shadow: 0 16px 32px rgba(35, 18, 93, 0.36), 0 0 0 5px rgba(124, 92, 255, 0.12);
}

body.login-page .login-nav-brand strong {
font-size: 36px;
letter-spacing: -0.035em;
}

body.login-page .login-nav-links a {
border: 1px solid transparent;
color: rgba(235, 246, 255, 0.9);
}

body.login-page .login-nav-links a:hover,
body.login-page .login-nav-links a.is-active {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(148, 189, 255, 0.22);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.login-page .login-nav-btn {
border-radius: 9px;
min-height: 46px;
padding-inline: 16px;
white-space: nowrap;
}

body.login-page .login-nav-btn-primary {
background: linear-gradient(135deg, #1f6ed4 0%, #4f46e5 56%, #6d3df5 100%);
border-color: rgba(130, 174, 255, 0.5);
box-shadow: 0 14px 30px rgba(31, 111, 212, 0.28), 0 0 0 4px rgba(109, 61, 245, 0.11);
}

body.login-page .login-nav-btn-ghost {
background: rgba(8, 29, 64, 0.58);
border-color: rgba(148, 189, 255, 0.28);
}

body.login-page .login-shell {
max-width: 1240px;
min-height: max(610px, calc(100dvh - 113px));
padding: 14px 48px 0;
grid-template-columns: minmax(0, 1.12fr) minmax(370px, 420px);
gap: 42px;
}

body.login-page .login-desktop-marketing {
background: #06162f;
}

body.login-page .login-proof-band {
position: relative;
overflow: hidden;
background:
linear-gradient(180deg, #06162f 0%, #071933 30%, #0a2245 64%, #14265e 100%);
border-top: 0;
}

body.login-page .login-proof-band::before {
content: '';
position: absolute;
inset: 0 0 auto;
height: 110px;
z-index: 0;
background: linear-gradient(180deg, #06162f 0%, rgba(6, 22, 47, 0.84) 42%, rgba(6, 22, 47, 0) 100%);
pointer-events: none;
}

body.login-page .login-proof-inner {
position: relative;
z-index: 1;
}

body.login-page .login-shell::before {
left: -44px;
top: 86px;
width: 86px;
height: 86px;
border-radius: 20px;
background: linear-gradient(145deg, rgba(56, 189, 248, 0.22), rgba(124, 92, 255, 0.12));
border-color: rgba(125, 211, 252, 0.24);
box-shadow: 0 22px 46px rgba(9, 91, 165, 0.2);
opacity: 0.72;
}

body.login-page .login-shell::after {
right: 37%;
bottom: 28px;
width: 74px;
height: 74px;
border-radius: 18px;
background: linear-gradient(145deg, rgba(34, 211, 238, 0.2), rgba(109, 61, 245, 0.14));
border-color: rgba(192, 220, 255, 0.2);
}

body.login-page .login-showcase {
max-width: 690px;
gap: 12px;
}

body.login-page .login-showcase-tag {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 12px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(9, 36, 78, 0.74), rgba(47, 56, 127, 0.54));
border: 1px solid rgba(161, 211, 255, 0.28);
color: #dff7ff;
box-shadow: 0 12px 28px rgba(2, 12, 34, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.login-page .login-showcase-tag::before {
content: '';
width: 8px;
height: 8px;
border-radius: 999px;
background: #38bdf8;
box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.14), 0 0 18px rgba(56, 189, 248, 0.5);
}

body.login-page .login-showcase h1 {
max-width: 620px;
font-size: clamp(34px, 3.35vw, 48px);
line-height: 1.05;
letter-spacing: -0.045em;
background: linear-gradient(135deg, #ffffff 0%, #e6f7ff 46%, #a7f3ff 68%, #c4b5fd 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 22px 48px rgba(3, 11, 31, 0.32);
}

body.login-page .login-showcase > p {
max-width: 620px;
font-size: 15.5px;
line-height: 1.55;
color: rgba(223, 237, 255, 0.88);
}

body.login-page .login-showcase-benefits {
max-width: 670px;
margin-top: 2px;
}

body.login-page .login-showcase-benefits .login-mobile-marketing {
padding: 11px;
border-radius: 16px;
border: 1px solid rgba(148, 189, 255, 0.25);
background:
linear-gradient(150deg, rgba(7, 24, 55, 0.78), rgba(15, 42, 86, 0.58)),
rgba(255, 255, 255, 0.06);
box-shadow: 0 22px 48px rgba(2, 10, 28, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}

body.login-page .login-showcase-benefits .login-mobile-marketing-title {
color: #f7fbff;
letter-spacing: 0.08em;
font-size: 12.5px;
}

body.login-page .login-showcase-benefits .login-mobile-marketing-subtitle {
color: rgba(209, 229, 255, 0.82);
margin-bottom: 7px;
font-size: 13.4px;
}

body.login-page .login-showcase-benefits .login-mobile-marketing-list {
gap: 6px;
}

body.login-page .login-showcase-benefits .login-mobile-marketing-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.login-page .login-showcase-benefits .login-mobile-marketing-list li {
grid-template-columns: 21px minmax(0, 1fr);
min-height: 44px;
padding: 9px 10px;
border-radius: 11px;
border-color: rgba(148, 189, 255, 0.2);
background: rgba(8, 30, 68, 0.58);
color: rgba(237, 247, 255, 0.92);
font-size: 13px;
line-height: 1.3;
}

body.login-page .login-showcase-benefits .login-mobile-marketing-bullet {
width: 15px;
height: 15px;
background: linear-gradient(135deg, #22c55e 0%, #38bdf8 52%, #6d4bff 100%);
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.09), 0 8px 18px rgba(32, 118, 196, 0.26);
}

body.login-page .login-card {
max-width: 430px;
min-height: clamp(500px, 56dvh, 548px);
padding: 26px 28px 24px;
border-radius: 18px;
border: 1px solid rgba(190, 209, 239, 0.92);
background:
radial-gradient(circle at 88% 5%, rgba(56, 189, 248, 0.16), transparent 32%),
linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(239, 246, 255, 0.97));
box-shadow:
0 34px 76px rgba(2, 10, 28, 0.36),
0 0 0 1px rgba(255, 255, 255, 0.62) inset;
}

body.login-page .login-card::before {
top: -82px;
right: -76px;
width: 220px;
height: 220px;
background:
radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.24), transparent 58%),
radial-gradient(circle at 32% 36%, rgba(109, 75, 255, 0.2), transparent 64%);
filter: blur(22px);
}

body.login-page .login-card::after {
display: none;
}

body.login-page .login-brand .brand-icon {
width: 54px;
height: 54px;
border-radius: 14px;
border: 1px solid rgba(160, 190, 245, 0.55);
box-shadow: 0 16px 32px rgba(60, 45, 150, 0.26), 0 0 0 5px rgba(79, 70, 229, 0.08);
}

body.login-page .login-brand {
gap: 13px;
margin-bottom: 4px;
}

body.login-page .login-brand h2 {
font-size: 31px;
}

body.login-page .login-card h3 {
font-size: 31px;
letter-spacing: -0.035em;
}

body.login-page .login-brand h2,
body.login-page .login-card h3 {
color: #0c2240;
}

body.login-page .login-brand p,
body.login-page .login-card-subtitle {
color: #52647d;
}

body.login-page .login-card .form-control {
border-radius: 10px;
border-color: #bfd0ea;
background: #fbfdff;
}

body.login-page .login-card .form-control:focus {
border-color: #2b75d6;
box-shadow: 0 0 0 3px rgba(43, 117, 214, 0.16);
}

body.login-page .login-actions .btn {
border-radius: 10px;
background: linear-gradient(135deg, #1f6ed4 0%, #4f46e5 55%, #6d3df5 100%);
border-color: rgba(49, 112, 214, 0.78);
box-shadow: 0 14px 30px rgba(49, 89, 198, 0.28);
}

body.login-page .info-login {
border-radius: 12px;
background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(230, 239, 253, 0.98));
border-color: rgba(183, 203, 235, 0.92);
color: #52647d;
}

body.login-page .info-login svg {
color: #4f46e5;
}

body.login-page .login-scroll-guide {
min-width: 142px;
justify-content: space-between;
border-color: rgba(148, 189, 255, 0.42);
background:
linear-gradient(145deg, rgba(10, 35, 76, 0.84), rgba(68, 45, 163, 0.82)),
rgba(5, 16, 38, 0.78);
box-shadow: 0 20px 44px rgba(5, 16, 38, 0.3), 0 0 0 5px rgba(56, 189, 248, 0.07);
}

body.login-page .login-scroll-guide span {
white-space: nowrap;
}

body.login-page .login-scroll-guide.is-to-top svg {
transform: rotate(180deg);
animation-name: loginScrollGuidePulseTop;
}

body.login-page .login-scroll-guide.is-to-top {
min-width: 166px;
}

}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
body.login-page::after {
transform-origin: 68% 44%;
animation: loginHeroBackdropIn 1400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.login-page .login-shell.is-visible .login-showcase-tag {
animation: loginHeroBadgeIn 620ms cubic-bezier(0.16, 1, 0.3, 1) 90ms both;
}

body.login-page .login-shell.is-visible .login-showcase h1 {
background-size: 170% 100%;
animation:
loginHeroTitleIn 760ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both,
loginHeroTitleSweep 1200ms ease-out 560ms both;
}

body.login-page .login-shell.is-visible .login-showcase > p {
animation: loginHeroTextIn 680ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
}

body.login-page .login-shell.is-visible .login-showcase-benefits .login-mobile-marketing {
transform-origin: left center;
animation: loginHeroPanelIn 760ms cubic-bezier(0.16, 1, 0.3, 1) 430ms both;
}

body.login-page .login-shell.is-visible .login-showcase-benefits .login-mobile-marketing-list li {
animation: loginHeroBenefitIn 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.login-page .login-shell.is-visible .login-showcase-benefits .login-mobile-marketing-list li:nth-child(1) { animation-delay: 560ms; }
body.login-page .login-shell.is-visible .login-showcase-benefits .login-mobile-marketing-list li:nth-child(2) { animation-delay: 620ms; }
body.login-page .login-shell.is-visible .login-showcase-benefits .login-mobile-marketing-list li:nth-child(3) { animation-delay: 680ms; }
body.login-page .login-shell.is-visible .login-showcase-benefits .login-mobile-marketing-list li:nth-child(4) { animation-delay: 740ms; }
body.login-page .login-shell.is-visible .login-showcase-benefits .login-mobile-marketing-list li:nth-child(5) { animation-delay: 800ms; }
body.login-page .login-shell.is-visible .login-showcase-benefits .login-mobile-marketing-list li:nth-child(6) { animation-delay: 860ms; }

body.login-page .login-shell.is-visible .login-card {
animation: loginHeroCardEntrance 860ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both !important;
}

body.login-page .login-card > * {
position: relative;
z-index: 1;
}

body.login-page .login-card::after {
content: '';
position: absolute;
inset: -22% -36%;
z-index: 0;
display: block;
pointer-events: none;
background:
linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.42) 42%, rgba(128, 213, 255, 0.2) 50%, transparent 62%);
opacity: 0;
transform: translateX(-58%) rotate(10deg);
animation: loginHeroCardScan 1200ms ease-out 820ms both;
}

body.login-page .login-shell.is-visible .login-card .brand-icon {
animation: loginHeroLogoPulse 720ms cubic-bezier(0.16, 1, 0.3, 1) 560ms both;
}

body.login-page .login-shell.is-visible .login-actions .btn {
animation: loginHeroButtonGlow 900ms ease-out 940ms both;
}
}

@keyframes loginHeroBackdropIn {
from {
opacity: 0.64;
transform: scale(1.035);
}
to {
opacity: 1;
transform: scale(1);
}
}

@keyframes loginHeroBadgeIn {
from {
opacity: 0;
transform: translate3d(-18px, 8px, 0) scale(0.94);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}

@keyframes loginHeroTitleIn {
from {
opacity: 0;
transform: translate3d(0, 22px, 0) scale(0.985);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}

@keyframes loginHeroTitleSweep {
from { background-position: 100% 50%; }
to { background-position: 0% 50%; }
}

@keyframes loginHeroTextIn {
from {
opacity: 0;
transform: translate3d(0, 16px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

@keyframes loginHeroPanelIn {
from {
opacity: 0;
transform: translate3d(0, 18px, 0) scale(0.985);
box-shadow: 0 8px 24px rgba(2, 10, 28, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
box-shadow: 0 22px 48px rgba(2, 10, 28, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
}

@keyframes loginHeroBenefitIn {
from {
opacity: 0;
transform: translate3d(0, 10px, 0) scale(0.97);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}

@keyframes loginHeroCardEntrance {
0% {
opacity: 0;
transform: translate3d(28px, 18px, 0) scale(0.965);
box-shadow: 0 16px 34px rgba(2, 10, 28, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.38) inset;
}
64% {
opacity: 1;
transform: translate3d(-4px, -2px, 0) scale(1.006);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
box-shadow: 0 34px 76px rgba(2, 10, 28, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.62) inset;
}
}

@keyframes loginHeroCardScan {
0% {
opacity: 0;
transform: translateX(-58%) rotate(10deg);
}
20% {
opacity: 0.72;
}
100% {
opacity: 0;
transform: translateX(58%) rotate(10deg);
}
}

@keyframes loginHeroLogoPulse {
0% {
transform: scale(0.9);
box-shadow: 0 12px 24px rgba(60, 45, 150, 0.18), 0 0 0 0 rgba(79, 70, 229, 0);
}
55% {
transform: scale(1.06);
box-shadow: 0 18px 34px rgba(60, 45, 150, 0.32), 0 0 0 9px rgba(79, 70, 229, 0.12);
}
100% {
transform: scale(1);
box-shadow: 0 16px 32px rgba(60, 45, 150, 0.26), 0 0 0 5px rgba(79, 70, 229, 0.08);
}
}

@keyframes loginHeroButtonGlow {
0% {
box-shadow: 0 10px 22px rgba(49, 89, 198, 0.2);
}
48% {
box-shadow: 0 18px 38px rgba(49, 89, 198, 0.34), 0 0 0 6px rgba(79, 70, 229, 0.1);
}
100% {
box-shadow: 0 14px 30px rgba(49, 89, 198, 0.28);
}
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
body.login-page::after {
transform-origin: 62% 28%;
animation: loginMobileBackdropIn 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.login-page .login-top-strip {
animation: loginMobileTopIn 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.login-page .login-nav {
animation: loginMobileTopIn 580ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

body.login-page .login-shell.is-visible .login-showcase-tag {
animation: loginMobileChipIn 520ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

body.login-page .login-shell.is-visible .login-showcase h1 {
background-size: 160% 100%;
animation:
loginMobileTitleIn 680ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both,
loginHeroTitleSweep 900ms ease-out 480ms both;
}

body.login-page .login-shell.is-visible .login-showcase > p {
animation: loginMobileTextIn 580ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
}

body.login-page .login-shell.is-visible .login-showcase-benefits .login-mobile-marketing {
animation: loginMobilePanelIn 640ms cubic-bezier(0.16, 1, 0.3, 1) 360ms both;
}

body.login-page .login-shell.is-visible .login-showcase-benefits .login-mobile-marketing-list li {
animation: loginMobileBenefitIn 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.login-page .login-shell.is-visible .login-showcase-benefits .login-mobile-marketing-list li:nth-child(1) { animation-delay: 480ms; }
body.login-page .login-shell.is-visible .login-showcase-benefits .login-mobile-marketing-list li:nth-child(2) { animation-delay: 530ms; }
body.login-page .login-shell.is-visible .login-showcase-benefits .login-mobile-marketing-list li:nth-child(3) { animation-delay: 580ms; }
body.login-page .login-shell.is-visible .login-showcase-benefits .login-mobile-marketing-list li:nth-child(4) { animation-delay: 630ms; }
body.login-page .login-shell.is-visible .login-showcase-benefits .login-mobile-marketing-list li:nth-child(5) { animation-delay: 680ms; }
body.login-page .login-shell.is-visible .login-showcase-benefits .login-mobile-marketing-list li:nth-child(6) { animation-delay: 730ms; }

body.login-page .login-shell.is-visible .login-card {
animation: loginMobileCardIn 720ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both !important;
}

body.login-page .login-card > * {
position: relative;
z-index: 1;
}

body.login-page .login-card::after {
content: '';
position: absolute;
inset: -18% -46%;
z-index: 0;
display: block;
pointer-events: none;
background: linear-gradient(112deg, transparent 0%, rgba(255, 255, 255, 0.36) 46%, rgba(120, 205, 255, 0.18) 52%, transparent 64%);
opacity: 0;
transform: translateX(-54%) rotate(9deg);
animation: loginMobileCardScan 940ms ease-out 920ms both;
}

body.login-page .login-shell.is-visible .login-brand .brand-icon {
animation: loginMobileLogoPop 620ms cubic-bezier(0.16, 1, 0.3, 1) 720ms both;
}

body.login-page .login-shell.is-visible .login-actions .btn {
animation: loginMobileButtonGlow 780ms ease-out 980ms both;
}

body.login-page .login-mobile-cue {
animation:
loginMobileCueIn 560ms cubic-bezier(0.16, 1, 0.3, 1) 1160ms both,
loginCueBounce 1.9s ease-in-out 1820ms infinite !important;
}
}

@keyframes loginMobileBackdropIn {
from {
opacity: 0.72;
transform: scale(1.025);
}
to {
opacity: 1;
transform: scale(1);
}
}

@keyframes loginMobileTopIn {
from {
opacity: 0;
transform: translate3d(0, -12px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

@keyframes loginMobileChipIn {
from {
opacity: 0;
transform: translate3d(0, 10px, 0) scale(0.95);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}

@keyframes loginMobileTitleIn {
from {
opacity: 0;
transform: translate3d(0, 18px, 0) scale(0.985);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}

@keyframes loginMobileTextIn {
from {
opacity: 0;
transform: translate3d(0, 12px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

@keyframes loginMobilePanelIn {
from {
opacity: 0;
transform: translate3d(0, 14px, 0) scale(0.985);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}

@keyframes loginMobileBenefitIn {
from {
opacity: 0;
transform: translate3d(0, 9px, 0) scale(0.98);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}

@keyframes loginMobileCardIn {
0% {
opacity: 0;
transform: translate3d(0, 20px, 0) scale(0.97);
box-shadow: 0 14px 30px rgba(9, 17, 42, 0.16);
}
68% {
opacity: 1;
transform: translate3d(0, -3px, 0) scale(1.004);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
box-shadow: 0 28px 58px rgba(9, 17, 42, 0.32);
}
}

@keyframes loginMobileCardScan {
0% {
opacity: 0;
transform: translateX(-54%) rotate(9deg);
}
22% {
opacity: 0.62;
}
100% {
opacity: 0;
transform: translateX(54%) rotate(9deg);
}
}

@keyframes loginMobileLogoPop {
0% {
transform: scale(0.92);
box-shadow: 0 10px 20px rgba(37, 13, 107, 0.22), 0 0 0 0 rgba(79, 70, 229, 0);
}
56% {
transform: scale(1.08);
box-shadow: 0 16px 30px rgba(37, 13, 107, 0.34), 0 0 0 8px rgba(79, 70, 229, 0.12);
}
100% {
transform: scale(1);
box-shadow: 0 10px 24px rgba(37, 13, 107, 0.35);
}
}

@keyframes loginMobileButtonGlow {
0% {
box-shadow: 0 10px 20px rgba(49, 89, 198, 0.18);
}
48% {
box-shadow: 0 16px 30px rgba(49, 89, 198, 0.34), 0 0 0 5px rgba(79, 70, 229, 0.11);
}
100% {
box-shadow: 0 14px 30px rgba(49, 89, 198, 0.28);
}
}

@keyframes loginMobileCueIn {
from {
opacity: 0;
transform: translate(-50%, 12px) scale(0.96);
}
to {
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
}

/* Analytics print pass: compact PDF without clipped cards, tables, or charts. */
@page {
margin: 10mm;
}

@media print {
html,
body {
width: auto !important;
min-width: 0 !important;
background: #ffffff !important;
color: #0f172a !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}

body:not(.login-page) .topbar,
body:not(.login-page) .sidebar,
body:not(.login-page) .sidebar-overlay,
body:not(.login-page) .mobile-nav,
body:not(.login-page) .footer,
body:not(.login-page) .toast-container,
body:not(.login-page) .shortcuts-overlay,
body:not(.login-page) .confirm-overlay,
body:not(.login-page) .lightbox-overlay,
body:not(.login-page) .password-modal-overlay,
body:not(.login-page) .breadcrumb,
body:not(.login-page) .dash-tabs,
body:not(.login-page) .dash-hero-actions,
body:not(.login-page) .dash-bottom-actions,
body:not(.login-page) .dash-insight-strip {
display: none !important;
}

body:not(.login-page) .main-content {
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
}

body:not(.login-page) .container.nh-page.dash-page {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}

body:not(.login-page) .dash-page *,
body:not(.login-page) .dash-page *::before,
body:not(.login-page) .dash-page *::after {
animation: none !important;
transition: none !important;
text-shadow: none !important;
}

body:not(.login-page) .dash-page .animate-in {
opacity: 1 !important;
transform: none !important;
}

body:not(.login-page) .dash-page .dash-hero {
margin: 0 0 10px !important;
padding: 10px 12px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
background: #ffffff !important;
box-shadow: none !important;
break-inside: avoid;
}

body:not(.login-page) .dash-page .dash-hero h2 {
font-size: 17px !important;
line-height: 1.2 !important;
color: #0f172a !important;
}

body:not(.login-page) .dash-page .dash-subtitle {
font-size: 9.5px !important;
line-height: 1.35 !important;
color: #334155 !important;
}

body:not(.login-page) .dash-page .dash-tab-content {
display: none !important;
}

body:not(.login-page) .dash-page .dash-tab-content.active {
display: block !important;
}

body:not(.login-page) .dash-page .dash-print-tab-title {
display: block !important;
margin: 0 0 10px !important;
padding: 0 0 6px !important;
border-bottom: 1px solid #334155 !important;
font-size: 13px !important;
font-weight: 850 !important;
line-height: 1.2 !important;
color: #0f172a !important;
}

body:not(.login-page) .dash-page .kpi-grid,
body:not(.login-page) .dash-page .kpi-grid-4,
body:not(.login-page) .dash-page .kpi-grid-5,
body:not(.login-page) .dash-page .kpi-grid-monitoramento,
body:not(.login-page) .dash-page .kpi-grid-secondary {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 7px !important;
margin: 0 0 10px !important;
}

body:not(.login-page) .dash-page .kpi-card {
min-height: 0 !important;
padding: 8px 10px !important;
gap: 8px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
background: #ffffff !important;
box-shadow: none !important;
overflow: visible !important;
break-inside: avoid;
page-break-inside: avoid;
}

body:not(.login-page) .dash-page .kpi-card::before {
top: 0 !important;
left: 0 !important;
width: 3px !important;
height: 100% !important;
border-radius: 8px 0 0 8px !important;
}

body:not(.login-page) .dash-page .kpi-card::after {
display: none !important;
}

body:not(.login-page) .dash-page .kpi-icon {
width: 28px !important;
height: 28px !important;
border-radius: 7px !important;
box-shadow: none !important;
}

body:not(.login-page) .dash-page .kpi-icon svg {
width: 16px !important;
height: 16px !important;
}

body:not(.login-page) .dash-page .kpi-value {
font-size: 18px !important;
line-height: 1.05 !important;
color: #0f172a !important;
letter-spacing: 0 !important;
}

body:not(.login-page) .dash-page .kpi-value small {
font-size: 10px !important;
}

body:not(.login-page) .dash-page .kpi-label,
body:not(.login-page) .dash-page .kpi-sub,
body:not(.login-page) .dash-page .kpi-pct {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
font-size: 8.8px !important;
line-height: 1.2 !important;
color: #334155 !important;
}

body:not(.login-page) .dash-page .operation-bar,
body:not(.login-page) .dash-page .chart-card,
body:not(.login-page) .dash-page .tipo-detail-card,
body:not(.login-page) .dash-page .master-health-card {
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
background: #ffffff !important;
box-shadow: none !important;
break-inside: avoid;
page-break-inside: avoid;
}

body:not(.login-page) .dash-page .operation-bar {
margin: 0 0 10px !important;
padding: 10px 12px !important;
}

body:not(.login-page) .dash-page .operation-bar-header {
margin-bottom: 8px !important;
}

body:not(.login-page) .dash-page .operation-bar-header h3,
body:not(.login-page) .dash-page .section-header h3,
body:not(.login-page) .dash-page .chart-header h3 {
font-size: 11px !important;
line-height: 1.25 !important;
color: #0f172a !important;
}

body:not(.login-page) .dash-page .operation-pct,
body:not(.login-page) .dash-page .section-badge {
font-size: 9px !important;
line-height: 1.2 !important;
}

body:not(.login-page) .dash-page .operation-track {
height: 9px !important;
}

body:not(.login-page) .dash-page .operation-legend {
gap: 6px 10px !important;
margin-top: 8px !important;
}

body:not(.login-page) .dash-page .operation-legend-item {
font-size: 8.8px !important;
line-height: 1.2 !important;
}

body:not(.login-page) .dash-page .charts-grid,
body:not(.login-page) .dash-page .dash-dual-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
margin: 0 0 10px !important;
}

body:not(.login-page) .dash-page .chart-header {
padding: 9px 12px 0 !important;
}

body:not(.login-page) .dash-page .chart-body {
height: 190px !important;
padding: 8px 10px 10px !important;
overflow: hidden !important;
}

body:not(.login-page) .dash-page .chart-body canvas {
max-width: 100% !important;
max-height: 100% !important;
}

body:not(.login-page) .dash-page .dash-section {
margin: 0 0 10px !important;
padding: 10px 12px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
background: #ffffff !important;
box-shadow: none !important;
break-inside: auto !important;
page-break-inside: auto !important;
}

body:not(.login-page) .dash-page .dash-section .section-header {
margin-bottom: 8px !important;
break-after: avoid;
page-break-after: avoid;
}

body:not(.login-page) .dash-page .section-header .btn,
body:not(.login-page) .dash-page .ru-card-actions,
body:not(.login-page) .dash-page .dash-eq-criticos-table th:last-child,
body:not(.login-page) .dash-page .dash-eq-criticos-table td:last-child {
display: none !important;
}

body:not(.login-page) .dash-page .master-health-grid,
body:not(.login-page) .dash-page .tipo-detail-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}

body:not(.login-page) .dash-page .master-health-card,
body:not(.login-page) .dash-page .tipo-detail-card {
padding: 10px 12px !important;
}

body:not(.login-page) .dash-page .master-health-header,
body:not(.login-page) .dash-page .master-health-stats,
body:not(.login-page) .dash-page .tipo-detail-header,
body:not(.login-page) .dash-page .tipo-detail-stats {
gap: 6px !important;
}

body:not(.login-page) .dash-page .master-health-name,
body:not(.login-page) .dash-page .activity-main strong,
body:not(.login-page) .dash-page .dash-monitor-alert-main strong,
body:not(.login-page) .dash-page .dash-monitor-alert-equip,
body:not(.login-page) .dash-page .text-truncate,
body:not(.login-page) .dash-page .pendencia-text {
max-width: none !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}

body:not(.login-page) .dash-page .tipo-detail-ring {
width: 62px !important;
height: 62px !important;
margin-bottom: 8px !important;
}

body:not(.login-page) .dash-page .ring-text {
font-size: 13px !important;
}

body:not(.login-page) .dash-page .activity-feed {
max-height: none !important;
overflow: visible !important;
gap: 0 !important;
}

body:not(.login-page) .dash-page .activity-item {
padding: 6px 0 !important;
border-bottom: 1px solid #e2e8f0 !important;
break-inside: avoid;
page-break-inside: avoid;
}

body:not(.login-page) .dash-page .activity-main,
body:not(.login-page) .dash-page .activity-meta {
flex-wrap: wrap !important;
gap: 4px 6px !important;
}

body:not(.login-page) .dash-page .activity-time {
margin-left: 0 !important;
}

body:not(.login-page) .dash-page .table-responsive,
body:not(.login-page) .dash-page .dash-table-wrap {
overflow: visible !important;
border-radius: 6px !important;
box-shadow: none !important;
}

body:not(.login-page) .dash-page table {
width: 100% !important;
border-collapse: collapse !important;
table-layout: auto !important;
}

body:not(.login-page) .dash-page thead {
display: table-header-group;
}

body:not(.login-page) .dash-page tr {
break-inside: avoid;
page-break-inside: avoid;
}

body:not(.login-page) .dash-page th,
body:not(.login-page) .dash-page td {
padding: 4px 5px !important;
border-color: #dbe3ef !important;
font-size: 8.5px !important;
line-height: 1.25 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
word-break: break-word !important;
color: #0f172a !important;
}

body:not(.login-page) .dash-page th {
background: #f1f5f9 !important;
font-weight: 800 !important;
color: #334155 !important;
}

body:not(.login-page) .dash-page .badge,
body:not(.login-page) .dash-page .status-badge,
body:not(.login-page) .dash-page .badge-sm,
body:not(.login-page) .dash-page .section-badge {
padding: 2px 5px !important;
border-radius: 999px !important;
font-size: 7.6px !important;
line-height: 1.2 !important;
white-space: normal !important;
}

body:not(.login-page) .dash-page a {
color: #0f172a !important;
text-decoration: none !important;
}
}