/* ====================================================================
 *  Gasty Analytics — brand stíluslap (GastyMail megjelenés)
 *  Meleg krém / homok / tinta paletta, lágy árnyékok, vonalas ikonok.
 * ==================================================================== */

:root {
  --c-cream: 241 239 233;   /* háttér */
  --c-sand: 231 227 218;    /* hover / soft gomb */
  --c-sanddark: 219 214 203;
  --c-line: 230 226 217;    /* keretek */
  --c-ink: 30 28 25;        /* szöveg / primary */
  --c-surface: 255 255 255; /* fehér kártya */

  /* data-viz színek (világos) */
  --chart-1: #1E1C19;
  --chart-2: #8A7C66;
  --chart-3: #B3A489;
  --chart-4: #D0C6B2;
  --chart-5: #6F6655;
}

/* Sötét mód — a teljes felület a változókon keresztül vált */
.dark {
  --c-cream: 24 23 21;
  --c-sand: 42 39 35;
  --c-sanddark: 56 52 46;
  --c-line: 58 54 48;
  --c-ink: 235 233 226;
  --c-surface: 34 32 29;

  --chart-1: #E8E2D6;
  --chart-2: #C7B89C;
  --chart-3: #A89A80;
  --chart-4: #8A7C66;
  --chart-5: #D8CFBE;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "cv01", "cv03";
  background-color: rgb(var(--c-cream));
  color: rgb(var(--c-ink));
  -webkit-font-smoothing: antialiased;
}

/* Sötét módban a fix-fehér felületek a sötét „surface" színt kapják */
.dark .bg-white { background-color: rgb(var(--c-surface)) !important; }
.dark .card { background-color: rgb(var(--c-surface)); border-color: rgb(var(--c-line)); }
.dark .field-input:focus { background-color: rgb(var(--c-surface)); }

/* Talpas (EB Garamond) címsorok, ha a felhasználó bekapcsolja */
.serif-headings .heading,
.serif-headings .display,
.serif-headings .serif-text {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  letter-spacing: 0;
  font-weight: 500;
}

.serif-headings .heading {
  font-size: 26px;
}

/* Címsorok – alapból talp nélküli (Inter), csak a talpas mód kapcsolja serifre */
.heading { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }

/* Vonalas ikon (lucide-stílus) */
.ico {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- Oldalsáv menügombok ---- */
.sidebtn {
  display: flex; width: 100%; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.625rem; font-size: 13px; font-weight: 500;
  color: rgb(var(--c-ink) / 0.7); border-radius: 0.625rem; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.sidebtn:hover { background-color: rgb(var(--c-sand)); color: rgb(var(--c-ink)); }
.sidebtn.active { background-color: rgb(var(--c-sand)); color: rgb(var(--c-ink)); }
.sidebtn .ico { width: 17px; height: 17px; }

/* ---- Ikon-gombok ---- */
.iconbtn {
  display: flex; height: 2rem; width: 2rem; align-items: center; justify-content: center;
  border-radius: 0.5rem; color: rgb(var(--c-ink) / 0.6);
  transition: background-color .15s, color .15s;
}
.iconbtn:hover { background-color: rgb(var(--c-sand)); color: rgb(var(--c-ink)); }
.iconbtn-large {
  display: flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center;
  border-radius: 0.5rem; color: rgb(var(--c-ink) / 0.7);
  transition: background-color .15s, color .15s;
}
.iconbtn-large:hover { background-color: rgb(var(--c-sand)); color: rgb(var(--c-ink)); }

/* ---- Gombok ---- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background-color: rgb(var(--c-ink)); color: rgb(var(--c-cream));
  padding: 0.5rem 1rem; font-size: 13px; font-weight: 500; border-radius: 0.5rem;
  transition: background-color .15s, opacity .15s;
}
.btn-primary:hover { background-color: rgb(var(--c-ink) / 0.85); }
.btn-primary:disabled { opacity: 0.4; cursor: default; }

.btn-soft {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background-color: rgb(var(--c-sand)); color: rgb(var(--c-ink));
  padding: 0.5rem 1rem; font-size: 13px; font-weight: 500; border-radius: 0.5rem;
  transition: background-color .15s;
}
.btn-soft:hover { background-color: rgb(var(--c-sanddark)); }

.btn-ghost {
  padding: 0.5rem 1rem; font-size: 13px; font-weight: 500; border-radius: 0.5rem;
  color: rgb(var(--c-ink) / 0.7); transition: background-color .15s;
}
.btn-ghost:hover { background-color: rgb(var(--c-sand)); }

.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background-color: #dc2626; color: #fff;
  padding: 0.5rem 1rem; font-size: 13px; font-weight: 500; border-radius: 0.5rem;
  transition: background-color .15s, opacity .15s;
}
.btn-danger:hover { background-color: #b91c1c; }
.btn-danger:disabled { opacity: 0.4; cursor: default; }

.gswitch.danger.on { background: #dc2626; }

/* ---- Űrlapmezők ---- */
.field-label { margin-bottom: 0.25rem; display: block; font-size: 12px; font-weight: 500; color: rgb(var(--c-ink) / 0.55); }
.field-input {
  width: 100%; border: 1px solid rgb(var(--c-line)); background-color: rgb(var(--c-cream) / 0.4);
  padding: 0.5rem 0.75rem; font-size: 13px; border-radius: 0.5rem; outline: none;
  color: rgb(var(--c-ink)); transition: border-color .15s, background-color .15s;
}
.field-input::placeholder { color: rgb(var(--c-ink) / 0.4); }
.field-input:focus { border-color: rgb(var(--c-ink) / 0.3); background-color: #fff; }
select.field-input { -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e1c19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.6rem center; padding-right: 2rem; }

/* ---- Pill kereső / vezérlők ---- */
.pill {
  display: flex; align-items: center; gap: 0.5rem; height: 2.25rem;
  border-radius: 9999px; background-color: rgb(var(--c-sand)); padding: 0 0.875rem;
}
.pill input { background: transparent; border: none; outline: none; font-size: 13px; color: rgb(var(--c-ink)); }
.pill input::placeholder { color: rgb(var(--c-ink) / 0.4); }

.pill-select {
  height: 2.25rem; border-radius: 9999px; background-color: rgb(var(--c-sand)); color: rgb(var(--c-ink));
  padding: 0 2rem 0 0.875rem; font-size: 13px; font-weight: 500; border: none; outline: none;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e1c19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center;
  transition: background-color .15s;
}
.pill-select:hover { background-color: rgb(var(--c-sanddark)); }

/* ---- Kártya ---- */
.card { background-color: #fff; border: 1px solid rgb(var(--c-line)); border-radius: 1rem; }
.shadow-soft { box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 24px rgba(0,0,0,0.05); }

/* ---- Lista-sor (forrás/ország/oldal) ---- */
.list-row { position: relative; display: flex; align-items: center; gap: 0.625rem;
  padding: 0.375rem 0.5rem; border-radius: 0.625rem; overflow: hidden; }
.list-row__bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0.625rem;
  background-color: rgb(var(--c-sand) / 0.7); }

/* ---- Jelvény ---- */
.badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.1rem 0.5rem;
  font-size: 11px; font-weight: 600; }
.badge-ink { background-color: rgb(var(--c-ink)); color: rgb(var(--c-cream)); }
.badge-soft { background-color: rgb(var(--c-sand)); color: rgb(var(--c-ink) / 0.75); }

/* ---- Toast ---- */
#toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50;
  background-color: rgb(var(--c-ink)); color: rgb(var(--c-cream));
  font-size: 13px; padding: 0.75rem 1rem; border-radius: 0.75rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}

/* ---- Animációk ---- */
.fade-in { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Pontos töltésjelző (GastyMail) */
.dots-loader { display: inline-flex; align-items: center; gap: 7px; color: rgb(var(--c-ink) / 0.5); }
.dots-loader span { width: 9px; height: 9px; border-radius: 9999px; background: currentColor;
  animation: gastyDots 1.1s infinite ease-in-out; }
.dots-loader span:nth-child(2) { animation-delay: .15s; }
.dots-loader span:nth-child(3) { animation-delay: .3s; }
@keyframes gastyDots { 0%,80%,100% { transform: translateY(0); opacity: .3; } 40% { transform: translateY(-7px); opacity: 1; } }

/* ---- macOS-szerű, áttetsző scrollbar ---- */
::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 9999px; border: 3px solid transparent; background-clip: content-box; min-height: 36px; }
:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28); background-clip: content-box; }

/* Logó kör (sidebar) */
.brand-logo { width: 26px; height: 26px; flex-shrink: 0; }
/* Sötét módban a fekete vonalas logó invertálva (fehér) */
.dark .app-logo { filter: invert(1); }

/* ---- Kreatív képek blendinge ----
   Világos: multiply -> csak a fekete látszik (a fehér kiblendelődik).
   Sötét:  invert + lighten -> csak a fehér látszik. */
.creative { mix-blend-mode: multiply; }
.dark .creative { filter: invert(1); mix-blend-mode: lighten; opacity: .92; }

/* ---- Tartalom-kártya (GastyMail mintára) ---- */
.content-card {
  display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto;
  background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line));
  border-radius: 1.5rem; overflow: hidden;
}
.dark .content-card { background: rgb(var(--c-surface)); }

/* Teljes-magasságú, kétpaneles nézetek (felvételek/heatmap/előzmények):
   a #content ne görgessen és ne legyen belső térköz — így a jobb panel
   egyetlen, a kártya széléig érő görgethető területként viselkedik
   (nincs dupla scroll és nincs fent/lent üres sáv). */
#content.split-view { padding: 0; overflow: hidden; }

/* ---- Bal oldali lista panel (felvételek/heatmap/előzmények) ---- */
.list-pane { width: 300px; flex-shrink: 0; overflow-y: auto; }
.list-item {
  margin: 2px 0px; cursor: pointer; padding: 0.55rem 0.75rem; border-radius: 0.75rem;
  transition: background-color .12s; border-bottom: 1px solid transparent;
}
/* vékony, halvány elválasztó vonal a lista-elemek között */
.list-item:not(:last-child) { border-bottom-color: rgb(var(--c-line) / 0.45); }
.dark .list-item:not(:last-child) { border-bottom-color: rgb(var(--c-line) / 0.6); }
.list-item:hover { background: rgb(var(--c-cream)); }
.dark .list-item:hover { background: rgb(var(--c-sand) / 0.4); }
.list-item.active { background: rgb(var(--c-cream)); border-color: rgb(var(--c-line)); }
/* eszköz-ikon doboz: alap homok, hover/active esetén fehér */
.dev-box { background: rgb(var(--c-sand) / 0.7); transition: background-color .12s; }
.list-item:hover .dev-box, .list-item.active .dev-box { background: #fff; }
.dark .dev-box { background: rgb(var(--c-sand) / 0.5); }
.dark .list-item:hover .dev-box, .dark .list-item.active .dev-box { background: rgb(var(--c-surface)); }
.dark .list-item.active { background: rgb(var(--c-sand) / 0.5); }
.pane-divider { width: 1px; flex-shrink: 0; background: rgb(var(--c-line)); }

/* ---- Sidebar összecsukás ---- */
.gasty-sidebar { transition: width .2s ease; }
.sidebar-collapsed .gasty-sidebar { width: 4.5rem !important; }
.sidebar-collapsed .gasty-sidebar .sidebar-label { display: none; }
.sidebar-collapsed .gasty-sidebar .sidebtn { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
.sidebar-collapsed .gasty-sidebar #siteBtn { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar-collapsed .gasty-sidebar #siteBtn .chev,
.sidebar-collapsed .gasty-sidebar #siteDomain,
.sidebar-collapsed .gasty-sidebar #siteText,
.sidebar-collapsed .gasty-sidebar #siteLabel { display: none; }
.sidebar-collapsed .gasty-sidebar .brand-wordmark { display: none; }
.sidebar-collapsed .gasty-sidebar .sidebar-logo { justify-content: center; }
.sidebar-collapsed #siteMenu { left: 0 !important; right: auto !important; width: 230px; }

/* Összecsukott oldalsáv: tooltip a menünévvel hoverre */
.sidebar-collapsed .gasty-sidebar .sidebtn { position: relative; }
.sidebar-collapsed .gasty-sidebar .sidebtn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; z-index: 60;
  background: rgb(var(--c-ink)); color: rgb(var(--c-cream));
  font-size: 12px; font-weight: 500; line-height: 1; padding: 6px 9px; border-radius: 7px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18); pointer-events: none;
}
.sidebar-collapsed .gasty-sidebar .sidebtn[data-tip]:hover::before {
  content: ''; position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-right-color: rgb(var(--c-ink)); z-index: 60; pointer-events: none;
}

/* ---- Top-right fiókmenü ---- */
.topmenu {
  position: absolute; right: 0; top: 100%; margin-top: 0.4rem; z-index: 40; width: 220px;
  border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-surface));
  border-radius: 0.75rem; padding: 0.4rem; box-shadow: 0 8px 30px rgba(0,0,0,0.14);
}

/* ---- Egyedi switch (események/robotok beállítás) ---- */
.gswitch { position: relative; height: 24px; width: 42px; flex-shrink: 0; cursor: pointer; border-radius: 9999px; background: rgb(var(--c-sanddark)); transition: background-color .15s; }
.gswitch.on { background: rgb(var(--c-ink)); }
.gswitch .knob { position: absolute; left: 3px; top: 3px; height: 18px; width: 18px; border-radius: 9999px; background: #fff; transition: left .18s; }
.gswitch.on .knob { left: 21px; }

/* ---- Dropdown menü (oldalválasztó) ---- */
.menu {
  border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-surface));
  border-radius: 0.75rem; padding: 0.25rem; box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.menu-item {
  display: flex; width: 100%; align-items: center; gap: 0.5rem; text-align: left;
  padding: 0.375rem 0.5rem; border-radius: 0.5rem; font-size: 13px; color: rgb(var(--c-ink) / 0.85);
  transition: background-color .12s; cursor: pointer;
}
.menu-item:hover { background: rgb(var(--c-sand)); }
.menu-item.active { background: rgb(var(--c-sand)); }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.32); padding: 1.5rem; animation: fade .15s ease;
}
.modal-card {
  background: rgb(var(--c-surface)); border-radius: 1.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12); overflow: hidden; width: 100%;
}

/* ---- Beállítások bal oldali tabok ---- */
.settings-tab {
  display: flex; width: 100%; align-items: center; gap: 0.625rem; text-align: left;
  padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 13px; font-weight: 500;
  color: rgb(var(--c-ink) / 0.65); transition: background-color .12s, color .12s; cursor: pointer;
}
.settings-tab:hover { background: rgb(var(--c-sand)); }
.settings-tab.active { background: rgb(var(--c-sand)); color: rgb(var(--c-ink)); }
.settings-tab .ico { width: 16px; height: 16px; }

/* ---- Téma-választó karikák ---- */
.theme-pick { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.theme-pick-circle {
  display: flex; height: 3rem; width: 3rem; align-items: center; justify-content: center;
  border-radius: 9999px; border: 2px solid rgb(var(--c-line)); background: rgb(var(--c-cream) / 0.4);
  color: rgb(var(--c-ink) / 0.55); transition: all .15s;
}
.theme-pick:hover .theme-pick-circle { background: rgb(var(--c-sand)); color: rgb(var(--c-ink) / 0.8); }
.theme-pick.selected .theme-pick-circle { border-color: rgb(var(--c-ink)); background: rgb(var(--c-sand)); color: rgb(var(--c-ink)); }

/* ---- Betűtípus-választó kártyák ---- */
.font-pick {
  display: flex; flex-direction: column; border-radius: 0.75rem; border: 2px solid rgb(var(--c-line));
  background: rgb(var(--c-cream) / 0.4); padding: 1rem 1.25rem; color: rgb(var(--c-ink));
  transition: background-color .15s, border-color .15s; cursor: pointer;
}
.font-pick:hover { background: rgb(var(--c-sand)); }
.font-pick.selected { border-color: rgb(var(--c-ink)); background: rgb(var(--c-sand)); }