/* Marken-Farben - generiert aus Administration > Anzeige-Einstellungen, hier NICHT von Hand aendern. */
:root {
    --cbm-brand-primary: #4f46e5;
    --cbm-brand-secondary: #ec4899;
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4f46e5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #ec4899;
}

:root {
    /*
	--cbm-brand-primary/
	--cbm-brand-primary
	neu setzen wuerde die Admin-Werte aushebeln. */

    --cbm-sidebar-width: 15rem;      /* 240px */
    --cbm-sidebar-width-icons: 4.75rem; /* 76px */
    --cbm-sidebar-bg: #262c3d;
    --cbm-sidebar-bg-darker: #1e2331;
    --cbm-sidebar-fg: #e7ebf3;
    --cbm-sidebar-fg-muted: #9aa5b8;
    --cbm-accent: var(--cbm-brand-primary);

    --cbm-ampel-grau: #9aa0a8;
    --cbm-ampel-gruen: #2eb872;
    --cbm-ampel-rot: #e5484d;


	/* linke spalte */
	--cbm-sidebar-width: 18rem;

	/* linke spalte timeline */
	--cbm-tl-name-col: 17%;

	/* Splashscreen + Login: Hoehe des (Hochformat-)Logos, Standard waere 9.25rem */
	/*--cbm-splash-logo-height: 22rem;*/

}

a {text-decoration:none; transition: all 0.4s}
.btn, .btn i {transition: all 0.4s}

.cbm-app {background:var(--cbm-sidebar-bg-darker)}

.cbm-nav-link {text-decoration:	none}
.cbm-sidebar__fixed {background: var(--cbm-sidebar-bg-darker); position: absolute; bottom: 0; width: 100%; display: flex; flex-direction: column;}
.cbm-sidebar__clock {text-align:center}

.cbm-sidebar__toolrow .cbm-circle-btn {background:rgba(255, 255, 255, 0.05);}

.modal-header {justify-content:space-between;}
.modal-header .cbm-modal-save-btn {border:0; height:auto; width:auto; border-radius:0}
.modal-header .cbm-modal-save-btn:hover {background-color:transparent; color:var(--bs-btn-hover-bg)}


/* kalender */
.fc .fc-daygrid-day-top {flex-direction: row;}
.fc .fc-daygrid-day-number {background: var(--bs-gray-600);border-radius: .3rem;width: 1.5rem;height: 1.5rem;padding: 0;color: #fff;text-align: center;text-decoration: none;font-size: .75rem;font-weight: 600;line-height: 1.5rem;left: .125rem;top: .125rem;}
.cbm-cal-add-btn {top: .125rem; bottom:auto;}

.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {background: var(--cbm-brand-primary);}
/* Wochentage in der Kopfzeile (Mo Di Mi ...) - wie die Tageszahlen, nur etwas dunkler */
.fc .fc-col-header-cell-cushion {background: var(--bs-gray-700);color: #fff;border-radius: .3rem;font-size: 12px;padding: 2px 6px;margin: 2px 0;text-decoration: none;}

.cbm-booking-badge--active {border-color:transparent; transform: none;}

.cbm-gate-forgot { margin-top:6px; }


/* ============================================================
   Beispielseiten (wlan, checkin, youtube) - siehe content/, partials/sidebar.twig
   ============================================================ */

/* Icon-Farben der Navi-Punkte */
.cbm-nav-link[data-target="wlan"] i { color: #22c55e; }
.cbm-nav-link[data-target="checkin"] i { color: #06b6d4; }
.cbm-nav-link[data-target="youtube"] i { color: #ef4444; }

/* --- YouTube-Beispielseite (content/youtube.twig, assets/js/youtube.js, layout.twig) ---
   Das Dock liegt AUSSERHALB des Seiteninhalts (damit die Wiedergabe beim
   Seitenwechsel weiterlaeuft) und ist position:fixed. z-index 1030 (Bootstraps
   "fixed"-Ebene): ueber dem Inhalt, unter Offcanvas (1045) und Modals (1055).
   Auf der YouTube-Seite setzt youtube.js top/left/width/height per Inline-Style
   exakt auf die Buehne (.cbm-yt-stage); sonst gilt der Mini-Player. */
.cbm-yt-dock {
    position: fixed;
    z-index: 1030;
    background: #000;
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .35);
}

.cbm-yt-dock--mini {
    right: 1rem;
    bottom: 1rem;
    width: 17.5rem;
    height: auto;
}

.cbm-yt-dock__frame {
    width: 100%;
    height: 100%;
}

.cbm-yt-dock--mini .cbm-yt-dock__frame {
    aspect-ratio: 16 / 9;
    height: auto;
}

.cbm-yt-dock__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.cbm-yt-dock__bar {
    display: flex;
    justify-content: flex-end;
    gap: .25rem;
    padding: .125rem .25rem;
    background: #111;
}

.cbm-yt-dock__bar .btn {
    color: #e7ebf3;
    line-height: 1;
}

.cbm-yt-dock__bar .btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

/* Auf der YouTube-Seite hat der Player eigene Bedienelemente - Leiste weg. */
.cbm-yt-dock:not(.cbm-yt-dock--mini) .cbm-yt-dock__bar {
    display: none;
}

@media (max-width: 767.98px) {
    .cbm-yt-dock--mini {
        width: 12rem;
        right: .5rem;
        bottom: .5rem;
    }
}

.cbm-yt-stage {
    width: 100%;
    max-width: 60rem;
    aspect-ratio: 16 / 9;
    border-radius: .5rem;
    background: var(--bs-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cbm-yt-stage__empty {
    text-align: center;
    color: var(--bs-gray-600);
    padding: 1rem;
}