/* ─── base.css — variáveis, reset e dark mode ─────────────────── */

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

:root {
  --blue:        #003087;
  --blue-mid:    #0047b3;
  --blue-light:  #e8f0fb;
  --green:       #00A651;
  --green-light: #e6f7ee;
  --orange:      #E8421A;
  --orange-light:#fdeee9;
  --bg:          #f4f6fa;
  --white:       #ffffff;
  --border:      #dce3ef;
  --text:        #1a2340;
  --muted:       #6b7a99;
  --shadow-sm:   0 1px 4px rgba(0,48,135,.08);
  --shadow:      0 4px 20px rgba(0,48,135,.10);
  --shadow-lg:   0 8px 40px rgba(0,48,135,.13);
  --radius:      12px;
  --font:        'Inter', sans-serif;
}

/* ─── Dark Mode ──────────────────────────────────────────────── */
body.dark-mode {
  --blue:        #4d9fff;
  --blue-mid:    #6ab3ff;
  --blue-light:  #1a2a3a;
  --green:       #2ecc71;
  --green-light: #0d2a1a;
  --orange:      #ff6b4a;
  --orange-light:#2a1510;
  --bg:          #0f1117;
  --white:       #1a1d27;
  --border:      #2a2d3a;
  --text:        #e8eaf0;
  --muted:       #8892a4;
  --shadow-sm:   0 1px 4px rgba(0,0,0,.3);
  --shadow:      0 4px 20px rgba(0,0,0,.4);
  --shadow-lg:   0 8px 40px rgba(0,0,0,.5);
}
/* ─── Logo claro/escuro ──────────────────────────────────────── */
.logo-escuro { display: none; }
.logo-claro  { display: block; }
body.dark-mode .logo-escuro { display: block; }
body.dark-mode .logo-claro  { display: none; }

/* ─── Dark mode — Login ─────────────────────────────────────── */
body.dark-mode #page-login { background: #222222; }
body.dark-mode .login-card { background: #2c2c2c; }
body.dark-mode .login-card::before { background: linear-gradient(90deg, var(--blue), var(--green)); }
body.dark-mode .form-group input { background: #1a1a1a; color: var(--text); }
body.dark-mode table thead th:not(.rel-th) { background: #12151f; color: var(--muted); }
body.dark-mode .modal { background: #1a1d27; }
body.dark-mode .field-input, body.dark-mode .field-select { background: #0f1117; color: var(--text); border-color: var(--border); }
body.dark-mode .reserva-modal { background: #1a1d27; }
body.dark-mode .reserva-header { background: #12151f; border-color: var(--border); }
body.dark-mode .porta-livre  { background: #0d2a1a; border-color: var(--green); }
body.dark-mode .porta-livre:hover { background: #1a3d28; }
body.dark-mode .porta-reservada { background: #1a2a3a; }
body.dark-mode .porta-ocupada   { background: #2a1510; }
body.dark-mode pre { color: #58d68d !important; }
body.dark-mode .section-card { background: #1a1d27; }
body.dark-mode .nav-dropdown-menu { background: #1a1d27; border-color: var(--border); }
body.dark-mode .cli-card { background: #1a1d27; }
body.dark-mode .cli-card-header { background: #12151f; }

/* ── Serviços dropdown ── */
.servicos-menu-item {
  display:flex; align-items:center; gap:12px; width:100%; padding:11px 14px;
  background:none; border:none; cursor:pointer; text-align:left;
  color:var(--text); font-family:var(--font); transition:background .15s;
}
.servicos-menu-item:hover { background:var(--blue-light); }
.servicos-menu-item + .servicos-menu-item { border-top:1px solid var(--border); }
body.dark-mode .servicos-menu { background:#1a1d27; border-color:var(--border); }
body.dark-mode .servicos-menu-item:hover { background:#1a2a3a; }

/* ── Consulta de Sinal — grid responsivo ───────────────────────── */
.csinal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.csinal-card {
  background: var(--bg);
  border-radius: 10px;
  padding: 16px 12px;
  border: 1.5px solid var(--border);
  min-width: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.csinal-card-label {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  word-break: break-word;
}
.csinal-dbm {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.csinal-qual {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
/* Cores de qualidade */
.csinal-otimo    { background: #dcfce7; color: #15803d; }
.csinal-bom      { background: #d1fae5; color: #065f46; }
.csinal-aceitavel{ background: #fef9c3; color: #854d0e; }
.csinal-fraco    { background: #fee2e2; color: #b91c1c; }
.csinal-sem      { background: #f4f6fa; color: #6b7a99; }
body.dark-mode .csinal-otimo    { background: #14532d; color: #4ade80; }
body.dark-mode .csinal-bom      { background: #064e3b; color: #6ee7b7; }
body.dark-mode .csinal-aceitavel{ background: #422006; color: #fcd34d; }
body.dark-mode .csinal-fraco    { background: #450a0a; color: #fca5a5; }
body.dark-mode .csinal-sem      { background: #12151f; color: #6b7a99; }

@media (max-width: 400px) {
  .csinal-grid { grid-template-columns: 1fr; }
  .csinal-dbm  { font-size: 22px; }
}

.sinal-badge { display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:5px 12px;font-size:13px;font-weight:700; }
.sinal-otimo    { background:#dcfce7; color:#15803d; }
.sinal-bom      { background:#d1fae5; color:#065f46; }
.sinal-aceitavel{ background:#fef9c3; color:#854d0e; }
.sinal-fraco    { background:#fee2e2; color:#b91c1c; }
.sinal-sem      { background:#f4f6fa; color:#6b7a99; }
body.dark-mode .sinal-otimo    { background:#14532d; color:#4ade80; }
body.dark-mode .sinal-bom      { background:#064e3b; color:#6ee7b7; }
body.dark-mode .sinal-aceitavel{ background:#422006; color:#fcd34d; }
body.dark-mode .sinal-fraco    { background:#450a0a; color:#fca5a5; }
body.dark-mode .sinal-sem      { background:#12151f; color:#6b7a99; }

/* ── Troca ONU step indicator ── */
.troca-step { display:flex;gap:0;margin-bottom:20px; }
.troca-step-item { flex:1;text-align:center;position:relative; }
.troca-step-item::before { content:'';position:absolute;top:14px;left:50%;width:100%;height:2px;background:var(--border);z-index:0; }
.troca-step-item:last-child::before { display:none; }
.troca-step-num { width:28px;height:28px;border-radius:50%;border:2px solid var(--border);background:var(--white);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted);position:relative;z-index:1;transition:all .3s; }
.troca-step-item.active .troca-step-num  { border-color:var(--blue);background:var(--blue);color:#fff; }
.troca-step-item.done .troca-step-num    { border-color:var(--green);background:var(--green);color:#fff; }
.troca-step-label { font-size:10px;color:var(--muted);margin-top:4px;font-weight:600; }
.troca-step-item.active .troca-step-label { color:var(--blue); }
.troca-step-item.done .troca-step-label   { color:var(--green); }

/* ── Log cards: tema claro ── */
.log-card { border-radius:10px; padding:12px 16px; margin-bottom:8px; border:1.5px solid; }
.log-card-erro    { background:#fef2f2; border-color:#dc2626; }
.log-card-aviso   { background:#fffbeb; border-color:#b45309; }
.log-card-sucesso { background:#f0fdf4; border-color:#16a34a; }
.log-card-erro    .log-card-titulo { font-size:13px; font-weight:700; color:#dc2626; }
.log-card-aviso   .log-card-titulo { font-size:13px; font-weight:700; color:#b45309; }
.log-card-sucesso .log-card-titulo { font-size:13px; font-weight:700; color:#16a34a; }
.log-card-erro    .log-card-badge { font-size:11px; background:#dc2626; color:#fff; border-radius:5px; padding:2px 7px; }
.log-card-aviso   .log-card-badge { font-size:11px; background:#b45309; color:#fff; border-radius:5px; padding:2px 7px; }
.log-card-sucesso .log-card-badge { font-size:11px; background:#16a34a; color:#fff; border-radius:5px; padding:2px 7px; }
/* ── Log cards: tema escuro ── */
body.dark-mode .log-card-erro    { background:#2d1515; border-color:#f87171; }
body.dark-mode .log-card-aviso   { background:#2d2210; border-color:#fbbf24; }
body.dark-mode .log-card-sucesso { background:#0d2218; border-color:#4ade80; }
body.dark-mode .log-card-erro    .log-card-titulo { color:#f87171; }
body.dark-mode .log-card-aviso   .log-card-titulo { color:#fbbf24; }
body.dark-mode .log-card-sucesso .log-card-titulo { color:#4ade80; }
body.dark-mode .log-card-erro    .log-card-badge  { background:#f87171; color:#1a0a0a; }
body.dark-mode .log-card-aviso   .log-card-badge  { background:#fbbf24; color:#1a1000; }
body.dark-mode .log-card-sucesso .log-card-badge  { background:#4ade80; color:#0a1f12; }
body.dark-mode .log-card strong { color: var(--text); }
body.dark-mode select, body.dark-mode textarea { background: #0f1117; color: var(--text); border-color: var(--border); }
body.dark-mode .tbl-wrap table { background: #1a1d27; }
body.dark-mode .tbl-wrap tbody tr:hover { background: #12151f; }
body.dark-mode #olt-terminal-output { background: #060810 !important; }
body.dark-mode .btn-logout { background: #1a1d27; color: var(--muted); border-color: var(--border); }
.btn-dark-mode {
  padding: 7px 12px; border-radius: 7px; border: 1.5px solid var(--border);
  background: var(--white); font-family: var(--font); font-size: 16px;
  cursor: pointer; transition: all .2s; line-height: 1; color: var(--text);
}
.btn-dark-mode:hover { border-color: var(--blue); }

/* ── Sino de Notificações ── */
.btn-sino {
  position: relative; padding: 7px 10px; border-radius: 7px;
  border: 1.5px solid var(--border); background: var(--white);
  font-size: 16px; cursor: pointer; transition: all .2s; line-height: 1;
  color: var(--text);
}
.btn-sino:hover { border-color: var(--blue); }
.sino-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  background: #dc2626; color: #fff; border-radius: 10px; font-size: 10px;
  font-weight: 800; display: flex; align-items: center; justify-content: center;
  padding: 0 3px; pointer-events: none; display: none;
}
.notif-panel {
  position: fixed; top: 52px; right: 12px; width: 360px; max-width: calc(100vw - 24px);
  background: var(--white); border: 1.5px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); z-index: 1200; overflow: hidden;
  display: none; flex-direction: column; max-height: calc(100vh - 72px);
}
.notif-panel.open { display: flex; }
.notif-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1.5px solid var(--border); flex-shrink: 0;
}
.notif-title { font-size: 14px; font-weight: 700; color: var(--text); }
.notif-list { overflow-y: auto; flex: 1; }
.notif-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid var(--border); transition: background .15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg); }
.notif-icon {
  width: 34px; height: 34px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0;
}
.notif-icon-reservado  { background: #fef3c7; }
.notif-icon-ativo      { background: var(--green-light); }
.notif-icon-cancelado  { background: #f1f5f9; }
.notif-icon-alerta     { background: #fee2e2; }
.notif-item-alerta     { background: #fff8f8; }
body.dark-mode .notif-item-alerta { background: #2d1515; }
.notif-body { flex: 1; min-width: 0; }
.notif-nome { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-desc { font-size: 11px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-data { font-size: 10px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.notif-arrow {
  width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid var(--border);
  background: var(--white); display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer; flex-shrink: 0; transition: all .15s; color: var(--blue);
}
.notif-arrow:hover { background: var(--blue-light); border-color: var(--blue); }
.notif-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13px; }
body.dark-mode .notif-panel { background: #1a1d27; }
body.dark-mode .notif-item:hover { background: #12151f; }
body.dark-mode .btn-sino { background: #1a1d27; color: var(--muted); border-color: var(--border); }
body.dark-mode .notif-arrow { background: #1a1d27; border-color: var(--border); }
body.dark-mode .notif-arrow:hover { background: #1a2a3a; }

/* ── Status do Servidor ── */
.srv-card { background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:20px 22px;margin-bottom:16px; }
.srv-card-title { font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:14px;display:flex;align-items:center;gap:8px; }
.srv-metric-row { display:flex;align-items:center;gap:14px;margin-bottom:10px; }
.srv-metric-label { font-size:12px;color:var(--muted);width:80px;flex-shrink:0; }
.srv-bar-wrap { flex:1;height:12px;background:var(--bg);border-radius:8px;overflow:hidden;border:1px solid var(--border); }
.srv-bar { height:100%;border-radius:8px;transition:width .6s ease;min-width:4px; }
.srv-bar-green  { background:linear-gradient(90deg,#22c55e,#16a34a); }
.srv-bar-yellow { background:linear-gradient(90deg,#f59e0b,#d97706); }
.srv-bar-red    { background:linear-gradient(90deg,#ef4444,#dc2626); }
.srv-pct { font-size:13px;font-weight:700;color:var(--text);width:40px;text-align:right;flex-shrink:0; }
.srv-detail { font-size:11px;color:var(--muted);width:120px;text-align:right;flex-shrink:0; }
.srv-info-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:4px; }
.srv-info-item { background:var(--bg);border-radius:10px;padding:12px 14px;border:1px solid var(--border); }
.srv-info-item-label { font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px; }
.srv-info-item-val { font-size:14px;font-weight:700;color:var(--text); }
/* Gráfico CPU histórico */
.cpu-chart-wrap { width:100%;height:80px;position:relative;margin-top:8px; }
.cpu-chart-canvas { width:100%;height:80px; }
.cpu-chart-grid { position:absolute;inset:0;pointer-events:none; }
body.dark-mode .srv-card { background:#1a1d27; }
body.dark-mode .srv-info-item { background:#12151f; }
.srv-alert { background:#fee2e2;border:1.5px solid #dc2626;border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:13px;color:#b91c1c;display:flex;align-items:center;gap:10px; }
body.dark-mode .srv-alert { background:#450a0a;border-color:#f87171;color:#fca5a5; }

html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); overflow-x: hidden; }


/* ── Animação pulse para badges de novidade ──────────────────────── */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); }
  50%       { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}