/* Theme-neutral compact styling for participant appointments (Teilnehmertermine) */

.participant-appointments-host {
    --pa-text: var(--bs-body-color, inherit);
    --pa-muted: var(--bs-secondary-color, color-mix(in srgb, currentColor 55%, transparent));
    --pa-border: var(--bs-border-color, color-mix(in srgb, currentColor 18%, transparent));
    --pa-surface: var(--bs-tertiary-bg, transparent);
    --pa-selected: color-mix(in srgb, currentColor 8%, transparent);
    --pa-gap: 0.35rem;
    --pa-pad-y: 0.25rem;
    --pa-pad-x: 0.5rem;
    color: var(--pa-text);
}

.dxbl-grid-detail-cell .participant-appointments-host {
    padding: 4px 8px;
}

.participant-appointments-host .dxbl-fl-item,
.participant-appointments-content .dxbl-fl-item {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.participant-appointments-host .dxbl-fl-item-content,
.participant-appointments-content .dxbl-fl-item-content {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* MudTabs */
.participant-appointments-tabs.mud-tabs,
.participant-appointments-tabs .mud-tabs-tabbar {
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0;
}

.participant-appointments-tabs .mud-tabs-tabbar-content .mud-tabs-tabbar-wrapper {
    gap: var(--pa-gap);
}

.participant-appointments-tabs .mud-tab {
    min-height: 28px;
    padding: var(--pa-pad-y) var(--pa-pad-x) !important;
    margin-right: 0.5rem !important;
    text-transform: none !important;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pa-muted) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    letter-spacing: normal;
}

.participant-appointments-tabs .mud-tab.mud-tab-active {
    color: var(--pa-text) !important;
    font-weight: 600;
    border-bottom-color: currentColor !important;
}

.participant-appointments-tabs .mud-tab-slider,
.participant-appointments-tabs .mud-tabs-tabbar .mud-tab-slider {
    display: none !important;
}

.participant-appointments-tabs .mud-tabs-panels {
    padding-top: 4px;
}

/* DevExpress DxFormLayoutTabPages */
.participant-appointments-tabs.dxbl-tabs,
.participant-appointments-tabs .dxbl-tabs-tablist {
    margin-bottom: 4px !important;
    border-bottom: 1px solid var(--pa-border);
    gap: var(--pa-gap);
}

.participant-appointments-tabs .dxbl-tabs-item {
    min-height: 28px !important;
    padding: var(--pa-pad-y) var(--pa-pad-x) !important;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pa-muted);
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    box-shadow: none !important;
}

.participant-appointments-tabs .dxbl-tabs-item.dxbl-active {
    color: var(--pa-text) !important;
    font-weight: 600;
    border-bottom-color: currentColor !important;
}

.participant-appointments-tabs .dxbl-fl-item-content {
    padding-top: 4px !important;
}

/* Toolbar: grid settings + ribbon in one row (standalone or inside DxGrid ToolbarTemplate) */
.participant-appointments-toolbar,
.participant-appointments-grid .dxbl-grid-toolbar .participant-appointments-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pa-gap);
    padding: 2px 0 4px;
    border-bottom: 1px solid var(--pa-border);
    margin-bottom: 2px;
    width: 100%;
}

.participant-appointments-grid .dxbl-grid-toolbar {
    padding: 2px 4px 0;
    border-bottom: 0;
}

.participant-appointments-grid--scoped .dxbl-grid-toolbar {
    padding-top: 0;
    padding-bottom: 0;
}

.participant-appointments-grid--scoped .participant-appointments-toolbar {
    padding-top: 0;
    padding-bottom: 2px;
    margin-bottom: 0;
}

.participant-appointments-toolbar__settings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pa-gap);
    flex: 0 1 auto;
    min-width: 0;
}

.participant-appointments-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pa-gap);
    flex: 1 1 auto;
    min-width: 0;
}

.participant-appointments-toolbar .LayoutMenuItems--compact .dxbl-menu-bar,
.participant-appointments-toolbar .LayoutMenuItems--compact.dxbl-menu .dxbl-menu-title,
.participant-appointments-grid .dxbl-grid-toolbar .LayoutMenuItems--compact .dxbl-menu-bar,
.participant-appointments-grid .dxbl-grid-toolbar .LayoutMenuItems--compact.dxbl-menu .dxbl-menu-title {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    font-size: 0.8125rem;
    min-height: 28px;
}

.participant-appointments-toolbar .LayoutMenuItems--compact .dxbl-menu-nav-bar,
.participant-appointments-grid .dxbl-grid-toolbar .LayoutMenuItems--compact .dxbl-menu-nav-bar {
    min-height: 28px;
}

.participant-appointments-toolbar .AttendanceRibbonNoTabHeader,
.participant-appointments-grid .dxbl-grid-toolbar .AttendanceRibbonNoTabHeader {
    margin-top: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.participant-appointments-toolbar .AttendanceRibbonNoTabHeader .dxbl-ribbon__root .dxbl-ribbon-toolbar,
.participant-appointments-grid .dxbl-grid-toolbar .AttendanceRibbonNoTabHeader .dxbl-ribbon__root .dxbl-ribbon-toolbar {
    border-top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 28px !important;
}

.participant-appointments-toolbar .AttendanceRibbonNoTabHeader .dxbl-toolbar-item-tmpl .mud-button,
.participant-appointments-toolbar .AttendanceRibbonNoTabHeader .dxbl-toolbar-item .mud-button,
.participant-appointments-toolbar .AttendanceRibbonNoTabHeader .mud-button,
.participant-appointments-grid .dxbl-grid-toolbar .AttendanceRibbonNoTabHeader .dxbl-toolbar-item-tmpl .mud-button,
.participant-appointments-grid .dxbl-grid-toolbar .AttendanceRibbonNoTabHeader .dxbl-toolbar-item .mud-button,
.participant-appointments-grid .dxbl-grid-toolbar .AttendanceRibbonNoTabHeader .mud-button {
    margin: 0 !important;
    padding: 0.2rem 0.45rem !important;
    font-size: 0.8125rem;
    min-height: 26px;
    text-transform: none;
}

/* Grid readability */
.participant-appointments-grid.dxbl-grid .dxbl-grid-table > thead > tr > th,
.participant-appointments-grid.dxbl-grid .dxbl-grid-table > tbody > tr > td {
    line-height: 1.35;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    font-size: 0.875rem;
}

.participant-appointments-grid.dxbl-grid .dxbl-grid-table > thead > tr > th {
    font-weight: 600;
    border-bottom: 1px solid var(--pa-border);
}

.participant-appointments-grid.dxbl-grid .dxbl-grid-group-panel {
    font-size: 0.8rem;
    color: var(--pa-muted);
    padding: 2px 4px;
    min-height: 24px;
}

.participant-appointments-grid.dxbl-grid table.dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td,
.participant-appointments-grid.dxbl-grid table.dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td {
    background: var(--pa-selected) !important;
    box-shadow: inset 2px 0 0 currentColor;
}

.participant-appointments-grid.dxbl-grid table.dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td {
    background: color-mix(in srgb, currentColor 12%, transparent) !important;
}

.participant-appointments-grid--scoped.dxbl-grid .dxbl-grid-table > thead > tr > th,
.participant-appointments-grid--scoped.dxbl-grid .dxbl-grid-table > tbody > tr > td {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

@media (max-width: 768px) {
    .participant-appointments-toolbar,
    .participant-appointments-grid .dxbl-grid-toolbar .participant-appointments-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .participant-appointments-toolbar__settings,
    .participant-appointments-toolbar__actions {
        width: 100%;
    }
}