/**
 * Nobe orange theme override pro Flatpickr.
 * Přepisuje defaultové modré barvy na firemní oranžovou (#FF6600 / #f16823).
 *
 * Specifita: jednoduché class selektory (Flatpickr používá 0-1-0), naše overridy
 * mají stejnou specifitu + jsou později v CSS — vyhrávají bez !important.
 */

/* ===== Typography & layout ===== */
.flatpickr-calendar {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
        border: 1px solid #e2e4e7;
        padding-bottom: 6px;
}

/* ===== Header (měsíc + rok) ===== */
.flatpickr-months {
        background: #FF6600;
        border-radius: 8px 8px 0 0;
        padding: 6px 0;
}
.flatpickr-months .flatpickr-month {
        color: #fff;
        fill: #fff;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
        color: #fff;
        fill: #fff;
        padding: 8px 12px;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
        fill: #fff;
        opacity: 0.7;
}
.flatpickr-current-month {
        font-size: 16px;
        font-weight: 600;
        padding-top: 4px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        padding: 2px 6px;
        font-weight: 600;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month input.cur-year:hover {
        background: rgba(255, 255, 255, 0.2);
}
.flatpickr-current-month .numInputWrapper:hover {
        background: rgba(255, 255, 255, 0.1);
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
        border-bottom-color: #fff;
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
        border-top-color: #fff;
}
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
        background: #fff;
        color: #333;
}

/* ===== Hlavička: flex layout pro custom dropdown (year + month) ===== */
/* `.flatpickr-month` default má overflow:hidden (kvůli klipnutí slide transitions) — to
   ale klipne náš absolute-positioned dropdown popup. Vypneme. Stejně pro `.flatpickr-months`
   parent. Bez tohoto popup s ročníky není vidět (skryje se za okraj hlavičky).
   Plus zvyšujeme z-index aby popup s ročníky/měsíci byl NAD dny kalendáře (DOM order
   je header → body, takže bez explicit z-indexu byl popup za dny). */
.flatpickr-calendar .flatpickr-months {
        overflow: visible !important;
        position: relative;
        z-index: 10;
}
.flatpickr-calendar .flatpickr-month {
        overflow: visible !important;
}
.flatpickr-calendar .flatpickr-innerContainer {
        position: relative;
        z-index: 1;
}
.flatpickr-current-month {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex-wrap: nowrap;
        padding-top: 4px;
        overflow: visible !important;
}

/* ===== Custom dropdown komponenta (fp-cd) — náhrada native <select> ===== */
/* Důvod: native popup výška je browser-controlled. Naše div-based komponenta má fixní
   max-height + scroll → konzistentní UX napříč desktop/mobile, žádný full-screen popup. */
.flatpickr-current-month .fp-cd {
        position: relative;
        display: inline-block;
        margin: 0;
}
.flatpickr-current-month .fp-cd-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: rgba(255, 255, 255, 0.12);
        border: none;
        border-radius: 4px;
        color: #fff;
        padding: 4px 8px;
        font-weight: 600;
        font-size: 16px;
        font-family: inherit;
        cursor: pointer;
        outline: none;
        line-height: 1.2;
        height: 28px;
        white-space: nowrap;
}
.flatpickr-current-month .fp-cd-btn:hover,
.flatpickr-current-month .fp-cd-btn:focus {
        background: rgba(255, 255, 255, 0.22);
}
.flatpickr-current-month .fp-cd-text {
        display: inline-block;
}
.flatpickr-current-month .fp-cd-caret {
        display: inline-block;
        width: 10px;
        height: 6px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
        background-repeat: no-repeat;
        background-position: center;
        transition: transform .15s ease;
}
.flatpickr-current-month .fp-cd-btn[aria-expanded="true"] .fp-cd-caret {
        transform: rotate(180deg);
}

/* Šířky pro každý typ — month širší (název měsíce), year užší (4 číslice) */
.flatpickr-current-month .fp-cd-year .fp-cd-btn { min-width: 72px; }
.flatpickr-current-month .fp-cd-month .fp-cd-btn { min-width: 100px; }

/* ===== Rozbalený list (popup) ===== */
.flatpickr-current-month .fp-cd-list {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        margin: 0;
        padding: 4px 0;
        list-style: none;
        background: #fff;
        border: 1px solid #e2e4e7;
        border-radius: 6px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
        min-width: 100%;
        max-height: 240px; /* FIXNÍ výška — scrollovat ne přes celou stránku */
        overflow-y: auto;
        z-index: 9999;
        font-weight: 500;
        scrollbar-width: thin;
        scrollbar-color: #FF6600 #f4f4f4;
        scrollbar-gutter: stable;
        overscroll-behavior: contain; /* wheel zůstává uvnitř dropdownu — nepřeskočí na page */
}
.flatpickr-current-month .fp-cd-list::-webkit-scrollbar { width: 8px; }
.flatpickr-current-month .fp-cd-list::-webkit-scrollbar-track { background: #f4f4f4; border-radius: 4px; }
.flatpickr-current-month .fp-cd-list::-webkit-scrollbar-thumb { background: #FF6600; border-radius: 4px; }
.flatpickr-current-month .fp-cd-list::-webkit-scrollbar-thumb:hover { background: #e05500; }
.flatpickr-current-month .fp-cd-list[hidden] { display: none; }
.flatpickr-current-month .fp-cd-list li {
        padding: 6px 14px;
        color: #333;
        cursor: pointer;
        white-space: nowrap;
        font-size: 14px;
        text-align: left;
}
.flatpickr-current-month .fp-cd-list li:hover {
        background: #fff3eb;
        color: #FF6600;
}
.flatpickr-current-month .fp-cd-list li.selected {
        background: #FF6600;
        color: #fff;
        font-weight: 600;
}

/* Skrýt případnou zbylou Flatpickr numInputWrapper (defenzivně) */
.flatpickr-current-month .numInputWrapper { display: none !important; }

/* ===== „Dnes" button pod kalendářem ===== */
.flatpickr-calendar .fp-cd-today {
        display: block;
        width: calc(100% - 16px);
        margin: 4px 8px 8px 8px;
        padding: 8px 12px;
        background: #fff;
        border: 1px solid #FF6600;
        border-radius: 6px;
        color: #FF6600;
        font-weight: 600;
        font-size: 14px;
        font-family: inherit;
        cursor: pointer;
        outline: none;
        transition: background .15s ease, color .15s ease;
}
.flatpickr-calendar .fp-cd-today:hover,
.flatpickr-calendar .fp-cd-today:focus {
        background: #FF6600;
        color: #fff;
}

/* ===== Force 7-column grid pro dny (oprava „8 dnů v týdnu" bugu) ===== */
/* Flatpickr defaultně používá flex-basis: 14.2857143% na .flatpickr-day, ale když parent
   width neodpovídá default 307px, dochází k překryvu / wraparoundu (uživatel vidí 8 dnů
   v řadě). CSS Grid s grid-template-columns: repeat(7, 1fr) eliminuje závislost na šířce
   parent containeru — vždy přesně 7 sloupců, jakákoli šířka kalendáře. */
.flatpickr-calendar .dayContainer {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr);
        width: 100%;
        min-width: 0;
        max-width: none;
        padding: 6px;
        gap: 2px;
        box-sizing: border-box;
}
.flatpickr-calendar .flatpickr-weekdaycontainer {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr);
        width: 100%;
        min-width: 0;
        gap: 2px;
}
.flatpickr-calendar .flatpickr-weekdays {
        width: 100%;
}
/* Reset Flatpickr defaultního flex-basis aby grid mohl převzít kontrolu */
.flatpickr-calendar .flatpickr-day {
        flex: initial;
        max-width: 100%;
        width: 100%;
}
.flatpickr-calendar span.flatpickr-weekday {
        flex: initial;
        max-width: 100%;
        width: 100%;
}
/* Fixed šířka celého kalendáře — bez ní grid + auto width parent může dělat divné věci.
   Všechny vnitřní containery dělají 100% rodiče — eliminuje mezeru/díru vpravo mezi
   hlavičkou a dny (předtím header zabíral 320px, innerContainer měl jinou width). */
.flatpickr-calendar {
        width: 320px;
        max-width: 100vw;
        box-sizing: border-box;
}
.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar .flatpickr-rContainer,
.flatpickr-calendar .flatpickr-days {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box;
}

/* ===== Týdny (Po Út St ...) ===== */
.flatpickr-weekdays {
        background: #FF6600;
        padding: 0 8px 6px 8px;
}
span.flatpickr-weekday {
        background: transparent;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 600;
        font-size: 12px;
}

/* ===== Dny (jednotlivé buňky) ===== */
.flatpickr-day {
        color: #1d2327;
        border-radius: 6px;
        font-weight: 500;
        line-height: 36px;
        height: 36px;
        max-width: 36px;
        margin: 1px 0;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
        background: #fff3eb;
        border-color: #fff3eb;
        color: #FF6600;
}
.flatpickr-day.today {
        border-color: #FF6600;
        color: #FF6600;
        font-weight: 700;
}
.flatpickr-day.today:hover {
        background: #fff3eb;
        color: #FF6600;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
        background: #FF6600;
        border-color: #FF6600;
        color: #fff;
        box-shadow: none;
}
.flatpickr-day.inRange,
.flatpickr-day.inRange.prevMonthDay,
.flatpickr-day.inRange.nextMonthDay {
        background: #fff3eb;
        border-color: #fff3eb;
        color: #FF6600;
        box-shadow: none;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
        color: #c3c4c7;
        background: transparent;
        cursor: not-allowed;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
        color: #c3c4c7;
}

/* ===== Input field — viditelný altInput =====
   altInput dědí className z originálu (v `nobe-init.js::onReady`), takže má všechny
   původní třídy (np-label / kf-input / input-sale ...) → styling z parent CSS zůstává.
   Naše defaultní vlastnosti tady jsou jen FALLBACK pokud parent nemá nic. */
.flatpickr-input.form-control,
input.flatpickr-input:not([class*="kf-"]):not([class*="np-"]):not([class*="input-"]),
input.flatpickr-alt-input:not([class*="kf-"]):not([class*="np-"]):not([class*="input-"]) {
        background: #fff;
        border: 1px solid #dcdcde;
        border-radius: 5px;
        padding: 8px 12px;
        font-size: 14px;
        color: #1d2327;
        line-height: 1.4;
        outline: none;
        font-family: inherit;
}
input.flatpickr-alt-input,
input.flatpickr-input {
        cursor: pointer;
}
input.flatpickr-alt-input::placeholder {
        color: #8c8f94;
        opacity: 1;
}

/* Ikona kalendáře vpravo (background-image SVG, žádný extra DOM element).
   Padding-right uvolňuje místo pro ikonu. */
input.flatpickr-alt-input.has-fp-icon {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FF6600' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 18px 18px;
        padding-right: 36px !important; /* override original padding aby ikona neseděla na textu */
}

/* Důležité: NEPŘEPISOVAT šířku — altInput by měl zachovat layout originálního inputu.
   Pokud parent kontejner (.np-label, .kf-input, ...) řídí šířku, altInput ji dědí
   automaticky. Bez explicit width:auto by Flatpickr default mohl roztáhnout na 100%. */
input.flatpickr-alt-input {
        max-width: 100%;
        width: auto;
        min-width: 140px;
        box-sizing: border-box;
}

/* ===== Mobile alt-input s ikonou kalendáře — 768px breakpoint =====
   Viditelný alt-input (s background-image ikonou) na mobilu má plnou šířku rodiče
   (`.kf-field` wrapper) a sjednocený border-radius s ostatními form fieldy. */
@media (max-width: 768px) {
        .kf-field input.flatpickr-alt-input.has-fp-icon {
                min-width: 100%;
                border-radius: 5px;
        }
}

/* ===== Mobile responsive ===== */
@media (max-width: 480px) {
        .flatpickr-calendar {
                width: 96vw !important;
                max-width: 340px;
                font-size: 15px;
        }
        .flatpickr-day {
                height: 40px;
                line-height: 40px;
                max-width: 40px;
        }
}