/* ============================================================
   CONSOLIDATED BUNDLED CSS — Prêmio Municípios Mineradores 2026
   Created automatically to simplify WordPress/Divi integration.
   ============================================================ */

/* --- Source: fonts.css --- */
/* ============================================================
   FONTS — Prêmio Municípios Mineradores
   ------------------------------------------------------------
   Brand typography:
     Barlow Semi Condensed — TÍTULOS / headings & display.
       Condensed grotesque; strong, institutional, great for the
       award titling and section headers.
     Bricolage Grotesque  — TEXTOS / body, UI & paragraphs.
       Characterful humanist grotesque for readable body copy.
     JetBrains Mono — numeric/indicator data, dates, codes, the
       mono eyebrow ("overline") label.

   Loaded from Google Fonts. Swap for official binaries if the
   brand ships hosted webfonts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500;600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=JetBrains+Mono:wght@400;500;700&display=swap');


/* --- Source: colors.css --- */
/* ============================================================
   COLORS — Prêmio Municípios Mineradores
   ------------------------------------------------------------
   INTERPRETIVE PALETTE. Grounded in the brand essence — mining /
   mineral earth + a gold "award" accent + a sustainability green
   for "Minerando Futuros" + institutional gravitas. Exact brand
   hex values are NOT confirmed; treat these as a starting point.
   ============================================================ */

:root {
  /* ---- Base scale: warm mineral neutrals (sand → ore → ink) ---- */
  --sand-50:  #FBF7EF;   /* lightest paper / page background */
  --sand-100: #F5ECDC;   /* cream surface */
  --sand-200: #EADcC4;   /* raised sand */
  --sand-300: #D9C6A6;   /* muted sand border */
  --stone-400:#B19C7E;   /* stone / disabled text */
  --stone-500:#8C7960;   /* muted text on light */
  --stone-600:#6A5944;   /* secondary text */
  --earth-700:#4A3B2A;   /* deep earth */
  --earth-800:#2E2316;   /* near-black soil */
  --ink-900:  #1A130B;   /* ink — darkest, mineral black-brown */

  /* ---- Gold / Ouro (primary accent — award, CFEM, highlight) ---- */
  --gold-100: #F6E6C4;
  --gold-300: #E5BE72;
  --gold-500: #C98A2B;   /* primary gold */
  --gold-600: #AE7220;   /* gold pressed / on-light text */
  --gold-700: #8A591A;

  /* ---- Cobre / Terracotta (secondary — iron-earth, energy) ---- */
  --copper-300: #DDA07A;
  --copper-500: #B0552E;   /* terracotta */
  --copper-600: #93431F;

  /* ---- Verde / Mata (tertiary — sustainability, "futuros", ESG) ---- */
  --green-100: #DCE7D5;
  --green-500: #2F6B45;   /* forest green */
  --green-600: #245538;
  --green-700: #1B4029;

  /* ---- Azul mineral (cool support — water, institutional links) ---- */
  --blue-100: #D6E2E6;
  --blue-500: #2C6E7E;
  --blue-600: #235764;

  /* ---- Pure ---- */
  --white: #FFFFFF;
  --black: #000000;

  /* ---- Status ---- */
  --success: #2F6B45;
  --warning: #C98A2B;
  --danger:  #A8331F;
  --info:    #2C6E7E;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components, not raws.
     ============================================================ */

  /* Surfaces */
  --surface-page:    var(--sand-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--sand-100);
  --surface-raised:  var(--sand-200);
  --surface-inverse: var(--ink-900);
  --surface-accent:  var(--gold-500);

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--earth-700);
  --text-muted:    var(--stone-500);
  --text-subtle:   var(--stone-400);
  --text-on-dark:  var(--sand-50);
  --text-on-accent:var(--ink-900);
  --text-link:     var(--copper-600);

  /* Borders */
  --border-subtle: #E7DAC4;
  --border-default:var(--sand-300);
  --border-strong: var(--earth-700);
  --border-accent: var(--gold-500);

  /* Brand roles */
  --brand-primary:   var(--gold-500);
  --brand-secondary: var(--copper-500);
  --brand-tertiary:  var(--green-500);
  --brand-ink:       var(--ink-900);

  /* Focus ring */
  --focus-ring: var(--gold-600);

  /* ---- Category accent map (8 prize dimensions) ---- */
  --cat-saude:        #A8331F;  /* health — vermilion */
  --cat-educacao:     #2C6E7E;  /* education — mineral blue */
  --cat-protecao:     #B0552E;  /* social protection — copper */
  --cat-ambiente:     #2F6B45;  /* environment — green */
  --cat-financas:     #C98A2B;  /* public finance — gold */
  --cat-infra:        #6A5944;  /* infrastructure — stone */
  --cat-economico:    #235764;  /* economic dev — deep teal */
  --cat-gestao:       #8A591A;  /* management — bronze */
}


/* --- Source: typography.css --- */
/* ============================================================
   TYPOGRAPHY — Prêmio Municípios Mineradores
   Type families, scale, weights, line-heights, tracking.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-sans:    "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---- Weights ---- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-black:    800; /* @kind font */

  /* ---- Type scale (1.250 major-third-ish, tuned) ---- */
  --text-2xs: 0.6875rem;  /* 11px — micro labels */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-md:  1rem;       /* 16px — base body */
  --text-lg:  1.125rem;   /* 18px */
  --text-xl:  1.375rem;   /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 3rem;       /* 48px */
  --text-5xl: 4rem;       /* 64px */
  --text-6xl: 5.5rem;     /* 88px — hero */

  /* ---- Line heights ---- */
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-label:  0.16em;  /* overline / eyebrow labels (uppercase) */
}


/* --- Source: spacing.css --- */
/* ============================================================
   SPACING, RADII, SHADOWS, BORDERS, MOTION, LAYOUT
   Prêmio Municípios Mineradores
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ---- Radii — soft, restrained; institutional, not bubbly ---- */
  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --border-thin:  1px;
  --border-base:  1.5px;
  --border-thick: 2px;

  /* ---- Shadows — warm-tinted, soft, low-contrast (paper feel) ---- */
  --shadow-xs: 0 1px 2px rgba(46, 35, 22, 0.06);
  --shadow-sm: 0 2px 6px rgba(46, 35, 22, 0.08);
  --shadow-md: 0 8px 20px -6px rgba(46, 35, 22, 0.14);
  --shadow-lg: 0 20px 44px -12px rgba(26, 19, 11, 0.22);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --shadow-focus: 0 0 0 3px rgba(201, 138, 43, 0.35);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: var(--space-5);
}


/* --- Source: base.css --- */
/* ============================================================
   BASE — light element defaults & a few brand utility classes.
   Optional for consumers, but gives specimen cards & kits a
   consistent baseline.
   ============================================================ */

.pmm-root,
.pmm {
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-page);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings default to display family, ink, tight */
.pmm h1, .pmm h2, .pmm h3,
.pmm-display {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
  margin: 0;
}

/* Eyebrow / overline label — used all over the site
   ("Sobre o Prêmio", "Conheça as categorias", "contatos") */
.pmm-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-600);
}

#pmm-dashboard-container a { color: var(--text-link); text-decoration: none; }
#pmm-dashboard-container a:hover { text-decoration: underline; }

.pmm-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

#pmm-dashboard-container *:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}


/* --- Source: dashboard.css --- */
/* ============================================================
   DASHBOARD CSS — Prêmio Municípios Mineradores 2026
   Namespace: #pmm-dashboard-container
   Container queries are used for robust WordPress/Divi integration.
   ============================================================ */

#pmm-dashboard-container {
  container-type: inline-size;
  container-name: pmm-dashboard;
  width: 100%;
  font-family: var(--font-sans), system-ui, sans-serif;
  color: var(--text-body);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  margin: 24px 0;
}

#pmm-dashboard-container * {
  box-sizing: border-box;
}

/* ---- Typography Overrides ---- */
#pmm-dashboard-container h2,
#pmm-dashboard-container h3,
#pmm-dashboard-container h4 {
  font-family: var(--font-display), "Barlow Semi Condensed", sans-serif;
  color: var(--text-strong);
  margin-top: 0;
}

/* ---- Top Controls: Select & Search Lado a Lado ---- */
.pmm-top-controls {
  display: flex;
  gap: var(--space-4);
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 16px;
  align-items: center;
}

.pmm-select-wrapper {
  flex: 1.2;
  min-width: 240px;
  position: relative;
}

#pmm-dashboard-container .pmm-select-mun {
  width: 100%;
  padding: 12px 38px 12px 16px !important;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-strong);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238C7960' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 16px !important;
}

.pmm-select-mun:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: var(--shadow-focus);
}

.pmm-search-box-wrapper {
  flex: 1;
  min-width: 200px;
  position: relative;
}

#pmm-dashboard-container .pmm-search-input {
  width: 100%;
  padding: 12px 16px 12px 42px !important;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-strong);
  transition: all var(--dur-base) var(--ease-out);
}

.pmm-search-input:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: var(--shadow-focus);
}

.pmm-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* Autocomplete Results Dropdown */
.pmm-autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 250px;
  overflow-y: auto;
  z-index: 100;
  margin-top: var(--space-1);
  display: none;
}

.pmm-autocomplete-item {
  padding: 10px 16px;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-body);
  transition: background var(--dur-fast) var(--ease-out);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pmm-autocomplete-item:hover {
  background: var(--sand-100);
  color: var(--text-strong);
}

.pmm-autocomplete-item span.uf-badge {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  background: var(--sand-200);
  color: var(--stone-600);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
}

/* ---- Active Municipality Layout ---- */
.pmm-municipality-view {
  animation: fadeIn var(--dur-slow) var(--ease-out);
}

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

.pmm-municipality-header {
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pmm-municipality-title {
  font-size: var(--text-3xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin-bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pmm-uf-indicator {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--gold-600);
  border: 1.5px solid var(--gold-500);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.pmm-municipality-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
}

.pmm-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ---- Overview Grid (Stats) ---- */
.pmm-overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.pmm-stat-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--gold-500);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 80px;
}

.pmm-stat-num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-black);
  color: var(--text-strong);
  line-height: 1;
}

.pmm-stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0;
}

/* ---- Categories Grid ---- */
.pmm-categories-section-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--gold-600);
  text-transform: uppercase;
  font-family: var(--font-mono);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pmm-categories-section-title::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: var(--border-subtle);
}

.pmm-categories-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.pmm-category-card {
  background: var(--surface-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 6px;
  cursor: pointer;
  text-align: center;
  transition: all var(--dur-base) var(--ease-out);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.pmm-category-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--cat-color);
}

.pmm-category-card.active {
  border-color: var(--cat-color);
  background: var(--sand-50);
  box-shadow: var(--shadow-md);
}

.pmm-category-card.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cat-color);
}

.pmm-icon-medallion {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cat-color) 10%, var(--surface-card));
  color: var(--cat-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-base) var(--ease-out);
}

.pmm-category-card:hover .pmm-icon-medallion {
  transform: scale(1.08);
}

.pmm-category-name {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin: 0;
  line-height: var(--leading-tight);
}

/* ---- Indicators Detail Section: Grid de Cards ---- */
.pmm-detail-panel {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-top: var(--space-5);
  animation: slideDown var(--dur-slow) var(--ease-out);
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); max-height: 0; }
  to { opacity: 1; transform: translateY(0); max-height: 1500px; }
}

.pmm-panel-header {
  padding: var(--space-4) var(--space-5);
  background: var(--cat-color);
  color: var(--white);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pmm-panel-icon {
  width: 24px;
  height: 24px;
}

.pmm-panel-title {
  color: var(--white) !important;
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: 0;
}

.pmm-panel-body {
  padding: var(--space-5);
}

.pmm-indicators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.pmm-indicator-card {
  background: var(--surface-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 85px;
  transition: all var(--dur-base) var(--ease-out);
}

.pmm-indicator-card:hover {
  border-color: var(--cat-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.pmm-ind-card-label {
  font-size: 11px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0;
}

.pmm-ind-card-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-black);
  color: var(--text-strong);
  margin-bottom: 0;
  line-height: 1.1;
}

.pmm-ind-card-progress {
  width: 100%;
  margin-top: auto;
}

.pmm-progress-bg {
  width: 100%;
  height: 6px;
  background: var(--sand-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}

.pmm-progress-fill {
  height: 100%;
  background: var(--cat-color);
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease-out);
}

.pmm-ind-card-na {
  background: var(--surface-sunken);
  border-color: var(--border-subtle) !important;
  opacity: 0.85;
}

.pmm-ind-card-na .pmm-ind-card-value {
  font-size: var(--text-md);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  color: var(--text-subtle) !important;
}

.pmm-not-available-badge {
  font-size: var(--text-2xs);
  font-family: var(--font-mono);
  background: var(--sand-200);
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- Highlight StatCards gerais (Unificado) ---- */
.pmm-stat-card.pmm-stat-highlight {
  background: color-mix(in srgb, var(--gold-500) 22%, var(--surface-card)) !important;
  border-left: 3px solid var(--gold-500) !important;
}

.pmm-stat-card.pmm-stat-highlight .pmm-stat-num {
  color: var(--gold-600) !important;
}

.pmm-stat-card.pmm-stat-highlight .pmm-stat-label {
  color: var(--stone-600) !important;
}

/* ---- Theme highlights (Posição e índice por tema) ---- */
.pmm-theme-highlights {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.pmm-theme-highlight-card {
  padding: 0 0 var(--space-3) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: auto;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  box-shadow: none;
  margin-bottom: var(--space-3);
}

.pmm-theme-highlight-num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-black);
  line-height: 1.1;
}

.pmm-theme-highlight-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-top: 0;
  color: var(--text-muted);
}

/* ============================================================
   CONTAINER QUERIES (RESPONSIVENESS)
   ============================================================ */

/* Mobile view inside WordPress */
@container pmm-dashboard (max-width: 900px) {
  .pmm-categories-grid {
    grid-template-columns: repeat(4, 1fr); /* 2 linhas de 4 itens no tablet/mobile largo */
    gap: var(--space-2);
  }
}

@container pmm-dashboard (max-width: 700px) {
  .pmm-top-controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  
  .pmm-select-wrapper,
  .pmm-search-box-wrapper {
    width: 100%;
  }

  .pmm-categories-grid {
    grid-template-columns: repeat(4, 1fr); /* Mantém 4 colunas no mobile geral */
  }
  
  .pmm-municipality-title {
    font-size: var(--text-2xl);
  }
}

@container pmm-dashboard (max-width: 480px) {
  .pmm-categories-grid {
    grid-template-columns: repeat(2, 1fr); /* cai para 2 colunas em celulares muito estreitos */
  }

  .pmm-theme-highlights {
    grid-template-columns: 1fr; /* empilha os cards de destaque do tema em telas estreitas */
  }
  
  #pmm-dashboard-container {
    padding: var(--space-3);
  }
  
  .pmm-overview-stats {
    grid-template-columns: 1fr;
  }
}