/* DB Sentinel — identidade: sala de controle de banco de dados.
   Paleta: ink-blue profundo, painéis aço, âmbar alerta, teal saudável, vermelho crítico. */
:root {
  --bg:        #090e1a;
  --panel:     #111827;
  --panel-2:   #172033;
  --panel-3:   #1c2a3f;
  --line:      #1f2f47;
  --line-2:    #2a3d58;
  --text:      #e2e8f5;
  --text-2:    #b8c5d8;
  --muted:     #6b7fa0;
  --amber:     #f0a332;
  --amber-d:   #f0a33222;
  --teal:      #2dd4a8;
  --teal-d:    #2dd4a818;
  --red:       #f05c6e;
  --red-d:     #f05c6e1a;
  --blue:      #5b9cf5;
  --blue-d:    #5b9cf518;
  --sidebar-w: 228px;
  --topbar-h:  52px;
  --mono:      "IBM Plex Mono", monospace;
  --sans:      "IBM Plex Sans", system-ui, sans-serif;
  --r:         8px;
  --r-sm:      5px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

/* ── LOGIN ───────────────────────────────────────────────────── */
#login-overlay {
  position: fixed; inset: 0; background: var(--bg);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.login-box {
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 40px 36px; width: 360px; max-width: 95vw;
  box-shadow: 0 20px 60px #00000060;
}
.login-brand { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.login-brand .brand-mark { color: var(--amber); }
.login-sub { color: var(--muted); font-size: 13px; margin-bottom: 28px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-hint { margin-top: 20px; text-align: center; }
.login-hint-2 { display: inline-block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.login-error { background: var(--red-d); border: 1px solid var(--red); color: var(--red); border-radius: var(--r-sm); padding: 8px 12px; font-size: 13px; }
.btn-full { width: 100%; justify-content: center; }

/* ── APP SHELL ───────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ── TOPBAR ──────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  z-index: 50; gap: 12px;
}
.topbar-left  { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.sidebar-toggle { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; font-size: 18px; line-height: 1; transition: color .15s; }
.sidebar-toggle:hover { color: var(--text); }

.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-mark { color: var(--amber); font-size: 18px; animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.3} }
@media (prefers-reduced-motion:reduce) { .brand-mark { animation:none } }
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: .04em; }
.brand-tag { font-family: var(--mono); font-size: 10px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 6px; }

.breadcrumb { display: flex; align-items: center; gap: 6px; overflow: hidden; }
.breadcrumb-sep { color: var(--line-2); }
.breadcrumb-inst { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-engine { font-family: var(--mono); font-size: 10px; color: var(--blue); border: 1px solid var(--blue-d); background: var(--blue-d); border-radius: 4px; padding: 1px 6px; }
.breadcrumb-status { display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:2px; vertical-align:middle; }
.breadcrumb-status.online { background: var(--teal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 25%, transparent); }
.breadcrumb-status.offline { background: var(--red); box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 25%, transparent); }

.topbar-user { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.topbar-user .role-chip { font-family: var(--mono); font-size: 10px; border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 6px; color: var(--muted); }
.topbar-user .acct-chip { font-size: 10px; border-radius: 4px; padding: 1px 7px; color: var(--amber); background: var(--amber-d); white-space: nowrap; }
/* Trocar de conta e um <select> NATIVO. Sem appearance:none o Windows desenha o
   campo com fundo BRANCO por baixo, e o texto ambar da chip ficava amarelo sobre
   branco -- ilegivel e fora da paleta. Pintamos as DUAS pontas: o campo e a lista
   suspensa (color-scheme:dark faz o menu nativo nascer escuro; sem ele a lista
   continua branca mesmo com o campo estilizado). */
.topbar-user select.acct-select {
  appearance: none; -webkit-appearance: none;
  color-scheme: dark;
  background-color: var(--panel-3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%23f0a332' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  color: var(--amber);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 3px 22px 3px 9px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  max-width: 210px;
  text-overflow: ellipsis;
  transition: border-color .15s, background-color .15s;
}
.topbar-user select.acct-select:hover { border-color: var(--amber); background-color: var(--amber-d); }
.topbar-user select.acct-select:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.topbar-user select.acct-select option { background: var(--panel-2); color: var(--text); }

/* ── APP BODY ────────────────────────────────────────────────── */
.app-body { display: flex; flex: 1; overflow: hidden; }

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow-y: auto; transition: width .2s, transform .2s;
}
.sidebar.collapsed { width: 0; overflow: hidden; }

.sidebar-nav { display: flex; flex-direction: column; padding: 10px 8px; gap: 2px; flex: 1; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--text-2); text-decoration: none; font-size: 13.5px;
  transition: background .15s, color .15s; cursor: pointer; white-space: nowrap;
}
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active { background: var(--amber-d); color: var(--amber); font-weight: 600; }
.nav-item svg { flex-shrink: 0; opacity: .7; }
.nav-item.active svg { opacity: 1; }
.nav-badge { margin-left: auto; background: var(--panel-3); color: var(--muted); font-family: var(--mono); font-size: 10px; border-radius: 10px; padding: 1px 7px; }
.nav-item.active .nav-badge { background: var(--amber-d); color: var(--amber); }
.nav-sep { height: 1px; background: var(--line); margin: 8px 4px; }
.nav-section-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; padding: 4px 12px; }
.nav-admin, .nav-op { /* shown/hidden by JS based on role */ }

/* Rodape do menu = cartao de identidade. Sao tres fatos com pesos diferentes:
   QUEM sou (nome), o QUE posso (perfil) e em QUAL conta estou. O ultimo e o que
   mais importa em ambiente multi-conta e era justamente o que se perdia numa
   linha unica de texto cinza. Cartao proprio para o bloco nao encostar na borda
   nem se confundir com um item de navegacao. */
.sidebar-footer { padding: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.sidebar-user-info {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--amber-d); color: var(--amber); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; border: 1px solid var(--line-2); }
.user-name-block { min-width: 0; flex: 1; }
.user-name  { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.user-meta  { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.user-role-pill {
  font-family: var(--mono); font-size: 9px; line-height: 1.6;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 0 5px; border-radius: 3px;
  background: var(--panel-3); color: var(--text-2); border: 1px solid var(--line-2);
}
/* Dono nao e so mais um perfil: e quem responde pela conta. Merece cor propria. */
.user-role-pill.is-owner { background: var(--teal-d); color: var(--teal); border-color: var(--line-2); }
.user-acct {
  margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--line-2);
  font-size: 11px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-role  { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.btn-logout { background: none; border: 1px solid var(--line-2); color: var(--muted); border-radius: var(--r-sm); padding: 6px 12px; cursor: pointer; font-size: 12px; font-family: var(--sans); transition: all .15s; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-logout:hover { border-color: var(--red); color: var(--red); }
.btn-logout:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

/* ── MAIN CONTENT ────────────────────────────────────────────── */
.main-content { flex: 1; overflow-y: auto; background: var(--bg); }
.view { padding: 24px; max-width: 1400px; }
.view.hidden { display: none; }
.view.active { display: block; }

.view-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.view-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.view-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── FORMS / FIELDS ──────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
/* Campos de formulario.
   A lista era por TIPO EXPLICITO (input[type=text], ...), e isso deixou um buraco:
   `<input id="x">` sem atributo type NAO casa com input[type=text] -- o navegador
   trata como texto, o seletor nao. Esses campos ficavam com o visual padrao do
   Windows, ou seja, FUNDO BRANCO no meio de um painel escuro. Foi o que aconteceu
   com a configuracao de e-mail, a integracao com chamados e os alertas.
   Agora a regra e por exclusao: vale para qualquer campo de texto, menos os que o
   sistema desenha (marcar/radio/slider/arquivo) e quebrariam se recebessem fundo. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select, textarea {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 11px; font-family: var(--sans); font-size: 13px;
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--amber); }
input::placeholder, textarea::placeholder { color: var(--muted); }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 16px; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 500; transition: all .15s; white-space: nowrap; }
.btn-primary { background: var(--amber); color: #1a1000; border-color: var(--amber); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--panel-2); border-color: var(--line-2); }
.btn:disabled { opacity: .4; cursor: wait; }
.btn-icon { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; font-size: 16px; transition: color .15s; }
.btn-icon:hover { color: var(--text); }

/* ── PANELS ──────────────────────────────────────────────────── */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin-bottom: 16px; }
.panel h3 { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.panel h4 { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .1em; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.panel-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; margin-bottom: 14px; color: var(--text-2); }
.panel-title svg { opacity: .7; flex-shrink: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 1100px) { .grid-3 { grid-template-columns: 1fr; } }

/* ── STATUS DOTS ─────────────────────────────────────────────── */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.status-dot.online  { background: var(--teal);  box-shadow: 0 0 5px var(--teal); }
.status-dot.warning { background: var(--amber); box-shadow: 0 0 5px var(--amber); }
.status-dot.offline { background: var(--muted); }

/* ── SCOPE BADGE ─────────────────────────────────────────────── */
.scope-badge { font-family: var(--mono); font-size: 10px; border-radius: 4px; padding: 2px 7px; border: 1px solid; }
.scope-all  { color: var(--blue);  border-color: var(--blue-d);  background: var(--blue-d); }
.scope-inst { color: var(--amber); border-color: var(--amber-d); background: var(--amber-d); }

/* ── DASHBOARD ───────────────────────────────────────────────── */
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 12px; margin-bottom: 20px; }
.dash-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; position: relative; overflow: hidden; }
.dash-kpi::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--line); }
.dash-kpi.ok::after   { background:var(--teal); }
.dash-kpi.warn::after { background:var(--amber); }
.dash-kpi.crit::after { background:var(--red); }
.dash-kpi .dv { font-family:var(--mono); font-size:26px; font-weight:500; }
.dash-kpi .dl { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-top:5px; }
.dash-kpi.warn .dv { color:var(--amber); }
.dash-kpi.crit .dv { color:var(--red); }
.dash-kpi.ok   .dv { color:var(--teal); }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 1200px) { .dash-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .dash-grid { grid-template-columns: 1fr; } }
.dash-panel { margin-bottom: 0; }

.dash-list { font-size: 12.5px; }
.dash-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); align-items: center; }
.dash-row:last-child { border-bottom: none; }
.dash-row .dk { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.dash-row .dv2 { color: var(--muted); white-space: nowrap; font-family: var(--mono); font-size: 11.5px; }
.dash-row.crit .dk, .dash-row.crit .dv2 { color: var(--red); }
.dash-row.warn .dk { color: var(--amber); }
.dash-row.ok   .dk { color: var(--teal); }
.dash-inst-link { color: var(--blue); cursor: pointer; font-weight: 600; text-decoration: none; }
.dash-inst-link:hover { text-decoration: underline; }
.eol-badge { font-family:var(--mono); font-size:10px; border-radius:4px; padding:1px 7px; border:1px solid; white-space:nowrap; }
.eol-ok      { color:var(--teal);  border-color:var(--teal-d);  background:var(--teal-d); }
.eol-warn    { color:var(--amber); border-color:var(--amber-d); background:var(--amber-d); }
.eol-crit    { color:var(--red);   border-color:var(--red-d);   background:var(--red-d); }
.eol-unknown { color:var(--muted); border-color:var(--line-2);  background:var(--panel-2); }

/* ── INSTANCES TABLE ─────────────────────────────────────────── */
.search-input { min-width: 240px; }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fchip { background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); border-radius: 14px; padding: 4px 12px; font-size: 12px; cursor: pointer; font-family: var(--sans); transition: all .15s; }
.fchip:hover { border-color: var(--line-2); color: var(--text-2); }
.fchip.active { background: var(--amber-d); border-color: var(--amber); color: var(--amber); }

.inst-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.inst-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 12px 14px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.inst-table th.sortable { cursor: pointer; user-select: none; }
.inst-table th.sortable:hover { color: var(--text-2); }
.inst-table th.sorted { color: var(--amber); }
.inst-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.inst-table tbody tr:hover { background: var(--panel-2); }
.inst-table tbody tr:last-child td { border-bottom: none; }
.inst-table .num { text-align: right; font-family: var(--mono); }
.inst-score-cell { font-family: var(--mono); font-size: 15px; font-weight: 500; }
.inst-score-cell.s-ok   { color: var(--teal); }
.inst-score-cell.s-warn { color: var(--amber); }
.inst-score-cell.s-crit { color: var(--red); }
.inst-score-cell.s-none { color: var(--muted); }
.crit-badge { color: var(--red);   font-family: var(--mono); font-size: 12px; font-weight: 600; }
.warn-badge { color: var(--amber); font-family: var(--mono); font-size: 12px; }

.pagination { display: flex; align-items: center; gap: 6px; padding: 14px 0; justify-content: center; flex-wrap: wrap; }
.page-btn { background: var(--panel-2); border: 1px solid var(--line); color: var(--text-2); border-radius: var(--r-sm); padding: 5px 12px; cursor: pointer; font-size: 12px; transition: all .15s; }
.page-btn:hover { border-color: var(--line-2); }
.page-btn.active { background: var(--amber-d); border-color: var(--amber); color: var(--amber); }
.page-btn:disabled { opacity: .3; cursor: default; }

/* ── TABS (instance detail) ──────────────────────────────────── */
.tabs { display: flex; gap: 2px; padding: 0 24px 0; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: nowrap; overflow-x: auto; }
.tab { background: none; border: none; color: var(--muted); font-family: var(--sans); font-size: 13px; padding: 13px 18px; cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s; white-space: nowrap; }
.tab:hover { color: var(--text-2); }
.tab.active { color: var(--amber); border-bottom-color: var(--amber); font-weight: 600; }
.tab-content { padding: 20px 24px 60px; max-width: 1400px; }
.tab-panel { display: none; }
.tab-panel.active, .tab-panel:not(.hidden) { display: block; }
.tab-panel.hidden { display: none !important; }

/* ── KPIs (instance) ─────────────────────────────────────────── */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 17px; position: relative; overflow: hidden; }
.kpi::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--line); }
.kpi.good::after { background:var(--teal); }
.kpi.warn::after { background:var(--amber); }
.kpi.crit::after { background:var(--red); }
.kpi .v { font-family:var(--mono); font-size:22px; font-weight:500; }
.kpi .l { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; margin-top:5px; }
.kpi.warn .v { color:var(--amber); }
.kpi.crit .v { color:var(--red); }
.kpi.good .v { color:var(--teal); }

/* ── DATA LISTS ──────────────────────────────────────────────── */
.data-list { font-family:var(--mono); font-size:12.5px; }
.data-row { display:flex; justify-content:space-between; gap:10px; padding:7px 2px; border-bottom:1px solid var(--line); align-items:center; }
.data-row:last-child { border-bottom:none; }
.data-row .k { color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.data-row .v { color:var(--muted); white-space:nowrap; }
.data-row.crit .k, .data-row.crit .v { color:var(--red); }
.bar { height:3px; background:var(--amber); border-radius:2px; margin-top:4px; opacity:.6; }
.wait-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; flex:0 0 auto; }
.empty { color:var(--muted); font-style:italic; padding:12px 0; font-family:var(--sans); font-size:13px; }

/* ── QUERY TABLE ─────────────────────────────────────────────── */
.qtable { width:100%; border-collapse:collapse; font-size:12.5px; }
.qtable th { text-align:left; color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:10px 8px; border-bottom:1px solid var(--line-2); white-space:nowrap; }
.qtable td { padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.qtable tbody tr:hover { background:var(--panel-2); }
.qtable .num { text-align:right; font-family:var(--mono); }
.qtable td.sql { font-family:var(--mono); max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:help; color:var(--text-2); }
.qtable .regression { color:var(--red); font-weight:600; }
.qtable th.q-sortable { cursor:pointer; user-select:none; }
.qtable th.q-sortable:hover { color:var(--text-2); }
.qtable .q-sort-ind { color:var(--amber); font-family:var(--mono); }
.linklike { background:none; border:none; color:var(--blue); cursor:pointer; font-size:12px; font-family:var(--mono); }
.linklike:hover { text-decoration:underline; }

/* ── ASSESSMENT ──────────────────────────────────────────────── */
.assessment-top { display:grid; grid-template-columns:200px 1fr; gap:16px; margin-bottom:20px; }
@media (max-width:700px) { .assessment-top { grid-template-columns:1fr; } }
.score-card { position:relative; display:flex; align-items:center; justify-content:center; min-height:190px; }
.score-ring { width:140px; height:140px; transform:rotate(-90deg); }
.ring-bg { fill:none; stroke:var(--panel-2); stroke-width:10; }
.ring-fg { fill:none; stroke:var(--teal); stroke-width:10; stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset 1s ease, stroke .5s; }
.score-text { position:absolute; text-align:center; }
.score-text span { font-family:var(--mono); font-size:34px; font-weight:500; }
.score-text small { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.score-summary { display:flex; flex-direction:column; gap:10px; }
.score-pills { display:flex; gap:8px; flex-wrap:wrap; }
.pill { font-family:var(--mono); font-size:12px; border-radius:12px; padding:3px 13px; border:1px solid var(--line); }
.pill.ok       { color:var(--teal);  border-color:var(--teal);  background:var(--teal-d); }
.pill.warning  { color:var(--amber); border-color:var(--amber); background:var(--amber-d); }
.pill.critical { color:var(--red);   border-color:var(--red);   background:var(--red-d); }
.assessment-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

.check-card { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--line-2); border-radius:var(--r); padding:15px 18px; margin-bottom:10px; position:relative; }
.check-card.critical { border-left-color:var(--red); }
.check-card.warning  { border-left-color:var(--amber); }
.check-card.ok       { border-left-color:var(--teal); }
.check-card.info     { border-left-color:var(--blue); }
.check-card.checking { opacity:.55; pointer-events:none; }
.check-card.checking::after { content:'Verificando…'; position:absolute; right:14px; top:14px; font-family:var(--mono); font-size:11px; color:var(--amber); animation:blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:0} }
.check-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.check-head strong { font-size:13.5px; }
.check-head-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.cat { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.btn-recheck { background:var(--panel-2); border:1px solid var(--line-2); color:var(--muted); border-radius:var(--r-sm); padding:3px 9px; cursor:pointer; font-family:var(--mono); font-size:11px; transition:all .15s; }
.btn-recheck:hover { border-color:var(--amber); color:var(--amber); background:var(--amber-d); }
.check-vals { font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:6px; }
.check-vals b { color:var(--text-2); font-weight:500; }
.check-desc { font-size:13px; color:var(--text-2); line-height:1.5; }
.check-card.ok .check-desc { color:var(--muted); }
.fix { background:#06101e; border:1px solid var(--line); border-radius:var(--r-sm); font-family:var(--mono); font-size:12px; padding:10px 12px; margin-top:10px; color:var(--teal); overflow-x:auto; white-space:pre; }

/* ── CHAT ────────────────────────────────────────────────────── */
.chat-wrap { display:flex; flex-direction:column; height:calc(100vh - var(--topbar-h) - 130px); min-height:400px; }
.chat-wrap-global { display:flex; flex-direction:column; }
.chat-header { border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:12px; }
.chat-header-top { display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.chat-header-top h3 { margin:0; }
.chat-suggestions { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.chip { background:var(--panel-2); border:1px solid var(--line); color:var(--text-2); border-radius:14px; padding:5px 12px; font-size:12px; cursor:pointer; font-family:var(--sans); transition:all .15s; }
.chip:hover { border-color:var(--amber); color:var(--amber); }
.chat-messages { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:2px; }
.msg { max-width:88%; padding:11px 15px; border-radius:var(--r); font-size:13.5px; line-height:1.6; }
.msg.user { align-self:flex-end; background:var(--panel-2); border:1px solid var(--line-2); }
.msg.ai   { align-self:flex-start; background:#0c1422; border:1px solid var(--line); border-left:3px solid var(--amber); white-space:pre-wrap; }
.msg.ai code, .msg.ai pre { font-family:var(--mono); font-size:12px; }
.msg.ai pre { background:#060d18; border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; margin:8px 0; overflow-x:auto; }
.msg.ai strong { color:var(--text); }
.msg .tools { font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:6px; border-top:1px dashed var(--line); padding-top:6px; }
.msg.thinking { opacity:.55; font-style:italic; color:var(--muted); }
.chat-input { display:flex; gap:10px; margin-top:10px; align-items:flex-end; }
.chat-input textarea { flex:1; resize:none; }
.chat-attach-btn { flex-shrink:0; align-self:stretch; white-space:nowrap; }
/* Anexos do chat (imagens/PDF/texto) */
.chat-attachments { display:flex; flex-wrap:wrap; gap:6px; margin:8px 2px 0; }
.chat-att-chip { display:inline-flex; align-items:center; gap:6px; max-width:220px;
  border:1px solid var(--line); border-radius:999px; padding:3px 6px 3px 8px; font-size:12px; background:var(--panel-2, var(--panel)); }
.chat-att-ic { font-size:10px; font-family:var(--mono); color:var(--teal); border:1px solid var(--line); border-radius:4px; padding:0 4px; }
.chat-att-nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-att-x { background:none; border:none; color:var(--muted); cursor:pointer; font-size:15px; line-height:1; padding:0 2px; }
.chat-att-x:hover { color:var(--red); }

/* ── SETTINGS ────────────────────────────────────────────────── */
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:800px) { .settings-grid { grid-template-columns:1fr; } }
.settings-form { display:flex; flex-direction:column; gap:14px; }
.settings-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:8px 0; border-bottom:1px solid var(--line); }
.settings-row:last-child { border-bottom:none; }
.settings-row-label { font-size:13.5px; flex:1; }
.settings-row-label small { display:block; color:var(--muted); font-size:11.5px; margin-top:2px; }
.settings-row input[type=number], .settings-row select { width:120px; text-align:right; }
.toggle-wrap { display:flex; align-items:center; gap:8px; }
.toggle { position:relative; width:40px; height:22px; cursor:pointer; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:var(--line-2); border-radius:22px; transition:.2s; }
.toggle-slider::before { content:''; position:absolute; width:16px; height:16px; left:3px; bottom:3px; background:var(--muted); border-radius:50%; transition:.2s; }
.toggle input:checked + .toggle-slider { background:var(--teal-d); border:1px solid var(--teal); }
.toggle input:checked + .toggle-slider::before { transform:translateX(18px); background:var(--teal); }

/* ── USERS / MODAL ───────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:#00000070; display:flex; align-items:center; justify-content:center; z-index:200; }
.modal-box { background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r); padding:28px; width:440px; max-width:96vw; box-shadow:0 20px 60px #00000060; }
.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.modal-head h3 { font-size:16px; }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.role-pill { font-family:var(--mono); font-size:11px; border-radius:4px; padding:2px 8px; border:1px solid; }
.role-admin    { color:var(--red);   border-color:var(--red-d);   background:var(--red-d); }
.role-operator { color:var(--amber); border-color:var(--amber-d); background:var(--amber-d); }
.role-viewer   { color:var(--muted); border-color:var(--line-2);  background:var(--panel-2); }
.active-badge   { color:var(--teal); font-size:12px; }
.inactive-badge { color:var(--muted); font-size:12px; }

/* ── HELP TOOLTIP ─────────────────────────────────────────────── */
.help-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--panel-3); border: 1px solid var(--line-2);
  color: var(--muted); font-size: 9px; font-weight: 700;
  cursor: help; position: relative; flex-shrink: 0;
  vertical-align: middle; margin-left: 4px; font-family: var(--sans);
  line-height: 1;
}
.help-tip::after {
  content: attr(data-tip);
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  background: var(--panel-3); border: 1px solid var(--line-2);
  color: var(--text-2); font-size: 12px; font-weight: 400;
  padding: 7px 11px; border-radius: var(--r-sm);
  white-space: normal; max-width: 260px; z-index: 200;
  box-shadow: 0 6px 20px #00000050; line-height: 1.45;
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.help-tip:hover::after { opacity: 1; }

/* ── DASHBOARD FILTER BAR ──────────────────────────────────────── */
.dash-filter-bar { margin-bottom: 16px; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.dash-filter-basic   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-filter-advanced { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.filter-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.filter-input-sm  { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; font-family: var(--sans); font-size: 12px; min-width: 160px; }
.filter-select-sm { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 8px; font-family: var(--sans); font-size: 12px; }
.filter-input-sm:focus, .filter-select-sm:focus { outline: none; border-color: var(--amber); }
.btn-sm { padding: 5px 12px !important; font-size: 12px !important; }

/* ── SECTION FILTER ROW ────────────────────────────────────────── */
.section-filter-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.section-search { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 8px; font-size: 11px; font-family: var(--sans); width: 100px; }
.section-search:focus { outline: none; border-color: var(--amber); }

/* ── MINI PAGINATION ───────────────────────────────────────────── */
.mini-pg { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); min-height: 28px; }
.mini-pg-btn { background: var(--panel-2); border: 1px solid var(--line); color: var(--text-2); border-radius: 4px; padding: 2px 9px; cursor: pointer; font-size: 14px; line-height: 1.4; transition: all .15s; }
.mini-pg-btn:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.mini-pg-btn:disabled { opacity: .3; cursor: default; }
.mini-pg-info { font-family: var(--mono); font-size: 11px; color: var(--muted); padding: 0 2px; }

/* ── GLOBAL DBA VIRTUAL SCOPE ──────────────────────────────────── */
.global-chat-scope { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); flex-wrap: wrap; }
.scope-select { background: var(--panel-3); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 6px 10px; font-family: var(--sans); font-size: 13px; min-width: 200px; flex: 1; }
.scope-select:focus { outline: none; border-color: var(--amber); }

/* ── INSTANCES TABLE — Acessar ─────────────────────────────────── */
.btn-acessar { background: var(--amber-d); border: 1px solid var(--amber); color: var(--amber); border-radius: var(--r-sm); padding: 5px 14px; cursor: pointer; font-size: 12px; font-weight: 600; font-family: var(--sans); white-space: nowrap; transition: all .15s; }
.btn-acessar:hover { background: var(--amber); color: #1a1000; }
.inst-table tbody tr { cursor: pointer; }

/* ── SETTINGS TOGGLE ───────────────────────────────────────────── */
.td-toggle { display: flex; align-items: center; gap: 8px; }
.td-toggle .td-toggle-label { font-size: 11px; color: var(--muted); font-family: var(--mono); white-space: nowrap; }

/* ── TABLE RESPONSIVE ──────────────────────────────────────────── */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── SETTINGS SINGLE COL ──────────────────────────────────────── */
.settings-single { display: flex; flex-direction: column; gap: 14px; }
/* Seções expansíveis das Configurações (details/summary) */
.settings-section { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.settings-section > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap; padding: 14px 16px; user-select: none; }
.settings-section > summary::-webkit-details-marker { display: none; }
.settings-section > summary::before { content: '▸'; color: var(--muted); font-size: 12px; transition: transform .15s; }
.settings-section[open] > summary::before { transform: rotate(90deg); }
.settings-section > summary:hover .ss-title { color: var(--amber); }
.settings-section .ss-title { font-weight: 600; font-size: 14px; color: var(--text); }
.settings-section .ss-sub { color: var(--muted); font-size: 12px; }
.settings-section > .settings-form,
.settings-section > .table-responsive,
.settings-section > .panel-head,
.settings-section > p { margin-left: 16px; margin-right: 16px; }
.settings-section > .settings-form { padding-bottom: 14px; }
.settings-section > .table-responsive { padding-bottom: 14px; }
.link-restore { background: none; border: none; color: var(--blue); cursor: pointer; font-size: 11px; white-space: nowrap; padding: 0; }
.link-restore:hover { color: var(--amber); text-decoration: underline; }
/* Chips de dia da semana (janela de manutenção) */
.wd-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 4px 8px; cursor: pointer; font-size: 12px; user-select: none; }
.wd-chip:has(input:checked) { border-color: var(--amber); color: var(--amber); background: var(--amber-d); }
.wd-chip input { margin: 0; }
/* Configurações a nível de instância (cards expansíveis) */
.inst-cfg-warn { margin: 0 16px 12px; background: var(--amber-d); color: var(--text-2);
  border: 1px solid var(--amber); border-radius: var(--r-sm); padding: 9px 12px; font-size: 12px; line-height: 1.5; }
#settingsInstList { margin: 0 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.inst-cfg { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2, var(--panel)); overflow: hidden; }
.inst-cfg > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 12px; }
.inst-cfg > summary::-webkit-details-marker { display: none; }
.inst-cfg > summary:hover { background: var(--hover, rgba(255,255,255,.03)); }
.inst-cfg-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inst-cfg-badges { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.inst-cfg-chevron { color: var(--muted); font-size: 12px; }
.inst-cfg[open] .inst-cfg-chevron { color: var(--amber); }
.inst-cfg-body { padding: 4px 12px 14px; border-top: 1px solid var(--line); }
.inst-cfg-sub { font-weight: 600; font-size: 12.5px; color: var(--text); margin: 14px 0 4px; }
.inst-pill { font-size: 11px; font-family: var(--mono); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.inst-pill.is-active { color: var(--teal); border-color: var(--teal); }
.inst-pill.is-paused { color: var(--amber); border-color: var(--amber); background: var(--amber-d); }
.inst-pill.is-custom { color: var(--amber); border-color: var(--amber); }
.inst-pill.is-global { color: var(--muted); }
.maint-win-list { display: flex; flex-direction: column; gap: 6px; }
.maint-win-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; font-size: 12.5px; }
.maint-win-actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn-sm.danger { color: var(--red); }
.btn-sm.danger:hover { color: #fff; background: var(--red); }
/* Aviso de escopo amplo / custo no chat global */
.scope-cost-warn { background: var(--amber-d); color: var(--amber); border: 1px solid var(--amber);
  border-radius: var(--r-sm); padding: 8px 12px; font-size: 12px; margin: 8px 0 4px; line-height: 1.4; }
/* Aviso de melhores práticas na aba Assessment */
.assessment-warn { background: var(--amber-d); color: var(--text-2); border: 1px solid var(--amber);
  border-left-width: 3px; border-radius: var(--r-sm); padding: 10px 14px; font-size: 12.5px;
  margin: 14px 0; line-height: 1.5; }
.assessment-warn strong { color: var(--amber); }

/* ── SORT BUTTON ──────────────────────────────────────────────── */
.sort-btn { background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); border-radius: var(--r-sm); width: 28px; height: 28px; cursor: pointer; font-size: 14px; display:flex; align-items:center; justify-content:center; transition: all .15s; flex-shrink:0; }
.sort-btn:hover { border-color: var(--amber); color: var(--amber); }
.sort-btn.asc::after  { content: '↑'; }
.sort-btn.desc::after { content: '↓'; }

/* ── FLOATING FILTER PANEL ────────────────────────────────────── */
.btn-filter-toggle { display:flex; align-items:center; gap:6px; background:var(--panel-2); border:1px solid var(--line); color:var(--text-2); border-radius:var(--r-sm); padding:6px 12px; cursor:pointer; font-size:13px; font-family:var(--sans); transition:all .15s; }
.btn-filter-toggle:hover { border-color:var(--amber); color:var(--amber); }
.btn-filter-toggle.active { background:var(--amber-d); border-color:var(--amber); color:var(--amber); }
.filter-badge { background:var(--amber); color:#1a1000; border-radius:10px; font-size:10px; font-weight:700; padding:1px 6px; font-family:var(--mono); }

.filter-panel { position:fixed; top:var(--topbar-h); right:0; bottom:0; width:320px; max-width:100vw; background:var(--panel); border-left:1px solid var(--line-2); z-index:300; display:flex; flex-direction:column; box-shadow:-4px 0 20px #00000050; transition:transform .25s; }
.filter-panel.hidden { transform:translateX(100%); }
.filter-panel:not(.hidden) { transform:translateX(0); }
.filter-panel-head { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line); flex-shrink:0; }
.filter-panel-body { flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:14px; }
.filter-panel-foot { padding:14px 18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; flex-shrink:0; }
.filter-group { display:flex; flex-direction:column; gap:6px; }
.fcheck-group { display:flex; flex-direction:column; gap:5px; }
.fcheck-group.scrollable { max-height:160px; overflow-y:auto; padding-right:4px; }
.fcheck { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-2); cursor:pointer; }
.fcheck input[type=checkbox] { width:14px; height:14px; accent-color:var(--amber); cursor:pointer; }

.active-filter-pills { display:flex; gap:6px; flex-wrap:wrap; }
.active-filter-chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.filter-pill { display:flex; align-items:center; gap:5px; background:var(--amber-d); border:1px solid var(--amber); color:var(--amber); border-radius:12px; padding:3px 10px; font-size:11px; font-family:var(--mono); }
.filter-pill button { background:none; border:none; color:var(--amber); cursor:pointer; font-size:12px; padding:0; line-height:1; }

/* ── OBSOLESCENCE + PATCHES BOX COLORS ──────────────────────────── */
.eol-obsolete  { color:var(--red); }
.eol-alert     { color:var(--amber); }
.eol-ok        { color:var(--teal); }
.patch-behind-many { color:var(--red); }
.patch-behind-1    { color:var(--amber); }
.patch-current     { color:var(--teal); }
.patch-obsolete    { color:var(--red); }

/* ── INSTANCE NOTES ───────────────────────────────────────────── */
.notes-view { display:flex; flex-direction:column; gap:0; }
.notes-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:10px; flex-wrap:wrap; }
.notes-header h3 { margin:0; }
.notes-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:700px) { .notes-grid { grid-template-columns:1fr; } }
.notes-card { padding:14px 16px; }
.notes-card h4 { margin-bottom:10px; font-size:13px; }
.notes-card-wide { grid-column:1/-1; }
.notes-textarea { width:100%; min-height:100px; resize:vertical; background:var(--panel-2); color:var(--text); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px; font-family:var(--sans); font-size:13px; line-height:1.5; }
.notes-textarea[readonly] { background:transparent; border-color:transparent; cursor:default; color:var(--text-2); }
.notes-textarea[readonly]:focus { outline:none; border-color:transparent; }
.notes-textarea-tall { min-height:150px; }
.notes-textarea:not([readonly]) { border-color:var(--amber); }

/* ── HISTORY TIMELINE ─────────────────────────────────────────── */
.history-timeline { display:flex; flex-direction:column; gap:0; }
.history-item { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.history-item:last-child { border-bottom:none; }
.hist-icon { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; border:2px solid; }
.hist-icon.info     { border-color:var(--blue);  background:var(--blue-d); }
.hist-icon.warning  { border-color:var(--amber); background:var(--amber-d); }
.hist-icon.critical { border-color:var(--red);   background:var(--red-d); }
.hist-body { flex:1; min-width:0; }
.hist-title { font-weight:600; font-size:13.5px; margin-bottom:3px; }
.hist-meta { display:flex; gap:10px; flex-wrap:wrap; font-size:11px; color:var(--muted); font-family:var(--mono); margin-bottom:4px; }
.hist-ticket { color:var(--blue); }
.hist-desc { font-size:13px; color:var(--text-2); line-height:1.5; }
.hist-type-badge { font-family:var(--mono); font-size:10px; border-radius:4px; padding:2px 7px; border:1px solid var(--line-2); color:var(--muted); }
.hist-empty { color:var(--muted); font-style:italic; padding:20px 0; text-align:center; }

/* ── ALERTS LIST ──────────────────────────────────────────────── */
.alert-card { background:var(--panel); border:1px solid var(--line); border-left:3px solid; border-radius:var(--r); padding:14px 16px; margin-bottom:10px; }
.alert-card.critical { border-left-color:var(--red); }
.alert-card.high     { border-left-color:var(--amber); }
.alert-card.warning  { border-left-color:var(--blue); }
.alert-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:6px; }
.alert-title { font-weight:600; font-size:13.5px; }
.alert-badges { display:flex; gap:6px; align-items:center; flex-shrink:0; flex-wrap:wrap; }
.sev-badge { font-family:var(--mono); font-size:10px; border-radius:4px; padding:2px 8px; border:1px solid; }
.sev-critical { color:var(--red);   border-color:var(--red-d);   background:var(--red-d); }
.sev-high     { color:var(--amber); border-color:var(--amber-d); background:var(--amber-d); }
.sev-warning  { color:var(--blue);  border-color:var(--blue-d);  background:var(--blue-d); }
.alert-desc { font-size:13px; color:var(--text-2); line-height:1.5; margin-bottom:8px; }
.alert-details { background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; font-size:12.5px; margin-bottom:8px; display:none; }
.alert-details.open { display:block; }
.alert-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.alert-time { font-family:var(--mono); font-size:11px; color:var(--muted); }
.alert-actions { display:flex; gap:8px; }
.btn-expand { background:none; border:1px solid var(--line-2); color:var(--muted); border-radius:var(--r-sm); padding:3px 10px; cursor:pointer; font-size:11px; font-family:var(--mono); transition:all .15s; }
.btn-expand:hover { border-color:var(--blue); color:var(--blue); }
.btn-resolve { background:var(--teal-d); border:1px solid var(--teal); color:var(--teal); border-radius:var(--r-sm); padding:4px 12px; cursor:pointer; font-size:12px; font-family:var(--sans); font-weight:600; transition:all .15s; }
.btn-resolve:hover { background:var(--teal); color:var(--bg); }
.resolve-input { width:100%; margin-top:8px; }
.alert-empty { color:var(--muted); font-style:italic; padding:20px; text-align:center; }

/* ── SCOPE MULTI-SELECT (DBA Virtual) ────────────────────────────── */
.scope-multi-wrap { position:relative; flex:1; }
.scope-multi-btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--panel-3); border:1px solid var(--line-2); color:var(--text); border-radius:var(--r-sm); padding:7px 12px; cursor:pointer; font-family:var(--sans); font-size:13px; transition:border-color .15s; }
.scope-multi-btn:hover, .scope-multi-btn.open { border-color:var(--amber); }
.scope-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:0 8px 24px #00000060; z-index:200; }
.scope-search { padding:10px 12px 6px; }
.scope-list { max-height:220px; overflow-y:auto; padding:4px 12px 10px; display:flex; flex-direction:column; gap:4px; }
.scope-all-opt { border-bottom:1px solid var(--line); padding-bottom:6px; margin-bottom:4px; }

/* ── DASHBOARD EXPAND BUTTON ──────────────────────────────────────── */
.expand-btn { background:var(--panel-2); border:1px solid var(--line); color:var(--muted); border-radius:4px; width:28px; height:28px; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.expand-btn:hover { border-color:var(--blue); color:var(--blue); }
.expand-modal-box { width:800px; max-width:98vw; }

/* ── MANAGED INSTANCES FORM ───────────────────────────────────────── */
.manage-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:4px 0 16px; }
.manage-form .field { display:flex; flex-direction:column; gap:5px; }
.manage-form .field.full { grid-column:1/-1; }
.manage-form label { font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.collection-status-badge { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:11px; border-radius:4px; padding:2px 8px; }
.cs-pending  { color:var(--muted); border:1px solid var(--line-2); }
.cs-ok       { color:var(--teal);  border:1px solid var(--teal-d);  background:var(--teal-d); }
.cs-error    { color:var(--red);   border:1px solid var(--red-d);   background:var(--red-d); }
.cs-running  { color:var(--amber); border:1px solid var(--amber-d); background:var(--amber-d); }
.error-msg-cell { font-family:var(--mono); font-size:11px; color:var(--red); max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:help; }

/* ── HISTORY STATUS BADGE ──────────────────────────────────────────── */
.hist-status { font-family:var(--mono); font-size:10px; border-radius:4px; padding:1px 7px; border:1px solid; }
.hs-resolved    { color:var(--teal);  border-color:var(--teal-d);  background:var(--teal-d); }
.hs-pending     { color:var(--amber); border-color:var(--amber-d); background:var(--amber-d); }
.hs-in_progress { color:var(--blue);  border-color:var(--blue-d);  background:var(--blue-d); }
.hs-undefined   { color:var(--muted); border-color:var(--line-2);  background:transparent; }
.hs-not_applicable { color:var(--muted); border-color:var(--line-2); background:transparent; }

/* ── FILTER SETTINGS INSTANCE ─────────────────────────────────────── */
.settings-inst-hidden { display:none; }

/* ── PERFORMANCE ENHANCED ─────────────────────────────────────────── */
.perf-summary-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:16px; }
.perf-stat { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; }
.perf-stat .ps-val { font-family:var(--mono); font-size:20px; font-weight:500; }
.perf-stat .ps-lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-top:3px; }
.perf-stat.ok   .ps-val { color:var(--teal); }
.perf-stat.warn .ps-val { color:var(--amber); }
.perf-stat.crit .ps-val { color:var(--red); }
.wait-cat-row { display:flex; align-items:center; gap:10px; padding:5px 0; border-bottom:1px solid var(--line); }
.wait-cat-label { width:120px; font-size:12px; color:var(--text-2); }
.wait-cat-bar-wrap { flex:1; height:8px; background:var(--panel-2); border-radius:4px; overflow:hidden; }
.wait-cat-bar { height:100%; border-radius:4px; }
.wait-cat-val { width:70px; text-align:right; font-family:var(--mono); font-size:11px; color:var(--muted); }

/* ── QUERY DETAIL POPUP ─────────────────────────────────────────────── */
.query-detail-overlay { position:fixed; inset:0; background:#00000070; z-index:500; display:flex; align-items:center; justify-content:center; }
.query-detail-box { background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r); width:800px; max-width:97vw; max-height:85vh; overflow-y:auto; padding:24px; box-shadow:0 20px 60px #00000060; }
.query-detail-sql { background:#06101e; border:1px solid var(--line); border-radius:var(--r-sm); font-family:var(--mono); font-size:12.5px; padding:14px; color:var(--teal); overflow-x:auto; white-space:pre-wrap; word-break:break-word; max-height:280px; overflow-y:auto; }
.query-metrics-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
.qm-item { background:var(--panel-2); border-radius:var(--r-sm); padding:10px 12px; }
.qm-val { font-family:var(--mono); font-size:16px; font-weight:500; }
.qm-lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-top:2px; }

/* ── RESPONSIVE ═══════════════════════════════════════════════════ */

/* Tablet (≤1024px): sidebar icon-only */
@media (max-width:1024px) {
  :root { --sidebar-w: 56px; }
  .sidebar-nav .nav-label, .sidebar-nav .nav-badge,
  .nav-section-label, .sidebar-footer .user-name-block,
  .sidebar-footer .btn-logout { display:none; }
  .nav-item { justify-content:center; padding:10px; }
  .sidebar-footer { padding:8px; }
  .sidebar-user-info { justify-content:center; background:none; border:none; padding:4px 0; }
  .user-avatar { width:36px; height:36px; font-size:14px; }
  .brand-name, .brand-tag { display:none; }
  .main-content { min-width:0; }
  .dash-grid { grid-template-columns:1fr 1fr; }
  .notes-grid { grid-template-columns:1fr; }
}

/* Mobile (≤768px): sidebar overlay */
@media (max-width:768px) {
  :root { --sidebar-w: 0px; --topbar-h: 52px; }
  .sidebar {
    position:fixed; left:0; top:var(--topbar-h); bottom:0;
    width:240px; z-index:400; transform:translateX(-100%);
    transition:transform .25s;
  }
  .sidebar.mobile-open { transform:translateX(0); width:240px; }
  .sidebar-backdrop { position:fixed; inset:0; background:#00000060; z-index:399; }
  /* Restore sidebar labels on mobile (when open) */
  .sidebar.mobile-open .nav-label,
  .sidebar.mobile-open .nav-section-label,
  .sidebar.mobile-open .sidebar-footer .user-name-block,
  .sidebar.mobile-open .sidebar-footer .btn-logout { display:initial; }
  .sidebar.mobile-open .sidebar-user-info { background:var(--panel-2); border:1px solid var(--line); padding:8px 9px; }
  .sidebar.mobile-open .nav-item { justify-content:flex-start; padding:9px 12px; }
  .sidebar.mobile-open .nav-badge { display:initial; }
  .brand-name { display:initial; }
  .brand-tag { display:none; }
  .dash-grid { grid-template-columns:1fr; }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .kpi-row { grid-template-columns:repeat(2,1fr); }
  .dash-kpis { grid-template-columns:repeat(2,1fr); }
  .tabs { overflow-x:auto; padding:0 12px; gap:0; }
  .tab { padding:11px 14px; font-size:12px; }
  .tab-content { padding:12px 12px 60px; }
  .view { padding:14px 12px 60px; }
  .topbar { padding:0 12px; }
  .filter-panel { width:100vw; }
  .assessment-top { grid-template-columns:1fr; }
  .modal-box { width:95vw; padding:20px; }
  .chat-wrap { height:calc(100vh - 200px); }
  .inst-table th:nth-child(3), .inst-table td:nth-child(3),
  .inst-table th:nth-child(8), .inst-table td:nth-child(8) { display:none; }
  .view-header { flex-direction:column; gap:10px; align-items:flex-start; }
  .view-header-actions { width:100%; }
  .search-input { width:100%; }
}

/* Extra small (≤480px) */
@media (max-width:480px) {
  .kpi-row { grid-template-columns:1fr 1fr; }
  .topbar-user .user-name-block, .topbar-user .role-chip { display:none; }
  .brand-mark { font-size:16px; }
  .view-title { font-size:17px; }
}

/* ── MISC ─────────────────────────────────────────────────────── */
.muted  { color:var(--muted); }
.small  { font-size:12px; }
.hidden { display:none !important; }
canvas  { max-height:220px; }
* { -webkit-tap-highlight-color:transparent; }

/* ── Performance tab (wait time analysis) ────────────────────────────── */
.perf-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin-bottom:14px; }
.perf-stat { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; text-align:center; }
.perf-stat .ps-val { font-family:var(--mono); font-size:18px; font-weight:500; }
.perf-stat .ps-lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:3px; }
.perf-stat.ok   .ps-val { color:var(--teal); }
.perf-stat.warn .ps-val { color:var(--amber); }
.perf-stat.crit .ps-val { color:var(--red); }
.grid-waits { display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-bottom:14px; }
@media (max-width:1000px) { .grid-waits { grid-template-columns:1fr; } }
#chartWaitsStack { max-height:280px; }

/* ── Top queries enriquecida ─────────────────────────────────────────── */
.q-row { cursor:pointer; }
.q-row:hover td { background:rgba(91,156,245,.06); }
.q-pct-bar { height:3px; background:var(--line); border-radius:2px; margin-top:4px; overflow:hidden; }
.q-pct-fill { height:100%; background:var(--amber); border-radius:2px; }
.query-detail-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:10px 0; }
.qd-item { background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:8px 10px; text-align:center; }
.qd-item .qd-v { font-family:var(--mono); font-size:14px; }
.qd-item .qd-l { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:3px; }
.query-detail-sql { background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:12px; font-family:var(--mono); font-size:12px; white-space:pre-wrap; word-break:break-word; max-height:180px; overflow-y:auto; color:var(--text-2); }

/* ── Dashboard compacto ──────────────────────────────────────────────── */
.dash-kpi { padding:10px 14px; }
.dash-kpi .dv { font-size:20px; }
.dash-panel { padding:12px 14px; }
.dash-panel .panel-title { font-size:12.5px; }
.dash-list { font-size:12px; }
.dash-row { padding:5px 0; }
.mini-pg { margin-top:6px; }

/* ── Query Store banner + disclaimer do DBA Virtual + detalhes de alerta ─────────── */
.qs-banner { background:var(--amber-d); border:1px solid var(--amber); border-radius:var(--r); padding:12px 16px; margin-bottom:12px; font-size:13px; color:var(--text); }
.qs-banner .fix { font-size:11.5px; }
.ai-disclaimer { font-size:11px; color:var(--muted); margin:8px 2px 0; }
.alert-detail-row { padding:3px 0; font-size:12.5px; }
.alert-detail-row strong { color:var(--text-2); }

/* ── Dashboard: graficos interativos ─────────────────────────────────── */
.dash-charts { display:grid; grid-template-columns:3fr 2fr; gap:14px; margin-bottom:14px; }
@media (max-width:1000px) { .dash-charts { grid-template-columns:1fr; } }
#dashChartHealth, #dashChartWaits { max-height:240px; }

/* ── Gerenciar instancias: aviso por engine ──────────────────────────── */
.engine-notice { font-size:12px; border-radius:var(--r); padding:9px 12px; border:1px solid; line-height:1.45; }
.engine-notice.engine-ok   { color:var(--teal);  border-color:var(--teal-d);  background:var(--teal-d); }
.engine-notice.engine-soon { color:var(--amber); border-color:var(--amber-d); background:var(--amber-d); }

/* ── Planos de execucao (Plan Explorer) ──────────────────────────────── */
.plans-list { display:flex; gap:8px; flex-wrap:wrap; }
.plan-chip { display:flex; flex-direction:column; gap:2px; align-items:flex-start; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r); padding:8px 14px; cursor:pointer; color:var(--text); }
.plan-chip:hover { border-color:var(--blue); }
.plan-chip-id { font-family:var(--mono); font-size:13px; color:var(--blue); font-weight:600; }
.plan-modal-box { width:760px; max-width:96vw; }
/* Modo comparação: quase tela cheia para caber os dois planos lado a lado */
.plan-modal-box.plan-modal-wide { width:1600px; max-width:97vw; }
.plan-modal-wide #planTree { max-height:74vh !important; }
.plan-node { display:flex; align-items:center; gap:10px; padding:7px 10px; border:1px solid var(--line);
  border-radius:var(--r); margin-bottom:5px; background:var(--bg); }
.plan-node.warn { border-color:var(--amber-d); }
.plan-node.crit { border-color:var(--red-d); background:rgba(240,92,110,.05); }
.plan-op-icon { font-size:15px; width:22px; text-align:center; flex-shrink:0; }
.plan-op-main { flex:1; min-width:0; }
.plan-op-name { font-size:12.5px; font-weight:600; }
.plan-op-bar { height:4px; background:var(--line); border-radius:2px; margin-top:4px; overflow:hidden; }
.plan-op-fill { height:100%; background:var(--blue); border-radius:2px; }
.plan-node.warn .plan-op-fill { background:var(--amber); }
.plan-node.crit .plan-op-fill { background:var(--red); }
.plan-op-stats { display:flex; gap:10px; font-family:var(--mono); font-size:11px; flex-shrink:0; }
.plan-op-stats span:first-child { font-weight:700; min-width:34px; text-align:right; }
/* Árvore do plano PostgreSQL (auto_explain / EXPLAIN JSON) */
.pg-plan-tree { font-size:12.5px; }
.pg-plan-node { padding:6px 10px; border:1px solid var(--line); border-left-width:3px;
  border-radius:var(--r); margin:0 0 5px 0; background:var(--bg); }
.pg-plan-node.pg-node-warn { border-left-color:var(--amber); }
.pg-plan-node.pg-node-crit { border-left-color:var(--red); background:rgba(240,92,110,.05); }
.pg-node-type { font-weight:700; }
.pg-node-type.pg-scan-bad { color:var(--red); }
.pg-node-obj { font-family:var(--mono); color:var(--teal); margin-left:8px; }
.pg-node-metrics { float:right; font-family:var(--mono); font-size:11px; color:var(--muted); }
.pg-node-cond { font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:3px;
  white-space:pre-wrap; word-break:break-all; }

/* ── Heatmap de saude por instancia ──────────────────────────────────── */
.health-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; max-height:230px; overflow-y:auto; padding:2px; }
.health-tile { border-radius:var(--r); padding:9px 10px; cursor:pointer; border:1px solid var(--line); transition:transform .1s, border-color .1s; }
.health-tile:hover { transform:scale(1.04); border-color:var(--blue); }
.health-tile .ht-name { font-size:10.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.health-tile .ht-score { font-family:var(--mono); font-size:20px; font-weight:600; margin-top:2px; }
.health-tile.s-ok   { background:rgba(45,212,168,.10); border-color:rgba(45,212,168,.35); }
.health-tile.s-ok .ht-score { color:var(--teal); }
.health-tile.s-warn { background:rgba(240,163,50,.10); border-color:rgba(240,163,50,.4); }
.health-tile.s-warn .ht-score { color:var(--amber); }
.health-tile.s-crit { background:rgba(240,92,110,.12); border-color:rgba(240,92,110,.45); }
.health-tile.s-crit .ht-score { color:var(--red); }
.health-tile.s-none .ht-score { color:var(--muted); }

/* ── Grafo do plano de execucao (caixas conectadas) ──────────────────── */
.pg-scroll { overflow:auto; padding:14px 6px; cursor:grab; }
.pg-scroll.pg-grabbing { cursor:grabbing; user-select:none; }
.pg-wrap { position:relative; margin:0 auto; }
.pg-node { position:absolute; display:flex; gap:8px; align-items:center; background:var(--panel);
  border:1.5px solid var(--line-2); border-radius:7px; padding:6px 9px; cursor:default; box-sizing:border-box; }
.pg-node:hover { border-color:var(--blue); box-shadow:0 0 0 3px rgba(91,156,245,.15); }
.pg-node.warn { border-color:var(--amber); }
.pg-node.crit { border-color:var(--red); box-shadow:0 0 0 3px rgba(240,92,110,.12); }
.pg-pct { position:absolute; top:-11px; right:8px; font-family:var(--mono); font-size:10.5px; font-weight:700;
  background:var(--bg); border:1px solid var(--line-2); border-radius:8px; padding:0 7px; color:var(--text-2); }
.pg-node.warn .pg-pct { color:var(--amber); border-color:var(--amber); }
.pg-node.crit .pg-pct { color:#fff; background:var(--red); border-color:var(--red); }
.pg-icon { font-size:18px; flex-shrink:0; }
.pg-body { min-width:0; }
.pg-op { font-size:11.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pg-obj { font-size:10px; font-family:var(--mono); color:var(--blue); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pg-rows { font-size:10px; color:var(--muted); font-family:var(--mono); }
.pg-tooltip { position:absolute; z-index:300; width:270px; max-width:270px; background:var(--bg); border:1px solid var(--line-2);
  border-radius:var(--r); padding:10px 12px; box-shadow:0 8px 28px rgba(0,0,0,.5); pointer-events:none; }
.pg-tip-title { font-size:12.5px; font-weight:700; margin-bottom:6px; overflow-wrap:anywhere; word-break:break-word; }
.pg-tip-table { width:100%; font-size:11px; border-collapse:collapse; table-layout:fixed; }
.pg-tip-table td { padding:2.5px 0; vertical-align:top; overflow-wrap:anywhere; word-break:break-word; }
.pg-tip-table td:first-child { color:var(--muted); padding-right:10px; white-space:nowrap; width:42%; }
.plan-chip.plan-forced { border-color:var(--teal); }

/* ── KPIs interativos do dashboard ───────────────────────────────────── */
.dash-kpi.kpi-clickable { cursor:pointer; transition:transform .1s, border-color .1s; }
.dash-kpi.kpi-clickable:hover { transform:translateY(-2px); border-color:var(--blue); }
.kpi-hint { opacity:.5; font-size:10px; }

/* ── Métricas de S.O. ────────────────────────────────────────────────── */
.os-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; }
.os-tile { background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; }
.os-tile.warn { border-color:var(--amber-d); }
.os-tile.crit { border-color:var(--red-d); }
.os-val { font-family:var(--mono); font-size:20px; font-weight:600; }
.os-unit { font-size:11px; color:var(--muted); margin-left:2px; }
.os-lbl { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.os-bar { height:4px; background:var(--line); border-radius:2px; margin-top:6px; overflow:hidden; }
.os-fill { height:100%; background:var(--teal); border-radius:2px; }
.os-tile.warn .os-fill { background:var(--amber); }
.os-tile.crit .os-fill { background:var(--red); }

/* ── Comparação de planos lado a lado ────────────────────────────────── */
.plan-compare { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:900px) { .plan-compare { grid-template-columns:1fr; } }
.plan-compare-col { border:1px solid var(--line); border-radius:var(--r); padding:8px; min-width:0; }
.plan-compare-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }
.plan-compare .pg-scroll { max-height:66vh; }
.plan-compare-col { overflow:auto; }

/* ── Ações de tuning ─────────────────────────────────────────────────── */
.tuning-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ── Diagnóstico de índices ──────────────────────────────────────────── */
.idx-diag { padding:8px 0; border-bottom:1px solid var(--line); }
.idx-diag:last-child { border-bottom:none; }
.idx-diag-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.idx-diag-head .k { font-size:12.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* ── Linha de banco clicável (drill-down) ────────────────────────────── */
.db-row { cursor:pointer; }
.db-row:hover { background:rgba(91,156,245,.06); }
.db-row:hover .k { color:var(--blue); }

/* ── Árvore de bloqueios (lock chains) ───────────────────────────────── */
.blk-summary { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.blk-ok { color:var(--teal); font-size:13px; padding:6px 0; }
.blk-tree { display:flex; flex-direction:column; gap:6px; }
.blk-node { border:1px solid var(--line); border-left:3px solid var(--line-2); border-radius:var(--r); background:var(--bg); }
.blk-node.blk-head { border-left-color:var(--red); background:rgba(240,92,110,.06); }
.blk-node.blk-crit { border-left-color:var(--red); }
.blk-node.blk-warn { border-left-color:var(--amber); }
.blk-hdr { display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer; flex-wrap:wrap; }
.blk-hdr:hover { background:rgba(91,156,245,.05); }
.blk-spid { font-family:var(--mono); font-weight:700; font-size:12.5px; }
.blk-role { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border:1px solid var(--line-2); border-radius:4px; padding:1px 6px; }
.blk-role.head { color:var(--red); border-color:var(--red-d); background:var(--red-d); font-weight:700; }
.blk-wait { font-family:var(--mono); font-size:11px; color:var(--amber); flex:1; min-width:80px; }
.blk-count { font-size:11px; color:var(--red); font-weight:600; }
.blk-expand { color:var(--muted); }
.blk-line { padding:0 10px 8px; font-size:11.5px; color:var(--text-2); }
.blk-tran { color:var(--amber); margin-left:6px; }
.blk-detail { padding:0 10px 10px; }
.blk-detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:4px 14px; font-size:11.5px; padding:8px 0; border-top:1px solid var(--line); }
.blk-detail-grid b { color:var(--muted); font-weight:500; }
.blk-sql { background:#0d1420; border:1px solid var(--line); border-radius:var(--r); padding:8px 10px; font-family:var(--mono); font-size:11px; white-space:pre-wrap; word-break:break-word; max-height:140px; overflow:auto; color:var(--text-2); }

/* ── Badges de erro do errorlog ──────────────────────────────────────── */
.err-badge { font-family:var(--mono); font-size:10px; background:var(--red-d); color:var(--red); border-radius:3px; padding:0 4px; }
.sev-pill { font-family:var(--mono); font-size:10px; border-radius:3px; padding:0 5px; }
.sev-pill.sev-c { background:var(--red-d); color:var(--red); }
.sev-pill.sev-w { background:var(--amber-d); color:var(--amber); }
.sev-pill.sev-ok { background:var(--teal-d); color:var(--teal); }
/* Sparkline de velocidade de fragmentação (drill-down) */
.frag-spark { display:flex; align-items:flex-end; gap:3px; height:44px; padding:4px 0; }
.frag-bar { flex:1; min-width:3px; background:var(--blue); border-radius:2px 2px 0 0; opacity:.85; }
/* Seletor de modo de visualização (segmentado) — ex.: Performance Padrão/Correlação */
.view-modes { display:inline-flex; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.vm-btn { background:transparent; border:none; color:var(--muted); cursor:pointer; padding:6px 14px; font-size:12.5px; font-weight:600; transition:all .12s; }
.vm-btn:hover { color:var(--text-2); }
.vm-btn.active { background:var(--amber); color:var(--ink, #0b1220); }

/* Badge de latência de I/O por arquivo (verde/âmbar/vermelho por limiar) */
.io-lat { font-family:var(--mono); font-size:11px; border-radius:3px; padding:1px 5px; background:var(--teal-d); color:var(--teal); }
.io-lat.sev-w { background:var(--amber-d); color:var(--amber); }
.io-lat.sev-c { background:var(--red-d); color:var(--red); }

/* Sino de notificações do app (topo direito) */
.notif-wrap { position:relative; }
.notif-bell { position:relative; background:transparent; border:1px solid var(--line); color:var(--text-2);
  width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:15px; transition:all .15s; }
.notif-bell:hover { border-color:var(--amber); }
.notif-bell.has-crit { border-color:var(--red); animation:pulse 2s ease-in-out infinite; }
.notif-badge { position:absolute; top:-4px; right:-4px; background:var(--red); color:#fff; font-size:10px;
  font-weight:700; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; padding:0 4px; }
.notif-panel { position:absolute; top:42px; right:0; width:340px; max-height:60vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 8px 28px rgba(0,0,0,.4);
  z-index:1000; }
.notif-head { display:flex; justify-content:space-between; align-items:center; padding:10px 14px;
  border-bottom:1px solid var(--line); }
.notif-item { padding:10px 14px; border-bottom:1px solid var(--line); border-left:3px solid var(--muted); }
.notif-item:last-child { border-bottom:none; }
.notif-item.sev-critical { border-left-color:var(--red); }
.notif-item.sev-warning { border-left-color:var(--amber); }
.notif-item.sev-info { border-left-color:var(--blue); }
.notif-item-title { font-size:13px; color:var(--text); margin-bottom:2px; }
.notif-empty { padding:20px 14px; text-align:center; color:var(--muted); font-size:13px; }
.ndot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; vertical-align:middle; }
.ndot-crit { background:var(--red); }
.ndot-warn { background:var(--amber); }
.ndot-info { background:var(--blue); }

/* Toasts (canto superior direito) */
.toast-host { position:fixed; top:64px; right:18px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--blue);
  color:var(--text); padding:10px 14px; border-radius:var(--r-sm); font-size:13px; max-width:340px;
  box-shadow:0 6px 24px rgba(0,0,0,.35); opacity:0; transform:translateX(16px); transition:all .22s ease; }
.toast.show { opacity:1; transform:translateX(0); }
.toast-success { border-left-color:var(--teal); }
.toast-error { border-left-color:var(--red); }
.toast-warn { border-left-color:var(--amber); }

/* Controles de paginação reutilizáveis */
.pager { display:flex; align-items:center; gap:10px; justify-content:flex-end; margin-top:8px; }
.pager:empty { display:none; }
.pager .page-btn { padding:3px 10px; font-size:12px; }
.pager .page-btn:disabled { opacity:.4; cursor:default; }

/* Campo somente-leitura (ex.: database no formulário de tuning) */
.ro-field { background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:6px 10px; color:var(--text-2); font-family:var(--mono); font-size:13px; }

/* Coluna realçada do Top Queries conforme o tipo de consumo */
.qtable td.q-hot { background:var(--amber-d); color:var(--amber); font-weight:600; }

/* DBA Virtual — barra lateral de Ações (capacidades dele) */
.chat-layout { display:flex; gap:14px; align-items:stretch; }
.chat-layout .chat-wrap, .chat-layout .chat-wrap-global { flex:1; min-width:0; }
.chat-actions { width:300px; flex-shrink:0; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; transition:width .2s ease; display:flex; flex-direction:column;
  align-self:flex-start; max-height:calc(100vh - var(--topbar-h) - 130px); }
.chat-actions.collapsed { width:50px; }
.chat-actions-head { display:flex; align-items:center; gap:8px; background:var(--panel-2);
  border-bottom:1px solid var(--line); padding:12px 12px; }
.ca-head-title { display:flex; align-items:center; gap:8px; font-weight:600; font-size:12.5px; color:var(--text);
  white-space:nowrap; overflow:hidden; }
.ca-head-title svg { color:var(--amber); flex-shrink:0; }
.ca-collapse { margin-left:auto; background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--muted); cursor:pointer; padding:3px 5px; display:flex; align-items:center; flex-shrink:0; transition:all .15s; }
.ca-collapse:hover { color:var(--amber); border-color:var(--amber); }
.ca-collapse svg { transition:transform .2s; }
.chat-actions.collapsed .ca-head-title span { display:none; }
.chat-actions.collapsed .ca-collapse svg { transform:rotate(180deg); }
.chat-actions.collapsed .chat-actions-body { display:none; }
.chat-actions-body { padding:12px; overflow-y:auto; }
.ca-hint { font-size:11px; color:var(--muted); margin-bottom:12px; line-height:1.45; }
.ca-group { margin-bottom:14px; }
.ca-group-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--amber);
  margin:0 0 7px 0; padding-bottom:4px; border-bottom:1px solid var(--line); }
.ca-btn { display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-sm); color:var(--text-2); padding:9px 11px;
  margin-bottom:6px; cursor:pointer; font-size:12.5px; transition:all .12s; }
.ca-btn:hover { border-color:var(--amber); color:var(--text); background:var(--panel-2); }
.ca-bullet { width:6px; height:6px; border-radius:50%; background:var(--muted); flex-shrink:0; transition:background .12s; }
.ca-btn:hover .ca-bullet { background:var(--amber); }
.ca-btn-label { flex:1; min-width:0; }
.ca-tag { margin-left:auto; font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--amber);
  background:var(--amber-d); border-radius:8px; padding:1px 7px; flex-shrink:0; }
/* Formulário compacto de coleta de dados de uma ação (campos específicos) */
.ca-form-host { margin:0 0 8px; }
.ca-form-card { background:var(--panel-2); border:1px solid var(--amber); border-radius:var(--r); padding:12px 14px; }
.ca-form-title { font-weight:600; font-size:13px; margin-bottom:10px; color:var(--text); }
.ca-form-field { display:flex; flex-direction:column; gap:4px; margin-bottom:9px; font-size:11.5px; color:var(--muted); }
.ca-form-field input { width:100%; }
.ca-form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }
@media (max-width:900px) {
  .chat-layout { flex-direction:column; }
  .chat-actions { width:100% !important; max-height:none; }
  .chat-actions.collapsed { width:100% !important; }
  .chat-actions.collapsed .ca-head-title span { display:inline; }
}

/* Deadlock — visualização em 2 caixas (transação A  B, vítima com X) */
.dl-modal-wide { width:920px !important; max-width:96vw !important; }
.dl-graph { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:start; }
@media (max-width:760px) { .dl-graph { grid-template-columns:1fr; } }
.dl-proc { border:1px solid var(--line); border-radius:var(--r); padding:10px; background:var(--panel-2); }
.dl-proc.dl-victim { border-color:var(--red); box-shadow:0 0 0 2px rgba(240,92,110,.18); opacity:.92; }
.dl-proc-head { font-weight:600; font-size:13px; color:var(--text); margin-bottom:4px; }
.dl-x { color:#fff; background:var(--red); border-radius:3px; padding:1px 6px; font-size:11px; }
.dl-survivor { color:var(--teal); font-size:11px; }
.dl-victim .dl-query { text-decoration:line-through; text-decoration-color:var(--red); }
.dl-query { background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px;
  font-family:var(--mono); font-size:11.5px; white-space:pre-wrap; word-break:break-word; max-height:200px; overflow:auto; margin:0; color:var(--text-2); }
.dl-vs { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  font-size:13px; color:var(--amber); padding:0 4px; align-self:center; }
.dl-vs-label { font-size:18px; font-weight:700; letter-spacing:.08em; color:var(--amber); }

/* Árvore (maiores tabelas por banco) */
.tree-node { border-bottom:1px solid var(--line); }
.tree-db { display:flex; align-items:center; gap:8px; padding:8px 4px; cursor:pointer; }
.tree-db:hover { background:var(--panel-2); }
.tree-caret { color:var(--muted); width:12px; display:inline-block; }
.tree-db-name { font-weight:600; color:var(--text); }
.tree-db .muted { margin-left:auto; }
.tree-children { padding:2px 0 8px 22px; overflow-x:auto; }

/* Tabela chave-valor para pop-ups de detalhe */
.kv-table { width:100%; border-collapse:collapse; font-size:13px; }
.kv-table td { padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.kv-table td:first-child { color:var(--muted); width:42%; white-space:nowrap; }
.kv-table td:last-child { color:var(--text); font-family:var(--mono); word-break:break-word; }

/* ── Blocking compacto na Visão geral ────────────────────────────────── */
.blk-compact { display:flex; flex-direction:column; gap:4px; }
.blk-compact-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--line); border-left:3px solid var(--red); border-radius:var(--r); background:rgba(240,92,110,.05); cursor:pointer; font-size:12px; }
.blk-compact-row:hover { border-color:var(--blue); }
.blk-compact-meta { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-2); }
.expand-btn { background:none; border:1px solid var(--line-2); border-radius:var(--r); color:var(--muted); cursor:pointer; font-size:11px; padding:3px 8px; }
.expand-btn:hover { color:var(--blue); border-color:var(--blue); }

/* ── Modal de exclusão de instância ──────────────────────────────────── */
.del-opt { border:1px solid var(--line); border-radius:var(--r); padding:12px; margin-top:10px; }
.del-opt.del-danger { border-color:var(--red-d); }

/* ── Correlação S.O. x SQL (eixo de tempo alinhado) ──────────────────── */
.corr-stack { display:flex; flex-direction:column; gap:8px; }
.corr-group { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:8px 0 2px; border-bottom:1px solid var(--line); padding-bottom:4px; }
.corr-panel { padding:8px 12px; margin:0; }
.corr-panel h4 { margin:0 0 4px; font-size:12px; }
.corr-panel canvas { max-height:90px; }

/* ── Arquitetura HA/DR (diagrama) ────────────────────────────────────── */
.ha-ag { margin-bottom:18px; }
.ha-ag-title { font-family:var(--mono); font-size:13px; color:var(--text); margin-bottom:6px; }
.ha-box { fill:var(--bg); stroke:var(--line-2); stroke-width:2; }
.ha-box.ha-ok   { stroke:var(--teal); }
.ha-box.ha-warn { stroke:var(--amber); }
.ha-box.ha-crit { stroke:var(--red); }
.ha-name { fill:var(--text); font:600 13px var(--mono); }
.ha-role { fill:var(--text-2); font:11px var(--sans); }
.ha-sub  { fill:var(--muted); font:10px var(--mono); }
.ha-link { stroke:var(--line-2); stroke-width:3; fill:none; }
.ha-link.ha-ok   { stroke:var(--teal); }
.ha-link.ha-warn { stroke:var(--amber); stroke-dasharray:6 3; }
.ha-link.ha-crit { stroke:var(--red); stroke-dasharray:3 3; }
.ha-link-lbl { fill:var(--muted); font:10px var(--mono); }
.ha-legend { display:flex; gap:18px; flex-wrap:wrap; font-size:11.5px; color:var(--muted); margin-top:10px; }
.ha-legend i { display:inline-block; width:18px; height:3px; border-radius:2px; vertical-align:middle; margin-right:4px; }
.ha-dot.ha-ok { background:var(--teal); }
.ha-dot.ha-warn { background:var(--amber); }
.ha-dot.ha-crit { background:var(--red); }

/* ── Resumo de performance: ideal/crítico por instância ──────────────── */
.perf-stat .ps-range { font-size:9px; color:var(--muted); margin-top:3px; line-height:1.3; font-family:var(--mono); }
.perf-stat.ok   .ps-range { color:var(--teal); }
.perf-stat.warn .ps-range { color:var(--amber); }
.perf-stat.crit .ps-range { color:var(--red); }

/* ── Análise Sentinel (motor próprio de diagnóstico, agnóstico de engine) ── */
.advisor-summary { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.adv-pill { font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; border:1px solid transparent; }
.adv-pill.sev-crit { color:var(--red);   background:var(--red-d);   border-color:var(--red); }
.adv-pill.sev-warn { color:var(--amber); background:var(--amber-d); border-color:var(--amber); }
.adv-pill.sev-info { color:var(--teal);  background:var(--teal-d);  border-color:var(--teal); }
.adv-card { border:1px solid var(--line); border-left-width:3px; border-radius:var(--r-sm);
  background:var(--panel-2); padding:10px 12px; margin-bottom:10px; }
.adv-card.sev-crit { border-left-color:var(--red); }
.adv-card.sev-warn { border-left-color:var(--amber); }
.adv-card.sev-info { border-left-color:var(--teal); }
.adv-card-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.adv-sev { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  padding:2px 7px; border-radius:var(--r-sm); }
.adv-sev.sev-crit { color:var(--red);   background:var(--red-d); }
.adv-sev.sev-warn { color:var(--amber); background:var(--amber-d); }
.adv-sev.sev-info { color:var(--teal);  background:var(--teal-d); }
.adv-title { font-weight:600; color:var(--text); }
.adv-impact { margin-left:auto; font-family:var(--mono); font-size:12px; font-weight:600;
  color:var(--text-2); background:var(--panel-3); padding:2px 8px; border-radius:var(--r-sm); white-space:nowrap; }
.adv-obj { font-family:var(--mono); font-size:12px; color:var(--blue); margin-top:5px; word-break:break-all; }
.adv-why { color:var(--text-2); font-size:13px; line-height:1.5; margin-top:6px; }
.adv-reco { color:var(--text); font-size:13px; line-height:1.5; margin-top:6px; }
.adv-script { font-family:var(--mono); font-size:12px; color:var(--teal); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; margin-top:8px;
  white-space:pre-wrap; word-break:break-word; overflow-x:auto; }

/* Serviços monitorados (discovery de serviços das engines pelo agente) */
.svc-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.svc-dot.svc-up   { background:var(--teal);  box-shadow:0 0 5px var(--teal); }
.svc-dot.svc-down { background:var(--amber); box-shadow:0 0 5px var(--amber); }
.svc-dot.svc-crit { background:var(--red);   box-shadow:0 0 6px var(--red); animation:svcPulse 1.6s infinite; }
@keyframes svcPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.svc-alert { background:var(--red-d); border:1px solid var(--red); color:var(--red); border-radius:var(--r-sm,6px); padding:8px 11px; margin-bottom:9px; font-size:12.5px; }

/* Sessões ativas mais longas (lista clicável) */
.sess-row { cursor:pointer; }
.sess-row:hover { background:var(--panel-3); }
.sess-sql { font-family:var(--mono); font-size:11px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:520px; }
.sess-blocked { color:var(--red); }
.sess-detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:5px 18px; font-size:12.5px; margin-bottom:10px; }
.sess-detail-grid b { color:var(--muted); font-weight:600; }
.sess-sec-title { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin:12px 0 6px; }

/* ── Licença (DB Sentinel Central) ─────────────────────────────────────── */
.license-banner { margin:0 0 14px; padding:10px 16px; border-radius:8px; font-size:13px;
  cursor:pointer; border:1px solid transparent; }
.license-banner.lic-crit { background:#f05c6e18; border-color:#f05c6e55; color:#ffb3bd; }
.license-banner.lic-warn { background:#f0a33218; border-color:#f0a33255; color:#ffd9a0; }
.lic-status { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.lic-badge { font-weight:700; padding:4px 12px; border-radius:20px; font-size:13px; }
.lic-status.lic-ok .lic-badge { background:#2dd4a822; color:#2dd4a8; }
.lic-status.lic-warn .lic-badge { background:#f0a33222; color:#f0a332; }
.lic-status.lic-crit .lic-badge { background:#f05c6e22; color:#f05c6e; }
.lic-row { display:flex; justify-content:space-between; gap:16px; padding:8px 0;
  border-bottom:1px solid var(--border, #172033); font-size:13px; }
.lic-row:last-child { border-bottom:none; }
.lic-k { color:var(--muted); }
.lic-v { font-family:var(--mono); text-align:right; }
.lic-crit-text { color:#f05c6e; }
.lic-directives { margin-top:12px; padding-top:10px; border-top:1px solid var(--border, #172033); }

/* ── Guia interativo de instalação do agente (pós-cadastro) ─────────────── */
.onb { display:flex; flex-direction:column; gap:14px; }
.onb-step { display:flex; gap:10px; align-items:flex-start; }
.onb-num { flex-shrink:0; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600;
  background:var(--panel-2, #172033); color:var(--muted, #8aa); border:1px solid var(--border, #172033); }
.onb-step.is-done .onb-num { background:#12402f; color:#2dd4a8; border-color:#1c6b4f; }
.onb-num.onb-spin { color:#5b9cf5; animation:onbpulse 1s ease-in-out infinite; }
@keyframes onbpulse { 0%,100%{opacity:.3} 50%{opacity:1} }
.onb-modes { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.onb-mode { display:flex; gap:8px; align-items:flex-start; padding:10px; cursor:pointer;
  border:1px solid var(--border, #172033); border-radius:8px; }
.onb-mode:has(input:checked) { border-color:#2a6bd4; background:rgba(43,107,212,.08); }
.onb-mode input { margin-top:3px; }
.onb-rec { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:#2dd4a8; border:1px solid #1c6b4f; border-radius:4px; padding:1px 5px; }
.onb-field { margin:6px 0; }
.onb-field-lbl { font-size:11px; color:var(--muted, #8aa); margin-bottom:3px; }
.onb-field-val { display:flex; gap:8px; align-items:center; }
.onb-field-val code { flex:1; font-family:var(--mono); font-size:12px; word-break:break-all;
  background:var(--panel-2, #0f1626); border:1px solid var(--border, #172033);
  border-radius:6px; padding:6px 8px; user-select:all; }

/* ── Arquitetura Oracle (CDB / PDB / Schemas) ──────────────────────────────── */
.ora-cdb-summary { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.ora-sum-chip { flex:1; min-width:120px; background:var(--panel-2,#0f1626); border:1px solid var(--border,#172033);
  border-radius:8px; padding:8px 12px; display:flex; flex-direction:column; gap:2px; }
.ora-sum-n { font-size:18px; font-weight:700; color:var(--ink,#e8eef7); font-family:var(--mono); }
.ora-sum-l { font-size:11px; color:var(--muted,#8aa); }
.ora-tree { display:flex; flex-direction:column; gap:8px; }
.ora-node { border:1px solid var(--border,#172033); border-radius:8px; overflow:hidden; }
.ora-node.root { border-color:#2a6bd4; }
.ora-node.pdb { border-left:3px solid #2dd4a8; }
.ora-node-head { display:flex; align-items:center; gap:8px; padding:9px 12px; cursor:pointer;
  background:var(--panel-2,#0f1626); user-select:none; }
.ora-node-head:hover { background:rgba(43,107,212,.08); }
.ora-caret { width:12px; color:var(--muted,#8aa); font-size:11px; flex-shrink:0; }
.ora-kind { font-size:10px; font-weight:700; letter-spacing:.03em; padding:2px 6px; border-radius:4px; flex-shrink:0; }
.ora-kind-root { background:#12325e; color:#7db3ff; }
.ora-kind-pdb  { background:#12402f; color:#2dd4a8; }
.ora-kind-db   { background:#3a2c12; color:#f0a332; }
.ora-node-name { font-weight:600; font-family:var(--mono); }
.ora-node-spacer { flex:1; }
.ora-node-stat { font-size:11px; color:var(--muted,#8aa); font-family:var(--mono); white-space:nowrap; }
.ora-badge { font-size:9px; font-weight:700; text-transform:uppercase; padding:1px 5px; border-radius:4px; border:1px solid; }
.ora-badge.ok { color:#2dd4a8; border-color:#1c6b4f; }
.ora-badge.warn { color:#f0a332; border-color:#7a5418; }
.ora-badge.crit { color:#f05c6e; border-color:#7a2531; }
.ora-node-body { padding:10px 12px; border-top:1px solid var(--border,#172033); }
.ora-svc { font-size:11px; color:var(--muted,#8aa); margin-bottom:8px; }
.ora-svc code { background:var(--panel-2,#0f1626); padding:1px 5px; border-radius:4px; }
.ora-subgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:800px) { .ora-subgrid { grid-template-columns:1fr; } }
.ora-sub-h { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--muted,#8aa); margin-bottom:6px; border-bottom:1px solid var(--border,#172033); padding-bottom:4px; }
.ora-ts-row { display:flex; align-items:center; gap:8px; padding:3px 0; font-size:12px; }
.ora-ts-name { flex:0 0 34%; font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ora-ts-bar { flex:1; height:8px; background:var(--panel-2,#0f1626); border-radius:4px; overflow:hidden; }
.ora-ts-fill { display:block; height:100%; }
.ora-ts-fill.ok { background:#2dd4a8; } .ora-ts-fill.warn { background:#f0a332; } .ora-ts-fill.crit { background:#f05c6e; }
.ora-ts-val { flex:0 0 auto; font-size:11px; font-family:var(--mono); white-space:nowrap; }
.ora-sc-row { display:flex; align-items:center; gap:8px; padding:3px 0; font-size:12px; border-bottom:1px solid rgba(255,255,255,.03); }
.ora-sc-name { flex:0 0 30%; font-family:var(--mono); font-weight:600; }
.ora-sc-meta { flex:1; color:var(--muted,#8aa); font-size:11px; }
.ora-sc-size { font-family:var(--mono); }

/* Nota da tela de login: o acesso e pelo e-mail da conta do cliente (validado
   pela Central), nao por um usuario local. */
.login-hint{margin:14px 0 0;text-align:center;font-size:.8rem;color:var(--muted,#8fa3b8);line-height:1.5}
.login-hint b{color:var(--text,#e6eefc)}

/* ── TOUR DE PRIMEIRO ACESSO ───────────────────────────────────────────────
   Recorte (spotlight) feito com box-shadow gigante: a caixa fica transparente
   e a sombra escurece TODO o resto da tela. E' o unico jeito de "furar" um
   overlay sem SVG/clip-path e sem tirar o elemento do fluxo -- e o furo
   acompanha o elemento real, entao nao desalinha quando a tela rola ou muda
   de tamanho. Sem alvo (passo de boas-vindas) o furo some e o cartao centra. */
.tour-overlay { position: fixed; inset: 0; z-index: 4000; }
.tour-overlay.hidden { display: none; }
.tour-spot {
  position: absolute; border-radius: var(--r);
  border: 2px solid var(--amber);
  box-shadow: 0 0 0 9999px rgba(9, 14, 26, .82);
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.tour-spot.no-target { border-color: transparent; width: 0; height: 0; left: 50%; top: 50%; }
.tour-card {
  position: absolute; width: 320px; max-width: calc(100vw - 32px);
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 16px 18px 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
}
.tour-step-count { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--amber); text-transform: uppercase; }
.tour-title { font-size: 16px; font-weight: 600; margin: 6px 0 0; text-wrap: balance; }
.tour-text  { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 8px 0 0; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.tour-nav { display: flex; gap: 8px; }
.tour-skip { background: none; border: none; color: var(--muted); font-size: 12px; font-family: var(--sans); cursor: pointer; padding: 4px 2px; }
.tour-skip:hover { color: var(--text-2); text-decoration: underline; }
.view-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .tour-spot, .tour-card { transition: none; }
}
@media (max-width: 640px) {
  .tour-card { width: auto; left: 16px !important; right: 16px; }
}

/* Link para o guia do cliente dentro de uma secao de Configuracoes. A
   documentacao vive no site, nao dentro do cerebro -- por isso abre em aba
   nova, para nao tirar o operador do meio de uma configuracao. */
.ss-doc { margin: 0 0 12px; font-size: 12px; }
.ss-doc a { color: var(--amber); text-decoration: none; border-bottom: 1px solid transparent; }
.ss-doc a:hover { border-bottom-color: var(--amber); }

/* ── Reportar problema ───────────────────────────────────────────────────
   A faixa aparece quando a TELA quebra sozinha. Nao e modal de proposito: o
   usuario pode estar no meio de outra coisa, e roubar o foco por causa de um
   erro que talvez nem o afete seria pior que o proprio erro. */
.falha-aviso {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 900;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px; border-radius: 10px; font-size: 13px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--red); box-shadow: 0 10px 30px -10px rgba(0,0,0,.6);
}
.falha-x { background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 12px; padding: 2px 4px; }
.falha-x:hover { color: var(--text); }

/* O bloco "o que sera enviado" fica FECHADO, mas presente: quem quiser conferir
   antes de mandar consegue, e quem nao quiser nao e obrigado a ler. */
.rep-ctx { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; background: var(--panel-2); }
.rep-ctx summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.rep-ctx summary:hover { color: var(--text); }
.rep-lista { margin: 6px 0 10px; padding-left: 18px; font-size: 12px;
  color: var(--text-2, var(--text)); line-height: 1.7; font-family: var(--mono); }
.rep-lista li { word-break: break-word; }

/* ── Configuracoes de e-mail em 2 passos ─────────────────────────────────
   Antes eram duas secoes separadas, e a de alertas comecava avisando
   "configure o canal na secao acima" -- ou seja, dois passos do mesmo assunto,
   com uma parede no meio. O numero a esquerda deixa a ordem obvia sem precisar
   de frase explicando. */
.email-passo { display: flex; gap: 14px; padding: 16px 0; }
.email-passo + .email-passo { border-top: 1px solid var(--line); }
.email-passo-num {
  flex: 0 0 24px; height: 24px; border-radius: 7px;
  background: var(--panel-2); color: var(--amber);
  font-size: 12px; font-weight: 700; text-align: center; line-height: 24px;
}
.email-passo-corpo { flex: 1; min-width: 0; }
.email-passo-titulo { font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.email-passo-titulo .muted { font-weight: 400; margin-left: 6px; }

/* ── Cartões de escolha do canal de e-mail ───────────────────────────────
   Substituem um <select>. A consequência de cada opção ("o conteúdo sai da
   sua rede") tem que estar visível na hora de escolher, e num menu fechado
   ela só aparece depois de aberto. */
.canal-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.canal-card {
  flex: 1 1 200px; min-width: 190px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--text); font: inherit;
  transition: border-color .12s, background .12s;
}
.canal-card:hover { border-color: var(--muted); }
.canal-card.sel { border-color: var(--amber); background: var(--amber-d); }
.canal-card-tit { font-weight: 600; font-size: 13px; }
.canal-card-sub { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.canal-card.sel .canal-card-sub { color: var(--text-2); }