/* ══ DEMÓ IGÉNYLŐ OLDAL (/demo-igenyles) ══════════════════════════════════
   Csak az önálló oldal (screens/DemoRequestPage.jsx) használja; a belépő oldal modálja nem.
   Animáció KIZÁRÓLAG transform és opacity (GPU-barát, nincs layout-eltolódás) —
   ezt a test/demo-page-redesign.jsdom.mjs ellenőrzi. */

/* Saját világos színek: az oldal ugyanúgy néz ki, bármilyen témát állítana be a látogató az appban. */
.demo-page {
  --bg: #f5f9ff;
  --surface: #ffffff;
  --surface-2: #f6f6f4;
  --border: #ececea;
  --border-strong: #d9d9d5;
  --text: #0c0c0c;
  --text-2: #4a4a47;
  --text-3: #636261;
  --text-4: #b5b5b0;
  --primary: #2c7cf6;
  color-scheme: light;
  color: var(--text);
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.demo-page > header,
.demo-page > main,
.demo-page > footer { position: relative; z-index: 1; }

/* ── Háttér: rögzített, teljes nézetes dekorációs réteg a tartalom MÖGÖTT ── */
.demo-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(160deg, #eaf6ff 0%, #f5f9ff 55%, #eef4ff 100%);
}
/* Folt: a külső elem sodródik (translate), a belső ::before lüktet (scale + opacity) — így a két
   transform-animáció nem írja felül egymást. A blur statikus, nem animált. */
.demo-blob {
  position: absolute;
  display: block;
  will-change: transform;
  animation: demo-drift-a 24s ease-in-out infinite alternate;
}
.demo-blob::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--blob) 0%, var(--blob) 30%, transparent 70%);
  filter: blur(72px);
  opacity: 0.55;
  will-change: transform, opacity;
  animation: demo-pulse 10s ease-in-out infinite;
}
.demo-blob--1 { --blob: #1ab6f0; width: 46vmax; height: 46vmax; top: -18vmax; left: -14vmax; }
.demo-blob--2 { --blob: #2c7cf6; width: 42vmax; height: 42vmax; bottom: -16vmax; right: -12vmax; animation-name: demo-drift-b; animation-duration: 28s; }
.demo-blob--3 { --blob: #7fd6f7; width: 34vmax; height: 34vmax; top: 22vh; right: -10vmax; animation-name: demo-drift-c; animation-duration: 22s; animation-delay: -6s; }
.demo-blob--4 { --blob: #8cb6ff; width: 30vmax; height: 30vmax; bottom: 4vh; left: -8vmax; animation-name: demo-drift-b; animation-duration: 26s; animation-direction: alternate-reverse; }
.demo-blob--2::before { animation-duration: 12s; animation-delay: -3s; }
.demo-blob--3::before { animation-duration: 8s; animation-delay: -5s; }
.demo-blob--4::before { animation-duration: 11s; animation-delay: -2s; }
/* Nagyon halvány pont-textúra. */
.demo-bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#2c7cf6 1px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: 0.04;
}

@keyframes demo-drift-a {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(9vw, 7vh, 0); }
}
@keyframes demo-drift-b {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-8vw, -6vh, 0); }
}
@keyframes demo-drift-c {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-6vw, 9vh, 0); }
}
@keyframes demo-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.12); opacity: 0.8; }
}

/* Keskeny képernyőn kevesebb és kisebb folt. */
@media (max-width: 639px) {
  .demo-blob--4 { display: none; }
  .demo-blob--1 { width: 92vw; height: 92vw; top: -34vw; left: -38vw; }
  .demo-blob--2 { width: 84vw; height: 84vw; bottom: -30vw; right: -34vw; }
  .demo-blob--3 { width: 64vw; height: 64vw; top: 40vh; right: -30vw; }
  .demo-blob::before { filter: blur(60px); }
}

/* ── Fokozatos megjelenés (egyszer, az első csatoláskor) ──
   --i: az elem sorszáma fentről lefelé; a késleltetés 90 ms lépésenként. Az elemek végig a DOM-ban
   vannak (képernyőolvasó számára is), csak az átlátszóság és az eltolás animált. */
.demo-reveal {
  animation: demo-reveal 400ms ease-out both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes demo-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Sikeres beküldés nézete: egyszerű beúszás. */
.demo-fade { animation: demo-fade 320ms ease-out both; }
@keyframes demo-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Mező-fókusz a termék kékjében (#2c7cf6). A jelölőnégyzet és a rádiógomb a globális outline-gyűrűt kapja (tokens.css). */
.demo-page [data-demo-request-form] input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.demo-page [data-demo-request-form] select:focus-visible {
  box-shadow: inset 0 0 0 2px #2c7cf6 !important;
}

/* Csökkentett mozgás: minden azonnal látszik, a háttér statikus színátmenet. */
@media (prefers-reduced-motion: reduce) {
  .demo-reveal,
  .demo-fade,
  .demo-blob,
  .demo-blob::before { animation: none; }
  .demo-blob::before { opacity: 0.65; }
}
:root {
  /* Neutrals — warm gray */
  --bg: #fafaf9;
  --surface: #ffffff;
  --surface-2: #f6f6f4;
  --border: #ececea;
  --border-strong: #d9d9d5;
  --text: #0c0c0c;
  --text-2: #4a4a47;
  --text-3: #636261;
  --text-4: #b5b5b0;

  /* Brand — electric cloud blue */
  --primary: #2c7cf6;
  --primary-600: #1a64d6;
  --primary-700: #1450b0;
  --primary-50: #eaf2ff;
  --primary-100: #d3e3ff;

  /* Accents */
  --lime: #c4f042;
  --lime-2: #a8d62a;
  --lime-ink: #2f4806;
  --coral: #ff7a59;
  --amber: #f5b13d;
  --rose: #ef4870;
  --success: #16a34a;

  /* Pipeline / status */
  --st-new: #6b7280;
  --st-screen: #2c7cf6;
  --st-interview: #f5b13d;
  --st-offer: #c4f042;
  --st-hired: #16a34a;
  --st-rejected: #ef4870;

  /* Shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15, 15, 14, 0.04), 0 0 0 1px rgba(15, 15, 14, 0.04);
  --shadow-md: 0 4px 14px -4px rgba(15, 15, 14, 0.08), 0 0 0 1px rgba(15, 15, 14, 0.05);
  --shadow-lg: 0 16px 40px -12px rgba(15, 15, 14, 0.14), 0 0 0 1px rgba(15, 15, 14, 0.05);

  /* Type */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e4e4e0; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #d0d0cc; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }

/* Utility — for inline use */
.hr-grad-blue {
  background: linear-gradient(135deg, #2c7cf6 0%, #5b9aff 50%, #8cb6ff 100%);
}
.hr-grad-lime {
  background: linear-gradient(135deg, #c4f042 0%, #d4f578 100%);
}
.hr-grad-coral {
  background: linear-gradient(135deg, #ff7a59 0%, #ffa888 100%);
}
.hr-grad-night {
  background: linear-gradient(135deg, #0c1a3a 0%, #1a3470 50%, #2c7cf6 100%);
}

/* Login bg */
.hr-login-bg {
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(44, 124, 246, 0.18), transparent 60%),
    radial-gradient(800px 500px at 110% 110%, rgba(196, 240, 66, 0.18), transparent 60%),
    var(--bg);
}

@keyframes hr-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hr-fade-in { animation: hr-fade-in 0.32s ease both; }

@keyframes hr-pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}
.hr-pulse-dot { animation: hr-pulse-dot 1.6s ease-in-out infinite; }

@keyframes hr-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.hr-spin { animation: hr-spin 0.8s linear infinite; }

/* Focus */
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Responsive extras ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  body { overflow-x: hidden; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║   HRFLite ATS — RESPONSIVE SYSTEM v3                    ║
   ║   CSS !important is the primary responsive mechanism.    ║
   ║   JS hooks are supplemental, CSS always wins.           ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── Global ─────────────────────────────────────────────── */
html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* ── AppShell: sidebar out of flow on mobile ────────────── */
@media (max-width: 900px) {
  .hr-app-shell { display: block !important; }
}

/* ── Sidebar: fixed + slide on mobile (CSS-primary) ─────── */
@media (max-width: 900px) {
  .hr-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100dvh !important;
    width: 260px !important;
    z-index: 95 !important;
    transform: translateX(-260px) !important;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.25s ease !important;
    box-shadow: none !important;
    overflow: hidden !important; /* csak a középső .hr-sidebar-nav görög — lásd lent */
    overscroll-behavior: contain; /* a menü görgetése ne terjedjen át a háttérre */
  }
  .hr-sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 0 16px 40px -8px rgba(0,0,0,0.25) !important;
  }
}

/* ── Sidebar: önállóan görgő menülista (fent logó, lent az alsó menü fix) ── */
.hr-sidebar-nav { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.hr-sidebar-nav::-webkit-scrollbar { width: 4px; }
.hr-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.hr-sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
.hr-sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
/* Nagyon alacsony kijelzőn (pl. fektetett telefon) a fix fej- és lábléc mellett alig maradna hely
   a menünek — ott az EGÉSZ sidebar görög, a menülista pedig nem külön. */
@media (max-height: 560px) {
  .hr-sidebar { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  .hr-sidebar-nav { flex: none !important; overflow: visible !important; }
}

/* ── Main: full width when sidebar is fixed ─────────────── */
@media (max-width: 900px) {
  .hr-main {
    width: 100% !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
  }
}

/* ── Topbar: compact on mobile ───────────────────────────── */
@media (max-width: 900px) {
  .hr-topbar { padding: 0 14px !important; gap: 8px !important; }
}

/* ── Content padding ─────────────────────────────────────── */
@media (max-width: 900px) {
  .hr-content { padding: 20px 16px 64px !important; }
}

/* ── Workspace: a tartalom sosem lehet szélesebb a nézetnél ─────────
   overflow-x: clip (nem hidden) — nem hoz létre görgető-konténert, így a
   position: sticky elemek (pl. Settings bal oldali nav) tovább működnek. */
.hr-main, .hr-content { max-width: 100%; min-width: 0; }
@media (max-width: 900px) {
  .hr-main, .hr-content { max-width: 100vw !important; overflow-x: hidden; overflow-x: clip; }
  /* Grid/flex gyerekek alapból min-width:auto-t kapnak → egy széles (nowrap)
     fülsor vagy táblázat az egész oszlopot szétfeszítené, ahelyett hogy a
     saját overflow-x: auto konténerében görgetne. */
  .hr-content > *,
  .hr-content > * > * { min-width: 0; max-width: 100%; }
  .hr-content img, .hr-content canvas, .hr-content svg { max-width: 100%; }
}

/* ══ LOGIN ══════════════════════════════════════════════════
   The hero panel is ALWAYS hidden until CSS says otherwise.
   This overrides both inline styles and the JS hook,
   eliminating the PIN overflow bug on all devices.       */

.hr-login-hero {
  display: none !important;          /* hidden on mobile by default */
}
@media (min-width: 768px) {
  .hr-login-hero {
    display: flex !important;        /* visible on tablet/desktop */
  }
}

/* Login container: single column on mobile */
@media (max-width: 900px) {
  .hr-login-bg { flex-direction: column !important; }
}

/* PIN inputs: comfortable on small screens */
@media (max-width: 479px) {
  .hr-pin-row { gap: 5px !important; max-width: 360px !important; }
  .hr-pin-row input {
    height: 44px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
    min-width: 0 !important;
    max-width: 60px !important;
  }
}

/* ══ GRIDS ══════════════════════════════════════════════════ */

/* KPI stat grid: 2 columns on mobile */
@media (max-width: 900px) {
  .hr-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
}

/* Dashboard, Candidate, Position detail: single column on mobile */
@media (max-width: 900px) {
  .hr-dash-grid,
  .hr-2col-grid,
  .hr-reports-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .hr-dash-grid > *,
  .hr-2col-grid > *,
  .hr-reports-grid > *,
  .hr-settings-grid > * { min-width: 0; max-width: 100%; }
}

/* Settings: hide sidebar nav, show select on mobile */
@media (max-width: 900px) {
  .hr-settings-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .hr-settings-nav  { display: none !important; }
}

/* ══ CARD responsive padding ════════════════════════════════  */
@media (max-width: 479px) {
  /* Reduce oversized paddings */
  [style*="padding: 24px"] { padding: 16px !important; }
}

/* ── PIN row: always constrained, inputs shrinkable ── */
.hr-pin-row {
  max-width: 420px;
  width: 100%;
}
.hr-pin-row input {
  min-width: 0 !important;   /* override browser default min-width:auto */
  max-width: 72px;
}

/* Touch targets */
@media (max-width: 900px) {
  button, [role="button"] { min-height: 36px; }
}

/* ══ v3.1 TARGETED FIXES ════════════════════════════════════ */

/* ── SettingsRow: stack on mobile ── */
@media (max-width: 640px) {
  .hr-settings-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .hr-settings-row input,
  .hr-settings-row select {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── Funnel chart label text: smaller on mobile ── */
@media (max-width: 500px) {
  .hr-funnel-chart [style*="font-size: 11px"] {
    font-size: 10px !important;
  }
  .hr-funnel-chart [style*="font-size: 13px"] {
    font-size: 11px !important;
  }
}

/* ── KPI stat cards: don't overflow ── */
@media (max-width: 480px) {
  .hr-kpi-grid > div {
    padding: 14px !important;
    min-width: 0;
    overflow: hidden;
  }
}

/* ── Input fields: never overflow their container ── */
input, select, textarea {
  max-width: 100%;
}

/* ── Positions list simplified on mobile (class-based) ── */
@media (max-width: 900px) {
  .hr-kpi-grid > div { min-width: 0; }
}

/* ── Touch scroll for all horizontal overflow elements ── */
@media (max-width: 900px) {
  * { -webkit-overflow-scrolling: touch; }
}

/* ── Tabs: no scrollbar visible ── */
/* Csak mobilon — asztali Chrome-ban a scrollbar-width felülírná a fenti
   ::-webkit-scrollbar stílust (korábban is csak ≤900px alatt volt érvényben). */
@media (max-width: 900px) {
  * { scrollbar-width: thin; }
}

/* ── Vízszintes fülsorok: görgethetők, görgetősáv nélkül ────────────
   .hr-tab-bar: a közös Tabs komponens (ui.jsx) és minden egyedi fülsor. */
.hr-tab-bar, .tab-bar, .tabs-row {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.hr-tab-bar::-webkit-scrollbar, .tab-bar::-webkit-scrollbar, .tabs-row::-webkit-scrollbar { display: none; }
.hr-tab-bar > * { flex-shrink: 0; }

/* ── Széles táblázat/diagram: saját vízszintes görgetés ── */
.hr-scroll-x { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 900px) {
  /* Kapcsoló-/gombcsoport: mobilon egymás alá */
  .hr-stack-mobile { flex-direction: column !important; align-items: stretch !important; }
  .hr-stack-mobile > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: none !important; }
  /* Sor, ami mobilon törhet */
  .hr-wrap-mobile { flex-wrap: wrap !important; }
  .hr-wrap-mobile > * { min-width: 0; }
  .hr-hide-mobile { display: none !important; }
  /* Lista-sor (ikon + fő szöveg + kapcsolók/gombok): mobilon a fő szöveg saját sort
     kap, a kapcsolók/gombok alá törnek — nem csúsznak egymásra. */
  .hr-row-mobile { flex-wrap: wrap !important; row-gap: 10px; }
  .hr-row-mobile > .hr-row-main { flex: 1 1 calc(100% - 60px) !important; min-width: 0; }
}

/* Többoszlopos űrlap-grid → egy oszlop (csak telefonon; tableten marad a 2 oszlop).
   Az <input> belső min. szélessége miatt a fix "1fr 1fr" rács kilógott a kártyából. */
.hr-grid-1-mobile > * { min-width: 0; }
@media (max-width: 640px) {
  .hr-grid-1-mobile { grid-template-columns: minmax(0, 1fr) !important; }
  .hr-grid-1-mobile > * { grid-column: auto !important; }
}

/* ── Mobil menü nyitva: a háttér nem görög (lásd layout.jsx AppShell) ── */
body.hr-scroll-locked { overflow: hidden !important; position: fixed; width: 100%; left: 0; right: 0; }

/* Tiptap (RichTextEditor) szerkesztő-tartalom */
.ProseMirror { outline: none; }
.ProseMirror ul,
.ProseMirror ol { padding-left: 20px; margin: 6px 0; }
.ProseMirror li { margin: 2px 0; }
.ProseMirror li > p { margin: 0; }
.ProseMirror p { margin: 4px 0; }
.ProseMirror strong { font-weight: 700; }
.ProseMirror em { font-style: italic; }
.ProseMirror u { text-decoration: underline; }

/* Értesítés-panel (layout.jsx NotificationBell): asztali nézetben a harang alatt, jobbra igazítva
   (position:absolute, 340px). Keskeny (mobil Safari) nézetben a harang a jobb szélen van, így a
   340px-es panel balra kilógna a képernyőről — ilyenkor a viewporthoz rögzítjük, 8px margóval,
   a 64px-es fejléc alá. Szándékosan nem 100vw-t használ (Safari görgetősáv/safe-area eltérés). */
@media (max-width: 480px) {
  .hr-notif-panel {
    position: fixed !important;
    top: 72px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(70vh, calc(100dvh - 88px)) !important;
    background-color: #ffffff;
  }
}