body{
  font-family:Arial;
  margin:0;
  background:#f4f6fa;
}

header{
  background:#000000;
  color:white;
  padding:15px 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

button{
  background:#2563eb;
  border:none;
  color:white;
  padding:8px 14px;
  border-radius:6px;
  cursor:pointer;
}

.cards{
  display:flex;
  gap:50px;
  padding:20px;
  justify-content: center;
  align-items: center;
}

.card{
  background:white;
  padding:20px;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  width:200px;
  text-align:center;
  cursor:pointer;
}

.graficos {
  display: flex;
  gap: 30px;
  padding: 20px;
  justify-content: center;
  align-items: center;
}

.graficoBox{
  background:white;
  padding:20px;
  border-radius:8px;
  width:300px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.titulo{
  padding-left:20px;
}

/* =============================
CONTAINER DOS CONTRATOS
============================= */
#contratosContainer{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
  padding:20px;
}

/* =============================
CARD CONTRATO
============================= */
.contrato{
  background:white;
  padding:10px;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  display:flex;
  flex-direction:column;
  gap:8px;
  position: relative;
}

.contrato label {
  display: inline-block;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  margin-right: 4px;
  margin-bottom: 4px;
}

/* =============================
STATUS
============================= */
.status{
  padding:5px 10px;
  border-radius:6px;
  font-size:12px;
  color:white;
}

.Pendente{background:#64748b}
.Migrando{background:#f59e0b}
.Migrado{background:#16a34a}
.Bloqueado{background:#dc2626}

/* =============================
MODAL
============================= */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  overflow: auto; /* scroll se necessário */
}

.modal-content {
  background: white;
  padding: 20px 30px;
  width: 320px;
  max-width: 90%;
  max-height: 80vh; /* limita altura máxima */
  margin: 50px auto; /* centraliza vertical e horizontal */
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  overflow-y: auto; /* scroll interno se ultrapassar altura */
  animation: fadeIn 0.2s ease-in-out;
}

.modal-content h2 {
  margin: 0 0 10px 0;
  text-align: center;
}

input, select {
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 1em;
}

.modal-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.modal-buttons button {
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.modal-buttons button:hover {
  opacity: 0.9;
}

.close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 1.5em;
  font-weight: bold;
  cursor: pointer;
  color: #555;
}

.close:hover {
  color: #000;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =============================
FILTROS DASHBOARD
============================= */
.filtros{
  background:#fff;
  padding:10px 20px;
  display:flex;
  gap:30px;
  align-items:center;
  border-radius:8px;
  margin:20px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.filtros strong{
  display:block;
  margin-bottom:5px;
}

.filtros label{
  margin-right:10px;
  font-size:14px;
}

#filtroEmpresa{
  padding:5px 8px;
  border-radius:5px;
  border:1px solid #ccc;
  font-size:14px;
  width:200px;
}

/* =============================
DROPDOWN MULTI-SELECT
============================= */
.dropdown {
  position: relative;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: white;
  cursor: pointer;
}

.dropdown-selected {
  padding: 8px;
}

.dropdown-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-top: none;
  background: white;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.dropdown-options label {
  display: block;
  padding: 5px 8px;
  cursor: pointer;
}

.dropdown-options label:hover {
  background: #f3f4f6;
}

/* =============================
COMPLEXIDADE CONTRATO
============================= */
.complexidade-baixa {
  background-color: #16a34a;
  color: white;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 12px;
}

.complexidade-media {
  background-color: #f59e0b;
  color: white;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 12px;
}

.complexidade-alta {
  background-color: #dc2626;
  color: white;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 12px;
}

/* =============================
TOOLTIP COMPLEXIDADE
============================= */
.contrato .campo span[title] {
  position: relative;
  cursor: help;
}

/* Tooltip personalizado */
.contrato .campo span[title]::after {
  content: attr(title);
  position: absolute;
  bottom: 120%;       /* posiciona acima do elemento */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: pre;   /* preserva quebras de linha */
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  width: max-content;
  max-width: 250px;   /* largura máxima para não estourar */
  text-align: left;
  transition: opacity 0.2s ease-in-out;
}

/* Exibe o tooltip no hover */
.contrato .campo span[title]:hover::after {
  opacity: 1;
}

/* =============================
LOGIN
============================= */
#loginForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: none;
}

/* =============================
BOTÕES DE ORDENAÇÃO
============================= */
.ordenacao-container {
  display: flex;
  justify-content: flex-start;
  padding-left: 20px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.ordenacao-buttons {
  display: flex;
  gap: 10px;
}

.ordenacao-buttons button {
  padding: 8px 12px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #2563eb;
  cursor: pointer;
  transition: background-color 0.2s;
}

.ordenacao-buttons button:hover {
  background-color: #2563eb;
}

/* =============================
ICONS DE EDITAR E REMOVER NOS CARDS
============================= */
.card-icons {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
}

.card-icons i {
  cursor: pointer;
  font-size: 16px;
  color: #555;
  transition: color 0.2s;
}

.card-icons i:hover {
  color: #000;
}

/* =============================
CSS NOTIFY
============================= */

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 6px;
  color: #fff;
  font-weight: bold;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  opacity: 0.95;
  transition: all 0.3s ease;
}

.toast.sucesso {
  background-color: #4caf50;
}

.toast.erro {
  background-color: #f44336;
}

/* =============================
BUSCA DASHBOARD
============================= */

.busca-box{
  position: relative;
  display: inline-block;
}

.busca-box i{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
}

.busca-box input{
  padding: 6px 28px 6px 30px;
  width: 220px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* botão limpar */
.limpar-busca{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #888;
  font-size: 12px;
  display: none; /* fica oculto por padrão */
}

/* hover permanece só para efeito visual */
.limpar-busca:hover{
  color: #636161;
}

/* =============================
MODAL DETALHE MIGRAÇÃO
============================= */

.modal-detalhe{
  max-width:700px;
}

.detalhe-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:20px;
}

.detalhe-col{
  background:#f8f8f8;
  padding:15px;
  border-radius:8px;
  max-height:350px;
  overflow:auto;
}

.detalhe-col h3{
  margin-bottom:10px;
}

.detalhe-col ul{
  list-style:none;
  padding:0;
}

.detalhe-col li{
  padding:6px 0;
  border-bottom:1px solid #eee;
}

.migrado{
  border-left:4px solid #2ecc71;
}

.pendente{
  border-left:4px solid #6d6b6b;
}

.migrando{
  border-left:4px solid #f39c12;
}

.bloqueado{
  border-left:4px solid #e74c3c;
}

/* =============================
MODAL SISTEMAS / SERVIÇOS GRID
============================= */

#modalSistemas .modal-content,
#modalServicos .modal-content{
  width:420px;
  max-width:90%;
}

#listaSistemas,
#listaServicos{
  margin-top:1px;
  max-height:340px;
  overflow-y:auto;

  display:grid;
  grid-template-columns:repeat(1, 1fr); /* 2 colunas fixas */
}

/* cards padrão */
#listaSistemas label,
#listaServicos label{
  display:flex;
  align-items:center;
  gap:6px;

  padding:6px 8px;
  border-radius:6px;
  border:1px solid #ddd;

  background:#fafafa;
  cursor:pointer;

  font-size:13px;
  transition:all .15s ease;
}

/* hover */
#listaSistemas label:hover,
#listaServicos label:hover{
  background:#f0f6ff;
  border-color:#4fa3ff;
}

/* checkbox */
#listaSistemas input,
#listaServicos input{
  transform:scale(1.1);
}

/* card selecionado (verde) */
#listaSistemas label:has(input:checked),
#listaServicos label:has(input:checked){
  background:#e8f8ef;
  border-color:#2ecc71;
}

/* =============================
HEADER
============================= */

.dashboard-header{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 20px;

  background:#111827;
  border-bottom:1px solid #1f2937;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
}

/* logo */
.dashboard-header .logo{
  height:40px;
}

/* titulo sempre no meio */
.dashboard-header h1{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin:0;
  letter-spacing:0.5px;
  font-weight:600;
  color:white;
}

/* usuario logado */
.usuario-logado{
  display:flex;
  align-items:center;
  gap:10px;
  color:white;
  margin-left:auto;
}

/* botão sair */
.btn-logout{
  background:#ef4444;
  border:none;
  color:white;
  padding:5px 10px;
  border-radius:5px;
  cursor:pointer;
  font-size:13px;
  transition:0.2s;
}

.btn-logout:hover{
  background:#dc2626;
  transform:translateY(-1px);
}

/* =============================
MODAL CONTRATOS, SERVIÇOS E SISTEMAS
============================= */

/* Modal largo igual contrato (serve para todos os modais) */
.modal-content.modal-contratos {
  width: 900px;       /* para sistemas/serviços, contratos mantém 700px */
  max-width: 95%;
  min-width: 700px;
  background: white;
  padding: 20px 30px;
  margin: 50px auto;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  max-height: 80vh;
  overflow-y: auto;
  animation: fadeIn 0.2s ease-in-out;
}

/* Barra de progresso */
.progresso-migracao {
  margin-bottom: 20px;
}
.progresso-titulo {
  font-weight: bold;
  margin-bottom: 5px;
}
.barra-progresso {
  width: 100%;
  height: 16px;
  background: #ddd;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 5px;
}
.barra-preenchida {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,#4caf50,#2e7d32);
  transition: 0.4s;
}

/* =============================
AJUSTE ESPAÇO TITULO E LISTA
============================= */

.modal-contratos h3{
  margin-bottom: 4px;
}

.modal-contratos ul{
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 18px; /* controla distância do marcador */
}

.modal-contratos li{
  margin: 2px 0;
}

/* =============================
STATUS GRID
============================= */
.status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.status-grid li {
  list-style: none;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  color: white;
}

.status-grid div {
  list-style: none;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  color: white;
}

.status-numero {
  font-size: 1.5em;
}

/* Texto do status */
.status-box {
  font-size: 16px; /* tamanho do texto "Pendente", "Migrando", etc */
}

/* Número do status */
.status-box .status-numero {
  font-size: 15px; /* tamanho do número */
  font-weight: bold;
}

/* cores */
.status-pendente { background:#7f8c8d; }
.status-migrando { background:#f39c12; }
.status-migrado { background:#27ae60; }
.status-bloqueado { background:#e74c3c; }

/* Lista de itens com select */
#listaSistemasItens div,
#listaServicosItens div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
#listaSistemasItens select,
#listaServicosItens select {
  padding: 2px 5px;
  border-radius: 5px;
}

/* Botão fechar */
.modal-content .close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
}