/* =====================================================================
   Onboarding: prohlidky aplikace (driver.js), uvitaci pruvodce, karta Zaciname
   Brandova modra #3c8dbc = --bs-primary (css/main.css)
   ===================================================================== */

/* --- driver.js popover (popoverClass: 'ei-tour' v js/onboarding-tour.js) --- */
.driver-popover.ei-tour {
    padding: 0;
    max-width: 380px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.driver-popover.ei-tour .driver-popover-title {
    background: #3c8dbc;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 44px 10px 14px;
    border-radius: 8px 8px 0 0;
}
.driver-popover.ei-tour .driver-popover-close-btn {
    color: rgba(255, 255, 255, .85);
    top: 4px;
    right: 6px;
}
.driver-popover.ei-tour .driver-popover-close-btn:hover,
.driver-popover.ei-tour .driver-popover-close-btn:focus {
    color: #fff;
}
.driver-popover.ei-tour .driver-popover-title[style*=block] + .driver-popover-description {
    margin-top: 0;
}
.driver-popover.ei-tour .driver-popover-description {
    padding: 12px 14px 0 14px;
    font-size: 13.5px;
    color: #333;
}
.driver-popover.ei-tour .driver-popover-footer {
    margin-top: 10px;
    padding: 0 14px 12px 14px;
}
.driver-popover.ei-tour .driver-popover-progress-text {
    font-size: 12px;
    color: #6c757d;
}
.driver-popover.ei-tour .driver-popover-footer-btn {
    background: #3c8dbc;
    color: #fff;
    border: 1px solid #3c8dbc;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 13px;
    text-shadow: none;
}
.driver-popover.ei-tour .driver-popover-footer-btn:hover,
.driver-popover.ei-tour .driver-popover-footer-btn:focus {
    background: #367fa9;
    border-color: #367fa9;
}
.driver-popover.ei-tour .driver-popover-prev-btn {
    background: #fff;
    color: #3c8dbc;
}
.driver-popover.ei-tour .driver-popover-prev-btn:hover,
.driver-popover.ei-tour .driver-popover-prev-btn:focus {
    background: #eef5fa;
}
/* sipka nad popoverem miri do modreho titulku - obarvit stejne */
.driver-popover.ei-tour .driver-popover-arrow-side-bottom {
    border-bottom-color: #3c8dbc;
}

/* --- uvitaci pruvodce (ajax/Onboarding_Wizard.php) --- */
.OnboardingModal .modal-header {
    background: linear-gradient(135deg, #3c8dbc 0%, #2f6f93 100%);
    color: #fff;
    align-items: center;
    border-bottom: 0;
    padding: 1.1rem 1.5rem;
}
.OnboardingModal .modal-header .modal-title {
    color: #fff;
}
.OnboardingModal .modal-header .note {
    color: rgba(255, 255, 255, .85);
}
/* Prechod mezi modal-lg (krok 1) a modal-xl (dalsi kroky), at dialog mezi kroky neposkoci.
   Na mobilu je modal pres celou obrazovku, tam se sirka nemeni a prechod je zbytecny. */
@media (min-width: 768px) {
    .OnboardingModal .modal-dialog {
        transition: max-width .2s ease;
    }
}
@media (prefers-reduced-motion: reduce) {
    .OnboardingModal .modal-dialog {
        transition: none;
    }
}
/* Bez tohoto sedi Preskocit hned za textem hlavicky a prekryva podtitul. */
.OnboardingModal .modal-header #OnboardingSkipBtn {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: flex-start;
}
/* Kolecko s raketou; velikost v em, aby slo za velikosti nadpisu pri zmene velikosti UI. */
.OnboardingHeaderIcon {
    flex: 0 0 auto;
    width: 2.6em;
    height: 2.6em;
    margin-right: .9rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
/* Hlavicku, telo i paticku obaluje <form>, takze .modal-content ma jen jedno flex ditě
   a Bootstrapu se rozpadne vyska - na mobilu pak dole prosvitala stranka pod modalem.
   Form musi prevzit roli flex sloupce; min-height:0 dovoli telu se srazit a scrollovat. */
.OnboardingModal .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.OnboardingModal .modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    min-height: 0;
}
.OnboardingModal .modal-footer {
    padding: .9rem 1.5rem;
    background: #f8f9fa;
}

/* Stepper: pruh s krucky, spojnice je ::before dalsi polozky. */
.OnboardingStepper {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: .5rem;
    padding: .75rem 1rem;
    margin-bottom: 1.5rem;
    row-gap: .5rem;
}
.OnboardingStepper .OnboardingStepperItem {
    display: flex;
    align-items: center;
    opacity: .5;
    min-width: 0;
}
.OnboardingStepper .OnboardingStepperItem.active,
.OnboardingStepper .OnboardingStepperItem.done {
    opacity: 1;
}
.OnboardingStepper .OnboardingStepperItem + .OnboardingStepperItem::before {
    content: "";
    flex: 1 1 auto;
    min-width: 12px;
    height: 2px;
    margin: 0 .75rem;
    background: #dee2e6;
}
.OnboardingStepper .OnboardingStepperItem.active::before,
.OnboardingStepper .OnboardingStepperItem.done::before {
    background: #3c8dbc;
}
.OnboardingStepper .badge {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    font-size: .9rem;
}
.OnboardingStepperLabel {
    margin-left: .6rem;
    font-weight: 600;
    font-size: .875em;
    line-height: 1.2;
}

/* Uvodni odstavec kroku - omezena delka radku kvuli citelnosti. */
.OnboardingLead {
    color: #5a6570;
    margin-bottom: 1.25rem;
}
/* Panel kolem poli, aby formular nelezel primo na bilem pozadi modalu. */
.OnboardingPanel {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: .5rem;
    padding: 1.25rem;
    margin: 0 0 .25rem 0;
}
.OnboardingPanel .form-label {
    font-weight: 600;
    margin-bottom: .35rem;
}
/* Krok 3 bezi v sirokem dialogu, ale pole na e-maily nema smysl tahnout pres celou sirku. */
.OnboardingEmailsPanel {
    max-width: 52rem;
    padding: 1rem;
}
.OnboardingHint {
    margin-top: .25rem;
}
.OnboardingEmailCounter {
    white-space: nowrap;
}

/* Sirky poli v ch - jednotka jde za velikosti pisma inputu, takze drzi i pri zmene velikosti UI.
   Nad sm; na telefonu at pole vyplni sirku jako vsude jinde v aplikaci. */
@media (min-width: 576px) {
    .OnboardingInputName {
        max-width: 22ch;
    }
    .OnboardingInputIC {
        max-width: 26ch;
    }
    .OnboardingInputCompany {
        max-width: 44ch;
    }
}

.OnboardingPresetCard {
    cursor: pointer;
    border: 2px solid #dee2e6;
    transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease;
    user-select: none;
}
.OnboardingPresetCard:hover,
.OnboardingPresetCard:focus {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    border-color: #a9cade;
    transform: translateY(-2px);
    outline: none;
}
.OnboardingPresetCard.selected {
    border-color: #3c8dbc;
    background: #f3f8fb;
}
.OnboardingPresetTitle {
    line-height: 1.25;
}
.OnboardingPresetIcon {
    color: #3c8dbc;
    width: 44px;
    text-align: center;
    flex: 0 0 44px;
}
.OnboardingPresetCheck {
    color: #ced4da;
    font-size: 1.35rem;
}
.OnboardingPresetCard.selected .OnboardingPresetCheck {
    color: #3c8dbc;
}
.OnboardingPresetModules .badge {
    font-weight: 500;
    background: #fff;
    border: 1px solid #dee2e6;
    color: #333;
}
.OnboardingPresetModules .badge.OnboardingModuleUnavailable {
    color: #999;
    text-decoration: line-through;
}
.OnboardingSummaryList li {
    padding: 3px 0;
}
.OnboardingStoreBtn i {
    font-size: 1.15rem;
    vertical-align: -2px;
}
#OnboardingInviteResults .OnboardingInviteRow {
    padding: 2px 0;
    border-bottom: 1px dashed #eee;
}

/* na mobilu (modal-fullscreen-md-down) obsah vyplni cely dialog a odsazeni se stahne */
@media (max-width: 767.98px) {
    .OnboardingModal .modal-header,
    .OnboardingModal .modal-body,
    .OnboardingModal .modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .OnboardingPanel {
        padding: 1rem;
    }
    .OnboardingStepper {
        padding: .6rem .75rem;
        margin-bottom: 1.25rem;
    }
    /* main.css:2257 dava kazdemu dialogu padding-bottom 50px. U fullscreen modalu tim vznikne
       pruh, kterym je videt stranka pod nim - .modal-content ma height:100 % z uz zmenseneho
       obsahoveho boxu. Nulujeme jen tady, ostatni modaly to potrebuji. */
    .modal.OnboardingModal > .modal-dialog {
        padding-bottom: 0;
    }
    .OnboardingModal .modal-dialog,
    .OnboardingModal .modal-content {
        height: 100%;
    }
}