/**
 * Dashboard Core3 - Tema moderno (cores originais do tema Sufee/192.168.2.16)
 * Carregue após os estilos existentes em todas as filiais.
 */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* Padrão moderno: destaque por card (faixa + sombra), fundo #e8ecf1, tabelas em zebra */

/* === Base e tipografia === */
body {
  font-family: 'Plus Jakarta Sans', 'Open Sans', -apple-system, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5;
  color: #1a1d24;
  background: #e8ecf1 !important;
}

#right-panel .content span.count,
.card-body .count {
  font-size: 2rem !important;
  font-weight: 700;
}

/* === Container principal === */
#right-panel.right-panel {
  background: #e8ecf1 !important;
  min-height: 100vh;
}

/* === Header === */
#right-panel header.header {
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
  padding: 0.75rem 1.5rem !important;
  border-bottom: none !important;
}

.header-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1400px;
  margin: 0 auto;
}

.header .navbar-brand img {
  max-height: 40px !important;
  height: auto;
}

/* === Área de conteúdo === */
#right-panel .content {
  padding: 1.5rem !important;
  max-width: 1400px;
  margin: 0 auto;
}

#right-panel .content .row {
  margin-bottom: 1rem;
}

/* === Cards de dados: faixa de cor + sombra para destacar cada um === */
#right-panel .card:not(.text-white) {
  border: none !important;
  border-radius: 12px !important;
  border-left: 4px solid #20a8d8 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06) !important;
  overflow: hidden;
  background: #fff !important;
  transition: box-shadow .2s ease;
}

#right-panel .card:not(.text-white):hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.06) !important;
}

#right-panel .card:not(.text-white) .card-header {
  background: linear-gradient(135deg, rgba(32, 168, 216, 0.12) 0%, rgba(32, 168, 216, 0.04) 100%) !important;
  border-bottom: 1px solid rgba(32, 168, 216, 0.25) !important;
  padding: 1rem 1.25rem !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  color: #1a1d24 !important;
}

/* Variação de cor por ordem do card (azul, teal, roxo, laranja) */
#right-panel .content .col-lg-6 .card:nth-child(2):not(.text-white),
#right-panel .content .col-lg-12 .card:nth-child(2):not(.text-white) { border-left-color: #17a2b8 !important; }
#right-panel .content .col-lg-6 .card:nth-child(2):not(.text-white) .card-header,
#right-panel .content .col-lg-12 .card:nth-child(2):not(.text-white) .card-header { background: linear-gradient(135deg, rgba(23, 162, 184, 0.12) 0%, rgba(23, 162, 184, 0.04) 100%) !important; border-bottom-color: rgba(23, 162, 184, 0.25) !important; }

#right-panel .content .col-lg-6 .card:nth-child(3):not(.text-white),
#right-panel .content .col-lg-12 .card:nth-child(3):not(.text-white) { border-left-color: #6f42c1 !important; }
#right-panel .content .col-lg-6 .card:nth-child(3):not(.text-white) .card-header,
#right-panel .content .col-lg-12 .card:nth-child(3):not(.text-white) .card-header { background: linear-gradient(135deg, rgba(111, 66, 193, 0.1) 0%, rgba(111, 66, 193, 0.04) 100%) !important; border-bottom-color: rgba(111, 66, 193, 0.25) !important; }

#right-panel .content .col-lg-6 .card:nth-child(4):not(.text-white),
#right-panel .content .col-lg-12 .card:nth-child(4):not(.text-white) { border-left-color: #fd7e14 !important; }
#right-panel .content .col-lg-6 .card:nth-child(4):not(.text-white) .card-header,
#right-panel .content .col-lg-12 .card:nth-child(4):not(.text-white) .card-header { background: linear-gradient(135deg, rgba(253, 126, 20, 0.1) 0%, rgba(253, 126, 20, 0.04) 100%) !important; border-bottom-color: rgba(253, 126, 20, 0.25) !important; }

/* Card body branco só nos cards de dados (tabelas), não nos de métricas */
#right-panel .card:not(.text-white) .card-body {
  padding: 1.25rem !important;
  background: #fff !important;
}

/* === CONTRASTE: texto sempre legível === */
/* 1) Cards de dados (fundo branco): texto escuro */
#right-panel .card:not(.text-white) .card-body,
#right-panel .card:not(.text-white) .card-body p,
#right-panel .card:not(.text-white) .card-body span,
#right-panel .card:not(.text-white) .card-body strong,
#right-panel .card:not(.text-white) .card-body a:not(.btn),
#right-panel .card:not(.text-white) .card-body .text-light {
  color: #1a1d24 !important;
  text-shadow: none !important;
}

/* 2) Cards de métrica com fundo claro (inline): texto escuro para contraste */
#right-panel .card[style*="background: #ccc"] .card-body,
#right-panel .card[style*="background: #ccc"] .card-body p,
#right-panel .card[style*="background: #ccc"] .card-body span,
#right-panel .card[style*="background: #ccc"] .card-body .text-light,
#right-panel .card[style*="background: #89c3fd"] .card-body,
#right-panel .card[style*="background: #89c3fd"] .card-body p,
#right-panel .card[style*="background: #89c3fd"] .card-body span,
#right-panel .card[style*="background: #89c3fd"] .card-body .text-light,
#right-panel .card[style*="background: #F5775D"] .card-body,
#right-panel .card[style*="background: #F5775D"] .card-body p,
#right-panel .card[style*="background: #F5775D"] .card-body span,
#right-panel .card[style*="background: #F5775D"] .card-body .text-light,
#right-panel .card[style*="background: #c8cb78"] .card-body,
#right-panel .card[style*="background: #c8cb78"] .card-body p,
#right-panel .card[style*="background: #c8cb78"] .card-body span,
#right-panel .card[style*="background: #c8cb78"] .card-body .text-light {
  color: #1a1d24 !important;
  text-shadow: none !important;
}

/* 3) Botões dentro de cards: manter contraste (labels/links não-botão já cobertos acima) */
#right-panel .card .card-body .btn {
  font-weight: 600 !important;
}
#right-panel .card .card-body .btn-info,
#right-panel .card .card-body .btn-primary {
  color: #fff !important;
  background: #20a8d8 !important;
  border-color: #20a8d8 !important;
}
#right-panel .card .card-body .btn-danger {
  color: #fff !important;
  background: #f86c6b !important;
  border-color: #f86c6b !important;
}
#right-panel .card .card-body .btn-outline-secondary {
  color: #495057 !important;
  border-color: #6c757d !important;
  background: #fff !important;
}

.card .card-body {
  padding: 1.25rem !important;
}

.card .card-footer {
  background: #f0f3f5 !important;
  border-top: 1px solid #dee2e6 !important;
}

/* === Tabelas === */
#right-panel .table {
  font-size: 0.875rem !important;
  margin-bottom: 0 !important;
}

#right-panel .table thead.thead-dark th {
  background: #263238 !important;
  color: #f1f2f7 !important;
  border: none !important;
  padding: 0.85rem 1rem !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-transform: none;
  letter-spacing: 0.02em;
}

#right-panel .table tbody td {
  padding: 0.75rem 1rem !important;
  vertical-align: middle !important;
  border-color: #e9ecef !important;
  color: #1a1d24 !important;
}

/* Listras alternadas para leitura fácil (exclui tabelas com cores por status: oss, oss2) */
#right-panel .table:not(.table-status-cores) tbody tr:nth-child(even) {
  background: #f5f7fa !important;
}

#right-panel .table:not(.table-status-cores) tbody tr:nth-child(odd) {
  background: #fff !important;
}

#right-panel .table:not(.table-status-cores) tbody tr:hover {
  background: #e8f4fc !important;
}

#right-panel .table tbody a {
  color: #20a8d8 !important;
  font-weight: 600;
  text-decoration: none;
}

#right-panel .table tbody a:hover {
  text-decoration: underline;
}

/* === Cards de métricas (estilo dashboard de mercado: fundo saturado + texto branco) === */
.card.text-white .card-body,
.card.bg-flat-color-1 .card-body,
.card.bg-flat-color-2 .card-body,
.card.bg-flat-color-3 .card-body,
.card.bg-flat-color-4 .card-body,
.card.bg-flat-color-5 .card-body {
  background: transparent !important;
  padding: 1.25rem !important;
}

/* Texto sempre branco e legível nos cards coloridos */
.card.text-white .count,
.card.text-white h4,
.card.text-white h4 .count,
.card.text-white p,
.card.text-white p.text-light,
.card.text-white span,
.card.bg-flat-color-1 .count, .card.bg-flat-color-1 p, .card.bg-flat-color-1 .text-light,
.card.bg-flat-color-2 .count, .card.bg-flat-color-2 p, .card.bg-flat-color-2 .text-light,
.card.bg-flat-color-3 .count, .card.bg-flat-color-3 p, .card.bg-flat-color-3 .text-light,
.card.bg-flat-color-4 .count, .card.bg-flat-color-4 p, .card.bg-flat-color-4 .text-light,
.card.bg-flat-color-5 .count, .card.bg-flat-color-5 p, .card.bg-flat-color-5 .text-light {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.15) !important;
}

.card.text-white .count,
.card.bg-flat-color-1 .count, .card.bg-flat-color-2 .count, .card.bg-flat-color-3 .count,
.card.bg-flat-color-4 .count, .card.bg-flat-color-5 .count {
  font-size: 2rem !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.card.text-white p.text-light,
.card.bg-flat-color-1 p, .card.bg-flat-color-2 p, .card.bg-flat-color-3 p,
.card.bg-flat-color-4 p, .card.bg-flat-color-5 p {
  font-size: 0.875rem !important;
  margin-bottom: 0 !important;
  opacity: 0.95 !important;
}

/* Cores mais saturadas (tom escuro) para contraste com texto branco */
.bg-flat-color-1 {
  background: #1890c7 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 20px rgba(24, 144, 199, .45) !important;
}

.bg-flat-color-2 {
  background: #4aadce !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 20px rgba(74, 173, 206, .45) !important;
}

.bg-flat-color-3 {
  background: #e6a800 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 20px rgba(230, 168, 0, .45) !important;
}

.bg-flat-color-4 {
  background: #e85554 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 20px rgba(232, 85, 84, .45) !important;
}

.bg-flat-color-5 {
  background: #3da75a !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 20px rgba(61, 167, 90, .45) !important;
}

/* === Grid de links (Chamados index): TODOS os cards com cor sólida + tamanho compacto === */
#right-panel .chamados-links-grid .card.text-white {
  border: none !important;
  border-radius: 10px !important;
  min-height: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
  transition: box-shadow .2s ease, transform .15s ease !important;
}
#right-panel .chamados-links-grid .card.text-white:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.18) !important;
  transform: translateY(-1px) !important;
}
/* Cores sólidas: cards sem inline usam a cor da classe */
#right-panel .chamados-links-grid .card.bg-flat-color-1:not([style*="background"]) { background: #1890c7 !important; }
#right-panel .chamados-links-grid .card.bg-flat-color-2:not([style*="background"]) { background: #4aadce !important; }
#right-panel .chamados-links-grid .card.bg-flat-color-3:not([style*="background"]) { background: #e6a800 !important; }
#right-panel .chamados-links-grid .card.bg-flat-color-4:not([style*="background"]) { background: #c62828 !important; }
#right-panel .chamados-links-grid .card.bg-flat-color-5:not([style*="background"]) { background: #2e7d32 !important; }
/* Cards com cor no inline: forçar a mesma cor para vencer tema que usa !important */
#right-panel .chamados-links-grid .card[style*="background: #060606"] { background: #060606 !important; }
#right-panel .chamados-links-grid .card[style*="background: #3F3A8C"] { background: #3F3A8C !important; }
#right-panel .chamados-links-grid .card[style*="background: #478C91"] { background: #478C91 !important; }
#right-panel .chamados-links-grid .card[style*="background: #7B00AB"] { background: #7B00AB !important; }
#right-panel .chamados-links-grid .card[style*="background: #3A9E61"] { background: #3A9E61 !important; }
#right-panel .chamados-links-grid .card[style*="background: #B02D5B"] { background: #B02D5B !important; }
#right-panel .chamados-links-grid .card[style*="background: #ccc"] { background: #95a5a6 !important; }
#right-panel .chamados-links-grid .card[style*="background: #c8cb78"] { background: #8b9a3c !important; }
#right-panel .chamados-links-grid .card[style*="background: #89c3fd"] { background: #5b9bd5 !important; }
#right-panel .chamados-links-grid .card .card-body {
  background: transparent !important;
  padding: 0.6rem 0.75rem !important;
  min-height: 0 !important;
}
#right-panel .chamados-links-grid .card .card-body p,
#right-panel .chamados-links-grid .card .card-body span,
#right-panel .chamados-links-grid .card .card-body strong,
#right-panel .chamados-links-grid .card .card-body .text-light,
#right-panel .chamados-links-grid .card .card-body h4 {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
  font-size: 0.8rem !important;
  line-height: 1.25 !important;
  margin-bottom: 0.15rem !important;
}
/* Cards com fundo claro no grid: texto escuro */
#right-panel .chamados-links-grid .card[style*="background: #ccc"] .card-body p,
#right-panel .chamados-links-grid .card[style*="background: #ccc"] .card-body .text-light,
#right-panel .chamados-links-grid .card[style*="background: #89c3fd"] .card-body p,
#right-panel .chamados-links-grid .card[style*="background: #c8cb78"] .card-body p {
  color: #1a1d24 !important;
  text-shadow: none !important;
}

/* === Painel VLAN: fundo sólido vermelho/verde, texto branco === */
#right-panel .painel-vlan-grid .card.bg-flat-color-4 { background: #c62828 !important; box-shadow: 0 4px 14px rgba(198, 40, 40, .5) !important; }
#right-panel .painel-vlan-grid .card.bg-flat-color-5 { background: #2e7d32 !important; box-shadow: 0 4px 14px rgba(46, 125, 50, .5) !important; }
#right-panel .painel-vlan-grid .card .card-body { background: transparent !important; min-height: 130px !important; }
#right-panel .card.bg-flat-color-4 .card-body,
#right-panel .card.bg-flat-color-5 .card-body {
  background: transparent !important;
}
#right-panel .card.bg-flat-color-4 .card-body p,
#right-panel .card.bg-flat-color-4 .card-body span,
#right-panel .card.bg-flat-color-4 .card-body strong,
#right-panel .card.bg-flat-color-4 .card-body .text-light,
#right-panel .card.bg-flat-color-4 .card-body h4,
#right-panel .card.bg-flat-color-5 .card-body p,
#right-panel .card.bg-flat-color-5 .card-body span,
#right-panel .card.bg-flat-color-5 .card-body strong,
#right-panel .card.bg-flat-color-5 .card-body .text-light,
#right-panel .card.bg-flat-color-5 .card-body h4 {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}

/* === Botões (sempre legíveis: texto claro em botão colorido) === */
#right-panel .btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
}

#right-panel .btn-info,
#right-panel .btn-primary {
  background: #20a8d8 !important;
  border-color: #20a8d8 !important;
  color: #fff !important;
}

#right-panel .btn-danger {
  background: #f86c6b !important;
  border-color: #f86c6b !important;
  color: #fff !important;
}

#right-panel .btn-outline-secondary {
  color: #495057 !important;
  background: #fff !important;
  border-color: #6c757d !important;
}

#right-panel .card-header .btn {
  color: #fff !important;
}
#right-panel .card-header .btn-info,
#right-panel .card-header .btn-primary {
  color: #fff !important;
}
#right-panel .card-header .btn-danger {
  color: #fff !important;
}
#right-panel .card-header .btn-outline-secondary {
  color: #495057 !important;
  background: #fff !important;
}

/* === Responsivo === */
@media (max-width: 992px) {
  #right-panel .content {
    padding: 1rem !important;
  }
  .card .card-header {
    font-size: 0.875rem !important;
  }
}

@media (max-width: 768px) {
  .header-menu {
    flex-wrap: wrap;
  }
  .header .col-sm-5 .navbar-brand {
    margin-top: 0.25rem;
  }
}