/* ================================================================
 * Synaplive Design System  v1
 * ----------------------------------------------------------------
 * Egységes design-tokenek és komponensek a teljes alkalmazásra.
 * Mac/Linear/Vercel-szerű letisztult felület: hairline borderek,
 * finom árnyékok, kompakt spacing, kontrasztos tipográfia.
 * ================================================================ */

:root {
  /* === Colors — sötét tema === */
  --syn-bg-0:        #07080d;   /* mélysötét háttér */
  --syn-bg-1:        #0d0f17;   /* main surface */
  --syn-bg-2:        #131625;   /* card/panel surface */
  --syn-bg-3:        #1a1d2e;   /* elevated (hover/selected) */
  --syn-bg-4:        #232742;   /* input bg */

  --syn-border:      rgba(255,255,255,0.08);
  --syn-border-hi:   rgba(255,255,255,0.14);
  --syn-divider:     rgba(255,255,255,0.05);

  --syn-text-1:      #e7eaf3;   /* primary */
  --syn-text-2:      #a8b0c2;   /* secondary */
  --syn-text-3:      #6b7385;   /* tertiary / hint */

  --syn-accent:      #00d4ff;
  --syn-accent-2:    #7c3aed;
  --syn-accent-grad: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);

  --syn-success:     #34d399;
  --syn-warning:     #fbbf24;
  --syn-danger:      #f87171;
  --syn-info:        #818cf8;

  /* === Spacing scale === */
  --syn-s-1: 4px;
  --syn-s-2: 8px;
  --syn-s-3: 12px;
  --syn-s-4: 16px;
  --syn-s-5: 24px;
  --syn-s-6: 32px;
  --syn-s-7: 48px;

  /* === Typography === */
  --syn-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
              "Segoe UI", system-ui, sans-serif;
  --syn-font-mono: "SF Mono", "Menlo", "Consolas", "Roboto Mono", monospace;
  --syn-fs-xs:   10px;
  --syn-fs-sm:   11px;
  --syn-fs-base: 13px;
  --syn-fs-md:   14px;
  --syn-fs-lg:   16px;
  --syn-fs-xl:   20px;
  --syn-fs-2xl:  28px;

  /* === Radii === */
  --syn-r-sm: 5px;
  --syn-r-md: 8px;
  --syn-r-lg: 12px;
  --syn-r-pill: 99px;

  /* === Shadows === */
  --syn-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --syn-shadow-md: 0 4px 12px rgba(0,0,0,.35);
  --syn-shadow-lg: 0 16px 48px rgba(0,0,0,.5);
  --syn-shadow-glow: 0 0 0 3px rgba(0,212,255,0.15);

  /* === Easing & timing === */
  --syn-ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --syn-fast: 140ms;
  --syn-med:  240ms;
}

/* ================================================================
 * Global reset (scoped — nem törli a meglévő body-stílusokat)
 * ================================================================ */

.syn-root {
  font-family: var(--syn-font);
  color: var(--syn-text-1);
  background: var(--syn-bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ================================================================
 * Buttons
 * ================================================================ */

.syn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--syn-s-2);
  font-family: inherit;
  font-size: var(--syn-fs-base);
  font-weight: 500;
  line-height: 1;
  padding: 7px 12px;
  border-radius: var(--syn-r-md);
  border: 1px solid var(--syn-border);
  background: var(--syn-bg-3);
  color: var(--syn-text-1);
  cursor: pointer;
  transition: background var(--syn-fast) var(--syn-ease),
              border-color var(--syn-fast) var(--syn-ease),
              transform var(--syn-fast) var(--syn-ease),
              box-shadow var(--syn-fast) var(--syn-ease);
  white-space: nowrap;
  user-select: none;
}
.syn-btn:hover {
  background: var(--syn-bg-4);
  border-color: var(--syn-border-hi);
}
.syn-btn:active { transform: translateY(1px); }
.syn-btn:focus-visible {
  outline: none;
  box-shadow: var(--syn-shadow-glow);
}
.syn-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Variants */
.syn-btn--primary {
  background: var(--syn-accent-grad);
  color: #07080d;
  border: 1px solid transparent;
  font-weight: 600;
}
.syn-btn--primary:hover { background: var(--syn-accent-grad); filter: brightness(1.08); }

.syn-btn--success { background: rgba(52,211,153,0.14); color: var(--syn-success); border-color: rgba(52,211,153,0.3); }
.syn-btn--success:hover { background: rgba(52,211,153,0.22); border-color: rgba(52,211,153,0.45); }

.syn-btn--accent { background: rgba(0,212,255,0.14); color: var(--syn-accent); border-color: rgba(0,212,255,0.3); }
.syn-btn--accent:hover { background: rgba(0,212,255,0.22); border-color: rgba(0,212,255,0.45); }

.syn-btn--purple { background: rgba(168,85,247,0.14); color: #c4b5fd; border-color: rgba(168,85,247,0.3); }
.syn-btn--purple:hover { background: rgba(168,85,247,0.22); border-color: rgba(168,85,247,0.45); }

.syn-btn--warning { background: rgba(251,191,36,0.14); color: var(--syn-warning); border-color: rgba(251,191,36,0.3); }
.syn-btn--warning:hover { background: rgba(251,191,36,0.22); border-color: rgba(251,191,36,0.45); }

.syn-btn--ghost { background: transparent; border-color: var(--syn-border); }
.syn-btn--ghost:hover { background: var(--syn-bg-3); }

.syn-btn--danger { background: rgba(248,113,113,0.14); color: var(--syn-danger); border-color: rgba(248,113,113,0.3); }
.syn-btn--danger:hover { background: rgba(248,113,113,0.22); border-color: rgba(248,113,113,0.45); }

.syn-btn--sm { padding: 5px 9px; font-size: var(--syn-fs-sm); border-radius: var(--syn-r-sm); }
.syn-btn--xs { padding: 3px 7px; font-size: var(--syn-fs-xs); border-radius: var(--syn-r-sm); }
.syn-btn--icon { padding: 6px; min-width: 28px; min-height: 28px; }

/* ================================================================
 * Inputs
 * ================================================================ */

.syn-input,
.syn-select,
.syn-textarea {
  font-family: inherit;
  font-size: var(--syn-fs-base);
  color: var(--syn-text-1);
  background: var(--syn-bg-1);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-md);
  padding: 7px 10px;
  transition: border-color var(--syn-fast) var(--syn-ease),
              background var(--syn-fast) var(--syn-ease),
              box-shadow var(--syn-fast) var(--syn-ease);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.syn-input::placeholder { color: var(--syn-text-3); }
.syn-input:hover, .syn-select:hover, .syn-textarea:hover { border-color: var(--syn-border-hi); }
.syn-input:focus, .syn-select:focus, .syn-textarea:focus {
  border-color: var(--syn-accent);
  box-shadow: var(--syn-shadow-glow);
}
.syn-input--mono { font-family: var(--syn-font-mono); font-size: var(--syn-fs-sm); }
.syn-input--sm { padding: 5px 8px; font-size: var(--syn-fs-sm); }

.syn-label {
  display: block;
  font-size: var(--syn-fs-xs);
  font-weight: 500;
  color: var(--syn-text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

/* ================================================================
 * Cards / Panels
 * ================================================================ */

.syn-card {
  background: var(--syn-bg-2);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  padding: var(--syn-s-4);
}
.syn-card--compact { padding: var(--syn-s-3); }

.syn-panel {
  background: var(--syn-bg-2);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  overflow: hidden;
}

/* ================================================================
 * Modal — közös backdrop + container
 * ================================================================ */

.syn-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7,8,13,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--syn-s-4);
}
.syn-modal {
  background: var(--syn-bg-2);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-lg);
  box-shadow: var(--syn-shadow-lg);
  display: flex;
  flex-direction: column;
  max-width: 96vw;
  max-height: 92vh;
  overflow: hidden;
}
.syn-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--syn-s-4) var(--syn-s-5);
  border-bottom: 1px solid var(--syn-divider);
  flex-shrink: 0;
}
.syn-modal__title {
  font-size: var(--syn-fs-md);
  font-weight: 600;
  color: var(--syn-text-1);
  margin: 0;
}
.syn-modal__close {
  background: none;
  border: none;
  color: var(--syn-text-3);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--syn-r-sm);
  transition: background var(--syn-fast) var(--syn-ease), color var(--syn-fast) var(--syn-ease);
}
.syn-modal__close:hover { color: var(--syn-text-1); background: var(--syn-bg-3); }
.syn-modal__body { padding: var(--syn-s-5); overflow-y: auto; flex: 1; }
.syn-modal__body--flush { padding: 0; }

/* ================================================================
 * Badges / chips / tags
 * ================================================================ */

.syn-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: var(--syn-r-pill);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--syn-bg-3);
  color: var(--syn-text-2);
  border: 1px solid var(--syn-border);
}
.syn-badge--success { background: rgba(52,211,153,0.14); color: var(--syn-success); border-color: rgba(52,211,153,0.3); }
.syn-badge--warning { background: rgba(251,191,36,0.14); color: var(--syn-warning); border-color: rgba(251,191,36,0.3); }
.syn-badge--danger  { background: rgba(248,113,113,0.14); color: var(--syn-danger);  border-color: rgba(248,113,113,0.3); }
.syn-badge--accent  { background: rgba(0,212,255,0.14);  color: var(--syn-accent);   border-color: rgba(0,212,255,0.3); }
.syn-badge--purple  { background: rgba(168,85,247,0.14); color: #c4b5fd;             border-color: rgba(168,85,247,0.3); }
.syn-badge--info    { background: rgba(129,140,248,0.14);color: var(--syn-info);     border-color: rgba(129,140,248,0.3); }

.syn-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--syn-r-pill);
  font-size: var(--syn-fs-xs);
  background: var(--syn-bg-3);
  border: 1px solid var(--syn-border);
  color: var(--syn-text-2);
  cursor: pointer;
  transition: background var(--syn-fast), border-color var(--syn-fast), color var(--syn-fast);
}
.syn-chip:hover { background: var(--syn-bg-4); border-color: var(--syn-border-hi); color: var(--syn-text-1); }
.syn-chip--active { background: rgba(0,212,255,0.14); color: var(--syn-accent); border-color: rgba(0,212,255,0.4); }

/* ================================================================
 * Header / topbar
 * ================================================================ */

.syn-topbar {
  display: flex;
  align-items: center;
  gap: var(--syn-s-3);
  padding: 10px 16px;
  background: rgba(13,15,23,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--syn-divider);
  position: relative;
  z-index: 10;
}
.syn-topbar__title {
  font-size: var(--syn-fs-md);
  font-weight: 600;
  color: var(--syn-text-1);
  margin: 0;
  letter-spacing: -0.01em;
}
.syn-topbar__sub {
  font-size: var(--syn-fs-xs);
  color: var(--syn-text-3);
}
.syn-topbar__group { display: inline-flex; align-items: center; gap: var(--syn-s-2); }

/* Field group: label + input vertically stacked, compact */
.syn-field {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.syn-field__label {
  font-size: 9px;
  font-weight: 500;
  color: var(--syn-text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.syn-field__input {
  font-family: inherit;
  font-size: var(--syn-fs-sm);
  color: var(--syn-text-1);
  background: var(--syn-bg-1);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-sm);
  padding: 4px 8px;
  outline: none;
  transition: border-color var(--syn-fast) var(--syn-ease);
}
.syn-field__input:focus { border-color: var(--syn-accent); }

/* ================================================================
 * Profile widget
 * ================================================================ */

.syn-profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 8px;
  background: var(--syn-bg-1);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-pill);
  font-size: var(--syn-fs-sm);
}
.syn-profile__avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--syn-accent-grad);
  color: #07080d;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
}
.syn-profile__user { color: var(--syn-text-1); font-weight: 500; }
.syn-profile__divider { width: 1px; height: 14px; background: var(--syn-divider); }
.syn-profile__logout {
  background: none; border: none; padding: 0;
  color: var(--syn-text-2); cursor: pointer;
  font-size: var(--syn-fs-sm); font-family: inherit;
}
.syn-profile__logout:hover { color: var(--syn-text-1); }

/* ================================================================
 * Stat cards (compact)
 * ================================================================ */

.syn-stat {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 12px;
  background: var(--syn-bg-2);
  border: 1px solid var(--syn-border);
  border-radius: var(--syn-r-md);
  min-width: 64px;
  text-align: center;
}
.syn-stat__num { font-size: var(--syn-fs-lg); font-weight: 700; color: var(--syn-info); font-variant-numeric: tabular-nums; }
.syn-stat__lbl { font-size: 9px; color: var(--syn-text-3); text-transform: uppercase; letter-spacing: 0.5px; }

/* ================================================================
 * Scrollbars (subtle)
 * ================================================================ */

.syn-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.syn-scroll::-webkit-scrollbar-track { background: transparent; }
.syn-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 4px; }
.syn-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }
.syn-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent; }

/* ================================================================
 * Utility classes
 * ================================================================ */

.syn-mt-1 { margin-top: var(--syn-s-1); }
.syn-mt-2 { margin-top: var(--syn-s-2); }
.syn-mt-3 { margin-top: var(--syn-s-3); }
.syn-mt-4 { margin-top: var(--syn-s-4); }

.syn-text-muted { color: var(--syn-text-3); }
.syn-text-sub   { color: var(--syn-text-2); }

.syn-divider {
  height: 1px;
  background: var(--syn-divider);
  margin: var(--syn-s-3) 0;
}

.syn-spacer { flex: 1; }

/* Tooltip-like helper text */
.syn-hint { font-size: var(--syn-fs-xs); color: var(--syn-text-3); }