/**
 * AgroSentio UI réteg – professzionális komponensek a tokenekre építve.
 * Betöltés: theme.css → style.css → ui.css (ez felülírja a neon/glow maradványokat).
 */

/* ─── Alap / tipó ─── */
.fh-icon--inline {
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-right: 0.35em;
  vertical-align: -0.15em;
}
.text-ok { color: var(--ok); }
.text-danger { color: var(--danger); }
.text-warn { color: var(--warn); }
.text-muted { color: var(--text-muted); }

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
  vertical-align: middle;
  margin-right: 4px;
}
.status-dot--ok { background: var(--ok); }
.status-dot--warn { background: var(--warn); }
.status-dot--danger { background: var(--danger); }

/* ─── Sidebar / nav ─── */
.sidebar {
  background: var(--surface-1) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.brand-name,
.brand-name span {
  color: var(--text) !important;
  text-shadow: none !important;
}
.brand-sub { color: var(--text-faint) !important; }
.nav-group-label {
  color: var(--text-faint) !important;
  font-size: var(--fs-caption) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.nav-item {
  border-radius: var(--radius-sm) !important;
  color: var(--text-muted) !important;
  font-weight: var(--fw-medium) !important;
  gap: var(--sp-3) !important;
  padding: var(--sp-2) var(--sp-3) !important;
  box-shadow: none !important;
}
.nav-item:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
.nav-item.active {
  background: var(--accent-weak) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
.nav-item.active::before {
  background: var(--accent) !important;
  box-shadow: none !important;
  width: 3px !important;
}
.nav-icon {
  color: inherit !important;
  opacity: 1 !important;
  filter: none !important;
}
.nav-icon svg {
  stroke: currentColor !important;
}
.nav-badge {
  background: color-mix(in srgb, var(--danger) 18%, var(--surface-2)) !important;
  color: var(--danger) !important;
  border-radius: var(--radius-sm) !important;
  font-variant-numeric: tabular-nums;
}
.nav-mode-btn.is-active {
  background: var(--accent-weak) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
.system-card {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* ─── Fő tartalom ─── */
.main,
.main-content,
.content {
  background: var(--surface-0);
}

/* ─── Panelek / kártyák ─── */
.panel,
.stat-card,
.building-card,
.building-tile,
.dash-report-card,
.login-card {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}
.panel-header {
  border-bottom: 1px solid var(--border) !important;
}
.panel-title {
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}
.panel-link {
  color: var(--text-muted) !important;
  font-size: var(--fs-sm) !important;
}
.panel-link:hover { color: var(--accent) !important; }

.stat-card-icon {
  background: var(--accent-weak) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
.stat-card-icon.orange { color: var(--warn) !important; background: color-mix(in srgb, var(--warn) 12%, var(--surface-2)) !important; }
.stat-card-icon.blue { color: var(--info) !important; background: color-mix(in srgb, var(--info) 12%, var(--surface-2)) !important; }
.stat-card-icon.red { color: var(--danger) !important; background: color-mix(in srgb, var(--danger) 12%, var(--surface-2)) !important; }
.stat-card-icon.purple { color: var(--info) !important; background: color-mix(in srgb, var(--info) 12%, var(--surface-2)) !important; }

/* ─── Dashboard szenzor sáv ─── */
.dash-sensor-bar {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  background-image: none !important;
}
.dash-sensor-bar-title {
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--text) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}
.dash-sensor-metric {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  border-left-width: 3px !important;
}
.dash-sensor-metric--temp { border-left-color: var(--accent) !important; }
.dash-sensor-metric--hum { border-left-color: var(--info) !important; }
.dash-sensor-metric--co2 { border-left-color: var(--text-faint) !important; }
.dash-sensor-metric--nh3 { border-left-color: var(--warn) !important; }
.dash-sensor-metric--pressure { border-left-color: var(--text-muted) !important; }
.dash-sensor-metric--lux { border-left-color: var(--warn) !important; }
.dash-sensor-metric-label {
  text-transform: none !important;
  font-size: var(--fs-caption) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: 0 !important;
}
.dash-sensor-metric-value {
  font-variant-numeric: tabular-nums;
  color: var(--text) !important;
}

.env-icon {
  background: var(--accent-weak) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 0 !important;
}
.env-icon.temp { color: var(--accent) !important; }
.env-icon.hum { color: var(--info) !important; }

.alert-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--warn) !important;
  font-size: 0 !important;
}
.alert-row.danger .alert-icon,
.alert-row.critical .alert-icon { color: var(--danger) !important; }

/* ─── Gombok ─── */
.btn {
  height: 36px;
  padding: 0 var(--sp-4) !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--surface-2) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.btn:hover {
  background: var(--surface-1) !important;
  border-color: var(--border-strong) !important;
}
.btn:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}
.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: #fff !important;
}
.btn-danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}
.btn-sm {
  height: 30px;
  padding: 0 var(--sp-3) !important;
  font-size: var(--fs-caption) !important;
}

/* ─── Űrlapok ─── */
input, select, textarea,
.field input, .field select, .field textarea {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  font-size: var(--fs-body) !important;
  box-shadow: none !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}
label, .field label {
  color: var(--text-muted) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
}

/* ─── Táblák ─── */
.data-table,
.device-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th,
.device-table th {
  color: var(--text-muted) !important;
  font-size: var(--fs-caption) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: 0.02em;
  text-align: left;
  padding: var(--sp-3) var(--sp-4) !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
  text-transform: none !important;
}
.data-table td,
.device-table td {
  padding: var(--sp-3) var(--sp-4) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.data-table tr:hover td,
.device-table tr:hover td {
  background: color-mix(in srgb, var(--surface-2) 80%, transparent) !important;
}
.data-table td.num,
.data-table th.num,
.device-table td.num {
  text-align: right !important;
}

/* ─── Badge ─── */
.badge,
.badge-ok, .badge-warn, .badge-danger,
.badge-admin, .badge-viewer {
  border-radius: var(--radius-sm) !important;
  font-size: var(--fs-caption) !important;
  font-weight: var(--fw-medium) !important;
  padding: 2px 8px !important;
  border: 1px solid transparent;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.badge-ok,
.badge.ok {
  background: color-mix(in srgb, var(--ok) 14%, var(--surface-2)) !important;
  color: var(--ok) !important;
  border-color: color-mix(in srgb, var(--ok) 35%, var(--border)) !important;
}
.badge-warn,
.badge.warn {
  background: color-mix(in srgb, var(--warn) 14%, var(--surface-2)) !important;
  color: var(--warn) !important;
  border-color: color-mix(in srgb, var(--warn) 35%, var(--border)) !important;
}
.badge-danger,
.badge.danger {
  background: color-mix(in srgb, var(--danger) 14%, var(--surface-2)) !important;
  color: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border)) !important;
}
.badge-admin {
  background: color-mix(in srgb, var(--info) 14%, var(--surface-2)) !important;
  color: var(--info) !important;
}

/* ─── Tabok ─── */
.tab-btn {
  border-radius: var(--radius-sm) !important;
  color: var(--text-muted) !important;
  font-weight: var(--fw-medium) !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.tab-btn.active {
  background: var(--accent-weak) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

/* ─── Empty state ─── */
.empty-state .big {
  color: var(--text-faint);
  margin-bottom: var(--sp-4);
}
.empty-state .big .fh-icon {
  width: 40px;
  height: 40px;
}
.empty-state h3 {
  color: var(--text) !important;
  font-weight: var(--fw-semibold) !important;
}
.empty-state p { color: var(--text-muted) !important; }

/* ─── Login ─── */
.login-page {
  background: var(--surface-0) !important;
  background-image: none !important;
}
.login-error {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: color-mix(in srgb, var(--danger) 12%, var(--surface-2)) !important;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border)) !important;
  color: var(--danger) !important;
  border-radius: var(--radius-sm) !important;
}

/* ─── Neon / glow kiirtás (maradványok) ─── */
.brand-mark-svg,
.brand-mark {
  filter: none !important;
}
a:focus-visible,
button:focus-visible,
.nav-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .btn, .nav-item, .tab-btn, a.dash-ops-metric--link {
    transition: none !important;
  }
}