/* Tipografia moderna (Inter) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{--brand:#1B365D;--brand-2:#4A90A4;--accent:#FF7A00;--bg:#F6F9FC;--fg:#0f172a;--muted:#475569;--border:#e2e8f0;--success:#059669;--warning:#d97706;--error:#dc2626;--card-bg:#ffffff;--surface:#f8fafc;--info:#2563eb;--shadow:0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .06)}

body{background:#ffffff; font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; color: var(--fg); line-height:1.5}

.navbar-brand img{height:28px}
.brand{display:flex;align-items:center;justify-content:center;gap:.5rem}
.brand img{height:56px}
.brand .title{font-weight:600;color:var(--brand)}

.card{border:0;border-radius:14px;box-shadow:0 10px 30px rgba(27,54,93,.08)}

.btn-primary{background-color:var(--brand);border-color:var(--brand);font-weight:500}
.btn-primary:hover{background-color:#152948;border-color:#152948}
.btn-outline-secondary{color:var(--brand);border-color:var(--brand);font-weight:500}
.btn-outline-secondary:hover{background-color:var(--brand);border-color:var(--brand);color:#fff}

.form-label{font-weight:600;color:#0d1b2a}
.form-control,.form-select{border-color:var(--border);border-radius:8px}
.form-control:focus,.form-select:focus{box-shadow:0 0 0 .2rem rgba(27,54,93,.12);border-color:var(--brand)}

.link-muted{color:#6c757d}
.footer-note{font-size:.85rem;color:#6c757d}
.container-narrow{max-width:520px}
.container-auth{max-width:520px}
.container-admin{max-width:1140px}

header.app-header{padding:24px 0;text-align:center}
header.app-header .subtitle{color:#6c757d}
.navbar-dark.bg-dark{background:linear-gradient(90deg, var(--brand) 0%, #0f223e 100%) !important}
.badge-accent{background-color:var(--accent)}

/* Cartões de seleção (autorizar) com visual moderno */
.mode-card{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.06);transition:all .2s ease;cursor:pointer;opacity:1 !important;pointer-events:auto !important}
.mode-card .icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:#eef2ff;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.mode-card .title{font-weight:600;color:var(--fg);margin:0}
.mode-card .subtitle{font-size:.85rem;color:var(--muted);margin:0}
.mode-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.1);transform:translateY(-1px)}
.mode-card.active{border-color:var(--brand);box-shadow:0 6px 18px rgba(27,54,93,.12)}
.mode-card.loading{opacity:0.6;pointer-events:none}
.mode-card.disabled{opacity:0.5;pointer-events:none;cursor:not-allowed}
.mode-card .spinner,.mode-card .loader,.mode-card .loading-spinner{display:none !important}
.loading-overlay,.spinner-overlay{display:none !important}

/* Badges e ícones harmônicos */
.bi{vertical-align:-2px}

/* Tema claro dentro do admin */
.page-header{background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%); border-bottom:1px solid var(--border)}
.page-title{font-weight:700}

/* Cards e tabelas leves */
.table thead th{background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);border:none;font-weight:600;color:#374151}
.table tbody td{border-color:#f1f5f9}

/* Fundo azul escuro para páginas que precisam de alto contraste da logo */
body.bg-brand{background:var(--brand) !important; color:#fff;}
body.bg-brand header.app-header .subtitle{color:rgba(255,255,255,.85)}
body.bg-brand .brand .title{color:#fff}

/* Labels e textos diretamente no body.bg-brand (fora de cards) devem ser brancos */
body.bg-brand > .container .form-label:not(.card .form-label),
body.bg-brand > .container-fluid .form-label:not(.card .form-label),
body.bg-brand .form-label:not(.card *){color:#fff !important}
body.bg-brand > .container .form-check-label:not(.card .form-check-label),
body.bg-brand > .container-fluid .form-check-label:not(.card .form-check-label),
body.bg-brand .form-check-label:not(.card *){color:#fff !important}
body.bg-brand > .container .form-text:not(.card .form-text),
body.bg-brand > .container-fluid .form-text:not(.card .form-text),
body.bg-brand .form-text:not(.card *){color:rgba(255,255,255,.7) !important}
body.bg-brand > .container h1:not(.card h1), body.bg-brand > .container h2:not(.card h2), body.bg-brand > .container h3:not(.card h3), body.bg-brand > .container h4:not(.card h4), body.bg-brand > .container h5:not(.card h5), body.bg-brand > .container h6:not(.card h6),
body.bg-brand > .container-fluid h1:not(.card h1), body.bg-brand > .container-fluid h2:not(.card h2), body.bg-brand > .container-fluid h3:not(.card h3), body.bg-brand > .container-fluid h4:not(.card h4), body.bg-brand > .container-fluid h5:not(.card h5), body.bg-brand > .container-fluid h6:not(.card h6),
body.bg-brand h1:not(.card *), body.bg-brand h2:not(.card *), body.bg-brand h3:not(.card *), body.bg-brand h4:not(.card *), body.bg-brand h5:not(.card *), body.bg-brand h6:not(.card *){color:#fff !important}

/* Aumentar legibilidade: cards e formulários com fundo branco e texto escuro dentro do bg-brand */
body.bg-brand .card{background:#ffffff; color:#0d1b2a}
body.bg-brand .card .card-header{background:#ffffff; color:#0d1b2a; border-bottom:1px solid #e5e7eb}
body.bg-brand .card .card-title, 
body.bg-brand .card label,
body.bg-brand .card .form-check-label,
body.bg-brand .card .form-text{color:#0d1b2a}
body.bg-brand .card .form-text{color:#6b7280}
body.bg-brand .card .form-control,
body.bg-brand .card .custom-select{background:#fff; color:#0d1b2a; border-color:#e5e7eb}
body.bg-brand .card .input-group-text{background:#f1f5f9;color:#334155;border-color:#e2e8f0}
body.bg-brand .card a{color:var(--brand-2)}
body.bg-brand .card a:hover{color:#2b6f80}

/* Tabela padrão dentro de cards no bg-brand */
body.bg-brand .card .table{color:#0d1b2a}
body.bg-brand .card .table thead th{background:#f8fafc;color:#0d1b2a;border-color:#e5e7eb}
body.bg-brand .card .table td, 
body.bg-brand .card .table th{border-color:#e5e7eb}

/* Botão de destaque (laranja) para Dashboard */
.btn-accent{background-color:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}
.btn-accent:hover{background-color:#e56e00;border-color:#e56e00;color:#fff}

/* Tabela em tom sobre tom (azul escuro) para páginas Admin */
.table-brand{color:#fff;background-color:transparent; /* neutraliza variáveis de tabela do BS5 */
  --bs-table-bg: transparent; --bs-table-striped-bg: transparent; --bs-table-striped-color:#fff;}
.table-brand thead th{background:#0d1a33;color:#fff;border-color:rgba(255,255,255,.15)}
/* Fundo das linhas (base) - mais escuro */
.table-brand tbody tr{background-color:#0c1930}
/* Zebra (linhas pares) - um pouco mais claro para aumentar o contraste */
.table-brand tbody tr:nth-of-type(even){background-color:#183366}
/* Hover com leve destaque */
.table-brand tbody tr:hover{background-color:#22417d}
/* Bordas e cor do texto (força texto branco em toda a tabela) */
.table-brand td,.table-brand th{border-color:rgba(255,255,255,.15); color:#fff}
.table-brand a{color:#8ecaff}
.table-brand a:hover{color:#b8dcff}
/* Importante: forçar o mesmo fundo nos td/th para não perder a zebra com regras do Bootstrap */
.table-brand tbody tr>td,.table-brand tbody tr>th{background-color:#0c1930; color:#fff}
.table-brand tbody tr:nth-of-type(even)>td,.table-brand tbody tr:nth-of-type(even)>th{background-color:#183366; color:#fff}

/* Card escuro para envolver tabelas em páginas Admin */
.card-brand{background:linear-gradient(90deg, var(--brand) 0%, #0f223e 100%);color:#fff}
.card-brand .card-header{background:rgba(255,255,255,.06);color:#fff;border-bottom:1px solid rgba(255,255,255,.15)}
.card-brand .card-body{color:#fff}

/* Admin Dashboard Tiles */
.menu-grid { margin-top: .5rem; }
.menu-tile.card {
  background: #ffffff !important;
  border: none;
  border-radius: .75rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  color: #0d1b2a;
  transition: all .3s ease;
  cursor: pointer;
  text-decoration: none !important;
}
.menu-tile .card-body i { font-size: 1.6rem; color: var(--accent, #FF7A00); transition: all .3s ease; }
.menu-tile .fw-semibold { color: #0d1b2a; transition: all .3s ease; }
.menu-tile .small { color: rgba(13,27,42,.7); transition: all .3s ease; }
.menu-tile:hover { 
  transform: translateY(-3px) !important; 
  box-shadow: 0 12px 28px rgba(0,0,0,.15) !important;
  background: linear-gradient(135deg, #f0f7ff 0%, #e1f0ff 100%) !important;
  border: 1px solid rgba(27,54,93,.2) !important;
  text-decoration: none !important;
}
.menu-tile:hover .card-body i { color: var(--brand) !important; }
.menu-tile:hover .fw-semibold { color: var(--brand) !important; }
.menu-tile:hover .small { color: rgba(27,54,93,.8) !important; }
.menu-tile:active { transform: translateY(-1px) !important; }
.menu-tile:focus { text-decoration: none !important; outline: none; }

/* Estilo para grupos de entrada com ícones à esquerda */
.input-group-text{background:#f1f5f9;border-color:#e2e8f0;color:#334155}
.input-group-text i{color:var(--brand-2,#4A90A4)}

/* Texto auxiliar dentro de cards/form */
.card .form-text{color:#6b7280}

/* Ajuste de cabeçalhos das seções (TL1 / Telnet / SNMP) */
.section-head{font-size:.85rem;letter-spacing:.02em;color:#6b7280;font-weight:600}

/* Botão salvar mais evidente */
button.btn.btn-primary i{vertical-align:-2px}

/* Tabs de Configurações Gerais: aba inativa laranja, ativa branca */
#settingsTabs { border-bottom: 0 !important; }
#settingsTabs .nav-link {
  background: var(--accent); /* laranja */
  color: #fff;
  border: 0;
  border-radius: .75rem .75rem 0 0;
  margin-right: .25rem;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
  font-weight: 500;
}
#settingsTabs .nav-link i { color: inherit; }
#settingsTabs .nav-link:hover { filter: brightness(0.95); }
#settingsTabs .nav-link.active {
  background: #fff; /* aba ativa branca */
  color: #0d1b2a;
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
#settingsTabs .nav-link.active i { color: var(--brand); }

/* Ajuste de borda superior para integrar com o conteúdo das abas */
#settingsTabs + .tab-content { border-top-left-radius: 0; }


/* Navbar Button Hover Effects */
.navbar-btn-home {
  transition: all .3s ease;
}
.navbar-btn-home:hover {
  background-color: #e56e00 !important;
  border-color: #e56e00 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.navbar-btn-home:active {
  transform: translateY(0);
}

.navbar-btn-back {
  transition: all .3s ease;
  border-color: rgba(255,255,255,0.5) !important;
  background-color: rgba(255,255,255,0.9) !important;
  color: #0d1b2a !important;
}
.navbar-btn-back:hover {
  background-color: rgba(255,255,255,1) !important;
  border-color: rgba(255,255,255,1) !important;
  color: var(--brand) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.navbar-btn-back:active {
  transform: translateY(0);
}

.navbar-btn-logout {
  transition: all .3s ease;
}
.navbar-btn-logout:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.navbar-btn-logout:active {
  transform: translateY(0);
}

/* Responsive helpers */
.desktop-only{ display:inline; }
.mobile-only{ display:none; }
@media (max-width: 640px){
  .desktop-only{ display:none; }
  .mobile-only{ display:inline; }
}

/* Step blocks (streamed status) */
.step{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  border-radius: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 6px solid var(--info);
  box-shadow: var(--shadow);
}
.step h1, .step h2, .step h3{
  margin: 0;
  color: var(--fg);
  font-weight: 600;
  line-height: 1.25;
  font-size: 18px;
}
@media (max-width: 640px){
  .step h1, .step h2, .step h3{ font-size: 16px; }
}
 
/* ========================= */
/* Pop-ups com cabeçalho padrão */
/* ========================= */
/* Modais Bootstrap: cabeçalho com gradiente harmonioso */
.modal-content{ border: 0; box-shadow: 0 12px 34px rgba(27,54,93,.18); position: relative; overflow: hidden; }
.modal-content::before{
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
  z-index: 2; /* acima do fundo da modal, atrás do conteúdo do header */
}
/* Stripe mais alta para garantir o degradê visível no modal de autorização */
.modal.auth-modal .modal-content::before{
  height: 56px;
  z-index: 0;
  /* Cores fixas roxas para combinar com o design do wizard */
  background: linear-gradient(90deg, #5b4bdf 0%, #834bdc 100%) !important;
}
.modal-header{
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
  border-bottom: 0;
}
.modal-header .btn-close{ filter: invert(1); }
/* Suporte ao Bootstrap 4: botão .close (×) em cabeçalho de modal/toast */
.modal-header .close{ color:#fff !important; opacity:1 !important; text-shadow:none !important; }
.modal-header .close span{ color:#fff !important; }

/* Força o gradiente especificamente no modal de autorização (Bootstrap) */
.auth-modal .modal-header{
  /* Gradiente direto no cabeçalho para garantir visibilidade */
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  position: relative; z-index: 1;
  color: #fff !important;
  border-bottom: 0 !important;
}
.auth-modal .modal-header .btn-close{ filter: invert(1) !important; }

/* Modais custom (overlay) usados dentro do wizard PPPoE */
.modal-overlay .modal-header{
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  color: #fff !important;
  border-bottom: 0 !important;
}
.modal-overlay .modal-header .btn-close{ filter: invert(1) !important; }

/* Toasts Bootstrap: cabeçalho padronizado */
.toast-header{
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
  border-bottom: 0;
}
.toast-header .btn-close{ filter: invert(1); }
/* Suporte ao Bootstrap 4: botão .close em cabeçalho de toast */
.toast-header .close{ color:#fff !important; opacity:1 !important; text-shadow:none !important; }

/* SweetAlert2: barra superior harmoniosa e cantos arredondados */
.swal2-popup{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(27,54,93,.18);
}
.swal2-popup::before{
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
}
.swal2-popup .swal2-header{
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  color: #fff !important;
  margin: -1.25em -1.25em 1em !important; /* cobre toda a área padrão do popup */
  padding: 1em 1.25em !important;
  border-radius: 14px 14px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 52px !important;
}
.swal2-popup .swal2-title{ color: #fff !important; margin: 0; padding: 0; }
.swal2-popup .swal2-close{
  color: #fff !important;
  opacity: 1 !important;
}

/* SweetAlert2: reforço específico para o modal de autorização */
.swal2-popup.auth-modal .swal2-header{
  /* Cores fixas para o SweetAlert de autorização */
  background: linear-gradient(90deg, #5b4bdf 0%, #834bdc 100%) !important;
  color: #fff !important;
  margin: -1.25em -1.25em 1em !important;
  padding: 1em 1.25em !important;
  border-radius: 14px 14px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 52px !important;
}
.swal2-popup.auth-modal .swal2-title{ color: #fff !important; }
.swal2-popup.auth-modal .swal2-close{ color: #fff !important; opacity: 1 !important; }
.swal2-popup.auth-modal::before{
  content: '';
  display: block !important;
  position: absolute; top: 0; left: 0; right: 0;
  height: 56px; /* faixa robusta para cobrir o topo */
  background: linear-gradient(90deg, #5b4bdf 0%, #834bdc 100%) !important;
}

/* Bootstrap modal (wizard de autorização) */
.modal.auth-modal .modal-header{
  background: linear-gradient(90deg, var(--brand-1) 0%, var(--brand-2) 100%) !important;
  color: #fff !important;
  border-bottom: 0 !important;
}
/* Alta especificidade: cabeçalho do modal de autorização por ID */
#authWizardModal .modal-header{
  /* Torna o header transparente para a faixa ::before aparecer por trás */
  background: transparent !important;
  position: relative; z-index: 1;
  color: #fff !important;
  border-bottom: 0 !important;
}
.modal.auth-modal .btn-close{
  filter: invert(1) brightness(1.8);
  opacity: .9;
}
.modal.auth-modal .modal-content{
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.swal2-title{ font-weight: 700; }
/* Center aligned tables across the app */
.table thead th, .table tbody td { text-align: center; vertical-align: middle; font-weight:500 }

/* Header th with inline filter centered */
.th-inline-filter { display: flex; align-items: center; justify-content: center; gap: .5rem; }

/* Responsivo: coluna "Início" em tabelas
   - Desktop (>=992px): manter data/hora em uma linha
   - Mobile/Tablet (<992px): permitir quebra de linha natural */
@media (min-width: 992px){
  .table td.start-cell{ white-space: nowrap; }
}
@media (max-width: 991.98px){
  .table td.start-cell{ white-space: normal; }
}

/* Coluna "ONU": alinhar à esquerda e truncar em telas menores */
.table td.onu-cell{ text-align: left; }
@media (max-width: 991.98px){
  .table td.onu-cell strong{ display:inline-block; max-width: 48vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* Modais em bg-brand: garantir contraste legível no conteúdo */
body.bg-brand .modal-content{ background:#fff; }
body.bg-brand .modal-body,
body.bg-brand .modal-footer{ color:#0d1b2a !important; }
body.bg-brand .modal-content .form-label,
body.bg-brand .modal-content .form-check-label{ color:#0d1b2a !important; }
body.bg-brand .modal-content .form-text{ color:#6b7280 !important; }
body.bg-brand .modal-content .form-control,
body.bg-brand .modal-content .form-select{ background:#fff !important; color:#0d1b2a !important; border-color:#e5e7eb !important; }
body.bg-brand .modal-content .input-group-text{ background:#f1f5f9 !important; color:#334155 !important; border-color:#e2e8f0 !important; }

/* Tabela padrão dentro de cards no bg-brand */
body.bg-brand .card .table{color:#0d1b2a}
body.bg-brand .card .table thead th{background:#f8fafc;color:#0d1b2a;border-color:#e5e7eb}
body.bg-brand .card .table td, 
body.bg-brand .card .table th{border-color:#e5e7eb}

/* Botão de destaque (laranja) para Dashboard */
.btn-accent{background-color:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}
.btn-accent:hover{background-color:#e56e00;border-color:#e56e00;color:#fff}

/* Tabela em tom sobre tom (azul escuro) para páginas Admin */
.table-brand{color:#fff;background-color:transparent; /* neutraliza variáveis de tabela do BS5 */
  --bs-table-bg: transparent; --bs-table-striped-bg: transparent; --bs-table-striped-color:#fff;}
.table-brand thead th{background:#0d1a33;color:#fff;border-color:rgba(255,255,255,.15)}
/* Fundo das linhas (base) - mais escuro */
.table-brand tbody tr{background-color:#0c1930}
/* Zebra (linhas pares) - um pouco mais claro para aumentar o contraste */
.table-brand tbody tr:nth-of-type(even){background-color:#183366}
/* Hover com leve destaque */
.table-brand tbody tr:hover{background-color:#22417d}
/* Bordas e cor do texto (força texto branco em toda a tabela) */
.table-brand td,.table-brand th{border-color:rgba(255,255,255,.15); color:#fff}
.table-brand a{color:#8ecaff}
.table-brand a:hover{color:#b8dcff}
/* Importante: forçar o mesmo fundo nos td/th para não perder a zebra com regras do Bootstrap */
.table-brand tbody tr>td,.table-brand tbody tr>th{background-color:#0c1930; color:#fff}
.table-brand tbody tr:nth-of-type(even)>td,.table-brand tbody tr:nth-of-type(even)>th{background-color:#183366; color:#fff}

/* Card escuro para envolver tabelas em páginas Admin */
.card-brand{background:linear-gradient(90deg, var(--brand) 0%, #0f223e 100%);color:#fff}
.card-brand .card-header{background:rgba(255,255,255,.06);color:#fff;border-bottom:1px solid rgba(255,255,255,.15)}
.card-brand .card-body{color:#fff}

/* Admin Dashboard Tiles */
.menu-grid { margin-top: .5rem; }
.menu-tile.card {
  background: #ffffff !important;
  border: none;
  border-radius: .75rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  color: #0d1b2a;
  transition: all .3s ease;
  cursor: pointer;
  text-decoration: none !important;
}
.menu-tile .card-body i { font-size: 1.6rem; color: var(--accent, #FF7A00); transition: all .3s ease; }
.menu-tile .fw-semibold { color: #0d1b2a; transition: all .3s ease; }
.menu-tile .small { color: rgba(13,27,42,.7); transition: all .3s ease; }
.menu-tile:hover { 
  transform: translateY(-3px) !important; 
  box-shadow: 0 12px 28px rgba(0,0,0,.15) !important;
  background: linear-gradient(135deg, #f0f7ff 0%, #e1f0ff 100%) !important;
  border: 1px solid rgba(27,54,93,.2) !important;
  text-decoration: none !important;
}
.menu-tile:hover .card-body i { color: var(--brand) !important; }
.menu-tile:hover .fw-semibold { color: var(--brand) !important; }
.menu-tile:hover .small { color: rgba(27,54,93,.8) !important; }
.menu-tile:active { transform: translateY(-1px) !important; }
.menu-tile:focus { text-decoration: none !important; outline: none; }

/* Estilo para grupos de entrada com ícones à esquerda */
.input-group-text{background:#f1f5f9;border-color:#e2e8f0;color:#334155}
.input-group-text i{color:var(--brand-2,#4A90A4)}

/* Texto auxiliar dentro de cards/form */
.card .form-text{color:#6b7280}

/* Ajuste de cabeçalhos das seções (TL1 / Telnet / SNMP) */
.section-head{font-size:.85rem;letter-spacing:.02em;color:#6b7280;font-weight:600}

/* Botão salvar mais evidente */
button.btn.btn-primary i{vertical-align:-2px}

/* Tabs de Configurações Gerais: aba inativa laranja, ativa branca */
#settingsTabs { border-bottom: 0 !important; }
#settingsTabs .nav-link {
  background: var(--accent); /* laranja */
  color: #fff;
  border: 0;
  border-radius: .75rem .75rem 0 0;
  margin-right: .25rem;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
  font-weight: 500;
}
#settingsTabs .nav-link i { color: inherit; }
#settingsTabs .nav-link:hover { filter: brightness(0.95); }
#settingsTabs .nav-link.active {
  background: #fff; /* aba ativa branca */
  color: #0d1b2a;
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
#settingsTabs .nav-link.active i { color: var(--brand); }

/* Ajuste de borda superior para integrar com o conteúdo das abas */
#settingsTabs + .tab-content { border-top-left-radius: 0; }


/* Navbar Button Hover Effects */
.navbar-btn-home {
  transition: all .3s ease;
}
.navbar-btn-home:hover {
  background-color: #e56e00 !important;
  border-color: #e56e00 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.navbar-btn-home:active {
  transform: translateY(0);
}

.navbar-btn-back {
  transition: all .3s ease;
  border-color: rgba(255,255,255,0.5) !important;
  background-color: rgba(255,255,255,0.9) !important;
  color: #0d1b2a !important;
}
.navbar-btn-back:hover {
  background-color: rgba(255,255,255,1) !important;
  border-color: rgba(255,255,255,1) !important;
  color: var(--brand) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.navbar-btn-back:active {
  transform: translateY(0);
}

.navbar-btn-logout {
  transition: all .3s ease;
}
.navbar-btn-logout:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.navbar-btn-logout:active {
  transform: translateY(0);
}

/* Responsive helpers */
.desktop-only{ display:inline; }
.mobile-only{ display:none; }
@media (max-width: 640px){
  .desktop-only{ display:none; }
  .mobile-only{ display:inline; }
}

/* Step blocks (streamed status) */
.step{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  border-radius: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 6px solid var(--info);
  box-shadow: var(--shadow);
}
.step h1, .step h2, .step h3{
  margin: 0;
  color: var(--fg);
  font-weight: 600;
  line-height: 1.25;
  font-size: 18px;
}
@media (max-width: 640px){
  .step h1, .step h2, .step h3{ font-size: 16px; }
}
 
/* ========================= */
/* Pop-ups com cabeçalho padrão */
/* ========================= */
/* Modais Bootstrap: cabeçalho com gradiente harmonioso */
.modal-content{ border: 0; box-shadow: 0 12px 34px rgba(27,54,93,.18); position: relative; overflow: hidden; }
.modal-content::before{
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
  z-index: 2; /* acima do fundo da modal, atrás do conteúdo do header */
}
/* Stripe mais alta para garantir o degradê visível no modal de autorização */
.modal.auth-modal .modal-content::before{
  height: 56px;
  z-index: 0;
  /* Cores fixas roxas para combinar com o design do wizard */
  background: linear-gradient(90deg, #5b4bdf 0%, #834bdc 100%) !important;
}
.modal-header{
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
  border-bottom: 0;
}
.modal-header .btn-close{ filter: invert(1); }
/* Suporte ao Bootstrap 4: botão .close (×) em cabeçalho de modal/toast */
.modal-header .close{ color:#fff !important; opacity:1 !important; text-shadow:none !important; }
.modal-header .close span{ color:#fff !important; }

/* Força o gradiente especificamente no modal de autorização (Bootstrap) */
.auth-modal .modal-header{
  /* Gradiente direto no cabeçalho para garantir visibilidade */
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  position: relative; z-index: 1;
  color: #fff !important;
  border-bottom: 0 !important;
}
.auth-modal .modal-header .btn-close{ filter: invert(1) !important; }

/* Modais custom (overlay) usados dentro do wizard PPPoE */
.modal-overlay .modal-header{
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  color: #fff !important;
  border-bottom: 0 !important;
}
.modal-overlay .modal-header .btn-close{ filter: invert(1) !important; }

/* Toasts Bootstrap: cabeçalho padronizado */
.toast-header{
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
  border-bottom: 0;
}
.toast-header .btn-close{ filter: invert(1); }
/* Suporte ao Bootstrap 4: botão .close em cabeçalho de toast */
.toast-header .close{ color:#fff !important; opacity:1 !important; text-shadow:none !important; }

/* SweetAlert2: barra superior harmoniosa e cantos arredondados */
.swal2-popup{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(27,54,93,.18);
}
.swal2-popup::before{
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
}
.swal2-popup .swal2-header{
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  color: #fff !important;
  margin: -1.25em -1.25em 1em !important; /* cobre toda a área padrão do popup */
  padding: 1em 1.25em !important;
  border-radius: 14px 14px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 52px !important;
}
.swal2-popup .swal2-title{ color: #fff !important; margin: 0; padding: 0; }
.swal2-popup .swal2-close{
  color: #fff !important;
  opacity: 1 !important;
}

/* SweetAlert2: reforço específico para o modal de autorização */
.swal2-popup.auth-modal .swal2-header{
  /* Cores fixas para o SweetAlert de autorização */
  background: linear-gradient(90deg, #5b4bdf 0%, #834bdc 100%) !important;
  color: #fff !important;
  margin: -1.25em -1.25em 1em !important;
  padding: 1em 1.25em !important;
  border-radius: 14px 14px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 52px !important;
}
.swal2-popup.auth-modal .swal2-title{ color: #fff !important; }
.swal2-popup.auth-modal .swal2-close{ color: #fff !important; opacity: 1 !important; }
.swal2-popup.auth-modal::before{
  content: '';
  display: block !important;
  position: absolute; top: 0; left: 0; right: 0;
  height: 56px; /* faixa robusta para cobrir o topo */
  background: linear-gradient(90deg, #5b4bdf 0%, #834bdc 100%) !important;
}

/* Bootstrap modal (wizard de autorização) */
.modal.auth-modal .modal-header{
  background: linear-gradient(90deg, var(--brand-1) 0%, var(--brand-2) 100%) !important;
  color: #fff !important;
  border-bottom: 0 !important;
}
/* Alta especificidade: cabeçalho do modal de autorização por ID */
#authWizardModal .modal-header{
  /* Torna o header transparente para a faixa ::before aparecer por trás */
  background: transparent !important;
  position: relative; z-index: 1;
  color: #fff !important;
  border-bottom: 0 !important;
}
.modal.auth-modal .btn-close{
  filter: invert(1) brightness(1.8);
  opacity: .9;
}
.modal.auth-modal .modal-content{
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.swal2-title{ font-weight: 700; }
/* Center aligned tables across the app */
.table thead th, .table tbody td { text-align: center; vertical-align: middle; font-weight:500 }

/* Header th with inline filter centered */
.th-inline-filter { display: flex; align-items: center; justify-content: center; gap: .5rem; }

/* Responsivo: coluna "Início" em tabelas
   - Desktop (>=992px): manter data/hora em uma linha
   - Mobile/Tablet (<992px): permitir quebra de linha natural */
@media (min-width: 992px){
  .table td.start-cell{ white-space: nowrap; }
}
@media (max-width: 991.98px){
  .table td.start-cell{ white-space: normal; }
}

/* Coluna "ONU": alinhar à esquerda e truncar em telas menores */
.table td.onu-cell{ text-align: left; }
@media (max-width: 991.98px){
  .table td.onu-cell strong{ display:inline-block; max-width: 48vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}