/**
 * AgroSentio design tokens — egy forrás a színekhez, tipóhoz, térközhöz.
 * Komponensek: var(--…) — ne legyen beégetett hex a stílusokban.
 *
 * Alap: sötét, rétegzett zöldes-semleges + egy nyugodt akcent.
 * Világos: [data-theme="light"] (későbbi váltóhoz előkészítve).
 */

:root {
  color-scheme: dark;

  /* Felületek – rétegzett, nem tiszta fekete */
  --surface-0: #0F1512;
  --surface-1: #161D19;
  --surface-2: #1E2621;
  --border: #2A342E;
  --border-strong: #3A463F;

  /* Szöveg */
  --text: #E6EDE9;
  --text-muted: #9BA8A1;
  --text-faint: #6B7873;

  /* Egy akcent – nyugodt „élő” zöld */
  --accent: #2F9C6A;
  --accent-hover: #38B27B;
  --accent-weak: #16281F;

  /* Szemantikus státusz (adat, nem dekoráció) */
  --ok: #2F9C6A;
  --warn: #C9922B;
  --danger: #C24A3D;
  --info: #3E7CB1;

  /* Tipográfia */
  --fs-caption: 12px;
  --fs-sm: 13px;
  --fs-body: 14px;
  --fs-lg: 16px;
  --fs-h3: 20px;
  --fs-h2: 24px;
  --fs-h1: 32px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Térköz */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;

  /* Forma / mélység – finom, egyrétegű; nincs glow */
  --radius-sm: 6px;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.30);

  /* Fókusz */
  --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--accent);

  /* Ikon méretek */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;

  /* ─── Legacy aliasok (style.css / meglévő osztályok) ─── */
  --bg-base: var(--surface-0);
  --bg-graphite: var(--surface-0);
  --bg-panel: var(--surface-1);
  --bg-base-mid: var(--surface-1);
  --bg-card: var(--surface-1);
  --bg-card-hover: var(--surface-2);
  --bg-elev: var(--surface-2);
  --border-muted: var(--border);
  --border-light: color-mix(in srgb, var(--border) 70%, transparent);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --accent-neon: var(--accent);
  --accent-deep: var(--accent);
  --accent-mid: var(--accent);
  --accent-bright: var(--accent);
  --accent-glow: transparent;
  --link: var(--info);
  --link-hover: var(--info);
  --green: var(--ok);
  --blue: var(--info);
  --yellow: var(--warn);
  --orange: var(--warn);
  --red: var(--danger);
  --purple: var(--text-faint);
  --radius-md: var(--radius);
  --radius-lg: var(--radius);
  --radius-xl: var(--radius);
  --shadow-card: var(--shadow-sm);
  --shadow-pop: var(--shadow);
  --shadow-glow-accent: none;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Világos téma – ugyanazok a nevek (későbbi váltó) */
[data-theme="light"] {
  color-scheme: light;

  --surface-0: #F3F6F4;
  --surface-1: #FFFFFF;
  --surface-2: #E8EEEA;
  --border: #D0D9D3;
  --border-strong: #B0BDB5;
  --text: #1A2420;
  --text-muted: #5A6861;
  --text-faint: #8A9690;
  --accent: #248A5B;
  --accent-hover: #1F7A50;
  --accent-weak: #E3F2EA;
  --ok: #248A5B;
  --warn: #A67A1F;
  --danger: #B03D32;
  --info: #2F6A9A;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --focus-ring: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent);
}

/* ─── Ikon alap ─── */
.fh-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
  stroke: currentColor;
  fill: none;
  color: inherit;
}
.fh-icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.fh-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }

/* ═══════════════════════════════════════════════════════════
   MINTAKOMPONENS (review): dashboard „Telep állapota” KPI kártyák
   – professzionális panel, vonalas ikon, tabular számok
   ═══════════════════════════════════════════════════════════ */
.dash-ops-bar {
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius);
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.dash-ops-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.dash-ops-bar-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text);
  letter-spacing: -0.01em;
}

.dash-ops-live-badge {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--accent-weak);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
}

.dash-ops-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--sp-3);
}

.dash-ops-metric {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: none;
  min-width: 0;
}

a.dash-ops-metric--link {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
a.dash-ops-metric--link:hover {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-2));
}
a.dash-ops-metric--link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.dash-ops-metric-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-weak);
  color: var(--text-muted);
  font-size: 0; /* emoji fallback ne legyen látható */
}
.dash-ops-metric-icon .fh-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--text-muted);
}
.dash-ops-metric--health .dash-ops-metric-icon,
.dash-ops-metric--health .dash-ops-metric-icon .fh-icon {
  color: var(--accent);
}
.dash-ops-metric-icon--alert {
  background: color-mix(in srgb, var(--warn) 14%, var(--surface-2));
}
.dash-ops-metric-icon--alert .fh-icon {
  color: var(--warn);
}
.dash-ops-metric-icon--warn {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface-2));
}
.dash-ops-metric-icon--warn .fh-icon {
  color: var(--danger);
}

.dash-ops-metric-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dash-ops-metric-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  line-height: 1.3;
}

.dash-ops-metric-value {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -0.02em;
}
.dash-ops-metric-value .unit {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}
.dash-ops-metric--health .dash-ops-metric-value {
  color: var(--accent);
}

.dash-ops-metric-sub {
  font-size: var(--fs-caption);
  color: var(--text-faint);
  line-height: 1.35;
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  a.dash-ops-metric--link {
    transition: none;
  }
}