/* ===== CRM Admin - base ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #07101b;
  color: #e5e7eb;
}

a { color: inherit; }

/* ===== Topbar ===== */
.top{
  position: sticky;
  top: 0;
  z-index: 10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 16px;
  background: rgba(7,16,27,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #1f2a3a;
}
.brand{
  font-weight: 800;
  letter-spacing: .2px;
}
.nav{
  display:flex;
  gap: 10px;
  align-items:center;
}
.ghost{
  background: transparent;
  border: 1px solid #243247;
  color: #e5e7eb;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration:none;
}
.ghost:hover{ background:#0b1625; }

/* ===== Layout helpers ===== */
.wrap{max-width:1100px;margin:18px auto;padding:0 12px}
.card{
  background: #0a1422;
  border: 1px solid #1f2a3a;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.divider{ height:1px; background:#1f2a3a; margin: 10px 0; }

label{
  display:block;
  margin:10px 0 6px;
  color:#cbd5e1;
  font-size:12px;
}
input,select,textarea{
  width:100%;
  padding:10px;
  border:1px solid #243247;
  border-radius:12px;
  background:#061022;
  color:#fff;
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:#3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

.btn{
  padding:10px 12px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  font-weight:700;
}
.btn-primary{ background:#0f766e; color:#fff; }
.btn-primary:hover{ filter: brightness(1.05); }
.btn-ghost{ background:transparent; border:1px solid #243247; color:#fff; }
.btn-ghost:hover{ background:#0b1625; }

.muted{ color:#93a4b8; font-size:12px; }

table{ width:100%; border-collapse:collapse; }
th,td{
  padding:10px;
  border-bottom:1px solid #1f2a3a;
  font-size:14px;
  vertical-align:top;
}
thead th{ color:#cbd5e1; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
tr:hover{ background:#0b1625; }
.right{ text-align:right; }
.smallbtn{ padding:8px 10px; font-size:12px; border-radius:10px; }


/* ===== Ajuste elegante: cards e imagens de Bairros ===== */
.bairros-grid, .grid-bairros, .lista-bairros{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.card-bairro, .bairro-card, .item-bairro{
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.card-bairro:hover, .bairro-card:hover, .item-bairro:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

/* ✅ aqui resolve “foto gigante” */
.card-bairro img, .bairro-card img, .item-bairro img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

/* Segurança: imagens nunca estouram */
img{max-width:100%;height:auto}

/* Se tiver alguma foto de destaque no admin, limite */
.admin-photo, .preview img { max-width:280px; border-radius:12px; }


/* =========================================
   SEGURANÇA GLOBAL DE IMAGENS (ADMIN)
========================================= */

img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Caso alguma imagem apareça dentro de cards */
.card img{
  border-radius:14px;
  object-fit:cover;
}

/* Caso o bairros.js injete preview */
.preview img,
.admin-thumb{
  width:100%;
  max-width:260px;
  height:160px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}

/* =========================================
   FIX GLOBAL: imagens nunca estouram layout
========================================= */
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* thumbnails/preview padrão (quando existir) */
.admin-thumb,
.preview img,
.card img{
  max-width:260px;
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}