:root {
  --bg: #080b10;
  --sidebar: #0b0f15;
  --panel: #10151d;
  --panel-2: #131a23;
  --border: #222b37;
  --text: #f1f5f9;
  --muted: #8290a3;
  --faint: #556273;
  --blue: #3b82f6;
  --green: #22c55e;
  --amber: #f59e0b;
  --red: #ef4444;
  --purple: #8b5cf6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 20;
  width: 244px; padding: 26px 18px 20px;
  display: flex; flex-direction: column;
  background: var(--sidebar); border-right: 1px solid #1b222c;
}
.brand {
  display: flex;
  min-width: 0;
  padding: 0 9px 27px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.brand .global-brand-logo {
  width: 100%;
  height: 112px;
  flex: 0 0 auto;
  border-radius: 14px;
}
.brand-copy { width: 100%; min-width: 0; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; background: #f8fafc; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 9px 8px; }
.brand-mark span { width: 4px; background: #111827; border-radius: 2px; }
.brand-mark span:nth-child(1) { height: 9px; }
.brand-mark span:nth-child(2) { height: 17px; }
.brand-mark span:nth-child(3) { height: 13px; }
.brand strong, .brand small { display: block; }
.brand strong {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  font-size: clamp(12px, 1vw, 16px);
  line-height: 1.3;
  letter-spacing: -.3px;
}
.brand small {
  max-width: 100%;
  color: var(--faint);
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: .3px;
  margin-top: 4px;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}
.nav-label { color: #465162; font-size: 10px; font-weight: 700; letter-spacing: 1.3px; margin: 14px 12px 8px; text-transform: uppercase; }
.nav-item {
  color: #8995a6; min-height: 42px; margin: 2px 0; padding: 0 12px;
  border-radius: 8px; display: flex; align-items: center; gap: 12px;
  text-decoration: none; font-weight: 500; transition: .2s ease;
}
.nav-item:hover { background: #121821; color: #d7dee8; }
.nav-item.active { color: #f8fafc; background: #18202b; box-shadow: inset 3px 0 var(--blue); }
.nav-icon { width: 18px; font-size: 17px; text-align: center; }
.nav-count { margin-left: auto; min-width: 21px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: #202937; color: #8e9bad; font-size: 10px; font-weight: 700; }
.nav-count.alert-count { color: #ffc45c; background: #382a13; }
.sidebar-footer { margin-top: auto; }
.system-status, .user-card { display: flex; align-items: center; gap: 10px; }
.system-status { margin: 0 8px 18px; padding: 13px 0; border-top: 1px solid #19212b; border-bottom: 1px solid #19212b; }
.system-status strong, .system-status small, .user-card strong, .user-card small { display: block; }
.system-status strong, .user-card strong { font-size: 11px; }
.system-status small, .user-card small { color: var(--faint); font-size: 9px; margin-top: 3px; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(34,197,94,.1); }
.avatar { width: 33px; height: 33px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #27364b, #18202b); color: #b7c6da; font-size: 11px; font-weight: 700; }
.user-card button { margin-left: auto; border: 0; background: transparent; color: #5f6b7a; cursor: pointer; }
.brand-mark.has-client-logo { padding: 8px; overflow: hidden; background: #111821; border: 1px solid #1c2734; }
.brand-mark.has-client-logo span { display: none; }
.brand-mark.has-client-logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.brand .global-brand-logo.has-client-logo { padding: 10px 12px; }
.brand .global-brand-logo.has-client-logo img { max-width: 100%; max-height: 100%; }
.logo-needs-contrast {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.96), transparent 46%),
    linear-gradient(145deg, #f8fafc, #dce7f2) !important;
  border-color: #b9c8d8 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.68), 0 8px 22px rgba(0,0,0,.16);
}

.main-content { margin-left: 244px; min-width: 0; }
.topbar {
  height: 72px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10; background: rgba(8,11,16,.92); backdrop-filter: blur(16px);
  border-bottom: 1px solid #1b222c;
}
.mobile-menu { display: none; border: 0; background: transparent; font-size: 22px; cursor: pointer; }
.search-box { width: min(420px, 45vw); position: relative; display: flex; align-items: center; }
.search-box > span { position: absolute; left: 13px; color: #647184; font-size: 20px; transform: rotate(-20deg); }
.search-box input { width: 100%; height: 38px; padding: 0 65px 0 40px; outline: none; color: #dce4ef; background: #0e131a; border: 1px solid #202833; border-radius: 8px; }
.search-box input:focus { border-color: #34598b; box-shadow: 0 0 0 3px rgba(59,130,246,.08); }
.search-box input::placeholder { color: #576475; }
.search-box kbd { position: absolute; right: 8px; padding: 3px 7px; border: 1px solid #2a3340; border-radius: 5px; color: #687587; background: #151b24; font-size: 10px; box-shadow: none; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.icon-button, .refresh-button { height: 38px; border: 1px solid #252e3a; border-radius: 8px; background: #111720; cursor: pointer; }
.icon-button { width: 38px; position: relative; color: #8a97a9; }
.zoom-control { position: relative; }
.zoom-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.zoom-button.active { color: #86b6ff; border-color: #34598b; background: #142238; }
.zoom-menu {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 30;
  width: 146px; height: 42px; padding: 4px; display: grid; grid-template-columns: 36px 1fr 36px;
  border: 1px solid #2b3746; border-radius: 9px; background: #0d131b;
  box-shadow: 0 14px 35px rgba(0,0,0,.38);
}
.zoom-menu[hidden] { display: none; }
.zoom-menu button { border: 0; border-radius: 6px; color: #b9c6d7; background: transparent; cursor: pointer; font-size: 17px; }
.zoom-menu button:hover { color: #fff; background: #182332; }
#zoomResetButton { font-size: 11px; font-weight: 700; }
.zoom-menu button:disabled { opacity: .35; cursor: not-allowed; }
.notification-button i { position: absolute; width: 6px; height: 6px; right: 9px; top: 8px; border-radius: 50%; background: var(--red); border: 1px solid #111720; }
.refresh-button { padding: 0 14px; display: flex; gap: 8px; align-items: center; color: #c5ceda; font-size: 12px; font-weight: 600; }
.refresh-button:hover, .icon-button:hover { background: #18202a; border-color: #354151; }
.refresh-button.loading .refresh-icon { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.dashboard { max-width: 1530px; margin: 0 auto; padding: 31px 34px 42px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.eyebrow { color: #657286; font-size: 9px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; margin-bottom: 8px; }
.eyebrow span { width: 19px; height: 1px; background: var(--blue); display: inline-block; vertical-align: middle; margin-right: 7px; }
h1, h2, p { margin: 0; }
h1 { font-size: 27px; line-height: 1.2; letter-spacing: -.7px; }
.page-heading p, .panel-header p { color: var(--muted); }
.page-heading p { margin-top: 7px; font-size: 12px; }
.heading-meta { display: flex; align-items: center; gap: 13px; color: #647184; font-size: 10px; }
.live-status { padding: 7px 10px; border: 1px solid #23342b; border-radius: 15px; color: #8ed5a6; background: #101c17; }
.live-status i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.live-status.paused { border-color: #3c3020; color: #d5ad68; background: #1d1810; }
.live-status.paused i { background: #d59a38; box-shadow: 0 0 8px #d59a38; }

.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 15px; }
.metric-card, .panel { border: 1px solid var(--border); background: linear-gradient(145deg, rgba(19,25,34,.96), rgba(13,18,25,.98)); border-radius: 10px; }
.metric-card { min-height: 157px; padding: 18px 19px; position: relative; overflow: hidden; }
.metric-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 90% 5%, rgba(59,130,246,.06), transparent 38%); pointer-events: none; }
.warning-card { border-color: #3c3020; }
.metric-top { display: flex; justify-content: space-between; align-items: center; color: #8996a8; font-size: 11px; font-weight: 600; }
.metric-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font-size: 15px; }
.metric-icon.green { color: #69dc8f; background: rgba(34,197,94,.1); }
.metric-icon.blue { color: #69a4ff; background: rgba(59,130,246,.1); }
.metric-icon.amber { color: #f8b94e; background: rgba(245,158,11,.1); }
.metric-icon.purple { color: #ad8cff; background: rgba(139,92,246,.1); }
.metric-value { margin-top: 15px; font-size: 28px; line-height: 1; font-weight: 650; letter-spacing: -1px; }
.metric-value small { color: #657285; font-size: 13px; letter-spacing: 0; }
.metric-footer { margin-top: 10px; color: #647184; font-size: 9px; }
.metric-footer .positive { color: #5fd184; margin-right: 4px; }
.metric-footer .critical { color: #f07878; }
.separator { margin: 0 6px; }
.spark-bars { position: absolute; right: 18px; bottom: 17px; width: 78px; height: 34px; display: flex; align-items: end; gap: 4px; opacity: .58; }
.spark-bars i { width: 5px; border-radius: 2px 2px 0 0; }
.green-bars i { background: var(--green); }
.blue-bars i { background: var(--blue); }
.text-action { margin-top: 18px; padding: 0; border: 0; color: #d19a3b; background: transparent; font-size: 10px; cursor: pointer; }
.text-action span { margin-left: 5px; }
.uptime-track { position: absolute; bottom: 20px; left: 19px; right: 19px; height: 3px; border-radius: 4px; background: #252435; overflow: hidden; }
.uptime-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #7049da, #9d77f5); transition: width .25s ease; }

.analytics-grid { display: grid; grid-template-columns: minmax(0, 2.35fr) minmax(280px, .8fr); gap: 15px; margin-bottom: 15px; }
.panel { padding: 19px 20px; }
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.panel-header h2 { font-size: 13px; letter-spacing: -.1px; }
.panel-header p { margin-top: 5px; font-size: 9px; }
.period-switcher { padding: 3px; border: 1px solid #242d39; border-radius: 7px; background: #0c1118; }
.period-switcher button { min-width: 34px; height: 25px; border: 0; border-radius: 5px; color: #647184; background: transparent; cursor: pointer; font-size: 9px; font-weight: 700; }
.period-switcher button.active { color: #d9e3ef; background: #222c39; }
.chart-legend { display: flex; gap: 25px; margin: 20px 0 2px 47px; color: #778496; font-size: 9px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 6px; height: 6px; border-radius: 50%; }
.download-dot { background: var(--blue); }
.upload-dot { background: var(--purple); }
.chart-legend strong { color: #bec8d5; font-size: 10px; }
.chart-wrap { position: relative; height: 255px; padding-left: 43px; padding-bottom: 24px; }
.y-axis { position: absolute; top: 3px; bottom: 30px; left: 0; display: flex; flex-direction: column; justify-content: space-between; color: #4f5d6e; font-size: 8px; }
.traffic-chart { width: 100%; height: 100%; overflow: visible; }
.grid-lines line { stroke: #222a34; stroke-width: 1; stroke-dasharray: 3 4; }
.line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; transition: d .35s ease; }
.blue-line { stroke: var(--blue); }
.purple-line { stroke: var(--purple); }
.blue-area { fill: url(#blueArea); }
.purple-area { fill: url(#purpleArea); }
.x-axis { position: absolute; left: 43px; right: 0; bottom: 2px; display: flex; justify-content: space-between; color: #4f5d6e; font-size: 8px; }
.more-button { border: 0; background: transparent; color: #667386; cursor: pointer; }
.status-panel { display: flex; flex-direction: column; }
.donut-wrap { flex: 1; display: grid; place-items: center; padding: 14px 0; }
.donut { width: 132px; height: 132px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--green) 0 75%, var(--amber) 75% 92%, var(--red) 92% 100%); position: relative; transform: rotate(12deg); box-shadow: 0 0 28px rgba(34,197,94,.05); }
.donut::before { content: ""; position: absolute; inset: 18px; background: #111720; border-radius: 50%; }
.donut > div { position: relative; z-index: 1; text-align: center; transform: rotate(-12deg); }
.donut strong, .donut span { display: block; }
.donut strong { font-size: 25px; }
.donut span { color: #6c798a; font-size: 8px; margin-top: 2px; }
.status-list { display: grid; gap: 9px; }
.status-list > div { display: flex; justify-content: space-between; align-items: center; color: #8996a8; font-size: 10px; }
.status-list span { display: flex; align-items: center; }
.status-list strong { color: #dbe3ed; font-size: 11px; }
.status-list small { color: #596779; font-size: 8px; margin-left: 4px; }
.status-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; margin-right: 7px; }
.status-dot.online { background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,.4); }
.status-dot.warning { background: var(--amber); }
.status-dot.offline { background: var(--red); }

.routers-panel { padding: 0; margin-bottom: 15px; overflow: hidden; }
.routers-header { padding: 18px 20px 15px; align-items: center; }
.table-actions, .filter-group { display: flex; align-items: center; gap: 7px; }
.filter-group { padding: 3px; background: #0c1118; border: 1px solid #242d39; border-radius: 7px; }
.filter-button { border: 0; height: 27px; padding: 0 9px; border-radius: 5px; background: transparent; color: #697688; font-size: 9px; cursor: pointer; }
.filter-button span { color: #4d5969; margin-left: 4px; }
.filter-button.active { color: #d8e2ed; background: #222c39; }
.filter-button.active span { color: #8e9caf; }
.outline-button { height: 33px; padding: 0 11px; border: 1px solid #2a3441; border-radius: 7px; color: #96a3b5; background: transparent; font-size: 9px; cursor: pointer; }
.outline-button:hover { color: #d9e2ec; background: #18202a; }
.outline-button span { margin-left: 6px; }
.table-wrap { overflow-x: auto; border-top: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; min-width: min(920px, 100%); table-layout: fixed; }
th { padding: 10px 15px; text-align: left; color: #536072; background: #0c1118; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
td { height: 59px; padding: 9px 15px; border-top: 1px solid #1c242e; color: #8c99ab; font-size: 9px; }
th, td { overflow-wrap: anywhere; word-break: normal; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: #151c25; }
.device-cell { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.device-icon { width: 31px; height: 31px; border-radius: 8px; border: 1px solid #27313d; display: grid; place-items: center; color: #6d7b8d; background: #151c25; font-size: 13px; }
.device-cell strong, .device-cell small, .ip-cell strong, .ip-cell small { display: block; }
.device-cell strong, .ip-cell strong { color: #cbd5e1; font-size: 10px; }
.device-cell small, .ip-cell small { color: #526071; font-size: 8px; margin-top: 3px; }
.equipment-detail-link { display: inline-block; color: #cbd5e1; font-size: 10px; font-weight: 700; text-decoration: none; transition: color .18s; }
.equipment-detail-link:hover, .equipment-detail-link:focus-visible { color: #72a8f5; text-decoration: underline; text-underline-offset: 3px; outline: 0; }
.status-badge { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 12px; font-size: 8px; font-weight: 600; }
.status-badge.online { color: #72d993; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.16); }
.status-badge.warning { color: #f1b64e; background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.16); }
.status-badge.offline { color: #ef8181; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.16); }
.usage { display: flex; align-items: center; gap: 7px; }
.usage-bar { width: 48px; height: 3px; border-radius: 4px; background: #252d38; overflow: hidden; }
.usage-bar i { display: block; height: 100%; border-radius: 4px; background: #4b86e5; }
.usage.healthy .usage-bar i { background: var(--blue); }
.usage.warning .usage-bar i { background: var(--amber); }
.usage.critical .usage-bar i,
.usage.high .usage-bar i { background: var(--red); }
.usage.off .usage-bar i { background: #3a424d; }
.traffic-values strong, .traffic-values small { display: block; font-size: 8px; font-weight: 500; }
.traffic-values strong { color: #78aafa; }
.traffic-values small { color: #9c7ded; margin-top: 3px; }
.row-menu { border: 0; background: transparent; color: #596779; cursor: pointer; font-size: 14px; }
.empty-state { display: none; min-height: 150px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; color: #8d9aad; }
.empty-state span { color: #596779; font-size: 10px; }

.bottom-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 15px; }
.alert-list { margin-top: 13px; display: grid; gap: 2px; }
.alert-item { display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 10px; padding: 11px 6px; border-top: 1px solid #1d252f; }
.alert-symbol { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; font-size: 11px; }
.critical-alert .alert-symbol { color: #f18484; background: rgba(239,68,68,.1); }
.warning-alert .alert-symbol { color: #f1b752; background: rgba(245,158,11,.1); }
.alert-item strong { display: block; color: #cbd5e1; font-size: 10px; }
.alert-item p { margin-top: 4px; color: #657285; font-size: 8px; }
.alert-item time { color: #536072; font-size: 8px; }
.availability-score { color: #79d798; font-size: 16px; }
.availability-bars { height: 76px; display: flex; align-items: stretch; gap: 3px; margin: 26px 0 7px; }
.availability-bars i { flex: 1; min-width: 3px; border-radius: 2px; background: #245e3a; opacity: .8; }
.availability-bars i.warning { background: #92651e; }
.availability-bars i.offline { background: #8a3035; }
.availability-bars i.no-data { background: #26303c; opacity: .45; }
.availability-legend, .availability-footer { display: flex; justify-content: space-between; color: #4f5b6b; font-size: 8px; }
.availability-footer { margin-top: 16px; padding-top: 13px; border-top: 1px solid #1e2630; justify-content: flex-start; gap: 18px; color: #697688; }

.devices-view, .device-types-view, .device-detail-view, .client-view, .users-view, .reports-view, .alerts-view, .wallboard-view { display: none; }
body.devices-mode .overview-section { display: none; }
body.devices-mode .devices-view { display: block; }
body.users-mode .overview-section { display: none; }
body.users-mode .users-view { display: block; }
body.reports-mode .overview-section { display: none; }
body.reports-mode .reports-view { display: block; }
body.alerts-mode .overview-section { display: none; }
body.alerts-mode .alerts-view { display: block; }
body.device-types-mode .overview-section,
body.device-types-mode .devices-view,
body.device-types-mode .device-detail-view,
body.device-types-mode .client-view { display: none; }
body.device-types-mode .device-types-view { display: block; }
body.device-detail-mode .overview-section,
body.device-detail-mode .devices-view { display: none; }
body.device-detail-mode .device-detail-view { display: block; }
body.client-mode .overview-section,
body.client-mode .devices-view,
body.client-mode .device-detail-view { display: none; }
body.client-mode .client-view { display: block; }
body.wallboard-mode { overflow: auto; background: #05080d; }
body.wallboard-mode .sidebar,
body.wallboard-mode .topbar { display: none; }
body.wallboard-mode .main-content { margin-left: 0; }
body.wallboard-mode .dashboard { max-width: none; padding: 0; }
body.wallboard-mode .overview-section,
body.wallboard-mode .devices-view,
body.wallboard-mode .device-types-view,
body.wallboard-mode .device-detail-view,
body.wallboard-mode .client-view,
body.wallboard-mode .users-view,
body.wallboard-mode .reports-view,
body.wallboard-mode .alerts-view { display: none; }
body.wallboard-mode .wallboard-view { display: grid; }
body.wallboard-mode:not(.wallboard-fullscreen) .wallboard-view {
  width: 100%;
  height: auto;
  min-height: 100vh;
  grid-template-rows: auto auto minmax(500px, 58vh) minmax(190px, auto) auto;
}
body.wallboard-fullscreen { overflow: hidden; }
body.wallboard-fullscreen .wallboard-view { width: 100vw; height: 100vh; }
.devices-heading { align-items: center; }
.primary-button, .secondary-button, .test-button {
  min-height: 38px; padding: 0 15px; border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 650;
}
.primary-button { border: 1px solid #397ce7; background: linear-gradient(180deg, #438cf7, #286bd2); color: white; box-shadow: 0 7px 20px rgba(39,107,210,.18); }
.primary-button:hover { background: linear-gradient(180deg, #5296fa, #3275dc); }
.primary-button span { margin-right: 6px; }
.secondary-button { border: 1px solid #2a3441; background: #121821; color: #9aa7b8; }
.test-button { border: 1px solid #31527e; background: #121d2d; color: #82b1f7; }
.device-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-bottom: 15px; }
.device-summary-card { min-height: 92px; padding: 18px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(145deg, rgba(19,25,34,.96), rgba(13,18,25,.98)); }
.device-summary-card span, .device-summary-card strong { display: block; }
.device-summary-card span { color: #758296; font-size: 10px; }
.device-summary-card strong { margin-top: 5px; font-size: 22px; letter-spacing: -.5px; }
.device-register-panel { padding: 0; overflow: hidden; }
.device-toolbar { min-height: 76px; padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.device-toolbar h2 { font-size: 13px; }
.device-toolbar p { margin-top: 5px; color: var(--muted); font-size: 9px; }
.device-search { width: min(330px, 40vw); position: relative; }
.device-search span { position: absolute; left: 12px; top: 8px; color: #647184; font-size: 18px; transform: rotate(-20deg); }
.device-search input { width: 100%; height: 36px; padding: 0 12px 0 37px; color: #dce4ef; outline: 0; background: #0b1017; border: 1px solid #242d39; border-radius: 7px; font-size: 10px; }
.device-search input:focus { border-color: #34598b; }
.device-register-table { min-width: min(850px, 100%); }
.connection-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 5px; background: #17202c; color: #8fa1b7; font-size: 8px; text-transform: uppercase; }
.connection-badge i { width: 5px; height: 5px; border-radius: 50%; background: #4e8fea; }
.enabled-badge, .disabled-badge { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 11px; font-size: 8px; }
.enabled-badge { color: #72d993; background: rgba(34,197,94,.08); }
.disabled-badge { color: #8793a3; background: rgba(100,116,139,.1); }
.device-interval { display: block; margin-top: 5px; color: #4f5d6f; font-size: 7px; }
.device-actions { display: flex; gap: 5px; }
.action-button { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #27313e; border-radius: 6px; background: #141b24; color: #7f8da0; cursor: pointer; font-size: 11px; }
.action-button:hover { color: #cbd5e1; border-color: #3a4758; }
.action-button.delete:hover { color: #ef8181; border-color: #63363a; background: #241619; }
.device-register-table tbody tr { cursor: pointer; }
.device-register-table tbody tr:focus { outline: 1px solid #3b70b7; outline-offset: -1px; background: #151c25; }
.device-filter-panel { margin-top: 15px; padding: 17px 20px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.device-filter-panel > div:first-child { min-width: 190px; }
.device-filter-panel strong, .device-filter-panel span { display: block; }
.device-filter-panel strong { font-size: 13px; }
.device-filter-panel > div:first-child span { margin-top: 5px; color: var(--muted); font-size: 10px; }
.checkbox-filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.checkbox-filter-group label { position: relative; cursor: pointer; }
.checkbox-filter-group input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox-filter-group label span { padding: 7px 10px; border: 1px solid #293542; border-radius: 7px; color: #78879a; background: #111821; font-size: 10px; transition: .2s; }
.checkbox-filter-group input:checked + span { color: #b9d4fb; border-color: #315b90; background: rgba(59,130,246,.1); box-shadow: inset 0 0 0 1px rgba(59,130,246,.08); }
.status-checkboxes { margin-left: auto; }
.type-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--type-color) 40%, #26313e); border-radius: 6px; color: color-mix(in srgb, var(--type-color) 75%, white); background: color-mix(in srgb, var(--type-color) 10%, #111821); font-size: 10px; white-space: nowrap; }
.device-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.device-type-card { min-height: 230px; padding: 20px; position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 11px; background: linear-gradient(145deg, #131a23, #0d1219); }
.device-type-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -70px; top: -70px; border-radius: 50%; background: var(--type-color); opacity: .08; }
.device-type-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.device-type-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--type-color) 42%, #25303c); border-radius: 10px; color: var(--type-color); background: color-mix(in srgb, var(--type-color) 10%, #111821); font-size: 21px; }
.device-type-actions { display: flex; gap: 6px; position: relative; z-index: 1; }
.device-type-card h2 { margin-top: 17px; font-size: 17px; }
.device-type-card > p { min-height: 34px; margin-top: 7px; color: #667487; font-size: 11px; line-height: 1.5; }
.device-type-meta { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.device-type-meta div { padding: 10px; border: 1px solid #202a35; border-radius: 7px; background: #0d131a; }
.device-type-meta span, .device-type-meta strong { display: block; }
.device-type-meta span { color: #566476; font-size: 8px; text-transform: uppercase; letter-spacing: .5px; }
.device-type-meta strong { margin-top: 5px; color: #a9b5c4; font-size: 10px; }
.device-type-count { margin-top: 13px; color: #617086; font-size: 10px; }
.protocol-field.is-hidden { display: none; }
.type-modal { width: min(650px, 100%); }
.type-modal form { padding-top: 22px; }
.form-field input[type="color"] { padding: 5px; cursor: pointer; }
.category-bars { padding: 18px; display: grid; gap: 13px; }
.category-bar-row { display: grid; grid-template-columns: 140px 1fr 55px; align-items: center; gap: 12px; }
.category-bar-row > span { color: #aab6c5; font-size: 10px; }
.category-bar-row > strong { color: #cbd5e1; font-size: 10px; text-align: right; }
.category-bar { height: 8px; overflow: hidden; border-radius: 8px; background: #232d38; }
.category-bar i { display: block; height: 100%; border-radius: 8px; background: var(--bar-color, var(--blue)); }
.asset-list { padding: 6px 18px 14px; }
.asset-row { min-height: 54px; display: grid; grid-template-columns: 1.2fr .8fr .7fr .7fr; align-items: center; gap: 12px; border-bottom: 1px solid #1d2630; }
.asset-row:last-child { border-bottom: 0; }
.asset-row strong, .asset-row small { display: block; }
.asset-row strong { color: #c4ceda; font-size: 10px; }
.asset-row small { margin-top: 4px; color: #566476; font-size: 8px; }
.vmware-vm-list { padding: 10px 18px 18px; overflow: visible; }
.vmware-vm-grid { width: 100%; min-width: 0; border: 1px solid #1d2a38; border-radius: 12px; overflow: hidden; background: rgba(8,13,20,.36); }
.vmware-vm-head, .vmware-vm-row { display: grid; grid-template-columns: minmax(150px, 1.18fr) minmax(170px, 1.22fr) minmax(72px, .55fr) minmax(58px, .42fr) minmax(115px, .82fr) minmax(128px, .9fr) minmax(128px, .9fr) minmax(42px, .32fr); gap: 10px; align-items: center; }
.vmware-vm-head { padding: 11px 14px; color: #6da2f8; background: rgba(59,130,246,.08); border-bottom: 1px solid #223044; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 800; }
.vmware-vm-sort { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; display: flex; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; padding: 0; cursor: pointer; text-align: left; }
.vmware-vm-sort span { display: inline-block; color: #93b4e7; font-size: 10px; line-height: 1; opacity: .7; }
.vmware-vm-sort:hover, .vmware-vm-sort.active { color: #dbeafe; }
.vmware-vm-sort.active span { color: #60a5fa; opacity: 1; }
.vmware-vm-row { min-height: 58px; padding: 11px 14px; border-bottom: 1px solid #1b2633; }
.vmware-vm-row:last-child { border-bottom: 0; }
.vmware-vm-row strong, .vmware-vm-row span, .vmware-vm-row small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: normal; overflow-wrap: anywhere; }
.vmware-vm-row strong { color: #e5edf7; font-size: 13px; }
.vmware-vm-row span { color: #9bb7d9; font-size: 12px; }
.vmware-vm-row small { color: #7f95b1; font-size: 12px; }
.vmware-vm-row mark { display: inline-flex; min-width: 72px; justify-content: center; padding: 5px 8px; border-radius: 999px; border: 1px solid #25374b; background: rgba(148,163,184,.1); color: #cbd5e1; font-size: 11px; font-weight: 800; }
.vmware-vm-row mark.online { border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.12); color: #86efac; }
.vmware-vm-row mark.offline { border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.12); color: #fca5a5; }
.vmware-vm-row mark.warning { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12); color: #fcd34d; }
.vmware-vm-meter { display: grid; gap: 5px; min-width: 0; }
.vmware-vm-meter > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.vmware-vm-meter strong { font-size: 12px; color: #dbeafe; }
.vmware-vm-meter small { font-size: 9px; color: #7890ae; }
.vmware-vm-meter > span { height: 6px; border-radius: 999px; background: #1d2632; overflow: hidden; }
.vmware-vm-meter i { display: block; height: 100%; border-radius: inherit; background: #3b82f6; }
.vmware-vm-meter.healthy i,
.vmware-vm-meter.cpu.healthy i,
.vmware-vm-meter.memory.healthy i,
.vmware-vm-meter.storage.healthy i { background: #3b82f6; }
.vmware-vm-meter.warning i,
.vmware-vm-meter.cpu.warning i,
.vmware-vm-meter.memory.warning i,
.vmware-vm-meter.storage.warning i { background: var(--amber); }
.vmware-vm-meter.critical i,
.vmware-vm-meter.cpu.critical i,
.vmware-vm-meter.memory.critical i,
.vmware-vm-meter.storage.critical i { background: var(--red); }
.vmware-vm-meter.unknown i,
.vmware-vm-meter.storage.unknown i { background: #64748b; }
.vmware-vm-meter.warning strong { color: #fcd34d; }
.vmware-vm-meter.critical strong { color: #fca5a5; }
.vmware-vm-meter.unknown strong { color: #cbd5e1; }
.vmware-vm-open { padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; font: inherit; }
.vmware-vm-open strong, .vmware-vm-open small { display: block; }
.vmware-vm-open strong { color: #e8eef8; }
.vmware-vm-open small { margin-top: 4px; color: #7c8ea4; }
.vmware-vm-open:hover strong { color: #7db0ff; }
.vmware-vm-open:focus-visible { outline: 2px solid #6ea8ff; outline-offset: 3px; border-radius: 6px; }
.vm-observability { margin-top: 18px; display: grid; gap: 14px; }
.vm-observability-heading { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #233144; border-radius: 12px; background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(139,92,246,.035)); }
.vm-observability-heading span, .vm-section-title span, .vm-card-title > div > span { color: #6da2f8; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.vm-observability-heading h2 { margin-top: 5px; color: #e7eef8; font-size: 22px; }
.vm-observability-heading p { margin-top: 5px; color: #7d8da3; font-size: 13px; }
.vm-period-switcher { padding: 4px; display: flex; gap: 4px; border: 1px solid #29384b; border-radius: 9px; background: #0a1119; }
.vm-period-switcher button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 6px; color: #7f91a8; background: transparent; cursor: pointer; font-size: 12px; }
.vm-period-switcher button.active { color: #dbeafe; background: #17345b; }
.vm-operational-loading, .vm-operational-error { min-height: 220px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; border: 1px solid #233144; border-radius: 12px; color: #83aef0; background: #0e151e; }
.vm-operational-loading span { font-size: 25px; animation: spin 1s linear infinite; }
.vm-operational-error { color: #fca5a5; }
.vm-operational-error span { color: #8795a8; }
.vm-operational-content { display: grid; gap: 14px; }
.vm-operational-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vm-operational-summary > article { padding: 18px; min-width: 0; }
.vm-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.vm-card-title h3, .vm-section-title h3 { margin-top: 5px; color: #dfe8f3; font-size: 17px; }
.vm-card-title mark { padding: 6px 9px; border-radius: 999px; color: #93c5fd; background: rgba(59,130,246,.11); font-size: 11px; font-weight: 800; }
.vm-health-card.excellent { border-color: rgba(34,197,94,.34); }
.vm-health-card.excellent .vm-card-title mark { color: #86efac; background: rgba(34,197,94,.11); }
.vm-health-card.light-warning { border-color: rgba(59,130,246,.32); }
.vm-health-card.warning { border-color: rgba(245,158,11,.36); }
.vm-health-card.warning .vm-card-title mark { color: #fcd34d; background: rgba(245,158,11,.11); }
.vm-health-card.critical { border-color: rgba(239,68,68,.4); }
.vm-health-card.critical .vm-card-title mark, .vm-card-title mark.critical { color: #fca5a5; background: rgba(239,68,68,.11); }
.vm-health-score { margin: 18px 0; display: flex; align-items: center; gap: 18px; }
.vm-health-score > strong { color: #f1f5f9; font-size: 42px; line-height: 1; }
.vm-health-ring { width: 72px; height: 72px; border-radius: 50%; background: conic-gradient(#22c55e var(--score), #202b38 0); position: relative; }
.vm-health-ring::after { content: ""; position: absolute; inset: 10px; border-radius: inherit; background: #101720; }
.vm-health-factors { display: flex; flex-wrap: wrap; gap: 7px; }
.vm-health-factors span { padding: 6px 8px; border: 1px solid #293747; border-radius: 7px; color: #9cacbf; background: #0c131c; font-size: 11px; }
.vm-stale-note { margin-top: 12px; color: #f0bd65; font-size: 12px; }
.vm-forecast-grid, .vm-backup-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.vm-forecast-grid > div, .vm-backup-grid > div { padding: 10px 11px; border: 1px solid #253243; border-radius: 8px; background: #0c131b; }
.vm-forecast-grid span, .vm-backup-grid span { display: block; color: #708198; font-size: 11px; }
.vm-forecast-grid strong, .vm-backup-grid strong { display: block; margin-top: 5px; color: #d5dfeb; font-size: 13px; overflow-wrap: anywhere; }
.vm-forecast-result { margin-top: 11px; padding: 12px; border: 1px solid #2b3d53; border-radius: 8px; background: rgba(59,130,246,.045); }
.vm-forecast-result strong, .vm-forecast-result span { display: block; }
.vm-forecast-result strong { color: #9fc5fa; font-size: 13px; }
.vm-forecast-result span { margin-top: 4px; color: #718196; font-size: 11px; }
.vm-backup-card > small { display: block; margin-top: 12px; color: #617187; }
.vm-alert-counts { margin-top: 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.vm-alert-counts > div { padding: 11px 8px; border: 1px solid #293747; border-radius: 8px; text-align: center; background: #0c131b; }
.vm-alert-counts span, .vm-alert-counts strong { display: block; }
.vm-alert-counts span { color: #708198; font-size: 10px; }
.vm-alert-counts strong { margin-top: 6px; color: #d9e3ef; font-size: 20px; }
.vm-alert-counts .critical strong { color: #f87171; }
.vm-alert-counts .warning strong { color: #fbbf24; }
.vm-alert-counts .info strong { color: #60a5fa; }
.vm-alert-counts .ignored strong { color: #a78bfa; }
.vm-alert-counts .resolved strong { color: #4ade80; }
.vm-alert-actions { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 8px; }
.vm-alert-actions button { min-height: 34px; padding: 0 11px; border: 1px solid #304258; border-radius: 7px; color: #9fc3f4; background: #0d1723; cursor: pointer; font-size: 11px; }
.vm-section-title { padding: 17px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.vm-section-title small { color: #718197; font-size: 11px; }
.vm-history-section, .vm-timeline-card { border: 1px solid #233144; border-radius: 12px; background: #0e151e; overflow: hidden; }
.vm-history-grid { padding: 0 14px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vm-history-chart { padding: 14px; }
.vm-chart-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vm-chart-header span, .vm-chart-header strong { display: block; }
.vm-chart-header span { color: #7e91aa; font-size: 11px; }
.vm-chart-header strong { margin-top: 5px; color: #e4edf7; font-size: 18px; }
.vm-chart-header small { color: #60748e; font-size: 10px; }
.vm-history-chart svg { width: 100%; height: 130px; margin-top: 12px; overflow: visible; }
.vm-history-chart svg line { stroke: #1e2c3d; stroke-dasharray: 3 5; }
.vm-chart-area { fill: rgba(59,130,246,.09); }
.vm-chart-line { fill: none; stroke: #4d91ff; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.vm-no-history { min-height: 110px; display: grid; place-items: center; padding: 20px; color: #718197; text-align: center; font-size: 12px; }
.vm-no-data-inline { padding: 18px; color: #718197; text-align: center; font-size: 12px; }
.vm-timeline { max-height: 480px; padding: 0 18px 18px; overflow-y: auto; }
.vm-timeline article { position: relative; min-height: 76px; padding: 12px 10px 12px 132px; border-left: 1px solid #2b405a; }
.vm-timeline article > i { position: absolute; left: -6px; top: 20px; width: 11px; height: 11px; border: 2px solid #0e151e; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 0 2px #2b405a; }
.vm-timeline article.critical > i { background: #ef4444; }
.vm-timeline article.warning > i { background: #f59e0b; }
.vm-timeline article.success > i { background: #22c55e; }
.vm-timeline time { position: absolute; left: 15px; top: 18px; width: 100px; color: #708198; font-size: 10px; }
.vm-timeline strong { color: #d8e3ef; font-size: 13px; }
.vm-timeline p { margin: 5px 0; color: #8999ad; font-size: 12px; line-height: 1.45; }
.vm-timeline small { color: #60738d; font-size: 10px; }
.vm-operational-modal { width: min(1380px, calc(100vw - 40px)); max-height: min(92vh, 1100px); }
.vm-operational-modal-body { padding: 0 20px 20px; display: grid; gap: 14px; overflow-y: auto; }
.vm-operational-modal-body .vm-period-switcher { justify-self: flex-end; }
.empty-state { padding: 18px; color: #7f95b1; font-size: 13px; }

.users-heading { align-items: center; }
.user-register-panel { padding: 0; overflow: hidden; }
.user-register-table { min-width: min(760px, 100%); }
.user-identity { display: flex; align-items: center; gap: 10px; }
.user-identity .avatar { flex: 0 0 auto; }
.user-identity strong, .user-identity small { display: block; }
.user-identity strong { color: #cbd5e1; font-size: 13px; }
.user-identity small { margin-top: 4px; color: #59677a; font-size: 10px; }
.role-badge { display: inline-flex; padding: 5px 8px; border: 1px solid #33445a; border-radius: 6px; color: #8eb4e9; background: rgba(59,130,246,.08); font-size: 10px; }
.role-badge.admin { color: #b89cf7; border-color: #574283; background: rgba(139,92,246,.08); }
.role-badge.viewer { color: #9da9b8; border-color: #38424e; background: #151b23; }

.login-screen { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; overflow-y: auto; padding: clamp(18px, 4vw, 44px); background: radial-gradient(circle at 12% 8%, rgba(59,130,246,.16), transparent 32%), radial-gradient(circle at 88% 92%, rgba(34,197,94,.07), transparent 28%), linear-gradient(145deg, #070a0f, #0a1018 55%, #070b11); }
body.auth-locked .login-screen { display: grid; }
body.auth-locked .app-shell { display: none; }
.login-card { position: relative; width: min(460px, 100%); padding: clamp(25px, 5vw, 36px); overflow: hidden; border: 1px solid #2a3748; border-radius: 20px; background: linear-gradient(150deg, rgba(19,27,38,.99), rgba(9,14,21,.99)); box-shadow: 0 35px 100px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.015) inset; }
.login-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #3b82f6, #60a5fa 52%, #22c55e); }
.login-brand { display: flex; align-items: center; gap: 14px; padding-bottom: 24px; border-bottom: 1px solid #253141; }
.login-brand-logo { width: 52px; height: 52px; flex: 0 0 auto; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { font-size: clamp(17px, 4vw, 20px); line-height: 1.25; }
.login-brand small { margin-top: 4px; color: #5e6c7e; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.login-heading { padding: 27px 0 22px; }
.login-heading > span { color: #6ea5f5; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.login-heading h1 { margin-top: 8px; font-size: clamp(26px, 7vw, 31px); line-height: 1.15; }
.login-heading p { margin-top: 9px; color: #8090a5; font-size: 12px; line-height: 1.55; }
.login-environment { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 11px 12px; border: 1px solid #263547; border-radius: 10px; background: rgba(10,17,25,.72); }
.login-environment-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 5px rgba(34,197,94,.09), 0 0 14px rgba(34,197,94,.45); }
.login-environment strong, .login-environment small { display: block; }
.login-environment strong { color: #cbd5e1; font-size: 11px; }
.login-environment small { margin-top: 3px; color: #66768a; font-size: 10px; }
.login-field { display: block; margin-bottom: 15px; }
.login-field > span { display: block; margin-bottom: 7px; color: #9aa7b8; font-size: 12px; font-weight: 650; }
.login-field input { width: 100%; height: 46px; padding: 0 13px; outline: 0; border: 1px solid #2a3644; border-radius: 8px; color: #e1e8f0; background: #0a1017; font-size: 13px; }
.login-field input:focus { border-color: #3b70b7; box-shadow: 0 0 0 3px rgba(59,130,246,.09); }
.login-password { position: relative; }
.login-password input { padding-right: 73px; }
.login-password button { position: absolute; right: 6px; top: 6px; height: 34px; padding: 0 9px; border: 0; border-radius: 6px; color: #8193aa; background: #18222e; cursor: pointer; font-size: 10px; }
.login-error { display: none; margin: -3px 0 13px; color: #ed7c83; font-size: 11px; }
.login-error.visible { display: block; }
.login-submit { width: 100%; height: 48px; border: 1px solid #397ce7; border-radius: 9px; color: white; background: linear-gradient(180deg, #438cf7, #286bd2); box-shadow: 0 10px 28px rgba(37,99,235,.2); cursor: pointer; font-size: 14px; font-weight: 750; transition: transform .18s ease, filter .18s ease; }
.login-submit:hover { filter: brightness(1.07); transform: translateY(-1px); }
.login-submit:active { transform: translateY(0); }
.login-support { margin: 18px 4px 0; color: #59697d; font-size: 10px; line-height: 1.5; text-align: center; }

@media (max-width: 520px) {
  .login-screen { place-items: start center; padding: 14px; }
  .login-card { margin: auto 0; padding: 24px 20px; border-radius: 16px; }
  .login-brand { padding-bottom: 20px; }
  .login-heading { padding: 22px 0 18px; }
  .login-environment { margin-top: 14px; }
  .login-field { margin-bottom: 13px; }
}

.alerts-heading { align-items: center; }
.alert-heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.danger-outline-button { min-height: 38px; padding: 0 15px; border: 1px solid #71363c; border-radius: 8px; color: #ef8a90; background: rgba(239,68,68,.06); cursor: pointer; font-size: 11px; font-weight: 700; }
.danger-outline-button:hover { border-color: #a44850; background: rgba(239,68,68,.11); }
.danger-outline-button:disabled { opacity: .45; cursor: default; }
.alert-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 15px; }
.alert-summary-card { min-height: 112px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; color: inherit; background: linear-gradient(145deg, #131a23, #0d1219); cursor: pointer; text-align: left; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease; }
.alert-summary-card:hover { transform: translateY(-2px); border-color: #3a495b; }
.alert-summary-card:focus-visible { outline: 2px solid #6ea8ff; outline-offset: 2px; }
.alert-summary-card.active { box-shadow: inset 0 0 0 1px currentColor, 0 10px 28px rgba(0,0,0,.18); }
.alert-summary-card.critical.active { border-color: #a94d54; background: linear-gradient(145deg, rgba(239,68,68,.13), #0d1219); }
.alert-summary-card.warning.active { border-color: #9a6a28; background: linear-gradient(145deg, rgba(245,158,11,.13), #0d1219); }
.alert-summary-card.info.active { border-color: #376eae; background: linear-gradient(145deg, rgba(59,130,246,.13), #0d1219); }
.alert-summary-card.total.active { border-color: #65519b; background: linear-gradient(145deg, rgba(139,92,246,.13), #0d1219); }
.alert-summary-card span, .alert-summary-card strong, .alert-summary-card small { display: block; }
.alert-summary-card span { color: #748296; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.alert-summary-card strong { margin-top: 10px; font-size: 26px; }
.alert-summary-card small { margin-top: 6px; color: #536174; font-size: 9px; }
.alert-summary-card.critical strong { color: #ef8188; }
.alert-summary-card.warning strong { color: #e9b359; }
.alert-summary-card.info strong { color: #75a9f4; }
.alert-summary-card.total strong { color: #b29af5; }
.alert-center-panel { padding: 0; overflow: hidden; }
.alert-center-toolbar { min-height: 82px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #202936; }
.alert-center-toolbar h2 { font-size: 15px; }
.alert-center-toolbar p { margin-top: 5px; color: #627084; font-size: 10px; }
.alert-center-controls { display: flex; align-items: center; gap: 9px; }
.alert-center-controls select { height: 36px; min-width: 165px; padding: 0 31px 0 11px; border: 1px solid #293441; border-radius: 7px; outline: 0; color: #9daabc; background: #0b1017; font-size: 10px; }
.alert-center-list { display: grid; }
.alert-center-row { min-height: 92px; padding: 17px 20px; display: grid; grid-template-columns: 26px 42px minmax(260px, 1.4fr) minmax(150px, .7fr) 120px 38px; align-items: center; gap: 15px; border-bottom: 1px solid #202936; cursor: pointer; transition: background .18s ease; }
.alert-center-row:hover { background: rgba(59,130,246,.045); }
.alert-center-row.selected { background: rgba(59,130,246,.075); box-shadow: inset 3px 0 #4d8df7; }
.alert-center-row:focus-visible { outline: 2px solid #477ec6; outline-offset: -2px; }
.alert-center-row:last-child { border-bottom: 0; }
.alert-severity-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; font-size: 15px; font-weight: 800; }
.alert-center-row.critical .alert-severity-icon { color: #ef8188; background: rgba(239,68,68,.1); }
.alert-center-row.warning .alert-severity-icon { color: #e9b359; background: rgba(245,158,11,.1); }
.alert-center-row.info .alert-severity-icon { color: #75a9f4; background: rgba(59,130,246,.1); }
.alert-center-message strong, .alert-center-message span, .alert-device-data strong, .alert-device-data span { display: block; }
.alert-center-message strong { color: #d1dae5; font-size: 13px; }
.alert-center-message span { margin-top: 6px; color: #657387; font-size: 10px; line-height: 1.45; }
.alert-metric-line { display: block; margin-top: 6px; color: #7fb1f8; font-size: 9px; line-height: 1.35; }
.alert-device-data strong { color: #9eacbd; font-size: 11px; }
.alert-item[data-alert-id] { cursor: pointer; }
.alert-item[data-alert-id]:hover { background: rgba(59,130,246,.045); }
.alert-device-data span { margin-top: 5px; color: #536175; font-size: 9px; }
.alert-time { color: #637186; font-size: 10px; }
.delete-alert-button { width: 34px; height: 34px; border: 1px solid #513037; border-radius: 7px; color: #db747b; background: rgba(239,68,68,.05); cursor: pointer; font-size: 15px; }
.delete-alert-button:hover { border-color: #8b4148; color: #ff9ba1; background: rgba(239,68,68,.1); }
.alert-center-row.suppressed { grid-template-columns: 26px 42px minmax(280px, 1.4fr) minmax(160px, .7fr) 130px 92px; cursor: default; }
.alert-center-row.suppressed.active-suppression { box-shadow: inset 3px 0 #8b5cf6; background: rgba(139,92,246,.035); }
.alert-center-row.suppressed.expired-suppression { opacity: .72; }
.alert-suppression-state { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: #c4b5fd; background: rgba(139,92,246,.12); font-size: 13px; }
.reactivate-alert-button { min-height: 34px; padding: 0 12px; border: 1px solid #315f48; border-radius: 7px; color: #86efac; background: rgba(34,197,94,.07); cursor: pointer; font-size: 12px; font-weight: 700; }
.reactivate-alert-button:hover { border-color: #3d8b62; background: rgba(34,197,94,.12); }
.reactivate-alert-button:disabled { opacity: .45; cursor: not-allowed; }
.alert-select-control { width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer; }
.alert-select-control input { position: absolute; opacity: 0; pointer-events: none; }
.alert-select-control span { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid #3b485a; border-radius: 5px; background: #0b1118; transition: .18s ease; }
.alert-select-control input:checked + span { border-color: #4d8df7; background: #397be0; }
.alert-select-control input:checked + span::after { content: "✓"; color: white; font-size: 11px; font-weight: 800; }
.alert-select-control input:focus-visible + span { outline: 2px solid #6ea8ff; outline-offset: 2px; }
.alerts-empty-state { min-height: 330px; display: none; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.alerts-empty-state div { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #75d394; background: rgba(34,197,94,.09); font-size: 20px; }
.alerts-empty-state strong { margin-top: 14px; font-size: 16px; }
.alerts-empty-state span { margin-top: 7px; color: #5c6a7d; font-size: 10px; }

.client-heading { align-items: center; }
.client-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 15px; }
.client-form-panel, .client-preview-panel { padding: 0; overflow: hidden; }
.client-panel-header { padding: 19px 21px; border-bottom: 1px solid #202936; }
.client-panel-header h2 { font-size: 17px; }
.client-panel-header p { margin-top: 5px; color: var(--muted); font-size: 12px; }
.client-form-panel form { padding: 22px; }
.client-logo-field { margin-top: 18px; }
.client-logo-field > span { display: block; margin-bottom: 8px; color: #8794a6; font-size: 12px; font-weight: 600; }
.logo-dropzone { min-height: 150px; padding: 24px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px dashed #334255; border-radius: 10px; background: #0b1118; cursor: pointer; transition: .2s; }
.logo-dropzone:hover { border-color: #4a76ad; background: #0e1722; }
.logo-dropzone input { position: absolute; opacity: 0; pointer-events: none; }
.logo-upload-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; color: #79a9ef; background: rgba(59,130,246,.1); font-size: 19px; }
.logo-dropzone strong { margin-top: 12px; font-size: 14px; }
.logo-dropzone small { margin-top: 6px; color: #586679; font-size: 10px; }
.client-form-actions { margin-top: 20px; padding-top: 18px; display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid #202936; }
.client-preview { min-height: 340px; padding: 35px 25px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; background: radial-gradient(circle at 50% 20%, rgba(59,130,246,.08), transparent 45%); }
.client-logo-preview { width: min(260px, 100%); height: 132px; display: grid; place-items: center; overflow: hidden; border: 1px solid #2a3747; border-radius: 14px; color: #8db6f1; background: #121b26; font-size: 28px; font-weight: 750; }
.client-logo-preview img { display: none; width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.client-logo-preview.has-logo img { display: block; }
.client-logo-preview.has-logo span { display: none; }
.client-logo-preview.logo-needs-contrast { color: #24364a; }
.client-preview > strong { margin-top: 18px; font-size: 23px; }
.client-preview > small { margin-top: 5px; color: #5c6a7d; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.client-preview-status { margin-top: 22px; padding: 7px 10px; border: 1px solid #24422f; border-radius: 14px; color: #78ce93; background: rgba(34,197,94,.06); font-size: 11px; }
.client-preview-status i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--green); }

.detail-back { margin-bottom: 17px; padding: 0; border: 0; color: #7f8da0; background: transparent; cursor: pointer; font-size: 10px; }
.detail-back:hover { color: #cbd5e1; }
.detail-back span { margin-right: 7px; }
.detail-hero { padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--border); border-radius: 11px; background: radial-gradient(circle at 85% 0, rgba(59,130,246,.09), transparent 35%), linear-gradient(145deg, #131a23, #0d1219); }
.detail-identity { display: flex; align-items: center; gap: 16px; }
.detail-device-icon { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid #2b3b4f; border-radius: 13px; color: #77a9f2; background: #151f2c; font-size: 25px; }
.detail-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-title-row h1 { font-size: 24px; }
.detail-identity p { margin-top: 6px; color: #788699; font-size: 10px; }
.detail-tags { margin-top: 9px; display: flex; gap: 7px; flex-wrap: wrap; }
.detail-tag { padding: 4px 7px; border: 1px solid #293544; border-radius: 5px; color: #7f8da0; background: #111821; font-size: 8px; }
.detail-actions { display: flex; gap: 8px; }
.detail-updated { margin-top: 10px; color: #536173; font-size: 8px; text-align: right; }
.detail-kpis { margin: 15px 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.detail-kpi { padding: 14px; min-height: 86px; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: linear-gradient(145deg, #121922, #0d1219); }
.detail-kpi > span { color: #687689; font-size: 8px; text-transform: uppercase; letter-spacing: .5px; }
.detail-kpi strong { display: block; max-width: 100%; margin-top: 9px; font-size: 18px; letter-spacing: -.4px; overflow-wrap: anywhere; }
.detail-kpi small { display: block; margin-top: 5px; color: #546173; font-size: 8px; overflow-wrap: anywhere; }

.layout-windows-server .detail-hero { border-top-color: #06b6d4 !important; }
.layout-windows-workstation .detail-hero { border-top-color: #3b82f6 !important; }
.layout-windows-server .detail-device-icon,
.layout-windows-workstation .detail-device-icon { background: rgba(6, 182, 212, .08); }
.layout-windows-server .category-bar i,
.layout-windows-workstation .category-bar i { background: var(--bar-color, #06b6d4); }
.layout-switch .detail-hero { border-top-color: #14b8a6 !important; }
.layout-switch .detail-device-icon { color: #5eead4 !important; background: rgba(20,184,166,.09); border-color: rgba(45,212,191,.25); }
.layout-switch .detail-kpi { background: linear-gradient(145deg, rgba(20,184,166,.035), rgba(14,20,29,.98)); }
.layout-switch .asset-row { grid-template-columns: 1.2fr .8fr .75fr 1.35fr; min-height: 68px; }
.layout-switch .category-bar i { background: var(--bar-color, #14b8a6); }

.windows-diagnostic { margin-top: 16px; border: 1px solid #27415d; border-radius: 12px; background: #0c131c; overflow: hidden; }
.windows-diagnostic-header { display: flex; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.windows-diagnostic-header div { display: grid; gap: 5px; }
.windows-diagnostic-header div span { color: #60a5fa; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.windows-diagnostic-header > span { align-self: center; padding: 6px 10px; border-radius: 999px; background: #172334; color: #9cc5f5; font-size: 11px; }
.windows-diagnostic-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 15px 18px; }
.windows-diagnostic-steps article { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; padding: 11px; border: 1px solid var(--border); border-radius: 9px; }
.windows-diagnostic-steps article i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #172334; font-style: normal; }
.windows-diagnostic-steps article div { display: grid; gap: 3px; min-width: 0; }
.windows-diagnostic-steps article small { color: #72839a; overflow-wrap: anywhere; }
.windows-diagnostic-steps article > span { font-size: 10px; font-weight: 800; color: #8191a8; }
.windows-diagnostic-steps article.success { border-color: #174f39; }
.windows-diagnostic-steps article.success i, .windows-diagnostic-steps article.success > span { color: #4ade80; }
.windows-diagnostic-steps article.failed { border-color: #663039; background: rgba(127, 29, 29, .08); }
.windows-diagnostic-steps article.failed i, .windows-diagnostic-steps article.failed > span { color: #fb7185; }
.windows-diagnostic-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 18px 15px; }
.windows-diagnostic-summary > div { padding: 13px; border: 1px solid var(--border); border-radius: 9px; }
.windows-diagnostic-summary ul { margin: 9px 0 0 18px; padding: 0; color: #8294ab; }
.windows-diagnostic-summary p { margin: 9px 0 0; color: #9bb0c9; }
.windows-diagnostic-commands { display: grid; gap: 7px; margin: 0 18px 15px; padding: 13px; border-radius: 9px; background: #070c12; }
.windows-diagnostic-commands code { color: #a7c7ef; white-space: pre-wrap; overflow-wrap: anywhere; }
.windows-diagnostic-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 18px 16px; }
@media (max-width: 760px) {
  .windows-diagnostic-steps, .windows-diagnostic-summary { grid-template-columns: 1fr; }
}
.detail-progress { height: 3px; margin-top: 9px; overflow: hidden; border-radius: 3px; background: #252e3a; }
.detail-progress i { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
.detail-progress.warning i { background: var(--amber); }
.detail-progress.critical i { background: var(--red); }
.detail-progress.healthy i { background: var(--blue); }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .75fr); gap: 15px; align-items: start; }
.detail-main, .detail-side { display: grid; gap: 15px; }
.detail-layout.vmware-detail-layout { grid-template-columns: minmax(0, 1fr); }
.detail-layout.vmware-detail-layout .detail-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-panel { padding: 0; overflow: hidden; }
.detail-panel-header { min-height: 58px; padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #202936; }
.detail-panel-header h2 { font-size: 12px; }
.detail-panel-header p { margin-top: 4px; color: #617084; font-size: 8px; }
.detail-panel-header > span { color: #586678; font-size: 8px; }
.router-update-inline-alert { margin: 14px 18px 0; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; border: 1px solid rgba(245,158,11,.45); border-radius: 8px; background: rgba(245,158,11,.07); }
.router-update-inline-alert strong { color: #ffd17a; font-size: 13px; }
.router-update-inline-alert span { color: #91a0b2; font-size: 11px; line-height: 1.4; }
.router-update-inline-alert button { grid-row: 1 / span 2; grid-column: 2; white-space: nowrap; }
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.info-item { min-height: 68px; padding: 14px 18px; border-right: 1px solid #1d2631; border-bottom: 1px solid #1d2631; }
.info-item:nth-child(3n) { border-right: 0; }
.info-item span, .info-item strong, .info-item small { display: block; }
.info-item span { color: #5e6b7d; font-size: 8px; text-transform: uppercase; letter-spacing: .45px; }
.info-item strong { margin-top: 7px; color: #cbd5e1; font-size: 10px; font-weight: 600; word-break: break-word; }
.info-item small { margin-top: 4px; color: #4f5c6d; font-size: 8px; }
.detail-table { min-width: min(720px, 100%); }
.interfaces-detail-table { min-width: min(1280px, 100%); }
.layout-mikrotik .detail-layout { grid-template-columns: minmax(0, 1.55fr) minmax(290px, .75fr); }
.layout-mikrotik .table-wrap { overflow-x: auto; }
.layout-mikrotik table { table-layout: auto; }
.layout-mikrotik .detail-table { min-width: 720px; }
.layout-mikrotik .interfaces-detail-table { min-width: 1280px; }
.layout-mikrotik .interfaces-detail-table th,
.layout-mikrotik .interfaces-detail-table td { overflow-wrap: normal; word-break: normal; }
.layout-mikrotik .interfaces-detail-table th { white-space: nowrap; }
.layout-mikrotik .interfaces-detail-table td { white-space: normal; }
.layout-mikrotik .interface-name strong,
.layout-mikrotik .interface-name small,
.layout-mikrotik .interface-address strong,
.layout-mikrotik .interface-address small { overflow-wrap: normal; word-break: normal; }
.layout-vmware .detail-layout { grid-template-columns: minmax(0, 1fr); }
.layout-vmware .detail-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.layout-padrao .detail-layout,
.layout-printer .detail-layout,
.layout-vm .detail-layout,
.layout-server .detail-layout { grid-template-columns: minmax(0, 1.55fr) minmax(290px, .75fr); }
.interface-toolbar { padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #202936; }
.interface-search { width: min(360px, 100%); height: 36px; padding: 0 11px; display: flex; align-items: center; gap: 8px; border: 1px solid #2b3746; border-radius: 7px; background: #0d131b; color: #607086; }
.interface-search input { width: 100%; border: 0; outline: 0; color: #c9d4e1; background: transparent; font: inherit; }
.interface-status-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.interface-status-filters button { min-height: 32px; padding: 0 10px; border: 1px solid #293543; border-radius: 6px; color: #7f8da0; background: #121922; cursor: pointer; }
.interface-status-filters button.active { color: #dbe6f3; border-color: #3568a7; background: rgba(59,130,246,.13); }
.interface-status-filters button span { margin-left: 5px; color: #607086; }
.interface-sort { width: 100%; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 7px; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
.interface-sort span { color: #526176; }
.interface-sort.active { color: #8cbcff; }
.interface-disabled { opacity: .42; filter: saturate(.45); }
.interface-disabled:hover { opacity: .65; }
.status-badge.disabled { color: #8793a3; background: rgba(100,116,139,.1); }
.status-dot.disabled { background: #64748b; }
.interfaces-empty { min-height: 130px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; text-align: center; }
.interfaces-empty strong { color: #b8c4d2; font-size: 13px; }
.interfaces-empty span { color: #617084; font-size: 10px; }
.interface-name { display: flex; align-items: center; gap: 8px; }
.interface-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; color: #72a6ef; background: rgba(59,130,246,.09); }
.interface-name strong, .interface-name small, .interface-address strong, .interface-address small { display: block; }
.interface-name strong { color: #d3dce7; font-size: 13px; }
.interface-name small { margin-top: 4px; color: #607086; font-size: 10px; }
.interface-address strong { color: #bcc8d7; font-size: 12px; font-variant-numeric: tabular-nums; }
.interface-address small { margin-top: 4px; color: #536175; font-size: 9px; }
.auth-badge { display: inline-flex; padding: 5px 8px; border: 1px solid #344256; border-radius: 6px; color: #91a2b8; background: #17202b; font-size: 10px; font-weight: 650; white-space: nowrap; }
.auth-badge.dhcp { color: #75aaf7; border-color: #294d7e; background: rgba(59,130,246,.09); }
.auth-badge.ip-fixo { color: #71d793; border-color: #245d39; background: rgba(34,197,94,.08); }
.auth-badge.pppoe { color: #b69af7; border-color: #533e83; background: rgba(139,92,246,.09); }
.auth-badge.sem-endereco { color: #778598; border-color: #303a47; background: #151b23; }
.link-speed { color: #8d9bad; }
.mini-meter { width: 68px; height: 3px; margin-top: 5px; border-radius: 3px; overflow: hidden; background: #252e38; }
.mini-meter i { display: block; height: 100%; background: #3b82f6; }
.service-list, .sensor-list, .event-list, .config-list { padding: 5px 17px 12px; }
.service-row, .sensor-row, .event-row, .config-row { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #1d2630; }
.service-row:last-child, .sensor-row:last-child, .event-row:last-child, .config-row:last-child { border-bottom: 0; }
.service-row strong, .sensor-row strong, .event-row strong, .config-row strong { display: block; color: #bfc9d6; font-size: 9px; }
.service-row small, .sensor-row small, .event-row small, .config-row small { display: block; margin-top: 3px; color: #566476; font-size: 8px; }
.service-state { padding: 4px 7px; border-radius: 10px; color: #6fd590; background: rgba(34,197,94,.08); font-size: 8px; }
.service-state.off { color: #7b8796; background: rgba(100,116,139,.1); }
.sensor-value { color: #d2dbe6; font-size: 10px; font-weight: 650; white-space: nowrap; }
.event-row { justify-content: flex-start; }
.event-mark { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--blue); }
.event-mark.warning { background: var(--amber); }
.event-mark.success { background: var(--green); }
.event-row time { margin-left: auto; color: #4d5a6a; font-size: 8px; white-space: nowrap; }
.config-value { color: #8fa0b5; font-size: 9px; text-align: right; }
.detail-chart { height: 176px; padding: 18px 18px 13px; position: relative; }
.detail-chart svg { width: 100%; height: 120px; overflow: visible; }
.detail-chart-labels { display: flex; justify-content: space-between; color: #4c596a; font-size: 7px; }
.detail-chart-legend { display: flex; gap: 14px; color: #6e7b8d; font-size: 8px; }
.detail-chart-legend i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; }
.detail-chart-legend .rx { background: var(--blue); }
.detail-chart-legend .tx { background: var(--purple); }
.detail-not-found { min-height: 420px; display: grid; place-items: center; text-align: center; }
.detail-not-found strong { display: block; font-size: 18px; }
.detail-not-found p { margin-top: 8px; color: var(--muted); }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; padding: 28px; display: none; place-items: center; overflow-y: auto; background: rgba(3,6,10,.76); backdrop-filter: blur(8px); }
.modal-backdrop.open { display: grid; }
.device-modal { width: min(720px, 100%); max-height: calc(100vh - 56px); overflow-y: auto; border: 1px solid #2a3441; border-radius: 13px; background: #0f151d; box-shadow: 0 28px 90px rgba(0,0,0,.58); }
.modal-header { padding: 21px 23px 18px; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid #202936; }
.modal-header h2 { margin-top: 4px; font-size: 18px; }
.modal-header p { margin-top: 6px; color: #6f7d90; font-size: 10px; }
.modal-kicker { color: #5796f3; font-size: 8px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.modal-close { width: 32px; height: 32px; border: 1px solid #293340; border-radius: 7px; background: #151c25; color: #8491a3; cursor: pointer; font-size: 20px; line-height: 1; }
.device-modal form { padding: 0 23px 22px; }
.device-history-panel { margin-top: 16px; }
.device-history-panel .detail-panel-header { align-items: center; }
.device-history-list { position: relative; max-height: 520px; overflow-y: auto; display: grid; gap: 13px; padding: 4px 4px 4px 26px; }
.device-history-list::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(#315987, #263342); }
.device-history-empty { min-height: 170px; padding: 22px; display: grid; place-items: center; align-content: center; border: 1px dashed #303c4b; border-radius: 10px; color: #7f8fa4; text-align: center; background: rgba(16,23,32,.6); }
.device-history-empty strong, .device-history-empty span { display: block; }
.device-history-empty span { margin-top: 7px; font-size: 12px; }
.device-history-empty.error { border-color: #673940; color: #e48990; background: rgba(239,68,68,.055); }
.device-history-event { position: relative; padding: 16px; border: 1px solid #273443; border-radius: 12px; background: linear-gradient(145deg, #101720, #0d141c); }
.device-history-event::before { content: ""; position: absolute; left: -21px; top: 20px; width: 12px; height: 12px; border: 2px solid #78aef7; border-radius: 50%; background: #0d141c; box-shadow: 0 0 0 4px #0f151d; }
.device-history-event.critical, .device-history-event.failed { border-color: #65373e; background: rgba(239,68,68,.045); }
.device-history-event.critical::before, .device-history-event.failed::before { border-color: #ef8188; }
.device-history-event.warning { border-color: #624828; background: rgba(245,158,11,.045); }
.device-history-event.warning::before { border-color: #e9b359; }
.device-history-event.info, .device-history-event.completed { border-color: #2a4f3a; background: rgba(34,197,94,.04); }
.device-history-event.info::before, .device-history-event.completed::before { border-color: #75d394; }
.device-history-event-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #6f8095; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; }
.device-history-event h3 { margin-top: 8px; color: #d8e2ee; font-size: 14px; }
.device-history-event p { margin-top: 7px; color: #8898ac; font-size: 12px; line-height: 1.55; }
.device-history-meta, .device-history-versions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.device-history-meta span, .device-history-versions span { padding: 6px 8px; border: 1px solid #283646; border-radius: 7px; color: #7e8da2; background: #0b1118; font-size: 11px; }
.device-history-meta b, .device-history-versions b { color: #cdd8e6; }
.device-history-logs { margin-top: 11px; border: 1px solid #263342; border-radius: 8px; overflow: hidden; }
.device-history-logs summary { padding: 10px 12px; color: #91b8f3; cursor: pointer; font-size: 12px; font-weight: 800; background: #0d141c; }
.device-history-logs div { display: grid; }
.device-history-logs p { margin: 0; padding: 9px 12px; display: grid; grid-template-columns: 140px 90px minmax(0, 1fr); gap: 9px; border-top: 1px solid #202b37; font-size: 11px; }
.device-history-logs time { color: #617087; }
.device-history-logs strong { color: #c8d4e3; }
.device-history-logs .error span { color: #e89096; }
.device-history-logs .success span { color: #80dc9e; }
.alert-detail-modal { width: min(980px, 100%); }
.alert-detail-header { position: sticky; top: 0; z-index: 2; background: rgba(15,21,29,.97); backdrop-filter: blur(12px); }
.alert-detail-content { padding: 22px 23px 25px; }
.alert-detail-status { margin-bottom: 18px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #2b3542; border-radius: 9px; background: #111923; }
.alert-detail-status strong, .alert-detail-status span { display: block; }
.alert-detail-status strong { font-size: 14px; }
.alert-detail-status span { margin-top: 4px; color: #6f7e91; font-size: 10px; }
.alert-severity-pill { padding: 7px 10px; border-radius: 15px; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.alert-severity-pill.critical { color: #ff9096; background: rgba(239,68,68,.12); }
.alert-severity-pill.warning { color: #f2bd61; background: rgba(245,158,11,.12); }
.alert-severity-pill.info { color: #7fb1f8; background: rgba(59,130,246,.12); }
.alert-detail-section { margin-top: 18px; }
.alert-detail-section h3 { margin: 0 0 10px; color: #d7e0eb; font-size: 13px; }
.alert-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid #26313e; border-radius: 9px; }
.alert-detail-field { min-height: 78px; padding: 13px 14px; border-right: 1px solid #26313e; border-bottom: 1px solid #26313e; background: #101720; }
.alert-detail-field:nth-child(3n) { border-right: 0; }
.alert-detail-field span, .alert-detail-field strong { display: block; }
.alert-detail-field span { color: #607086; font-size: 8px; letter-spacing: .7px; text-transform: uppercase; }
.alert-detail-field strong { margin-top: 7px; color: #c9d4e1; font-size: 11px; overflow-wrap: anywhere; }
.alert-detail-analysis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.alert-detail-card { padding: 16px; border: 1px solid #283441; border-radius: 9px; background: #101720; }
.alert-detail-card h4 { margin: 0; color: #bfcbd9; font-size: 11px; }
.alert-detail-card p { margin-top: 9px; color: #748398; font-size: 10px; line-height: 1.6; }
.alert-detail-card.risk { border-color: #513036; background: rgba(239,68,68,.035); }
.remediation-list { margin: 0; padding: 0; display: grid; gap: 9px; list-style: none; counter-reset: remediation; }
.remediation-list li { position: relative; min-height: 39px; padding: 10px 12px 10px 42px; border: 1px solid #283441; border-radius: 8px; color: #8998ab; background: #101720; font-size: 10px; line-height: 1.5; counter-increment: remediation; }
.remediation-list li::before { content: counter(remediation); position: absolute; left: 11px; top: 9px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 6px; color: #7eb0f5; background: rgba(59,130,246,.12); font-size: 8px; font-weight: 800; }
.alert-sources { display: grid; gap: 8px; }
.alert-source-link { padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #283441; border-radius: 8px; color: #8fb9f5; background: #101720; font-size: 10px; text-decoration: none; }
.alert-source-link:hover { border-color: #3c6395; background: #132033; }
.alert-source-link small { color: #5f6f83; }
.alert-evidence-list { display: grid; gap: 8px; }
.alert-evidence-list p { margin: 0; padding: 10px 12px; border: 1px solid #26313e; border-radius: 8px; color: #a9bdd4; background: #101720; font-size: 11px; line-height: 1.45; }
.printer-audit-modal { width: min(1120px, 100%); }
.reports-heading { align-items: center; }
.reports-intro { padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.reports-intro h2 { margin-top: 5px; color: #d8e3ef; font-size: 18px; }
.reports-intro p { max-width: 820px; margin-top: 7px; color: #74859b; font-size: 12px; line-height: 1.55; }
.reports-status { padding: 7px 11px; border: 1px solid #34547b; border-radius: 18px; color: #87b7f8; background: rgba(59,130,246,.08); font-size: 10px; font-weight: 750; white-space: nowrap; }
.reports-grid { margin-top: 15px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.report-catalog-card { min-width: 0; padding: 17px; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 12px; border: 1px solid #253344; border-radius: 11px; background: linear-gradient(145deg, #101821, #0c131b); }
.report-catalog-card > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; color: #7f91a8; background: #172230; font-size: 18px; }
.report-catalog-card strong, .report-catalog-card small { display: block; }
.report-catalog-card strong { color: #ced9e6; font-size: 13px; }
.report-catalog-card small { margin-top: 6px; color: #6c7d92; font-size: 10px; line-height: 1.5; }
.report-catalog-card b { grid-column: 2; color: #65778d; font-size: 9px; font-weight: 650; }
.report-catalog-card.available { border-color: #294d3b; }
.report-catalog-card.available > span { color: #7bdda0; background: rgba(34,197,94,.09); }
.report-catalog-card.available b { color: #65bd83; }
.printer-analytics-section { margin-top: 16px; padding-bottom: 16px; }
.printer-analytics-heading { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #223040; }
.printer-analytics-heading h2 { margin-top: 4px; font-size: 18px; }
.printer-analytics-heading p { margin-top: 5px; color: #718198; font-size: 12px; }
.printer-analytics-actions { display: flex; gap: 8px; }
.printer-analytics-filters { padding: 14px 20px; display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)) auto; align-items: end; gap: 10px; border-bottom: 1px solid #1f2b39; background: #0c131b; }
.printer-analytics-filters label { display: grid; gap: 6px; color: #7890ad; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .55px; }
.printer-analytics-filters select, .printer-analytics-filters input { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #2a394b; border-radius: 8px; color: #cbd8e7; background: #0a1118; color-scheme: dark; }
.printer-analytics-content { padding: 16px 20px 4px; display: grid; gap: 14px; }
.printer-period-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.printer-period-summary article { min-width: 0; padding: 13px; border: 1px solid #263547; border-radius: 9px; background: linear-gradient(145deg, #101923, #0c131b); }
.printer-period-summary span, .printer-period-summary strong { display: block; }
.printer-period-summary span { color: #6e8097; font-size: 10px; text-transform: uppercase; letter-spacing: .45px; }
.printer-period-summary strong { margin-top: 7px; overflow: hidden; color: #d9e4ef; font-size: 17px; text-overflow: ellipsis; }
.printer-history-notice { padding: 12px 14px; display: flex; gap: 9px; border: 1px solid #294d3a; border-radius: 8px; color: #82dca1; background: rgba(34,197,94,.045); font-size: 11px; }
.printer-history-notice span { color: #7c8fa5; }
.printer-history-notice.warning { border-color: #624729; color: #eab65a; background: rgba(245,158,11,.045); }
.printer-history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.printer-history-chart { min-width: 0; min-height: 210px; padding: 15px; border: 1px solid #253447; border-radius: 10px; background: #0d151e; }
.printer-history-chart h3 { color: #cdd9e7; font-size: 13px; }
.printer-history-chart h3 small { float: right; color: #78aef7; font-size: 12px; }
.printer-history-chart svg { width: 100%; height: 145px; margin-top: 13px; overflow: visible; }
.printer-history-chart svg line { stroke: #213044; stroke-dasharray: 3 5; }
.printer-chart-line { fill: none; stroke: #4f92f5; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.printer-chart-area { fill: rgba(59,130,246,.1); }
.printer-history-bars { height: 155px; margin-top: 15px; display: flex; align-items: end; gap: 5px; }
.printer-history-bars > div { min-width: 0; height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.printer-history-bars i { width: min(24px, 70%); min-height: 2px; border-radius: 4px 4px 1px 1px; background: linear-gradient(#4f92f5, #3065ad); }
.printer-history-bars strong { color: #9fb4cc; font-size: 8px; }
.printer-history-bars span { width: 100%; overflow: hidden; color: #53657b; font-size: 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.printer-history-empty { min-height: 150px; display: grid; place-items: center; color: #62748b; font-size: 11px; text-align: center; }
.printer-consumption-summary { padding: 15px; border: 1px solid #273648; border-radius: 10px; background: #0d151e; }
.printer-consumption-summary h3, .printer-event-strip h3 { color: #d1dce9; font-size: 13px; }
.printer-consumption-summary > div { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.printer-consumption-summary span { padding: 10px; border: 1px solid #223143; border-radius: 8px; background: #0a1118; }
.printer-consumption-summary small, .printer-consumption-summary strong { display: block; }
.printer-consumption-summary small { color: #6f8198; font-size: 10px; }
.printer-consumption-summary strong { margin-top: 5px; color: #d5e1ee; font-size: 16px; }
.printer-event-strip { padding: 15px; display: grid; gap: 7px; border: 1px solid #273648; border-radius: 10px; background: #0d151e; }
.printer-event-strip article { padding: 9px 11px; display: flex; justify-content: space-between; gap: 12px; border-left: 3px solid #4f92f5; color: #9aacbf; background: #0a1118; font-size: 10px; }
.printer-event-strip article.replacement { border-color: #22c55e; }
.printer-event-strip article.invalid_reading { border-color: #ef4444; }
.printer-event-strip time { color: #5e7188; white-space: nowrap; }
.printer-report-block { border: 1px solid #2b3b4e; border-radius: 10px; overflow: hidden; background: #0b1219; }
.printer-report-title { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #253446; }
.printer-report-title span, .printer-report-title strong { display: block; }
.printer-report-title span { color: #5597f4; font-size: 9px; text-transform: uppercase; letter-spacing: .7px; }
.printer-report-title strong { margin-top: 4px; color: #dbe6f2; font-size: 15px; }
.printer-report-title small { color: #6e8096; font-size: 10px; }
.printer-report-table { width: 100%; overflow: hidden; }
.printer-report-table table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.printer-report-table th { height: auto; padding: 10px; color: #6f86a2; background: #101923; font-size: 9px; }
.printer-report-table td { height: auto; padding: 10px; border-top: 1px solid #1f2c3b; color: #b5c2d1; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; vertical-align: top; }
.printer-report-table td small { display: block; margin-top: 4px; color: #61748b; }
.printer-report-table tr.invalid td { color: #e68a91; background: rgba(239,68,68,.035); }
.printer-synthetic-grid { padding: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.printer-synthetic-grid > div { padding: 11px; border: 1px solid #223143; border-radius: 8px; background: #0e161f; }
.printer-synthetic-grid span, .printer-synthetic-grid strong { display: block; }
.printer-synthetic-grid span { color: #697c93; font-size: 9px; text-transform: uppercase; }
.printer-synthetic-grid strong { margin-top: 6px; color: #d3deea; font-size: 12px; }
.printer-audit-list { display: grid; gap: 12px; }
.printer-audit-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #26313e; border-radius: 9px; overflow: hidden; }
.printer-audit-grid .alert-detail-field { min-height: 72px; }
.printer-audit-note { margin-top: 10px; color: #8fa1b7; font-size: 11px; line-height: 1.55; }
.alert-suppression-section { padding: 18px; border: 1px solid #4b3d68; border-radius: 10px; background: rgba(139,92,246,.045); }
.alert-suppression-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.alert-suppression-heading h3 { margin: 0; }
.alert-suppression-heading p { margin: 6px 0 0; color: #8290a3; font-size: 13px; line-height: 1.5; }
.alert-suppression-form { margin-top: 18px; display: grid; gap: 15px; }
.alert-suppression-form[hidden] { display: none; }
.alert-suppression-form textarea { width: 100%; resize: vertical; }
.alert-confirm-check { padding: 13px 14px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid #344154; border-radius: 9px; color: #b5c0cf; background: #0d151f; font-size: 13px; line-height: 1.5; }
.alert-confirm-check.critical { border-color: #67383e; color: #f0a3a8; background: rgba(239,68,68,.04); }
.alert-confirm-check input { margin-top: 3px; accent-color: #4d8df7; }
.inline-footer { padding: 0; border-top: 0; }

/* Escala de leitura: remove microtextos do painel operacional. */
body { font-size: 16px; }
.brand-copy strong { font-size: clamp(12px, 1vw, 16px); line-height: 1.35; white-space: nowrap; }
.brand-copy span, .nav-label { font-size: 12px; }
.nav-item { min-height: 44px; font-size: 14px; }
.nav-count { min-width: 24px; height: 24px; font-size: 12px; }
.system-status strong, .user-card strong { font-size: 14px; }
.system-status small, .user-card small { font-size: 12px; }
.avatar { font-size: 13px; }
.search-box input, .refresh-button { font-size: 15px; }
.search-box kbd, #zoomResetButton { font-size: 13px; }
.heading-meta, .metric-footer, .text-action { font-size: 14px; }
.metric-top { font-size: 16px; }
.panel-header p, .device-toolbar p { font-size: 14px; }
.period-switcher button, .filter-button, .outline-button { min-height: 34px; font-size: 13px; }
.chart-legend, .availability-legend, .availability-footer { font-size: 13px; }
.y-axis, .x-axis { font-size: 12px; }
.status-list > div, .status-list small { font-size: 13px; }
.status-list strong { font-size: 16px; }
th { font-size: 13px; }
td { height: 76px; font-size: 14px; }
.device-cell strong, .ip-cell strong, .equipment-detail-link { font-size: 15px; }
.device-cell small, .ip-cell small, .traffic-values strong, .traffic-values small { font-size: 13px; }
.status-badge, .connection-badge, .enabled-badge, .disabled-badge, .device-interval { font-size: 12px; }
.device-summary-card span, .device-search input, .checkbox-filter-group label span, .type-badge { font-size: 14px; }
.device-type-card > p, .device-type-meta strong, .device-type-count { font-size: 14px; }
.device-type-meta span, .asset-row small { font-size: 12px; }
.asset-row strong, .category-bar-row > span, .category-bar-row > strong { font-size: 14px; }
.alert-summary-card span, .alert-summary-card small, .alert-center-toolbar p { font-size: 13px; }
.alert-center-controls select, .alert-center-message span, .alert-device-data span, .alert-time { font-size: 13px; }
.alert-center-message strong, .alert-device-data strong { font-size: 15px; }
.alert-item strong { font-size: 15px; }
.alert-item p, .alert-item time { font-size: 13px; line-height: 1.5; }
.detail-back, .detail-identity p, .detail-tag, .detail-updated { font-size: 13px; }
.detail-kpi > span, .detail-kpi small, .detail-panel-header p, .detail-panel-header > span { font-size: 13px; }
.detail-panel-header h2 { font-size: 18px; }
.info-item span, .info-item small { font-size: 13px; }
.info-item strong { font-size: 15px; }
.modal-header h2 { font-size: 26px; }
.modal-header p { font-size: 15px; line-height: 1.5; }
.modal-kicker { font-size: 13px; }
.form-field > span, .field-hint, .device-test-feedback small { font-size: 13px; }
.form-field input, .form-field select, .form-field textarea { font-size: 15px; }
.device-test-feedback strong { font-size: 15px; }

/* O modal de vulnerabilidade precisa ser lido sem depender do zoom. */
.alert-detail-modal { width: min(1080px, 100%); }
.alert-detail-content { padding: 26px 28px 32px; }
.alert-detail-status { padding: 18px 20px; }
.alert-detail-status strong { font-size: 18px; }
.alert-detail-status span { margin-top: 7px; font-size: 14px; line-height: 1.55; }
.alert-severity-pill { padding: 9px 13px; font-size: 12px; }
.alert-detail-section { margin-top: 24px; }
.alert-detail-section h3 { margin-bottom: 14px; font-size: 17px; }
.alert-detail-field { min-height: 96px; padding: 17px 18px; }
.alert-detail-field span { font-size: 12px; letter-spacing: .75px; }
.alert-detail-field strong { margin-top: 10px; font-size: 16px; line-height: 1.4; }
.alert-detail-card { padding: 20px; }
.alert-detail-card h4 { font-size: 16px; }
.alert-detail-card p { margin-top: 12px; font-size: 15px; line-height: 1.7; }
.remediation-list { gap: 11px; }
.remediation-list li { min-height: 52px; padding: 14px 16px 14px 52px; font-size: 15px; line-height: 1.6; }
.remediation-list li::before { left: 14px; top: 14px; width: 26px; height: 26px; font-size: 12px; }
.alert-source-link { padding: 15px 17px; font-size: 15px; }
.alert-source-link small { margin-top: 4px; display: block; font-size: 13px; }
.form-section-title { display: flex; align-items: center; gap: 10px; margin: 20px 0 13px; }
.form-section-title > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; color: #70a6f5; background: rgba(59,130,246,.1); font-size: 8px; font-weight: 800; }
.form-section-title strong, .form-section-title small { display: block; }
.form-section-title strong { font-size: 10px; }
.form-section-title small { margin-top: 3px; color: #596779; font-size: 8px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.connection-grid { grid-template-columns: 1.4fr .8fr .7fr; }
.form-field { min-width: 0; }
.form-field > span { display: block; margin-bottom: 7px; color: #8794a6; font-size: 9px; font-weight: 600; }
.form-field-wide { grid-column: 1 / -1; }
.form-field input, .form-field select { width: 100%; height: 39px; padding: 0 11px; outline: 0; border: 1px solid #293441; border-radius: 7px; color: #d5dee9; background: #0a0f15; font-size: 10px; }
.form-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #69778a 50%), linear-gradient(135deg, #69778a 50%, transparent 50%); background-position: calc(100% - 15px) 16px, calc(100% - 11px) 16px; background-size: 4px 4px; background-repeat: no-repeat; }
.form-field input:focus, .form-field select:focus { border-color: #3b70b7; box-shadow: 0 0 0 3px rgba(59,130,246,.08); }
.form-field.invalid input, .form-field.invalid select { border-color: #8b3b42; }
.field-error { display: none; margin-top: 5px; color: #e6757d; font-size: 8px; }
.form-field.invalid .field-error { display: block; }
.field-hint { display: block; margin-top: 6px; color: #505d6d; font-size: 8px; }
.password-field { position: relative; }
.password-field input { padding-right: 65px; }
.password-field button { position: absolute; right: 5px; top: 5px; height: 29px; padding: 0 8px; border: 0; border-radius: 5px; background: #19222e; color: #7990ab; font-size: 8px; cursor: pointer; }
.detected-field { position: relative; }
.detected-field input { padding-right: 78px; color: #91a0b3; background: #0d131b; cursor: default; }
.detected-field > span { position: absolute; right: 6px; top: 7px; height: 25px; padding: 0 8px; display: flex; align-items: center; border-radius: 5px; color: #728197; background: #19222e; font-size: 8px; }
.detected-field > span.detected { color: #72d993; background: rgba(34,197,94,.1); }
.monitor-switch { margin-top: 20px; padding: 13px 14px; display: flex; align-items: center; gap: 11px; border: 1px solid #24303c; border-radius: 8px; background: #111821; cursor: pointer; }
.monitor-switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { width: 35px; height: 19px; padding: 2px; flex: 0 0 auto; border-radius: 10px; background: #303a47; transition: .2s; }
.switch-track i { display: block; width: 15px; height: 15px; border-radius: 50%; background: #8793a2; transition: .2s; }
.monitor-switch input:checked + .switch-track { background: #236b42; }
.monitor-switch input:checked + .switch-track i { transform: translateX(16px); background: #7ce29f; }
.monitor-switch strong, .monitor-switch small { display: block; }
.monitor-switch strong { font-size: 9px; }
.monitor-switch small { margin-top: 3px; color: #5c697a; font-size: 8px; }
.update-schedule-field { grid-column: span 2; }
.update-schedule-control { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(190px, auto); gap: 10px; align-items: stretch; }
.update-schedule-control select { min-width: 0; }
.realtime-checkbox { position: relative; min-height: 40px; padding: 7px 11px; display: flex; align-items: center; gap: 10px; border: 1px solid #2c3d51; border-radius: 8px; color: #a9bfd9; background: linear-gradient(145deg, #121d29, #0e1721); cursor: pointer; white-space: nowrap; transition: border-color .2s, background .2s, box-shadow .2s, transform .2s; }
.realtime-checkbox:hover { border-color: #466887; background: linear-gradient(145deg, #152333, #101b27); }
.realtime-checkbox:focus-within { border-color: #4f86c5; box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.realtime-checkbox input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.realtime-toggle { width: 34px; height: 19px; padding: 2px; flex: 0 0 auto; border: 1px solid #405066; border-radius: 12px; background: #263241; transition: .2s; }
.realtime-toggle i { display: block; width: 13px; height: 13px; border-radius: 50%; background: #8290a2; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: .2s; }
.realtime-toggle-copy { min-width: 0; display: grid; gap: 1px; }
.realtime-toggle-copy strong { color: #b8c8da; font-size: 10px; line-height: 1.15; }
.realtime-toggle-copy small { color: #63758a; font-size: 8px; line-height: 1.15; }
.realtime-checkbox:has(input:checked) { border-color: #2d7650; background: linear-gradient(145deg, rgba(34,197,94,.13), rgba(34,197,94,.05)); box-shadow: inset 0 0 0 1px rgba(101,217,142,.05); }
.realtime-checkbox input:checked + .realtime-toggle { border-color: #3d9e63; background: #267649; }
.realtime-checkbox input:checked + .realtime-toggle i { transform: translateX(15px); background: #8aefaa; }
.realtime-checkbox:has(input:checked) .realtime-toggle-copy strong { color: #8be6aa; }
.realtime-checkbox:has(input:checked) .realtime-toggle-copy small { color: #62ad7b; }
.form-field.realtime-enabled #deviceUpdateInterval { opacity: .45; }
.device-test-feedback { margin-top: 16px; padding: 12px 13px; display: flex; align-items: center; gap: 10px; border: 1px solid #304156; border-radius: 8px; color: #91a4bb; background: #111a25; }
.device-test-feedback-icon { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #80b1f6; background: rgba(59,130,246,.12); font-size: 12px; font-weight: 800; }
.device-test-feedback strong, .device-test-feedback small { display: block; }
.device-test-feedback strong { color: #bdc9d7; font-size: 11px; }
.device-test-feedback small { margin-top: 4px; color: #708096; font-size: 9px; line-height: 1.45; }
.device-test-feedback.testing { border-color: #315b8d; background: rgba(59,130,246,.07); }
.device-test-feedback.testing .device-test-feedback-icon { animation: spin .8s linear infinite; }
.device-test-feedback.success { border-color: #2d6742; background: rgba(34,197,94,.07); }
.device-test-feedback.success .device-test-feedback-icon { color: #75dc97; background: rgba(34,197,94,.13); }
.device-test-feedback.error { border-color: #794047; background: rgba(239,68,68,.07); }
.device-test-feedback.error .device-test-feedback-icon { color: #f0878d; background: rgba(239,68,68,.13); }
.modal-footer { margin-top: 22px; padding-top: 18px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #202936; }
.save-without-test-button { margin-right: auto; border-color: #38506d; color: #a9c7eb; }
.save-without-test-button:hover { border-color: #4d79ad; background: rgba(59,130,246,.08); }
.test-button.testing span { display: inline-block; animation: spin .8s linear infinite; }
body.modal-open { overflow: hidden; }
[hidden] { display: none !important; }
.alert-maintenance-action { padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #65452b; border-radius: 10px; background: rgba(245,158,11,.055); }
.alert-maintenance-action h3 { margin: 0; color: #e5edf6; }
.alert-maintenance-action p { margin-top: 6px; color: #748397; font-size: 11px; line-height: 1.5; }
.alert-maintenance-action button { flex: 0 0 auto; }
.router-update-modal { width: min(780px, 100%); }
.router-update-content { padding: 20px 23px 4px; }
.router-update-loading { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 12px; color: #8fa2b9; }
.router-update-loading > span { font-size: 26px; color: #72a7f4; animation: spin .8s linear infinite; }
.router-update-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid #263342; border-radius: 9px; }
.router-update-summary > div { min-width: 0; padding: 12px; border-right: 1px solid #263342; border-bottom: 1px solid #263342; }
.router-update-summary > div:nth-child(3n) { border-right: 0; }
.router-update-summary > div:nth-last-child(-n+3) { border-bottom: 0; }
.router-update-summary span, .router-update-summary strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.router-update-summary span { color: #607085; font-size: 9px; text-transform: uppercase; letter-spacing: .55px; }
.router-update-summary strong { margin-top: 6px; color: #c9d5e3; font-size: 12px; }
.router-update-messages { margin-top: 14px; padding: 12px 14px; border: 1px solid #334154; border-radius: 8px; }
.router-update-messages strong { display: block; margin-bottom: 6px; font-size: 12px; }
.router-update-messages p { margin-top: 4px; color: #8796aa; font-size: 10px; line-height: 1.45; }
.router-update-messages.blockers { border-color: #763b42; background: rgba(239,68,68,.06); }
.router-update-messages.blockers strong { color: #ef8b91; }
.router-update-messages.warnings { border-color: #65452b; background: rgba(245,158,11,.05); }
.router-update-messages.warnings strong { color: #e7ad50; }
.router-update-confirmation { margin-top: 15px; display: grid; gap: 9px; }
.router-update-confirmation > label:not(.router-update-name) { padding: 10px 12px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid #273443; border-radius: 7px; color: #91a1b5; background: #0d141c; font-size: 10px; line-height: 1.45; cursor: pointer; }
.router-update-confirmation input[type="checkbox"] { margin-top: 1px; accent-color: #3f8bea; }
.router-update-captcha { padding: 13px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .8fr); align-items: end; gap: 16px; border: 1px solid #31517a; border-radius: 8px; background: rgba(59,130,246,.055); }
.router-update-captcha > div > span, .router-update-captcha label > span { display: block; color: #8797aa; font-size: 10px; }
.router-update-captcha strong { width: fit-content; margin-top: 7px; padding: 7px 14px; display: block; border: 1px dashed #5489c9; border-radius: 6px; color: #dceaff; background: repeating-linear-gradient(135deg, rgba(59,130,246,.12) 0 5px, rgba(15,23,42,.28) 5px 10px); font-family: Consolas, monospace; font-size: 19px; letter-spacing: 5px; user-select: none; }
.router-update-captcha small { margin-top: 7px; display: block; color: #65778e; font-size: 9px; line-height: 1.4; }
.router-update-captcha label { display: grid; gap: 7px; }
.router-update-captcha input { height: 40px; padding: 0 11px; outline: 0; border: 1px solid #344357; border-radius: 7px; color: #e4ebf3; background: #080e14; font-family: Consolas, monospace; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; }
.router-update-captcha input:focus { border-color: #4c7fba; box-shadow: 0 0 0 3px rgba(59,130,246,.08); }
.router-update-footer { margin: 18px 23px 22px; }
.danger-action:not(:disabled) { border-color: #a94750; background: linear-gradient(180deg, #b84d56, #8f343c); }
.router-update-progress { padding: 15px; display: flex; align-items: center; gap: 12px; border: 1px solid #30445c; border-radius: 9px; background: #0e1721; }
.router-update-progress-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #80b1f6; background: rgba(59,130,246,.12); animation: spin .8s linear infinite; }
.router-update-progress.completed { border-color: #2e6b45; }
.router-update-progress.completed .router-update-progress-icon { color: #76df99; background: rgba(34,197,94,.12); animation: none; }
.router-update-progress.failed { border-color: #763b42; }
.router-update-progress.failed .router-update-progress-icon { color: #ef8b91; background: rgba(239,68,68,.12); animation: none; }
.router-update-progress strong, .router-update-progress p { display: block; }
.router-update-progress p { margin-top: 4px; color: #718197; font-size: 10px; }
.router-update-log { max-height: 260px; margin-top: 12px; overflow-y: auto; border: 1px solid #263342; border-radius: 8px; }
.router-update-log > div { padding: 9px 11px; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 10px; border-bottom: 1px solid #202c39; }
.router-update-log > div:last-child { border-bottom: 0; }
.router-update-log time { color: #58687c; font-size: 9px; }
.router-update-log span { color: #8b9aaf; font-size: 10px; line-height: 1.4; }
.router-update-log span strong { margin-right: 6px; color: #c1ccda; text-transform: capitalize; }
.router-update-log .error span { color: #e1848a; }
.router-update-log .success span { color: #77d99a; }

.wallboard-view {
  width: 100%; height: 100vh; padding: 22px 26px 18px;
  grid-template-rows: 62px 124px minmax(0, 1fr) 194px 24px; gap: 13px;
  background:
    radial-gradient(circle at 18% 0%, rgba(37,99,235,.09), transparent 31%),
    radial-gradient(circle at 94% 32%, rgba(139,92,246,.06), transparent 25%),
    #06090e;
}
.wallboard-header { min-width: 0; display: grid; grid-template-columns: minmax(300px, 1fr) auto minmax(360px, 1fr); align-items: center; gap: 18px; border-bottom: 1px solid #1c2632; }
.wallboard-brand { display: flex; align-items: center; gap: 12px; }
.wallboard-brand > div:last-child { min-width: 0; }
.wallboard-brand .brand-mark { width: 38px; height: 38px; }
.wallboard-client-logo { width: 118px; height: 58px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; }
.wallboard-client-logo img { width: 100%; height: 100%; object-fit: contain; }
.wallboard-client-logo.logo-needs-contrast { padding: 6px 9px; }
.wallboard-brand strong, .wallboard-brand small { display: block; }
.wallboard-brand strong { overflow: hidden; font-size: 17px; letter-spacing: -.3px; text-overflow: ellipsis; white-space: nowrap; }
.wallboard-brand small { margin-top: 3px; color: #506075; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; }
.wallboard-live { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #7e8da1; font-size: 10px; white-space: nowrap; }
.wallboard-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(34,197,94,.85); animation: livePulse 1.8s ease-in-out infinite; }
.wallboard-live small { padding-left: 9px; border-left: 1px solid #26303d; color: #4c5a6d; }
@keyframes livePulse { 50% { opacity: .4; box-shadow: 0 0 4px rgba(34,197,94,.4); } }
.wallboard-clock { min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px; text-align: right; }
.wallboard-clock strong, .wallboard-clock small { display: block; }
.wallboard-clock strong { font-size: 20px; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.wallboard-clock small { margin-top: 2px; color: #536174; font-size: 8px; text-transform: capitalize; }
.wallboard-clock button { width: 34px; height: 34px; border: 1px solid #273342; border-radius: 7px; color: #8493a7; background: #101720; cursor: pointer; font-size: 16px; }
.wallboard-clock .wallboard-clear-data { width: auto; padding: 0 11px; display: inline-flex; align-items: center; gap: 7px; border-color: #63343a; color: #e17c83; background: rgba(239,68,68,.06); font-size: 12px; font-weight: 700; white-space: nowrap; }
.wallboard-clock .wallboard-clear-data:hover { border-color: #9a454d; color: #ff9aa0; background: rgba(239,68,68,.12); }
.wallboard-clock .wallboard-clear-data span { display: inline; }
.wallboard-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.wallboard-kpi { padding: 17px 19px; overflow: hidden; position: relative; border: 1px solid #202b38; border-radius: 10px; background: linear-gradient(145deg, rgba(18,25,35,.97), rgba(10,15,22,.98)); }
.wallboard-kpi::after { content: ""; position: absolute; width: 100px; height: 100px; right: -35px; top: -48px; border-radius: 50%; background: rgba(59,130,246,.07); }
.wallboard-kpi.healthy::after { background: rgba(34,197,94,.08); }
.wallboard-kpi.warning::after { background: rgba(245,158,11,.09); }
.wallboard-kpi.critical::after { background: rgba(239,68,68,.1); }
.wallboard-kpi > span { color: #647388; font-size: 9px; letter-spacing: .65px; text-transform: uppercase; }
.wallboard-kpi strong { display: block; margin-top: 10px; font-size: clamp(25px, 1.65vw, 32px); letter-spacing: -1px; }
.wallboard-kpi small { display: block; margin-top: 7px; overflow: hidden; color: #536175; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.wallboard-kpi small i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--green); }
.wallboard-kpi.warning strong { color: #f3b650; }
.wallboard-kpi.latency.healthy strong { color: #73dda0; }
.wallboard-kpi.latency.warning strong { color: #f3b650; }
.wallboard-kpi.latency.elevated strong { color: #f08a3c; }
.wallboard-kpi.latency.critical strong { color: #ef858b; }
.wallboard-kpi.latency.unavailable strong { color: #8392a5; }
.wallboard-latency-causes { min-width: 0; margin-top: 6px; padding-top: 6px; position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; border-top: 1px solid #26303b; }
.wallboard-latency-causes[hidden] { display: none; }
.wallboard-latency-causes > span { color: #647388; font-size: 7px; letter-spacing: .45px; text-transform: uppercase; }
.wallboard-latency-causes > strong { min-width: 0; margin: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; color: #d19a62; font-size: 8px; font-weight: 650; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.wallboard-latency-causes i { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--amber); }
.wallboard-latency-causes i.elevated { background: #f97316; }
.wallboard-latency-causes i.critical { background: var(--red); }
.wallboard-latency-causes b { color: #485568; font-weight: 400; }
.detail-kpi.internet-quality.healthy strong { color: #73dda0; }
.detail-kpi.internet-quality.warning strong { color: #f3b650; }
.detail-kpi.internet-quality.elevated strong { color: #f08a3c; }
.detail-kpi.internet-quality.critical strong { color: #ef858b; }
.internet-quality-badge { padding: 5px 9px; border-radius: 12px; font-size: 9px; font-weight: 750; white-space: nowrap; }
.internet-quality-badge.healthy { color: #72dda0; background: rgba(34,197,94,.1); }
.internet-quality-badge.warning { color: #f1b752; background: rgba(245,158,11,.1); }
.internet-quality-badge.elevated { color: #f08a3c; background: rgba(249,115,22,.1); }
.internet-quality-badge.critical { color: #ef8c91; background: rgba(239,68,68,.1); }
.internet-quality-badge.unavailable { color: #94a3b8; background: rgba(148,163,184,.1); }
.internet-target-list { padding: 8px 0; border-bottom: 1px solid #1d2630; }
.internet-target-list > div { padding: 7px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.internet-target-list span strong, .internet-target-list span small { display: block; }
.internet-target-list span strong { color: #bfc9d6; font-size: 10px; }
.internet-target-list span small { margin-top: 3px; color: #566476; font-size: 9px; }
.internet-target-list b { color: #9fb0c4; font-size: 10px; white-space: nowrap; }
.internet-target-empty { color: #64748b; font-size: 9px; line-height: 1.5; }
.wallboard-kpi.traffic strong { color: #74a8f6; }
.wallboard-main { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, .68fr) minmax(350px, .88fr); gap: 13px; }
.wallboard-card { min-height: 0; overflow: hidden; border: 1px solid #202b38; border-radius: 10px; background: linear-gradient(145deg, rgba(15,21,29,.98), rgba(9,14,20,.99)); }
.wallboard-card-header { height: 62px; padding: 14px 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #1d2733; }
.wallboard-card-header h2 { margin-top: 3px; font-size: 13px; }
.wallboard-card-kicker { color: #4b79b8; font-size: 7px; font-weight: 750; letter-spacing: 1.1px; text-transform: uppercase; }
.wallboard-legend { display: flex; gap: 13px; color: #647287; font-size: 8px; }
.wallboard-legend i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; }
.wallboard-legend .rx { background: var(--blue); }
.wallboard-legend .tx { background: var(--purple); }
.wallboard-chart { height: calc(100% - 62px); padding: 14px 18px 22px 48px; position: relative; }
.wallboard-chart svg { width: 100%; height: 100%; overflow: visible; }
.wallboard-grid-lines line { stroke: #202936; stroke-width: 1; stroke-dasharray: 3 5; }
.wallboard-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: d .5s ease; }
.wallboard-line.download { stroke: var(--blue); }
.wallboard-line.upload { stroke: var(--purple); }
.wallboard-area.download { fill: url(#wallBlueArea); transition: d .5s ease; }
.wallboard-area.upload { fill: url(#wallPurpleArea); transition: d .5s ease; }
.wallboard-y-axis { position: absolute; left: 12px; top: 15px; bottom: 25px; display: flex; flex-direction: column; justify-content: space-between; color: #435064; font-size: 7px; }
.wallboard-x-axis { position: absolute; left: 48px; right: 18px; bottom: 8px; display: flex; justify-content: space-between; color: #435064; font-size: 7px; }
.wallboard-status-card { display: flex; flex-direction: column; }
.wallboard-health-badge { padding: 5px 9px; border-radius: 12px; font-size: 8px; font-weight: 750; white-space: nowrap; }
.wallboard-health-badge.healthy { color: #72dda0; background: rgba(34,197,94,.1); }
.wallboard-health-badge.warning { color: #f1b752; background: rgba(245,158,11,.1); }
.wallboard-health-badge.critical { color: #ef8c91; background: rgba(239,68,68,.1); }
.wallboard-donut-row { min-height: 0; padding: 13px 15px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 12px; border-bottom: 1px solid #1d2733; }
.wallboard-donut { width: clamp(102px, 6.5vw, 118px); aspect-ratio: 1; position: relative; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--green) 0 75%, var(--amber) 75% 92%, var(--red) 92% 100%); box-shadow: 0 0 28px rgba(34,197,94,.07); }
.wallboard-donut::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #0d141c; box-shadow: inset 0 0 0 1px #1a2531; }
.wallboard-donut > div { width: calc(100% - 34px); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.wallboard-donut strong, .wallboard-donut span { display: block; }
.wallboard-donut strong { font-size: clamp(24px, 2vw, 34px); line-height: .9; }
.wallboard-donut span { margin-top: 8px; color: #64758a; font-size: 8px; line-height: 1; white-space: nowrap; }
.wallboard-status-list { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.wallboard-status-list > div { min-width: 0; padding: 7px 6px; display: grid; justify-items: center; gap: 4px; border: 1px solid #202b37; border-radius: 7px; color: #8190a4; background: rgba(16,23,32,.72); font-size: 9px; text-align: center; }
.wallboard-status-list span { min-width: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.wallboard-status-list i { width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; }
.wallboard-status-list i.online { background: var(--green); }
.wallboard-status-list i.warning { background: var(--amber); }
.wallboard-status-list i.offline { background: var(--red); }
.wallboard-status-list strong { color: #d7e0eb; font-size: 14px; }
.wallboard-uptime { min-height: 0; flex: 1; padding: 12px 15px 14px; display: flex; flex-direction: column; background: rgba(5,9,14,.2); }
.wallboard-uptime-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #77869a; font-size: 8px; text-transform: uppercase; letter-spacing: .55px; }
.wallboard-uptime-heading small { color: #465366; font-size: 7px; text-transform: none; letter-spacing: 0; }
.wallboard-uptime-list { min-height: 0; margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 6px; }
.wallboard-uptime-item { min-width: 0; padding: 7px 8px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; border: 1px solid #1d2834; border-radius: 6px; background: #0e151d; }
.wallboard-uptime-item span { min-width: 0; display: flex; align-items: center; gap: 6px; }
.wallboard-uptime-item i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; }
.wallboard-uptime-item i.online { background: var(--green); }
.wallboard-uptime-item i.warning { background: var(--amber); }
.wallboard-uptime-item i.offline { background: var(--red); }
.wallboard-uptime-item b { overflow: hidden; color: #8392a5; font-size: 8px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.wallboard-uptime-item strong { width: 100%; color: #c3cfdd; font-size: 8px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.wallboard-uptime-empty { padding: 20px 0; color: #536175; font-size: 9px; text-align: center; }
.wallboard-meter { height: 3px; margin-top: 5px; overflow: hidden; border-radius: 3px; background: #232d3a; }
.wallboard-meter i { display: block; height: 100%; background: var(--blue); }
.wallboard-meter.purple i { background: var(--purple); }
.wallboard-alert-total { padding: 4px 8px; border-radius: 10px; color: #e7a743; background: rgba(245,158,11,.09); font-size: 8px; }
.wallboard-alert-card { display: flex; flex-direction: column; }
.wallboard-alert-summary { padding: 13px 15px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 12px; border-bottom: 1px solid #1d2733; background: rgba(5,9,14,.2); }
.wallboard-alert-donut { width: 102px; aspect-ratio: 1; position: relative; display: grid; place-items: center; border-radius: 50%; background: #1d2834; box-shadow: 0 0 28px rgba(245,158,11,.06); }
.wallboard-alert-donut::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #0d141c; box-shadow: inset 0 0 0 1px #1c2733; }
.wallboard-alert-donut > div { width: calc(100% - 34px); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.wallboard-alert-donut strong, .wallboard-alert-donut span { display: block; }
.wallboard-alert-donut strong { color: #dce5ef; font-size: 30px; line-height: .9; }
.wallboard-alert-donut span { margin-top: 8px; color: #64758a; font-size: 11px; line-height: 1; white-space: nowrap; }
.wallboard-alert-priorities { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.wallboard-alert-priorities > div { min-width: 0; padding: 7px 6px; display: grid; justify-items: center; gap: 4px; border: 1px solid #202b37; border-radius: 7px; color: #7e8da1; background: rgba(16,23,32,.72); font-size: 9px; text-align: center; }
.wallboard-alert-priorities span { min-width: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.wallboard-alert-priorities i { width: 7px; height: 7px; margin-right: 6px; flex: 0 0 auto; border-radius: 50%; }
.wallboard-alert-priorities .critical i { background: var(--red); }
.wallboard-alert-priorities .warning i { background: var(--amber); }
.wallboard-alert-priorities .info i { background: var(--blue); }
.wallboard-alert-priorities strong { color: #d5dfeb; font-size: 14px; }
.wallboard-alerts { min-height: 0; flex: 1; padding: 4px 15px 8px; display: flex; flex-direction: column; justify-content: center; }
.wallboard-alert { width: 100%; min-height: 40px; padding: 3px 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 0; border-bottom: 1px solid #1c2631; color: inherit; text-align: left; background: transparent; cursor: pointer; }
.wallboard-alert:hover, .wallboard-alert:focus-visible { background: rgba(59,130,246,.055); outline: none; }
.wallboard-alert:last-child { border-bottom: 0; }
.wallboard-alert > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; font-size: 10px; }
.wallboard-alert.critical > span { color: #f18484; background: rgba(239,68,68,.1); }
.wallboard-alert.warning > span { color: #f1b752; background: rgba(245,158,11,.1); }
.wallboard-alert.info > span { color: #75a7f3; background: rgba(59,130,246,.1); }
.wallboard-alert strong, .wallboard-alert small { display: block; }
.wallboard-alert strong { overflow: hidden; color: #c9d3df; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.wallboard-alert small { margin-top: 2px; overflow: hidden; color: #536175; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.wallboard-alert time { color: #4e5c6e; font-size: 8px; }
.wallboard-alert-empty { display: flex; align-items: center; justify-content: center; gap: 12px; color: #8090a4; text-align: left; }
.wallboard-alert-empty > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #6fdda0; background: rgba(34,197,94,.1); }
.wallboard-alert-empty strong, .wallboard-alert-empty small { display: block; }
.wallboard-alert-empty small { margin-top: 4px; color: #526174; }
.wallboard-devices-card { display: grid; grid-template-rows: 50px 1fr; }
.wallboard-devices-card .wallboard-card-header { height: 50px; padding-top: 9px; padding-bottom: 9px; }
.wallboard-devices-card .wallboard-card-header > span { color: #516075; font-size: 8px; }
.wallboard-device-grid { min-height: 0; padding: 10px 13px 12px; overflow: hidden; display: grid; grid-template-columns: repeat(var(--wallboard-device-columns, 4), minmax(0, 1fr)); grid-template-rows: repeat(var(--wallboard-device-rows, 1), minmax(0, 1fr)); grid-auto-flow: row; gap: 9px; }
.wallboard-device { min-width: 0; min-height: 0; overflow: hidden; padding: clamp(6px, .65vw, 10px) clamp(7px, .75vw, 11px); display: grid; grid-template-rows: auto auto auto auto; align-content: space-between; gap: clamp(3px, .4vh, 7px); border: 1px solid #202a36; border-radius: 8px; background: linear-gradient(145deg, #101821, #0b1118); }
.wallboard-device.paused { opacity: .55; filter: saturate(.55); }
.wallboard-device-heading, .wallboard-device-title, .wallboard-device-address, .wallboard-device-footer { min-width: 0; display: flex; align-items: center; }
.wallboard-device-heading, .wallboard-device-address { justify-content: space-between; gap: 8px; }
.wallboard-device-title { gap: 8px; overflow: hidden; }
.wallboard-device-title > i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }
.wallboard-device-title > i.online { background: var(--green); box-shadow: 0 0 7px rgba(34,197,94,.5); }
.wallboard-device-title > i.warning { background: var(--amber); }
.wallboard-device-title > i.offline { background: var(--red); }
.wallboard-device-title > i.paused { background: #64748b; }
.wallboard-device strong, .wallboard-device small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallboard-device strong { color: #d3dce8; font-size: 9px; }
.wallboard-device small { margin-top: 2px; color: #69788d; font-size: 7px; }
.wallboard-device-state { flex: 0 0 auto; padding: 3px 6px; border-radius: 10px; color: #93a4b9; background: #17202b; font-size: 7px; }
.wallboard-device-state.online { color: #72dda0; background: rgba(34,197,94,.1); }
.wallboard-device-state.warning { color: #f1b752; background: rgba(245,158,11,.1); }
.wallboard-device-state.offline { color: #ef8c91; background: rgba(239,68,68,.1); }
.wallboard-device-address { color: #637287; font-size: 7px; }
.wallboard-device-address span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallboard-device-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wallboard-device-metrics > div { display: grid; grid-template-columns: auto auto; gap: 2px 5px; color: #66768b; font-size: 7px; }
.wallboard-device-metrics strong { color: #aebccc; font-size: 8px; text-align: right; }
.wallboard-device-metrics i { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 3px; background: #252f3c; }
.wallboard-device-metrics b { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.wallboard-device-metrics > div.warning b,
.wallboard-device-metrics > div:nth-child(2).warning b { background: var(--amber); }
.wallboard-device-metrics > div.critical b,
.wallboard-device-metrics > div:nth-child(2).critical b { background: var(--red); }
.wallboard-device-footer { gap: 5px 9px; color: #58677b; font-size: 7px; white-space: nowrap; }
.wallboard-device-footer span { overflow: hidden; text-overflow: ellipsis; }
.wallboard-device-footer span:first-child { flex: 1 1 auto; color: #718198; }
.wallboard-device-grid.is-multirow .wallboard-device { padding: 5px 7px; gap: 2px; }
.wallboard-device-grid.is-multirow .wallboard-device small { display: none; }
.wallboard-device-grid.is-multirow .wallboard-device-address { font-size: 6px; }
.wallboard-device-grid.is-multirow .wallboard-device-metrics { gap: 6px; }
.wallboard-device-grid.is-multirow .wallboard-device-metrics > div { gap: 1px 4px; font-size: 6px; }
.wallboard-device-grid.is-multirow .wallboard-device-metrics strong { font-size: 7px; }
.wallboard-device-grid.is-multirow .wallboard-device-footer { font-size: 6px; }
.wallboard-device-grid.is-multirow .wallboard-device-footer span:nth-child(2),
.wallboard-device-grid.is-multirow .wallboard-device-footer span:nth-child(3) { display: none; }
.wallboard-footer { display: flex; align-items: center; justify-content: space-between; color: #425064; font-size: 7px; letter-spacing: .35px; text-transform: uppercase; }
.wallboard-footer i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--green); }

@media (max-height: 850px) and (min-width: 1200px) {
  body.wallboard-fullscreen .wallboard-view { padding: 14px 18px 12px; grid-template-rows: 50px 102px minmax(0, 1fr) 158px 18px; gap: 9px; }
  .wallboard-header { font-size: 90%; }
  .wallboard-card-header { height: 50px; padding: 10px 14px; }
  .wallboard-chart { height: calc(100% - 50px); }
  .wallboard-kpi { padding: 12px 15px; }
  .wallboard-alert { min-height: 49px; }
  .wallboard-devices-card { grid-template-rows: 42px 1fr; }
  .wallboard-devices-card .wallboard-card-header { height: 42px; }
  .wallboard-device { padding: 7px 9px; }
  .wallboard-device-grid { padding: 7px 10px 9px; gap: 6px; }
}

@media (max-width: 1500px) {
  body.wallboard-mode:not(.wallboard-fullscreen) .wallboard-view {
    grid-template-rows: auto auto auto auto auto;
  }
  .wallboard-header {
    grid-template-columns: minmax(280px, 1fr) minmax(350px, auto);
    min-height: 76px;
  }
  .wallboard-live { grid-column: 1 / -1; grid-row: 2; padding: 8px 0; border-top: 1px solid #17212c; }
  .wallboard-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wallboard-kpi { min-height: 125px; }
  .wallboard-main {
    min-height: 720px;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
    grid-template-rows: repeat(2, minmax(340px, 1fr));
  }
  .wallboard-traffic-card { grid-row: 1 / 3; }
  .wallboard-device-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wallboard-devices-card { min-height: 250px; }
}

@media (max-width: 980px) {
  .wallboard-view { padding: 14px; gap: 10px; }
  .wallboard-header { grid-template-columns: 1fr; }
  .wallboard-clock { justify-content: flex-start; flex-wrap: wrap; text-align: left; }
  .wallboard-live { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .wallboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallboard-main { min-height: 0; grid-template-columns: 1fr; grid-template-rows: minmax(400px, 55vh) auto minmax(300px, auto); }
  .wallboard-traffic-card { grid-row: auto; }
  .wallboard-status-card { min-height: 370px; }
  .wallboard-alert-card { min-height: 320px; }
  .wallboard-device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallboard-footer { flex-wrap: wrap; gap: 8px 18px; }
}

@media (max-width: 620px) {
  .wallboard-brand { align-items: flex-start; }
  .wallboard-client-logo { width: 92px; height: 48px; }
  .wallboard-brand strong { white-space: normal; }
  .wallboard-kpis, .wallboard-device-grid { grid-template-columns: 1fr; }
  .wallboard-kpi { min-height: 116px; }
  .wallboard-card-header { height: auto; min-height: 62px; flex-wrap: wrap; }
  .wallboard-status-list { grid-template-columns: 1fr; }
  .wallboard-clock .wallboard-clear-data span { display: none; }
}

.toast { position: fixed; z-index: 500; right: 25px; bottom: 25px; width: min(430px, calc(100vw - 32px)); min-width: 270px; padding: 15px 17px; border: 1px solid #326044; border-radius: 10px; display: flex; align-items: center; gap: 11px; background: #101c16; box-shadow: 0 18px 55px rgba(0,0,0,.62); transform: translateY(100px); opacity: 0; pointer-events: none; transition: .3s ease; }
.toast.show { transform: translateY(0); opacity: 1; }
.modal-open .toast { top: 20px; bottom: auto; transform: translateY(-100px); }
.modal-open .toast.show { transform: translateY(0); }
.toast > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #7dde9e; background: rgba(34,197,94,.12); }
.toast strong, .toast small { display: block; }
.toast strong { font-size: 10px; }
.toast small { margin-top: 3px; color: #70917c; font-size: 8px; }

/* Legibilidade ampliada para conteúdo, mantendo a barra lateral inalterada. */
.topbar { height: 78px; }
.search-box input { height: 42px; font-size: 14px; }
.search-box kbd { font-size: 12px; }
.icon-button, .refresh-button { height: 42px; }
.refresh-button { font-size: 14px; }
.dashboard { padding-top: 36px; }
.eyebrow { font-size: 12px; }
h1 { font-size: 32px; }
.page-heading p { font-size: 15px; }
.heading-meta { font-size: 13px; }
.metric-top { font-size: 14px; }
.metric-value { font-size: 34px; }
.metric-value small { font-size: 17px; }
.metric-footer { font-size: 12px; }
.text-action { font-size: 13px; }
.panel-header h2, .device-toolbar h2 { font-size: 17px; }
.panel-header p, .device-toolbar p { font-size: 12px; }
.period-switcher button, .filter-button, .outline-button { font-size: 12px; }
.chart-legend { font-size: 12px; }
.chart-legend strong { font-size: 13px; }
.y-axis, .x-axis { font-size: 10px; }
.donut strong { font-size: 30px; }
.donut span { font-size: 11px; }
.status-list > div { font-size: 13px; }
.status-list strong { font-size: 15px; }
.status-list small { font-size: 11px; }
th { padding: 13px 15px; font-size: 11px; }
td { height: 68px; font-size: 12px; }
.device-cell strong, .ip-cell strong { font-size: 13px; }
.device-cell small, .ip-cell small { font-size: 11px; }
.equipment-detail-link { font-size: 13px; }
.status-badge, .connection-badge, .enabled-badge, .disabled-badge { font-size: 11px; }
.traffic-values strong, .traffic-values small { font-size: 11px; }
.alert-item strong { font-size: 13px; }
.alert-item p, .alert-item time { font-size: 11px; }
.availability-legend, .availability-footer { font-size: 11px; }
.primary-button, .secondary-button, .test-button { min-height: 42px; font-size: 14px; }
.device-summary-card span { font-size: 13px; }
.device-summary-card strong { font-size: 28px; }
.device-search input { height: 42px; font-size: 13px; }
.device-interval { font-size: 10px; }
.action-button { width: 34px; height: 34px; font-size: 14px; }
.detail-back { font-size: 13px; }
.detail-title-row h1 { font-size: 30px; }
.detail-identity p { font-size: 13px; }
.detail-tag, .detail-updated { font-size: 11px; }
.detail-kpi > span { font-size: 11px; }
.detail-kpi strong { font-size: 23px; }
.detail-kpi small { font-size: 11px; }
.detail-panel-header h2 { font-size: 16px; }
.detail-panel-header p, .detail-panel-header > span { font-size: 11px; }
.info-item span { font-size: 11px; }
.info-item strong { font-size: 13px; }
.info-item small { font-size: 11px; }
.service-row strong, .sensor-row strong, .event-row strong, .config-row strong { font-size: 12px; }
.service-row small, .sensor-row small, .event-row small, .config-row small { font-size: 10px; }
.service-state, .event-row time { font-size: 10px; }
.sensor-value, .config-value { font-size: 13px; }
.detail-chart-labels, .detail-chart-legend { font-size: 10px; }
.modal-header h2 { font-size: 23px; }
.modal-header p { font-size: 13px; }
.modal-kicker { font-size: 11px; }
.form-section-title > span { font-size: 11px; }
.form-section-title strong { font-size: 14px; }
.form-section-title small { font-size: 11px; }
.form-field > span { font-size: 12px; }
.form-field input, .form-field select { height: 44px; font-size: 13px; }
.field-error, .field-hint { font-size: 10px; }
.password-field button, .detected-field > span { font-size: 10px; }
.monitor-switch strong { font-size: 12px; }
.monitor-switch small { font-size: 10px; }
.device-test-feedback strong { font-size: 13px; }
.device-test-feedback small { font-size: 11px; }
.toast strong { font-size: 13px; }
.toast small { font-size: 11px; }

/* Painel TV: tamanhos próprios para leitura à distância em Full HD. */
.wallboard-brand strong { font-size: 21px; }
.wallboard-brand small { font-size: 11px; }
.wallboard-live { font-size: 13px; }
.wallboard-clock strong { font-size: 27px; }
.wallboard-clock small { font-size: 11px; }
.wallboard-kpi > span { font-size: 12px; }
.wallboard-kpi strong { font-size: clamp(30px, 1.9vw, 38px); }
.wallboard-kpi small { font-size: 12px; }
.wallboard-card-header h2 { font-size: 17px; }
.wallboard-card-kicker { font-size: 10px; }
.wallboard-legend { font-size: 11px; }
.wallboard-y-axis, .wallboard-x-axis { font-size: 10px; }
.wallboard-donut strong { font-size: clamp(30px, 2.2vw, 40px); }
.wallboard-donut span { font-size: 11px; }
.wallboard-status-list > div { font-size: 12px; }
.wallboard-status-list strong { font-size: 17px; }
.wallboard-capacity > div:not(.wallboard-meter) { font-size: 11px; }
.wallboard-alert-total { font-size: 11px; }
.wallboard-alert strong { font-size: 12px; }
.wallboard-alert small, .wallboard-alert time { font-size: 10px; }
.wallboard-devices-card .wallboard-card-header > span { font-size: 11px; }
.wallboard-device strong { font-size: 11px; }
.wallboard-device small { font-size: 9px; }
.wallboard-device-state, .wallboard-device-address { font-size: 9px; }
.wallboard-device-metrics > div, .wallboard-device-footer { font-size: 9px; }
.wallboard-device-metrics strong { font-size: 10px; }
.wallboard-footer { font-size: 10px; }

@media (max-width: 1100px) {
  .sidebar { width: 210px; }
  .main-content { margin-left: 210px; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .analytics-grid { grid-template-columns: 1fr; }
  .status-panel { min-height: 270px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; }
  .status-panel .panel-header { grid-column: 1 / -1; }
  .status-list { align-self: center; padding-right: 20px; }
  .bottom-grid { grid-template-columns: 1fr; }
  .connection-grid { grid-template-columns: 1fr 1fr; }
  .detail-kpis { grid-template-columns: repeat(3, 1fr); }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-layout.vmware-detail-layout .detail-side { grid-template-columns: 1fr; }
  .client-layout { grid-template-columns: 1fr; }
  .device-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alert-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .alert-center-row { grid-template-columns: 26px 42px 1fr 120px 38px; }
  .alert-center-row.suppressed { grid-template-columns: 26px 42px 1fr 110px 86px; }
  .alert-center-row.suppressed .alert-time { display: none; }
  .alert-device-data { display: none; }
  .vm-alert-counts { grid-template-columns: repeat(3, 1fr); }
  .printer-period-summary { grid-template-columns: repeat(3, 1fr); }
  .printer-analytics-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .printer-analytics-filters .primary-button { align-self: end; }
  .printer-synthetic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reports-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallboard-clock .wallboard-clear-data span { display: none; }
  .wallboard-clock .wallboard-clear-data { width: 34px; padding: 0; justify-content: center; }
}
@media (max-width: 760px) {
  .sidebar { width: 244px; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 15px 0 40px rgba(0,0,0,.35); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .topbar { padding: 0 18px; gap: 12px; }
  .mobile-menu { display: block; }
  .search-box { width: auto; flex: 1; }
  .search-box kbd, .refresh-button span:not(.refresh-icon) { display: none; }
  .refresh-button { width: 38px; padding: 0; justify-content: center; }
  .zoom-menu { position: fixed; top: 68px; right: 18px; }
  .dashboard { padding: 25px 18px 35px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .metrics-grid { grid-template-columns: 1fr; }
  .routers-header { align-items: flex-start; flex-direction: column; }
  .table-actions { width: 100%; overflow-x: auto; }
  .outline-button { white-space: nowrap; }
  .chart-wrap { height: 220px; }
  .device-summary-grid { grid-template-columns: 1fr; }
  .device-toolbar, .devices-heading { align-items: flex-start; flex-direction: column; }
  .users-heading { align-items: flex-start; flex-direction: column; }
  .alerts-heading, .alert-center-toolbar { align-items: flex-start; flex-direction: column; }
  .alert-heading-actions { width: 100%; justify-content: flex-start; }
  .alert-center-controls { width: 100%; }
  .alert-center-controls .device-search { flex: 1; }
  .device-filter-panel { align-items: flex-start; flex-direction: column; }
  .status-checkboxes { margin-left: 0; }
  .device-type-grid { grid-template-columns: 1fr; }
  .device-search { width: 100%; }
  .form-grid, .connection-grid { grid-template-columns: 1fr; }
  .update-schedule-field { grid-column: auto; }
  .update-schedule-control { grid-template-columns: 1fr; }
  .modal-backdrop { padding: 12px; }
  .device-modal { max-height: calc(100vh - 24px); }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .primary-button { flex: 1; }
  .alert-maintenance-action { align-items: stretch; flex-direction: column; }
  .alert-maintenance-action button { width: 100%; }
  .alert-suppression-heading { align-items: stretch; flex-direction: column; }
  .alert-suppression-heading button { width: 100%; }
  .router-update-summary { grid-template-columns: 1fr; }
  .router-update-summary > div,
  .router-update-summary > div:nth-child(3n) { border-right: 0; border-bottom: 1px solid #263342; }
  .router-update-summary > div:last-child { border-bottom: 0; }
  .router-update-captcha { grid-template-columns: 1fr; }
  .alert-detail-grid, .alert-detail-analysis { grid-template-columns: 1fr; }
  .alert-detail-field, .alert-detail-field:nth-child(3n) { border-right: 0; }
  .detail-hero { align-items: flex-start; flex-direction: column; }
  .detail-actions { width: 100%; }
  .detail-actions button { flex: 1; }
  .detail-updated { text-align: left; }
  .detail-kpis { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .info-item:nth-child(3n) { border-right: 1px solid #1d2631; }
  .info-item:nth-child(2n) { border-right: 0; }
  .asset-row { grid-template-columns: 1fr 1fr; padding: 10px 0; }
  .vmware-vm-list { padding: 10px; }
  .vmware-vm-head { display: none; }
  .vmware-vm-row { grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 14px; }
  .vmware-vm-row > div:first-child,
  .vmware-vm-row > div:nth-child(2),
  .vmware-vm-row > div:nth-child(5),
  .vmware-vm-row > div:nth-child(6),
  .vmware-vm-row > div:nth-child(7) { grid-column: 1 / -1; }
  .vm-observability-heading { align-items: stretch; flex-direction: column; }
  .vm-period-switcher { width: 100%; }
  .vm-period-switcher button { flex: 1; }
  .vm-operational-summary, .vm-history-grid { grid-template-columns: 1fr; }
  .vm-operational-modal { width: min(96vw, 1380px); }
  .vm-operational-modal-body { padding: 0 14px 14px; }
  .vm-operational-modal-body .vm-period-switcher { justify-self: stretch; }
  .vm-alert-counts { grid-template-columns: repeat(2, 1fr); }
  .printer-analytics-heading { align-items: stretch; flex-direction: column; }
  .printer-analytics-actions { width: 100%; }
  .printer-analytics-actions button { flex: 1; }
  .printer-analytics-filters, .printer-period-summary, .printer-history-grid, .printer-consumption-summary > div, .printer-synthetic-grid { grid-template-columns: 1fr; }
  .printer-history-notice, .printer-report-title, .printer-event-strip article { align-items: flex-start; flex-direction: column; }
  .reports-intro { align-items: flex-start; flex-direction: column; }
  .reports-grid { grid-template-columns: 1fr; }
  .vm-timeline article { padding-left: 22px; padding-top: 38px; }
  .vm-timeline time { left: 22px; top: 13px; width: auto; }
  .alert-center-row { grid-template-columns: 26px 38px 1fr 34px; }
  .alert-center-row.suppressed { grid-template-columns: 26px 38px 1fr; }
  .alert-center-row.suppressed .alert-device-data,
  .alert-center-row.suppressed .reactivate-alert-button { grid-column: 3; }
  .alert-time { display: none; }
  .toast, .modal-open .toast { top: 12px; right: 12px; bottom: auto; width: calc(100vw - 24px); min-width: 0; }
}
@media (max-width: 480px) {
  .heading-meta { flex-wrap: wrap; }
  .status-panel { display: block; }
  .status-list { padding: 0; }
  .donut-wrap { padding: 20px 0; }
  .panel-header { gap: 8px; }
  .period-switcher button { min-width: 29px; }
  .chart-legend { margin-left: 0; gap: 12px; }
  .availability-footer { gap: 10px; flex-wrap: wrap; }
  .detail-identity { align-items: flex-start; }
  .detail-device-icon { width: 46px; height: 46px; }
  .detail-kpis, .info-grid { grid-template-columns: 1fr; }
  .info-item { border-right: 0 !important; }
  .alert-summary-grid { grid-template-columns: 1fr; }
  .alert-center-controls { align-items: stretch; flex-direction: column; }
  .alert-center-controls select, .alert-center-controls .device-search { width: 100%; }
}

body.wallboard-fullscreen .wallboard-device-grid {
  grid-template-columns: repeat(var(--wallboard-device-columns, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--wallboard-device-rows, 1), minmax(0, 1fr));
  overflow: hidden;
}

/* Camada responsiva consolidada. Mantém os layouts especializados isolados. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, canvas { max-width: 100%; }
.panel, .metric-card, .detail-panel, .detail-main, .detail-side,
.device-type-card, .report-catalog-card { min-width: 0; }
.routers-panel table, .device-register-table, .user-register-table {
  min-width: 0;
  table-layout: auto;
}
.routers-panel th:first-child, .device-register-table th:first-child { width: 22%; }
.routers-panel th:nth-child(3), .device-register-table th:nth-child(3) { width: 18%; }
.routers-panel th { white-space: nowrap; }
.routers-panel th:nth-child(7) { min-width: 105px; }
.device-cell > div:last-child, .ip-cell, .traffic-values { min-width: 0; }
.device-cell strong, .device-cell small, .equipment-detail-link,
.ip-cell strong, .ip-cell small {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.alert-center-controls { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.alert-center-controls .device-search { flex: 1 1 260px; min-width: 180px; }
.alert-center-controls select { flex: 0 1 190px; min-width: 150px; max-width: 100%; }
.device-type-card { isolation: isolate; }
.device-type-card h2, .device-type-card > p, .device-type-meta strong { overflow-wrap: anywhere; }
.modal-header > div, .detail-identity > div, .detail-title-row { min-width: 0; }
.modal-header h2, .modal-header p, .detail-title-row h1, .detail-identity p { overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .layout-mikrotik .detail-layout,
  .layout-printer .detail-layout,
  .layout-padrao .detail-layout,
  .layout-vm .detail-layout,
  .layout-server .detail-layout,
  .layout-windows-server .detail-layout,
  .layout-windows-workstation .detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .layout-vmware .detail-side,
  .layout-printer .detail-side,
  .layout-mikrotik .detail-side,
  .layout-padrao .detail-side,
  .layout-vm .detail-side,
  .layout-server .detail-side,
  .layout-windows-server .detail-side,
  .layout-windows-workstation .detail-side {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1000px) {
  .vmware-vm-list { padding: 10px; }
  .vmware-vm-head { display: none; }
  .vmware-vm-grid { overflow: visible; }
  .vmware-vm-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-bottom: 10px;
    padding: 16px;
    border: 1px solid #223044;
    border-radius: 10px;
    background: #0d141d;
  }
  .vmware-vm-row:last-child { margin-bottom: 0; border-bottom: 1px solid #223044; }
  .vmware-vm-row > div:first-child,
  .vmware-vm-row > div:nth-child(2),
  .vmware-vm-row > div:nth-child(5),
  .vmware-vm-row > div:nth-child(6),
  .vmware-vm-row > div:nth-child(7) { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .sidebar {
    width: min(300px, 86vw);
    transform: translateX(-102%);
    transition: transform .25s ease;
    box-shadow: 15px 0 40px rgba(0,0,0,.45);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sidebar.open { transform: translateX(0); }
  body.sidebar-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 15;
    background: rgba(2,6,12,.72);
    backdrop-filter: blur(3px);
  }
  .main-content { margin-left: 0; }
  .mobile-menu { display: block; flex: 0 0 auto; }
  .dashboard { padding-inline: clamp(16px, 3vw, 26px); }
  .device-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alert-center-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .alert-center-controls {
    width: 100%;
    justify-content: stretch;
  }
  .alert-center-controls .device-search,
  .alert-center-controls select { flex: 1 1 220px; }
  .alerts-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .alert-heading-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .alert-heading-actions button { width: 100%; }
  .detail-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-item:nth-child(3n) { border-right: 1px solid #1d2631; }
  .info-item:nth-child(2n) { border-right: 0; }

  .routers-panel .table-wrap,
  .device-register-panel .table-wrap,
  .user-register-panel .table-wrap {
    padding: 12px;
    overflow: visible;
    border-top: 1px solid var(--border);
  }
  .routers-panel table,
  .device-register-table,
  .user-register-table,
  .routers-panel tbody,
  .device-register-table tbody,
  .user-register-table tbody {
    display: block;
    width: 100%;
  }
  .routers-panel thead,
  .device-register-table thead,
  .user-register-table thead { display: none; }
  .routers-panel tbody,
  .device-register-table tbody,
  .user-register-table tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .routers-panel tbody tr,
  .device-register-table tbody tr,
  .user-register-table tbody tr {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #26313f;
    border-radius: 11px;
    background: #0d141c;
  }
  .routers-panel tbody td,
  .device-register-table tbody td,
  .user-register-table tbody td {
    width: 100% !important;
    min-width: 0;
    height: auto;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid #1d2834;
    text-align: right;
    overflow-wrap: anywhere;
  }
  .routers-panel tbody td:first-child,
  .device-register-table tbody td:first-child,
  .user-register-table tbody td:first-child {
    min-height: 72px;
    border-top: 0;
    text-align: left;
  }
  .routers-panel tbody td::before,
  .device-register-table tbody td::before,
  .user-register-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: #68788e;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .55px;
    text-transform: uppercase;
    text-align: left;
  }
  .routers-panel tbody td:first-child::before,
  .device-register-table tbody td:first-child::before,
  .user-register-table tbody td:first-child::before { display: none; }
  .routers-panel .device-cell,
  .device-register-table .device-cell,
  .user-register-table .user-identity { width: 100%; min-width: 0; }
  .device-actions { justify-content: flex-end; }
}

@media (max-width: 640px) {
  body { font-size: 14px; }
  .topbar {
    height: auto;
    min-height: 76px;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px 10px;
  }
  .mobile-menu { grid-column: 1; grid-row: 1; }
  .topbar-actions { grid-column: 3; grid-row: 1; gap: 7px; }
  .search-box {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
  .notification-button { display: none; }
  .dashboard { padding: 20px 14px 32px; }
  h1 { font-size: clamp(25px, 8vw, 32px); }
  .page-heading { margin-bottom: 18px; }
  .heading-meta { width: 100%; justify-content: space-between; }
  .metric-card { min-height: 142px; }
  .panel { padding: 15px; }
  .panel-header { align-items: stretch; flex-direction: column; }
  .period-switcher { display: flex; width: 100%; }
  .period-switcher button { flex: 1; }
  .chart-legend { margin-left: 0; flex-wrap: wrap; gap: 10px 18px; }
  .chart-wrap { height: 210px; padding-left: 34px; }
  .x-axis { left: 34px; }
  .table-actions { overflow: visible; flex-direction: column; align-items: stretch; }
  .filter-group { width: 100%; overflow-x: auto; }
  .filter-button { flex: 1 0 auto; }
  .outline-button { width: 100%; }
  .device-summary-grid { gap: 10px; }
  .device-summary-card { min-height: 78px; padding: 14px; }
  .device-type-grid { grid-template-columns: minmax(0, 1fr); }
  .device-type-card { min-height: 0; padding: 17px; }
  .device-type-meta { grid-template-columns: minmax(0, 1fr); }
  .alert-heading-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .alert-heading-actions button { width: 100%; }
  .alert-center-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .alert-center-controls .device-search,
  .alert-center-controls select { width: 100%; min-width: 0; }
  .alert-center-row,
  .alert-center-row.suppressed {
    grid-template-columns: 28px minmax(0, 1fr) 34px;
    gap: 10px;
    padding: 14px 12px;
  }
  .alert-center-row .alert-severity-icon { grid-column: 1; }
  .alert-center-row .alert-select-control,
  .alert-center-row .alert-suppression-state { grid-column: 1; grid-row: 1; }
  .alert-center-row .alert-severity-icon { grid-row: 2; }
  .alert-center-row .alert-center-message { grid-column: 2; grid-row: 1 / span 2; }
  .alert-center-row .delete-alert-button { grid-column: 3; grid-row: 1 / span 2; }
  .alert-center-row.suppressed .reactivate-alert-button {
    grid-column: 2 / -1;
    grid-row: 3;
    width: 100%;
  }
  .alert-device-data, .alert-time { display: none; }
  .detail-hero { padding: 16px; }
  .detail-identity { width: 100%; gap: 12px; }
  .detail-device-icon { flex: 0 0 auto; }
  .detail-actions { display: grid; grid-template-columns: 1fr; }
  .detail-actions button { width: 100%; }
  .detail-kpis, .info-grid { grid-template-columns: minmax(0, 1fr); }
  .info-item { border-right: 0 !important; }
  .detail-panel-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
  }
  .category-bars { padding: 14px; }
  .category-bar-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 12px;
  }
  .category-bar-row .category-bar { grid-column: 1 / -1; grid-row: 2; }
  .asset-list { padding: 4px 14px 12px; }
  .asset-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    padding: 13px 0;
  }
  .service-row, .sensor-row, .event-row, .config-row {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 0;
  }
  .printer-analytics-heading,
  .printer-history-notice,
  .printer-report-title,
  .reports-intro { padding: 15px; }
  .printer-analytics-actions { display: grid; grid-template-columns: 1fr; }
  .printer-analytics-content { padding-inline: 14px; }
  .modal-backdrop { padding: 0; align-items: stretch; }
  .modal-backdrop,
  .device-modal,
  .device-modal form,
  .form-grid,
  .connection-grid,
  .form-field,
  .password-field {
    min-width: 0;
    max-width: 100%;
  }
  .modal-backdrop,
  .device-modal { overflow-x: hidden; }
  .device-modal input:not([type="checkbox"]):not([type="radio"]),
  .device-modal select,
  .device-modal textarea,
  .device-modal .password-field {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .device-modal input[type="checkbox"],
  .device-modal input[type="radio"] {
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
  }
  .device-modal .realtime-checkbox input[type="checkbox"] {
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }
  .device-modal, .alert-detail-modal, .printer-audit-modal,
  .router-update-modal, .vm-operational-modal, .type-modal {
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
  }
  .modal-header {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 16px;
    background: rgba(15,21,29,.98);
  }
  .device-modal form { padding-inline: 16px; }
  .modal-footer { align-items: stretch; flex-direction: column-reverse; }
  .modal-footer button { width: 100%; }
  .router-update-log > div,
  .device-history-logs p { grid-template-columns: minmax(0, 1fr); }
  .routers-panel tbody,
  .device-register-table tbody,
  .user-register-table tbody { grid-template-columns: minmax(0, 1fr); }
  .routers-panel .table-wrap,
  .device-register-panel .table-wrap,
  .user-register-panel .table-wrap { padding: 10px; }
}