/* ==========================================================================
   emasi-theme.css – Custom Theme für meet.emasi.ch
   
   emasi.ch Farbvariablen:
   --primary:  #00CCE8 (Cyan)
   --accent:   #0441BA (Dunkelblau)
   --text:     #FCFCFC (Weiss)
   
   Gradient (wie .nav-btn auf emasi.ch):
   linear-gradient(180deg, #00CCE8 -98.92%, #0441BA 94.25%)
   Hover: linear-gradient(180deg, #00CCE8 -70%, #0441BA 100%)
   
   Background: #0C1018 | Karten: #111827 | Felder: #1a2233
   Stand: 21.02.2026 – v4
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. GRUNDLAGEN
   -------------------------------------------------------------------------- */

   body {
    background-color: #0C1018 !important;
    color: #c8d0da;
}

a {
    color: #5fb8d4;
}

a:hover {
    color: #7fcce3;
}


/* --------------------------------------------------------------------------
   2. HAUPTCONTAINER / KARTE
   -------------------------------------------------------------------------- */

#book-appointment-wizard {
    background-color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
}


/* --------------------------------------------------------------------------
   3. HEADER & STEPS
   -------------------------------------------------------------------------- */

#book-appointment-wizard #header {
    background: #151b27 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#book-appointment-wizard #company-name span {
    color: #ffffff;
}

#book-appointment-wizard #company-name .display-booking-selection {
    color: #7a8ba0 !important;
    border-right-color: rgba(255, 255, 255, 0.15) !important;
    filter: none !important;
}

#book-appointment-wizard .book-step {
    background: #1e2636 !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    filter: none !important;
}

#book-appointment-wizard .book-step.active-step {
    background: linear-gradient(180deg, #00CCE8 -98.92%, #0441BA 94.25%) !important;
    border-color: transparent !important;
}

#book-appointment-wizard .book-step strong {
    color: #556070 !important;
    filter: none !important;
}

#book-appointment-wizard .book-step.active-step strong {
    color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   4. WIZARD FRAMES (Inhaltsbereiche)
   -------------------------------------------------------------------------- */

#book-appointment-wizard .frame-container .frame-title {
    color: #fcfcfc !important;
}

.frame-content label,
.frame-content .form-label,
.frame-content strong {
    color: #c8d0da !important;
}


/* --------------------------------------------------------------------------
   5. FORMULAR-ELEMENTE
   -------------------------------------------------------------------------- */

.form-select,
.form-control {
    background-color: #1a2233 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #c8d0da !important;
}

.form-select:focus,
.form-control:focus {
    background-color: #1a2233 !important;
    border-color: rgba(0, 204, 232, 0.35) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(0, 204, 232, 0.08) !important;
    filter: none !important;
}

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23556070' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

.form-control::placeholder {
    color: #3d4d5f !important;
}

textarea.form-control {
    background-color: #1a2233 !important;
}

/* Autofill-Styling (Chrome/Safari) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #1a2233 inset !important;
    -webkit-text-fill-color: #c8d0da !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    transition: background-color 5000s ease-in-out 0s;
}


/* --------------------------------------------------------------------------
   6. BUTTONS – Gradient wie emasi.ch (.nav-btn)
   -------------------------------------------------------------------------- */

/* "Weiter"-Button */
.btn-dark,
.button-next {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, #00CCE8 -98.92%, #0441BA 94.25%) !important;
    border: none !important;
    color: #FCFCFC !important;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.btn-dark:hover,
.button-next:hover {
    background-image: linear-gradient(180deg, #00CCE8 -70%, #0441BA 100%) !important;
    color: #FCFCFC !important;
    filter: none !important;
}

/* "Zurück"-Button */
.btn-outline-secondary,
.button-back {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #6b7a8d !important;
    background-color: transparent !important;
    background-image: none !important;
}

.btn-outline-secondary:hover,
.button-back:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #c8d0da !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* "Bestätigung"-Button (Step 4) */
#book-appointment-submit {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, #00CCE8 -98.92%, #0441BA 94.25%) !important;
    border: none !important;
    color: #FCFCFC !important;
    font-weight: 600;
    border-radius: 8px;
}

#book-appointment-submit:hover {
    background-image: linear-gradient(180deg, #00CCE8 -70%, #0441BA 100%) !important;
    filter: none !important;
}

/* Disabled State */
.btn-primary:disabled,
.btn-primary.disabled {
    background-image: linear-gradient(180deg, #00CCE8 -98.92%, #0441BA 94.25%) !important;
    border: none !important;
    opacity: 0.4 !important;
    filter: none !important;
}


/* --------------------------------------------------------------------------
   7. KALENDER (jQuery UI Datepicker)
   -------------------------------------------------------------------------- */

body .ui-widget.ui-widget-content {
    background-color: #1e2a3a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
}

body .ui-datepicker .ui-widget-header {
    background-color: #1a2435 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #e0e6ed !important;
}

body .ui-datepicker .ui-widget-header .ui-datepicker-title {
    color: #e0e6ed !important;
}

body .ui-datepicker th {
    background-color: #1e2a3a !important;
    color: #6b7a8d !important;
}

body .ui-datepicker td {
    background-color: #1e2a3a !important;
}

/* Verfügbare Tage – hell und klickbar */
body .ui-datepicker td a,
body .ui-datepicker td span {
    color: #e0e6ed !important;
}

/* Hover auf verfügbaren Tagen */
body .ui-datepicker td a:hover {
    background-color: rgba(4, 65, 186, 0.2) !important;
    color: #ffffff !important;
    border-radius: 50%;
}

html body .ui-datepicker td a.ui-state-active {
    background: #0441BA !important;
    color: #ffffff !important;
}

body .ui-datepicker td a.ui-state-highlight {
    background: transparent !important;
    color: #00CCE8 !important;
    border: 1px solid rgba(0, 204, 232, 0.4) !important;
    border-radius: 50%;
    filter: none !important;
}

body .ui-datepicker td.ui-state-disabled span {
    color: #445266 !important;
}

body .ui-datepicker .ui-datepicker-prev,
body .ui-datepicker .ui-datepicker-next {
    color: #8892a4 !important;
}

body .ui-datepicker .ui-datepicker-next-hover,
body .ui-datepicker .ui-datepicker-prev-hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: transparent !important;
    filter: none !important;
}


/* --------------------------------------------------------------------------
   8. VERFÜGBARE UHRZEITEN
   -------------------------------------------------------------------------- */

#book-appointment-wizard #available-hours .selected-hour {
    background: #0441BA !important;
    border-color: #0441BA !important;
    color: #ffffff !important;
    font-weight: 600;
}

#book-appointment-wizard #available-hours button,
#book-appointment-wizard #available-hours .available-hour {
    background-color: #1e2a3a !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #e0e6ed !important;
    border-radius: 6px !important;
    transition: all 0.15s ease;
}

/* Selected hour muss NACH dem allgemeinen Button-Style kommen UND höhere Spezifität haben */
#book-appointment-wizard #available-hours button.selected-hour,
#book-appointment-wizard #available-hours .selected-hour.selected-hour {
    background: #0441BA !important;
    background-color: #0441BA !important;
    border: 1px solid #0441BA !important;
    border-color: #0441BA !important;
    color: #ffffff !important;
    font-weight: 600;
}

#book-appointment-wizard #available-hours button:hover:not(.selected-hour),
#book-appointment-wizard #available-hours .available-hour:hover:not(.selected-hour) {
    border-color: rgba(4, 65, 186, 0.5) !important;
    color: #ffffff !important;
    background-color: rgba(4, 65, 186, 0.12) !important;
}

/* Scrollbar – dunkel passend zum Theme */
#book-appointment-wizard #available-hours {
    scrollbar-width: thin;
    scrollbar-color: #2e3d50 #151b27;
}

#book-appointment-wizard #available-hours::-webkit-scrollbar {
    width: 6px;
}

#book-appointment-wizard #available-hours::-webkit-scrollbar-track {
    background: #151b27;
    border-radius: 3px;
}

#book-appointment-wizard #available-hours::-webkit-scrollbar-thumb {
    background: #2e3d50;
    border-radius: 3px;
}

#book-appointment-wizard #available-hours::-webkit-scrollbar-thumb:hover {
    background: #3d4f65;
}


/* --------------------------------------------------------------------------
   9. BESTÄTIGUNGSSEITE (Step 4)
   -------------------------------------------------------------------------- */

.text-muted {
    color: #8892a4 !important;
}

#appointment-details,
#customer-details {
    color: #8892a4;
}

#appointment-details h4,
#customer-details h4 {
    color: #e0e6ed;
}


/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */

#frame-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

#frame-footer small,
#frame-footer a {
    color: #3d4d5f !important;
}

#frame-footer a:hover {
    color: #6b7a8d !important;
}

#frame-footer .backend-link {
    background-color: #1a2233 !important;
}

#frame-footer #select-language {
    background-color: #1a2233 !important;
    color: #556070 !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
}


/* --------------------------------------------------------------------------
   11. SERVICE-BESCHREIBUNG
   -------------------------------------------------------------------------- */

#service-description {
    color: #6b7a8d;
}


/* --------------------------------------------------------------------------
   12. FLATPICKR
   -------------------------------------------------------------------------- */

.flatpickr-calendar {
    background-color: #1e2a3a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.flatpickr-innerContainer {
    background-color: #1e2a3a !important;
}

.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar span.flatpickr-weekday {
    background: #1a2435 !important;
    color: #6b7a8d !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #1a2435 !important;
    color: #e0e6ed !important;
}

.flatpickr-calendar .flatpickr-current-month .numInputWrapper input {
    color: #e0e6ed !important;
}

.flatpickr-day {
    color: #e0e6ed !important;
}

.flatpickr-day:hover {
    background-color: rgba(4, 65, 186, 0.2) !important;
    border-color: transparent !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover {
    background: #0441BA !important;
    border-color: #0441BA !important;
    color: #ffffff !important;
}

.flatpickr-day.today {
    border-color: rgba(0, 204, 232, 0.4) !important;
    color: #00CCE8 !important;
}

.flatpickr-day.flatpickr-disabled {
    color: #445266 !important;
}


/* --------------------------------------------------------------------------
   13. COMPANY COLOR OVERRIDES
   -------------------------------------------------------------------------- */

body .modal-header {
    background: #151b27 !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: linear-gradient(180deg, #00CCE8 -98.92%, #0441BA 94.25%) !important;
    color: #ffffff !important;
}

.nav .nav-link:not(.active) {
    color: #6b7a8d !important;
}

.form-check-input:checked {
    background-color: #0a5ccc !important;
    border-color: #0a5ccc !important;
}


/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    #book-appointment-wizard {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}


/* --------------------------------------------------------------------------
   15. BESTÄTIGUNGSSEITE (message_layout)
   -------------------------------------------------------------------------- */

#message-frame {
    background-color: #111827 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px;
    color: #c8d0da;
}

#message-frame h4 {
    color: #fcfcfc !important;
}

#message-frame p {
    color: #c8d0da;
}

#message-frame .text-muted {
    color: #8892a4 !important;
}

#message-frame .btn-primary {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, #00CCE8 -98.92%, #0441BA 94.25%) !important;
    border: none !important;
    color: #FCFCFC !important;
    font-weight: 600;
    border-radius: 8px;
}

#message-frame .btn-primary:hover {
    background-image: linear-gradient(180deg, #00CCE8 -70%, #0441BA 100%) !important;
    filter: none !important;
}

#message-frame a:not(.btn) {
    color: #5fb8d4;
}

#message-frame small,
#message-frame small a {
    color: #3d4d5f !important;
}

/* Wrapper für message_layout */
#main.container .wrapper {
    min-height: 100vh;
}


/* --------------------------------------------------------------------------
   16. RESCHEDULE / CANCEL BAR
   -------------------------------------------------------------------------- */

.booking-header-bar {
    background-color: #151b27 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #c8d0da !important;
}

.booking-header-bar small {
    color: #8892a4 !important;
}


/* --------------------------------------------------------------------------
   17. MODALS
   -------------------------------------------------------------------------- */

.modal-content {
    background-color: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #c8d0da;
}

.modal-header {
    background-color: #151b27 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.modal-header .modal-title {
    color: #fcfcfc !important;
}

.modal-header .btn-close {
    filter: invert(1) !important;
}

.modal-body {
    color: #c8d0da;
}

.modal-footer {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.btn-outline-primary {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #8892a4 !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #c8d0da !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
}