/* ============================================================
   Radar Varietal · Grafana theme overrides
   Applies the "Radar Varietal Design System" (INASE / Quanam) to the
   public Grafana dashboard "Rendimiento por especie" (Grafana 11.6).

   Grafana's own class names are Emotion-generated hashes that change on
   every rebuild (e.g. "css-16qduxd-panel-container"), so selectors here
   target the stable parts only:
     - [data-testid="..."]           → Grafana's own stable test hooks
     - [class*="-some-suffix"]       → the readable half of Emotion's
                                        "css-<hash>-<label>" class names
   Everything is !important because Grafana ships its own theme CSS with
   high specificity, loaded after this stylesheet is not guaranteed.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --rv-blue:        #004a92;
  --rv-blue-deep:   #174186;
  --rv-blue-800:    #003d78;
  --rv-blue-600:    #1a5da3;
  --rv-blue-500:    #2f74bd;
  --rv-blue-100:    #d6e6f4;
  --rv-blue-50:     #eef5fb;

  --rv-green:       #80a055;
  --rv-green-600:   #6d9046;
  --rv-green-50:    #f2f6ea;

  --rv-gray-50:  #f5f7fa;
  --rv-gray-100: #eef1f5;
  --rv-gray-200: #dde3ea;
  --rv-gray-300: #c6cdd7;
  --rv-gray-400: #9aa3af;
  --rv-gray-500: #6f7681;
  --rv-gray-600: #575756;
  --rv-gray-700: #454545;
  --rv-gray-800: #2c2c2c;
  --rv-white:    #ffffff;

  --rv-danger: #931b34;

  --rv-font-sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rv-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --rv-radius-sm: 4px;
  --rv-radius-md: 6px;
  --rv-radius-lg: 10px;
  --rv-radius-pill: 999px;

  --rv-shadow-sm: 0 1px 3px rgba(5, 47, 90, 0.08), 0 1px 2px rgba(5, 47, 90, 0.04);
  --rv-shadow-md: 0 4px 12px rgba(5, 47, 90, 0.10), 0 2px 4px rgba(5, 47, 90, 0.05);
  --rv-shadow-focus: 0 0 0 3px rgba(47, 116, 189, 0.35);
}

/* ---------------------------------------------------------------
   Base / typography
   --------------------------------------------------------------- */
body,
button,
input,
select,
textarea,
.main-view {
  font-family: var(--rv-font-sans) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rv-font-sans) !important;
}

/* Page canvas */
body,
[class*="-page-wrapper"],
[class*="-canvas-wrapper-old"] {
  background: var(--rv-gray-50) !important;
}

/* ---------------------------------------------------------------
   Top app bar (logo, breadcrumb, search, help)
   --------------------------------------------------------------- */
.main-view > header {
  background: var(--rv-blue) !important;
  border-bottom: none !important;
  box-shadow: var(--rv-shadow-sm) !important;
}

/* ---------------------------------------------------------------
   Kiosk mode (?kiosk in the URL) — the public embed used in production.
   Grafana removes the <header> element entirely in this mode (it isn't
   just hidden), so none of the rules above ever apply here. The branding
   bar has to be built from scratch on ".main-view--chrome-hidden", the
   only stable root class kiosk mode still renders, using ::before for the
   bar itself + left logo and ::after for the right-side partner marks.
   --------------------------------------------------------------- */
/* Partner logos (INASE Uruguay / Quanam) — text-only marks pinned to the
   right edge of the bar. No brand image assets are available yet, so
   these are rendered as styled text; swap for real logo images
   (background-image / content: url()) once assets are provided.
   Everything lives in a single ::before (guaranteed first child, normal
   document flow) so the bar scrolls away with the page instead of
   staying pinned like a fixed header. */


.main-view > header img[alt="Grafana"] {
  filter: brightness(0) invert(1) !important;
}

.main-view > header button[aria-label="Open menu"],
.main-view > header button[aria-label="Buscar o saltar a..."],
.main-view > header button[aria-label="Help"] {
  color: var(--rv-white) !important;
}

.main-view > header button[aria-label="Open menu"]:hover,
.main-view > header button[aria-label="Buscar o saltar a..."]:hover,
.main-view > header button[aria-label="Help"]:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}

.main-view > header nav[aria-label="Breadcrumbs"] a,
.main-view > header nav[aria-label="Breadcrumbs"] svg {
  color: rgba(255, 255, 255, 0.85) !important;
  fill: rgba(255, 255, 255, 0.85) !important;
}

.main-view > header nav[aria-label="Breadcrumbs"] a:hover {
  color: var(--rv-white) !important;
  text-decoration: underline !important;
}

.main-view > header nav[aria-label="Breadcrumbs"] span[aria-current="page"] {
  color: var(--rv-white) !important;
  font-weight: 600 !important;
}

/* Secondary toolbar row (Export / Share buttons) */
[data-testid="data-testid Nav toolbar"] {
  background: var(--rv-white) !important;
  border-bottom: 1px solid var(--rv-gray-200) !important;
}

[data-testid="data-testid new export button"] button,
[data-testid="data-testid new export button arrow menu"] {
  background: var(--rv-white) !important;
  color: var(--rv-blue) !important;
  border: 1px solid var(--rv-gray-300) !important;
  border-radius: var(--rv-radius-md) !important;
  font-weight: 600 !important;
}

[data-testid="data-testid new export button"] button:hover {
  background: var(--rv-gray-50) !important;
  border-color: var(--rv-gray-400) !important;
}

[data-testid="data-testid new share button"] button,
[data-testid="data-testid new share link-button"],
[data-testid="data-testid new share button arrow menu"] {
  background: var(--rv-blue) !important;
  color: var(--rv-white) !important;
  border: 1px solid var(--rv-blue) !important;
  border-radius: var(--rv-radius-md) !important;
  font-weight: 600 !important;
}

[data-testid="data-testid new share button"] button:hover {
  background: var(--rv-blue-800) !important;
  border-color: var(--rv-blue-800) !important;
}

/* ---------------------------------------------------------------
   Left navigation (docked mega-menu)
   --------------------------------------------------------------- */
[data-testid="data-testid navigation mega-menu"] {
  background: var(--rv-white) !important;
  border-right: 1px solid var(--rv-gray-200) !important;
}

[data-testid="data-testid navigation mega-menu"] div:has(> #mega-menu-header-toggle) {
  height: 56px !important;
  border-bottom: 1px solid var(--rv-gray-200) !important;
}

#mega-menu-header-toggle,
#mega-menu-toggle {
  color: var(--rv-blue) !important;
}

#mega-menu-header-toggle + span {
  color: var(--rv-blue) !important;
  font-weight: 600 !important;
  font-family: var(--rv-font-sans) !important;
}

nav ul[aria-label="Navegación"] {
  background: var(--rv-white) !important;
  font-family: var(--rv-font-sans) !important;
}

nav ul[aria-label="Navegación"] a[data-testid="data-testid Nav menu item"] {
  color: var(--rv-gray-700) !important;
  font-weight: 500 !important;
  border-radius: var(--rv-radius-sm) !important;
}

nav ul[aria-label="Navegación"] a[data-testid="data-testid Nav menu item"] svg {
  fill: var(--rv-gray-500) !important;
}

nav ul[aria-label="Navegación"] a[data-testid="data-testid Nav menu item"]:hover {
  background: var(--rv-blue-50) !important;
  color: var(--rv-blue) !important;
}

nav ul[aria-label="Navegación"] a[data-testid="data-testid Nav menu item"][aria-current="page"] {
  background: var(--rv-blue-50) !important;
  color: var(--rv-blue) !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 var(--rv-blue) !important;
}

nav ul[aria-label="Navegación"] a[data-testid="data-testid Nav menu item"][aria-current="page"] svg {
  fill: var(--rv-blue) !important;
}

/* ---------------------------------------------------------------
   Filter row (template variables) — FilterChip look
   --------------------------------------------------------------- */
[data-testid="data-testid dashboard controls"] {
  background: var(--rv-white) !important;
  border-bottom: 1px solid var(--rv-gray-200) !important;
  padding: 12px 16px !important;
}

/* Row that holds every filter group, and each individual group
   (label + value) — force a shared baseline so mismatched natural
   heights (single value vs. wrapped multi-value chips) don't drift. */
[data-testid="data-testid dashboard controls"] div:has(> [data-testid="data-testid template variable"]) {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  row-gap: 8px !important;
}

[data-testid="data-testid template variable"] {
  display: flex !important;
  align-items: stretch !important;
  align-self: center !important;
}

[data-testid="data-testid template variable"] label {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  font-family: var(--rv-font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--rv-gray-600) !important;
  background: var(--rv-gray-100) !important;
  border: 1px solid var(--rv-gray-300) !important;
  border-right: none !important;
  border-radius: var(--rv-radius-md) 0 0 var(--rv-radius-md) !important;
  white-space: nowrap !important;
}

[data-testid="data-testid template variable"] [class*="-input-wrapper"] {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  background: var(--rv-white) !important;
  border: 1px solid var(--rv-gray-300) !important;
  border-radius: 0 var(--rv-radius-md) var(--rv-radius-md) 0 !important;
  min-height: 40px !important;
}

[data-testid="data-testid template variable"] [class*="-input-wrapper"]:focus-within {
  border-color: var(--rv-blue-500) !important;
  box-shadow: var(--rv-shadow-focus) !important;
}

[data-testid="data-testid template variable"] [class*="-singleValue"] {
  color: var(--rv-gray-800) !important;
  font-weight: 500 !important;
}

/* Multi-select value chips ("2020", "2021"...) rendered as Tag pills */
[data-testid="data-testid template variable"] [class*="-grafana-select-multi-value-container"] {
  background: var(--rv-blue-50) !important;
  color: var(--rv-blue) !important;
  border-radius: var(--rv-radius-pill) !important;
  font-weight: 500 !important;
}

[data-testid="data-testid template variable"] [class*="-grafana-select-multi-value-remove"] {
  color: var(--rv-blue) !important;
}

[data-testid="data-testid template variable"] [class*="-grafana-select-multi-value-remove"]:hover {
  background: var(--rv-blue-100) !important;
}

/* ---------------------------------------------------------------
   Panels — Card look (border, radius, shadow)
   --------------------------------------------------------------- */
[class*="-panel-container"] {
  background: var(--rv-white) !important;
  border: 1px solid var(--rv-gray-200) !important;
  border-radius: var(--rv-radius-lg) !important;
  box-shadow: var(--rv-shadow-sm) !important;
  overflow: hidden !important;
}

[class*="-panel-header"] {
  background: var(--rv-white) !important;
  border-bottom: 1px solid var(--rv-gray-200) !important;
}

[class*="-panel-title"] h2 {
  color: var(--rv-blue) !important;
  font-family: var(--rv-font-sans) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
}

[class*="-toolbar-button-panel-menu"],
button[data-testid="panel-menu-button"] {
  color: var(--rv-gray-600) !important;
  border-radius: var(--rv-radius-sm) !important;
}

[class*="-toolbar-button-panel-menu"]:hover,
button[data-testid="panel-menu-button"]:hover {
  background: var(--rv-gray-100) !important;
}

/* Markdown "eyebrow" text panels used as chart captions */
[data-testid="TextPanel-converted-content"] strong {
  color: var(--rv-blue) !important;
  font-weight: 600 !important;
}

/* ---------------------------------------------------------------
   Data table — DataTable look
   --------------------------------------------------------------- */
[data-testid="data-testid panel content"] [role="columnheader"] {
  background: var(--rv-gray-50) !important;
  border-bottom: 2px solid var(--rv-gray-300) !important;
  color: var(--rv-gray-600) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-family: var(--rv-font-sans) !important;
}

[data-testid="data-testid table body"],
[data-testid="data-testid panel content"] [role="table"] {
  font-family: var(--rv-font-sans) !important;
  font-size: 13px !important;
  color: var(--rv-gray-800) !important;
}

[data-testid="data-testid panel content"] [role="row"] {
  border-bottom: 1px solid var(--rv-gray-200) !important;
}

[data-testid="data-testid panel content"] [role="row"]:hover {
  background: var(--rv-blue-50) !important;
}

/* ---------------------------------------------------------------
   Popovers / dropdown menus (react-select option lists, portals)
   --------------------------------------------------------------- */
[data-testid="portal-container"] [role="listbox"],
[data-testid="portal-container"] [class*="-menu"] {
  border-radius: var(--rv-radius-md) !important;
  box-shadow: var(--rv-shadow-md) !important;
  border: 1px solid var(--rv-gray-200) !important;
}