/* EVA 2026 UI Redesign — global visual layer only. No route/JS logic touched. */
:root {
  --eva-bg: #f6f8fb;
  --eva-surface: #ffffff;
  --eva-surface-2: #f9fbfc;
  --eva-text: #0f172a;
  --eva-muted: #64748b;
  --eva-line: #dfe7ef;
  --eva-brand: #3ECF8E;
  --eva-brand-dark: #08704f;
  --eva-brand-ink: #052e22;
  --eva-danger: #dc2626;
  --eva-warning: #d97706;
  --eva-info: #2563eb;
  --eva-radius-sm: 10px;
  --eva-radius-md: 14px;
  --eva-radius-lg: 20px;
  --eva-shadow: 0 1px 2px rgba(15,23,42,.05), 0 18px 50px rgba(15,23,42,.08);
  --eva-shadow-soft: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px rgba(15,23,42,.05);
}

html { background: var(--eva-bg); }
body {
  background:
    radial-gradient(circle at 0 0, rgba(62,207,142,.12), transparent 28rem),
    linear-gradient(180deg, #f9fbfd 0%, var(--eva-bg) 42%, #f4f7fb 100%) !important;
  color: var(--eva-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -.005em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(15,23,42,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.75), transparent 70%);
  z-index: -1;
}

:where(h1, h2, h3) {
  letter-spacing: -.035em !important;
  color: var(--eva-text) !important;
}

:where(.page-head h1, .gx-header h1, .fdt-header h1, h1) {
  font-size: clamp(1.55rem, 2.2vw, 2.45rem) !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
}

:where(.content, .gx-page, .fdt-page, .rfs-page, main) {
  isolation: isolate;
}

:where(.content, .gx-page, .fdt-page, .rfs-shell) {
  max-width: 1500px !important;
}

:where(.layout) {
  background: transparent !important;
}

:where(.sidebar) {
  background: linear-gradient(180deg, #061b16 0%, #0f172a 100%) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 20px 0 60px rgba(15,23,42,.08) !important;
}

:where(.brand, .page-kicker, .group-title, .gdr-section-title, .metric-label, .fdt-field label, .gx-field label, .gx-label) {
  letter-spacing: .075em !important;
}

:where(.card, .panel, .metric, .monitor, .quick, .gx-card, .gx-section, .gdr-section, .fdt-card, .fdt-toolbar, .fdt-form-shell, .activity-list, .detail, .kpi) {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--eva-line) !important;
  border-radius: var(--eva-radius-lg) !important;
  box-shadow: var(--eva-shadow-soft) !important;
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
}

:where(.card:hover, .monitor:hover, .gx-card:hover, .fdt-card:hover, .metric:hover, .kpi:hover) {
  border-color: rgba(62,207,142,.45) !important;
  box-shadow: var(--eva-shadow) !important;
  transform: translateY(-1px);
}

:where(.card, .monitor, .gx-card, .fdt-card, .metric, .kpi, .btn, .button, .primary-button, .secondary-button, .ui-input, .input, .select) {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease, color .18s ease !important;
}

:where(.page-head, .gx-header, .fdt-header, .topbar) {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(223,231,239,.85);
  border-radius: 24px;
  padding: clamp(1rem, 2vw, 1.45rem);
  box-shadow: var(--eva-shadow-soft);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
}

:where(.btn, .button, .primary-button, .secondary-button, .gx-back, .link, .fdt-page-button, .gdr-tab, .add-mat-btn, .remove-btn) {
  border-radius: 999px !important;
  font-weight: 850 !important;
}

:where(.btn.primary, .primary-button, .button.primary, .btn-primary) {
  background: linear-gradient(135deg, var(--eva-brand) 0%, #24B47E 100%) !important;
  border-color: #1fa472 !important;
  color: #052e22 !important;
  box-shadow: 0 10px 24px rgba(36,180,126,.18) !important;
}

:where(.btn.primary:hover, .primary-button:hover, .button.primary:hover, .btn-primary:hover) {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(36,180,126,.24) !important;
}

:where(.btn, .button, .secondary-button, .gx-back, .link) {
  background: rgba(255,255,255,.9) !important;
  border-color: var(--eva-line) !important;
  color: var(--eva-text) !important;
}

:where(.btn:hover, .button:hover, .secondary-button:hover, .gx-back:hover, .link:hover) {
  background: #ffffff !important;
  border-color: rgba(62,207,142,.55) !important;
  color: var(--eva-brand-dark) !important;
}

:where(input, select, textarea, .ui-input, .input, .select) {
  border-radius: var(--eva-radius-sm) !important;
  border-color: var(--eva-line) !important;
  background: #fff !important;
  min-height: 2.55rem;
}

:where(input:focus, select:focus, textarea:focus, .ui-input:focus, .input:focus, .select:focus) {
  outline: none !important;
  border-color: var(--eva-brand) !important;
  box-shadow: 0 0 0 4px rgba(62,207,142,.16) !important;
}

:where(table) {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

:where(th) {
  background: #f3f7fa !important;
  color: #475569 !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
}

:where(td, th) {
  border-color: #e7eef5 !important;
}

:where(tbody tr:hover td) {
  background: #f8fffb !important;
}

:where(.status, .chip, .pill) {
  border-radius: 999px !important;
  border: 1px solid rgba(15,23,42,.06);
}

:where(.done, .completed, .ok, .success, .pill) {
  background: rgba(62,207,142,.14) !important;
  color: #08704f !important;
}

:where(.error, .failed, .danger) {
  background: rgba(220,38,38,.1) !important;
  color: #b91c1c !important;
}

:where(.processing, .queued, .retrying) {
  background: rgba(37,99,235,.1) !important;
  color: #1d4ed8 !important;
}

:where(.bar) {
  background: #e9f1f6 !important;
}
:where(.bar span) {
  background: linear-gradient(90deg, var(--eva-brand), #22c55e) !important;
}

/* Shared feedback popup palette: neutral; severity stays in text/role. */
:where(.eva-toast, #eva-toast) {
  background: rgba(255,255,255,.98) !important;
  color: #0f172a !important;
  border: 1px solid rgba(148,163,184,.35) !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.25) !important;
}

#eva-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  display: grid;
  gap: 8px;
  width: min(460px, calc(100vw - 40px));
  padding: 18px 18px 16px;
  border-radius: 18px;
  transform: translate(-50%, -50%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}

#eva-toast[hidden] { display: none !important; }
#eva-toast strong { font-weight: 800; }
#eva-toast-message { color: #475569; white-space: pre-line; }
#eva-toast-close {
  justify-self: end;
  border: 0 !important;
  background: transparent !important;
  color: #64748b !important;
  box-shadow: none !important;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
#eva-toast-close:hover,
#eva-toast-close:focus-visible {
  color: #334155 !important;
  outline: 2px solid rgba(100,116,139,.35);
  outline-offset: 2px;
}

/* Better mobile density */
@media (max-width: 820px) {
  :where(.content, .gx-page, .fdt-page, .rfs-page) { padding: 1rem !important; }
  :where(.page-head, .gx-header, .fdt-header, .topbar) { border-radius: 18px !important; }
  :where(.metrics, .kpis, .cards, .gx-grid, .fdt-form, .fdt-toolbar) { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}