/*
 * vig1-calendar.css — FullCalendar Modern Slate event design
 * Minden #vig1-calendar specifikus stílus itt van összegyűjtve.
 * Vig1 WordPress plugin — room-booking calendar.
 */

/* ════════════════════════════════════════════════════════════════════════════
   FullCalendar téma-izoláció
   Specificitás: #vig1-calendar td = 111 → leveri a legtöbb WP téma
   elem-szabályát (pl. Astra: td { padding:10px } = 1).

   Rácsvonal-szín: a --fc-border-color-t itt írjuk felül (világos szürke).
   A td/th-nak SZÁNDÉKOSAN nincs saját border-resetje — a FullCalendar
   .fc-theme-standard td/th{border:1px solid var(--fc-border-color)}
   szabálya adja a rácsvonalat, ezt a változót módosítva állítható a szín
   (pl. nagyon világos szürkére: --fc-border-color: #f1f5f9;).
   ════════════════════════════════════════════════════════════════════════════ */
#vig1-calendar,
#vig1-pricing-calendar {
    --fc-border-color: #e2e8f0;
    /* Ugyanaz a karakterkészlet, mint a #vig1-calendar-shell fejlécben
       (lásd vig1-calendar-shell.css) — a shell testvér elem, nem öröklődik ide. */
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
        "Segoe UI", Roboto, sans-serif;
}

#vig1-calendar table,
#vig1-pricing-calendar table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin: 0;
    font-size: inherit;
    background: transparent;
}

#vig1-calendar th,
#vig1-pricing-calendar th {
    padding: 0;
    vertical-align: top;
    text-align: left;
    font-size: inherit;
    font-weight: inherit;
    background: transparent;
    box-shadow: none;
    height: auto;
    width: auto;
    max-width: none;
    line-height: normal;
}

/* A cellák alap-háttere nagyon világos szürke (nem tiszta fehér) —
   a nyitvatartás-esemény (.vig1-opening-hours-bg) ez fölé rétegződik. */
#vig1-calendar td,
#vig1-pricing-calendar td {
    padding: 0;
    vertical-align: top;
    text-align: left;
    font-size: inherit;
    font-weight: inherit;
    background: #f8fafc;
    box-shadow: none;
    height: auto;
    width: auto;
    max-width: none;
    line-height: normal;
}

/* ════════════════════════════════════════════════════════════════════════════
   Firefox: a `#vig1-calendar td { height:auto }` reset (fent) MAGASABB
   specificitású (#id td = 1,0,1), mint a FullCalendar saját belső
   szabálya (`.fc .fc-scrollgrid-section > td { height:1px }` /
   `.fc-scrollgrid-section-liquid > td { height:100% }` — specificitás
   0,2,1), ezért felülírja azt.

   Ez a `height:1px` → `height:100%` lánc a CSS-táblázatok klasszikus
   trükkje, amivel a FullCalendar egy FIX magasságú (`height: <szám>`
   opcióval inicializált) naptárban a fejléc-sor (nap-nevek) alatti
   "liquid" (a maradék helyet kitöltő) sor tényleges, table-layout által
   kiszámított magasságát lejuttatja a `.fc-scroller-harness`/`.fc-scroller`
   elemig (`height:100%` lánc) — enélkül a láncban lévő `height:auto`
   miatt a scroller egy tetszőleges, apró (tartalom szerinti minimum)
   magasságra esik vissza.

   Chrome/Blink ezt a hiányzó láncszemet is elnézi (a tábla saját,
   layout-ból számított magasságát mindenképp lejuttatja), Firefox/Gecko
   viszont szigorúan a specifikációt követi: százalékos magasság csak
   akkor oldódik fel, ha a szülőnek explicit (nem `auto`) magassága van —
   emiatt ÖSSZEOMLIK a heti timeGrid FÜGGŐLEGES görgetési területe
   (`.fc-scroller-harness`/`.fc-scroller` ~30px-re esik vissza a valódi
   ~1200px helyett), miközben a fejléc/napnevek/rácsvonalak helyesen
   megjelennek (azok NEM ebben a "liquid" sorban vannak).

   A javítás NEM a fenti generikus `td` reset eltávolítása (az minden
   MÁS táblázat-cellához szükséges theme-izoláció), hanem a
   FullCalendar SAJÁT scrollgrid-celláinak visszaadjuk a saját
   magasság-vezérlésüket, ugyanazzal a mechanizmussal, csak
   `#vig1-calendar`/`#vig1-pricing-calendar`-ra szűkítve (így magasabb
   specificitású, mint a generikus `td` reset is).
   Lásd: dokumentacio/2026-09-15 (Firefox FullCalendar timeGrid hiba).
   ════════════════════════════════════════════════════════════════════════════ */
#vig1-calendar .fc-scrollgrid-section > td,
#vig1-pricing-calendar .fc-scrollgrid-section > td {
    height: 1px;
}

#vig1-calendar .fc-scrollgrid-section-liquid > td,
#vig1-pricing-calendar .fc-scrollgrid-section-liquid > td {
    height: 100%;
}

#vig1-calendar a,
#vig1-pricing-calendar a {
    color: inherit;
    text-decoration: none;
}

#vig1-calendar p,
#vig1-pricing-calendar p {
    margin: 0;
}

#vig1-calendar ul,
#vig1-calendar ol,
#vig1-pricing-calendar ul,
#vig1-pricing-calendar ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

#vig1-calendar li,
#vig1-pricing-calendar li {
    margin: 0;
    padding: 0;
}

#vig1-calendar h1,
#vig1-calendar h2,
#vig1-calendar h3,
#vig1-calendar h4,
#vig1-pricing-calendar h1,
#vig1-pricing-calendar h2,
#vig1-pricing-calendar h3,
#vig1-pricing-calendar h4 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
}

#vig1-calendar button,
#vig1-pricing-calendar button {
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

/* Foglalás-események vízszintesen beljebb — két oldalt marad kattintható sáv */
#vig1-calendar .fc-timegrid-event-harness {
    padding-left: 10px;
    padding-right: 10px;
}

/* ════════════════════════════════════════════════════════════════════════════
   Nyitvatartás háttér-események — .fc-bg-event.vig1-opening-hours-bg
   display:'background' → FC .fc-bg-event-ként rendereli, NEM .fc-event.
   Halvány (FC alap 0.3 opacity) tint-háttér, nincs border/oldalsáv, nincs padding.
   ════════════════════════════════════════════════════════════════════════════ */

/* A timegrid bg-harness ne kapjon esemény-harnessre szánt paddinget */
#vig1-calendar .fc-timegrid-bg-harness {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* A nyitvatartás bg-event: halvány (0.3 opacity) tint, nincs border, nincs oldalsáv, pointer-events off */
/* border-style: none !important és border-width: 0 !important kell, mert a WP téma
   html :where([style*=border-color]) { border-style: solid } szabálya illeszkedik
   az elemre (—fc-event-border-color— tartalmazza a „border-color‟ stringet). */
#vig1-calendar .vig1-opening-hours-bg {
    opacity: 0.3 !important;
    border: none !important;
    border-style: none !important;
    border-width: 0 !important;
    border-left: none !important;
    box-shadow: none !important;
    border-radius: 0;
    pointer-events: none;
    outline: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   Modern Slate esemény design
   A JS (eventDidMount) setProperty()-vel állítja be --fc-event-bg-color-t
   a backend terem-színéből. A CSS !important-tal felülírja a FC inline
   background-color / color stílusait.
   ════════════════════════════════════════════════════════════════════════════ */
#vig1-calendar .fc-event:not(.vig1-opening-hours-bg) {
    /* Fallback — szürke, ha a backend nem küld terem-színt */
    --fc-event-bg-color:     #64748b;
    --fc-event-border-color: var(--fc-event-bg-color);

    /* Halvány tint háttér az accent-színből */
    background-color: color-mix(in srgb, var(--fc-event-bg-color) 12%, white) !important;

    /* Sötét szöveg a halvány háttéren — felülírja FC white default-ját */
    color: #0f172a !important;

    /* Bal oldali 3 px-es accent sáv; többi border transparent */
    border-color: transparent !important;
    border-left: 3px solid var(--fc-event-bg-color) !important;
    border-radius: 4px;

    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Hover: erősebb tint + árnyék + előtérbe hozás */
#vig1-calendar .fc-event:not(.vig1-opening-hours-bg):hover {
    background-color: color-mix(in srgb, var(--fc-event-bg-color) 18%, white) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    z-index: 5;
}

/* Időpont sor — accent-szín (sötétítve), félkövér, rögzített számszélesség */
#vig1-calendar .fc-event .fc-event-time {
    color: color-mix(in srgb, var(--fc-event-bg-color) 85%, black);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Cím sor — sötét, kis méret, semibold, ellipsis */
#vig1-calendar .fc-event .fc-event-title {
    color: #0f172a;
    font-size: 11px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Múltbeli / lejárt foglalások halvány megjelenítése */
/* #vig1-calendar .fc-event.is-past {
     opacity: 0.55; 
} */

/* ════════════════════════════════════════════════════════════════════════════
   Saját-foglalás badge (own-booking)
   ════════════════════════════════════════════════════════════════════════════ */
#vig1-calendar .vig1-own-booking-event .fc-event-main {
    position: relative;
    padding-right: 18px;
}

/* Fallback marker: JS badge-beszúrás nélkül is látszik a jelzés */
#vig1-calendar .vig1-own-booking-event .fc-event-main::before {
    content: '!';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: var(--vig1-own-mark-fg, #0f172a);
    background: var(--vig1-own-mark-bg, #ffffff);
    border: 1px solid var(--vig1-own-mark-fg, #0f172a);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
    pointer-events: none;
    z-index: 4;
}

#vig1-calendar .vig1-own-booking-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: var(--vig1-own-mark-fg, #0f172a);
    background: var(--vig1-own-mark-bg, #ffffff);
    border: 1px solid var(--vig1-own-mark-fg, #0f172a);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
    pointer-events: auto;
    cursor: help;
    z-index: 5;
}

#vig1-calendar .vig1-own-booking-event .fc-event-main.vig1-own-badge-mounted::before {
    display: none;
}

#vig1-calendar .vig1-own-booking-event .fc-event-main .vig1-own-booking-badge + .fc-event-title,
#vig1-calendar .vig1-own-booking-event .fc-event-main .vig1-own-booking-badge ~ .fc-event-title {
    padding-right: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   Függőben lévő (pending) badge — jobb-felső sarokba helyezve
   A JS esetleg bottom/left inline stílust állít, a !important felülírja.
   ════════════════════════════════════════════════════════════════════════════ */
#vig1-calendar .vig1-pending-booking-badge {
    position: absolute !important;
    top:    2px !important;
    right:  2px !important;
    bottom: auto !important;
    left:   auto !important;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: var(--vig1-pending-mark-fg, #92400e);
    background: var(--vig1-pending-mark-bg, #fef3c7);
    border: 1px solid color-mix(in srgb, var(--fc-event-bg-color) 60%, #92400e);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
    pointer-events: auto;
    cursor: help;
    z-index: 20;
}

#vig1-calendar .fc-timegrid-event:has(.vig1-pending-booking-badge) {
    overflow: visible;
}

/* ════════════════════════════════════════════════════════════════════════════
   Nap-elválasztó vonalak
   border-collapse miatt a td/th border nem látszik.
   ::after pseudo-element = NEM table cell, nem érinti a collapse,
   biztosan renderelődik 1px vonalként.
   ════════════════════════════════════════════════════════════════════════════ */

/* Timegrid: naposzlopok (mindegyik, kivéve az axis és az utolsó) */
#vig1-calendar .fc-timegrid-col:not(.fc-timegrid-axis):not(:last-child) {
    position: relative;
}
#vig1-calendar .fc-timegrid-col:not(.fc-timegrid-axis):not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: rgba(148, 163, 184, 0.4);
    pointer-events: none;
    z-index: 1;
}

/* Fejléc cellák */
#vig1-calendar .fc-col-header-cell:not(:last-child) {
    position: relative;
}
#vig1-calendar .fc-col-header-cell:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: rgba(148, 163, 184, 0.4);
    pointer-events: none;
}

/* Daygrid (havi nézet) */
#vig1-calendar .fc-daygrid-day:not(:last-child) {
    position: relative;
}
#vig1-calendar .fc-daygrid-day:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: rgba(148, 163, 184, 0.4);
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   Eszköztár (toolbar) — helyre lesz állítva az új fejléc CSS-sel
   ════════════════════════════════════════════════════════════════════════════ */