:root{
  --bg: #0a3a2a;
  --bg2: #0f5132;
  --card: #ffffff;
  --text: #1c1c1c;
  --muted:#6b7280;
  --primary:#198754; /* verde elegante */
  --danger:#dc3545;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;color:var(--text);background:#f6f8f7}
.bg-gradient{background:linear-gradient(135deg, var(--bg), var(--bg2))}

.auth-container{min-height:100vh;display:flex;align-items:star;justify-content:center;padding:24px}
.card{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:28px;width:100%;max-width:420px}
.auth-card .logo{display:flex;justify-content:center;margin-bottom:10px}
.auth-card .logo img{height:66px}
.auth-card .logo.small img{height:50px}
.title{font-size:22px;margin: 6px 0 18px;font-weight:700;text-align:center}
.alert{padding:12px 14px;border-radius:12px;margin-bottom:12px;font-size:14px}
.alert-danger{background:#fee2e2;color:#7f1d1d}
.alert-success{background:#dcfce7;color:#14532d}
.alert-info{background:#e0f2fe;color:#0c4a6e}
.form{display:grid;gap:12px}
.field{display:flex;align-items:flex-start !important;background:#f7f7f8;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px}
.field span{color:#777;margin-right:10px}
.field input{border:0;background:transparent;outline:none;width:100%;font-size:15px}
.field .toggle{border:0;background:transparent;color:#777;cursor:pointer}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;padding:10px 14px;border-radius:12px;background:#e8e8e8;color:#111;text-decoration:none;font-weight:600}
.btn.primary{background:var(--primary);color:#fff}
.btn.danger{background:var(--danger);color:#fff}
.btn.w-100{width:100%;justify-content:center}
.links{margin-top:12px;text-align:center}
.links a{color:var(--primary);text-decoration:none;font-weight:600}
.copy{color:#e2e8f0;margin-top:16px;text-align:center}
.center{text-align:center}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:#0d3b2f;color:#fff}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:700}
.topbar .brand img{height:38px}
.topbar .actions{display:flex;align-items:center;gap:10px}
.topbar .user{opacity:.9}

.container{max-width:1100px;margin:24px auto;padding:0 16px;overflow-y:auto;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{display:block;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:18px;text-decoration:none;color:inherit;transition:transform .2s ease, box-shadow .2s ease}
.tile:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.12)}
.tile i{font-size:28px;color:var(--primary)}
.tile h3{margin:10px 0 6px;font-size:18px}
.tile p{margin:0;color:var(--muted);font-size:14px}

@media (max-width: 960px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 560px){
  .card{padding:22px}
  .grid{grid-template-columns:1fr}
}

/* --- UI Enhancements v2 (login) --- */
body.bg-animated{min-height:100vh;position:relative;overflow:hidden}
body.bg-animated::before{content:"";position:fixed;inset:0;background-color:#0a3a2a;background-image:linear-gradient(135deg,#0a3a2a 0%,#0f5132 50%,#0a3a2a 100%);background-size:200% 200%;animation:bg-shift 18s ease-in-out infinite;z-index:-1}
@keyframes bg-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.auth-container{padding:32px}
.auth-card{background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:22px;box-shadow:0 20px 50px rgba(0,0,0,.15);transform:translateY(12px) scale(.98);opacity:0;will-change:transform,opacity;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s}
.auth-card.enter{opacity:1;transform:translateY(0) scale(1)}
.title{font-size:24px;letter-spacing:.2px}
.field{background:rgba(246,248,247,.9);border:1px solid #e6e9ec}
.field input{font-size:16px}
.btn.primary{box-shadow:0 10px 20px rgba(25,135,84,.25)}
.btn.primary:hover{filter:brightness(1.05)}
.btn:focus{outline:2px solid rgba(25,135,84,.3);outline-offset:2px}
.logo img{filter:drop-shadow(0 4px 12px rgba(0,0,0,.2))}
.swal2-popup{font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif}
  .grid{grid-template-columns:1fr}
  
  
  
  :root{
  --bg: #0a3a2a;
  --bg2: #0f5132;
  --card: #ffffff;
  --text: #1c1c1c;
  --muted:#6b7280;
  --primary:#198754;
  --danger:#dc3545;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:#f6f8f7}

/* Fundo animado */
.bg-animated{min-height:100vh;position:relative;overflow:hidden}
.bg-animated::before{content:'';position:fixed;inset:0;background-color:#0a3a2a;background-image:linear-gradient(135deg,#0a3a2a 0%,#0f5132 50%,#0a3a2a 100%);background-size:200% 200%;animation:bg-shift 18s ease-in-out infinite;z-index:-1}
@keyframes bg-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Layout básico */
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.card{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:22px}
.title{font-size:24px;letter-spacing:.2px;margin:6px 0 18px;font-weight:700}
.center{text-align:center}

/* Topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:#0d3b2f;color:#fff}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:700}
.topbar .brand img{height:36px}
.topbar .actions{display:flex;align-items:center;gap:10px}

/* Botões */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;padding:10px 14px;border-radius:12px;background:#e8e8e8;color:#111;text-decoration:none;font-weight:600;cursor:pointer}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 10px 20px rgba(25,135,84,.25)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.danger{background:var(--danger);color:#fff}

/* Alertas (fallback sem JS) */
.alert{padding:12px 14px;border-radius:12px;margin:8px 0;font-size:14px}
.alert-danger{background:#fee2e2;color:#7f1d1d}
.alert-success{background:#dcfce7;color:#14532d}
.alert-info{background:#e0f2fe;color:#0c4a6e}

/* Form */
.form{display:grid;gap:12px}
.field{display:flex;align-items:center;background:#f7f7f8;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px}
.field span{color:#777;margin-right:10px}
.field input,.field select{border:0;background:transparent;outline:none;width:100%;font-size:15px}
.field select{appearance:none;-webkit-appearance:none;-moz-appearance:none}
.field select::-ms-expand{display:none}

/* Chips (seleções elegantes para N:N) */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #e5e7eb;background:#f9fafb;border-radius:999px;padding:6px 10px;cursor:pointer;user-select:none;transition:background .15s,border-color .15s,box-shadow .15s}
.chip:hover{background:#fff}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip .dot{width:14px;height:14px;border-radius:50%;border:1px solid #e5e7eb}
.chip.active{border-color:rgba(25,135,84,.45);box-shadow:0 2px 8px rgba(25,135,84,.15);background:#ffffff}

/* Auth card animação (reutilizado) */
.auth-container{padding:32px}
.auth-card{background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:22px;box-shadow:0 20px 50px rgba(0,0,0,.15);transform:translateY(12px) scale(.98);opacity:0;will-change:transform,opacity;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s}
.auth-card.enter{opacity:1;transform:translateY(0) scale(1)}

@media (max-width: 960px){
  .container{padding:0 12px}
}
@media (max-width: 560px){
  .card{padding:18px}
}


/* Radios visíveis e com cor do tema */
.chip input[type="radio"]{
  appearance: auto;              /* garante que não foi zerado por CSS global */
  -webkit-appearance: auto;
  accent-color: #0b7d3a;         /* cor do controle marcado */
}

/* Feedback visual no chip quando marcado */
.chip:has(input[type="radio"]:checked){
  background: #e8f5ee;
  border-color: #0b7d3a;
  color: #0b7d3a;
  font-weight: 600;
}

/* Área clicável maior (sem “pular” layout) */
.chip input[type="radio"]{
  margin: 0 2px 0 0;
}


body, html {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.auth-container {
  flex: 1; /* ocupa altura total menos o footer */
  display: flex;
  justify-content: center;
  align-items: center;
}

footer.copy {
  text-align: center;
  padding: 12px;
  font-size: 14px;
  color: #fff;
  background: transparent; /* ou cor se quiser */
}





:root{
  --bg:#f6f8f7;
  --card:#ffffff;
  --text:#1e293b;
  --muted:#64748b;
  --brand:#0b7d3a;
  --brand-weak:#e8f5ee;
  --line:#e5e7eb;
  --shadow: 0 10px 30px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);}

/* containers */
.wrap{width:100%;margin:24px auto;padding:20px;overflow-y:auto;display:flex;               /* 🔹 vira flex container */
  justify-content:center;}
.wrap .inventario{
	display:flex; flex-direction:column !important;
}
#form-arvore{width:95%;max-width:1200px;display:flex; flex-direction:column;background-color:#FFFFFF;padding:30px;min-height:250vh;}
.bg-light{background:var(--bg)}

/* grid */
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){ .g2,.g3{grid-template-columns:1fr} 

#form-arvore{width:97%;max-width:1200px;display:flex; flex-direction:column;background-color:#FFFFFF;padding:20px;min-height:400vh;}


}
.row{display:flex;gap:10px;align-items:center}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.link-card{transition:transform .12s ease, box-shadow .12s ease}
.link-card:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(16,24,40,.12), 0 2px 8px rgba(16,24,40,.06)}
.card-body{padding:16px}

/* chips & badges */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#f8fafc;font-size:13px;color:#0f172a}
.chip:has(input[type="radio"]:checked){background:var(--brand-weak);border-color:var(--brand);color:var(--brand);font-weight:600}
.chip input[type="radio"]{appearance:auto;-webkit-appearance:auto;accent-color:var(--brand);margin-right:2px}

/* forms */
label{font-size:14px;color:#334155;display:block;margin:0 0 6px}
input[type=text],input[type=number],input[type=email],input[type=password],
select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;
  font-size:14px; outline:none; transition:border-color .12s ease, box-shadow .12s ease;
}
input:focus,select:focus,textarea:focus{border-color:#94d4b0;box-shadow:0 0 0 3px rgba(11,125,58,.15)}
textarea{min-height:110px}
.hint{font-size:12px;color:var(--muted)}

/* buttons */
button,.btn,.ghost,.primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:10px;border:0;cursor:pointer;font-weight:600;text-decoration:none;
}
.primary{background:var(--brand);color:#fff}
.primary:disabled{opacity:.7;cursor:not-allowed}
.ghost{background:#f1f5f9;color:#0f172a;border:1px solid var(--line)}
.w-100{width:100%}

/* alerts/banners */
.banner-warn{background:#fff8e1;border:1px solid #ffe0a3;color:#7a5800;padding:12px;border-radius:10px}

/* section headings */
h1{margin:0 0 8px}
hr{border:none;border-top:1px solid var(--line);}

/* pagination helpers (usados no inventário) */
.pager{display:flex;justify-content:center;gap:8px;margin-top:16px}

/* Choices.js harmonização */
.choices__inner{border-radius:10px;border:1px solid var(--line);min-height:42px;padding:6px 8px}
.choices__list--multiple .choices__item{background:var(--brand-weak);border:1px solid var(--brand);color:var(--brand)}
.choices__list--dropdown{border-radius:12px}



/* ====== Layout safety (evita overflow no mobile) ====== */
html { overflow: hidden; }
body { overflow: hidden; }

/* ====== Cards grid (3/2/1 col) ====== */
.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1100px){
  .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px){
  .cards{ grid-template-columns: 1fr; }
}

/* ====== FAB (Filter button) ====== */
.fab-filter{
  position: fixed;
  right: 18px;
  top: 78px;
  z-index: 60;
  width: 52px; height: 52px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  border: none;
  box-shadow: var(--shadow);
  font-size: 20px;
}
.fab-filter i{ pointer-events: none; }

/* ====== Drawer ====== */
.drawer-backdrop{
  position: fixed; inset: 0;
  background: rgba(15,23,42,.35);
  backdrop-filter: blur(2px);
  z-index: 70;
}
.drawer{
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: min(480px, 92vw);
  background: var(--card);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .25s ease-in-out;
  z-index: 80;
  display: flex; flex-direction: column;
}
.drawer.open{ transform: translateX(0); }
.drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px; border-bottom:1px solid var(--line);
}
.drawer-body{
  padding: 14px 16px 18px;
  overflow:auto; flex:1;
  display:grid; gap:12px;
}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px;height:36px;border-radius:8px;border:1px solid var(--line);
  background:#f8fafc; color:#0f172a; cursor:pointer;
}
.form-block{ display:block; }

/* Choices.js no drawer */
.drawer .choices__inner{ border-radius:10px; }
.drawer .choices__list--dropdown{ max-height: 260px; overflow:auto; }

/* Safety: imagens e cards nunca excedem a largura */
img{ max-width: 100%; height:auto; }
.card{ min-width: 0; } /* evita overflow por conteúdo longo */
.subtitle{ color: var(--muted); font-size: 13px; }



/* Header */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:#0b4f2c; color:#fff; position:sticky; top:0; z-index:50;
}
.topbar .brand{display:flex; align-items:center; gap:10px}
.topbar .brand img{height:34px; width:auto; display:block}
.topbar .actions{display:flex; align-items:center; gap:8px}
.topbar .btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.08);
  color:#fff; text-decoration:none; transition:background .2s ease;
}
.topbar .btn:hover{background:rgba(255,255,255,.15)}
.topbar .btn.danger{background:#9f2b2b}
.topbar .btn.danger:hover{background:#b73535}

/* Dropdown usuário */
.user-dropdown{position:relative}
.user-trigger{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.08);
  color:#fff; border:0; cursor:pointer; font:inherit;
}
.user-trigger:focus{outline:2px solid #c7ffd8; outline-offset:2px}
.user-trigger .chevron{transition:transform .2s ease}
.user-dropdown[aria-expanded="true"] .chevron{transform:rotate(180deg)}

.dropdown-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:220px; background:#fff; color:#1f2a1f;
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.18);
  padding:8px; display:none;z-index:99999;
}
.dropdown-menu.show{display:block}
.dropdown-menu a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; text-decoration:none; color:#1f2a1f; border-radius:8px;
}
.dropdown-menu a:hover{background:#f0f5f2}
.dropdown-menu a.danger{color:#9f2b2b}
.dropdown-menu .divider{
  height:1px; background:#e8ece9; margin:6px 8px;
}

/* Responsivo */
@media (max-width: 640px){
  .hide-sm{display:none}
  .user-name{display:none}
}


.dropdown-menu li {
  list-style: none;   /* redundância: garante que <li> tbm não tenha marcador */
  margin: 0;
  padding: 0;
}


.breadcrumb {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-size:14px;
  margin:16px 0;
  color:#555;
}

.breadcrumb a {
  color:#0b4f2c;
  text-decoration:none;
  font-weight:500;
}
.breadcrumb a:hover {
  text-decoration:underline;
}

.breadcrumb .separator {
  color:#999;
}

.breadcrumb .current {
  color:#333;
  font-weight:600;
}


fieldset {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 16px;
}

legend {
  padding: 0 6px;
  font-size: 14px;
  font-weight: 600;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* cada chip */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 20px;
  background: #f0f5f2;
  color: #1f2a1f;
  cursor: pointer;
  user-select: none;
  transition: background .2s, color .2s, box-shadow .2s;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

/* escondemos o checkbox sem ocupar espaço */
.chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* estado marcado */
.chip input[type="checkbox"]:checked + span {
  background: #0b4f2c;
  color: #fff;
  box-shadow: 0 0 0 2px #0b4f2c33;
  border-radius: 20px;
  padding: 6px 14px;
}

/* labels padrão: aparecem */
.pagination .label {
  display: inline;
}

/* em telas pequenas escondemos os labels */
@media (max-width: 640px) {
  .pagination .label {
    display: none;
  }
}


/* Estilo do formulário */
.form-card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.field label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px; /* dá espaçamento consistente */
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}

.field input:focus {
  border-color: #0b4f2c;
  box-shadow: 0 0 0 2px rgba(11, 79, 44, 0.2);
  outline: none;
}


/* Badge "Em breve" no canto superior */
.tile[data-soon]{
  position: relative;
  cursor: not-allowed;
  opacity: .92;
}
.tile[data-soon]::after{
  content: "Em breve";
  position: absolute;
  top: 10px; right: 10px;
  font-size: 12px; font-weight: 700;
  background: #9ca3af; /* cinza */
  color: #fff;
  padding: 4px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* Hover visual mais sutil para itens indisponíveis */
.tile[data-soon]:hover{
  transform: none !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
}

/* Acessibilidade: indicar como desabilitado */
.tile[aria-disabled="true"] h3,
.tile[aria-disabled="true"] p { opacity:.85; }


.btn-del {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  padding: 6px;
  color: #d33; /* vermelho SweetAlert */
  transition: color .2s ease;
}
.btn-del:hover {
  color: #a00; /* vermelho mais escuro no hover */
}




/* Tokens */
:root{
  --bg:#fff; --line:#e5e7eb; --muted:#6b7280; --text:#111827;
  --brand:#14532d; --brand2:#22c55e;
  --ok:#166534; --warn:#a16207; --danger:#b91c1c;
  --role-admin:#334155; --role-editor:#1d4ed8; --role-viewer:#6b7280;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.06);
}

/* Grid responsivo */
.cards-grid{
  display:grid;
  gap:20px;
  grid-template-columns: 1fr; /* mobile: 1 por linha */
}

/* a partir de tablets/desktop, sempre 2 colunas */
@media (min-width:768px){
  .cards-grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* Card */
.user-card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  padding:14px;
}

.user-card__head{
  display:flex; gap:12px; align-items:center;
  margin-bottom:8px;
}
.user-card__avatar{
  width:48px;height:48px;border-radius:12px;
  background:#ecfdf5; color:#047857;
  display:flex;align-items:center;justify-content:center;
  font-weight:700; font-size:18px;
}
.user-card__title{ flex:1; min-width:0; }
.user-card__name{
  font-size:16px; margin:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.user-card__roleline{ display:flex; gap:8px; align-items:center; margin-top:4px; }
.user-card .muted{ color:var(--muted); font-size:12px; }

/* Badges */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; font-size:12px; line-height:1;
}
.badge.status{ border:1px solid var(--line); }
.status-active{ background:#e6f7ec; color:#1c7c3a; border-color:#cceedd; }
.status-blocked{ background:#f1f1f1; color:#444; }
.status-deleted{ background:#fde8e8; color:#a11; }

.badge.role{ background:#f8fafc; color:#334155; border:1px solid var(--line); }
.role-admin{ background:#e8eefc; color:#1e40af; border-color:#d7e1fb; }
.role-editor{ background:#e6f4ff; color:#1d4ed8; border-color:#cfe7ff; }
.role-viewer{ background:#f3f4f6; color:#374151; }

/* Meta */
.user-card__meta{
  list-style:none; padding:0; margin:8px 0 10px;
  display:grid; gap:6px;
  font-size:14px; color:#1f2937;
}
.user-card__meta i{ width:16px; text-align:center; margin-right:6px; color:var(--muted); }
.user-card__meta a{ color:inherit; text-decoration:underline dotted; }

/* Ações no rodapé */
.user-card__actions{
  margin-top:auto;          /* gruda no rodapé do card */
  display:flex; gap:8px; flex-wrap:wrap;
}
.user-card__actions form{ display:inline; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--line);
  background:#fff; cursor:pointer; transition:background .2s, transform .05s, border-color .2s;
  font-weight:600;
}
.btn:hover{ background:#f9fafb; }
.btn:active{ transform:translateY(1px); }
.btn.ok{ border-color:#cceedd; }
.btn.warn{ border-color:#ffe8b3; }
.btn.danger{ border-color:#f8c9c9; }

.btn.ok i{ color:var(--ok); }
.btn.warn i{ color:var(--warn); }
.btn.danger i{ color:var(--danger); }

/* Form “Novo usuário” combina com cards */
.form-inline{
  background:#f7f8fa; border:1px solid var(--line);
  padding:12px; border-radius: var(--radius); box-shadow: var(--shadow);
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0;
}
.form-inline input, .form-inline select{
  height:40px; padding:0 10px; border:1px solid var(--line); border-radius:10px; outline:none;
}
.form-inline input:focus, .form-inline select:focus{
  border-color:#b7ebcd; box-shadow:0 0 0 3px rgba(34,197,94,.15);
}
.form-inline .btn{ background:var(--brand); color:#fff; border-color:transparent; }
.form-inline .btn:hover{ filter: brightness(1.05); }







/* ===== Layout base ===== */
:root{
  --brand:#0B5D35;
  --brand-600:#094d2c;
  --ink:#183024;
  --muted:#5a6b62;
  --bg:#f5f7f6;
  --card:#ffffff;
  --ring:rgba(11,93,53,.12);
  --shadow:0 8px 24px rgba(0,0,0,.06);
  --radius:20px;
}

body{background:var(--bg); color:var(--ink); font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}


/* ===== Hero ===== */
.hero{
  display:grid; gap:24px; grid-template-columns: 1fr minmax(280px, 360px);
  align-items:center; background:linear-gradient(140deg,#ffffff, #eef6f1);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:28px;
  border:1px solid #e7ecea;
}
.hero__content h1{font-size: clamp(22px, 2.6vw, 32px); line-height:1.2; margin:0 0 8px;}
.hero__content p{color:var(--muted); margin:0 0 16px;}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; font-weight:600; border:1px solid transparent; cursor:pointer; text-decoration:none}
.btn--primary{background:var(--brand); color:#fff;}
.btn--primary:hover{background:var(--brand-600)}
.btn--ghost{background:#fff; color:var(--brand); border-color:#dfe7e3;}
.btn--ghost:hover{border-color:#c9d6cf; background:#f8fbf9}

/* Search */
.search{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #e5ece8; border-radius:14px; padding:10px 14px; box-shadow:var(--shadow)}
.search input{border:0; outline:0; width:100%; font:inherit; background:transparent}

/* ===== KPIs ===== */
.kpis{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin:22px 0 6px;}
.kpi{background:var(--card); border:1px solid #e7ecea; border-radius:16px; padding:16px 18px; box-shadow:var(--shadow)}
.kpi__label{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em}
.kpi__value{display:block; font-size:22px; margin-top:4px}

/* ===== Modules grid ===== */
.modules{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:16px; margin-top:18px;
}
.module{
  position:relative; display:flex; gap:16px; align-items:flex-start;
  background:var(--card); border:1px solid #e7ecea; border-radius:18px;
  padding:18px; box-shadow:var(--shadow); text-decoration:none; color:inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.module:hover{transform: translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.08); border-color:#dfe7e3}
.module__icon{
  flex:0 0 46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:rgba(11,93,53,.08); color:var(--brand);
}
.module__icon i{font-size:20px}
.module__body h3{margin:0 0 6px; font-size:18px}
.module__body p{margin:0; color:var(--muted)}

/* Em breve */
.badge{
  position:absolute; top:10px; right:10px; background:#eef1f4; color:#5f6770;
  border-radius:999px; padding:4px 10px; font-weight:700; font-size:12px; border:1px solid #e0e5ea;
}
.module.is-soon{cursor:not-allowed}
.module.is-soon:hover{transform:none; box-shadow:var(--shadow); border-color:#e7ecea}

/* ===== Responsividade ===== */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr; padding:24px}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 560px){
  .wrap{padding:0 14px}
  .kpis{grid-template-columns:1fr}
}

/* ====== DASHBOARD NAMESPACE ====== */
.dash{ --brand:#0B5D35; --brand-600:#094d2c; --ink:#183024; --muted:#5a6b62;
       --bg:#f5f7f6; --card:#ffffff; --ring:rgba(11,93,53,.12);
       --shadow:0 8px 24px rgba(0,0,0,.06); --radius:20px;
       background:var(--bg); color:var(--ink); font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      width:100%; margin:28px auto 0px; padding:0 20px 30px;overflow-y:Auto;display:flex;flex-direction:column;align-items:center;height:90vh;
}
.dash *{ box-sizing:border-box; }

/* --- RESETES CONTRA CSS GLOBAL QUEBRANDO LAYOUT --- */
.dash .hero, .dash .kpis, .dash .modules{ display:grid !important; }
.dash .module{ display:flex !important; }
.dash .module, .dash .kpi, .dash .hero{ width:auto !important; max-width:1200px !important; }
.dash a.module, .dash button.module{ text-decoration:none !important; border:none; background:unset; }
.dash .badge{ position:absolute; }

/* --- HERO --- */
.dash .hero{
	
  gap:24px; grid-template-columns: 1fr minmax(280px, 360px);
  align-items:center; background:linear-gradient(140deg,#ffffff, #eef6f1);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:28px;
  border:1px solid #e7ecea;
}
.dash .hero__content h1{font-size: clamp(22px, 2.6vw, 32px); line-height:1.2; margin:0 0 8px;}
.dash .hero__content p{color:var(--muted); margin:0 0 16px;}
.dash .hero__actions{display:flex; gap:12px; flex-wrap:wrap}

/* --- BOTÕES & BUSCA --- */
.dash .btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; font-weight:600; border:1px solid transparent; cursor:pointer;}
.dash .btn--primary{background:var(--brand); color:#fff;} .dash .btn--primary:hover{background:var(--brand-600)}
.dash .btn--ghost{background:#fff; color:var(--brand); border-color:#dfe7e3;} .dash .btn--ghost:hover{border-color:#c9d6cf; background:#f8fbf9}
.dash .search{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #e5ece8; border-radius:14px; padding:10px 14px; box-shadow:var(--shadow)}
.dash .search input{border:0; outline:0; width:100%; font:inherit; background:transparent}

/* --- KPIs --- */
.dash .kpis{width:100%;max-width:1200px !important;grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin:22px 0 6px;}
.dash .kpi{background:var(--card); border:1px solid #e7ecea; border-radius:16px; padding:16px 18px; box-shadow:var(--shadow)}
.dash .kpi__label{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em}
.dash .kpi__value{display:block; font-size:22px; margin-top:4px}

/* --- MÓDULOS --- */
.dash .modules{ width:100%;max-width:1200px !important;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; margin-top:18px; }
.dash .module{
  position:relative; gap:16px; align-items:flex-start;
  background:var(--card); border:1px solid #e7ecea; border-radius:18px;
  padding:18px; box-shadow:var(--shadow); color:inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.dash .module:hover{transform: translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.08); border-color:#dfe7e3}
.dash .module__icon{flex:0 0 46px; height:46px; border-radius:14px; display:grid; place-items:center; background:rgba(11,93,53,.08); color:var(--brand);}
.dash .module__icon i{font-size:20px}
.dash .module__body h3{margin:0 0 6px; font-size:18px}
.dash .module__body p{margin:0; color:var(--muted)}
.dash .badge{ top:10px; right:10px; background:#eef1f4; color:#5f6770; border-radius:999px; padding:4px 10px; font-weight:700; font-size:12px; border:1px solid #e0e5ea; }
.dash .module.is-soon{cursor:not-allowed}
.dash .module.is-soon:hover{transform:none; box-shadow:var(--shadow); border-color:#e7ecea}

/* --- RESPONSIVO --- */
@media (max-width: 980px){
  .dash .hero{grid-template-columns:1fr; padding:24px}
  .dash .kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 560px){
  .dash{padding:0 14px}
  .dash .kpis{grid-template-columns:1fr}
  .dash{ --brand:#0B5D35; --brand-600:#094d2c; --ink:#183024; --muted:#5a6b62;
       --bg:#f5f7f6; --card:#ffffff; --ring:rgba(11,93,53,.12);
       --shadow:0 8px 24px rgba(0,0,0,.06); --radius:20px;
       background:var(--bg); color:var(--ink); font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
       max-width:1120px; margin:8px auto 0px; padding:0 10px 30px 10px;overflow-y:Auto;
}

}




.hidden{ display:none !important; }

.btn.create{
  background: var(--brand);
  color:#fff;
  border:0;
  margin-bottom:12px;
}
.btn.create:hover{ filter:brightness(1.05); }

.btn-ghost{
  background:#fff;
  border:1px solid var(--line);
}






/* ===== HEADER BASE ===== */
.site-header{ position:sticky; top:0; z-index:40; background:#0B5D35; color:#fff; }
.site-header__bar{ display:flex; align-items:center; justify-content:space-between; padding:10px 16px; gap:12px; }
.brand{ display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700; }
.brand img{ width:26px; height:26px; display:block; }
.user-chip{ display:flex; align-items:center; gap:8px; font-weight:600; }
.user-chip i{ opacity:.9 }

/* ===== NAV TOP (DESKTOP/TABLET) ===== */
.appnav{ display:flex; gap:8px; padding:8px 12px; background:#0A4E2C; overflow:auto; }
.appnav__item{
  display:inline-flex; align-items:center; gap:10px; padding:10px 12px;
  color:#E6F3EC; text-decoration:none; border-radius:12px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.appnav__item:hover{ background:rgba(255,255,255,.10); }
.appnav__item.is-active{ background:#fff; color:#0B5D35; border-color:#fff; }
.appnav__item .soon{ margin-left:6px; background:#eef1f4; color:#5f6770; border:1px solid #e0e5ea; border-radius:999px; padding:2px 8px; font-size:11px; font-weight:700; }
.appnav__item.is-soon{ cursor:not-allowed; }
.appnav__item.is-soon:hover{ background:rgba(255,255,255,.06); }

/* ===== HAMBURGUER / FLOAT MENU ===== */
.nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:#0A4E2C; color:#fff; border:1px solid rgba(255,255,255,.1); }
.nav-toggle:hover{ background:#094726; }

/* Drawer */
.appnav-drawer{
  position:fixed; inset:0; background:rgba(0,0,0,.32); display:none;
}
.appnav-drawer[aria-hidden="false"]{ display:block; }
.appnav-drawer .drawer__header{
  background:#0B5D35; color:#fff; padding:14px 16px; display:flex; align-items:center; justify-content:space-between;
}
.appnav-drawer .drawer__close{
  background:#0A4E2C; color:#fff; border:1px solid rgba(255,255,255,.15);
  width:36px; height:36px; border-radius:10px;
}
.drawer__items{
  background:#fff; max-width:420px; width:86%; height:calc(100% - 52px);
  padding:10px; overflow:auto; box-shadow:0 12px 40px rgba(0,0,0,.26);
}
.drawer__item{
  display:flex; align-items:flex-start; gap:12px; padding:12px; border-radius:14px;
  text-decoration:none; color:#173021; border:1px solid #e7ecea; background:#fff; margin:6px 0;
}
.drawer__item:hover{ background:#f7fbf9; }
.drawer__item.is-soon{ cursor:not-allowed; }
.drawer__item i{
  flex:0 0 36px; height:36px; display:grid; place-items:center; border-radius:10px; background:rgba(11,93,53,.08); color:#0B5D35;
}
.drawer__item small{ color:#5a6b62; display:block; margin-top:2px; }

/* ===== RESPONSIVO ===== */
@media (max-width: 860px){
  .appnav{ display:none; } /* esconde barra topo; usa drawer */
}



.photo-uploader{
  border:1px dashed #cfcfcf; border-radius:12px; padding:16px;
  display:flex; gap:12px; align-items:center; justify-content:flex-start;
  background:#fafafa;
}
.photo-uploader.dragover{ background:#eef9f1; border-color:#0b7d3a; }

.photo-list{
  margin-top:12px;
  display:flex; gap:10px; flex-wrap:nowrap; overflow:auto; padding-bottom:6px;
}
.photo-card{
  flex:0 0 auto; width:140px; border:1px solid #e4e4e4; border-radius:12px;
  background:#fff; box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.06));
  display:flex; flex-direction:column; overflow:hidden;
}
.photo-card .thumb{
  width:100%; aspect-ratio: 4/3; object-fit:cover; display:block;
  background:#f2f2f2;
}
.photo-card .bar{
  display:flex; justify-content:space-between; align-items:center;flex-direction:column;gap:5px;
  padding:6px 8px; font-size:12px;
}
.photo-del{
  border:0; background:#ffecec; color:#b10000; padding:6px 8px; border-radius:8px; cursor:pointer;
}
@media (max-width:768px){
  .photo-list{ flex-wrap:wrap; overflow:visible; }
  .photo-card{ width:100%; max-width:100%; }
}






/* Modal (lightbox) */
.photo-modal[hidden]{ display:none; }
.photo-modal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.65);
  padding:20px;
}
.photo-modal__content{
  position:relative; max-width:96vw; max-height:90vh;
  display:flex; align-items:center; justify-content:center;
}
.photo-modal__img{
  max-width:96vw; max-height:90vh; width:auto; height:auto; display:block;
  border-radius:12px; background:#fff;
}
.photo-modal__close{
  position:absolute; top:-12px; right:-12px;
  border:0; border-radius:999px; width:40px; height:40px;
  background:#fff; color:#111; font-size:18px; cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}



/* --- Z-INDEX / LAYERS --- */
.topbar{ z-index: 60; }               /* pode manter 50–100, tanto faz */

/* Drawer acima do topbar */
.appmenu{
  position: fixed;
  inset: 0;
  z-index: 2000;                      /* maior que o topbar */
  display: none;                      /* controlado por aria-hidden */
}
.appmenu[aria-hidden="false"]{ display: block; }

/* Camadas internas do drawer */
.appmenu__backdrop{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.appmenu__panel{
  position: absolute;
  right: 0; top: 0;
  z-index: 1;                         /* acima do backdrop */
}



/* KPIs: auto-fit p/ não sobrar coluna vazia */
.kpis{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important; }

/* Chips de biomas */
.kpi--biomas .kpi__chips{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
}
.kpi--biomas .kpi__chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; font-size:12px; font-weight:600;
  background:#eef6f1; border:1px solid #dfe7e3; color:#173021;
}
.kpi--biomas .kpi__chip b{ font-weight:700; }





/* Deixe o overlay empilhar CONTEÚDO em cima e LEGENDA embaixo */
.photo-modal{
  display:flex;                 /* já existia */
  flex-direction: column;       /* NOVO: empilha verticalmente */
  align-items:center;
  justify-content:center;
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.65);
  padding:20px;
}

/* Garante que haja espaço para a legenda abaixo sem estourar a tela */
.photo-modal__content{
  position:relative;
  max-width:96vw;
  max-height: calc(90vh - 60px); /* reserva um espaço pra legenda */
  display:flex; align-items:center; justify-content:center;
}

.photo-modal__img{
  max-width:96vw; max-height:100%;
  border-radius:12px; background:#fff;
}

/* Legenda */
.photo-modal__caption{
  margin-top:12px; color:#fff; text-align:center; font-size:14px;
  display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap;
}

/* Editor da legenda */
.photo-modal__editor[hidden]{ display:none; }
.photo-modal__editor{
  margin-top:8px; display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap;
}
.photo-modal__input{
  width:min(520px, 86vw);
  padding:8px 10px; border-radius:10px; border:1px solid #ddd; font-size:14px;
}
.photo-modal__btn{ border:0; border-radius:10px; padding:8px 12px; cursor:pointer; }
.photo-modal__btn.save{ background:#0b7d3a; color:#fff; }
.photo-modal__btn.cancel{ background:#f0f0f0; }

/* Setas do modal (como já tinha) */
.photo-modal__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; background:rgba(255,255,255,.9);
  width:44px; height:44px; border-radius:999px;
  font-size:26px; line-height:44px; text-align:center; cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.photo-modal__nav.prev{ left:-12px; }
.photo-modal__nav.next{ right:-12px; }
@media (max-width:768px){
  .photo-modal__nav.prev{ left:6px; }
  .photo-modal__nav.next{ right:6px; }
}





/* garante que o background fique atrás de tudo */
.bg-animated { position: relative; z-index: 0; }
.bg-animated::before,
.bg-animated::after {
  z-index: -1 !important;      /* <— chave */
  pointer-events: none;         /* evite bloquear cliques */
}

/* garanta que o conteúdo esteja acima */
.auth-container { position: relative; z-index: 1; }
.auth-card      { position: relative; z-index: 2; }