:root{
  --arch-primary: #246bff;
  --arch-secondary: #1fb3ff;
  --arch-bg: #f5f7fb;
  --arch-card-radius: 16px;
  --arch-sidebar-w: 260px;
}

html,body{height:100%;}
body{background:var(--arch-bg);}

/* ====== LAYOUT ====== */
.app{min-height:100%; display:flex;}

/* Sidebar estilo card azul */
.sidebar {
  width: var(--arch-sidebar-w);
  height: 100vh;
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, var(--arch-primary) 0%, var(--arch-secondary) 100%);
  color: #fff;
  border-radius: var(--arch-card-radius);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  margin: 12px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.sidebar .brand {
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px 10px 16px;
}

.sidebar .brand img{
  height: 128px;
  width: auto;
  display: block;
  max-width: 140px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

.sidebar .menu a {
  display:flex;
  align-items:center;
  gap:.6rem;
  color:#eaf4ff;
  text-decoration:none;
  border-radius:12px;
  margin:4px 0;
  padding:.55rem .8rem;
  font-weight:500;
}
.sidebar .menu a:hover,
.sidebar .menu a.active {
  background:rgba(255,255,255,.18);
  color:#fff;
}

.main{
  flex:1; min-width:0;
}

/* ====== TOPBAR ====== */
.topbar {
  position: relative;
  top: 0;
  z-index: 10;
  background: transparent;
  border: 0;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar .search-wrap input {
  border: 0;
  background: transparent;
  outline: 0;
  width: 100%;
  font-size: 0.95rem;
}

/* Ações (direita) */
.topbar .actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar .actions .btn {
  border-radius: 999px;
}

/* ====== CARDS ====== */
.card-arch{ 
  border:0; 
  border-radius:var(--arch-card-radius); 
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.06); 
}
.card-arch .card-header{ 
  border:0; background:transparent; font-weight:600; padding:16px 18px 0;
}
.card-arch .card-body{ 
  padding:14px 18px 18px 18px; 
}

.stat-chip{
  border-radius:12px; 
  padding:.2rem .55rem; 
  font-size:.78rem; 
  font-weight:600;
  background:#eef3ff; 
  color:#2b5cff;
}

.row[data-masonry] { transition: all 0.3s ease; }

/* ====== DATATABLES ====== */
.dataTables_wrapper{overflow-x:hidden;}
.dataTables_scrollHead, .dataTables_scrollFoot{overflow:hidden !important;}
canvas{max-height:300px !important;}

/* ====== LOGIN PAGE ====== */
body.login-page{ background:#eef3f9; }
.login-card{ border-radius:16px; overflow:hidden; }
.login-hero{
  height:140px;
  display:grid; place-items:center;
  background:linear-gradient(180deg, var(--arch-primary) 0%, var(--arch-secondary) 100%);
}
.login-logo{
  max-height:110px; width:auto; display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

/* Saudação estilizada */
.hello-box {
  background: linear-gradient(90deg, rgba(36,107,255,0.1) 0%, rgba(31,179,255,0.1) 100%);
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.hello {
  font-size: 1.15rem;
  font-weight: 600;
  color: #246bff;
}
.hello-icon {
  font-size: 1.4rem;
  color: #246bff;
}

/* ====== Masonry Cards (Dashboard) ====== */
.row[data-masonry] { margin-top: 0; }
.row[data-masonry] .col { display: flex; }
.row[data-masonry] .card {
  flex: 1;
  margin-bottom: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.row[data-masonry] .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}
@media (min-width: 1400px) {
  .row[data-masonry] { column-count: 3; }
}
.row[data-masonry] .badge {
  font-size: 0.78rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-weight: 600;
}

/* Deixa o Procurar e o Dashboard idênticos aos outros cards */
.topbar .search-wrap,
.card-dashboard {
  border: 0;
  border-radius: var(--arch-card-radius);
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;

  /* >>> ajustes novos para o dropdown não ser cortado <<< */
  position: relative;
  overflow: visible;
}

/* Mesmo efeito hover dos cards */
.topbar .search-wrap:hover,
.card-dashboard:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

/* ====== SUGESTÕES DE PESQUISA ====== */
#searchSuggestions {
  position: absolute;
  z-index: 9999;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border: 1px solid #e6ecf5;
  background: #fff;
  margin-top: 4px;
}

#searchSuggestions .dropdown-item {
  padding: 10px 14px;
  font-size: 0.9rem;
  color: #2a3c66;
  border-radius: 8px;
  transition: background 0.2s ease;
}

#searchSuggestions .dropdown-item:hover {
  background: rgba(36,107,255,0.08); /* azul clarinho */
  color: #246bff;
}



/* ====== WIZARD de Consultas ====== */
.wizard-step {
  transition: opacity 0.3s ease;
}
.wizard-step.d-none {
  display: none !important;
}

.timeline-horizontal {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 30px 0 10px;
  position: relative;
}

.timeline-horizontal::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 4px;
  background: #dee2e6;
  z-index: 1;
}

.timeline-step {
  text-align: center;
  position: relative;
  flex: 1;
}

.timeline-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0 auto 10px;
  z-index: 2;
  position: relative;
}

.timeline-info h6 {
  font-size: 0.9rem;
  margin: 0;
}

.timeline-info small {
  color: #6c757d;
}


/* Minicards do sem comunicação */
#semComMiniCards .border {
  border: 1px solid #e9eef7 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
#semComMiniCards .h3 {
  letter-spacing: .5px;
}

/* ===================================================
   🔧 Ajuste final de alinhamento de listas (PPPoe | MAC | Modelo)
   =================================================== */
/* aplica o grid consistente em todas as mini-lists */
#semComMiniCards .minirow,
#auto_novos_list .minirow,
#auto_atualizados_list .minirow {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.6fr; /* PPPoE | MAC | Modelo */
  align-items: center;
  gap: .6rem;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

/* hover sutil */
#semComMiniCards .minirow:hover,
#auto_novos_list .minirow:hover,
#auto_atualizados_list .minirow:hover {
  background: rgba(36,107,255,0.07);
}

/* textos longos não quebram */
#semComMiniCards .minirow span,
#auto_novos_list .minirow span,
#auto_atualizados_list .minirow span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* pppoe mais escuro */
#semComMiniCards .minirow .pppoe,
#auto_novos_list .minirow .pppoe,
#auto_atualizados_list .minirow .pppoe {
  font-weight: 600;
  color: #222;
}

/* mac: fonte monoespaçada e azul */
#semComMiniCards .minirow .mac a,
#auto_novos_list .minirow .mac a,
#auto_atualizados_list .minirow .mac a {
  font-family: monospace;
  color: #0d6efd;
  text-decoration: none;
}
#semComMiniCards .minirow .mac a:hover,
#auto_novos_list .minirow .mac a:hover,
#auto_atualizados_list .minirow .mac a:hover {
  text-decoration: underline;
}

/* modelo e marca: mais claro */
#semComMiniCards .minirow .info,
#auto_novos_list .minirow .info,
#auto_atualizados_list .minirow .info {
  color: #6c757d;
  font-size: .85rem;
}

/* linha de data: ocupa toda a largura abaixo */
#auto_novos_list .minirow .text-muted,
#auto_atualizados_list .minirow .text-muted {
  grid-column: 1 / -1;
  font-size: .78rem;
  color: #868e96 !important;
  margin-top: 2px;
  padding-left: 4px;
}

/* ===================================================
   🎨 Padronização de headers de cards AutoRT
   =================================================== */
.card-arch .card-header {
  background: #fff;
  border-bottom: 1px solid #e9edf5;
  padding: 14px 18px;
}

.card-arch .card-header .small {
  color: #6b7aa0;
  font-weight: 500;
}

.card-arch .card-header h5 {
  color: #152243;
  font-weight: 700;
  margin: 0;
}

.stat-chip {
  border-radius: 12px;
  padding: .25rem .65rem;
  font-size: .78rem;
  font-weight: 600;
  background: #eef3ff;
  color: #246bff;
}

/* ===================================================
   🔄 Overlay global de carregamento (AutoRT)
   =================================================== */
#loadingOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  z-index: 9999;
  backdrop-filter: blur(2px);
}

#loadingOverlay .spinner {
  width: 52px;
  height: 52px;
  border: 5px solid #ddd;
  border-top-color: #246bff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===================================================
   MOVER AGENDA
   =================================================== */
.drag-handle {
  cursor: grab;
  user-select: none;
  width: 25px;
}
.drag-handle:active {
  cursor: grabbing;
}

/* (a) Permite quebra de palavras longas e evita rolagem lateral */
.table-ajustavel td {
  white-space: normal !important;
  word-break: break-word;
  max-width: 200px;
}

/* (b) Tabela fluida e responsiva */
.table-responsive {
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 992px) {
  .table-ajustavel td,
  .table-ajustavel th {
    font-size: calc(var(--tabela-font-size) * 0.9);
    max-width: 140px;
  }
}

/* (c) Esconde colunas menos críticas em telas médias/pequenas */
@media (max-width: 1024px) {
  td:nth-child(2),  th:nth-child(2),  /* Prioridade */
  td:nth-child(7),  th:nth-child(7),  /* Período */
  td:nth-child(13), th:nth-child(13), /* Observações */
  td:nth-child(11), th:nth-child(11), /* Auxiliar */
  td:nth-child(12), th:nth-child(12)  /* Localização */
  { display: none; }
}

.chart-card canvas { height: 260px !important; }