:root {
    color-scheme: light;
    --app-font-family-base: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --app-bg-0: #f7f8fa;
    --app-bg-1: #ffffff;
    --app-bg-2: #f1f4f8;
    --app-ink-0: #101418;
    --app-ink-1: #3d4a57;
    --app-line-0: #d7dee6;
    --app-line-1: #c8d1dc;
    --app-accent: #5b7cff;
    --app-accent-soft: #e8edff;
    --app-success: #0f9d6a;
    --app-warning: #d88a1d;
    --app-danger: #d64545;
    --app-font-size-base: 0.95rem;
    --app-font-size-secondary: 0.83rem;
    --app-spacing-compact: 0.75rem;
    --app-shell-header-bg: rgba(247, 248, 250, 0.95);
    --app-shell-border: rgba(33, 37, 41, 0.08);
    --app-mobile-nav-height: 4.25rem;
    --app-radius-sm: 0.625rem;
    --app-radius-md: 0.875rem;
    --app-radius-lg: 1.125rem;
    --app-shadow-soft: 0 0.25rem 0.75rem rgba(16, 20, 24, 0.06);
    --app-shadow-focus: 0 0 0 0.2rem rgba(91, 124, 255, 0.25);
    --app-motion-fast: 140ms ease-out;
    --app-motion-base: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Rollenfarben ──────────────────────────────────────────────────────────────
   Betreuer (data-role="betreuer"): Blau  #5b7cff — operativ, vertraut.
   Reiseleiter/Admin (data-role="admin"): Teal #0891b2 — leitend, übergeordnet.
   Alle akzentfarbigen Elemente nutzen var(--app-accent) und folgen automatisch.
   ─────────────────────────────────────────────────────────────────────────── */
body[data-role="admin"] {
    --app-accent: #0891b2;
    --app-accent-soft: #e0f2fe;
    --app-shadow-focus: 0 0 0 0.2rem rgba(8, 145, 178, 0.25);
}

body {
    min-height: 100vh;
    font-family: var(--app-font-family-base);
    font-size: var(--app-font-size-base);
    line-height: 1.4;
    color: var(--app-ink-0);
    background: var(--app-bg-0);
}

.app-shell-container {
    max-width: 1320px;
}

.app-commandbar {
    border-bottom: 1px solid var(--app-line-0);
}

.app-commandbar-title {
    font-size: 1rem;
    letter-spacing: -0.01em;
    margin: 0;
}

.app-commandbar-meta {
    font-size: 0.77rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-ink-0);
}

.app-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.65em;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    border: 1px solid var(--app-accent);
}

.app-status-strip {
    border-top: 1px solid var(--app-line-0);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65));
}

.app-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--app-line-1);
    border-radius: 999px;
    background: var(--app-bg-1);
    color: var(--app-ink-1);
    font-size: 0.77rem;
    line-height: 1;
    padding: 0.45rem 0.65rem;
}

.app-status-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--app-accent);
}

.app-shell-main {
    max-width: 1320px;
}

.app-section {
    border: 1px solid var(--app-line-0);
    border-radius: var(--app-radius-lg);
    background: var(--app-bg-1);
    box-shadow: var(--app-shadow-soft);
}

.app-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    border-bottom: 1px solid var(--app-line-0);
    padding: 0.9rem 1rem;
}

.app-section-title {
    margin: 0;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
}

.app-section-subtitle {
    margin: 0.25rem 0 0;
    color: var(--app-ink-1);
    font-size: var(--app-font-size-secondary);
}

.app-section-body {
    padding: 1rem;
}

.app-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
    gap: 0.75rem;
}

.app-stat {
    border: 1px solid var(--app-line-0);
    border-radius: var(--app-radius-md);
    background: var(--app-bg-1);
    min-height: 5.4rem;
    padding: 0.7rem 0.85rem;
}

.app-stat-label {
    display: block;
    font-size: 0.77rem;
    color: var(--app-ink-1);
}

.app-stat-value {
    display: block;
    margin-top: 0.2rem;
    font-size: clamp(1.35rem, 1.08rem + 1vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.app-card-list {
    display: grid;
    gap: 0.6rem;
}

.app-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid var(--app-line-0);
    border-left: 0.2rem solid transparent;
    border-radius: var(--app-radius-sm);
    padding: 0.7rem 0.8rem;
    background: var(--app-bg-1);
    transition: border-color var(--app-motion-fast), background-color var(--app-motion-fast);
}

.app-list-item:hover {
    border-color: var(--app-line-1);
    background: #fcfdff;
}

.app-list-item.is-selected {
    border-left-color: var(--app-accent);
    background: var(--app-accent-soft);
}

.app-form-grid {
    display: grid;
    gap: 0.9rem;
}

.app-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.app-shell-body {
    background: var(--bs-body-tertiary);
}

.app-shell-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--app-shell-header-bg);
    backdrop-filter: blur(8px);
}

.app-shell-main {
    padding-top: 0.85rem;
}

.app-shell-main-with-mobile-nav {
    padding-bottom: calc(var(--app-mobile-nav-height) + 1.75rem + env(safe-area-inset-bottom));
}

.app-desktop-nav-link {
    min-height: 2.25rem;
}

.app-mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    border-top: 1px solid var(--app-shell-border);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    padding: 0.45rem 0.5rem calc(0.45rem + env(safe-area-inset-bottom));
}

.app-mobile-nav-inner {
    display: grid;
    gap: 0.35rem;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    max-width: 980px;
    margin: 0 auto;
}

.app-mobile-nav-link {
    text-decoration: none;
    color: var(--bs-body-color);
    border-radius: 0.7rem;
    min-height: 3rem;
    padding: 0.4rem 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.15;
    border: 1px solid transparent;
}

.app-mobile-nav-link.is-active {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    border-color: var(--bs-primary-border-subtle);
    font-weight: 600;
}

.breadcrumb-sm {
    font-size: 0.86rem;
}

.context-action-group .btn,
.context-action-group .dropdown-toggle {
    min-height: 2.2rem;
}

@media (max-width: 575.98px) {
    .context-action-group {
        flex-direction: column;
        align-items: stretch;
    }

    .context-action-group .btn,
    .context-action-group .dropdown,
    .context-action-group .dropdown-toggle {
        width: 100%;
        text-align: center;
    }

    .context-action-group .dropdown-menu {
        width: 100%;
    }
}

.offcanvas .list-group-item-action.active {
    background-color: var(--app-accent-soft);
    color: var(--app-accent);
    border-color: transparent;
    font-weight: 600;
}

.offcanvas .list-group-item-action.active:hover,
.offcanvas .list-group-item-action.active:focus {
    background-color: #d8e3ff;
    color: #243b92;
}

.app-mobile-nav-link-logout {
    cursor: pointer;
    color: var(--bs-danger);
}

.parent-shell-main {
    max-width: 980px;
    padding-top: 0.85rem;
}

.parent-shell-nav {
    border-top: 1px solid var(--app-shell-border);
}

.parent-shell-nav .nav-link {
    min-height: 2.15rem;
}

.parent-shell-nav .nav-link.active {
    font-weight: 600;
}

.parent-step-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.6rem;
}

.parent-step-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.parent-step-badge {
    min-width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}

.parent-step-item.is-done .parent-step-badge {
    background: var(--bs-success);
    color: #fff;
    border-color: var(--bs-success);
}

.parent-step-item.is-current .parent-step-badge {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

.parent-step-link,
.parent-step-label {
    color: inherit;
    text-decoration: none;
}

.parent-step-link:hover,
.parent-step-link:focus {
    text-decoration: underline;
}

.parent-step-item.is-upcoming .parent-step-label {
    color: var(--bs-secondary-color);
}

.dashboard-page,
.print-layout {
    min-height: 100vh;
}

.dashboard-layout-main {
    min-height: 100vh;
}

.print-shell-main {
    max-width: 1180px;
}

code {
    white-space: nowrap;
}

.card {
    border: 1px solid var(--app-line-0);
    border-radius: var(--app-radius-md);
    box-shadow: var(--app-shadow-soft);
}

.card + .card {
    margin-top: 0.75rem;
}

.app-compact h1,
.app-compact .h1 {
    font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem);
}

.app-compact h2,
.app-compact .h2 {
    font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
}

.app-compact h3,
.app-compact .h3,
.app-compact h4,
.app-compact .h4,
.app-compact h5,
.app-compact .h5 {
    font-size: 1.03rem;
}

.app-compact .small,
.app-compact small,
.app-compact .form-text,
.app-compact .text-body-secondary {
    font-size: var(--app-font-size-secondary) !important;
}

.app-compact .card-body {
    padding: 0.95rem 1rem;
}

.app-compact .card-header,
.app-compact .card-footer {
    padding: 0.65rem 1rem;
}

.app-compact .list-group-item,
.app-compact .form-control,
.app-compact .form-select,
.app-compact .btn {
    font-size: 0.9rem;
}

.app-compact .form-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.35rem;
    color: var(--app-ink-1);
}

.form-control,
.form-select {
    border-radius: var(--app-radius-sm);
    border-color: var(--app-line-1);
    transition: border-color var(--app-motion-fast), box-shadow var(--app-motion-fast), background-color var(--app-motion-fast);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-accent);
    box-shadow: var(--app-shadow-focus);
}

.btn {
    border-radius: var(--app-radius-sm);
    min-height: 2.25rem;
    transition: transform var(--app-motion-fast), box-shadow var(--app-motion-fast), background-color var(--app-motion-fast), border-color var(--app-motion-fast);
}

.btn:focus-visible {
    box-shadow: var(--app-shadow-focus);
}

.btn:active {
    transform: translateY(1px);
}

.btn.is-loading {
    pointer-events: none;
    opacity: 0.82;
}

.btn-primary {
    --bs-btn-bg: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-bg: #4f6fed;
    --bs-btn-hover-border-color: #4f6fed;
    --bs-btn-active-bg: #4966da;
    --bs-btn-active-border-color: #4966da;
}

.btn-outline-primary {
    --bs-btn-color: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-bg: var(--app-accent-soft);
    --bs-btn-hover-color: #243b92;
    --bs-btn-hover-border-color: var(--app-accent);
}

.btn-outline-secondary {
    --bs-btn-color: var(--app-ink-1);
    --bs-btn-border-color: var(--app-line-1);
    --bs-btn-hover-bg: #eef2f7;
    --bs-btn-hover-color: var(--app-ink-0);
    --bs-btn-hover-border-color: var(--app-line-1);
}

.table {
    --bs-table-striped-bg: #f7faff;
    --bs-table-hover-bg: #eef3ff;
    --bs-table-border-color: var(--app-line-0);
}

.app-table {
    margin-bottom: 0;
}

.app-table thead th {
    border-bottom-width: 1px;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-ink-1);
    white-space: nowrap;
}

.app-table tbody tr {
    transition: background-color var(--app-motion-fast);
}

.app-table tbody tr.is-highlight {
    background: var(--app-accent-soft);
}

.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.badge-muted {
    background: #e2e6ea;
    color: #383d41;
    border: 1px solid #c6cdd4;
}

.modal-content {
    border-radius: var(--app-radius-lg);
    border: 1px solid var(--app-line-0);
    box-shadow: 0 1rem 2.5rem rgba(16, 20, 24, 0.2);
}

.modal-header,
.modal-footer {
    border-color: var(--app-line-0);
}

.app-compact .row.g-4,
.app-compact .row.gy-4 {
    --bs-gutter-y: 1rem;
}

.app-compact .row.g-4,
.app-compact .row.gx-4 {
    --bs-gutter-x: 1rem;
}

.app-compact .alert {
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.75rem;
}

.app-compact .compact-section + .compact-section {
    margin-top: var(--app-spacing-compact);
}

.small-mono {
    font-family: ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-pre-wrap {
    white-space: pre-wrap;
}

.roomplan-area-card,
.roomlist-area-card,
.roomplan-room,
.roomlist-room {
    page-break-inside: avoid;
}

.roomplan-room {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    background: var(--bs-body-bg);
}

.roomplan-room-conflict {
    border-color: rgba(220, 53, 69, 0.45);
}

.roomplan-dropzone {
    min-height: 4rem;
    border: 1px dashed rgba(108, 117, 125, 0.45);
    border-radius: 0.75rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.7);
    display: grid;
    gap: 0.4rem;
}

.roomplan-dropzone:empty::before {
    content: attr(data-empty-label);
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.roomplan-dropzone-unassigned {
    background: rgba(248, 249, 250, 0.9);
}

.roomplan-participant {
    cursor: grab;
    border-radius: 0.5rem;
    border-left: 3px solid transparent;
}

.roomplan-participant:active {
    cursor: grabbing;
}

.roomplan-participant .card-body {
    background: var(--bs-body-bg);
    border-radius: 0.5rem;
}

.rp-card-body {
    padding: 0.3rem 0.5rem !important;
}

.rp-card-row {
    min-height: 1.6rem;
}

.rp-name {
    font-size: 0.875rem;
    max-width: 10rem;
}

.rp-age {
    font-size: 0.75rem;
}

.rp-zusammen-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1em 0.4em;
    border-radius: 0.25rem;
    background: rgba(108, 117, 125, 0.15);
    color: var(--bs-body-color);
    white-space: nowrap;
}

.rp-dot-row {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}

.rp-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rp-dot-checkin  { background: hsl(134, 50%, 55%); }
.rp-dot-manual   { background: hsl(40, 85%, 58%); }
.rp-dot-birthday { background: hsl(210, 75%, 62%); }
.rp-dot-cancel   { background: hsl(0, 0%, 68%); }

.rp-action-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

.rp-action-row-assigned {
    justify-content: flex-end;
}

.rp-room-select {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
}

.rp-assign-btn {
    font-size: 0.75rem !important;
    padding: 0.15rem 0.5rem !important;
    white-space: nowrap;
}

.rp-zusammen-0 { border-left-color: hsl(0,   55%, 62%); }
.rp-zusammen-0 .rp-zusammen-badge { background: hsl(0,   70%, 90%); color: hsl(0,   50%, 38%); }

.rp-zusammen-1 { border-left-color: hsl(30,  60%, 58%); }
.rp-zusammen-1 .rp-zusammen-badge { background: hsl(30,  70%, 89%); color: hsl(30,  55%, 35%); }

.rp-zusammen-2 { border-left-color: hsl(60,  50%, 52%); }
.rp-zusammen-2 .rp-zusammen-badge { background: hsl(60,  60%, 86%); color: hsl(60,  45%, 32%); }

.rp-zusammen-3 { border-left-color: hsl(120, 45%, 52%); }
.rp-zusammen-3 .rp-zusammen-badge { background: hsl(120, 55%, 87%); color: hsl(120, 40%, 30%); }

.rp-zusammen-4 { border-left-color: hsl(180, 48%, 50%); }
.rp-zusammen-4 .rp-zusammen-badge { background: hsl(180, 55%, 86%); color: hsl(180, 42%, 28%); }

.rp-zusammen-5 { border-left-color: hsl(210, 55%, 58%); }
.rp-zusammen-5 .rp-zusammen-badge { background: hsl(210, 65%, 88%); color: hsl(210, 50%, 32%); }

.rp-zusammen-6 { border-left-color: hsl(250, 50%, 62%); }
.rp-zusammen-6 .rp-zusammen-badge { background: hsl(250, 60%, 90%); color: hsl(250, 45%, 35%); }

.rp-zusammen-7 { border-left-color: hsl(290, 48%, 60%); }
.rp-zusammen-7 .rp-zusammen-badge { background: hsl(290, 58%, 90%); color: hsl(290, 42%, 34%); }

.rp-zusammen-8 { border-left-color: hsl(340, 55%, 60%); }
.rp-zusammen-8 .rp-zusammen-badge { background: hsl(340, 65%, 90%); color: hsl(340, 48%, 34%); }

.rp-zusammen-9 { border-left-color: hsl(150, 48%, 52%); }
.rp-zusammen-9 .rp-zusammen-badge { background: hsl(150, 55%, 86%); color: hsl(150, 42%, 28%); }

.rp-zusammen-highlight {
    box-shadow: 0 0 0 2px currentColor, 0 2px 8px rgba(0, 0, 0, 0.18);
    z-index: 1;
    position: relative;
}

.roomlist-participant + .roomlist-participant {
    border-top: 1px solid var(--bs-border-color);
}

.teamplan-person-pool {
    min-height: 3.5rem;
    border: 1px dashed rgba(108, 117, 125, 0.45);
    border-radius: 0.75rem;
    padding: 0.6rem;
    background: rgba(255, 255, 255, 0.75);
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.teamplan-placeholder-pool {
    min-height: 3rem;
    border: 1px dashed rgba(108, 117, 125, 0.35);
    border-radius: 0.75rem;
    padding: 0.55rem;
    background: rgba(255, 255, 255, 0.62);
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.teamplan-person-chip {
    border: 1px solid rgba(33, 37, 41, 0.18);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    line-height: 1.2;
    font-size: 0.83rem;
    cursor: grab;
    user-select: none;
    white-space: nowrap;
}

.teamplan-person-chip:active {
    cursor: grabbing;
}

.teamplan-person-chip-assigned {
    cursor: default;
}

.teamplan-placeholder-chip {
    border-style: dashed;
}

.teamplan-dropzone {
    min-height: 2.25rem;
    border: 1px dashed rgba(108, 117, 125, 0.5);
    border-radius: 0.6rem;
    padding: 0.35rem;
    background: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
}

.teamplan-dropzone:empty::before {
    content: attr(data-empty-label);
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
}

.no-print {
    display: block;
}

.print-only {
    display: none;
}

@media print {
    body {
        background: #fff !important;
        min-height: auto;
    }

    .container {
        max-width: none !important;
        width: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .no-print,
    nav,
    script,
    .app-mobile-nav,
    .offcanvas-backdrop {
        display: none !important;
    }

    .card,
    .roomplan-room,
    .roomlist-room {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    .alert {
        border: 1px solid #ccc !important;
        background: #fff !important;
        color: #000 !important;
    }

    body,
    .print-layout {
        font-size: 0.82rem;
    }

    .container,
    .print-shell-main {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .roomlist-room {
        break-inside: avoid;
        padding: 0.5rem !important;
    }

    .roomlist-area-card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        margin-bottom: 0.75rem !important;
    }

    .roomlist-area-card + .roomlist-area-card {
        break-before: page;
    }

    .dashboard-room {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    .print-room-block,
    .print-area-block > .print-room-block {
        break-inside: avoid;
    }

    .print-info-block {
        break-inside: avoid;
    }

    .print-only {
        display: block !important;
    }
}

@media (max-width: 991.98px) {
    .app-commandbar {
        border-bottom: 0;
    }

    .app-status-strip {
        border-top: 0;
        border-bottom: 1px solid var(--app-line-0);
    }

    .app-shell-main {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .app-mobile-nav-inner {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .app-shell-main-with-mobile-nav {
        padding-bottom: 2.5rem;
    }
}


.dashboard-page {
    min-height: 100vh;
}

.dashboard-shell {
    min-height: 100vh;
}

.dashboard-header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* ─── Legacy status helpers (still used by helpers.php) ─── */
.dashboard-status-indicator {
    width: 0.7rem;
    height: 0.7rem;
    min-width: 0.7rem;
    border-radius: 999px;
    display: inline-block;
}

.dashboard-status-open        { background: #adb5bd; }
.dashboard-status-self-checkin{ background: #0dcaf0; }
.dashboard-status-at-reception{ background: #ffc107; }
.dashboard-status-complete    { background: #198754; }

/* ─── Sheets-Stil Dashboard ─── */

/*
 * Sticky-top offset for the summary bar, scoped per dashboard context.
 * Public dashboard:   sticky .dashboard-header is ≈ 8.5 rem tall on desktop.
 * Counselor/internal: sticky .app-shell-header navbar is ≈ 3.5 rem tall.
 * Fallback 0 covers any other embedding context.
 */
.dashboard-shell:not(.dashboard-shell-internal) {
    --db-summary-top: 8.5rem;
}
@media (max-width: 991.98px) {
    .dashboard-shell:not(.dashboard-shell-internal) {
        --db-summary-top: 6.5rem;
    }
}
.dashboard-shell-internal {
    --db-summary-top: 3.5rem;
}

/* Sticky summary bar */
.db-summary-bar {
    position: sticky;
    top: var(--db-summary-top, 0);
    z-index: 50;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.5rem 0.1rem;
    background: rgba(247, 248, 250, 0.97);
    border-bottom: 1px solid var(--app-line-0);
    backdrop-filter: blur(6px);
    margin-bottom: 0.75rem;
    font-size: 0.78rem;
}

.db-summary-stats {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.db-summary-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    color: var(--app-ink-1);
}

.db-summary-label {
    font-size: 0.75rem;
}

.db-summary-sep {
    color: var(--app-line-1);
}

.db-summary-status-counts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-left: auto;
}

.db-status-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.db-status-count .db-status-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.db-status-count.dashboard-status-open         { background: #e9ecef; color: #495057; }
.db-status-count.dashboard-status-open .db-status-dot { background: #adb5bd; }

.db-status-count.dashboard-status-self-checkin { background: #cff4fc; color: #055160; }
.db-status-count.dashboard-status-self-checkin .db-status-dot { background: #0dcaf0; }

.db-status-count.dashboard-status-at-reception { background: #fff3cd; color: #664d03; }
.db-status-count.dashboard-status-at-reception .db-status-dot { background: #ffc107; }

.db-status-count.dashboard-status-complete     { background: #d1e7dd; color: #0a3622; }
.db-status-count.dashboard-status-complete .db-status-dot { background: #198754; }

/* Area sections */
.db-areas {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.db-area-section {
    border: 1px solid var(--app-line-0);
    border-radius: var(--app-radius-md);
    overflow: hidden;
    background: var(--app-bg-1);
    box-shadow: var(--app-shadow-soft);
}

/* Area collapsible header */
.db-area-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    background: #f8f9fa;
    border: none;
    border-bottom: 1px solid var(--app-line-0);
    cursor: pointer;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--app-ink-0);
    transition: background-color var(--app-motion-fast);
    flex-wrap: wrap;
}

.db-area-header:hover {
    background: #f0f2f5;
}

.db-area-header[aria-expanded="false"] .db-area-toggle-icon {
    transform: rotate(-90deg);
}

.db-area-toggle-icon {
    font-size: 0.75rem;
    color: var(--app-ink-1);
    flex-shrink: 0;
    transition: transform var(--app-motion-fast);
    display: inline-block;
}

.db-area-name {
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: -0.01em;
}

.db-area-meta {
    color: var(--app-ink-1);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.db-area-bar-wrap {
    flex: 1;
    min-width: 60px;
    max-width: 140px;
    margin-left: auto;
}

.db-area-header-static {
    cursor: default;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    background: #f8f9fa;
    border-bottom: 1px solid var(--app-line-0);
    font-size: 0.82rem;
}

/* Occupancy bar */
.db-occ-bar {
    display: block;
    width: 100%;
    height: 0.35rem;
    border-radius: 999px;
    background: #e9ecef;
    overflow: hidden;
}

.db-occ-bar-sm {
    height: 0.3rem;
    min-width: 40px;
}

.db-occ-bar-fill {
    display: block;
    height: 100%;
    background: var(--app-accent);
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* Table */
.db-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.db-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
    table-layout: auto;
    font-size: 0.8rem;
}

.db-th {
    padding: 0.35rem 0.7rem;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-ink-1);
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid var(--app-line-0);
    background: #fafbfc;
    /* sticky header row */
    position: sticky;
    top: 0;
    z-index: 3;
    box-shadow: 0 1px 0 var(--app-line-0);
}

.db-th-room {
    /* sticky first column AND sticky header row — needs highest z-index */
    position: sticky;
    top: 0;
    left: 0;
    z-index: 5;
    background: #fafbfc;
    border-right: 1px solid var(--app-line-0);
    min-width: 120px;
    width: 130px;
}

.db-th-occ {
    width: 90px;
    min-width: 80px;
}

.db-th-participants {
    min-width: 260px;
}

.db-tr {
    border-bottom: 1px solid #f1f4f8;
    transition: background-color var(--app-motion-fast);
}

.db-tr:last-child {
    border-bottom: none;
}

.db-tr:hover {
    background: #f7faff;
}

.db-tr-special {
    background: #fff8f0;
}

.db-tr-special:hover {
    background: #fff3e6;
}

.db-td {
    padding: 0.4rem 0.7rem;
    vertical-align: middle;
}

.db-td-room {
    position: sticky;
    left: 0;
    z-index: 1;
    background: inherit;
    border-right: 1px solid var(--app-line-0);
    white-space: nowrap;
}

.db-tr:hover .db-td-room {
    background: #f7faff;
}

.db-tr-special .db-td-room {
    background: #fff8f0;
}

.db-tr-special:hover .db-td-room {
    background: #fff3e6;
}

.db-room-name {
    font-weight: 600;
    font-size: 0.78rem;
    display: block;
    line-height: 1.3;
}

.db-room-badge {
    display: inline-block;
    font-size: 0.75rem;
    background: #e9ecef;
    color: #495057;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    margin-top: 0.1rem;
    line-height: 1.4;
}

.db-td-occ {
    white-space: nowrap;
}

.db-occ-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.db-occ-label {
    font-size: 0.75rem;
    color: var(--app-ink-1);
    white-space: nowrap;
    min-width: 2rem;
}

.db-td-participants {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.db-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.db-chip-row-unassigned {
    padding: 0.55rem 0.75rem;
}

.db-empty-cell {
    font-size: 0.75rem;
    color: #495057;
    font-style: italic;
}

/* Participant chip */
.db-participant-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.5rem 0.18rem 0.4rem;
    border-radius: 0.4rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid transparent;
    line-height: 1.4;
    white-space: nowrap;
}

.db-chip-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.db-chip-name {
    font-weight: 600;
}

.db-chip-status {
    font-size: 0.75rem;
}

/* Chip color variants — keyed by dashboard_status_class() output */
.db-participant-chip--dashboard-status-open {
    background: #e9ecef;
    color: #495057;
    border-color: #ced4da;
}
.db-participant-chip--dashboard-status-open .db-chip-dot { background: #adb5bd; }

.db-participant-chip--dashboard-status-self-checkin {
    background: #cff4fc;
    color: #055160;
    border-color: #9eeaf9;
}
.db-participant-chip--dashboard-status-self-checkin .db-chip-dot { background: #0dcaf0; }

.db-participant-chip--dashboard-status-at-reception {
    background: #fff3cd;
    color: #664d03;
    border-color: #ffe69c;
}
.db-participant-chip--dashboard-status-at-reception .db-chip-dot { background: #ffc107; }

.db-participant-chip--dashboard-status-complete {
    background: #d1e7dd;
    color: #0a3622;
    border-color: #a3cfbb;
}
.db-participant-chip--dashboard-status-complete .db-chip-dot { background: #198754; }

/* Print */
@media print {
    .dashboard-header,
    .dashboard-toolbar,
    #dashboard-error-banner {
        display: none !important;
    }

    .dashboard-page {
        background: #fff !important;
    }

    .db-summary-bar {
        position: static;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-bottom: 0.5rem;
        backdrop-filter: none;
    }

    .db-th {
        position: static;
        box-shadow: none;
    }

    .db-area-section {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        margin-bottom: 0.5rem;
    }

    .db-area-header {
        background: #f4f4f4 !important;
    }

    .db-table-wrap {
        overflow: visible;
    }

    .db-table {
        min-width: 0;
    }
}


.wallet-balance-positive {
    color: var(--bs-success-text-emphasis);
}

.wallet-balance-negative {
    color: var(--bs-danger-text-emphasis);
}

/* ─── Dashboard view toggle ──────────────────────────────────────────────── */

.db-view { display: none; }

#dashboard-board.db-view-mode-sheets .db-view-sheets,
#dashboard-board.db-view-mode-compact .db-view-compact {
    display: block;
}

/* Default (no class yet): show sheets */
#dashboard-board:not(.db-view-mode-compact) .db-view-sheets {
    display: block;
}

.db-view-toggle .db-view-toggle-btn.active {
    background-color: var(--bs-secondary);
    color: #fff;
    border-color: var(--bs-secondary);
}

/* ─── Compact-Raster (Variante B) ────────────────────────────────────────── */

.db-compact-areas {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.db-compact-area-section {
    background: #fff;
    border: 1px solid #d7dee6;
    border-radius: 0.6rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16,20,24,0.05);
}

.db-compact-area-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.7rem;
    background: #f8f9fa;
    border: none;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    text-align: left;
    font-size: 0.83rem;
    color: inherit;
    user-select: none;
}

.db-compact-area-header[aria-expanded="false"] .db-area-toggle-icon {
    transform: rotate(-90deg);
}

.db-compact-area-header.db-compact-area-header-static {
    cursor: default;
}

.db-compact-area-badges {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-left: 0.2rem;
}

.db-compact-area-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.db-compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
}

.db-compact-tile {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid #e9ecef;
    border-left: 3px solid #dee2e6;
    border-radius: 0.5rem;
    background: #fff;
    min-height: 2.5rem;
}

.db-compact-tile-special {
    background: #fff8f0;
    border-color: #fde8d0;
}

.db-compact-tile-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding-top: 0.1rem;
    flex-shrink: 0;
}

.db-compact-room-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: #343a40;
    white-space: nowrap;
    line-height: 1;
}

.db-compact-occ {
    font-size: 0.75rem;
    color: #495057;
    line-height: 1;
}

.db-compact-bar-wrap {
    width: 28px;
    height: 0.25rem;
    border-radius: 999px;
    background: #e9ecef;
    overflow: hidden;
    flex-shrink: 0;
}

.db-compact-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s;
}

.db-compact-chips {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    align-content: flex-start;
}

.db-compact-unassigned-row {
    display: block;
    padding: 0.5rem 0.6rem;
}

.db-compact-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    margin-top: 0.4rem;
    border-top: 1px solid #e9ecef;
    background: #fff;
    font-size: 0.75rem;
    color: #495057;
    border-radius: 0 0 0.5rem 0.5rem;
}

.db-compact-legend-label {
    font-weight: 600;
    color: #495057;
}

.db-compact-legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.db-compact-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Compact chips: slightly smaller than full chips */
.db-view-compact .db-participant-chip {
    font-size: 0.75rem;
    padding: 0.08rem 0.35rem;
}

/* ─── Checkin bulk selection ─────────────────────────────────────────────── */

.checkin-card {
    position: relative;
    transition: outline 120ms ease-out, background-color 120ms ease-out;
}

.checkin-card-checkbox-wrap {
    position: absolute;
    top: 0.875rem;
    left: 0.875rem;
    z-index: 5;
}

.checkin-card.checkin-card-selected {
    outline: 2px solid var(--app-accent);
    background-color: var(--app-accent-soft);
}

.checkin-card.checkin-card-conflict {
    outline: 2px solid var(--app-danger);
}

.checkin-card.checkin-card-conflict::after {
    content: 'Konflikt – manuell prüfen';
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: var(--app-danger);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    z-index: 6;
}

.checkin-bulk-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: var(--app-bg-1);
    border-top: 2px solid var(--app-accent);
    box-shadow: 0 -4px 20px rgba(16, 20, 24, 0.12);
    padding: 0.6rem 0;
}

@media (max-width: 991.98px) {
    .checkin-bulk-bar {
        bottom: var(--app-mobile-nav-height);
    }
}

@media print {
    .checkin-bulk-bar {
        display: none !important;
    }
}

/* ─── End checkin bulk selection ─────────────────────────────────────────── */

/* ─── Check-in operative list view ──────────────────────────────────────── */

/* Status color tokens */
:root {
    --ci-open-bg:       #e9ecef;
    --ci-open-bar:      #adb5bd;
    --ci-open-color:    #495057;
    --ci-self-bg:       #cff4fc;
    --ci-self-bar:      #0dcaf0;
    --ci-self-color:    #055160;
    --ci-recep-bg:      #fff3cd;
    --ci-recep-bar:     #f59e0b;
    --ci-recep-color:   #664d03;
    --ci-done-bg:       #d1e7dd;
    --ci-done-bar:      #198754;
    --ci-done-color:    #0a3622;
}

/* Stat bar (summary filter pills) */
.ci-stat-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.ci-stat-sep {
    width: 1px;
    height: 1.2rem;
    background: var(--app-line-1);
    flex-shrink: 0;
}

.ci-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--app-line-1);
    background: var(--app-bg-1);
    color: var(--app-ink-1);
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--app-motion-fast), border-color var(--app-motion-fast), color var(--app-motion-fast);
    white-space: nowrap;
}

.ci-stat-pill:hover {
    background: var(--app-bg-2);
    color: var(--app-ink-0);
}

.ci-stat-pill-active {
    font-weight: 700;
    border-width: 2px;
}

.ci-stat-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    flex-shrink: 0;
    background: var(--app-line-1);
}

/* Pill color variants */
.ci-stat-pill-open  { background: var(--ci-open-bg); border-color: #ced4da; color: var(--ci-open-color); }
.ci-stat-pill-open .ci-stat-dot { background: var(--ci-open-bar); }
.ci-stat-pill-open.ci-stat-pill-active { border-color: var(--ci-open-bar); }

.ci-stat-pill-self  { background: var(--ci-self-bg); border-color: #9eeaf9; color: var(--ci-self-color); }
.ci-stat-pill-self .ci-stat-dot { background: var(--ci-self-bar); }
.ci-stat-pill-self.ci-stat-pill-active { border-color: var(--ci-self-bar); }

.ci-stat-pill-reception { background: var(--ci-recep-bg); border-color: #ffd966; color: var(--ci-recep-color); }
.ci-stat-pill-reception .ci-stat-dot { background: var(--ci-recep-bar); }
.ci-stat-pill-reception.ci-stat-pill-active { border-color: var(--ci-recep-bar); }

.ci-stat-pill-done  { background: var(--ci-done-bg); border-color: #a3cfbb; color: var(--ci-done-color); }
.ci-stat-pill-done .ci-stat-dot { background: var(--ci-done-bar); }
.ci-stat-pill-done.ci-stat-pill-active { border-color: var(--ci-done-bar); }

.ci-stat-pill-warn  { background: #fff8e1; border-color: #ffe082; color: #5d4037; }
.ci-stat-pill-warn .ci-stat-dot { background: #ff8f00; }
.ci-stat-pill-warn.ci-stat-pill-active { border-color: #ff8f00; }

.ci-stat-pill-noroom { background: #fce4e4; border-color: #f5a5a5; color: #7b1a1a; }
.ci-stat-pill-noroom .ci-stat-dot { background: #d64545; }
.ci-stat-pill-noroom.ci-stat-pill-active { border-color: #d64545; }

.ci-stat-pill-reset { background: #fff; border-color: var(--app-line-1); color: var(--app-ink-1); }

.ci-stat-pill-nolink {
    cursor: default;
    pointer-events: none;
    opacity: 0.85;
}

/* Filter form */
.ci-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ci-search-wrap {
    position: relative;
    flex: 1 1 260px;
    min-width: 200px;
}

.ci-search-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--app-ink-1);
    pointer-events: none;
}

.ci-search-input {
    padding-left: 2.1rem;
}

.ci-filter-select {
    flex: 0 1 160px;
    min-width: 120px;
}

.ci-filter-btn,
.ci-filter-reset {
    flex-shrink: 0;
}

/* List wrapper */
.ci-list-wrap {
    overflow: hidden;
}

/* Column grid definition */
.ci-list-header,
.ci-row {
    display: grid;
    grid-template-columns:
        2rem       /* check */
        0.25rem    /* status bar */
        1fr        /* name */
        8rem       /* room */
        4.5rem     /* proof */
        2.5rem     /* warnings */
        auto       /* toggle (detail link + expand btn) */
    ;
    align-items: center;
    gap: 0 0.75rem;
}

/* Header row */
.ci-list-header {
    padding: 0.35rem 0.75rem;
    background: #fafbfc;
    border-bottom: 1px solid var(--app-line-0);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    color: var(--app-ink-1);
    font-weight: 600;
}

/* Row wrapper (outer card element) */
.ci-row-wrap {
    border-bottom: 1px solid var(--app-line-0);
    transition: background-color var(--app-motion-fast);
}

.ci-row-wrap:last-child {
    border-bottom: none;
}

.ci-row-wrap:hover > .ci-row {
    background: #f7faff;
}

/* Cancelled rows: de-emphasised without opacity loss */
.ci-row-cancelled {
    background: #f4f5f6;
    color: #495057;
    border-left: 3px solid #ced4da !important;
}
.ci-row-cancelled .ci-name,
.ci-row-cancelled .ci-room-name {
    text-decoration: line-through;
    text-decoration-color: #adb5bd;
}

/* Status color accents on the row-wrap */
.ci-row-open     { border-left: 3px solid var(--ci-open-bar); }
.ci-row-self     { border-left: 3px solid var(--ci-self-bar); }
.ci-row-reception{ border-left: 3px solid var(--ci-recep-bar); }
.ci-row-done     { border-left: 3px solid var(--ci-done-bar); }

/* Main row */
.ci-row {
    padding: 0.5rem 0.75rem;
}

/* Status bar (colored left accent inside the row grid) */
.ci-col-status-bar {
    display: flex;
    align-items: stretch;
    align-self: stretch;
}

.ci-status-bar {
    width: 3px;
    border-radius: 999px;
    align-self: stretch;
    min-height: 2rem;
}

.ci-bar-open     { background: var(--ci-open-bar); }
.ci-bar-self     { background: var(--ci-self-bar); }
.ci-bar-reception{ background: var(--ci-recep-bar); }
.ci-bar-done     { background: var(--ci-done-bar); }

/* Checkbox column */
.ci-col-check {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Override absolute positioning from .checkin-card-checkbox-wrap when inside ci-row */
.ci-row .checkin-card-checkbox-wrap {
    position: static;
}

/* Name column */
.ci-col-name {
    min-width: 0;
}

.ci-name {
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ci-meta {
    font-size: 0.75rem;
    line-height: 1.3;
}

.ci-status-badge {
    margin-top: 0.15rem;
}

/* Room column */
.ci-col-room {
    min-width: 0;
}

.ci-room-area {
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ci-room-name {
    font-size: 0.82rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Proof column */
.ci-col-proof {
    text-align: center;
    font-size: 0.75rem;
    color: var(--app-ink-1);
}

.ci-proof-row {
    display: flex;
    gap: 0.2rem;
    justify-content: center;
    align-items: center;
}

.ci-proof-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid transparent;
}

.ci-proof-dot-ok   { background: #d1e7dd; color: #0a3622; border-color: #a3cfbb; }
.ci-proof-dot-err  { background: #f8d7da; color: #58151c; border-color: #f5c2c7; }
.ci-proof-dot-warn { background: #fff3cd; color: #664d03; border-color: #ffe69c; }
.ci-proof-dot-open { background: #e9ecef; color: #6c757d; border-color: #dee2e6; }
.ci-proof-dot-na   { background: transparent; color: #adb5bd; border-color: transparent; font-size: 0.9rem; }

/* Warnings column */
.ci-col-warnings {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.ci-warn-icon {
    font-size: 0.85rem;
    line-height: 1;
    cursor: default;
}

/* Toggle column */
.ci-col-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: flex-end;
    white-space: nowrap;
}

.ci-detail-link {
    padding: 0.2rem 0.4rem;
    min-height: auto;
    line-height: 1;
    font-size: 0.75rem;
}

.ci-play-link {
    padding: 0.2rem 0.4rem;
    min-height: auto;
    line-height: 1;
    font-size: 0.75rem;
}

.ci-toggle-btn {
    padding: 0.2rem 0.45rem;
    min-height: auto;
    line-height: 1;
    font-size: 0.75rem;
}

.ci-toggle-icon {
    display: inline-block;
    transition: transform var(--app-motion-fast);
}

/* Detail panel */
.ci-detail {
    border-top: 1px solid var(--app-line-0);
    background: #fafbfc;
}

.ci-detail-inner {
    padding: 1rem 1.1rem;
}

.ci-detail-meta {
    font-size: 0.78rem;
    line-height: 1.6;
}

/* Selected / conflict states (used by bulk JS) */
.ci-row-wrap.checkin-card-selected {
    outline: 2px solid var(--app-accent);
    outline-offset: -2px;
    background-color: var(--app-accent-soft);
}

.ci-row-wrap.checkin-card-selected > .ci-row {
    background-color: var(--app-accent-soft);
}

.ci-row-wrap.checkin-card-conflict {
    outline: 2px solid var(--app-danger);
    outline-offset: -2px;
    position: relative;
}

.ci-row-wrap.checkin-card-conflict::after {
    content: 'Konflikt – manuell prüfen';
    position: absolute;
    top: 0.4rem;
    right: 0.75rem;
    background: var(--app-danger);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    z-index: 6;
}

/* Responsive: collapse room + proof columns on small screens */
@media (max-width: 767.98px) {
    .ci-list-header,
    .ci-row {
        grid-template-columns:
            2rem
            0.25rem
            1fr
            auto
        ;
    }

    .ci-col-room,
    .ci-col-proof,
    .ci-col-warnings {
        display: none;
    }

    .ci-list-header .ci-col-room,
    .ci-list-header .ci-col-proof,
    .ci-list-header .ci-col-warnings {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .ci-filter-select {
        flex: 1 1 130px;
    }
}

@media print {
    .ci-stat-bar,
    .ci-filter-form,
    .ci-col-check,
    .ci-col-toggle,
    .ci-list-header {
        display: none !important;
    }
}

/* ─── End check-in operative list view ───────────────────────────────────── */

@media print {
    .db-view-toggle,
    .db-compact-legend {
        display: none !important;
    }

    .db-compact-area-section {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        margin-bottom: 0.5rem;
    }

    .db-compact-area-header {
        background: #f4f4f4 !important;
    }
}

/* ─── Interactive participant chip (counselor/internal dashboard) ─────────── */

.db-participant-chip-btn {
    cursor: pointer;
    outline: none;
    transition: filter var(--app-motion-fast), box-shadow var(--app-motion-fast);
}

.db-participant-chip-btn:hover {
    filter: brightness(0.92);
    box-shadow: 0 0 0 2px rgba(91, 124, 255, 0.3);
}

.db-participant-chip-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--app-accent);
    outline: none;
}

.db-participant-chip-btn.db-chip-busy {
    opacity: 0.6;
    pointer-events: none;
}

.db-chip-dropdown {
    position: absolute;
    z-index: 2000;
    background: #fff;
    border: 1px solid var(--app-line-1);
    border-radius: var(--app-radius-md);
    box-shadow: 0 0.5rem 1.5rem rgba(16, 20, 24, 0.14);
    padding: 0.3rem;
    min-width: 11rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.db-chip-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.65rem;
    border: none;
    background: transparent;
    border-radius: 0.4rem;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
    color: var(--app-ink-0);
    transition: background-color var(--app-motion-fast);
}

.db-chip-dropdown-item::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.db-chip-dropdown-item:hover {
    background: var(--app-bg-2);
}

.db-chip-dropdown-item.is-current {
    font-weight: 700;
    background: var(--app-accent-soft);
    color: var(--app-accent);
}

.db-chip-dropdown-item.is-current::before {
    background: var(--app-accent);
}

.db-chip-dropdown-item--dashboard-status-open::before         { background: #adb5bd; }
.db-chip-dropdown-item--dashboard-status-self-checkin::before { background: #0dcaf0; }
.db-chip-dropdown-item--dashboard-status-at-reception::before { background: #ffc107; }
.db-chip-dropdown-item--dashboard-status-complete::before     { background: #198754; }

@media print {
    .db-chip-dropdown,
    .db-participant-chip-btn:focus-visible {
        display: none !important;
    }
}