/* =============================================================================
   BookIt - Ergaenzungen zum HHBK-Theme
   Farben wie im Backend: Primaer rgb(73,86,119), Hintergrund #eceef2.
   ============================================================================= */
:root {
    --bookit-primary: rgb(73, 86, 119);
    --bookit-primary-dark: rgb(52, 62, 88);
    --bookit-primary-soft: rgba(73, 86, 119, 0.08);
    --bookit-ok: #2e7d32;
    --bookit-ok-soft: #e8f5e9;
    --bookit-warn: #b26a00;
    --bookit-warn-soft: #fff8e1;
    --bookit-danger: #c62828;
    --bookit-muted: #6b7280;
    --bookit-border: #dfe2e8;
    --bookit-radius: 6px;
}

.bookit-muted { color: var(--bookit-muted); font-size: 0.92em; }
.bookit-inline { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.bookit-switch { display: flex; gap: 0.6rem; align-items: center; }

/* ---------------------------------------------------------------------------
   Backend
   --------------------------------------------------------------------------- */
.bookit-pagehead { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.bookit-thumb { width: 4.5rem; height: 3rem; object-fit: cover; border-radius: 4px; display: inline-block; }
.bookit-thumb-sm { width: 3.5rem; height: 2.4rem; }
.bookit-thumb-empty { background: var(--bookit-primary-soft); color: var(--bookit-primary); text-align: center; line-height: 3rem; }
.bookit-preview { max-width: 16rem; max-height: 9rem; border-radius: 4px; vertical-align: middle; border: 1px solid var(--bookit-border); }

.bookit-columns { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.bookit-sidebar { flex: 0 0 20rem; min-width: 16rem; }
.bookit-main { flex: 1 1 32rem; min-width: 0; }
.bookit-sidebar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; gap: 0.5rem; }

.bookit-category { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem;
                   padding: 0.6rem 0.7rem; border-radius: var(--bookit-radius); border: 1px solid transparent; margin-bottom: 0.25rem; }
.bookit-category:hover { background: var(--bookit-primary-soft); }
.bookit-category-active { background: var(--bookit-primary-soft); border-color: var(--bookit-primary); }
.bookit-category-link { flex: 1; color: inherit; }
.bookit-category-name { font-weight: 600; }
.bookit-category-actions { white-space: nowrap; }

.bookit-child-row td { background: #fafbfc; }
.bookit-indent { padding-left: 1.6rem; }

.bookit-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.bookit-stat { min-width: 7rem; }
.bookit-stat-value { font-size: 1.8rem; font-weight: 700; color: var(--bookit-primary); }
.bookit-stat-actions { margin-left: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }

.bookit-occupancy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0.75rem; }
.bookit-occupancy { border: 1px solid var(--bookit-border); border-radius: var(--bookit-radius); padding: 0.6rem 0.75rem; background: #fff; }
.bookit-occupancy-head { display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; }
.bookit-slotline { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; padding: 0.15rem 0; border-top: 1px dashed #eee; }
.bookit-slottime { font-variant-numeric: tabular-nums; min-width: 7.5rem; color: var(--bookit-muted); }

.bookit-import-summary { padding: 0.5rem 0; }
.bookit-warnbox { border-left: 4px solid var(--bookit-warn); background: var(--bookit-warn-soft); padding: 0.5rem 0.75rem; margin: 0.5rem 0; }
.bookit-compact .ui-datatable-data td { padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; }

/* ---------------------------------------------------------------------------
   Gemeinsam
   --------------------------------------------------------------------------- */
.bookit-chip { display: inline-block; padding: 0.1rem 0.5rem; margin: 0.1rem 0.15rem 0.1rem 0; border-radius: 999px;
               background: var(--bookit-primary-soft); color: var(--bookit-primary-dark); font-size: 0.85em; }
.bookit-badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; background: #eef0f4;
                font-size: 0.85em; font-weight: 600; white-space: nowrap; }
.bookit-badge-full { background: #fdecea; color: var(--bookit-danger); }
.bookit-badge-ok { background: var(--bookit-ok-soft); color: var(--bookit-ok); }
.bookit-notice { border-left: 4px solid var(--bookit-warn); background: var(--bookit-warn-soft); padding: 0.75rem 1rem;
                 border-radius: 0 var(--bookit-radius) var(--bookit-radius) 0; margin: 1rem 0; }
.bookit-notice-small { padding: 0.4rem 0.75rem; margin: 0.5rem 0; }

/* ---------------------------------------------------------------------------
   Oeffentliche Seiten
   --------------------------------------------------------------------------- */
body.bookit-public { background: #eceef2; display: flex; flex-direction: column; min-height: 100vh; }
.bookit-topbar { background: var(--bookit-primary); border-bottom: 1px solid #000; color: #fff; }
.bookit-topbar-inner { max-width: 1200px; margin: 0 auto; padding: 0.4rem 1rem; display: flex; align-items: center; gap: 1rem; }
.bookit-topbar-title { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.5px; opacity: 0.9; }
.bookit-topbar-spacer { flex: 1; }
.bookit-topbar-user, .bookit-topbar-user a, .bookit-topbar-link { color: #fff !important; }
.bookit-topbar-user i { margin-right: 0.4rem; }
.bookit-topbar-link { opacity: 0.6; }
.bookit-topbar-link:hover { opacity: 1; }

.bookit-main-content { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 1rem 1rem 3rem 1rem; box-sizing: border-box; }
.bookit-public .layout-footer { margin-top: auto; }

.bookit-hero { padding: 1.5rem 0 1rem 0; }
.bookit-hero h1 { margin: 0; color: var(--bookit-primary); font-size: 1.8rem; }
.bookit-hero p { margin: 0.3rem 0 0 0; color: var(--bookit-muted); }

.bookit-empty { text-align: center; padding: 3rem 1rem; color: var(--bookit-muted); }
.bookit-empty i { font-size: 2.5rem; color: var(--bookit-primary); opacity: 0.5; }

.bookit-event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.bookit-event-card { display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; color: inherit !important;
                     box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: box-shadow .15s, transform .15s; }
.bookit-event-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.12); transform: translateY(-2px); }
.bookit-event-card-image { height: 9.5rem; background: var(--bookit-primary-soft) center/cover no-repeat;
                           display: flex; align-items: center; justify-content: center; color: var(--bookit-primary); font-size: 2.5rem; }
.bookit-event-card-body { padding: 0.9rem 1rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; }
.bookit-event-card-body h2 { margin: 0.2rem 0 0.4rem 0; font-size: 1.15rem; color: var(--bookit-primary-dark); }
.bookit-event-card-body p { margin: 0 0 0.75rem 0; color: #444; flex: 1; }
.bookit-event-card-date { color: var(--bookit-muted); font-size: 0.85rem; }
.bookit-event-card-footer { font-size: 0.85rem; color: var(--bookit-muted); }
.bookit-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; margin-right: 0.3rem; }
.bookit-dot-open { background: var(--bookit-ok); }
.bookit-dot-soon { background: var(--bookit-warn); }
.bookit-dot-closed { background: #9e9e9e; }

.bookit-event-head { background: var(--bookit-primary) center/cover no-repeat; color: #fff; border-radius: 8px; margin: 0.5rem 0 1rem 0; }
.bookit-event-head-inner { padding: 1.5rem 1.5rem 1.4rem 1.5rem; }
.bookit-event-head h1 { margin: 0.4rem 0 0.6rem 0; font-size: 1.9rem; }
.bookit-event-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; opacity: 0.95; }
.bookit-event-meta i { margin-right: 0.3rem; }
.bookit-back { color: inherit !important; opacity: 0.85; font-size: 0.9rem; }
.bookit-event-head .bookit-back { color: #fff !important; }
.bookit-preview-banner { margin-top: 0.8rem; display: inline-block; background: var(--bookit-warn); color: #fff; padding: 0.2rem 0.7rem; border-radius: 4px; }

.bookit-event-layout { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.bookit-event-content { flex: 1 1 36rem; min-width: 0; }
.bookit-event-side { flex: 0 0 20rem; min-width: 16rem; }
.bookit-card { background: #fff; border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.bookit-card h2 { margin: 0 0 0.3rem 0; font-size: 1.25rem; color: var(--bookit-primary-dark); }
.bookit-card h3 { margin: 0 0 0.75rem 0; font-size: 1.05rem; color: var(--bookit-primary-dark); }
.bookit-card .field { margin-bottom: 0.75rem; }
.bookit-card .field label { display: block; margin-bottom: 0.25rem; font-weight: 600; }
.bookit-sticky { position: sticky; top: 1rem; }
.bookit-side-links { margin-top: 0.75rem; font-size: 0.9rem; }
.bookit-description img { max-width: 100%; height: auto; }

.bookit-category-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.bookit-unit-grid { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.bookit-unit { display: flex; gap: 0.9rem; align-items: flex-start; border: 1px solid var(--bookit-border); border-radius: var(--bookit-radius);
               padding: 0.75rem; background: #fff; }
.bookit-unit-mine { border-color: var(--bookit-ok); background: var(--bookit-ok-soft); }
.bookit-unit-inactive { opacity: 0.6; }
.bookit-unit-image { width: 7rem; height: 5rem; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.bookit-unit-body { flex: 1; min-width: 0; }
.bookit-unit-title { font-weight: 600; font-size: 1.02rem; }
.bookit-unit-text { margin-top: 0.35rem; white-space: pre-line; }
.bookit-unit-tags { margin-top: 0.3rem; }
.bookit-unit-capacity { min-width: 9rem; text-align: right; font-size: 0.9rem; color: var(--bookit-muted); }
.bookit-unit-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; min-width: 10rem; }
.bookit-full { color: var(--bookit-danger); font-weight: 600; }
.bookit-bar { height: 5px; background: #e6e8ee; border-radius: 3px; overflow: hidden; margin-top: 0.3rem; }
.bookit-bar > div { height: 100%; background: var(--bookit-primary); }
.bookit-denial { max-width: 14rem; text-align: right; font-size: 0.85rem; color: var(--bookit-warn); }
.bookit-mine-tag { margin-left: 0.5rem; color: var(--bookit-ok); font-size: 0.85rem; font-weight: 600; }
.bookit-occupants { margin-top: 0.4rem; }
.bookit-occupants i { color: var(--bookit-muted); margin-right: 0.3rem; }

.bookit-slots { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.bookit-slot { display: inline-block; border-radius: 4px; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.bookit-slot a, .bookit-slot > span { display: inline-block; padding: 0.3rem 0.55rem; }
.bookit-slot-free { border: 1px solid var(--bookit-primary); }
.bookit-slot-free a { color: var(--bookit-primary) !important; }
.bookit-slot-free:hover { background: var(--bookit-primary); }
.bookit-slot-free:hover a { color: #fff !important; }
.bookit-slot-mine { background: var(--bookit-ok); }
.bookit-slot-mine a, .bookit-slot-mine > span { color: #fff !important; }
.bookit-slot-blocked { border: 1px solid #e0e0e0; color: #aaa; text-decoration: line-through; cursor: not-allowed; }

.bookit-participant-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 0.5rem 0 1rem 0; }
.bookit-participant-head h1 { margin: 0.3rem 0; color: var(--bookit-primary-dark); font-size: 1.7rem; }
.bookit-own { padding: 0.45rem 0; border-bottom: 1px solid #eee; }
.bookit-own:last-child { border-bottom: none; }

@media (max-width: 760px) {
    .bookit-event-side { flex: 1 1 100%; }
    .bookit-unit { flex-wrap: wrap; }
    .bookit-unit-image { width: 100%; height: 9rem; }
    .bookit-unit-actions { align-items: stretch; width: 100%; }
    .bookit-unit-capacity, .bookit-denial { text-align: left; max-width: none; }
    .bookit-event-head h1 { font-size: 1.5rem; }
    .bookit-topbar-title { display: none; }
}

/* ---------------------------------------------------------------------------
   Event-Kopf mit Reitern (Backend)
   --------------------------------------------------------------------------- */
.bookit-eventlink { font-weight: 600; color: var(--bookit-primary-dark) !important; }
.bookit-eventlink:hover { text-decoration: underline; }
.bookit-eventhead { padding-bottom: 0 !important; }
.bookit-eventhead .bookit-back { color: var(--bookit-muted) !important; }
.bookit-eventhead-title { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin: 0.4rem 0 0.2rem 0; }
.bookit-eventhead-title h1 { font-size: 20px; margin: 0; }
.bookit-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.9rem; border-bottom: 1px solid var(--bookit-border); }
.bookit-tab { padding: 0.6rem 1rem; color: var(--bookit-muted) !important; border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 500; }
.bookit-tab i { margin-right: 0.35rem; }
.bookit-tab:hover { color: var(--bookit-primary-dark) !important; background: var(--bookit-primary-soft); }
.bookit-tab-active { color: var(--bookit-primary-dark) !important; border-bottom-color: var(--bookit-primary); }
.bookit-tab-external { margin-left: auto; }

/* Passwortfeld mit Augen-Symbol so breit wie die anderen Felder */
.bookit-card .ui-fluid .ui-password, .bookit-card .ui-fluid .ui-password input { width: 100%; display: block; }

/* Auf dem Handy: Anmeldung vor dem Angebot, damit niemand erst ans Seitenende scrollen muss */
@media (max-width: 760px) {
    .bookit-login-first .bookit-event-side { order: -1; }
}

/* Aktionssymbole in Tabellen immer in einer Zeile */
.ui-datatable td:has(> .hhbk-row-action) { white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Bildvergroesserung (resources/js/bookit.js)
   --------------------------------------------------------------------------- */
img.bookit-zoomable { cursor: zoom-in; transition: opacity .15s; }
img.bookit-zoomable:hover { opacity: 0.85; }
body.bookit-lightbox-open { overflow: hidden; }
.bookit-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(20, 24, 36, 0.88);
                   display: flex; align-items: center; justify-content: center; padding: 1rem; cursor: zoom-out;
                   animation: bookit-fade .15s ease-out; }
.bookit-lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.bookit-lightbox img { max-width: min(1200px, 94vw); max-height: 82vh; object-fit: contain; border-radius: 6px;
                       box-shadow: 0 10px 40px rgba(0,0,0,.5); background: #fff; }
.bookit-lightbox figcaption { color: #fff; margin-top: 0.75rem; font-size: 1.05rem; text-align: center; }
.bookit-lightbox-close { position: absolute; top: 0.5rem; right: 0.75rem; background: none; border: none; color: #fff;
                         font-size: 2.6rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.6rem; }
@keyframes bookit-fade { from { opacity: 0; } to { opacity: 1; } }

/* Einschreiben / Austragen in der Belegung (Backend) */
.bookit-add { color: var(--bookit-primary) !important; padding: 0 0.3rem; }
.bookit-add:hover { color: var(--bookit-ok) !important; }
.bookit-chip-remove { margin-left: 0.35rem; color: var(--bookit-muted) !important; font-size: 0.85em; }
.bookit-chip-remove:hover { color: var(--bookit-danger) !important; }