/* ==========================================================================
   Vezetési óra foglaló · közös design-alapok
   --------------------------------------------------------------------------
   A felépítés (keret, oldalsáv, lépés-képernyők, komponensek) a masszirozlak
   foglalóéval AZONOS, csak a stílus más: egyszerű, világos (Zinc 50) oldalsáv,
   Tailwind Zinc semlegesek + Blue márkaszín, Poppins betű.
   Ami csak az oldalon fordul elő, az az index.html <style> blokkjában marad.
   ========================================================================== */

/* ---------- BETŰ: Poppins, mindenhol (user-kérés), a projektből (OFL, assets/fonts/OFL.txt) ----------
   CSAK három súly van (user-kérés: „a bold túl vastag"): 400 szöveg, 500 kiemelés / gomb / címke,
   600 cím - ennél vastagabb nincs, a 700/800-as fájl nincs is a projektben, és a font-synthesis:none
   miatt a böngésző sem hamisít félkövért. Mért metrika: felső 1,05 em, alsó 0,35 em - az
   override-okkal a doboz közepe = a számjegyek közepe (felső - alsó = 0,746 em), a teljes magasság
   (1,4 em) változatlan. Táblázatos számjegy (tnum) nincs: minden szám a saját dobozában középre zárt. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/poppins-400-latin.woff2') format('woff2');
  ascent-override:107.3%;descent-override:32.7%;line-gap-override:0%;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/poppins-400-latin-ext.woff2') format('woff2');
  ascent-override:107.3%;descent-override:32.7%;line-gap-override:0%;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/poppins-500-latin.woff2') format('woff2');
  ascent-override:107.3%;descent-override:32.7%;line-gap-override:0%;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/poppins-500-latin-ext.woff2') format('woff2');
  ascent-override:107.3%;descent-override:32.7%;line-gap-override:0%;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/poppins-600-latin.woff2') format('woff2');
  ascent-override:107.3%;descent-override:32.7%;line-gap-override:0%;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
  ascent-override:107.3%;descent-override:32.7%;line-gap-override:0%;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

/* ---------- SZÍNPALETTA: Tailwind CSS v4.3.3 ----------
   Az értékek szó szerint a tailwindcss/theme.css-ből (oklch), azonos --color-* nevekkel.
   Semleges = Zinc, márka = Blue, a visszajelzés Green / Red (a jogi oldal jelölője Yellow).
   Saját (nem Tailwind) szín NINCS a projektben: új színnél a skála egy lépcsőjét használd,
   áttetszőséghez color-mix()-et a skála színével. Ahol oklch nem mehet (e-mail, favikon,
   theme-color), ott a lépcső hexe áll (a böngészőben renderelt érték, lásd README). */
:root{
  --color-white:#fff;
  --color-zinc-50:oklch(98.5% 0 none);
  --color-zinc-100:oklch(96.7% 0.001 286.375);
  --color-zinc-200:oklch(92% 0.004 286.32);
  --color-zinc-300:oklch(87.1% 0.006 286.286);
  --color-zinc-400:oklch(70.5% 0.015 286.067);
  --color-zinc-500:oklch(55.2% 0.016 285.938);
  --color-zinc-600:oklch(44.2% 0.017 285.786);
  --color-zinc-700:oklch(37% 0.013 285.805);
  --color-zinc-800:oklch(27.4% 0.006 286.033);
  --color-zinc-900:oklch(21% 0.006 285.885);
  --color-zinc-950:oklch(14.1% 0.005 285.823);
  --color-blue-50:oklch(97% 0.014 254.604);
  --color-blue-100:oklch(93.2% 0.032 255.585);
  --color-blue-200:oklch(88.2% 0.059 254.128);
  --color-blue-300:oklch(80.9% 0.105 251.813);
  --color-blue-400:oklch(70.7% 0.165 254.624);
  --color-blue-500:oklch(62.3% 0.214 259.815);
  --color-blue-600:oklch(54.6% 0.245 262.881);
  --color-blue-700:oklch(48.8% 0.243 264.376);
  --color-blue-800:oklch(42.4% 0.199 265.638);
  --color-blue-900:oklch(37.9% 0.146 265.522);
  --color-blue-950:oklch(28.2% 0.091 267.935);
  --color-yellow-100:oklch(97.3% 0.071 103.193);
  --color-yellow-900:oklch(42.1% 0.095 57.708);
  --color-green-50:oklch(98.2% 0.018 155.826);
  --color-green-100:oklch(96.2% 0.044 156.743);
  --color-green-700:oklch(52.7% 0.154 150.069);
  --color-red-50:oklch(97.1% 0.013 17.38);
  --color-red-200:oklch(88.5% 0.062 18.334);
  --color-red-600:oklch(57.7% 0.245 27.325);
  --color-red-700:oklch(50.5% 0.213 27.518);
}

:root{
  /* betűtípus: Poppins mindenhol */
  --sans:'Poppins',system-ui,'Segoe UI',Roboto,-apple-system,'Helvetica Neue',Arial,sans-serif;
  /* alapszínek (Zinc) */
  --bg:var(--color-zinc-100); --sand:var(--color-zinc-200); --card:var(--color-white); --surface:var(--color-zinc-50);
  --ink:var(--color-zinc-900); --ink-soft:var(--color-zinc-700); --muted:var(--color-zinc-500); --faint:var(--color-zinc-400);
  --line:var(--color-zinc-200); --line2:var(--color-zinc-300);
  /* VILÁGOS téma mindenhol (user-kérés): az oldalsáv / mobil fejléc Zinc 50, sötét felület nincs.
     Márkaszín: „T" tábla = Blue 600. */
  --side:var(--color-zinc-50); --side-ink:var(--color-zinc-900); --side-soft:var(--color-zinc-500);
  --accent:var(--color-blue-600); --accent-hover:var(--color-blue-700); --accent-hi:var(--color-blue-500);
  --accent-mid:var(--color-blue-300); --accent-soft:var(--color-blue-50); --accent-soft-2:var(--color-blue-100); --accent-ink:var(--color-blue-700);
  /* visszajelző színek */
  --danger:var(--color-red-600); --danger-bg:var(--color-red-50); --danger-line:var(--color-red-200); --danger-ink:var(--color-red-700);
  --ok:var(--color-green-700); --ok-deep:var(--color-green-700); --ok-bg:var(--color-green-100); --ok-ring:var(--color-green-50);
  /* árnyékok - Zinc 950 áttetszően */
  --sh-sm:0 1px 2px color-mix(in oklab,var(--color-zinc-950) 6%,transparent);
  --sh-md:0 2px 5px color-mix(in oklab,var(--color-zinc-950) 5%,transparent),0 14px 30px -16px color-mix(in oklab,var(--color-zinc-950) 28%,transparent);
  --sh-lg:0 34px 74px -34px color-mix(in oklab,var(--color-zinc-950) 40%,transparent);
  --glow:0 12px 26px -12px color-mix(in oklab,var(--color-blue-600) 55%,transparent);
  /* lekerekítések */
  --r-card:14px; --r-ctl:10px;
  /* alkalmazás-oldal (foglalás) keretezése */
  --pad-page:24px; --gut:32px;
  /* térköz-skála (a masszirozlakkal azonos) */
  --sp-05:2px;
  --sp-1:4px;  --sp-2:8px;   --sp-3:12px; --sp-4:16px;  --sp-5:20px;
  --sp-6:24px; --sp-8:32px;  --sp-10:40px; --sp-12:48px; --sp-16:64px;
}

/* ---------- alapok ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{font-synthesis:none;}   /* nincs hamisított félkövér / dőlt */
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;display:block;}
a{color:var(--accent);}
p{margin:0;line-height:calc(var(--lh-body) + .125rem);}   /* 17/24: HIG Body, loose */
b,strong,th{font-weight:500;}   /* a böngésző alapja 700 lenne */
h1,h2,h3,h4{font-family:var(--sans);font-weight:600;letter-spacing:-.005em;margin:0;text-wrap:balance;}
button{font-family:inherit;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
input,select,textarea{font-family:inherit;}
input[type="checkbox"],input[type="radio"]{margin:0;}
:focus-visible{outline:2.5px solid var(--accent-hi);outline-offset:2px;border-radius:4px;}
h2[tabindex]:focus,h2[tabindex]:focus-visible{outline:none;}
::selection{background:var(--accent-soft);}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- tipográfiai segédek ---------- */
.eyebrow{font-size:var(--fs-foot);line-height:var(--lh-foot);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.muted{color:var(--muted);}
.num{font-variant-numeric:tabular-nums;}
.link{color:var(--accent);font-weight:500;cursor:pointer;text-underline-offset:3px;background:none;border:none;font:inherit;padding:0;}
.link:hover{text-decoration:underline;}

/* ---------- „T" tanulótábla-jel (logó) ----------
   Grafika (SVG, a favicon.svg-vel azonos alak), nem betű: így nem esik a HIG típusskála alá. */
.tsign{display:block;flex:none;width:44px;height:44px;border-radius:9px;background:var(--accent);color:var(--color-white);
  box-shadow:inset 0 0 0 2px var(--color-white),0 0 0 1px var(--accent);}
.tsign svg{display:block;width:100%;height:100%;}

/* ---------- gombok ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);border:none;border-radius:var(--r-ctl);
  padding:var(--sp-3) var(--sp-6);font:inherit;font-weight:500;cursor:pointer;text-decoration:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease,background .14s ease,border-color .14s ease;}
.btn svg{width:18px;height:18px;flex:none;}
.btn.primary{background:var(--accent);color:var(--color-white);box-shadow:var(--glow);}
.btn.primary:hover{background:var(--accent-hover);transform:translateY(-1px);}
.btn.primary:active{transform:translateY(0);}
.btn.primary:disabled{background:var(--color-zinc-200);color:var(--color-zinc-400);cursor:not-allowed;box-shadow:none;filter:none;transform:none;}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line2);}
.btn.ghost:hover{background:var(--surface);border-color:var(--ink-soft);}
.iconbtn{border:1px solid var(--line2);background:var(--card);width:40px;height:40px;border-radius:10px;padding:0;
  cursor:pointer;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;transition:.15s;flex:none;}
.iconbtn svg{width:19px;height:19px;display:block;}
.iconbtn:hover{background:var(--surface);color:var(--accent);}

/* ---------- űrlapok ---------- */
.label{font-size:var(--fs-sub);line-height:var(--lh-sub);font-weight:500;letter-spacing:.02em;color:var(--ink-soft);}
.field{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;}
.field input{width:100%;border:1px solid var(--line2);background:var(--surface);
  border-radius:var(--r-ctl);padding:12px var(--sp-4);font:inherit;color:var(--ink);transition:.15s;}
.field input::placeholder{color:var(--faint);}
.field input:focus{outline:none;border-color:var(--accent-hi);background:var(--color-white);box-shadow:0 0 0 3px var(--accent-soft);}
.field.err input{border-color:var(--danger);background:var(--danger-bg);}
.field .emsg{color:var(--danger);display:none;}
.field.err .emsg{display:block;}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);}

/* ---------- összegző kártya ---------- */
.sumcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);}
.sumcard .head{font-weight:600;}
.srow{display:flex;justify-content:space-between;gap:var(--sp-3);}
.srow .k{color:var(--ink-soft);}
.srow .v{font-weight:500;text-align:right;font-variant-numeric:tabular-nums;}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:var(--sp-6);transform:translateX(-50%) translateY(8px);background:var(--card);color:var(--ink);border:1px solid var(--line);
  padding:12px var(--sp-5);border-radius:var(--r-ctl);font-weight:500;font-size:var(--fs-sub);line-height:var(--lh-sub);opacity:0;pointer-events:none;
  transition:.25s;z-index:60;box-shadow:var(--sh-md);max-width:calc(100% - 32px);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.error{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-line);}

/* ---------- naptárrács (foglalás) ---------- */
.grid7{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-1);}
.grid7 .wl{font-size:var(--fs-foot);line-height:var(--lh-foot);text-align:center;font-weight:500;color:var(--muted);padding:var(--sp-1) 0;}
.dcell{position:relative;aspect-ratio:1;border:none;background:transparent;border-radius:10px;font:inherit;
  cursor:pointer;color:var(--ink);transition:background .14s,color .14s;font-variant-numeric:tabular-nums;}
.dcell:hover{background:var(--surface);}
.dcell.avail{background:var(--accent-soft);color:var(--accent-ink);font-weight:500;}
.dcell.avail:hover{background:var(--accent-soft-2);}
.dcell.sel,.dcell.sel:hover{background:var(--accent);color:var(--color-white);font-weight:500;box-shadow:var(--glow);}
.dcell:disabled{color:var(--faint);cursor:default;background:none;}
.dcell.today::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--muted);transform:translateX(-50%);}
.dcell.sel.today::after{background:var(--color-white);}

/* ---------- alkalmazás-keret (foglalás) ---------- */
.deskstage{min-height:100vh;min-height:100dvh;padding:var(--pad-page);background:var(--bg);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);}
.shell{width:100%;max-width:1060px;background:var(--card);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;box-shadow:var(--sh-lg);display:grid;grid-template-columns:308px 1fr;
  height:calc(100vh - var(--pad-page)*2);height:calc(100dvh - var(--pad-page)*2);min-height:560px;}
.side{background:var(--side);color:var(--side-ink);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;position:relative;}
.main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;}
.screen{display:none;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line2) transparent;}
.screen.active{display:flex;animation:fade .24s ease;}

@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}

/* ---------- mobil ---------- */
@media (max-width:860px){
  .iconbtn{width:44px;height:44px;}
  .formgrid{grid-template-columns:1fr;}
  .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr;border-radius:16px;min-height:0;}
  .side{border-right:none;border-bottom:1px solid var(--line);}
}

/* ==========================================================================
   TIPOGRÁFIA - Apple HIG „Large" Dynamic Type skála (1 pt = 1 CSS px), a
   szalon-projektekkel azonos blokk. Minden szöveg ezek közül kap egyet.
   ========================================================================== */
:root{
  --fs-display:clamp(2.125rem, 1.35rem + 3.3vw, 3.5rem);
  --fs-large:2.125rem;  --lh-large:2.5625rem;   /* 34/41 */
  --fs-t1:1.75rem;      --lh-t1:2.125rem;       /* 28/34 */
  --fs-t2:1.375rem;     --lh-t2:1.75rem;        /* 22/28 */
  --fs-t3:1.25rem;      --lh-t3:1.5625rem;      /* 20/25 */
  --fs-head:1.0625rem;  --lh-head:1.375rem;     /* 17/22 */
  --fs-body:1.0625rem;  --lh-body:1.375rem;     /* 17/22 */
  --fs-call:1rem;       --lh-call:1.3125rem;    /* 16/21 */
  --fs-sub:.9375rem;    --lh-sub:1.25rem;       /* 15/20 */
  --fs-foot:.8125rem;   --lh-foot:1.125rem;     /* 13/18 */
  --fs-cap1:.75rem;     --lh-cap1:1rem;         /* 12/16 */
  --fs-cap2:.6875rem;   --lh-cap2:.8125rem;     /* 11/13 */
}
.t-display {--lh:1.08em;font-size:var(--fs-display);line-height:var(--lh);}
.t-large   {--lh:var(--lh-large);font-size:var(--fs-large);line-height:var(--lh);}
.t-title1  {--lh:var(--lh-t1);   font-size:var(--fs-t1);   line-height:var(--lh);}
.t-title2  {--lh:var(--lh-t2);   font-size:var(--fs-t2);   line-height:var(--lh);}
.t-title3  {--lh:var(--lh-t3);   font-size:var(--fs-t3);   line-height:var(--lh);}
.t-headline{--lh:var(--lh-head); font-size:var(--fs-head); line-height:var(--lh);font-weight:600;}
.t-body    {--lh:var(--lh-body); font-size:var(--fs-body); line-height:var(--lh);}
.t-callout {--lh:var(--lh-call); font-size:var(--fs-call); line-height:var(--lh);}
.t-subhead {--lh:var(--lh-sub);  font-size:var(--fs-sub);  line-height:var(--lh);}
.t-footnote{--lh:var(--lh-foot); font-size:var(--fs-foot); line-height:var(--lh);}
.t-caption1{--lh:var(--lh-cap1); font-size:var(--fs-cap1); line-height:var(--lh);}
.t-caption2{--lh:var(--lh-cap2); font-size:var(--fs-cap2); line-height:var(--lh);}
.t-loose   {line-height:calc(var(--lh,var(--lh-body)) + .125rem);}