:root {
  /* Paleta MONET — silvicultura, água, floresta — hex exatos da paleta oficial */
  --brand-forest-deep: #1e3d2b;   /* verde-floresta escuro */
  --brand-forest:      #2e6b3f;   /* verde-floresta médio */
  --brand-sage:        #6faf7b;   /* verde-sálvia neutro */
  --brand-sage-soft:   #a8cba5;   /* sálvia claro (hover/badges) */
  --brand-navy:        #1e4e6e;   /* navy frio (filter panel, surfaces dark) */
  --brand-navy-deep:   #173d57;   /* navy mais escuro pro gradient */
  --brand-water:       #4c7fa3;   /* azul-aço (água) — accent primary */
  --brand-water-soft:  #86a6ba;   /* azul-aço claro */
  --brand-mist:        #cde3f2;   /* azul-pálido (mist) */
  --brand-canvas:      #f4f7f2;   /* off-white morno (background) */
  --brand-paper:       #fafcf8;   /* papel limpo (cards) */
  --brand-teal-deep:   var(--brand-navy);  /* alias retrocompatibilidade */

  /* Mapping semântico — canvas-first, surfaces escuras como destaque */
  --bg:               var(--brand-canvas);
  --bg-strong:        var(--brand-forest-deep);
  --surface:          var(--brand-paper);
  --surface-strong:   #ffffff;
  --panel:            rgba(244, 247, 242, 0.94);
  --panel-strong:     rgba(255, 255, 255, 0.98);
  --panel-tint:       rgba(168, 203, 165, 0.18);
  --line:             rgba(27, 48, 43, 0.14);
  --line-strong:      rgba(27, 48, 43, 0.28);
  --text:             var(--brand-forest-deep);
  --muted:            #5a7068;
  --accent:           var(--brand-water);
  --accent-strong:    #3a648a;
  --accent-soft:      var(--brand-water-soft);
  --secondary:        var(--brand-forest);
  --secondary-soft:   var(--brand-sage);
  --green-soft:       var(--brand-sage-soft);
  --green-strong:     var(--brand-forest);
  --blue:             var(--brand-water);
  --gold:             #c8954a;
  --danger:           #b85042;
  --focus-ring:       rgba(76, 127, 163, 0.32);
  --shadow:           0 14px 32px rgba(27, 48, 43, 0.18);
  --shadow-soft:      0 8px 20px rgba(27, 48, 43, 0.1);

  /* Tipografia: Inter pra UI, Playfair Display pra serif (nome MONET) */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  font-family: var(--font-sans);
  color: var(--text);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  /* Fundo da página: verde-floresta escuro com leve puxada pro navy nas
     bordas inferiores — mais sóbrio que o tom musgo anterior, ainda
     orgânico, enquadra o canvas claro com mais peso. */
  background:
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(150, 188, 168, 0.22), transparent 65%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(160, 172, 152, 0.14), transparent 65%),
    linear-gradient(160deg, #2c3830 0%, #1d2a30 50%, #0e1a2b 100%);
  background-attachment: fixed;
  color: var(--text);
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
}

.hidden {
  display: none !important;
}

.app-shell {
  min-height: 100vh;
  /* Padding bem fino: 12 → 8. Moldura verde como um traço sutil em volta
     do canvas, sem peso visual. */
  padding: 8px;
}

.screen {
  min-height: calc(100vh - 16px);
}

.screen-login {
  position: relative;
  display: block;
  min-height: calc(100vh - 16px);
  isolation: isolate;
}

.workspace-shell {
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: none;
}

/* Landing: foto full-bleed por trás de toda a tela.
   Carrossel automático faz crossfade entre hero-1 e hero-2 via app.js. */
.landing-visual-pane {
  position: absolute;
  inset: 0;
  min-height: calc(100vh - 16px);
  background: var(--brand-forest-deep);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  z-index: 0;
}

.landing-visual-surface {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 16px);
}

.landing-visual-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.04);
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}

.landing-visual-image.is-active {
  opacity: 1;
}

/* Overlay duplo: vinheta nos cantos (escurece para a foto não competir com o card)
   + gradient inferior pra leitura do lockup MONET. */
.landing-visual-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0%, rgba(27, 48, 43, 0.42) 100%),
    linear-gradient(
      180deg,
      rgba(27, 48, 43, 0.22) 0%,
      rgba(27, 48, 43, 0.06) 30%,
      rgba(27, 48, 43, 0.6) 100%
    );
  pointer-events: none;
}

/* Lockup MONET na landing — usa o PNG oficial do wordmark (PROMAB + MONET com
   mark integrado + tagline). Fica no canto inferior esquerdo da viewport,
   sobre a foto. O retângulo navy embutido no PNG se integra com a foto
   escurecida pelo overlay graças ao mix-blend-mode. */
.landing-visual-copy {
  position: absolute;
  left: clamp(28px, 4vw, 64px);
  bottom: clamp(28px, 4vw, 56px);
  z-index: 1;
  display: flex;
}

/* Wordmark transparente (background navy removido via color-key Python).
   Sem blend mode, sem cartão atrás — fica flutuando livre na foto. */
.landing-visual-wordmark {
  display: block;
  width: clamp(300px, 34vw, 520px);
  height: auto;
  filter: drop-shadow(0 12px 28px rgba(4, 18, 41, 0.75));
}

/* Auth pane sobrepõe a foto: posição relativa, transparente, card centralizado.
   Watermarks (mark + MONET serif) ficam visíveis sobre a foto. */
.landing-auth-pane {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 16px);
  background: transparent;
  border: 0;
  box-shadow: none;
  display: grid;
  place-items: center;
  padding: 32px;
  overflow: hidden;
}

/* Watermark MONET removida — a foto fala por si, sem competir com o card. */

/* Watermark MONET serif gigante removido para abrir espaço para o
   logo IPEF + PROMAB no canto inferior direito. */

/* Logo da empresa-mãe (IPEF · PROMAB Floresta e Água) no canto inferior direito.
   Selo bege sutil — mesmo canvas warm do card de login (rgba(250,252,248,0.92)),
   blur leve, borda branca translúcida. PNG transparente dentro pra não
   conflitar com o badge. Tamanho compacto, próximo ao canto. */
.landing-footer-logo-badge {
  position: absolute;
  right: clamp(14px, 1.8vw, 26px);
  bottom: clamp(14px, 1.8vw, 26px);
  z-index: 2;
  padding: 10px 14px;
  border-radius: 18px;
  /* Bege quente — tom canvas warm com leve âmbar (afinity com a paleta MONET
     sage/forest sem cair no branco frio). */
  background: rgba(244, 236, 219, 0.92);
  border: 1px solid rgba(217, 197, 158, 0.55);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow:
    0 1px 0 rgba(255, 248, 232, 0.75) inset,
    0 8px 22px rgba(27, 48, 43, 0.3);
  pointer-events: none;
}

.landing-footer-logo {
  display: block;
  width: clamp(78px, 7.5vw, 108px);
  height: auto;
}/* Wordmark completo no topo do card de login.
   Usa a versão LIGHT (texto verde-floresta escuro) que combina com o card claro. */
.landing-auth-wordmark {
  display: block;
  /* Estoura até as bordas internas do card via negative margin maior que o
     padding horizontal (24). +50 garante folga em telas largas. */
  width: calc(100% + 100px);
  max-width: 640px;
  height: auto;
  margin: 0 -50px 10px;
  filter: drop-shadow(0 4px 12px rgba(27, 48, 43, 0.18));
}

/* Card flutuando sobre a foto — glassmorphism elegante: vidro fosco com
   tint warm, borda mist water sutil, sombra multilayer profunda + halo. */
.landing-auth-card {
  position: relative;
  z-index: 1;
  /* Card mais compacto: 620 -> 540, padding 40/48 -> 28/36 pra deixar o
     formulário mais denso e o logo proporcionalmente maior. */
  width: min(100%, 540px);
  border: 1px solid rgba(76, 127, 163, 0.22);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 252, 0.92));
  backdrop-filter: blur(32px) saturate(140%);
  -webkit-backdrop-filter: blur(32px) saturate(140%);
  /* 4 camadas: halo branco superior + sombra elegante deep + sombra média
     ambient navy + sombra rasante pra "colar" no chão. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 32px 80px rgba(15, 36, 60, 0.42),
    0 12px 32px rgba(30, 78, 110, 0.22),
    0 2px 6px rgba(15, 36, 60, 0.18);
  padding: 28px 24px 26px;
  /* Transition pra elegância no hover/focus */
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.landing-auth-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 36px 92px rgba(15, 36, 60, 0.48),
    0 14px 36px rgba(30, 78, 110, 0.26),
    0 2px 6px rgba(15, 36, 60, 0.18);
}

.landing-auth-inner {
  gap: 22px;
}

.landing-auth-header {
  text-align: center;
  gap: 8px;
  padding-bottom: 4px;
}.landing-auth-header h1 {
  margin: 6px 0 0 !important;
  font-family: var(--font-serif) !important;
  font-size: 1.7rem !important;
  letter-spacing: -0.01em !important;
  font-weight: 600 !important;
  color: var(--brand-forest-deep) !important;
  line-height: 1.05 !important;
}.login-form span,
.login-form label > span {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.login-form .field-hint {
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.72;
  margin-left: 4px;
}

.login-form input {
  border-radius: 10px;
  border: 1px solid rgba(76, 127, 163, 0.25);
  background: #ffffff;
  padding: 8px 12px;
  font-size: 0.88rem;
  min-height: 36px;
}

/* ─── Floating Label (.login-form-float) ─────────────────────────────────────
   Cada <label class="float-label"> é um container relativo. O <span> dentro
   começa flutuando no meio do input (parece placeholder em fonte serif).
   Quando o usuário foca OU digita, o span sobe pro topo, encolhe e ganha um
   chip branco — fica como um label permanente. :has() detecta input filled.

   Inputs ganham padding-top maior pra deixar espaço pro label flutuante e
   pra que o texto digitado não colida com o label quando subir. */
.login-form-float .float-label {
  display: block;
  position: relative;
  /* Cancela o grid + gap herdado de .login-form label pra não ter espaço
     entre span e input — eles ocupam o mesmo lugar e o span é absoluto. */
  gap: 0;
}

.login-form-float .float-label > input,
.login-form-float .float-label .input-affix > input {
  padding: 22px 14px 8px;
  font-size: 0.92rem;
  min-height: 54px;
  border-radius: 12px;
  border: 1px solid rgba(76, 127, 163, 0.28);
  background: #ffffff;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.login-form-float .float-label > input:focus,
.login-form-float .float-label .input-affix > input:focus {
  outline: none;
  border-color: var(--brand-forest);
  box-shadow: 0 0 0 3px rgba(46, 107, 63, 0.12);
}

/* Span = label flutuante, na mesma fonte sans-serif do resto do app. */
.login-form-float .float-label > span {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(15, 42, 28, 0.48);
  letter-spacing: 0.01em;
  background: transparent;
  padding: 0;
  transition:
    top 180ms ease,
    transform 180ms ease,
    font-size 180ms ease,
    color 180ms ease,
    background 180ms ease,
    padding 180ms ease;
}

/* Label flutua pra cima quando: input focado OU input tem conteúdo.
   :placeholder-shown vira false quando o usuário digita algo (placeholder=" "
   no HTML garante que :placeholder-shown só fica true em campo vazio). */
.login-form-float .float-label:has(input:focus) > span,
.login-form-float .float-label:has(input:not(:placeholder-shown)) > span {
  top: 0;
  transform: translateY(-50%);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-forest);
  background: #ffffff;
  /* Contorno verde no chip flutuante — mesma identidade do botão Entrar */
  border: 1px solid var(--brand-forest);
  border-radius: 6px;
  padding: 1px 6px;
  left: 10px;
  /* Sombra interna branca pra fundir com o input (esconde a borda inferior
     do chip que cruza com a borda superior do input quando focado) */
  box-shadow: 0 0 0 2px #ffffff;
}

.login-form input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(185, 71, 71, 0.16);
}

/* Password affix */
.input-affix {
  position: relative;
  display: block;
}
.input-affix input {
  padding-right: 74px;
}
.input-affix-button {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.input-affix-button:hover {
  background: rgba(76, 127, 163, 0.08);
}

/* Primary button "Entrar" — botão elegante com gradient water → navy,
   highlight superior, sombra profunda navy e leve aro luminoso no hover. */
.landing-auth-card .primary-button {
  /* Tonalidade forest-deep — combina com o "MONET" do wordmark e foge do
     azul-trabalhista. Gradient super sutil pra dar profundidade sem chamar
     atenção. */
  background: linear-gradient(180deg, #2a4f37 0%, #1e3d2b 100%);
  color: #ffffff;
  border: 1px solid rgba(15, 36, 22, 0.55);
  border-radius: 10px;
  /* Menor: 36px altura vs 44px antes. Padding lateral mais respiroso. */
  padding: 8px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  min-height: 38px;
  /* Sombra refinada: 1 layer interno (highlight) + 1 elegante de elevação. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 4px 12px rgba(15, 36, 22, 0.22);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background 180ms ease, transform 140ms ease, box-shadow 180ms ease,
    border-color 180ms ease;
}
.landing-auth-card .primary-button:hover {
  background: linear-gradient(180deg, #356244 0%, #284a36 100%);
  border-color: rgba(15, 36, 22, 0.7);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 6px 16px rgba(15, 36, 22, 0.3);
}
.landing-auth-card .primary-button:active {
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 2px 6px rgba(15, 36, 22, 0.28);
}
.landing-auth-card .primary-button:focus-visible {
  outline: 2px solid rgba(111, 175, 123, 0.65);
  outline-offset: 3px;
}
.landing-auth-card .primary-button:disabled {
  background: linear-gradient(180deg, rgba(60, 95, 73, 0.55), rgba(30, 61, 43, 0.55));
  border-color: rgba(30, 61, 43, 0.3);
  cursor: not-allowed;
  transform: none;
  opacity: 0.85;
  color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 10px rgba(15, 36, 22, 0.15);
}

.button-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  animation: button-spin 0.7s linear infinite;
}
@keyframes button-spin {
  to { transform: rotate(360deg); }
}

/* Feedback */
.landing-auth-card .feedback {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(185, 71, 71, 0.08);
  border: 1px solid rgba(185, 71, 71, 0.24);
  color: #8a2f2f;
  font-size: 0.85rem;
  line-height: 1.4;
  min-height: 0;
}
.landing-auth-card .feedback::before {
  content: "!";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--danger);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.landing-auth-card .feedback.feedback-neutral {
  background: rgba(76, 127, 163, 0.06);
  border-color: rgba(76, 127, 163, 0.2);
  color: #2d5b3f;
}
.landing-auth-card .feedback.feedback-neutral::before {
  background: var(--accent);
  content: "i";
}

/* Inline links — 3 chips simétricos numa única linha, com separadores discretos.
   Grid garante alinhamento mesmo com tamanhos de texto diferentes. */
.landing-auth-card .auth-inline-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: stretch;
  gap: 4px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
.landing-auth-card .auth-link-button {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 7px 6px;
  border-radius: 10px;
  text-align: center;
  line-height: 1.2;
  transition: color 120ms ease, background 120ms ease;
}
.landing-auth-card .auth-link-button:hover {
  color: var(--brand-forest-deep);
  background: rgba(168, 203, 165, 0.18);
  text-decoration: none;
}
.landing-auth-card .auth-link-button.is-active {
  color: var(--brand-forest-deep);
  background: rgba(168, 203, 165, 0.28);
  font-weight: 600;
}

/* Credential disclosure — muted, subtle */
.landing-auth-card .credential-disclosure {
  border-top: 1px dashed rgba(76, 127, 163, 0.16);
  padding-top: 12px;
  margin-top: 2px;
}
.landing-auth-card .credential-disclosure summary {
  font-size: 0.76rem;
  color: rgba(63, 93, 119, 0.72);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.landing-auth-card .credential-disclosure summary::before {
  content: "›";
  display: inline-block;
  transition: transform 160ms ease;
  font-weight: 700;
}
.landing-auth-card .credential-disclosure[open] summary::before {
  transform: rotate(90deg);
}
.landing-auth-card .credential-item {
  background: rgba(76, 127, 163, 0.04);
  border: 1px solid rgba(76, 127, 163, 0.14);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.78rem;
}.landing-auth-inner {
  width: min(100%, 100%);
  display: grid;
  gap: 16px;
}

/* Mantém só a definição moderna (display: inline-flex com spans tipografados);
   a definição genérica antiga foi removida — duplicação polúía o kicker. */

.workspace-support-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.1vw, 2.35rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.landing-auth-header {
  display: grid;
  gap: 6px;
}.side-copy,
.feature-details p,
.source-item p {
  line-height: 1.6;
}

.auth-panel {
  display: grid;
  gap: 14px;
}

.auth-panel-header {
  display: grid;
  gap: 5px;
}

.auth-panel-header h2 {
  margin: 0;
  font-size: 1.06rem;
}

.auth-panel-header p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.88rem;
}

.login-form-clean {
  gap: 12px;
}.info-grid article,
.credential-box,
.side-card,
.context-card,
.source-item,
.metric-card,
.bar-track,
.summary-chip {
  background: linear-gradient(180deg, rgba(217, 230, 241, 0.95), rgba(198, 216, 230, 0.93));
  border: 1px solid rgba(68, 112, 166, 0.34);
  border-radius: 22px;
}.eyebrow,
.info-grid span,
.workspace-chip,
.product-pill,
.property-key,
.status-chip,
.source-chip {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.74rem;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  color: inherit;
  opacity: 0.78;
}.login-form,
.field-group,
.feature-form {
  display: grid;
  gap: 14px;
}

.auth-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.auth-form-grid > label,
.auth-form-grid > button {
  min-width: 0;
}

.auth-form-grid > button {
  grid-column: 1 / -1;
}

.auth-panel[data-auth-panel="login"] .login-form-clean,
.auth-panel[data-auth-panel="forgot"] .login-form-clean {
  grid-template-columns: minmax(0, 1fr);
}

.auth-panel[data-auth-panel="login"] .login-form-clean > button,
.auth-panel[data-auth-panel="forgot"] .login-form-clean > button {
  grid-column: 1 / -1;
}

.login-form label,
.inline-field,
.context-card,
.field {
  display: grid;
  gap: 8px;
}

.login-form span,
.inline-field span,
.field span,
.context-card span {
  color: var(--muted);
  font-size: 0.82rem;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(229, 239, 247, 0.98) 0%, rgba(214, 228, 239, 0.98) 100%);
  color: var(--text);
  outline: none;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(21, 96, 207, 0.7);
  background: rgba(248, 252, 255, 0.98);
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px var(--focus-ring);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

button:disabled:hover,
.primary-button:disabled:hover,
.ghost-button:disabled:hover {
  transform: none;
}

input[type="range"] {
  padding: 0;
}

textarea {
  min-height: 112px;
  resize: vertical;
}

.primary-button,
.ghost-button {
  border: 0;
  cursor: pointer;
  transition: transform 160ms ease, opacity 160ms ease, background 160ms ease;
}

.primary-button:hover,
.ghost-button:hover {
  transform: translateY(-1px);
}

.primary-button {
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-water) 0%, #3a648a 100%);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 10px 22px rgba(76, 127, 163, 0.28);
}

.primary-button:hover {
  background: linear-gradient(135deg, #3a648a 0%, var(--brand-teal-deep) 100%);
}

.ghost-button {
  padding: 8px 11px;
  border-radius: 12px;
  background: var(--surface-strong);
  border: 1px solid var(--line-strong);
  color: var(--brand-forest-deep);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 6px rgba(27, 48, 43, 0.06);
}

.ghost-button:hover {
  background: var(--brand-paper);
  border-color: var(--brand-forest);
  color: var(--brand-forest-deep);
}

.compact-button {
  padding: 6px 9px;
  font-size: 0.76rem;
}

.danger-button {
  background: linear-gradient(180deg, #fbe6e0 0%, #f6d2c8 100%);
  border-color: rgba(184, 80, 66, 0.4);
  color: #7a3327;
}

.danger-button:hover {
  background: linear-gradient(180deg, #f6d2c8 0%, #efb9aa 100%);
  border-color: rgba(184, 80, 66, 0.6);
}

.feedback {
  min-height: 1.4rem;
  margin: 0;
  color: var(--danger);
  font-size: 0.92rem;
}

.feedback-neutral {
  color: #365b78;
}

.auth-inline-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.auth-link-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--accent-strong);
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1.4;
}

.auth-link-button:hover {
  text-decoration: underline;
}

.auth-link-button.is-active {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}.credential-box {
  margin-top: 10px;
  padding: 12px 0 0;
  background: transparent;
  display: grid;
  gap: 8px;
  box-shadow: none;
  border-radius: 0;
}

.credential-list {
  display: grid;
  gap: 8px;
}

.credential-item {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(68, 112, 166, 0.16);
  border-radius: 14px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #fafdff 0%, #f0f7ff 100%);
  color: var(--muted);
  font-size: 0.84rem;
}

.credential-item strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
}

.screen-dashboard {
  min-height: calc(100vh - 16px);
}

.workspace-shell {
  min-height: calc(100vh - 16px);
  background:
    radial-gradient(ellipse 70% 40% at 0% 0%, rgba(159, 175, 123, 0.1), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(76, 127, 163, 0.08), transparent 60%),
    linear-gradient(180deg, var(--brand-canvas) 0%, #eef2ec 100%);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  --insights-width: clamp(560px, 42vw, 820px);
  backdrop-filter: none;
  /* Sombra elegante e profunda — o workspace flutua sobre o fundo dark forest */
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 6px 14px rgba(15, 36, 23, 0.22),
    0 24px 56px rgba(15, 36, 23, 0.34);
}

.workspace-shell > .workspace-grid {
  flex: 1 1 auto;
  min-height: 0;
}

.workspace-shell.is-loading .workspace-grid {
  opacity: 0.98;
}

.context-breadcrumb,
.active-summary-strip,
.side-head-actions,
.filter-panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.workspace-header,
.workspace-topbar,
.workspace-head-actions,
.product-strip,
.product-switch,
.side-head,
.source-actions,
.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workspace-header {
  display: flex;
  position: relative;
  z-index: 1200;
  gap: 2px;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 0;
  padding: 0 2px;
  /* Permite que o logo grande do brand transborde vertical pra a barra
     ficar fina sem comprimir o símbolo. */
  overflow: visible;
}

.workspace-topbar {
  display: grid;
  position: relative;
  z-index: 1200;
  grid-template-columns: minmax(0, auto) auto minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  gap: 8px;
  min-width: 0;
  width: 100%;
  max-width: none;
  min-height: 0;
  padding: 4px 14px 4px 6px;
  border-radius: 14px;
  /* Importante: logo do brand transborda verticalmente — barra fina */
  overflow: visible;
  /* Topbar canvas claro sobre o fundo escuro. Tom neutro frio (não verde)
     pra ler como cinza elegante; contorno slate bem discreto. */
  border: 1px solid rgba(15, 23, 42, 0.10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 249, 251, 0.97) 100%);
  /* Sombra um pouco mais forte e mais fria (slate em vez de forest). */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 8px rgba(15, 23, 42, 0.18),
    0 16px 36px rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(12px);
}

.workspace-topbar > .workspace-view-tabs {
  justify-self: start;
}

.workspace-topbar > .workspace-right-cluster {
  justify-self: end;
}

.workspace-right-cluster {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.workspace-nav-cluster {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* ─── Toggle "Análise Rápida" ──────────────────────────────────────────────
   Switch ON/OFF estilo iOS — pílula com track + thumb. Quando ativo, o
   modo dispara hover preview nos polígonos (sem clique). */
.quick-analysis-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 12px;
  border-radius: 999px;
  background: rgba(30, 61, 43, 0.05);
  border: 1px solid rgba(30, 61, 43, 0.12);
  cursor: pointer;
  user-select: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand-forest);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.quick-analysis-toggle:hover {
  background: rgba(30, 61, 43, 0.08);
  border-color: rgba(30, 61, 43, 0.2);
}

.quick-analysis-toggle-label {
  white-space: nowrap;
  line-height: 1;
}

/* Input checkbox real fica oculto mas mantém acessibilidade. */
.quick-analysis-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Track + thumb visual. */
.quick-analysis-toggle-track {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: rgba(30, 61, 43, 0.18);
  transition: background 180ms ease;
}

.quick-analysis-toggle-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 36, 22, 0.32);
  transition: transform 180ms ease, background 180ms ease;
}

/* Estado ON: track verde forest, thumb desloca pra direita, label mais escuro. */
.quick-analysis-toggle:has(.quick-analysis-toggle-input:checked) {
  background: rgba(46, 107, 63, 0.12);
  border-color: rgba(46, 107, 63, 0.4);
  color: var(--brand-forest-deep);
}

.quick-analysis-toggle:has(.quick-analysis-toggle-input:checked)
  .quick-analysis-toggle-track {
  background: linear-gradient(180deg, #2a4f37 0%, #1e3d2b 100%);
}

.quick-analysis-toggle:has(.quick-analysis-toggle-input:checked)
  .quick-analysis-toggle-thumb {
  transform: translateX(14px);
}

/* Focus visible no toggle (acessibilidade teclado). */
.quick-analysis-toggle:has(.quick-analysis-toggle-input:focus-visible) {
  outline: 2px solid rgba(111, 175, 123, 0.55);
  outline-offset: 2px;
}

/* Quando o modo está ON, o app inteiro mostra um indicador sutil
   (cursor pointer nos polígonos do mapa). */
body.quick-analysis-on .leaflet-interactive {
  cursor: crosshair;
}

.workspace-head-actions {
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  max-width: none;
  min-width: 0;
}

/* Tabs Mapa / Análises / Arquivos — segmented pill na identidade forest +
   canvas. Container suave, inativos discretos, ativo em gradient forest-deep
   (mesma família do botão "Entrar" e "Desenhar"). */
.workspace-view-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(30, 61, 43, 0.05);
  border: 1px solid rgba(30, 61, 43, 0.12);
}

.workspace-tab-button {
  border: 1px solid transparent;
  border-radius: 999px;
  min-height: 28px;
  padding: 5px 18px;
  background: transparent;
  color: var(--brand-forest);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0.7;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease,
    border-color 140ms ease, opacity 140ms ease;
}

.workspace-tab-button:hover {
  opacity: 1;
  color: var(--brand-forest-deep);
  background: rgba(30, 61, 43, 0.06);
}

.workspace-tab-button.is-active {
  background: linear-gradient(180deg, #2a4f37 0%, #1e3d2b 100%);
  border-color: rgba(15, 36, 22, 0.55);
  color: #ffffff;
  opacity: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 3px 10px rgba(15, 36, 22, 0.24);
}

.workspace-tab-button.is-active:hover {
  background: linear-gradient(180deg, #356244 0%, #284a36 100%);
  color: #ffffff;
}

.workspace-toolbar {
  display: none;
}

.workspace-brand {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-left: 0;
}

/* Mark MONET no topbar — gota+floresta+folha.
   Cabe inteiro dentro da barra (sem overflow vertical). */
.workspace-brand-mark {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 auto;
  margin: 0;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 3px 8px rgba(15, 36, 23, 0.28));
}

/* Esconde título do workspace e chip do role — topbar minimalista,
   só mark + kicker MONET·PROMAB + tabs + perfil. */
#workspace-title,
#client-chip,
#client-context {
  display: none !important;
}

.workspace-brand-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

/* Kicker: PROMAB (sans tracked, pequeno) ACIMA de MONET (serif, grande).
   column-reverse pois a ordem DOM atual é MONET, sep, PROMAB. */
.workspace-kicker {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 1px;
  margin: 0;
  color: var(--brand-forest);
  font-size: 0.66rem;
  line-height: 1;
}

.workspace-kicker-monet {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--brand-forest-deep);
}

.workspace-kicker-sep {
  display: none;
}

.workspace-kicker-by {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-sage);
  opacity: 0.9;
}

.workspace-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}

#client-chip {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(21, 96, 207, 0.18);
  background: rgba(232, 240, 247, 0.7);
  color: #5a7068;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: capitalize;
}

.workspace-support-title {
  margin: 0;
  color: #1b302b;
  font-family: var(--font-display);
  font-size: clamp(0.94rem, 1vw, 1.05rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#client-context {
  display: none;
}

.workspace-status-banner {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(30, 104, 186, 0.28);
  background: linear-gradient(135deg, rgba(220, 234, 247, 0.99), rgba(212, 236, 227, 0.99));
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.4;
  box-shadow: 0 8px 16px rgba(27, 48, 43, 0.05);
}

.workspace-status-banner::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(21, 96, 207, 0.12);
  flex: 0 0 auto;
}

.workspace-status-banner[data-tone="error"] {
  border-color: rgba(177, 61, 61, 0.22);
  background: linear-gradient(135deg, rgba(255, 240, 240, 0.98), rgba(255, 250, 244, 0.98));
}

.workspace-status-banner[data-tone="error"]::before {
  background: #c44f4f;
  box-shadow: 0 0 0 4px rgba(196, 79, 79, 0.12);
}

.workspace-status-banner[data-tone="warning"] {
  border-color: rgba(176, 129, 44, 0.22);
  background: linear-gradient(135deg, rgba(255, 249, 235, 0.98), rgba(242, 251, 247, 0.98));
}

.workspace-status-banner[data-tone="warning"]::before {
  background: #b8862b;
  box-shadow: 0 0 0 4px rgba(184, 134, 43, 0.12);
}

.workspace-status-banner[data-tone="success"]::before {
  background: #1d7d6a;
  box-shadow: 0 0 0 4px rgba(29, 125, 106, 0.12);
}

.workspace-management-panel {
  position: relative;
  z-index: 1200;
  display: grid;
  gap: 10px;
  padding: 16px clamp(12px, 3vw, 24px) 24px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
}

.workspace-management-shell {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(159, 175, 123, 0.35);
  /* Canvas como surface principal — o pattern monet-admin-bg (curvas topográficas
     + silhuetas de pinheiros) aparece como wallpaper suave atrás (~10%) via
     pseudo-elemento, mantendo o feeling de "aba administração" sem escurecer. */
  background: var(--brand-canvas);
  box-shadow: 0 12px 28px rgba(27, 48, 43, 0.12);
  min-height: 0;
  overflow: hidden;
}

.workspace-management-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./assets/monet-admin-bg.png") center / cover no-repeat;
  opacity: 0.1;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
}

/* Garante que os filhos ficam acima do wallpaper */
.workspace-management-shell > * {
  position: relative;
  z-index: 1;
}

.workspace-management-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.workspace-management-kicker {
  margin: 0;
  color: var(--brand-forest);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.78;
}

.workspace-management-title {
  margin: 4px 0 0;
  color: var(--brand-forest-deep);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.15;
}

.workspace-management-pane {
  min-width: 0;
}

.workspace-management-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(69, 121, 181, 0.26);
  background: linear-gradient(180deg, rgba(212, 224, 235, 0.992), rgba(201, 214, 227, 0.988));
  box-shadow: 0 12px 22px rgba(4, 19, 39, 0.14);
}

.context-breadcrumb,
.active-summary-strip {
  min-width: 0;
}

.breadcrumb-pill,
.summary-pill {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 14px;
  border: 1px solid rgba(47, 88, 136, 0.26);
  background: linear-gradient(180deg, rgba(232, 240, 247, 0.98), rgba(216, 228, 239, 0.96));
  box-shadow: 0 8px 18px rgba(13, 43, 78, 0.08);
}

.breadcrumb-pill small,
.summary-pill small {
  color: var(--muted);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.breadcrumb-pill strong,
.summary-pill strong {
  min-width: 0;
  font-size: 0.76rem;
  line-height: 1.1;
  word-break: break-word;
}

.summary-pill-accent {
  background: linear-gradient(135deg, #eaf4ff 0%, #e3f6ef 100%);
}

.summary-pill-success {
  background: linear-gradient(135deg, #e7f3ff 0%, #def5ec 100%);
}

.summary-pill-muted {
  background: linear-gradient(135deg, #eef4fb 0%, #edf4f8 100%);
  opacity: 0.92;
}

.workspace-head-actions,
.product-switch,
.source-actions,
.status-row {
  flex-wrap: wrap;
}

.profile-card {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: nowrap;
  align-self: center;
  justify-content: flex-start;
  min-width: 240px;
  max-width: min(360px, 38vw);
  min-height: 36px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(91, 133, 176, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.profile-menu-shell {
  position: relative;
  z-index: 1300;
  min-width: 0;
}

.profile-card:hover,
.profile-card.is-open {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(21, 96, 207, 0.28);
  box-shadow: 0 7px 18px rgba(13, 49, 91, 0.11);
  transform: translateY(-1px);
}

.profile-card:focus-visible {
  outline: 3px solid rgba(76, 127, 163, 0.34);
  outline-offset: 2px;
}

.profile-card .profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, #0e56c7 100%);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.profile-card .profile-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0;
  line-height: 1.15;
}

.profile-card span.profile-avatar {
  display: flex;
}

.profile-card strong {
  color: #0f2f4f;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-card small {
  color: rgba(27, 54, 84, 0.9);
  font-size: 0.66rem;
  font-weight: 650;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.profile-card-chevron {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid rgba(17, 52, 86, 0.82);
  border-bottom: 2px solid rgba(17, 52, 86, 0.82);
  transform: rotate(45deg) translateY(-1px);
  flex: 0 0 auto;
  transition: transform 140ms ease;
}

.profile-card.is-open .profile-card-chevron {
  transform: rotate(-135deg) translateY(-1px);
}

.profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1400;
  display: grid;
  gap: 12px;
  width: min(360px, calc(100vw - 32px));
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(16, 53, 92, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(240, 247, 255, 0.985)),
    linear-gradient(135deg, rgba(12, 91, 196, 0.06), rgba(24, 125, 102, 0.04));
  box-shadow: 0 22px 46px rgba(9, 34, 65, 0.22);
}

.profile-menu-summary {
  display: grid;
  gap: 4px;
  padding: 2px 2px 0;
}

.profile-menu-kicker {
  margin: 0;
  color: rgba(25, 72, 118, 0.92);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.profile-menu-summary strong {
  color: #102b47;
  font-size: 1rem;
  line-height: 1.1;
}

.profile-menu-meta {
  margin: 0;
  color: rgba(22, 51, 81, 0.92);
  font-size: 0.76rem;
  line-height: 1.4;
}

.profile-menu-context {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(24, 85, 145, 0.16);
  background: linear-gradient(180deg, rgba(233, 241, 250, 0.96), rgba(226, 238, 250, 0.9));
}

.profile-menu-context-item {
  display: grid;
  gap: 3px;
}

.profile-menu-context-item span {
  color: rgba(29, 68, 105, 0.88);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-menu-context-item strong {
  color: #0f2f4f;
  font-size: 0.82rem;
  line-height: 1.3;
}

.profile-menu-actions {
  display: grid;
  gap: 8px;
}

.profile-menu-action {
  appearance: none;
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(17, 72, 126, 0.16);
  border-radius: 18px;
  background: rgba(249, 252, 255, 0.98);
  color: #102b47;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.profile-menu-action span {
  color: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

.profile-menu-action small {
  color: rgba(26, 56, 87, 0.9);
  font-size: 0.72rem;
  line-height: 1.35;
}

.profile-menu-action:hover,
.profile-menu-action:focus-visible {
  border-color: rgba(22, 99, 186, 0.34);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(235, 244, 253, 0.98));
  box-shadow: 0 10px 20px rgba(16, 56, 102, 0.1);
  transform: translateY(-1px);
}

.profile-menu-action:focus-visible {
  outline: 3px solid rgba(76, 127, 163, 0.2);
  outline-offset: 2px;
}

.profile-menu-action.is-active {
  border-color: rgba(18, 98, 191, 0.42);
  background: linear-gradient(135deg, rgba(16, 92, 196, 0.14), rgba(24, 125, 102, 0.12));
}

.profile-menu-action-danger {
  border-color: rgba(155, 46, 46, 0.18);
  background: linear-gradient(180deg, rgba(255, 249, 249, 0.98), rgba(255, 241, 241, 0.98));
}

.profile-menu-action-danger span {
  color: #7c2430;
}

.profile-menu-action-danger small {
  color: rgba(109, 42, 52, 0.86);
}

.workspace-head-actions .compact-button {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 0.72rem;
}

.workspace-head-actions .primary-button.compact-button {
  padding: 5px 12px;
  border-radius: 999px;
  background: transparent;
  color: rgba(48, 80, 107, 0.85);
  font-weight: 600;
  box-shadow: none;
  border: 1px solid rgba(52, 102, 159, 0.2);
  letter-spacing: 0.01em;
}

.workspace-head-actions .primary-button.compact-button:hover {
  background: rgba(210, 224, 240, 0.78);
  color: #143d66;
  border-color: rgba(76, 127, 163, 0.32);
  transform: none;
}

.workspace-chip {
  padding: 3px 7px;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
}

#admin-profile-panel [data-admin-profile-sheet] {
  display: grid;
  gap: 14px;
}#admin-profile-panel [data-admin-profile-sheet] .management-pane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

#admin-profile-panel [data-admin-profile-sheet] .management-pane-copy,
#admin-profile-panel [data-admin-profile-sheet] .management-pane-note,
#admin-profile-panel [data-admin-profile-sheet] .management-footnote,
#admin-profile-panel [data-admin-profile-sheet] .management-assets-copy,
#admin-profile-panel [data-admin-profile-sheet] .management-assets-section p {
  margin: 0;
  color: #35516d;
  font-size: 0.82rem;
  line-height: 1.45;
}

#admin-profile-panel [data-admin-profile-sheet] .management-status-copy {
  color: #35516d;
  font-size: 0.78rem;
}#admin-profile-panel [data-admin-profile-sheet] .management-client-card.is-selected {
  border-color: rgba(22, 101, 182, 0.68);
  background: linear-gradient(135deg, rgba(205, 224, 245, 0.998), rgba(198, 229, 214, 0.992));
  box-shadow: 0 10px 18px rgba(8, 31, 58, 0.15);
}#admin-profile-panel [data-admin-profile-sheet] .context-card {
  box-shadow: 0 10px 18px rgba(13, 47, 89, 0.12);
  background: linear-gradient(180deg, rgba(219, 229, 238, 0.996), rgba(208, 220, 232, 0.99));
  border-color: rgba(48, 100, 160, 0.32);
}

#admin-profile-panel [data-admin-profile-sheet] [data-admin-profile-form="1"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

#admin-profile-panel [data-admin-profile-sheet] [data-admin-profile-form="1"] > label:has(textarea),
#admin-profile-panel [data-admin-profile-sheet] [data-admin-profile-form="1"] > .status-row,
#admin-profile-panel [data-admin-profile-sheet] [data-admin-profile-form="1"] > .source-meta,
#admin-profile-panel [data-admin-profile-sheet] [data-admin-profile-form="1"] > .admin-panel-form-actions {
  grid-column: 1 / -1;
}

#admin-profile-panel [data-admin-profile-sheet] [data-admin-profile-form="1"] > label {
  min-width: 0;
}

#admin-profile-panel [data-admin-profile-sheet] .summary-chip {
  border-color: rgba(41, 84, 138, 0.22);
}

#admin-profile-panel [data-admin-profile-sheet] .management-assets-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(57, 109, 169, 0.2);
  background: rgba(222, 232, 241, 0.78);
  box-shadow: 0 8px 18px rgba(4, 19, 39, 0.08);
}#admin-profile-panel [data-admin-profile-sheet] .management-assets-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 12px;
}

#admin-profile-panel [data-admin-profile-sheet] .management-assets-section {
  display: grid;
  gap: 8px;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid rgba(45, 91, 63, 0.18);
  background: rgba(236, 243, 249, 0.86);
}

#admin-profile-panel [data-admin-profile-sheet] .management-assets-section-emphasis {
  background: rgba(228, 239, 248, 0.9);
}

#admin-profile-panel [data-admin-profile-sheet] .management-assets-section-subtle {
  background: rgba(228, 236, 244, 0.76);
}

#admin-profile-panel [data-admin-profile-sheet] .management-assets-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

#admin-profile-panel [data-admin-profile-sheet] .management-assets-list {
  display: grid;
  gap: 8px;
}#admin-profile-panel [data-admin-profile-sheet] .management-context-pill,
.management-stat-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(45, 91, 63, 0.3);
  background: linear-gradient(180deg, rgba(229, 238, 246, 0.995), rgba(217, 228, 239, 0.992));
}

#admin-profile-panel [data-admin-profile-sheet] .management-context-pill span,
.management-stat-card span {
  color: #42627f;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#admin-profile-panel [data-admin-profile-sheet] .management-context-pill strong,
.management-stat-card strong {
  color: #1b302b;
  font-size: 0.9rem;
  line-height: 1.2;
}

#admin-profile-panel [data-admin-profile-sheet] .management-context-pill small,
.management-stat-card small {
  color: #47657f;
  font-size: 0.74rem;
  line-height: 1.35;
}

.management-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}.management-assets-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.management-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(44, 90, 140, 0.12);
  background: rgba(240, 245, 249, 0.88);
}

.management-search {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.management-search span {
  color: #5a738c;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.management-search input {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid rgba(44, 90, 140, 0.14);
  background: rgba(248, 251, 253, 0.98);
  color: #123a60;
  font: inherit;
}

.management-search input:focus {
  outline: none;
  border-color: rgba(76, 127, 163, 0.42);
  box-shadow: 0 0 0 4px rgba(76, 127, 163, 0.12);
}.management-sort {
  display: grid;
  gap: 6px;
}

.management-sort span {
  color: #5a738c;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.management-sort select {
  min-width: 148px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid rgba(44, 90, 140, 0.14);
  background: rgba(248, 251, 253, 0.98);
  color: #123a60;
  font: inherit;
}

.management-sort select:focus {
  outline: none;
  border-color: rgba(76, 127, 163, 0.42);
  box-shadow: 0 0 0 4px rgba(76, 127, 163, 0.12);
}

.management-view-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.management-view-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(44, 90, 140, 0.12);
  background: rgba(247, 250, 252, 0.98);
  color: #36556f;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.management-view-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(45, 91, 63, 0.08);
  color: #58708a;
  font-size: 0.66rem;
}

.management-view-chip:hover {
  background: rgba(235, 242, 248, 0.98);
  border-color: rgba(76, 127, 163, 0.18);
}

.management-view-chip.is-active {
  background: rgba(220, 234, 249, 0.98);
  border-color: rgba(76, 127, 163, 0.24);
  color: #113a62;
  box-shadow: none;
}

.management-view-chip.is-active span {
  background: rgba(76, 127, 163, 0.14);
  color: #0f4b84;
}

.management-overview-pill {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(44, 90, 140, 0.12);
  background: rgba(240, 246, 251, 0.92);
  box-shadow: none;
}

.management-overview-pill span {
  color: #5b738c;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.management-overview-pill strong {
  color: #123a60;
  font-size: 0.88rem;
  line-height: 1.2;
}

.management-overview-pill small {
  color: #56718c;
  font-size: 0.72rem;
  line-height: 1.3;
}

.management-overview-pill.tone-accent {
  background: rgba(224, 236, 248, 0.96);
}

.management-overview-pill.tone-success {
  background: rgba(224, 240, 233, 0.96);
}

.management-overview-pill.tone-warning {
  background: rgba(244, 234, 225, 0.96);
}

.management-overview-pill.tone-muted {
  background: rgba(230, 237, 244, 0.96);
}

.management-alert-strip {
  display: grid;
  gap: 8px;
}.management-alert-card.tone-warning {
  background: rgba(247, 236, 226, 0.96);
  border-color: rgba(184, 120, 54, 0.2);
}

.management-stat-card.tone-accent {
  background: linear-gradient(135deg, rgba(210, 228, 248, 0.998), rgba(205, 231, 222, 0.992));
}

.management-stat-card.tone-warning {
  background: linear-gradient(135deg, rgba(246, 231, 219, 0.998), rgba(239, 221, 207, 0.992));
}

.management-stat-card.tone-success {
  background: linear-gradient(135deg, rgba(210, 234, 226, 0.998), rgba(201, 228, 216, 0.992));
}

.management-stat-card.tone-muted {
  background: linear-gradient(135deg, rgba(223, 232, 240, 0.998), rgba(216, 225, 233, 0.992));
}.management-raster-calendar,
.management-raster-calendar-card {
  display: grid;
  gap: 10px;
}

.management-raster-calendar-card {
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(45, 91, 63, 0.14);
  background: rgba(233, 240, 246, 0.72);
}

.management-calendar-disclosure {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  border: 1px solid rgba(45, 91, 63, 0.12);
  border-radius: 12px;
  background: rgba(241, 246, 250, 0.82);
  overflow: hidden;
}

.management-calendar-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  color: #123a60;
  font-size: 0.78rem;
  font-weight: 700;
  list-style: none;
}

.management-calendar-disclosure > summary::-webkit-details-marker {
  display: none;
}

.management-calendar-disclosure > summary::after {
  content: "▾";
  color: #54708a;
  font-size: 0.8rem;
  transition: transform 140ms ease;
}

.management-calendar-disclosure[open] > summary::after {
  transform: rotate(180deg);
}

.management-calendar-disclosure-body {
  padding: 0 10px 10px;
}

.management-raster-calendar-years {
  display: grid;
  gap: 10px;
}

.management-raster-year-block {
  display: grid;
  gap: 8px;
}

.management-raster-year-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.management-raster-year-head strong {
  color: #143656;
  font-size: 0.82rem;
}

.management-raster-month-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.management-raster-month {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 0;
  border-radius: 10px;
  border: 1px solid rgba(44, 90, 140, 0.2);
  background: rgba(223, 231, 238, 0.86);
  color: #4a6986;
  font-size: 0.7rem;
  font-weight: 700;
}

.management-raster-month.is-configured {
  background: rgba(209, 231, 221, 0.96);
  color: #154e46;
  border-color: rgba(41, 121, 95, 0.26);
}

.management-raster-month.is-missing {
  background: rgba(218, 226, 233, 0.86);
  color: #617b92;
}

.management-raster-month.is-active {
  background: rgba(197, 221, 247, 0.98);
  color: #0f4a82;
  border-color: rgba(20, 88, 161, 0.34);
}

.workspace-chip {
  padding: 4px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(162, 201, 239, 0.98), rgba(173, 221, 202, 0.98));
  color: #082d50;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(31, 97, 168, 0.34);
}

.inline-field {
  min-width: 180px;
  padding: 10px 12px;
  border: 1px solid rgba(53, 99, 154, 0.38);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(227, 236, 245, 0.995), rgba(216, 226, 237, 0.986));
}

.inline-field input,
.inline-field select {
  border: 0;
  padding: 0;
  background: transparent;
}

.inline-field textarea {
  border: 0;
  padding: 0;
  background: transparent;
  resize: vertical;
  font: inherit;
  color: inherit;
  min-height: 68px;
}

.inline-field span {
  color: #35587a;
  font-weight: 700;
}.context-card {
  padding: 7px 11px 8px;
  background: var(--surface-strong);
  border: 1px solid rgba(205, 227, 242, 0.34);
  border-radius: 10px;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.context-card:focus-within {
  border-color: rgba(76, 127, 163, 0.6);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(134, 166, 186, 0.22);
}

.context-card > span {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brand-forest); /* label em verde — hierarquia clara, identidade */
  margin-bottom: 3px;
}

.context-card select {
  border: 0;
  padding: 0;
  background: transparent;
  font-weight: 600;
  font-size: 0.88rem;
  color: #0d1411; /* valor selecionado em preto profissional */
  width: 100%;
  min-width: 0;
}.readonly-card strong {
  display: block;
  font-size: 0.92rem;
}

.readonly-card small {
  line-height: 1.4;
  color: var(--muted);
  font-size: 0.78rem;
}

.workspace-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: calc(100vh - 84px);
}

.map-column,
.insights-column {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.map-column {
  min-height: calc(100vh - 84px);
}

.insights-column {
  align-content: start;
  min-height: 0;
}

.insights-column.is-selection-popup {
  --selection-popup-width: clamp(580px, 40vw, 760px);
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 680;
  width: var(--selection-popup-width);
  max-height: calc(100% - 32px);
  overflow: auto;
  padding: 12px;
  transform: translateY(-50%);
  border-radius: 22px;
  border: 1px solid rgba(45, 91, 63, 0.42);
  background: linear-gradient(180deg, rgba(228, 237, 245, 0.992), rgba(218, 229, 238, 0.988));
  backdrop-filter: none;
  box-shadow: 0 20px 36px rgba(4, 19, 39, 0.24);
  contain: layout paint;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  pointer-events: none;
}

.insights-column.is-selection-popup > * {
  pointer-events: auto;
}

.filter-panel::-webkit-scrollbar,
.layer-list::-webkit-scrollbar,
.feature-details::-webkit-scrollbar {
  width: 10px;
}

.filter-panel::-webkit-scrollbar-thumb,
.layer-list::-webkit-scrollbar-thumb,
.feature-details::-webkit-scrollbar-thumb {
  background: rgba(76, 127, 163, 0.32);
  border-radius: 999px;
}

.side-card {
  padding: 12px 14px;
  /* Borda fina e sutil, sombra suave — refinado pra não pesar visualmente.
     Padding reduzido de 16 → 12/14 e radius de 14 → 10 pra economizar
     espaço (especialmente notável no card Indicadores que tem muito
     conteúdo em layout vertical). */
  border: 1px solid rgba(30, 61, 43, 0.10);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(15, 36, 22, 0.07);
}

/* --- Clean admin panel --- */

/* --- Detail tabs within management panels --- */
.management-detail-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: rgba(45, 91, 63, 0.1);
  border: 1px solid rgba(45, 91, 63, 0.12);
  border-radius: 12px;
  margin-bottom: 4px;
  width: fit-content;
}

.management-detail-tab {
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #5a7068;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}

.management-detail-tab:hover {
  color: #1b302b;
  background: rgba(76, 127, 163, 0.06);
}

.management-detail-tab.is-active {
  color: #fff;
  background: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(76, 127, 163, 0.25);
}

.management-detail-tab-panel {
  display: none;
}

.management-detail-tab-panel.is-active {
  display: block;
}

/* --- Client private section --- */
.client-private-section {
  position: relative;
  border: 1px solid rgba(76, 127, 163, 0.22);
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(222, 235, 250, 0.98), rgba(230, 240, 248, 0.96));
}

.client-private-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent) 0%, #0e56c7 100%);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.client-private-badge::before {
  content: "🔒";
  font-size: 0.65rem;
}/* --- Empty state card --- */
.management-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  text-align: center;
  color: #5a7068;
  border: 1px dashed rgba(45, 91, 63, 0.24);
  border-radius: 14px;
  background: rgba(232, 240, 247, 0.5);
}

.management-empty-state strong {
  font-size: 0.84rem;
  color: #2a4d6e;
}

.management-empty-state p {
  margin: 0;
  font-size: 0.78rem;
  max-width: 320px;
}

.client-files-panel {
  width: 100%;
  max-height: none;
  overflow: visible;
  gap: 12px;
}

.client-files-title {
  margin: 0;
  color: #143d66;
  font-size: 1rem;
}

.client-account-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.management-assets-section,
.management-raster-calendar-card,
.management-assets-list {
  content-visibility: auto;
  contain-intrinsic-size: 220px;
}

.management-assets-section {
  border-radius: 16px;
  border: 1px solid rgba(47, 88, 136, 0.14);
  background: linear-gradient(180deg, rgba(232, 239, 246, 0.92), rgba(224, 233, 242, 0.88));
}

.management-assets-section-head {
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(47, 88, 136, 0.1);
}

.management-assets-section .feature-title {
  color: #14385e;
}

.management-pane-copy,
.management-pane-note {
  color: #4d6881;
}

.management-assets-list {
  display: grid;
  gap: 8px;
}

.source-item {
  display: grid;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(47, 88, 136, 0.12);
  background: rgba(244, 248, 252, 0.94);
}

.source-item .source-main strong {
  color: #13395d;
}

.source-item .source-main p {
  color: #58728d;
}

.source-item .source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.source-item .source-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}.management-inline-confirm {
  display: grid;
  gap: 6px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(196, 81, 34, 0.24);
  background: rgba(255, 246, 238, 0.96);
}

.management-inline-confirm strong {
  color: #86411c;
  font-size: 0.78rem;
}

.management-inline-confirm p {
  margin: 0;
  color: #9a5d33;
  font-size: 0.76rem;
}

.management-inline-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.management-raster-defaults {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.management-raster-defaults label {
  display: grid;
  gap: 3px;
}

.management-raster-defaults label span {
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b7390;
}

.management-raster-defaults select {
  min-height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(47, 88, 136, 0.14);
  background: rgba(250, 252, 255, 0.98);
  color: #173f65;
  padding: 0 10px;
  font-size: 0.76rem;
}

.management-history-list {
  display: grid;
  gap: 8px;
}

.management-history-disclosure {
  display: grid;
  gap: 0;
  border: 1px solid rgba(45, 91, 63, 0.12);
  border-radius: 12px;
  background: rgba(241, 246, 250, 0.82);
  overflow: hidden;
}

.management-history-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 11px;
  cursor: pointer;
  color: #123a60;
  font-size: 0.78rem;
  font-weight: 700;
  list-style: none;
}

.management-history-disclosure > summary::-webkit-details-marker {
  display: none;
}

.management-history-disclosure > summary::after {
  content: "▾";
  margin-left: auto;
  color: #54708a;
  font-size: 0.8rem;
  transition: transform 140ms ease;
}

.management-history-disclosure[open] > summary::after {
  transform: rotate(180deg);
}

.management-history-disclosure-body {
  padding: 0 10px 10px;
}

.management-history-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(47, 88, 136, 0.1);
  background: rgba(244, 248, 252, 0.82);
}

.management-history-item strong {
  color: #143a5c;
}

.management-history-item p {
  margin: 2px 0 0;
  color: #5d7692;
}

.management-history-meta {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 6px;
}

.management-history-meta small {
  color: #6b8299;
}

.client-account-strip {
  border: 1px solid rgba(47, 88, 136, 0.14);
  background: linear-gradient(180deg, rgba(228, 236, 244, 0.92), rgba(220, 230, 240, 0.9));
}

@media (max-width: 900px) {
  .management-assets-overview {
    grid-template-columns: 1fr;
  }

  .management-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .management-toolbar-actions {
    justify-content: flex-start;
  }

  .management-raster-defaults {
    grid-template-columns: 1fr;
  }

  .management-history-item {
    flex-direction: column;
  }

  .management-history-meta {
    justify-items: start;
  }
}.client-account-strip .management-pane-note {
  color: #4b6885;
}

.workspace-management-shell {
  padding: 12px;
  border-radius: 22px;
  border: 1px solid rgba(88, 132, 188, 0.18);
  background:
    radial-gradient(circle at top right, rgba(32, 125, 214, 0.12), transparent 28%),
    radial-gradient(circle at bottom left, rgba(24, 125, 102, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(239, 245, 252, 0.995), rgba(229, 238, 247, 0.992));
  box-shadow: 0 12px 26px rgba(8, 29, 53, 0.12);
}

.workspace-management-card {
  gap: 14px;
  padding: 16px;
  border-radius: 24px;
  /* Borda LEVÍSSIMA azulada padronizada com o resto do app */
  border: 1px solid rgba(76, 127, 163, 0.16);
  background:
    linear-gradient(180deg, rgba(253, 254, 255, 0.996), rgba(244, 248, 252, 0.96));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 14px 32px rgba(30, 78, 110, 0.1),
    0 4px 10px rgba(30, 78, 110, 0.06);
}

.client-files-panel-head {
  align-items: flex-start;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(21, 87, 152, 0.14);
  background:
    linear-gradient(135deg, rgba(11, 76, 149, 0.96), rgba(28, 112, 189, 0.9) 52%, rgba(25, 125, 102, 0.86)),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.22), transparent 26%);
  box-shadow: 0 18px 34px rgba(14, 51, 91, 0.18);
}

.client-files-head-copy .eyebrow,
.client-files-head-copy .workspace-management-title,
.client-files-head-copy .management-pane-copy {
  color: #f6fbff;
}

.client-files-head-actions {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.client-files-head-actions .summary-chip,
.client-files-head-actions .ghost-button,
.admin-panel-header-code .ghost-button {
  border-color: rgba(230, 240, 252, 0.2);
  background: rgba(8, 34, 67, 0.16);
  color: #f2f8ff;
}

.client-files-head-actions .ghost-button:hover,
.admin-panel-header-code .ghost-button:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.client-files-overview-shell {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(45, 91, 63, 0.14);
  background: linear-gradient(180deg, rgba(248, 252, 255, 0.98), rgba(235, 243, 250, 0.94));
}

.client-files-overview-copy {
  display: grid;
  gap: 6px;
}

.client-files-overview-copy strong {
  color: #0f3153;
  font-size: 1rem;
  line-height: 1.28;
}

.client-files-shell {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
  gap: 16px;
  align-items: start;
}

.client-files-side-column,
.client-files-main-column {
  display: grid;
  gap: 16px;
}

.client-files-raster-card,
.client-files-vectors-card,
.client-account-strip {
  padding: 16px;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.48);
}

.client-files-title {
  font-size: 1.14rem;
}

.client-account-summary {
  gap: 10px;
}


.management-detail-tabs {
  padding: 6px;
  border-radius: 16px;
  background: rgba(45, 91, 63, 0.08);
  border: 1px solid rgba(45, 91, 63, 0.1);
}

.management-assets-card {
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(57, 109, 169, 0.14);
  background: linear-gradient(180deg, rgba(247, 251, 254, 0.98), rgba(236, 244, 250, 0.95));
}.management-assets-section {
  border-radius: 18px;
  border: 1px solid rgba(47, 88, 136, 0.12);
  background: linear-gradient(180deg, rgba(247, 251, 254, 0.96), rgba(236, 244, 250, 0.92));
}

.management-assets-section-head {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(47, 88, 136, 0.08);
}

.source-item {
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(47, 88, 136, 0.1);
  background: rgba(252, 254, 255, 0.96);
  box-shadow: 0 8px 16px rgba(12, 42, 76, 0.05);
}

.product-switch button {
  border: 0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(219, 232, 246, 0.98), rgba(207, 223, 239, 0.98));
  color: #31546f;
  font-weight: 700;
  border: 1px solid rgba(64, 120, 180, 0.24);
}

.product-switch button.is-active {
  background: linear-gradient(135deg, #bddcff 0%, #cdeee0 100%);
  color: #104869;
  border-color: rgba(25, 102, 179, 0.34);
}

.map-stage {
  position: relative;
  min-height: calc(100vh - 84px);
  height: calc(100vh - 84px);
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(119, 175, 239, 0.28);
  background:
    linear-gradient(180deg, rgba(220, 234, 249, 0.88), rgba(198, 221, 243, 0.96)),
    #bfd7f0;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.workspace-grid.has-selection-popup .map-stage {
  isolation: auto;
}

.map-filter-backdrop {
  position: absolute;
  inset: 0;
  z-index: 640;
  display: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(3, 14, 28, 0.46);
  cursor: pointer;
}

.map-filter-backdrop.hidden {
  display: none !important;
}

.map-loading-state {
  position: absolute;
  inset: 0;
  z-index: 720;
  display: grid;
  place-items: center;
  padding: 26px;
  background: rgba(184, 207, 228, 0.74);
  backdrop-filter: none;
}

.map-loading-state .state-card {
  width: min(380px, 100%);
}

#map {
  height: 100%;
  min-height: calc(100vh - 84px);
  width: 100%;
  background: #dce8f7;
}

.floating-card {
  position: absolute;
  z-index: 650;
  backdrop-filter: none;
}

.filter-panel,
.raster-head-card,
.layer-card,
.tool-card,
.scale-card {
  border-radius: 14px;
  border: 1px solid rgba(168, 203, 165, 0.18);
  background: var(--surface-strong);
  box-shadow: 0 8px 20px rgba(27, 48, 43, 0.1);
  backdrop-filter: none;
}

/* Cards flutuantes abertos: superfície clara e refinada, borda fina forest,
   sombra discreta. Sem o gradiente navy puxado que dominava o mapa. */
.raster-head-card:not(.is-collapsed),
.layer-card:not(.is-collapsed) {
  /* Surface canvas — off-white morno elegante, não o branco puro pasteurizado.
     Contraste suave com os elementos brancos internos (selects/botões). */
  background: #e7ebe1;
  border: 1px solid rgba(30, 61, 43, 0.12);
  color: #0f1814;
  box-shadow: 0 8px 22px rgba(15, 36, 22, 0.14);
}

/* Quando o card está aberto, esconde o header com ícone+texto (RASTER/BASES).
   O conteúdo interno do card já é descritivo o suficiente. Pra fechar, o user
   clica fora (listener em JS — onDocumentClickForCollapsibleCards). */
.raster-head-card:not(.is-collapsed) .layer-card-toggle,
.layer-card:not(.is-collapsed) .layer-card-toggle {
  display: none;
}

/* FILTROS: o botão fica SEMPRE visível — alterna entre "FILTROS" (minimizado)
   e "OCULTAR FILTROS" (aberto) e funciona como toggle. */

.raster-head-card:not(.is-collapsed) .layer-card-toggle-icon,
.layer-card:not(.is-collapsed) .layer-card-toggle-icon {
  color: var(--brand-forest);
}

/* Labels dos campos internos (Ano, Mês, etc.) — verde mid */
.raster-head-card:not(.is-collapsed) .calendar-field span {
  color: var(--brand-forest);
  font-weight: 600;
}

/* Selects internos — fundo branco puro pra contraste com canvas, texto preto */
.raster-head-card:not(.is-collapsed) .calendar-field select {
  background: #ffffff;
  border-color: rgba(30, 61, 43, 0.18);
  color: #0d1411;
}

/* Segmented Mensal/Anual — pílulas elegantes sobre canvas */
.raster-head-card:not(.is-collapsed) .raster-frequency-toggle {
  background: #ffffff;
  border-color: rgba(30, 61, 43, 0.14);
}

.raster-head-card:not(.is-collapsed) .raster-frequency-option {
  color: #0d1411;
  font-weight: 700;
}

.raster-head-card:not(.is-collapsed) .raster-frequency-option:hover {
  background: rgba(30, 61, 43, 0.06);
  color: var(--brand-forest-deep);
}

.raster-head-card:not(.is-collapsed) .raster-frequency-option.is-active {
  background: linear-gradient(180deg, #2a4f37 0%, #1e3d2b 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 36, 22, 0.24);
}

/* Layer card (Camadas): botões internos elegantes — branco sobre canvas */
.layer-card:not(.is-collapsed) .layer-toggle-button {
  background: #ffffff;
  border: 1px solid rgba(30, 61, 43, 0.14);
  color: #0d1411;
  min-height: 26px;
  padding: 4px 9px;
  font-size: 0.68rem;
  font-weight: 700;
}

.layer-card:not(.is-collapsed) .layer-toggle-button:hover {
  background: #ffffff;
  border-color: rgba(30, 61, 43, 0.3);
  color: var(--brand-forest-deep);
  box-shadow: 0 2px 6px rgba(15, 36, 22, 0.08);
}

.layer-card:not(.is-collapsed) .layer-toggle-button.is-active {
  background: linear-gradient(180deg, #2a4f37 0%, #1e3d2b 100%);
  border-color: rgba(15, 36, 22, 0.55);
  color: #ffffff;
}

.layer-card:not(.is-collapsed) .layer-opacity span {
  color: var(--brand-forest);
  font-weight: 600;
}

.filter-stack {
  top: 16px;
  left: 16px;
  width: min(312px, calc(100vw - 60px));
  display: grid;
  gap: 6px;
}

/* Quando o filter-panel está fechado, o filter-stack vira só o botão isolado —
   removemos o "halo" branco com dashed border verde, deixando a pílula sozinha
   pra um look mais discreto e moderno. */
.filter-stack:not(:has(.filter-panel.is-open)) {
  width: fit-content;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.filter-toggle {
  width: fit-content;
  min-width: 92px;
  height: 34px;
  /* Pílula branca opaca com sombra escura — destaca contra qualquer tipo de
     fundo do mapa (vegetação, oceano, satélite claro). Texto forest-deep. */
  border: 1px solid rgba(15, 36, 22, 0.18);
  border-radius: 10px;
  background: #ffffff;
  color: var(--brand-forest-deep);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 12px;
  line-height: 1;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 4px 14px rgba(15, 36, 22, 0.32);
}

.filter-toggle:hover {
  background: #ffffff;
  border-color: rgba(15, 36, 22, 0.32);
  color: var(--brand-forest);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 6px 18px rgba(15, 36, 22, 0.4);
  transform: none;
}

.filter-panel {
  display: none;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding: 14px 12px 12px;
  max-height: calc(100vh - 228px);
  overflow: auto;
  /* Surface canvas — off-white morno em vez de branco puro. Combina com
     .layer-card e .raster-head-card. */
  background: #e7ebe1;
  border: 1px solid rgba(30, 61, 43, 0.12);
  color: #0f1814;
  box-shadow: 0 8px 22px rgba(15, 36, 22, 0.14);
  border-radius: 12px;
}

/* Seções (Localização / Camadas / Ferramentas) — agrupamento visual leve
   para tirar o clutter do painel. Cada seção tem um título minúsculo em
   uppercase e os cards stackados dentro com gap menor que o gap entre seções. */
.filter-section {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.filter-section-title {
  margin: 0;
  padding: 0 2px 2px;
  /* Forest mid pra ser visível em superfície clara, sem dominar */
  color: var(--brand-forest);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.filter-panel-actions {
  justify-content: space-between;
  margin-top: -4px;
}.level-toggle-button {
  border: 1px solid rgba(45, 91, 63, 0.3);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(233, 241, 248, 0.98) 0%, rgba(216, 229, 240, 0.98) 100%);
  color: #365875;
  padding: 8px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

.level-toggle-button.is-active {
  background: linear-gradient(135deg, #bcdcff 0%, #cdeee1 100%);
  color: #0d4577;
  border-color: rgba(21, 96, 207, 0.38);
}

.filter-panel.is-open {
  display: grid;
}.raster-head-card {
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  /* clamp evita resultado negativo de `100% - 540px` em viewports estreitos
     (540-900px), onde o cálculo antigo `min(220px, calc(...))` voltava valor
     negativo e batia no min-width 188px enquanto sobrepunha o filter-stack. */
  width: clamp(168px, calc(100% - 540px), 196px);
  min-width: 168px;
  padding: 7px 8px;
  text-align: left;
  display: grid;
  gap: 4px;
}

.raster-head-card.is-disabled {
  /* Mantém o botão visualmente idêntico aos outros (FILTROS/CAMADAS).
     O feedback de "desabilitado" vem do disabled nos selects internos quando aberto. */
  opacity: 1;
}

.raster-head-card.is-disabled .layer-card-toggle {
  color: var(--brand-forest-deep);
}

/* Quando colapsado, o wrapper some — só o layer-card-toggle (a pílula branca)
   fica visível, igual aos outros botões da família */
.raster-head-card.is-collapsed {
  display: inline-flex;
  width: auto;
  min-width: 0;
  padding: 0;
  gap: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.card-kicker,
.layer-card-title {
  color: #426886;
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  font-weight: 700;
  text-transform: uppercase;
}

.raster-head-card strong {
  display: block;
  margin-top: 0;
  font-size: 0.86rem;
}

.raster-head-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}.raster-head-card strong,
.raster-head-card p,
.raster-head-card .calendar-year-tabs,
.raster-head-card .calendar-month-tabs {
  display: none !important;
}

/* Botões de PRODUTO no card RASTER expandido — grid 2×2 compacto, identidade
   forest+canvas (consistente com Mensal/Anual.is-active embaixo). Inativo:
   superfície branca + borda forest sutil. Ativo: gradient forest-deep sólido
   + texto branco — destaque imediato do produto em uso. */
.raster-head-card .calendar-product-switch:not(.hidden) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
}

.raster-head-card .calendar-product-switch:not(.hidden) button {
  width: 100%;
  min-width: 0;                    /* permite shrink dentro do grid 2×2 */
  min-height: 26px;                /* siglas curtas (ETr/ETp/PREC) cabem em 1 linha */
  padding: 4px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 8px;
  /* Borda hairline sutil — flat, sem sombras/realces (menos ruído visual). */
  border: 1px solid rgba(30, 61, 43, 0.12);
  background: rgba(255, 255, 255, 0.72);
  color: var(--brand-forest-deep);
  /* Siglas curtas: sempre 1 linha, sem hifenização. */
  white-space: nowrap;
  line-height: 1.1;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease,
    box-shadow 140ms ease, transform 80ms ease;
}

.raster-head-card .calendar-product-switch:not(.hidden) button:hover:not(.is-active) {
  background: rgba(231, 235, 225, 0.7);
  border-color: rgba(30, 61, 43, 0.32);
}

.raster-head-card .calendar-product-switch:not(.hidden) button:active {
  transform: translateY(1px);
}

.raster-head-card .calendar-product-switch:not(.hidden) button.is-active {
  /* Ativo: forest sólido chapado — destaque por cor, não por sombra. */
  background: #1e3d2b;
  color: #ffffff;
  border-color: #1e3d2b;
  box-shadow: none;
}

.filter-panel-support {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(56, 94, 132, 0.16);
  padding-top: 10px;
  min-width: 0;
  width: 100%;
}

.support-field,
.support-focus {
  display: grid;
  gap: 6px;
}

.support-field {
  padding: 10px 11px;
  border: 1px solid rgba(168, 203, 165, 0.22);
  border-radius: 12px;
  background: rgba(228, 239, 247, 0.74);
}

.support-field span,
.support-focus small {
  color: var(--muted);
  font-size: 0.76rem;
}

.side-copy:empty {
  display: none;
}

/* Ferramentas (Desenhar/Retângulo/Upload/Limpar) — última seção do filter-panel.
   Sempre habilitado pois é usado tanto sobre vetores quanto sobre o raster. */
.filter-panel-tools {
  border-top: 1px solid rgba(169, 228, 245, 0.18);
  padding-top: 10px;
}

.filter-panel-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 2px;
}

/* Botões de Ferramentas unificados sobre superfície clara: contorno sage
   sutil, texto forest-deep. "Desenhar" recebe destaque sólido forest;
   "Limpar" mantém o acento danger pra alertar ação destrutiva. */
.filter-panel-tools-grid button {
  width: 100%;
  min-height: 28px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 8px;
  border: 1px solid rgba(30, 61, 43, 0.16);
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand-forest-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease,
    box-shadow 140ms ease;
}

.filter-panel-tools-grid button:hover,
.filter-panel-tools-grid button:focus-visible {
  background: #ffffff;
  border-color: rgba(30, 61, 43, 0.32);
  color: var(--brand-forest);
}

/* Desenhar — primary action: solid forest, alinhado com botão Entrar do login */
.filter-panel-tools-grid .primary-button {
  background: linear-gradient(180deg, #2a4f37 0%, #1e3d2b 100%);
  border-color: rgba(15, 36, 22, 0.45);
  color: #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 2px 8px rgba(15, 36, 22, 0.2);
}

.filter-panel-tools-grid .primary-button:hover,
.filter-panel-tools-grid .primary-button:focus-visible {
  background: linear-gradient(180deg, #356244 0%, #284a36 100%);
  border-color: rgba(15, 36, 22, 0.6);
  color: #ffffff;
}

/* Limpar — acento danger sutil sobre superfície clara */
.filter-panel-tools-grid .danger-button {
  background: rgba(184, 80, 66, 0.08);
  border-color: rgba(184, 80, 66, 0.3);
  color: #8a3527;
}

.filter-panel-tools-grid .danger-button:hover,
.filter-panel-tools-grid .danger-button:focus-visible {
  background: rgba(184, 80, 66, 0.14);
  border-color: rgba(184, 80, 66, 0.5);
  color: #6f2a1f;
}

/* Ghost buttons (Ver camada, Limpar seleção) — superfície branca sutil */
.filter-panel .ghost-button {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(30, 61, 43, 0.16);
  color: var(--brand-forest-deep);
  font-weight: 600;
}

.filter-panel .ghost-button:hover,
.filter-panel .ghost-button:focus-visible {
  background: #ffffff;
  border-color: rgba(30, 61, 43, 0.32);
  color: var(--brand-forest);
}

.filter-panel .danger-button {
  background: rgba(184, 80, 66, 0.08);
  border-color: rgba(184, 80, 66, 0.3);
  color: #8a3527;
}

.filter-panel .danger-button:hover,
.filter-panel .danger-button:focus-visible {
  background: rgba(184, 80, 66, 0.36);
  color: #ffffff;
}

.support-field select {
  border: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-weight: 650;
}

.support-focus {
  padding: 8px 2px 0;
}

.support-focus strong {
  font-size: 0.9rem;
}

.calendar-product-switch {
  justify-content: flex-start;
}

.calendar-compact-controls {
  display: grid;
  /* Ano + Mês equilibrados (Ano só precisa de 4 dígitos, mas damos peso visual
     parelho pros dois selects parecerem um par coeso). */
  grid-template-columns: 0.78fr 1fr;
  gap: 6px;
}

/* Variante minimalista do calendar-field: sem label visível (label só pra
   leitor de tela via .sr-only). O placeholder do <select> faz o papel da label.
   Reduz espaçamento vertical entre itens do card. */
.calendar-field.is-headless {
  gap: 0;
}

/* Classe utilitária — esconde visualmente mas mantém pra leitores de tela. */
.sr-only,
.calendar-field.is-headless > .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Card body: 3 grupos (Produto → Frequência → Ano/Mês) com gap respirando.
   Maior que antes pra hierarquia visual clara entre os grupos. */
.raster-head-card .layer-card-body {
  gap: 6px;
  padding-top: 2px;
}

/* Toggle Mensal/Anual ocupa linha cheia (em vez de ficar à esquerda) — alinha
   visualmente com os botões de produto acima e o select de ano abaixo. */
.raster-head-card:not(.is-collapsed) .raster-frequency-toggle {
  display: flex !important;
  width: 100%;
}

/* Modo Anual: o campo Mês some, então o Ano ocupa a LINHA INTEIRA (em vez de
   ficar preso numa coluna estreita à esquerda com metade da linha vazia). */
.calendar-compact-controls.is-month-hidden {
  grid-template-columns: 1fr;
}

.calendar-field {
  display: grid;
  gap: 4px;
}

.calendar-field.is-hidden-until-raster {
  display: none;
}

.calendar-field.is-disabled {
  opacity: 0.7;
}

.calendar-field span {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  font-weight: 700;
}

.calendar-field select {
  padding: 5px 7px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid rgba(45, 91, 63, 0.24);
  background: linear-gradient(180deg, rgba(249, 252, 255, 0.99), rgba(240, 247, 255, 0.96));
}

.calendar-field select:disabled {
  opacity: 0.78;
  cursor: default;
}

/* Segmented "Mensal / Anual" — pílula no estilo do filter-section.
   Visualmente alinhado com .level-toggle-grid mas sem grid de 2col. */
.raster-frequency-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  margin: 0;
  border-radius: 999px;
  background: rgba(30, 78, 110, 0.08);
  border: 1px solid rgba(30, 78, 110, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.raster-frequency-option {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.raster-frequency-option:hover {
  color: var(--brand-navy);
  background: rgba(255, 255, 255, 0.5);
}

.raster-frequency-option.is-active {
  background: #ffffff;
  color: var(--brand-navy);
  box-shadow: 0 2px 8px rgba(30, 78, 110, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.raster-frequency-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.calendar-year-tabs,
.calendar-month-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.calendar-month-tabs {
  gap: 6px;
}

.calendar-chip {
  border: 1px solid rgba(31, 82, 146, 0.2);
  background: linear-gradient(180deg, #f6faff 0%, #eef6ff 100%);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.calendar-chip:hover {
  transform: translateY(-1px);
}

.calendar-chip.is-active {
  background: linear-gradient(135deg, #d6eaff 0%, #dcf8ee 100%);
  color: #125b75;
  border-color: rgba(25, 111, 119, 0.28);
}

.layer-card {
  top: 16px;
  right: 16px;
  z-index: 740;
  width: 152px;
  padding: 8px;
  display: grid;
  gap: 6px;
  border-radius: 14px;
  /* Alinhado com a identidade forest dos outros cards (FILTROS/RASTER). */
  border-color: rgba(30, 61, 43, 0.12);
  background: #e7ebe1;
  box-shadow: 0 4px 14px rgba(15, 36, 22, 0.14);
  max-height: 360px;
  overflow: hidden;
  transition: width 160ms ease, max-height 160ms ease, padding 160ms ease, background 160ms ease;
}

.layer-card.is-collapsed {
  display: inline-flex;
  width: auto;
  padding: 0;
  gap: 0;
  max-height: 40px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Atribuição do Leaflet — menor e mais discreta, pra não brigar com a UI. */
.leaflet-control-attribution {
  font-size: 9px !important;
  line-height: 1.25 !important;
  padding: 1px 6px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: rgba(46, 65, 80, 0.78) !important;
}

.leaflet-control-attribution a {
  color: rgba(30, 78, 110, 0.9) !important;
}

.leaflet-attribution-flag {
  width: 9px !important;
  height: 6px !important;
}

/* Botão "Zoom por área" (lupa) — substitui o +/- nativo do Leaflet.
   Mesmo padrão dos pílulas flutuantes: halo cream externo (background +
   border sage suave) + pílula navy interna (via background-clip + dois
   gradientes / aqui simulamos com box-shadow inset). */
.zoom-area-button {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 740;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(15, 36, 22, 0.18);
  border-radius: 10px;
  color: var(--brand-forest-deep);
  cursor: pointer;
  line-height: 1;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 4px 14px rgba(15, 36, 22, 0.32);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.zoom-area-button > svg {
  position: relative;
  z-index: 1;
}

.zoom-area-button:hover {
  background: #ffffff;
  border-color: rgba(15, 36, 22, 0.32);
  color: var(--brand-forest);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 6px 18px rgba(15, 36, 22, 0.4);
}

.zoom-area-button:focus-visible {
  outline: 2px solid rgba(111, 175, 123, 0.55);
  outline-offset: 2px;
}

.zoom-area-button.is-active {
  background: var(--brand-forest-deep);
  border-color: var(--brand-forest-deep);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(15, 36, 22, 0.24);
}

.zoom-area-button svg,
.zoom-area-button path {
  fill: currentColor;
}

/* Botões flutuantes do mapa (Filtros, RASTER, Camadas) — refinados:
   surface branca sutil, ícone/texto em forest-deep, borda fina, sombra discreta.
   Sem o gradient navy "puffy" que dominava visualmente o mapa. */
.layer-card-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  border: 1px solid rgba(15, 36, 22, 0.18);
  border-radius: 10px;
  background: #ffffff;
  color: var(--brand-forest-deep);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 12px;
  cursor: pointer;
  line-height: 1;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 4px 14px rgba(15, 36, 22, 0.32);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.layer-card-toggle:hover {
  background: #ffffff;
  border-color: rgba(15, 36, 22, 0.32);
  color: var(--brand-forest);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 6px 18px rgba(15, 36, 22, 0.4);
}

.layer-card-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-forest-deep);
}

.layer-card-toggle-icon svg,
.layer-card-toggle-icon path {
  fill: currentColor;
}

.layer-card.is-collapsed .layer-card-toggle-label {
  display: none;
}

/* Quando colapsado, BASES vira square ícone (mesma família do zoom-area-button) */
.layer-card.is-collapsed .layer-card-toggle {
  width: 34px;
  height: 34px;
  padding: 0;
  gap: 0;
}

.layer-card:not(.is-collapsed) .layer-card-toggle {
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border-color: transparent;
  padding: 2px 4px;
  font-size: 0.64rem;
  color: var(--brand-forest);
  letter-spacing: 0.09em;
}

.layer-card:not(.is-collapsed) .layer-card-toggle:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(30, 61, 43, 0.12);
}

.layer-card-body {
  display: grid;
  gap: 6px;
}

.layer-card-body[hidden] {
  display: none;
}

.stacked-switch {
  display: grid;
  gap: 4px;
}

.layer-button,
.layer-toggle-button {
  border: 1px solid rgba(30, 61, 43, 0.14);
  cursor: pointer;
  padding: 4px 9px;
  min-height: 26px;
  border-radius: 9px;
  background: #ffffff;
  color: #0d1411;
  font-weight: 700;
  font-size: 0.66rem;
  line-height: 1.2;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.layer-toggle-button:disabled,
.layer-toggle-button.is-disabled {
  cursor: default;
  opacity: 0.5;
}

.layer-button.is-active,
.layer-toggle-button.is-active {
  background: linear-gradient(180deg, #2a4f37 0%, #1e3d2b 100%);
  color: #ffffff;
  border-color: rgba(15, 36, 22, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 3px 10px rgba(15, 36, 22, 0.22);
}

.layer-opacity {
  display: grid;
  gap: 3px;
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid rgba(45, 91, 63, 0.12);
  color: var(--muted);
  font-size: 0.68rem;
}

.layer-opacity span {
  letter-spacing: 0.03em;
}

.layer-opacity input {
  padding: 0;
}

.side-head h3,
.feature-title {
  display: block;
  margin-top: 6px;
  font-size: 1rem;
}

.side-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}.tool-card .danger-button {
  margin-left: 4px;
}

/* Scale-card — alinhado com a identidade forest + canvas. Surface clara
   sutil, borda fina forest, sombra elegante. Título em forest-deep. */
.scale-card {
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  /* Mais estreito e discreto — legenda, não painel. A paleta é protegida por
     min-width no .legend-gradient-wrap, então estreitar o card não a encolhe. */
  width: clamp(244px, 20vw, 300px);
  padding: 9px 9px;
  display: grid;
  gap: 7px;
  border-radius: 13px;
  border: 1px solid rgba(30, 61, 43, 0.12);
  background: #e7ebe1;
  box-shadow: 0 8px 22px rgba(15, 36, 22, 0.18);
}

.scale-card-head .eyebrow {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}

.scale-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.scale-card-head strong {
  font-size: 0.72rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--brand-forest-deep);
  font-weight: 600;
}

/* Botão Resetar — pílula forest-deep gradient, mesma família do "Entrar". */
.legend-filter-reset {
  background: linear-gradient(180deg, #2a4f37 0%, #1e3d2b 100%);
  border: 1px solid rgba(15, 36, 22, 0.55);
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 7px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 6px rgba(15, 36, 22, 0.22);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.legend-filter-reset:hover {
  background: linear-gradient(180deg, #356244 0%, #284a36 100%);
  border-color: rgba(15, 36, 22, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 3px 10px rgba(15, 36, 22, 0.3);
}

.scale-card-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  /* gap 13px: o thumb (14px, centrado nas pontas da paleta) projeta 7px pra fora
     de cada lado. gap 13 > 7 = ~6px de folga entre o thumb e os números min/max. */
  gap: 13px;
  color: var(--brand-forest);
  font-size: 0.64rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Wrapper que sobrepõe gradient + slider duplo. O slider min/max usa dois
   <input type="range"> com track transparente; só os thumbs ficam clicáveis.
   min-width PROTEGE a largura da paleta: estreitar o card encolhe as margens,
   não a barra de cor. */
.legend-gradient-wrap {
  position: relative;
  height: 20px;
  min-width: 162px;
  display: flex;
  align-items: center;
}

.legend-gradient {
  height: 14px;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #dbeef8, #78c8d4, #4c8fd4, #144f93);
  border: 1px solid rgba(18, 48, 76, 0.08);
  pointer-events: none;
}

/* Máscaras de "fora do intervalo": escurecem o gradient nas pontas que o
   filtro min/max está excluindo. Mesma altura/posição vertical do gradient
   (14px centrado no wrap de 22px). z-index 2 = acima do gradient, abaixo dos
   thumbs (input z-index 3). Largura controlada por JS (updateReadout). */
.legend-mask {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  width: 0;
  background: rgba(231, 235, 225, 0.8);
  pointer-events: none;
  z-index: 2;
  transition: width 60ms linear;
}
.legend-mask-left {
  left: 0;
  border-radius: 999px 0 0 999px;
}
.legend-mask-right {
  right: 0;
  border-radius: 0 999px 999px 0;
}

/* Inputs range absolutos por cima do gradient — track e progress invisíveis,
   só os thumbs ficam visíveis e clicáveis. */
.legend-filter-input {
  position: absolute;
  /* Estende a track em meio-thumb (7px) de cada lado pra o CENTRO do thumb (14px)
     alinhar com as pontas do gradient. Antes (-2px) o thumb ficava ~7px pra
     dentro, fazendo o handle apontar pra cor errada. */
  left: -7px;
  right: -7px;
  width: calc(100% + 14px);
  height: 22px;
  margin: 0;
  background: transparent !important;
  background-color: transparent !important;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  z-index: 3;
  outline: none;
  /* accent-color desabilita totalmente a cor padrão do browser nos pseudo-elementos
     do range — Chrome/Edge passam a respeitar nossas regras de track/progress. */
  accent-color: transparent;
}

/* Outline + background = transparente em TODOS os estados.
   :active é crítico — durante o drag o WebKit pinta uma "trilha cinza"
   no input que cobria o gradient (efeito "paleta lavada"). */
.legend-filter-input:focus,
.legend-filter-input:focus-visible,
.legend-filter-input:active,
.legend-filter-input:hover {
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Foco acessível só no thumb (não no input inteiro). */
.legend-filter-input:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 2px 6px rgba(15, 36, 22, 0.32),
    0 0 0 3px rgba(46, 107, 63, 0.4);
}
.legend-filter-input:focus-visible::-moz-range-thumb {
  box-shadow:
    0 2px 6px rgba(15, 36, 22, 0.32),
    0 0 0 3px rgba(46, 107, 63, 0.4);
}

/* Tracks SEMPRE transparentes — :hover/:active/:focus do input não podem
   pintar nada por cima do gradient. `!important` pra vencer styles default
   do user-agent que aparecem em alguns navegadores durante drag. */
.legend-filter-input::-webkit-slider-runnable-track,
.legend-filter-input:hover::-webkit-slider-runnable-track,
.legend-filter-input:active::-webkit-slider-runnable-track,
.legend-filter-input:focus::-webkit-slider-runnable-track {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  height: 14px;
}

.legend-filter-input::-moz-range-track,
.legend-filter-input:hover::-moz-range-track,
.legend-filter-input:active::-moz-range-track,
.legend-filter-input:focus::-moz-range-track {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  height: 14px;
}

/* CRÍTICO: Firefox preenche por default ::-moz-range-progress com cor de
   accent, fazendo o gradient ficar "lavado" entre o min e o thumb.
   Forçar transparente preserva o gradient. */
.legend-filter-input::-moz-range-progress {
  background: transparent;
  height: 14px;
}

.legend-filter-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--brand-forest-deep);
  box-shadow: 0 2px 6px rgba(15, 36, 22, 0.32);
  cursor: grab;
  margin-top: 0;
}

.legend-filter-input::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.legend-filter-input::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--brand-forest-deep);
  box-shadow: 0 2px 6px rgba(15, 36, 22, 0.32);
  cursor: grab;
}

.legend-filter-input:disabled::-webkit-slider-thumb,
.legend-filter-input:disabled::-moz-range-thumb {
  opacity: 0.4;
  cursor: not-allowed;
}

.scale-card-filter-readout {
  font-size: 0.58rem;
  color: var(--brand-forest);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-style: italic;
  opacity: 0.78;
}

/* Quando intervalo completo (sem filter), esconde a linha do readout
   inteira pra economizar altura do card. */
.scale-card-filter-readout.is-empty {
  display: none;
}


.inline-raster-legend {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(31, 82, 146, 0.18);
  background: linear-gradient(180deg, rgba(245, 249, 255, 0.98), rgba(240, 248, 255, 0.94));
}

.inline-raster-legend-head {
  display: grid;
  gap: 2px;
}

.inline-raster-legend-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 0.72rem;
  color: var(--muted);
}

.inline-legend-gradient {
  height: 12px;
}

.leaflet-container {
  font-family: var(--font-sans);
}

.leaflet-popup-content-wrapper {
  border-radius: 16px;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  box-shadow: none;
}

.feature-attribute-popup .leaflet-popup-content {
  margin: 12px 14px;
  min-width: 240px;
}

.feature-popup {
  display: grid;
  gap: 8px;
  color: #142b45;
}

.feature-popup-title {
  font-size: 0.92rem;
  line-height: 1.2;
}

.feature-popup small {
  color: #5a718b;
}

.feature-popup-grid {
  display: grid;
  gap: 6px;
}

.feature-popup-row {
  display: grid;
  grid-template-columns: minmax(76px, 0.42fr) minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  border-top: 1px solid rgba(45, 91, 63, 0.12);
  padding-top: 6px;
}

.feature-popup-row span {
  color: #5a718b;
  font-size: 0.68rem;
}

.feature-popup-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.76rem;
}

.feature-popup-empty {
  margin: 0;
  color: #5a718b;
}

.side-card {
  display: grid;
  gap: 6px;
}

.side-card-body {
  display: grid;
  gap: 8px;
  padding-top: 4px;
  min-width: 0;
}

.side-card.is-collapsed .side-card-body {
  display: none;
}

.side-card.is-collapsed {
  gap: 0;
}

.dashboard-card {
  min-height: 0;
}

.metrics-card,
.feature-card,
.sources-card {
  align-content: start;
}

.side-head {
  align-items: flex-start;
  padding-bottom: 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(45, 91, 63, 0.12);
}

.side-head h3 {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.18;
}

/* Botão X compacto pra fechar o card Indicadores — substitui o antigo "Fechar".
   Tamanho 32×32 atende WCAG 2.5.5 AA (24px mínimo) com folga, mantém peso
   visual compacto no header. */
.dismiss-x-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(30, 61, 43, 0.14);
  border-radius: 8px;
  background: #ffffff;
  color: var(--brand-forest-deep);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.dismiss-x-button:hover {
  background: rgba(30, 61, 43, 0.06);
  border-color: rgba(30, 61, 43, 0.3);
  color: var(--brand-forest);
}

.dismiss-x-button:focus-visible {
  outline: 2px solid rgba(111, 175, 123, 0.55);
  outline-offset: 2px;
}

/* Título principal do Indicadores — Inter, alinhado com a tipografia do app. */
.side-head h3.dashboard-title-lg {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: var(--brand-forest-deep);
}

.side-copy {
  margin-top: -6px;
  font-size: 0.74rem;
  line-height: 1.34;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.side-head-actions .ghost-button,
.side-head-actions .compact-button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 0.72rem;
}

.side-head-actions {
  justify-content: flex-end;
}

.bar-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  min-height: 132px;
  min-width: 0;
}

.bar-chart.is-grouped-chart {
  display: block;
  min-height: 210px;
}

.metric-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  min-width: 0;
  margin-top: 8px;
  justify-content: flex-start;
}

.metric-legend-below {
  gap: 7px 16px;
  margin-bottom: 0;
  padding-left: 52px;
}

.metric-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #385f80;
  font-size: 0.66rem;
  font-weight: 800;
}

.metric-legend-item i {
  width: 18px;
  height: 8px;
  border-radius: 2px;
  background: #8aa3bb;
}

.metric-legend-item.metric-prec_agera5 i {
  background: #1d6bb0;
}

.metric-legend-item.metric-evapot_agera5 i {
  background: #c47a2e;
}

.metric-legend-item.metric-evareal_sat i {
  background: #2e6b3f;
}

.metric-legend-item.metric-etr_p i {
  background: #7c3aed;
}

.metric-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 4px;
}

.metric-toggle-group.hidden {
  display: none;
}

.metric-toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(24, 77, 136, 0.18);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.66rem;
  font-weight: 700;
  color: #86a6ba;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease;
  opacity: 0.55;
}

.metric-toggle-chip:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(24, 77, 136, 0.3);
}

.metric-toggle-chip.is-active {
  opacity: 1;
  color: #1f3d5b;
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.96), rgba(232, 241, 248, 0.88));
  border-color: rgba(24, 77, 136, 0.32);
}

.metric-toggle-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8aa3bb;
}

.metric-toggle-chip.metric-prec_agera5 .metric-toggle-dot {
  background: #1d6bb0;
}

.metric-toggle-chip.metric-evapot_agera5 .metric-toggle-dot {
  background: #c47a2e;
}

.metric-toggle-chip.metric-evareal_sat .metric-toggle-dot {
  background: #2e6b3f;
}

.metric-toggle-chip.metric-etr_p .metric-toggle-dot {
  background: #7c3aed;
}

.dashboard-card .compact-note {
  padding: 12px 13px;
}

.dashboard-card .compact-note p {
  margin-bottom: 0;
}

.bar-month {
  display: grid;
  gap: 5px;
  text-align: center;
  min-width: 0;
}

.bar-month.is-grouped {
  gap: 6px;
}

.column-chart-frame {
  position: relative;
  min-height: 178px;
  padding: 14px 12px 26px 44px;
  border: 1px solid rgba(30, 61, 43, 0.10);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.column-chart-bars {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(22px, 1fr));
  gap: 10px;
  align-items: end;
  min-height: 132px;
  padding-top: 9px;
  box-sizing: border-box;
}

.column-grid-lines {
  position: absolute;
  inset: 25px 14px 43px 52px;
  pointer-events: none;
}

.column-grid-lines i {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(102, 126, 151, 0.28);
}

.column-grid-lines i:nth-child(1) {
  bottom: 0;
}

.column-grid-lines i:nth-child(2) {
  bottom: 25%;
}

.column-grid-lines i:nth-child(3) {
  bottom: 50%;
}

.column-grid-lines i:nth-child(4) {
  bottom: 75%;
}

.column-grid-lines i:nth-child(5) {
  bottom: 100%;
}

.column-y-title {
  position: absolute;
  left: 8px;
  top: 2px;
  z-index: 2;
  color: var(--brand-forest);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.column-y-axis {
  position: absolute;
  top: 14px;
  bottom: 26px;
  left: 6px;
  width: 34px;
  z-index: 2;
  color: var(--brand-forest);
  font-size: 0.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.column-y-axis span {
  position: absolute;
  right: 5px;
  transform: translateY(50%);
  line-height: 1;
}

.column-x-label {
  position: absolute;
  left: 52px;
  right: 14px;
  bottom: 7px;
  z-index: 2;
  text-align: center;
  color: #0f2236;
  font-size: 0.68rem;
  font-weight: 900;
}

.bar-group {
  height: 126px;
  display: grid;
  grid-template-columns: repeat(3, minmax(5px, 9px));
  gap: 4px;
  align-items: end;
  justify-content: center;
  padding: 0;
  background: transparent;
}

.column-chart-frame.has-2-metrics .bar-group {
  grid-template-columns: repeat(2, minmax(6px, 10px));
}

.column-chart-frame.has-1-metric .bar-group {
  grid-template-columns: minmax(7px, 12px);
}

.bar-track {
  height: 62px;
  padding: 0 3px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid rgba(31, 82, 146, 0.14);
  background: linear-gradient(180deg, rgba(242, 247, 252, 0.78), rgba(226, 236, 246, 0.52));
}

.bar-track-grouped {
  width: 100%;
  height: 124px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.bar-month span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #2f5575;
}

.bar-month.is-grouped span {
  color: #122f4e;
  font-size: 0.62rem;
  font-weight: 800;
}

.bar-value {
  display: block;
  min-height: 24px;
  color: #4c6d89;
  font-size: 0.62rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.bar-fill {
  width: 100%;
  min-height: 10px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #44d1b7 0%, #297fe0 100%);
}

.bar-track-grouped .bar-fill {
  min-height: 7px;
  border-radius: 2px 2px 0 0;
}

/* Paleta SEMÂNTICA pras 3 métricas do gráfico Indicadores:
   - Precipitação = AZUL (água que cai)
   - ET Potencial  = ÂMBAR/MARROM (demanda climática — calor/sol)
   - ET Real       = FOREST GREEN (água efetivamente usada pelas plantas)
   Alinhado com a identidade forest do app + paleta dos rasters PPT/ETP/ETR. */
.bar-fill.metric-prec_agera5 {
  background: linear-gradient(180deg, #4c9adb 0%, #1d6bb0 100%);
}

.bar-fill.metric-evapot_agera5 {
  background: linear-gradient(180deg, #f0b860 0%, #c47a2e 100%);
}

.bar-fill.metric-evareal_sat {
  background: linear-gradient(180deg, #6dc46b 0%, #2e6b3f 100%);
}

/* ETR/PREC (índice adimensional) — roxo (provisório). */
.bar-fill.metric-etr_p {
  background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
}

/* Gráfico em LINHA (modo Análise Rápida).
   O SVG respeita o mesmo padding do frame que as barras usam — assim os
   labels mm (Y) e Jan/Fev/... (X) ficam VISÍVEIS, sem o SVG cobrindo. */
.column-chart-frame.is-line-chart .line-chart-svg {
  position: absolute;
  /* Match com .column-chart-frame padding (14px top, 12px right, 26px bottom,
     44px left). SVG fica preso na área útil entre eixos. */
  top: 14px;
  right: 12px;
  bottom: 26px;
  left: 44px;
  width: auto;
  height: auto;
  pointer-events: auto;
  overflow: visible;
}

/* X-axis (Jan..Dez) abaixo do SVG. */
.column-chart-frame.is-line-chart .line-chart-xaxis {
  position: absolute;
  bottom: 6px;
  left: 44px;
  right: 12px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--brand-forest);
  letter-spacing: 0.02em;
  text-align: center;
  pointer-events: none;
}

.column-chart-frame.is-line-chart .column-chart-bars {
  display: none; /* SVG substitui as barras quando line-chart está ativo */
}

/* No modo line-chart, esconde também o .column-x-label e .column-grid-lines
   herdados (gráfico de barras renderiza eles) pra não duplicar visualmente. */
.column-chart-frame.is-line-chart .column-x-label,
.column-chart-frame.is-line-chart .column-grid-lines {
  display: none;
}

.bar-month.is-missing .bar-track {
  background: rgba(220, 229, 239, 0.5);
}

.bar-month.is-missing .bar-fill {
  min-height: 0;
  background: transparent;
}

.bar-month.is-zero-placeholder .bar-track {
  background: rgba(226, 232, 240, 0.72);
  border-color: rgba(116, 137, 158, 0.2);
}

.bar-month.is-zero-placeholder .bar-fill {
  background: linear-gradient(180deg, #c9d3df 0%, #9fabba 100%);
}

.bar-track-grouped.is-zero-placeholder .bar-fill {
  background: linear-gradient(180deg, #d3dbe5 0%, #a8b4c2 100%);
}

.bar-month.is-zero-placeholder .bar-value,
.bar-month.is-zero-placeholder span {
  color: #6f7f91;
}

.bar-month.is-active .bar-track {
  background: linear-gradient(180deg, rgba(194, 231, 255, 0.84), rgba(205, 247, 229, 0.82));
  border-color: rgba(76, 127, 163, 0.18);
}

.bar-month.is-active .bar-fill {
  background: linear-gradient(180deg, #21c6a6 0%, #0f5fc4 100%);
}

.bar-month.is-active.is-zero-placeholder .bar-track {
  background: rgba(218, 226, 235, 0.82);
  border-color: rgba(89, 109, 132, 0.24);
}

.bar-month.is-active.is-zero-placeholder .bar-fill {
  background: linear-gradient(180deg, #bcc8d6 0%, #8f9cad 100%);
}

.metric-grid,
.analysis-grid,
.property-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.metric-card,
.analysis-metric,
.property-row {
  padding: 10px 11px;
  border: 1px solid rgba(31, 82, 146, 0.22);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(246, 249, 252, 0.996) 0%, rgba(238, 244, 249, 0.992) 100%);
  box-shadow: none;
}

.metric-card strong,
.analysis-metric strong {
  display: block;
  margin-top: 5px;
  font-size: 0.84rem;
  line-height: 1.22;
  color: #0c2f53;
}

.metric-card span,
.analysis-metric span,
.property-key {
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #4c6d89;
}

.feature-details,
.feature-meta,
.analysis-block {
  display: grid;
  gap: 10px;
}

.feature-details {
  min-height: 88px;
  max-height: none;
  overflow: visible;
}

.feature-card .property-grid {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.feature-card .property-row {
  display: grid;
  grid-template-columns: minmax(82px, 0.38fr) minmax(0, 1fr);
  align-items: start;
  justify-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid rgba(45, 91, 63, 0.1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.feature-card .property-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.feature-card .property-row:last-child {
  padding-bottom: 0;
}

.feature-card .property-row span:last-child {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
  color: #143656;
  font-weight: 600;
}

.monthly-data-table-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(58, 96, 129, 0.16);
}

.monthly-data-table-head {
  display: grid;
  gap: 3px;
  margin-bottom: 8px;
}

.monthly-data-table-head strong {
  color: #0e2a45;
  font-size: 0.8rem;
}

.monthly-data-table-wrap {
  max-width: 100%;
  overflow-x: hidden;
  border: 1px solid rgba(45, 88, 128, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
}

.monthly-data-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.7rem;
}

.monthly-data-table th,
.monthly-data-table td {
  padding: 7px 6px;
  border-bottom: 1px solid rgba(50, 87, 124, 0.12);
  text-align: right;
  white-space: nowrap;
}

.monthly-data-table th {
  color: #416482;
  font-weight: 800;
}

.monthly-data-table thead th {
  background: rgba(221, 237, 252, 0.58);
}

.monthly-data-table th:nth-child(1),
.monthly-data-table td:nth-child(1) {
  width: 14%;
}

.monthly-data-table th:nth-child(2),
.monthly-data-table td:nth-child(2),
.monthly-data-table th:nth-child(3),
.monthly-data-table td:nth-child(3),
.monthly-data-table th:nth-child(4),
.monthly-data-table td:nth-child(4) {
  width: 28.666%;
}

.monthly-data-table th:first-child,
.monthly-data-table td:first-child {
  text-align: left;
}

.monthly-data-table tbody tr:last-child th,
.monthly-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.feature-card .compact-note {
  padding: 12px 13px;
}

.feature-card .feature-meta {
  gap: 6px;
}

.feature-card .feature-meta p {
  margin: 0;
}

.compact-analysis-grid .analysis-metric strong {
  font-size: 0.8rem;
  line-height: 1.32;
}

.bar-chart > .state-card,
.metric-grid > .state-card,
.feature-details > .state-card {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}.status-chip,
.source-chip {
  padding: 5px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(235, 243, 250, 0.995), rgba(223, 235, 244, 0.99));
  border: 1px solid rgba(31, 82, 146, 0.24);
  color: #315776;
  font-weight: 700;
}.source-chip.upload {
  background: rgba(193, 220, 255, 0.46);
  color: #245c9c;
}

.source-chip.drawn {
  background: rgba(193, 234, 221, 0.78);
  color: #1f6b52;
}

.property-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

.property-row {
  gap: 4px;
  align-items: start;
}

.property-key {
  color: #5b7892;
}

.info-note {
  padding: 8px 10px;
  border-radius: 14px;
  background: #eef5ff;
  border: 1px solid rgba(31, 82, 146, 0.18);
  color: #234f82;
  overflow-wrap: anywhere;
}

.state-card {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border-radius: 18px;
  border: 1px solid rgba(45, 91, 63, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 248, 255, 0.96) 58%, rgba(238, 248, 243, 0.95) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.58),
    0 8px 18px rgba(27, 48, 43, 0.08);
  overflow: hidden;
  min-width: 0;
}

.state-card.is-compact {
  padding: 11px 12px;
}

.state-card.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.64) 50%, transparent 78%);
  animation: state-shimmer 1.8s ease-in-out infinite;
}

.state-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(21, 96, 207, 0.1);
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.state-title {
  font-size: 0.86rem;
  line-height: 1.28;
}

.state-copy {
  margin: 0;
  color: #5a768f;
  font-size: 0.74rem;
  line-height: 1.38;
}

.dashboard-card .state-card,
.metrics-card .state-card,
.feature-card .state-card,
.sources-card .state-card {
  width: 100%;
  box-sizing: border-box;
}

.dashboard-card .state-card {
  min-height: 118px;
}

.dashboard-card .state-copy,
.metrics-card .state-copy,
.feature-card .state-copy,
.sources-card .state-copy {
  font-size: 0.72rem;
  line-height: 1.34;
}

@keyframes state-shimmer {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

#map-panel,
#dashboard-card,
#feature-card,
#sources-card {
  scroll-margin-top: 108px;
}

.layer-list {
  display: grid;
  gap: 8px;
  max-height: none;
  overflow: visible;
}

.source-bank-summary {
  display: grid;
  gap: 4px;
}

.source-bank-card {
  display: grid;
  gap: 4px;
  padding: 7px 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f1f7fd 0%, #e8f2fb 52%, #edf8f2 100%);
  border: 1px solid rgba(45, 91, 63, 0.2);
}

.source-bank-card strong {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
}

.source-bank-card p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.42;
  font-size: 0.76rem;
}

.source-item {
  padding: 8px 9px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(31, 82, 146, 0.24);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(228, 237, 245, 0.998), rgba(218, 229, 239, 0.992));
  overflow-wrap: anywhere;
}

.source-item.is-hidden {
  opacity: 0.72;
  background: #eef5ff;
}

.source-main {
  display: grid;
  gap: 2px;
}

.source-item strong {
  display: block;
  margin-bottom: 1px;
  font-size: 0.74rem;
}

.source-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.32;
}

.source-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.summary-chip {
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid rgba(31, 82, 146, 0.16);
  background: rgba(229, 236, 243, 0.78);
  color: #385874;
  font-size: 0.61rem;
  font-weight: 700;
}

.source-actions .ghost-button,
.source-actions .compact-button {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 0.66rem;
  border-color: rgba(38, 89, 145, 0.18);
  background: rgba(229, 238, 246, 0.92);
  color: #18476d;
}

.mobile-section-nav {
  display: none;
}

@media (max-width: 1360px) {
  .workspace-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  #admin-profile-panel [data-admin-profile-sheet] .management-overview-grid,
  #admin-profile-panel [data-admin-profile-sheet] .management-shell-grid,
  #admin-profile-panel [data-admin-profile-sheet] .management-assets-grid,
  .management-stat-grid,
  .client-files-grid {
    grid-template-columns: 1fr;
  }

  #admin-profile-panel [data-admin-profile-sheet] .management-context-banner,
  .management-two-up,
  .client-account-summary {
    grid-template-columns: 1fr;
  }

  .client-files-shell,
  .admin-panel-stat-grid {
    grid-template-columns: 1fr;
  }

  .admin-panel-hero {
    flex-direction: column;
  }

  .admin-panel-header-code,
  .admin-panel-detail-actions,
  .client-files-head-actions {
    justify-items: start;
  }

  .admin-panel-detail-badges {
    justify-content: flex-start;
  }

  .admin-client-file-card-body {
    grid-template-columns: 1fr;
  }

  .insights-column:not(.is-selection-popup) {
    position: static;
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    margin-top: 12px;
  }

  .insights-column.is-selection-popup {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 680;
    width: clamp(580px, 40vw, 760px);
    max-height: calc(100% - 32px);
    overflow: auto;
    padding: 14px;
    transform: translateY(-50%);
    border: 1px solid rgba(19, 58, 111, 0.24);
    border-radius: 24px;
    background: rgba(252, 254, 255, 0.998);
    box-shadow: 0 8px 18px rgba(27, 48, 43, 0.08);
    margin-top: 0;
  }

  .insights-column.is-selection-popup > * {
    grid-column: auto;
  }

  .feature-card,
  .sources-card {
    grid-column: span 2;
  }

  .insights-column.is-selection-popup {
    --selection-popup-width: clamp(580px, 40vw, 760px);
    position: absolute;
    top: 50%;
    right: 10px;
    width: var(--selection-popup-width);
    max-height: calc(100% - 32px);
    grid-template-columns: 1fr;
    overflow: auto;
    padding: 12px;
    transform: translateY(-50%);
    margin-top: 0;
    border: 1px solid rgba(19, 58, 111, 0.24);
    background: rgba(252, 254, 255, 0.998);
    box-shadow: 0 8px 18px rgba(27, 48, 43, 0.08);
  }

}

@media (max-width: 1120px) {
  /* Mobile/tablet: a foto continua full-bleed por trás, card centralizado.
     A única adaptação é ajustar o padding do card pra não esbarrar nas bordas. */
  .landing-auth-pane {
    padding: 20px 14px;
  }

  .landing-auth-card {
    padding: 28px 24px 22px;
  }

  .workspace-header {
    padding: 0 3px;
  }

  .workspace-topbar {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
    min-height: 0;
    padding: 8px;
  }

  .workspace-right-cluster {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .workspace-nav-cluster {
    flex-wrap: wrap;
    gap: 6px;
  }

  .workspace-view-tabs {
    justify-self: flex-start;
  }

  .workspace-head-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: none;
  }

  .profile-card {
    width: auto;
    max-width: 100%;
  }

  .profile-menu-shell {
    width: 100%;
  }

  .profile-menu {
    left: 0;
    right: auto;
    width: min(100%, 360px);
  }

  .insights-column:not(.is-selection-popup) {
    position: static;
    width: auto;
    grid-template-columns: 1fr;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .insights-column.is-selection-popup {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 680;
    width: min(500px, calc(100% - 24px));
    max-height: calc(100% - 32px);
    overflow: auto;
    padding: 12px;
    transform: translateY(-50%);
    border: 1px solid rgba(19, 58, 111, 0.24);
    border-radius: 22px;
    background: rgba(252, 254, 255, 0.998);
    box-shadow: 0 8px 18px rgba(27, 48, 43, 0.08);
  }

  .feature-card,
  .sources-card {
    grid-column: auto;
  }

  .insights-column.is-selection-popup {
    --selection-popup-width: min(500px, calc(100% - 20px));
    position: absolute;
    top: 50%;
    right: 10px;
    width: var(--selection-popup-width);
    max-height: calc(100% - 32px);
    grid-template-columns: 1fr;
    overflow: auto;
    padding: 12px;
    transform: translateY(-50%);
    border: 1px solid rgba(19, 58, 111, 0.24);
    background: rgba(252, 254, 255, 0.998);
    box-shadow: 0 8px 18px rgba(27, 48, 43, 0.08);
  }

  .context-breadcrumb,
  .active-summary-strip {
    gap: 8px;
  }
}

@media (max-width: 760px) {
  .auth-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .screen {
    min-height: auto;
  }

  .app-shell {
    padding: 10px;
  }

  .landing-visual-pane,
  .landing-auth-pane,
  .workspace-shell {
    border-radius: 22px;
  }

  .landing-auth-pane,
  .workspace-shell {
    padding: 18px;
  }

  .workspace-management-panel {
    padding: 0 8px 8px;
  }

  .workspace-management-shell,
  .workspace-management-card {
    padding: 14px;
    border-radius: 18px;
  }

  .workspace-shell {
    padding-bottom: 96px;
  }

  .landing-auth-header h1,
  .workspace-support-title {
    font-size: 0.95rem;
  }

  .info-grid,
  .metric-grid,
  .analysis-grid {
    grid-template-columns: 1fr;
  }

  .bar-chart {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bar-chart.is-grouped-chart {
    min-height: 196px;
  }

  .column-chart-frame {
    min-height: 166px;
    padding: 15px 10px 30px 46px;
  }

  .column-chart-bars {
    grid-template-columns: repeat(12, minmax(14px, 1fr));
    gap: 6px;
    min-height: 122px;
  }

  .column-grid-lines {
    inset: 24px 10px 42px 46px;
  }

  .column-y-axis {
    top: 24px;
    bottom: 42px;
    width: 36px;
  }

  .column-x-label {
    left: 46px;
    right: 10px;
  }

  .bar-group {
    height: 118px;
    grid-template-columns: repeat(3, minmax(4px, 7px));
    gap: 3px;
  }

  .column-chart-frame.has-2-metrics .bar-group {
    grid-template-columns: repeat(2, minmax(5px, 8px));
  }

  .column-chart-frame.has-1-metric .bar-group {
    grid-template-columns: minmax(6px, 10px);
  }

  .bar-track-grouped {
    height: 116px;
  }

  .metric-legend-below {
    padding-left: 0;
  }

  .landing-visual-pane,
  .landing-visual-surface {
    min-height: 320px;
  }

  .landing-auth-inner {
    width: min(100%, 100%);
  }

  .context-breadcrumb,
  .active-summary-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .context-breadcrumb::-webkit-scrollbar,
  .active-summary-strip::-webkit-scrollbar {
    display: none;
  }

  .breadcrumb-pill,
  .summary-pill {
    min-width: max-content;
  }

  .map-stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "filters"
      "raster"
      "map"
      "tools"
      "layers";
    gap: 12px;
    min-height: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }

  .floating-card {
    position: static;
    z-index: auto;
  }

  .filter-stack,
  .raster-head-card,
  .layer-card,
  .tool-card {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .filter-stack {
    grid-area: filters;
  }

  .map-stage.is-filter-panel-open .map-filter-backdrop {
    display: block;
  }

  .filter-stack {
    position: relative;
    z-index: 650;
    top: auto;
    left: auto;
  }

  .filter-toggle {
    width: 100%;
  }

  .filter-panel {
    width: 100%;
    max-height: 360px;
  }

  .raster-head-card {
    grid-area: raster;
    transform: none;
  }

  #map {
    grid-area: map;
    min-height: 480px;
    height: 480px;
    border-radius: 24px;
    border: 1px solid rgba(45, 91, 63, 0.14);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      0 20px 40px rgba(27, 48, 43, 0.08);
  }

  .tool-card {
    grid-area: tools;
    max-width: none;
  }

  .layer-card {
    grid-area: layers;
  }

  .calendar-compact-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scale-card {
    width: min(300px, calc(100% - 120px));
    bottom: 14px;
  }

  .map-loading-state {
    position: absolute;
    inset: 0;
    padding: 18px;
  }

  .mobile-section-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 950;
    padding: 8px;
    border-radius: 22px;
    border: 1px solid rgba(45, 91, 63, 0.16);
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
      0 18px 34px rgba(27, 48, 43, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.68);
    backdrop-filter: none;
  }

  .mobile-section-nav button {
    border: 0;
    min-width: 0;
    padding: 10px 8px;
    border-radius: 14px;
    background: transparent;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .mobile-section-nav button.is-active {
    background: linear-gradient(135deg, #d9ebff 0%, #dff7ef 100%);
    color: #125d7a;
    box-shadow: inset 0 0 0 1px rgba(21, 96, 207, 0.12);
  }
}

/* Admin / files contrast pass */
#admin-profile-panel [data-admin-profile-sheet] .ghost-button,
#admin-profile-panel [data-admin-profile-sheet] .compact-button {
  background: linear-gradient(180deg, rgba(225, 234, 243, 0.99), rgba(208, 223, 236, 0.98));
  border: 1px solid rgba(28, 82, 143, 0.42);
  color: #0c345a;
  box-shadow: 0 6px 14px rgba(11, 44, 82, 0.08);
}

#admin-profile-panel [data-admin-profile-sheet] .ghost-button:hover,
#admin-profile-panel [data-admin-profile-sheet] .compact-button:hover {
  background: linear-gradient(180deg, rgba(232, 239, 246, 0.995), rgba(216, 229, 240, 0.99));
  box-shadow: 0 8px 16px rgba(11, 44, 82, 0.1);
}

#admin-profile-panel [data-admin-profile-sheet] .primary-button {
  background: linear-gradient(135deg, #1c74eb 0%, #0f5fcb 60%, #0b4f9f 100%);
}

#admin-profile-panel [data-admin-profile-sheet] .workspace-chip,
#admin-profile-panel [data-admin-profile-sheet] .status-chip,
#admin-profile-panel [data-admin-profile-sheet] .source-chip,
#admin-profile-panel [data-admin-profile-sheet] .summary-chip {
  box-shadow: 0 4px 10px rgba(10, 33, 60, 0.06);
}#admin-profile-panel [data-admin-profile-sheet] .management-assets-section strong,
#admin-profile-panel [data-admin-profile-sheet] .management-client-card strong {
  color: #1b302b;
}

#admin-profile-panel [data-admin-profile-sheet] .management-assets-section p,
#admin-profile-panel [data-admin-profile-sheet] .management-client-card small,
#admin-profile-panel [data-admin-profile-sheet] .management-pane-copy,
#admin-profile-panel [data-admin-profile-sheet] .management-pane-note,
#admin-profile-panel [data-admin-profile-sheet] .management-assets-copy,
#admin-profile-panel [data-admin-profile-sheet] .management-footnote {
  color: #5a7068;
}

/* === Admin panel + file management — flat dark redesign (final) === */

.admin-panel-flat {
  position: relative;
  background: var(--surface-strong);
  border: 1px solid rgba(110, 175, 123, 0.28);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 10px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 28px rgba(27, 48, 43, 0.1);
}

/* Wallpaper suave do pattern administrativo — quase transparente,
   misturado com multiply pra integrar com a paleta canvas. */
.admin-panel-flat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./assets/monet-admin-bg.png") center / cover no-repeat;
  opacity: 0.09;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

.admin-panel-flat > * {
  position: relative;
  z-index: 1;
}

.admin-panel-hero-flat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(244, 248, 252, 0.85);
  border: 1px solid rgba(76, 127, 163, 0.16);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 4px 12px rgba(30, 78, 110, 0.07);
  flex-wrap: wrap;
}

.admin-panel-hero-flat .admin-panel-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-panel-hero-flat .admin-panel-hero-copy strong {
  color: var(--brand-forest-deep);
  font-size: 1rem;
  line-height: 1.15;
  font-weight: 700;
}

.admin-panel-hero-flat .admin-panel-hero-copy small {
  color: var(--muted);
  font-size: 0.74rem;
}

.admin-panel-hero-flat .admin-panel-header-code {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.admin-panel-hero-flat .admin-panel-header-code-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
}

.admin-panel-hero-flat .admin-panel-header-code code {
  background: rgba(76, 127, 163, 0.14);
  border: 1px solid rgba(76, 127, 163, 0.32);
  color: var(--brand-navy);
  padding: 4px 10px;
  border-radius: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.admin-panel-hero-flat .admin-panel-header-code button.ghost-button {
  background: var(--surface-strong);
  border: 1px solid rgba(110, 175, 123, 0.32);
  color: var(--brand-forest-deep);
  padding: 5px 10px;
  font-size: 0.74rem;
  border-radius: 8px;
}

.admin-panel-hero-flat .admin-panel-header-code button.ghost-button:hover {
  background: var(--brand-canvas);
  border-color: var(--brand-sage);
  color: var(--brand-forest-deep);
}

/* Sidebar */
.admin-panel-flat .admin-panel-body {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.admin-panel-flat .admin-panel-sidebar {
  display: grid;
  gap: 10px;
  background: rgba(244, 248, 252, 0.7);
  border: 1px solid rgba(76, 127, 163, 0.16);
  border-radius: 14px;
  padding: 10px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 3px 10px rgba(30, 78, 110, 0.06);
}

.admin-panel-flat .admin-panel-sidebar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 8px;
  border-bottom: 1px solid rgba(110, 175, 123, 0.18);
}

.admin-panel-flat .admin-panel-sidebar-head strong {
  color: var(--brand-forest-deep);
  font-size: 0.84rem;
  font-weight: 700;
}

.admin-panel-flat .admin-panel-sidebar-count {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  background: rgba(168, 203, 165, 0.28);
  padding: 2px 8px;
  border-radius: 999px;
}

.admin-panel-flat .admin-panel-sidebar-list {
  display: grid;
  gap: 2px;
  max-height: 360px;
  overflow-y: auto;
  padding: 2px;
}

.admin-panel-flat .admin-client-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--brand-forest);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.admin-panel-flat .admin-client-row:hover {
  background: rgba(168, 203, 165, 0.18);
}

.admin-panel-flat .admin-client-row.is-selected {
  background: rgba(76, 127, 163, 0.18);
  color: var(--brand-navy);
}

.admin-panel-flat .admin-client-row.is-selected::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: rgba(76, 127, 163, 0.85);
}

.admin-panel-flat .admin-client-row strong {
  color: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-panel-flat .admin-client-row-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.admin-panel-flat .admin-client-chip {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(204, 211, 242, 0.7);
  border: 1px solid rgba(134, 166, 186, 0.16);
  white-space: nowrap;
}

.admin-panel-flat .admin-client-chip.is-on {
  background: rgba(46, 196, 122, 0.14);
  color: rgba(160, 240, 200, 0.92);
  border-color: rgba(46, 196, 122, 0.28);
}

.admin-panel-flat .admin-client-chip.is-off {
  opacity: 0.55;
}

.admin-panel-flat details.admin-panel-new {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(134, 166, 186, 0.14);
  border-radius: 10px;
  padding: 8px 10px;
}

.admin-panel-flat details.admin-panel-new summary {
  color: rgba(180, 210, 245, 0.86);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.admin-panel-flat details.admin-panel-new summary::before {
  content: "+ ";
  color: rgba(76, 127, 163, 0.85);
  font-weight: 700;
}

.admin-panel-flat .admin-panel-new-form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.admin-panel-flat .admin-panel-new-form input,
.admin-panel-flat .admin-panel-new-form textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(134, 166, 186, 0.2);
  color: rgba(244, 247, 242, 0.95);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.78rem;
}

.admin-panel-flat .admin-panel-new-form input:focus,
.admin-panel-flat .admin-panel-new-form textarea:focus {
  border-color: rgba(76, 127, 163, 0.6);
  outline: 0;
}

/* Detail pane */
.admin-panel-flat .admin-panel-detail {
  display: grid;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(134, 166, 186, 0.14);
  border-radius: 14px;
  padding: 12px;
  min-width: 0;
}

.admin-panel-detail-head-flat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid rgba(134, 166, 186, 0.12);
}

.admin-panel-detail-head-flat .admin-panel-detail-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-panel-detail-head-flat .admin-panel-detail-copy strong {
  color: rgba(244, 247, 242, 0.95);
  font-size: 0.96rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-panel-detail-head-flat .admin-panel-detail-copy small {
  color: rgba(204, 211, 242, 0.6);
  font-size: 0.72rem;
}

.admin-panel-detail-head-flat .ghost-button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(134, 166, 186, 0.22);
  color: rgba(180, 210, 245, 0.88);
  padding: 5px 12px;
  font-size: 0.74rem;
  border-radius: 8px;
  flex-shrink: 0;
}

.admin-panel-detail-head-flat .ghost-button:hover {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(244, 247, 242, 0.95);
}

/* Detail tabs Dados/Arquivos */
.management-detail-tabs-flat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(134, 166, 186, 0.16);
  align-self: flex-start;
}

.management-detail-tabs-flat .management-detail-tab {
  border: 0;
  background: transparent;
  color: rgba(180, 210, 240, 0.75);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.management-detail-tabs-flat .management-detail-tab:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(244, 247, 242, 0.95);
}

.management-detail-tabs-flat .management-detail-tab.is-active {
  background: rgba(76, 127, 163, 0.88);
  color: #f0f7ff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(14, 70, 180, 0.3);
}

/* Form Dados */
.admin-panel-flat .admin-panel-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 14px;
  align-items: start;
}

.admin-panel-flat .admin-panel-form .inline-field {
  display: grid;
  gap: 4px;
}

.admin-panel-flat .admin-panel-form .inline-field:has(textarea),
.admin-panel-flat .admin-panel-form .admin-panel-form-actions {
  grid-column: 1 / -1;
}

.admin-panel-flat .admin-panel-form .inline-field span {
  color: rgba(204, 211, 242, 0.7);
  font-size: 0.72rem;
  font-weight: 600;
}

.admin-panel-flat .admin-panel-form input,
.admin-panel-flat .admin-panel-form textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(134, 166, 186, 0.22);
  color: rgba(244, 247, 242, 0.95);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.84rem;
  font-family: inherit;
}

.admin-panel-flat .admin-panel-form input:focus,
.admin-panel-flat .admin-panel-form textarea:focus {
  border-color: rgba(76, 127, 163, 0.6);
  outline: 0;
  background: rgba(255, 255, 255, 0.06);
}

.admin-panel-flat .admin-panel-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(134, 166, 186, 0.12);
}

.admin-panel-flat .admin-panel-form-actions .management-status-copy {
  margin-right: auto;
  color: rgba(204, 211, 242, 0.7);
  font-size: 0.72rem;
}

.admin-panel-flat .admin-panel-form-actions .ghost-button,
.admin-panel-flat .admin-panel-form-actions .primary-button {
  padding: 6px 14px;
  font-size: 0.78rem;
  border-radius: 10px;
}

.admin-panel-flat .admin-panel-form-actions .ghost-button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(134, 166, 186, 0.22);
  color: rgba(180, 210, 245, 0.88);
}

.admin-panel-flat .admin-panel-form-actions .primary-button {
  background: rgba(76, 127, 163, 0.88);
  border: 1px solid rgba(76, 127, 163, 0.92);
  color: #f0f7ff;
}

.admin-panel-flat .admin-panel-form-actions .primary-button:hover {
  background: rgba(76, 127, 163, 1);
}

/* Arquivos card flat (per-client files) */
.management-assets-card-flat {
  background: transparent;
  padding: 0;
  display: grid;
  gap: 12px;
}

.management-assets-section-flat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(134, 166, 186, 0.14);
  border-radius: 12px;
  padding: 10px 12px;
}

.management-assets-section-head-flat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(134, 166, 186, 0.12);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.management-assets-section-head-flat strong.feature-title {
  color: rgba(244, 247, 242, 0.92);
  font-size: 0.86rem;
  font-weight: 700;
  margin: 0;
}

.management-assets-section-head-flat .source-actions {
  display: flex;
  gap: 6px;
}

.management-assets-section-head-flat .ghost-button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(134, 166, 186, 0.22);
  color: rgba(180, 210, 245, 0.88);
  padding: 4px 10px;
  font-size: 0.72rem;
  border-radius: 8px;
}

.management-assets-section-head-flat .ghost-button.danger-button {
  color: rgba(255, 150, 150, 0.85);
  border-color: rgba(200, 80, 80, 0.32);
}

.management-assets-section-head-flat .ghost-button:hover {
  background: rgba(255, 255, 255, 0.09);
}

.management-assets-list-flat {
  display: grid;
  gap: 4px;
}

.management-assets-list-flat .admin-client-file-card,
.management-assets-list-flat .management-asset-row {
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  transition: background 120ms ease;
}

.management-assets-list-flat .admin-client-file-card:hover,
.management-assets-list-flat .management-asset-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Override admin-panel form colors that may have inherited light theme */
.admin-panel-flat .management-status-copy {
  color: rgba(204, 211, 242, 0.7);
}

@media (max-width: 900px) {
  .admin-panel-flat .admin-panel-body {
    grid-template-columns: 1fr;
  }
  .admin-panel-flat .admin-panel-sidebar-list {
    max-height: 240px;
  }
}

/* === File administration — elegant dark redesign === */

/* Toolbar (search/filter/sort) */
.management-toolbar-flat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(134, 166, 186, 0.18);
  border-radius: 12px;
  flex-wrap: wrap;
}

.management-toolbar-search {
  flex: 1 1 200px;
  min-width: 160px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(134, 166, 186, 0.22);
  color: rgba(244, 247, 242, 0.95);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-family: inherit;
}

.management-toolbar-search::placeholder {
  color: rgba(204, 211, 242, 0.55);
}

.management-toolbar-search:focus {
  outline: 0;
  border-color: rgba(76, 127, 163, 0.6);
  background: rgba(255, 255, 255, 0.07);
}

.management-toolbar-flat .management-view-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(134, 166, 186, 0.16);
  flex-wrap: nowrap;
}

.management-toolbar-flat .management-view-chip {
  border: 0;
  background: transparent;
  color: rgba(180, 210, 240, 0.72);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.management-toolbar-flat .management-view-chip:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(244, 247, 242, 0.95);
}

.management-toolbar-flat .management-view-chip.is-active {
  background: rgba(76, 127, 163, 0.85);
  color: #f0f7ff;
}

.management-toolbar-flat .management-view-chip small {
  font-size: 0.66rem;
  opacity: 0.7;
  font-weight: 600;
}

.management-toolbar-sort {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(134, 166, 186, 0.22);
  color: rgba(244, 247, 242, 0.92);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 0.74rem;
  font-family: inherit;
  cursor: pointer;
}

.management-toolbar-sort:focus {
  outline: 0;
  border-color: rgba(76, 127, 163, 0.6);
}

.management-toolbar-refresh {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(134, 166, 186, 0.22) !important;
  color: rgba(180, 210, 245, 0.85) !important;
  padding: 4px 9px !important;
  font-size: 0.9rem !important;
  border-radius: 8px !important;
  min-height: auto !important;
}

.management-toolbar-refresh:hover {
  background: rgba(255, 255, 255, 0.09) !important;
}

/* Asset rows (flat list items, hover-bg) */
.management-assets-list-flat .asset-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  transition: background 120ms ease;
}

.management-assets-list-flat .asset-row + .asset-row {
  border-top: 1px solid rgba(134, 166, 186, 0.08);
}

.management-assets-list-flat .asset-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.asset-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}

.asset-row-name {
  color: rgba(244, 247, 242, 0.95);
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.asset-row-desc {
  color: rgba(204, 211, 242, 0.6);
  font-size: 0.7rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.asset-row-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.asset-row-meta .summary-chip,
.asset-row-meta .source-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(134, 166, 186, 0.18);
  color: rgba(204, 211, 242, 0.78);
  font-size: 0.66rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.asset-row-time {
  color: rgba(120, 170, 220, 0.5);
  font-size: 0.65rem;
  margin-left: auto;
}

.asset-row-actions {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}

.asset-row-actions .ghost-button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(134, 166, 186, 0.2);
  color: rgba(180, 210, 245, 0.85);
  padding: 4px 9px;
  font-size: 0.7rem;
  border-radius: 7px;
  min-height: auto;
}

.asset-row-actions .ghost-button:hover {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(244, 247, 242, 0.95);
}

.asset-row-actions .ghost-button.danger-button {
  color: rgba(255, 150, 150, 0.82);
  border-color: rgba(200, 80, 80, 0.28);
}

.asset-row-actions .ghost-button.danger-button:hover {
  background: rgba(200, 80, 80, 0.14);
  color: rgba(255, 180, 180, 0.95);
}

/* Alerts (flat inline lines, not boxes) */
.management-alert-strip-flat {
  display: grid;
  gap: 4px;
}

.management-alert-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(255, 200, 90, 0.06);
  border: 1px solid rgba(255, 200, 90, 0.18);
  border-radius: 8px;
  font-size: 0.76rem;
}

.management-alert-line strong {
  color: rgba(255, 220, 160, 0.95);
  font-weight: 700;
  margin-right: 4px;
}

.management-alert-line span:last-child {
  color: rgba(220, 200, 160, 0.85);
}

.management-alert-line.tone-warning {
  background: rgba(255, 175, 60, 0.07);
  border-color: rgba(255, 175, 60, 0.22);
}

.management-alert-line.tone-info {
  background: rgba(76, 127, 163, 0.07);
  border-color: rgba(76, 127, 163, 0.22);
}

.management-alert-line.tone-info strong {
  color: rgba(180, 220, 255, 0.95);
}

.management-alert-line.tone-info span:last-child {
  color: rgba(170, 210, 255, 0.82);
}

.management-alert-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.65;
  flex-shrink: 0;
}

/* Section emphasis (raster as a special card) */
.management-assets-section-flat.management-assets-section-emphasis {
  background: rgba(76, 127, 163, 0.06);
  border-color: rgba(76, 127, 163, 0.22);
}

/* Raster defaults form (Produto/Ano/Mês) */
.admin-panel-flat .management-raster-defaults {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  padding: 10px;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(134, 166, 186, 0.14);
  border-radius: 10px;
}

.admin-panel-flat .management-raster-defaults label {
  display: grid;
  gap: 3px;
}

.admin-panel-flat .management-raster-defaults label span {
  color: rgba(204, 211, 242, 0.6);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-panel-flat .management-raster-defaults select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(134, 166, 186, 0.22);
  color: rgba(244, 247, 242, 0.95);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 0.78rem;
}

.admin-panel-flat .management-raster-defaults select:focus {
  outline: 0;
  border-color: rgba(76, 127, 163, 0.6);
}

.admin-panel-flat .management-raster-defaults .source-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* History disclosure */
.admin-panel-flat .management-history-disclosure {
  background: transparent;
  padding: 0;
}

.admin-panel-flat .management-history-disclosure summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(180, 210, 245, 0.78);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 0;
  cursor: pointer;
  list-style: none;
}

.admin-panel-flat .management-history-disclosure summary::before {
  content: "▸";
  color: rgba(204, 211, 242, 0.55);
  transition: transform 120ms ease;
}

.admin-panel-flat .management-history-disclosure[open] summary::before {
  transform: rotate(90deg);
}

.admin-panel-flat .management-history-disclosure summary .summary-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(134, 166, 186, 0.18);
  color: rgba(204, 211, 242, 0.7);
  font-size: 0.66rem;
  padding: 1px 7px;
  border-radius: 999px;
}

/* Confirmation prompts inside asset rows */
.admin-panel-flat .management-asset-confirm,
.admin-panel-flat .source-confirm {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(200, 80, 80, 0.08);
  border: 1px solid rgba(200, 80, 80, 0.24);
  border-radius: 8px;
  font-size: 0.74rem;
  color: rgba(255, 180, 180, 0.92);
}

/* Empty/loading state inside asset card flat */
.management-assets-card-flat .management-state-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(134, 166, 186, 0.22);
  border-radius: 10px;
  padding: 14px;
  color: rgba(204, 211, 242, 0.7);
  font-size: 0.78rem;
  text-align: center;
}

/* === FINAL: Admin panel + file admin — readable LIGHT theme override === */
/* The workspace-management-shell uses a light/white background — this section
   makes all my recent flat-panel work readable on it. */

/* Hero */
#admin-profile-panel .admin-panel-flat {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 255, 0.96)) !important;
  border: 1px solid rgba(45, 91, 63, 0.16) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  display: grid !important;
  gap: 14px !important;
  color: #1b302b;
}

#admin-profile-panel .admin-panel-hero-flat {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(238, 245, 252, 0.95)) !important;
  border: 1px solid rgba(45, 91, 63, 0.14) !important;
  flex-wrap: wrap !important;
}

#admin-profile-panel .admin-panel-hero-flat .admin-panel-hero-copy strong {
  color: #1b302b !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
}

#admin-profile-panel .admin-panel-hero-flat .admin-panel-hero-copy small {
  color: #5a7068 !important;
  font-size: 0.76rem !important;
}

#admin-profile-panel .admin-panel-hero-flat .admin-panel-header-code-label {
  color: #5a7068 !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

#admin-profile-panel .admin-panel-hero-flat .admin-panel-header-code code {
  background: rgba(76, 127, 163, 0.1) !important;
  border: 1px solid rgba(76, 127, 163, 0.32) !important;
  color: #0a2746 !important;
  padding: 5px 11px !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

#admin-profile-panel .admin-panel-hero-flat .admin-panel-header-code button.ghost-button {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(45, 91, 63, 0.22) !important;
  color: #5a7068 !important;
  padding: 5px 11px !important;
  font-size: 0.74rem !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

#admin-profile-panel .admin-panel-hero-flat .admin-panel-header-code button.ghost-button:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: rgba(76, 127, 163, 0.38) !important;
  color: #1b302b !important;
}

/* Body (sidebar + detail) */
#admin-profile-panel .admin-panel-flat .admin-panel-body {
  display: grid !important;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

/* Sidebar */
#admin-profile-panel .admin-panel-flat .admin-panel-sidebar {
  display: grid !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(45, 91, 63, 0.14) !important;
  border-radius: 14px !important;
  padding: 10px !important;
  position: static !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-sidebar-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 4px 6px 8px !important;
  border-bottom: 1px solid rgba(45, 91, 63, 0.12) !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-sidebar-head strong {
  color: #1b302b !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-sidebar-count {
  color: #5a7068 !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  background: rgba(76, 127, 163, 0.1) !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(76, 127, 163, 0.2) !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-sidebar-list {
  display: grid !important;
  gap: 3px !important;
  max-height: 360px !important;
  overflow-y: auto !important;
  padding: 2px !important;
  background: transparent !important;
  border: 0 !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-row {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #5a7068 !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 120ms ease !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-row:hover {
  background: rgba(76, 127, 163, 0.06) !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-row.is-selected {
  background: rgba(76, 127, 163, 0.14) !important;
  color: #1b302b !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-row.is-selected::before {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: rgba(76, 127, 163, 0.85) !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-row strong,
#admin-profile-panel .admin-panel-flat .admin-client-row .admin-client-row-main strong {
  color: inherit !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-chip {
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  color: #5a7068 !important;
  border: 1px solid rgba(45, 91, 63, 0.16) !important;
  white-space: nowrap !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-chip.is-on {
  background: rgba(46, 160, 96, 0.12) !important;
  color: #1f6b3b !important;
  border-color: rgba(46, 160, 96, 0.32) !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-chip.is-off {
  opacity: 0.6 !important;
}

/* New-client disclosure */
#admin-profile-panel .admin-panel-flat details.admin-panel-new {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px dashed rgba(45, 91, 63, 0.22) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
}

#admin-profile-panel .admin-panel-flat details.admin-panel-new summary {
  color: #5a7068 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  list-style: none !important;
}

#admin-profile-panel .admin-panel-flat details.admin-panel-new summary::before {
  content: "+ " !important;
  color: rgba(76, 127, 163, 0.85) !important;
  font-weight: 700 !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-new-form input,
#admin-profile-panel .admin-panel-flat .admin-panel-new-form textarea {
  background: #ffffff !important;
  border: 1px solid rgba(45, 91, 63, 0.22) !important;
  color: #1b302b !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 0.8rem !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-new-form input:focus,
#admin-profile-panel .admin-panel-flat .admin-panel-new-form textarea:focus {
  border-color: rgba(76, 127, 163, 0.6) !important;
  outline: 0 !important;
}

/* Detail pane */
#admin-profile-panel .admin-panel-flat .admin-panel-detail {
  display: grid !important;
  gap: 12px !important;
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid rgba(45, 91, 63, 0.14) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  min-width: 0 !important;
}

#admin-profile-panel .admin-panel-detail-head-flat {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 4px 4px 12px !important;
  border-bottom: 1px solid rgba(45, 91, 63, 0.12) !important;
}

#admin-profile-panel .admin-panel-detail-head-flat .admin-panel-detail-copy strong {
  color: #1b302b !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

#admin-profile-panel .admin-panel-detail-head-flat .admin-panel-detail-copy small {
  color: #5a7068 !important;
  font-size: 0.74rem !important;
}

#admin-profile-panel .admin-panel-detail-head-flat .ghost-button {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(45, 91, 63, 0.22) !important;
  color: #5a7068 !important;
  padding: 5px 14px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

#admin-profile-panel .admin-panel-detail-head-flat .ghost-button:hover {
  background: #ffffff !important;
  border-color: rgba(76, 127, 163, 0.38) !important;
  color: #1b302b !important;
}

/* Detail tabs (Dados / Arquivos) */
#admin-profile-panel .management-detail-tabs-flat {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px !important;
  border-radius: 999px !important;
  background: rgba(45, 91, 63, 0.08) !important;
  border: 1px solid rgba(45, 91, 63, 0.16) !important;
  align-self: flex-start !important;
}

#admin-profile-panel .management-detail-tabs-flat .management-detail-tab {
  border: 0 !important;
  background: transparent !important;
  color: #5a7068 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
}

#admin-profile-panel .management-detail-tabs-flat .management-detail-tab:hover {
  background: rgba(255, 255, 255, 0.6) !important;
  color: #1b302b !important;
}

#admin-profile-panel .management-detail-tabs-flat .management-detail-tab.is-active {
  background: rgba(76, 127, 163, 0.92) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(14, 70, 180, 0.3) !important;
}

/* Form Dados */
#admin-profile-panel .admin-panel-flat .admin-panel-form .inline-field span {
  color: #5a7068 !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-form input,
#admin-profile-panel .admin-panel-flat .admin-panel-form textarea {
  background: #ffffff !important;
  border: 1px solid rgba(45, 91, 63, 0.22) !important;
  color: #1b302b !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: 0.86rem !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-form-actions .ghost-button {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(45, 91, 63, 0.22) !important;
  color: #5a7068 !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-form-actions .primary-button {
  background: rgba(76, 127, 163, 0.92) !important;
  border: 1px solid rgba(76, 127, 163, 1) !important;
  color: #ffffff !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-form-actions .primary-button:hover {
  background: rgba(76, 127, 163, 1) !important;
}

/* === Files admin (Arquivos tab inside admin panel) === */

#admin-profile-panel .management-toolbar-flat {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(45, 91, 63, 0.16) !important;
  border-radius: 12px !important;
  flex-wrap: wrap !important;
}

#admin-profile-panel .management-toolbar-search {
  flex: 1 1 200px !important;
  min-width: 160px !important;
  background: #ffffff !important;
  border: 1px solid rgba(45, 91, 63, 0.22) !important;
  color: #1b302b !important;
  border-radius: 8px !important;
  padding: 7px 11px !important;
  font-size: 0.82rem !important;
}

#admin-profile-panel .management-toolbar-search::placeholder {
  color: #6b88a8 !important;
}

#admin-profile-panel .management-toolbar-search:focus {
  outline: 0 !important;
  border-color: rgba(76, 127, 163, 0.6) !important;
}

#admin-profile-panel .management-toolbar-flat .management-view-switch {
  background: rgba(45, 91, 63, 0.06) !important;
  border: 1px solid rgba(45, 91, 63, 0.14) !important;
  border-radius: 999px !important;
  padding: 2px !important;
  display: inline-flex !important;
  gap: 2px !important;
}

#admin-profile-panel .management-toolbar-flat .management-view-chip {
  border: 0 !important;
  background: transparent !important;
  color: #5a7068 !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#admin-profile-panel .management-toolbar-flat .management-view-chip:hover {
  background: rgba(255, 255, 255, 0.7) !important;
  color: #1b302b !important;
}

#admin-profile-panel .management-toolbar-flat .management-view-chip.is-active {
  background: rgba(76, 127, 163, 0.92) !important;
  color: #ffffff !important;
}

#admin-profile-panel .management-toolbar-flat .management-view-chip small {
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  opacity: 0.85 !important;
}

#admin-profile-panel .management-toolbar-sort {
  background: #ffffff !important;
  border: 1px solid rgba(45, 91, 63, 0.22) !important;
  color: #1b302b !important;
  border-radius: 8px !important;
  padding: 5px 9px !important;
  font-size: 0.78rem !important;
  cursor: pointer !important;
}

#admin-profile-panel .management-toolbar-refresh {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(45, 91, 63, 0.22) !important;
  color: #5a7068 !important;
  padding: 4px 10px !important;
  font-size: 0.95rem !important;
  border-radius: 8px !important;
  min-height: auto !important;
}

#admin-profile-panel .management-toolbar-refresh:hover {
  background: #ffffff !important;
}

/* Sections (Raster / Vetores / Uploads) */
#admin-profile-panel .management-assets-section-flat {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(45, 91, 63, 0.14) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
}

#admin-profile-panel .management-assets-section-flat.management-assets-section-emphasis {
  background: rgba(76, 127, 163, 0.05) !important;
  border-color: rgba(76, 127, 163, 0.22) !important;
}

#admin-profile-panel .management-assets-section-head-flat {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(45, 91, 63, 0.12) !important;
  margin-bottom: 10px !important;
  flex-wrap: wrap !important;
}

#admin-profile-panel .management-assets-section-head-flat strong.feature-title {
  color: #1b302b !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

#admin-profile-panel .management-assets-section-head-flat .ghost-button {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(45, 91, 63, 0.22) !important;
  color: #5a7068 !important;
  padding: 5px 12px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

#admin-profile-panel .management-assets-section-head-flat .ghost-button:hover {
  background: #ffffff !important;
  color: #1b302b !important;
}

#admin-profile-panel .management-assets-section-head-flat .ghost-button.danger-button {
  color: #9c2424 !important;
  border-color: rgba(180, 60, 60, 0.32) !important;
}

#admin-profile-panel .management-assets-section-head-flat .ghost-button.danger-button:hover {
  background: rgba(200, 80, 80, 0.1) !important;
}

/* Asset rows */
#admin-profile-panel .management-assets-list-flat .asset-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  transition: background 120ms ease !important;
}

#admin-profile-panel .management-assets-list-flat .asset-row + .asset-row {
  border-top: 1px solid rgba(45, 91, 63, 0.1) !important;
}

#admin-profile-panel .management-assets-list-flat .asset-row:hover {
  background: rgba(76, 127, 163, 0.04) !important;
}

#admin-profile-panel .asset-row-name {
  color: #1b302b !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
}

#admin-profile-panel .asset-row-desc {
  color: #5a7068 !important;
  font-size: 0.74rem !important;
}

#admin-profile-panel .asset-row-meta .summary-chip,
#admin-profile-panel .asset-row-meta .source-chip {
  background: rgba(76, 127, 163, 0.08) !important;
  border: 1px solid rgba(76, 127, 163, 0.18) !important;
  color: #5a7068 !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
}

#admin-profile-panel .asset-row-time {
  color: #6b88a8 !important;
  font-size: 0.68rem !important;
}

#admin-profile-panel .asset-row-actions .ghost-button {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(45, 91, 63, 0.22) !important;
  color: #5a7068 !important;
  padding: 4px 10px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

#admin-profile-panel .asset-row-actions .ghost-button:hover {
  background: #ffffff !important;
  border-color: rgba(76, 127, 163, 0.38) !important;
  color: #1b302b !important;
}

#admin-profile-panel .asset-row-actions .ghost-button.danger-button {
  color: #9c2424 !important;
  border-color: rgba(180, 60, 60, 0.3) !important;
}

#admin-profile-panel .asset-row-actions .ghost-button.danger-button:hover {
  background: rgba(200, 80, 80, 0.1) !important;
}

/* Alerts */
#admin-profile-panel .management-alert-strip-flat {
  display: grid !important;
  gap: 4px !important;
}

#admin-profile-panel .management-alert-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: rgba(255, 200, 90, 0.14) !important;
  border: 1px solid rgba(255, 175, 60, 0.32) !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
  color: #5a3d10 !important;
}

#admin-profile-panel .management-alert-line strong {
  color: #5a3d10 !important;
  font-weight: 700 !important;
}

#admin-profile-panel .management-alert-line.tone-info {
  background: rgba(76, 127, 163, 0.08) !important;
  border-color: rgba(76, 127, 163, 0.28) !important;
  color: #1b302b !important;
}

#admin-profile-panel .management-alert-line.tone-info strong {
  color: #1b302b !important;
}

/* Raster defaults form */
#admin-profile-panel .management-raster-defaults {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 10px !important;
  padding: 12px !important;
  margin-top: 10px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(45, 91, 63, 0.14) !important;
  border-radius: 10px !important;
}

#admin-profile-panel .management-raster-defaults label span {
  color: #5a7068 !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

#admin-profile-panel .management-raster-defaults select {
  background: #ffffff !important;
  border: 1px solid rgba(45, 91, 63, 0.22) !important;
  color: #1b302b !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  font-size: 0.84rem !important;
}

#admin-profile-panel .management-raster-defaults .ghost-button {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(45, 91, 63, 0.22) !important;
  color: #5a7068 !important;
}

#admin-profile-panel .management-raster-defaults .primary-button {
  background: rgba(76, 127, 163, 0.92) !important;
  color: #ffffff !important;
  border: 1px solid rgba(76, 127, 163, 1) !important;
}

/* Section meta chips inside Raster header */
#admin-profile-panel .management-assets-section-flat .source-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  padding: 6px 0 0 !important;
}

#admin-profile-panel .management-assets-section-flat .source-meta .summary-chip {
  background: rgba(76, 127, 163, 0.08) !important;
  border: 1px solid rgba(76, 127, 163, 0.2) !important;
  color: #5a7068 !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
}

/* History disclosure */
#admin-profile-panel .management-history-disclosure summary {
  color: #5a7068 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

#admin-profile-panel .management-history-disclosure summary .summary-chip {
  background: rgba(76, 127, 163, 0.08) !important;
  border: 1px solid rgba(76, 127, 163, 0.2) !important;
  color: #5a7068 !important;
}

/* === Minimalist admin/files redesign overrides === */

/* Tighter sidebar width and spacing */
#admin-profile-panel .admin-panel-flat .admin-panel-body {
  grid-template-columns: minmax(200px, 220px) minmax(0, 1fr) !important;
  gap: 12px !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-sidebar {
  padding: 8px !important;
  gap: 8px !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-sidebar-list {
  gap: 2px !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-row {
  padding: 8px 10px !important;
}

/* Smaller chip type */
#admin-profile-panel .admin-client-chip,
#admin-profile-panel .summary-chip,
#admin-profile-panel .source-chip,
#admin-profile-panel .asset-row-meta .summary-chip,
#admin-profile-panel .asset-row-meta .source-chip {
  font-size: 0.66rem !important;
}

/* Compact "+" button next to count */
#admin-profile-panel .admin-panel-sidebar-head-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  position: relative !important;
}

#admin-profile-panel .admin-panel-new-compact {
  position: relative !important;
  margin: 0 !important;
}

#admin-profile-panel .admin-panel-new-compact > summary {
  list-style: none !important;
  cursor: pointer !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(76, 127, 163, 0.32) !important;
  background: rgba(76, 127, 163, 0.1) !important;
  color: #1b302b !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

#admin-profile-panel .admin-panel-new-compact > summary::-webkit-details-marker {
  display: none !important;
}

#admin-profile-panel .admin-panel-new-compact > summary:hover {
  background: rgba(76, 127, 163, 0.18) !important;
}

#admin-profile-panel .admin-panel-new-compact[open] > summary {
  background: rgba(76, 127, 163, 0.22) !important;
}

#admin-profile-panel .admin-panel-new-compact .admin-panel-new-form {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  z-index: 30 !important;
  width: 240px !important;
  display: grid !important;
  gap: 6px !important;
  padding: 10px !important;
  background: #ffffff !important;
  border: 1px solid rgba(45, 91, 63, 0.22) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(13, 48, 85, 0.16) !important;
}

/* Raster default disclosure (collapsed by default) */
#admin-profile-panel .management-raster-defaults-disclosure {
  margin-top: 8px !important;
}

#admin-profile-panel .management-raster-defaults-disclosure > summary {
  cursor: pointer !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #5a7068 !important;
  padding: 4px 0 !important;
  list-style: none !important;
}

#admin-profile-panel .management-raster-defaults-disclosure > summary::-webkit-details-marker {
  display: none !important;
}

#admin-profile-panel .management-raster-defaults-disclosure[open] > summary {
  margin-bottom: 4px !important;
}

#admin-profile-panel .management-raster-defaults-disclosure .management-raster-defaults {
  margin-top: 0 !important;
}

/* Empty uploads single-line state */
#admin-profile-panel .management-assets-empty-line {
  margin: 0 !important;
  padding: 6px 10px !important;
  font-size: 0.74rem !important;
  color: #6b88a8 !important;
  font-style: italic !important;
}

/* Tighter section padding */
#admin-profile-panel .management-assets-section-flat {
  padding: 10px 12px !important;
}

#admin-profile-panel .management-assets-grid {
  gap: 8px !important;
}

/* === FINAL minimalist tightening === */

#admin-profile-panel .admin-panel-flat .admin-panel-body {
  grid-template-columns: minmax(200px, 220px) minmax(0, 1fr) !important;
  gap: 12px !important;
}

#admin-profile-panel .admin-panel-flat {
  padding: 12px !important;
  gap: 10px !important;
}

#admin-profile-panel .management-assets-section-flat {
  padding: 10px 12px !important;
}

#admin-profile-panel .management-assets-section-head-flat {
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
}

#admin-profile-panel .management-assets-section-head-flat strong.feature-title {
  font-size: 0.84rem !important;
}

#admin-profile-panel .asset-row-name {
  font-size: 0.82rem !important;
}

#admin-profile-panel .asset-row-meta .summary-chip,
#admin-profile-panel .asset-row-meta .source-chip,
#admin-profile-panel .management-assets-section-flat .source-meta .summary-chip {
  font-size: 0.66rem !important;
  padding: 1px 7px !important;
}

#admin-profile-panel .management-assets-list-flat .asset-row {
  padding: 7px 10px !important;
}

/* Disclosures (raster defaults + calendar + history) — quieter */
#admin-profile-panel .management-raster-defaults-disclosure summary,
#admin-profile-panel .management-calendar-disclosure summary,
#admin-profile-panel .management-history-disclosure summary {
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  margin-top: 6px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(45, 91, 63, 0.16) !important;
  border-radius: 999px !important;
  color: #5a7068 !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

#admin-profile-panel .management-raster-defaults-disclosure summary::-webkit-details-marker,
#admin-profile-panel .management-calendar-disclosure summary::-webkit-details-marker,
#admin-profile-panel .management-history-disclosure summary::-webkit-details-marker {
  display: none !important;
}

#admin-profile-panel .management-raster-defaults-disclosure summary::before,
#admin-profile-panel .management-calendar-disclosure summary::before,
#admin-profile-panel .management-history-disclosure summary::before {
  content: "▸" !important;
  color: rgba(76, 127, 163, 0.75) !important;
  font-size: 0.7rem !important;
  transition: transform 120ms ease !important;
}

#admin-profile-panel .management-raster-defaults-disclosure[open] summary::before,
#admin-profile-panel .management-calendar-disclosure[open] summary::before,
#admin-profile-panel .management-history-disclosure[open] summary::before {
  transform: rotate(90deg) !important;
}

#admin-profile-panel .management-raster-defaults-disclosure summary > span:first-child,
#admin-profile-panel .management-calendar-disclosure summary > span:first-child,
#admin-profile-panel .management-history-disclosure summary > span:first-child {
  color: inherit !important;
}

#admin-profile-panel .management-raster-defaults-disclosure summary:hover,
#admin-profile-panel .management-calendar-disclosure summary:hover,
#admin-profile-panel .management-history-disclosure summary:hover {
  background: #ffffff !important;
  border-color: rgba(76, 127, 163, 0.32) !important;
}

/* Tighter form */
#admin-profile-panel .admin-panel-flat .admin-panel-form {
  gap: 8px !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-form input,
#admin-profile-panel .admin-panel-flat .admin-panel-form textarea {
  padding: 7px 11px !important;
  font-size: 0.82rem !important;
}

/* Tighter hero */
#admin-profile-panel .admin-panel-hero-flat {
  padding: 8px 12px !important;
}

#admin-profile-panel .admin-panel-hero-flat .admin-panel-hero-copy strong {
  font-size: 0.92rem !important;
}

#admin-profile-panel .admin-panel-hero-flat .admin-panel-hero-copy small {
  font-size: 0.7rem !important;
}

/* Reduce client row height + meta */
#admin-profile-panel .admin-panel-flat .admin-client-row {
  padding: 8px 10px !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-row strong,
#admin-profile-panel .admin-panel-flat .admin-client-row .admin-client-row-main strong {
  font-size: 0.82rem !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-chip {
  font-size: 0.6rem !important;
  padding: 1px 6px !important;
}

/* Dont let panel exceed viewport — make it scroll inside */
#admin-profile-panel .admin-panel-flat {
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}

#admin-profile-panel .admin-panel-flat .admin-panel-detail {
  padding: 12px !important;
}

#admin-profile-panel .admin-panel-detail-head-flat {
  padding-bottom: 10px !important;
}

#admin-profile-panel .admin-panel-detail-head-flat .admin-panel-detail-copy strong {
  font-size: 0.92rem !important;
}

#admin-profile-panel .admin-panel-detail-head-flat .admin-panel-detail-copy small {
  font-size: 0.7rem !important;
}

#admin-profile-panel .management-detail-tabs-flat .management-detail-tab {
  padding: 5px 14px !important;
  font-size: 0.76rem !important;
}

/* Profile page clarity pass */
#admin-profile-panel .admin-panel-flat {
  max-height: none !important;
  overflow: visible !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

#admin-profile-panel .admin-panel-hero-flat {
  align-items: stretch !important;
  padding: 14px !important;
  border-radius: 10px !important;
}

#admin-profile-panel .admin-panel-hero-copy {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

#admin-profile-panel .admin-panel-hero-copy .eyebrow {
  margin: 0 !important;
  color: #58738d !important;
}

#admin-profile-panel .admin-panel-hero-copy strong {
  display: block !important;
  color: #1b302b !important;
  font-size: 1.08rem !important;
}

#admin-profile-panel .admin-panel-hero-copy small {
  color: #58738d !important;
  font-size: 0.78rem !important;
}

#admin-profile-panel .admin-panel-header-code {
  display: grid !important;
  grid-template-columns: auto auto auto !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#admin-profile-panel .admin-panel-header-code-label {
  grid-column: 1 / -1 !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-body {
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) !important;
  align-items: start !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-sidebar,
#admin-profile-panel .admin-panel-flat .admin-panel-detail {
  border-radius: 10px !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-row {
  align-items: flex-start !important;
  gap: 8px !important;
}

#admin-profile-panel .admin-client-row-main,
#admin-profile-panel .admin-client-row-text {
  min-width: 0 !important;
}

#admin-profile-panel .admin-client-row-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  max-width: 92px !important;
}

#admin-profile-panel .management-assets-list-flat .asset-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

@media (max-width: 900px) {
  #admin-profile-panel .admin-panel-flat .admin-panel-body {
    grid-template-columns: 1fr !important;
  }

  #admin-profile-panel .admin-panel-flat .admin-panel-sidebar {
    width: 100% !important;
  }

  #admin-profile-panel .admin-panel-flat .admin-panel-sidebar-list {
    max-height: 260px !important;
  }

  #admin-profile-panel .admin-panel-header-code {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  #admin-profile-panel .admin-panel-header-code code,
  #admin-profile-panel .admin-panel-header-code button {
    width: 100% !important;
  }
}

@media (max-width: 620px) {
  #admin-profile-panel .admin-panel-flat {
    padding: 10px !important;
  }

  #admin-profile-panel .admin-panel-detail-head-flat,
  #admin-profile-panel .management-assets-list-flat .asset-row {
    grid-template-columns: 1fr !important;
  }

  #admin-profile-panel .asset-row-actions {
    justify-self: stretch !important;
  }
}

#admin-profile-panel .admin-users-stack {
  display: grid;
  gap: 12px;
}

#admin-profile-panel .admin-users-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(45, 91, 63, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: #1b302b;
}

#admin-profile-panel .admin-users-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(45, 91, 63, 0.12);
}

#admin-profile-panel .admin-users-head strong {
  display: block;
  font-size: 0.92rem;
  color: #1b302b;
}

#admin-profile-panel .admin-users-head small,
#admin-profile-panel .admin-users-note {
  color: #5a7068;
  font-size: 0.74rem;
}

#admin-profile-panel .admin-users-note {
  margin: 0;
}

#admin-profile-panel .admin-users-count {
  flex: 0 0 auto;
  border: 1px solid rgba(76, 127, 163, 0.2);
  border-radius: 999px;
  background: rgba(76, 127, 163, 0.1);
  color: #5a7068;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 9px;
}

#admin-profile-panel .admin-ownership-list,
#admin-profile-panel .admin-users-list {
  display: grid;
  gap: 6px;
}

#admin-profile-panel .admin-ownership-row,
#admin-profile-panel .admin-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.7fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(45, 91, 63, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}

#admin-profile-panel .admin-ownership-row {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

#admin-profile-panel .admin-ownership-main,
#admin-profile-panel .admin-user-copy,
#admin-profile-panel .admin-user-meta {
  min-width: 0;
}

#admin-profile-panel .admin-ownership-main strong,
#admin-profile-panel .admin-user-copy strong {
  display: block;
  color: #1b302b;
  font-size: 0.84rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#admin-profile-panel .admin-ownership-main small,
#admin-profile-panel .admin-user-copy small,
#admin-profile-panel .admin-user-meta span {
  display: block;
  color: #5a7068;
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#admin-profile-panel .admin-ownership-clients {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

#admin-profile-panel .admin-ownership-clients span,
#admin-profile-panel .admin-user-role {
  border: 1px solid rgba(45, 91, 63, 0.14);
  border-radius: 999px;
  background: rgba(45, 91, 63, 0.06);
  color: #5a7068;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  white-space: nowrap;
}

#admin-profile-panel .admin-ownership-clients .is-empty {
  opacity: 0.62;
}

#admin-profile-panel .admin-user-main {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}#admin-profile-panel .admin-user-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

#admin-profile-panel .admin-user-actions .compact-button {
  padding: 5px 10px !important;
  border-radius: 8px !important;
  font-size: 0.74rem !important;
}

#admin-profile-panel .admin-user-actions .danger-button {
  color: #9f2d2d !important;
  border-color: rgba(185, 71, 71, 0.28) !important;
  background: rgba(185, 71, 71, 0.06) !important;
}

@media (max-width: 760px) {
  #admin-profile-panel .admin-ownership-row,
  #admin-profile-panel .admin-user-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #admin-profile-panel .admin-ownership-clients,
  #admin-profile-panel .admin-user-actions {
    justify-content: flex-start;
  }
}

/* === Analysis view (top-level "Análises" tab) === */
.analysis-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px clamp(16px, 3vw, 32px) 32px;
  min-height: calc(100vh - 80px);
  background: transparent;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
}

.analysis-view.hidden {
  display: none;
}

.analysis-view-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(76, 127, 163, 0.16);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 4px 12px rgba(30, 78, 110, 0.07);
}

.analysis-view-head .eyebrow {
  display: none; /* eyebrow "Polígono selecionado" removida — título já fala por si */
}

.analysis-view-head h2 {
  margin: 0 0 2px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1b302b;
  line-height: 1.15;
}

.analysis-view-meta {
  margin: 0;
  color: #5a7068;
  font-size: 0.72rem;
  line-height: 1.2;
}

/* Subtabs da Análise (Resumo / Hidroclima / MapBiomas / Dados) — alinhada
   com a identidade forest. Mesma família visual das tabs Mapa/Análises/
   Arquivos: ativo em forest-deep gradient, inativos translúcidos. */
.analysis-subtabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(30, 61, 43, 0.05);
  border: 1px solid rgba(30, 61, 43, 0.12);
  width: fit-content;
  flex-wrap: wrap;
}

.analysis-subtab {
  /* Padding/font-size/min-height unificados com .workspace-tab-button
     (auditoria apontou ~4px de divergência entre as 2 famílias de tabs). */
  padding: 5px 18px;
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--brand-forest);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.7;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, opacity 140ms ease,
    box-shadow 140ms ease, border-color 140ms ease;
}

.analysis-subtab:hover {
  opacity: 1;
  color: var(--brand-forest-deep);
  background: rgba(30, 61, 43, 0.06);
}

.analysis-subtab.is-active {
  background: linear-gradient(180deg, #2a4f37 0%, #1e3d2b 100%);
  border-color: rgba(15, 36, 22, 0.55);
  color: #ffffff;
  opacity: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 3px 10px rgba(15, 36, 22, 0.24);
}

.analysis-subtab.is-active:hover {
  background: linear-gradient(180deg, #356244 0%, #284a36 100%);
  color: #ffffff;
}

.analysis-panels {
  display: block;
}

.analysis-panel {
  background: #fff;
  /* Borda fina forest unificada — única borda visível no painel. As sections
     internas perdem sua borda própria (eram aninhadas) e viram divisões
     verticais via espaçamento + h3 verde. */
  border: 1px solid rgba(30, 61, 43, 0.10);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 4px 12px rgba(15, 36, 22, 0.07);
  min-height: 260px;
}

.analysis-panel.hidden {
  display: none;
}

.analysis-empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  color: #5a7068;
  text-align: center;
}

.analysis-empty strong {
  color: #1b302b;
  font-size: 1rem;
}

.analysis-table-wrapper {
  overflow-x: auto;
  margin-top: 12px;
}

.analysis-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  color: #244764;
}

.analysis-table th,
.analysis-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(45, 91, 63, 0.08);
  white-space: nowrap;
}

.analysis-table th {
  background: rgba(244, 248, 252, 0.9);
  font-weight: 700;
  color: #1f3d5b;
  position: sticky;
  top: 0;
}

.analysis-table tr:hover td {
  background: rgba(45, 91, 63, 0.04);
}

.analysis-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.5fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px) {
  .analysis-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESUMO REDESENHADO — hierarquia em 4 blocos (headline, climatologia,
   snapshot, strip de contexto) + mini-mapa companion.

   Tokens semânticos compartilhados (good/warn/neutral/primary) padronizam
   cores entre os 3 cards de tone do app (resumo headline, water-balance
   status, eficiência metrics). */
:root {
  --tone-good-bg: rgba(46, 107, 63, 0.10);
  --tone-good-border: rgba(46, 107, 63, 0.30);
  --tone-good-fg: #1e3d2b;
  --tone-warn-bg: rgba(196, 122, 46, 0.10);
  --tone-warn-border: rgba(196, 122, 46, 0.32);
  --tone-warn-fg: #7a4810;
  --tone-neutral-bg: rgba(30, 61, 43, 0.06);
  --tone-neutral-border: rgba(30, 61, 43, 0.14);
  --tone-neutral-fg: var(--brand-forest-deep);
  --tone-primary-bg: rgba(76, 127, 163, 0.10);
  --tone-primary-border: rgba(76, 127, 163, 0.30);
  --tone-primary-fg: #173d57;
}

/* Grid principal: headline + map (top row), climatologia + snapshot (bottom). */
.resumo-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: auto auto;
  gap: 16px;
  margin-bottom: 14px;
}

.resumo-headline {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.resumo-map {
  grid-column: 2;
  grid-row: 1 / span 2; /* ocupa as 2 linhas pra ter altura suficiente */
  background: #ffffff;
  border: 1px solid rgba(30, 61, 43, 0.10);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 360px;
}

.resumo-map-head strong {
  font-size: 0.78rem;
  color: var(--brand-forest-deep);
  letter-spacing: -0.005em;
}

.resumo-map .analysis-mini-map {
  flex: 1;
  width: 100%;
  height: auto;
}

.resumo-climatology {
  grid-column: 1;
  grid-row: 2;
  background: #ffffff;
  border: 1px solid rgba(30, 61, 43, 0.10);
  border-radius: 12px;
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}

.resumo-snapshot {
  grid-column: 1 / -1; /* full width abaixo */
  grid-row: 3;
  background: #ffffff;
  border: 1px solid rgba(30, 61, 43, 0.10);
  border-radius: 12px;
  padding: 14px 16px;
}

/* ─── HEADLINE blocks ─────────────────────────────────────────────────── */
.resumo-headline-primary,
.resumo-headline-secondary {
  border-radius: 12px;
  padding: 16px 18px;
  display: grid;
  align-content: center;
  gap: 4px;
  background: var(--tone-neutral-bg);
  border: 1px solid var(--tone-neutral-border);
}

.resumo-headline-primary.resumo-tone-good,
.resumo-headline-secondary.resumo-tone-good {
  background: var(--tone-good-bg);
  border-color: var(--tone-good-border);
}

.resumo-headline-primary.resumo-tone-warn,
.resumo-headline-secondary.resumo-tone-warn {
  background: var(--tone-warn-bg);
  border-color: var(--tone-warn-border);
}

.resumo-headline-primary.resumo-tone-primary {
  background: var(--tone-primary-bg);
  border-color: var(--tone-primary-border);
}

.resumo-headline-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-forest);
  line-height: 1.15;
}

.resumo-headline-value {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-forest-deep);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.resumo-tone-good .resumo-headline-value { color: var(--tone-good-fg); }
.resumo-tone-warn .resumo-headline-value { color: var(--tone-warn-fg); }
.resumo-tone-primary .resumo-headline-value { color: var(--tone-primary-fg); }

.resumo-headline-value-sm {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-forest-deep);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.resumo-tone-good .resumo-headline-value-sm { color: var(--tone-good-fg); }
.resumo-tone-warn .resumo-headline-value-sm { color: var(--tone-warn-fg); }

.resumo-headline-note {
  font-size: 0.74rem;
  line-height: 1.3;
  color: var(--brand-forest);
  margin-top: 2px;
}

/* ─── Section titles (climatology + snapshot) ─────────────────────────── */
.resumo-section-title {
  margin: 0 0 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-forest-deep);
  letter-spacing: -0.005em;
}

/* ─── Stat row (PPT/ETR/ETP em linha horizontal, não cards separados) ── */
.resumo-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 4px 0;
}

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

.resumo-stat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.resumo-stat-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--brand-forest);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.resumo-stat-value {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand-forest-deep);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Picos sazonais como chips inline (rodapé do climatologia) */
.resumo-peaks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(30, 61, 43, 0.08);
}

.resumo-peak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--brand-forest);
}

.resumo-peak-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.resumo-peak strong {
  color: var(--brand-forest-deep);
}

/* ─── Snapshot range bar ──────────────────────────────────────────────── */
.resumo-range {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.resumo-range-labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.72rem;
  color: var(--brand-forest);
  font-variant-numeric: tabular-nums;
}

.resumo-range-mean-label {
  font-weight: 700;
  color: var(--brand-forest-deep);
  font-size: 0.86rem;
}

.resumo-range-bar {
  position: relative;
  height: 10px;
}

.resumo-range-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2d8cff, #65d18e, #fdda4c, #ff8c4f, #ef5a29);
}

.resumo-range-mean {
  position: absolute;
  top: -3px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--brand-forest-deep);
  box-shadow: 0 2px 6px rgba(15, 36, 22, 0.32);
}

.resumo-range-footer {
  display: flex;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--brand-forest);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* ─── Strip de contexto (rodapé compacto, 1 linha) ─────────────────────── */
.resumo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 14px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: rgba(30, 61, 43, 0.04);
  border: 1px solid rgba(30, 61, 43, 0.08);
  font-size: 0.72rem;
  color: var(--brand-forest);
}

.resumo-strip-item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.resumo-strip-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  opacity: 0.75;
}

.resumo-strip-value {
  font-weight: 700;
  color: var(--brand-forest-deep);
  font-variant-numeric: tabular-nums;
}

.resumo-strip-sep {
  opacity: 0.4;
}

/* ─── "Origem dos dados" como <details> colapsável ─────────────────────── */
.resumo-data-source {
  margin-top: 4px;
  border: 1px solid rgba(30, 61, 43, 0.08);
  border-radius: 8px;
  padding: 0;
  background: rgba(30, 61, 43, 0.02);
}

.resumo-data-source summary {
  padding: 10px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-forest);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.resumo-data-source summary::-webkit-details-marker { display: none; }

.resumo-data-source summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform 140ms ease;
  color: var(--brand-forest);
}

.resumo-data-source[open] summary::before {
  transform: rotate(90deg);
}

.resumo-data-source[open] summary {
  border-bottom: 1px solid rgba(30, 61, 43, 0.08);
}

.resumo-data-source .analysis-insight-list {
  padding: 12px 14px 14px 32px;
  margin: 0;
}

.resumo-empty {
  color: var(--brand-forest);
  opacity: 0.6;
  font-size: 0.84rem;
  margin: 0;
}

/* Responsivo: em telas <860px, mapa vai pra baixo (não fica do lado). */
@media (max-width: 860px) {
  .resumo-grid {
    grid-template-columns: 1fr;
  }
  .resumo-headline,
  .resumo-map,
  .resumo-climatology,
  .resumo-snapshot {
    grid-column: 1;
    grid-row: auto;
  }
  .resumo-headline {
    grid-template-columns: 1fr;
  }
  .resumo-map {
    min-height: 280px;
  }
}

/* Grupo de métricas com header próprio — "Geometria", "Leitura espacial",
   "Hidroclima anual", "Contexto" empilhados verticalmente, cada um com
   seu grid de cards. */
.analysis-metric-group {
  margin-bottom: 16px;
}

.analysis-metric-group:last-child {
  margin-bottom: 0;
}

.analysis-metric-group-title {
  margin: 0 0 8px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-forest);
}

.analysis-summary-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.analysis-summary-metric {
  background: rgba(30, 61, 43, 0.03);
  border: 1px solid rgba(30, 61, 43, 0.10);
  border-radius: 8px;
  padding: 8px 10px;
  transition: border-color 140ms ease, background 140ms ease;
}

.analysis-summary-metric:hover {
  border-color: rgba(30, 61, 43, 0.22);
  background: rgba(30, 61, 43, 0.06);
}

.analysis-summary-metric.is-primary {
  background: rgba(46, 107, 63, 0.07);
  border-color: rgba(46, 107, 63, 0.26);
}

.analysis-summary-metric.is-good {
  background: rgba(46, 107, 63, 0.08);
  border-color: rgba(46, 107, 63, 0.28);
}

.analysis-summary-metric.is-good strong { color: var(--brand-forest-deep); }

.analysis-summary-metric.is-warn {
  background: rgba(196, 122, 46, 0.08);
  border-color: rgba(196, 122, 46, 0.28);
}

.analysis-summary-metric.is-warn strong { color: #7a4810; }

.analysis-summary-metric.is-empty {
  opacity: 0.5;
}

.analysis-summary-metric span {
  display: block;
  font-size: 0.6rem;
  color: var(--brand-forest);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  line-height: 1.15;
}

.analysis-summary-metric strong {
  display: block;
  margin-top: 4px;
  font-size: 0.92rem;
  color: var(--brand-forest-deep);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Cabeçalho COMPACTO do relatório de Análise. Antes era uma section gigante
   gradient verde (~75px height); agora é um header pequeno DENTRO do painel,
   sem borda própria (a borda do .analysis-panel já contém tudo). Título
   menor (~1rem), barra verde lateral marca identidade sem ocupar header. */
.analysis-report-cover {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 8px 0 12px;
  margin-bottom: 12px;
  /* Sem background, sem border, sem box-shadow — agora é parte do panel.
     A divisão visual abaixo do header vem da linha do .analysis-section. */
  border-bottom: 1px solid rgba(30, 61, 43, 0.10);
  color: var(--brand-forest-deep);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  position: relative;
}

/* Barra verde lateral à esquerda do título — marca de identidade discreta. */
.analysis-report-cover::before {
  content: "";
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2a4f37 0%, #1e3d2b 100%);
  align-self: stretch;
  margin-right: 4px;
}

.analysis-report-copy {
  min-width: 0;
}

.analysis-report-copy .eyebrow {
  display: block;
  margin-bottom: 2px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-forest);
}

.analysis-report-copy h3 {
  margin: 0 0 2px;
  /* Antes: clamp(1.3rem, 2vw, 1.85rem) — gigante. Agora compacto, harmoniza
     com o h3 das sections internas (0.92rem). */
  font-size: 1.05rem;
  line-height: 1.18;
  color: var(--brand-forest-deep);
  font-weight: 700;
  letter-spacing: -0.005em;
}

.analysis-report-copy p {
  margin: 0;
  color: var(--brand-forest);
  font-size: 0.74rem;
  line-height: 1.3;
}

.analysis-report-meta {
  display: grid;
  gap: 2px;
  justify-items: end;
  white-space: nowrap;
}

.analysis-report-meta span {
  color: var(--brand-forest);
  font-size: 0.7rem;
}

.analysis-report-meta strong {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--brand-forest-deep);
}

.analysis-executive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 0.72fr);
  gap: 18px;
  align-items: stretch;
}

.analysis-mini-map-card {
  display: grid;
  gap: 10px;
  align-content: start;
  border: 1px solid rgba(76, 127, 163, 0.16);
  border-radius: 12px;
  padding: 12px;
  background: rgba(244, 248, 252, 0.62);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 3px 10px rgba(30, 78, 110, 0.06);
}

.analysis-mini-map-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.analysis-mini-map-head strong {
  color: #1b302b;
  font-size: 0.9rem;
}

.analysis-mini-map-head span {
  color: #86a6ba;
  font-size: 0.72rem;
  text-align: right;
}

.analysis-mini-map {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.analysis-map-bg {
  fill: #eef5f8;
}

.analysis-map-shape {
  fill: rgba(31, 156, 110, 0.2);
  stroke: #167068;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.analysis-map-centroid {
  fill: #d96c3b;
  stroke: #fff;
  stroke-width: 1.5;
}

.analysis-map-north path {
  fill: #1b302b;
}

.analysis-map-north text,
.analysis-map-caption {
  fill: #355a79;
  font-size: 11px;
  font-weight: 800;
}

.analysis-mini-map-empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  border-radius: 12px;
  background: rgba(244, 248, 252, 0.8);
  color: #86a6ba;
  font-size: 0.82rem;
}

.analysis-insight-list {
  margin: 0;
  padding-left: 18px;
  color: #244764;
  line-height: 1.45;
}

.analysis-insight-list li + li {
  margin-top: 6px;
}

.analysis-footnote {
  margin: 10px 0 0;
  color: #86a6ba;
  font-size: 0.76rem;
}

@media (max-width: 900px) {
  .analysis-executive-grid {
    grid-template-columns: 1fr;
  }

  .analysis-report-cover,
  .analysis-mini-map-head {
    flex-direction: column;
  }

  .analysis-report-meta,
  .analysis-mini-map-head span {
    justify-items: start;
    text-align: left;
  }
}

.analysis-loading {
  padding: 16px 20px;
  color: #5a7068;
  font-style: italic;
}

/* === Trend monthly table inside popup === */
.trend-monthly-table {
  margin-top: 10px;
  max-height: 220px;
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid rgba(45, 91, 63, 0.12);
  background: rgba(255, 255, 255, 0.6);
}

.trend-monthly-table.hidden {
  display: none;
}

.trend-monthly-table-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
  color: #244764;
  table-layout: fixed;
}

.trend-monthly-table-grid th:first-child,
.trend-monthly-table-grid td:first-child {
  width: 22%;
  min-width: 70px;
}

.trend-monthly-table-grid thead th {
  position: sticky;
  top: 0;
  background: rgba(232, 240, 247, 0.96);
  border-bottom: 1px solid rgba(45, 91, 63, 0.16);
  padding: 5px 6px;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1f3d5b;
  font-weight: 700;
  text-align: left;
  white-space: normal;
  line-height: 1.15;
}

.trend-monthly-table-grid thead th .metric-toggle-dot {
  margin-right: 5px;
  vertical-align: middle;
}

.trend-monthly-table-grid thead th.metric-prec_agera5 .metric-toggle-dot {
  background: #1d6bb0;
}

.trend-monthly-table-grid thead th.metric-evapot_agera5 .metric-toggle-dot {
  background: #c47a2e;
}

.trend-monthly-table-grid thead th.metric-evareal_sat .metric-toggle-dot {
  background: #2e6b3f;
}

.trend-monthly-table-grid thead th.metric-etr_p .metric-toggle-dot {
  background: #7c3aed;
}

.trend-monthly-table-grid tbody tr:nth-child(even) td,
.trend-monthly-table-grid tbody tr:nth-child(even) th {
  background: rgba(244, 248, 252, 0.6);
}

.trend-monthly-table-grid tbody th,
.trend-monthly-table-grid tbody td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(45, 91, 63, 0.06);
}

.trend-monthly-table-grid tbody th {
  font-weight: 700;
  color: #1f3d5b;
  font-size: 0.66rem;
  text-align: left;
}

.trend-monthly-table-grid tbody td {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 0.68rem;
}

/* === Climograma (Walter-Lieth adaptado) — barras PPT + linhas ETR/ETP === */
.climograma-section {
  margin-top: 14px;
}

.climograma-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.climograma-svg {
  width: 100%;
  height: auto;
  max-height: 360px;
  display: block;
}

.climograma-grid {
  stroke: rgba(76, 127, 163, 0.14);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.climograma-axis {
  stroke: rgba(34, 60, 80, 0.45);
  stroke-width: 1;
}

.climograma-axis-label {
  fill: rgba(34, 60, 80, 0.78);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.climograma-axis-title {
  fill: rgba(34, 60, 80, 0.78);
  font-size: 11px;
}

.climograma-bar {
  fill: #4c9adb;
  stroke: #1d6bb0;
  stroke-width: 0.6;
}

.climograma-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.climograma-line.is-etr {
  stroke: #2e6b3f;
}

.climograma-line.is-etp {
  stroke: #c47a2e;
  stroke-dasharray: 5 3;
}

.climograma-point.is-etr {
  fill: #2e6b3f;
  stroke: #fff;
  stroke-width: 1;
}

.climograma-point.is-etp {
  fill: #c47a2e;
  stroke: #fff;
  stroke-width: 1;
}

.climograma-shade.is-excedente {
  fill: rgba(76, 154, 219, 0.22);
}

.climograma-shade.is-deficit {
  fill: rgba(224, 122, 62, 0.22);
}

.climograma-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  font-size: 0.72rem;
  color: rgba(34, 60, 80, 0.88);
  padding-top: 4px;
}

.climograma-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.climograma-swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
}

.climograma-swatch.is-ppt {
  background: linear-gradient(180deg, #4c9adb 0%, #1d6bb0 100%);
}

.climograma-swatch.is-etr {
  background: #2e6b3f;
  height: 3px;
  border-radius: 1px;
}

.climograma-swatch.is-etp {
  background: repeating-linear-gradient(90deg, #c47a2e 0 5px, transparent 5px 8px);
  height: 3px;
  border-radius: 1px;
}

.climograma-swatch.is-excedente {
  background: rgba(76, 154, 219, 0.32);
  border: 1px solid rgba(76, 154, 219, 0.55);
}

.climograma-swatch.is-deficit {
  background: rgba(224, 122, 62, 0.32);
  border: 1px solid rgba(224, 122, 62, 0.55);
}

/* === Analysis sections (Resumo + Atributos) ===
   Antes cada section tinha sua própria borda/sombra → bordas aninhadas
   dentro do .analysis-panel. Agora viram apenas divisões verticais com
   separador sutil + h3 forest. UMA borda só, do .analysis-panel. */
.analysis-section {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 16px;
  margin-bottom: 16px;
  box-shadow: none;
  /* Separador entre sections — linha forest sutil. */
  border-bottom: 1px solid rgba(30, 61, 43, 0.08);
}

.analysis-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Header com título + toggle de ano hídrico/civil alinhado à direita. */
.analysis-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.analysis-section-header h3 {
  margin: 0;
}

/* Slot do toggle Ano hídrico/Civil no header do card Indicadores — fica
   inline com o título (que agora é um chip estático "Indicadores"). */
.year-mode-toggle-slot {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Pílula do seletor de grupo (PREC·ETR·ETP / ETR/P) — mesma família visual do
   toggle de ano. Chips levemente mais compactos pq os rótulos são maiores. */
.year-mode-toggle.chart-group-toggle .year-mode-chip {
  padding: 6px 12px;
  font-size: 0.72rem;
}

/* ─── Balanço Hídrico (P − ET) ─────────────────────────────────────────────
   Card abaixo do gráfico de Indicadores. Mostra status (déficit/excedente),
   totais PPT e ET, balanço final, e mini-barras por mês.
   Cores semânticas: surplus = forest verde, deficit = danger vermelho. */
.water-balance-card {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(30, 61, 43, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.water-balance-card.hidden {
  display: none;
}

.water-balance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.water-balance-eyebrow {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-forest);
}

.water-balance-status {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.water-balance-status--is-surplus {
  background: rgba(46, 107, 63, 0.12);
  color: #1e3d2b;
  border-color: rgba(46, 107, 63, 0.32);
}

.water-balance-status--is-deficit {
  background: rgba(185, 71, 71, 0.12);
  color: #7a2a2a;
  border-color: rgba(185, 71, 71, 0.32);
}

.water-balance-status--is-balanced {
  background: rgba(76, 127, 163, 0.12);
  color: #173d57;
  border-color: rgba(76, 127, 163, 0.32);
}

.water-balance-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.wb-stat {
  display: grid;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(30, 61, 43, 0.04);
  border: 1px solid rgba(30, 61, 43, 0.08);
}

.wb-stat-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-forest);
}

.wb-stat-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0d1411;
  letter-spacing: -0.005em;
}

/* Stat de destaque (balanço final) — usa a cor semântica do status. */
.wb-stat--accent.is-surplus {
  background: rgba(46, 107, 63, 0.08);
  border-color: rgba(46, 107, 63, 0.25);
}
.wb-stat--accent.is-surplus .wb-stat-value { color: #1e3d2b; }

.wb-stat--accent.is-deficit {
  background: rgba(185, 71, 71, 0.08);
  border-color: rgba(185, 71, 71, 0.28);
}
.wb-stat--accent.is-deficit .wb-stat-value { color: #7a2a2a; }

.wb-stat--accent.is-balanced {
  background: rgba(76, 127, 163, 0.08);
  border-color: rgba(76, 127, 163, 0.25);
}
.wb-stat--accent.is-balanced .wb-stat-value { color: #173d57; }

/* Mini-barras horizontais por mês — verde = excedente do mês, vermelho =
   déficit do mês. Track centralizada com barra crescendo a partir do meio. */
/* Warnings sutis dentro do card de balanço — destaque sem agressividade. */
.water-balance-warning {
  font-size: 0.66rem;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 187, 51, 0.12);
  border: 1px solid rgba(255, 187, 51, 0.32);
  color: #6b4f00;
  font-weight: 600;
  line-height: 1.3;
}

.water-balance-warning--soft {
  background: rgba(76, 127, 163, 0.08);
  border-color: rgba(76, 127, 163, 0.22);
  color: #173d57;
}

.water-balance-monthly {
  display: grid;
  gap: 3px;
  padding-top: 2px;
}

.wb-month {
  display: grid;
  grid-template-columns: 32px 1fr 50px;
  gap: 8px;
  align-items: center;
  font-size: 0.66rem;
}

.wb-month-label {
  font-weight: 700;
  color: var(--brand-forest);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wb-month-bar-track {
  position: relative;
  height: 8px;
  background: rgba(30, 61, 43, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.wb-month-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
}

.wb-month-bar--positive {
  left: 50%;
  background: linear-gradient(90deg, rgba(46, 107, 63, 0.7), rgba(46, 107, 63, 0.95));
}

.wb-month-bar--negative {
  right: 50%;
  background: linear-gradient(270deg, rgba(185, 71, 71, 0.7), rgba(185, 71, 71, 0.95));
}

.wb-month-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #0d1411;
}

/* Toggle Ano hídrico ↔ Civil — chip pill com "Indicadores" estático + 2 chips
   clicáveis. Padrão segmented control. */
.year-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(30, 61, 43, 0.05);
  border: 1px solid rgba(30, 61, 43, 0.12);
}

.year-mode-chip {
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: var(--brand-forest);
  opacity: 0.6;
  cursor: pointer;
  transition: background 140ms ease, opacity 140ms ease, color 140ms ease,
    box-shadow 140ms ease;
}

/* Seletor de ano ao lado do toggle hídrico/civil. */
.year-mode-year-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(30, 61, 43, 0.18);
  background: #ffffff;
  color: var(--brand-forest-deep);
  padding: 5px 24px 5px 10px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%231e3d2b' stroke-width='1.6' stroke-linecap='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  box-shadow: 0 1px 2px rgba(15, 36, 22, 0.12);
}

.year-mode-year-select:hover {
  border-color: rgba(30, 61, 43, 0.35);
}

.year-mode-year-select:focus-visible {
  outline: none;
  border-color: var(--brand-forest-deep);
  box-shadow: 0 0 0 3px rgba(46, 107, 63, 0.32);
}

.year-mode-chip:hover {
  opacity: 0.95;
  color: var(--brand-forest-deep);
}

.year-mode-chip.is-active {
  background: #ffffff;
  color: var(--brand-forest-deep);
  opacity: 1;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 2px 6px rgba(15, 36, 22, 0.12),
    0 0 0 1px rgba(30, 61, 43, 0.06);
}

/* Chip estático "Indicadores" — LABEL puro (não tem aparência de pílula
   nem hover). Uppercase + letter-spacing dá autoridade de título sem
   parecer botão desativado. Separador vertical elegante à direita. */
.year-mode-chip.is-static {
  cursor: default;
  opacity: 1;
  color: var(--brand-forest-deep);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px 6px 10px;
  margin-right: 4px;
  pointer-events: none;
  position: relative;
}

/* Separador vertical fino à direita do label, formando a divisão visual
   entre "Indicadores" e os chips clicáveis (Ano hídrico / Ano civil). */
.year-mode-chip.is-static::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(30, 61, 43, 0.22);
}

/* (regra :hover removida — chip-static tem pointer-events:none, hover não dispara) */

.analysis-section:last-child {
  margin-bottom: 0;
}

.analysis-section h3 {
  margin: 0 0 4px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--brand-forest-deep);
  letter-spacing: -0.005em;
}

.analysis-section-copy {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: #86a6ba;
  line-height: 1.4;
}

.analysis-key-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 0;
}

.analysis-key-facts > div {
  background: rgba(244, 248, 252, 0.7);
  border: 1px solid rgba(45, 91, 63, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
}

.analysis-key-facts dt {
  font-size: 0.66rem;
  color: #86a6ba;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}

.analysis-key-facts dd {
  margin: 4px 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1b302b;
}

.analysis-source-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.analysis-source-card {
  background: rgba(244, 248, 252, 0.6);
  border: 1px solid rgba(45, 91, 63, 0.1);
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  gap: 4px;
}

.analysis-source-card.is-ready {
  border-color: rgba(31, 156, 110, 0.35);
  background: rgba(232, 248, 240, 0.7);
}

.analysis-source-card.is-empty {
  opacity: 0.78;
}

.analysis-source-card strong {
  font-size: 0.92rem;
  color: #1b302b;
}

.analysis-source-status {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #5a7068;
}

.analysis-source-card.is-ready .analysis-source-status {
  color: #1c8a64;
}

.analysis-source-card small {
  font-size: 0.74rem;
  color: #86a6ba;
  line-height: 1.35;
}

/* Attributes table redesign */
.attr-table {
  table-layout: fixed;
  width: 100%;
}

.attr-table th:first-child {
  width: 40%;
}

.attr-cell-label {
  vertical-align: top;
}

.attr-cell-label strong {
  display: block;
  font-size: 0.92rem;
  color: #1b302b;
}

.attr-cell-label code {
  display: inline-block;
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  color: #86a6ba;
  background: rgba(45, 91, 63, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
}

.attr-cell-label small {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: #5a7068;
  line-height: 1.4;
  white-space: normal;
}

.attr-cell-value {
  vertical-align: top;
  font-weight: 600;
  color: #1f3d5b;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
  white-space: normal;
}

.analysis-compact-attr-table {
  table-layout: fixed;
}

.analysis-compact-attr-table th:first-child,
.analysis-compact-attr-table td:first-child {
  width: 42%;
}

.analysis-compact-attr-table strong {
  display: block;
  color: #1b302b;
}

.analysis-compact-attr-table code {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(45, 91, 63, 0.06);
  color: #86a6ba;
  font-size: 0.7rem;
}

.analysis-compact-attr-table td {
  white-space: normal;
  word-break: break-word;
}

/* === Analysis view header actions === */
.analysis-view-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

/* === Print mode: stack all analysis sub-panels === */
@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  body * { visibility: hidden; }
  #analysis-view, #analysis-view * { visibility: visible; }
  #analysis-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px !important;
    background: #fff !important;
    color-adjust: exact;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .analysis-view-head {
    box-shadow: none !important;
    border-color: rgba(45, 91, 63, 0.18) !important;
    margin-bottom: 10px;
  }
  .analysis-subtabs,
  .analysis-view-actions {
    display: none !important;
  }
  .analysis-panel {
    display: block !important;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 18px;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
  }
  .analysis-panel + .analysis-panel {
    page-break-before: auto;
  }
  .analysis-report-cover {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .analysis-executive-grid,
  .analysis-summary-grid {
    grid-template-columns: 1fr 0.85fr;
  }
  .analysis-mini-map-card,
  .analysis-section {
    box-shadow: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .analysis-table-wrapper,
  .trend-monthly-table {
    overflow: visible !important;
    max-height: none !important;
  }
  .analysis-table th {
    position: static !important;
  }
  .workspace-header,
  .workspace-grid,
  .workspace-management-panel,
  #analysis-view-close,
  #analysis-view-print {
    display: none !important;
  }
}

/* On-screen mode while print is being prepared (all panels visible briefly) */
body.is-printing-analysis [data-analysis-panel] {
  display: block !important;
}/* LULC comparativo (MapBiomas 2020 → 2024). Barras horizontais empilhadas
   por ano, com legenda no topo e classe dominante no fim de cada linha. */
.lulc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  font-size: 0.72rem;
  margin: 8px 0 14px;
  color: var(--brand-forest-deep);
}

.lulc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.lulc-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* LULC vertical: uma coluna por ano, segmentos empilhados de cima pra baixo.
   Visual estilo "tijolinhos" do MapBiomas histórico. */
.lulc-chart {
  display: grid;
  /* Colunas mais largas — sem o rodapé com classe dominante, sobra espaço pra
     a barra principal respirar. Min 70px / max 110px deixa as colunas se
     adaptarem ao container mas com presença visual maior. */
  grid-template-columns: repeat(auto-fit, minmax(70px, 110px));
  justify-content: center;
  gap: 14px;
  padding: 6px 0;
}

.lulc-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.lulc-col-bar {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 140px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(76, 127, 163, 0.18);
  background: rgba(244, 248, 252, 0.7);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 2px 6px rgba(30, 78, 110, 0.06);
  align-items: stretch;
}

.lulc-col-segment {
  display: block;
  width: 100%;
  min-height: 2px;
  transition: opacity 120ms ease, transform 120ms ease;
}

.lulc-col-segment:hover {
  opacity: 0.85;
  transform: scaleX(1.04);
}

.lulc-col-year {
  /* Sans-serif tabular: anos alinham bonito coluna a coluna, sem o peso "datado" do Playfair em corpo pequeno. */
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--brand-navy);
}

.lulc-col.is-empty .lulc-col-bar {
  align-items: center;
  justify-content: center;
}

.lulc-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: rgba(45, 91, 63, 0.5);
  font-style: italic;
  padding: 0 4px;
  text-align: center;
}.cobertura-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-analysis-panel="cobertura"] code {
  display: inline-block;
  margin-left: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.7rem;
  color: #86a6ba;
  background: rgba(45, 91, 63, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ============================================================== */
/* === Admin v2 — forest+canvas redesign (final, overrides legacy) */
/* ============================================================== */
/* Substitui os tons navy/azulados do legado pelo identity forest+canvas
   do workspace. Compacta layout, alinha tabs+primary buttons com o
   resto do app, e silencia a hierarquia perfil-admin/cliente/tabs. */

/* --- Shell + wallpaper ---------------------------------------- */

.workspace-management-shell {
  background: linear-gradient(180deg, var(--brand-canvas) 0%, #eef2ec 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  gap: 12px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 8px 22px rgba(15, 23, 42, 0.10) !important;
}

.workspace-management-shell::before {
  opacity: 0.06 !important; /* wallpaper mais discreto */
}

/* --- Card raiz (admin-panel-flat) ----------------------------- */

#admin-profile-panel .admin-panel-flat {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 12px !important;
  max-height: none !important;
  overflow: visible !important;
}

/* --- Hero: admin name + invite code --------------------------- */

#admin-profile-panel .admin-panel-hero-flat {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 2px 8px rgba(15, 23, 42, 0.06) !important;
  flex-wrap: wrap !important;
}

#admin-profile-panel .admin-panel-hero-copy .eyebrow {
  margin: 0 !important;
  color: var(--brand-forest) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  opacity: 0.78 !important;
}

#admin-profile-panel .admin-panel-hero-copy strong {
  color: var(--brand-forest-deep) !important;
  font-family: var(--font-serif) !important;
  font-size: 1.18rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  line-height: 1.15 !important;
}

#admin-profile-panel .admin-panel-hero-copy small {
  color: rgba(30, 61, 43, 0.62) !important;
  font-size: 0.74rem !important;
}

/* Invite code group: row inline, no grid stack */
#admin-profile-panel .admin-panel-header-code {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  grid-template-columns: none !important;
}

#admin-profile-panel .admin-panel-header-code-label {
  grid-column: auto !important;
  color: var(--brand-forest) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  opacity: 0.7 !important;
}

#admin-profile-panel .admin-panel-header-code code {
  background: rgba(30, 61, 43, 0.06) !important;
  border: 1px solid rgba(30, 61, 43, 0.18) !important;
  color: var(--brand-forest-deep) !important;
  padding: 5px 11px !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

#admin-profile-panel .admin-panel-header-code button.ghost-button {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(30, 61, 43, 0.16) !important;
  color: var(--brand-forest-deep) !important;
  padding: 5px 11px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

#admin-profile-panel .admin-panel-header-code button.ghost-button:hover {
  background: #ffffff !important;
  border-color: var(--brand-forest) !important;
}

/* --- Body grid: sidebar + detail ------------------------------ */

#admin-profile-panel .admin-panel-flat .admin-panel-body {
  display: grid !important;
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

/* --- Sidebar (Clientes list) ---------------------------------- */

#admin-profile-panel .admin-panel-flat .admin-panel-sidebar {
  display: grid !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-sidebar-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 2px 4px 8px !important;
  border-bottom: 1px solid rgba(30, 61, 43, 0.08) !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-sidebar-head strong {
  color: var(--brand-forest-deep) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-sidebar-count {
  color: var(--brand-forest) !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  background: rgba(30, 61, 43, 0.06) !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(30, 61, 43, 0.12) !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-sidebar-list {
  max-height: 420px !important;
  padding: 1px !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-row {
  padding: 8px 10px !important;
  background: transparent !important;
  border-radius: 8px !important;
  color: rgba(30, 61, 43, 0.7) !important;
  transition: background 120ms ease, color 120ms ease !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-row:hover {
  background: rgba(30, 61, 43, 0.05) !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-row.is-selected {
  background: rgba(30, 61, 43, 0.10) !important;
  color: var(--brand-forest-deep) !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-row.is-selected::before {
  background: var(--brand-forest) !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-row strong,
#admin-profile-panel .admin-panel-flat .admin-client-row .admin-client-row-main strong {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: inherit !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-row small {
  font-size: 0.68rem !important;
  color: rgba(30, 61, 43, 0.55) !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-chip {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(30, 61, 43, 0.14) !important;
  color: rgba(30, 61, 43, 0.62) !important;
  font-size: 0.58rem !important;
  padding: 1px 6px !important;
  font-weight: 700 !important;
}

#admin-profile-panel .admin-panel-flat .admin-client-chip.is-on {
  background: rgba(46, 160, 96, 0.12) !important;
  color: #1f6b3b !important;
  border-color: rgba(46, 160, 96, 0.30) !important;
}

/* "+" compact summary (new client) — forest tone */
#admin-profile-panel .admin-panel-new-compact > summary {
  width: 22px !important;
  height: 22px !important;
  border: 1px solid rgba(30, 61, 43, 0.22) !important;
  background: rgba(30, 61, 43, 0.06) !important;
  color: var(--brand-forest-deep) !important;
}

#admin-profile-panel .admin-panel-new-compact > summary:hover {
  background: rgba(30, 61, 43, 0.12) !important;
}

#admin-profile-panel .admin-panel-new-compact[open] > summary {
  background: rgba(30, 61, 43, 0.16) !important;
}

#admin-profile-panel .admin-panel-new-compact .admin-panel-new-form {
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14) !important;
}

/* --- Detail pane (right column) ------------------------------- */

#admin-profile-panel .admin-panel-flat .admin-panel-detail {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset !important;
  gap: 12px !important;
}

/* Detail head: cliente name + "No mapa" — muted, since name aparece
   também na sidebar selecionada. Não compete com o hero principal. */
#admin-profile-panel .admin-panel-detail-head-flat {
  padding: 0 0 10px !important;
  border-bottom: 1px solid rgba(30, 61, 43, 0.08) !important;
}

#admin-profile-panel .admin-panel-detail-head-flat .admin-panel-detail-copy strong {
  color: var(--brand-forest-deep) !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
}

#admin-profile-panel .admin-panel-detail-head-flat .admin-panel-detail-copy small {
  color: rgba(30, 61, 43, 0.6) !important;
  font-size: 0.72rem !important;
}

#admin-profile-panel .admin-panel-detail-head-flat .ghost-button {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(30, 61, 43, 0.16) !important;
  color: var(--brand-forest-deep) !important;
  padding: 5px 12px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

#admin-profile-panel .admin-panel-detail-head-flat .ghost-button:hover {
  background: #ffffff !important;
  border-color: var(--brand-forest) !important;
}

/* --- Detail tabs (Dados / Arquivos / Usuários) ---------------- */
/* Mesma família visual das workspace tabs e analysis-subtabs. */

#admin-profile-panel .management-detail-tabs-flat {
  background: rgba(30, 61, 43, 0.05) !important;
  border: 1px solid rgba(30, 61, 43, 0.12) !important;
  border-radius: 999px !important;
  padding: 3px !important;
  gap: 2px !important;
}

#admin-profile-panel .management-detail-tabs-flat .management-detail-tab {
  background: transparent !important;
  color: var(--brand-forest) !important;
  padding: 5px 16px !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  opacity: 0.7 !important;
  min-height: 28px !important;
}

#admin-profile-panel .management-detail-tabs-flat .management-detail-tab:hover {
  background: rgba(30, 61, 43, 0.08) !important;
  color: var(--brand-forest-deep) !important;
  opacity: 1 !important;
}

#admin-profile-panel .management-detail-tabs-flat .management-detail-tab.is-active {
  background: linear-gradient(180deg, #2a4f37 0%, #1e3d2b 100%) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 3px 10px rgba(15, 36, 22, 0.22) !important;
}

/* --- Tab: Dados (form) ---------------------------------------- */

#admin-profile-panel .admin-panel-flat .admin-panel-form .inline-field span {
  color: var(--brand-forest) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-form input,
#admin-profile-panel .admin-panel-flat .admin-panel-form textarea {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(30, 61, 43, 0.16) !important;
  color: var(--brand-forest-deep) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-size: 0.84rem !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-form input:focus,
#admin-profile-panel .admin-panel-flat .admin-panel-form textarea:focus {
  outline: 0 !important;
  border-color: var(--brand-forest) !important;
  background: #ffffff !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-form-actions {
  border-top: 1px solid rgba(30, 61, 43, 0.08) !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-form-actions .ghost-button {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(30, 61, 43, 0.16) !important;
  color: var(--brand-forest-deep) !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-form-actions .primary-button {
  background: linear-gradient(180deg, #2a4f37 0%, #1e3d2b 100%) !important;
  border: 1px solid rgba(15, 36, 22, 0.55) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 3px 10px rgba(15, 36, 22, 0.24) !important;
}

#admin-profile-panel .admin-panel-flat .admin-panel-form-actions .primary-button:hover {
  background: linear-gradient(180deg, #356244 0%, #284a36 100%) !important;
}

/* --- Tab: Arquivos (toolbar + sections) ----------------------- */

#admin-profile-panel .management-toolbar-flat {
  background: rgba(30, 61, 43, 0.04) !important;
  border: 1px solid rgba(30, 61, 43, 0.10) !important;
  border-radius: 10px !important;
  padding: 7px 10px !important;
}

#admin-profile-panel .management-toolbar-search {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(30, 61, 43, 0.14) !important;
  color: var(--brand-forest-deep) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 0.8rem !important;
}

#admin-profile-panel .management-toolbar-search::placeholder {
  color: rgba(30, 61, 43, 0.42) !important;
}

#admin-profile-panel .management-toolbar-search:focus {
  border-color: var(--brand-forest) !important;
}

#admin-profile-panel .management-toolbar-flat .management-view-switch {
  background: rgba(30, 61, 43, 0.06) !important;
  border: 1px solid rgba(30, 61, 43, 0.12) !important;
  border-radius: 999px !important;
  padding: 2px !important;
}

#admin-profile-panel .management-toolbar-flat .management-view-chip {
  color: var(--brand-forest) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  opacity: 0.7 !important;
  padding: 4px 11px !important;
}

#admin-profile-panel .management-toolbar-flat .management-view-chip:hover {
  background: rgba(30, 61, 43, 0.06) !important;
  color: var(--brand-forest-deep) !important;
  opacity: 1 !important;
}

#admin-profile-panel .management-toolbar-flat .management-view-chip.is-active {
  background: linear-gradient(180deg, #2a4f37 0%, #1e3d2b 100%) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  box-shadow: 0 2px 6px rgba(15, 36, 22, 0.22) !important;
}

#admin-profile-panel .management-toolbar-sort {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(30, 61, 43, 0.14) !important;
  color: var(--brand-forest-deep) !important;
  border-radius: 8px !important;
  padding: 5px 9px !important;
  font-size: 0.78rem !important;
}

#admin-profile-panel .management-toolbar-refresh {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(30, 61, 43, 0.16) !important;
  color: var(--brand-forest-deep) !important;
  border-radius: 8px !important;
}

#admin-profile-panel .management-toolbar-refresh:hover {
  background: #ffffff !important;
  border-color: var(--brand-forest) !important;
}

/* Asset sections (Raster / Vetores / Uploads / Histórico) */
#admin-profile-panel .management-assets-section-flat {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(30, 61, 43, 0.08) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
}

#admin-profile-panel .management-assets-section-flat.management-assets-section-emphasis {
  background: rgba(30, 61, 43, 0.05) !important;
  border-color: rgba(30, 61, 43, 0.16) !important;
}

#admin-profile-panel .management-assets-section-head-flat {
  border-bottom: 1px solid rgba(30, 61, 43, 0.08) !important;
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
}

#admin-profile-panel .management-assets-section-head-flat strong.feature-title {
  color: var(--brand-forest-deep) !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
}

#admin-profile-panel .management-assets-section-head-flat .ghost-button {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(30, 61, 43, 0.16) !important;
  color: var(--brand-forest-deep) !important;
  padding: 4px 11px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
}

#admin-profile-panel .management-assets-section-head-flat .ghost-button:hover {
  background: #ffffff !important;
  border-color: var(--brand-forest) !important;
}

#admin-profile-panel .management-assets-section-head-flat .ghost-button.danger-button {
  color: #9c2424 !important;
  border-color: rgba(180, 60, 60, 0.28) !important;
  background: rgba(200, 80, 80, 0.04) !important;
}

#admin-profile-panel .management-assets-section-head-flat .ghost-button.danger-button:hover {
  background: rgba(200, 80, 80, 0.10) !important;
}

/* Source meta chips (raster: anos / meses / padrão) */
#admin-profile-panel .management-assets-section-flat .source-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 0 0 !important;
}

#admin-profile-panel .management-assets-section-flat .source-meta .summary-chip {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(30, 61, 43, 0.06) !important;
  border: 1px solid rgba(30, 61, 43, 0.14) !important;
  color: var(--brand-forest) !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

/* Asset rows */
#admin-profile-panel .management-assets-list-flat .asset-row {
  padding: 7px 10px !important;
}

#admin-profile-panel .management-assets-list-flat .asset-row + .asset-row {
  border-top: 1px solid rgba(30, 61, 43, 0.06) !important;
}

#admin-profile-panel .management-assets-list-flat .asset-row:hover {
  background: rgba(30, 61, 43, 0.04) !important;
}

#admin-profile-panel .asset-row-name {
  color: var(--brand-forest-deep) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

#admin-profile-panel .asset-row-desc {
  color: rgba(30, 61, 43, 0.6) !important;
  font-size: 0.72rem !important;
}

#admin-profile-panel .asset-row-meta .summary-chip,
#admin-profile-panel .asset-row-meta .source-chip {
  background: rgba(30, 61, 43, 0.05) !important;
  border: 1px solid rgba(30, 61, 43, 0.12) !important;
  color: var(--brand-forest) !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
}

#admin-profile-panel .asset-row-time {
  color: rgba(30, 61, 43, 0.45) !important;
  font-size: 0.66rem !important;
}

#admin-profile-panel .asset-row-actions .ghost-button {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(30, 61, 43, 0.16) !important;
  color: var(--brand-forest-deep) !important;
  padding: 4px 10px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
}

#admin-profile-panel .asset-row-actions .ghost-button:hover {
  background: #ffffff !important;
  border-color: var(--brand-forest) !important;
}

#admin-profile-panel .asset-row-actions .ghost-button.danger-button {
  color: #9c2424 !important;
  border-color: rgba(180, 60, 60, 0.28) !important;
}

#admin-profile-panel .asset-row-actions .ghost-button.danger-button:hover {
  background: rgba(200, 80, 80, 0.08) !important;
}

/* Alerts inline */
#admin-profile-panel .management-alert-line {
  background: rgba(255, 200, 90, 0.12) !important;
  border: 1px solid rgba(255, 175, 60, 0.28) !important;
  color: #6b4810 !important;
  border-radius: 8px !important;
  padding: 7px 11px !important;
  font-size: 0.76rem !important;
}

#admin-profile-panel .management-alert-line strong {
  color: #6b4810 !important;
}

#admin-profile-panel .management-alert-line.tone-info {
  background: rgba(30, 61, 43, 0.06) !important;
  border-color: rgba(30, 61, 43, 0.18) !important;
  color: var(--brand-forest-deep) !important;
}

#admin-profile-panel .management-alert-line.tone-info strong {
  color: var(--brand-forest-deep) !important;
}

/* Raster defaults form */
#admin-profile-panel .management-raster-defaults {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(30, 61, 43, 0.10) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  margin-top: 8px !important;
  gap: 8px !important;
}

#admin-profile-panel .management-raster-defaults label span {
  color: var(--brand-forest) !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

#admin-profile-panel .management-raster-defaults select {
  background: #ffffff !important;
  border: 1px solid rgba(30, 61, 43, 0.16) !important;
  color: var(--brand-forest-deep) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 0.82rem !important;
}

#admin-profile-panel .management-raster-defaults select:focus {
  outline: 0 !important;
  border-color: var(--brand-forest) !important;
}

#admin-profile-panel .management-raster-defaults .ghost-button {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(30, 61, 43, 0.16) !important;
  color: var(--brand-forest-deep) !important;
}

#admin-profile-panel .management-raster-defaults .primary-button {
  background: linear-gradient(180deg, #2a4f37 0%, #1e3d2b 100%) !important;
  border: 1px solid rgba(15, 36, 22, 0.55) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 8px rgba(15, 36, 22, 0.22) !important;
}

#admin-profile-panel .management-raster-defaults .primary-button:hover {
  background: linear-gradient(180deg, #356244 0%, #284a36 100%) !important;
}

#admin-profile-panel .management-raster-defaults .primary-button:disabled,
#admin-profile-panel .management-raster-defaults .ghost-button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Disclosures (raster defaults + calendar + history) — pílulas
   forest finas, alinhadas com o resto da UI */
#admin-profile-panel .management-raster-defaults-disclosure summary,
#admin-profile-panel .management-calendar-disclosure summary,
#admin-profile-panel .management-history-disclosure summary {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(30, 61, 43, 0.14) !important;
  border-radius: 999px !important;
  color: var(--brand-forest) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  margin-top: 6px !important;
}

#admin-profile-panel .management-raster-defaults-disclosure summary::before,
#admin-profile-panel .management-calendar-disclosure summary::before,
#admin-profile-panel .management-history-disclosure summary::before {
  color: var(--brand-forest) !important;
}

#admin-profile-panel .management-raster-defaults-disclosure summary:hover,
#admin-profile-panel .management-calendar-disclosure summary:hover,
#admin-profile-panel .management-history-disclosure summary:hover {
  background: #ffffff !important;
  border-color: var(--brand-forest) !important;
  color: var(--brand-forest-deep) !important;
}

#admin-profile-panel .management-raster-defaults-disclosure summary .summary-chip,
#admin-profile-panel .management-calendar-disclosure summary .summary-chip,
#admin-profile-panel .management-history-disclosure summary .summary-chip {
  background: rgba(30, 61, 43, 0.08) !important;
  border: 1px solid rgba(30, 61, 43, 0.16) !important;
  color: var(--brand-forest-deep) !important;
  font-size: 0.62rem !important;
  padding: 1px 7px !important;
}

/* Histórico section: silence the wrapper since the disclosure already
   has its own visual treatment */
#admin-profile-panel .management-assets-section-subtle {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Empty uploads line */
#admin-profile-panel .management-assets-empty-line {
  color: rgba(30, 61, 43, 0.5) !important;
  font-size: 0.74rem !important;
  font-style: italic !important;
  padding: 6px 10px !important;
}

/* Asset grid — reduce gap, align sections to top so a short Raster
   não estica pra acompanhar a altura da coluna de Vetores. */
#admin-profile-panel .management-assets-grid {
  display: grid !important;
  gap: 8px !important;
  align-items: start !important;
}

#admin-profile-panel .management-assets-section-flat {
  align-self: start !important;
}

/* --- Tab: Usuários -------------------------------------------- */

#admin-profile-panel .admin-users-card {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(30, 61, 43, 0.08) !important;
  border-radius: 10px !important;
  padding: 12px !important;
}

#admin-profile-panel .admin-users-head {
  border-bottom: 1px solid rgba(30, 61, 43, 0.08) !important;
  padding-bottom: 8px !important;
}

#admin-profile-panel .admin-users-head strong {
  color: var(--brand-forest-deep) !important;
  font-size: 0.88rem !important;
}

#admin-profile-panel .admin-users-head small,
#admin-profile-panel .admin-users-note {
  color: rgba(30, 61, 43, 0.6) !important;
  font-size: 0.72rem !important;
}

#admin-profile-panel .admin-users-count {
  background: rgba(30, 61, 43, 0.06) !important;
  border-color: rgba(30, 61, 43, 0.16) !important;
  color: var(--brand-forest) !important;
}

#admin-profile-panel .admin-ownership-row,
#admin-profile-panel .admin-user-row {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(30, 61, 43, 0.08) !important;
  border-radius: 10px !important;
  padding: 9px 11px !important;
}

#admin-profile-panel .admin-ownership-main strong,
#admin-profile-panel .admin-user-copy strong {
  color: var(--brand-forest-deep) !important;
}

#admin-profile-panel .admin-ownership-main small,
#admin-profile-panel .admin-user-copy small,
#admin-profile-panel .admin-user-meta span {
  color: rgba(30, 61, 43, 0.55) !important;
}

#admin-profile-panel .admin-ownership-clients span,
#admin-profile-panel .admin-user-role {
  background: rgba(30, 61, 43, 0.06) !important;
  border: 1px solid rgba(30, 61, 43, 0.14) !important;
  color: var(--brand-forest) !important;
  font-size: 0.64rem !important;
}

#admin-profile-panel .admin-user-actions .compact-button {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(30, 61, 43, 0.16) !important;
  color: var(--brand-forest-deep) !important;
}

#admin-profile-panel .admin-user-actions .compact-button:hover {
  background: #ffffff !important;
  border-color: var(--brand-forest) !important;
}

#admin-profile-panel .admin-user-actions .danger-button {
  color: #9c2424 !important;
  border-color: rgba(180, 60, 60, 0.28) !important;
  background: rgba(200, 80, 80, 0.04) !important;
}

#admin-profile-panel .admin-user-actions .danger-button:hover {
  background: rgba(200, 80, 80, 0.10) !important;
}

/* --- Mobile responsive ---------------------------------------- */
@media (max-width: 900px) {
  #admin-profile-panel .admin-panel-flat .admin-panel-body {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}