/* =====================================================================
   Edit panel — the wide right-hand panel that replaces modal edit
   dialogs (framework component EditPanelHost; sizes from PanelSize). It pushes the page aside on desktop (so the list being
   edited stays in view), overlays on small screens, and can expand to
   full width. It sits below MudBlazor popovers (1200) so selects and
   date pickers inside it open on top, and below dialogs (1400) so
   confirmations do too.
   ===================================================================== */

:root {
    --bo-edit-width: 600px;
    --bo-edit-wide-width: 760px;
}

.bo-edit-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(var(--bo-edit-width), 100%);
    z-index: 1150;
    display: flex;
    flex-direction: column;
    background-color: var(--bo-surface-solid);
    border-left: 1px solid var(--bo-border-strong);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.08);
    animation: bo-edit-panel-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

    .bo-edit-panel.is-wide {
        width: min(var(--bo-edit-wide-width), 100%);
    }

    .bo-edit-panel.is-expanded {
        width: 100%;
    }

@keyframes bo-edit-panel-in {
    from {
        transform: translateX(24px);
        opacity: 0;
    }
}

.bo-edit-panel__head {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 50px;
    padding: 6px 10px 6px 16px;
    border-bottom: 1px solid var(--bo-border);
    background-color: var(--bo-surface-muted);
}

.bo-edit-panel__titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.bo-edit-panel__subtitle {
    font-size: 0.72rem;
    color: var(--bo-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo-edit-panel__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bo-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Unsaved-changes marker next to the title. */
.bo-edit-panel__dirty {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background-color: var(--bo-hub-warn, #8A5300);
    vertical-align: middle;
}

.bo-edit-panel__spacer {
    flex: 1;
}

/* PanelForm: the EditForm fills the panel so the footer stays pinned. */
.bo-panel-form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Two-column field grid for panel forms; one column on narrow panels. */
.bo-panel-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

    .bo-panel-fields > .is-full {
        grid-column: 1 / -1;
    }

@media (max-width: 599.98px) {
    .bo-panel-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bo-edit-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.bo-edit-panel__content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.bo-edit-panel__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bo-edit-panel__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--bo-border);
    background-color: var(--bo-surface-solid);
}

.bo-edit-panel__note {
    font-size: 0.75rem;
    color: var(--bo-text-muted);
}

/* Sections inside an editor: a titled, bordered block. */
.bo-edit-section {
    border: 1px solid var(--bo-border);
    border-radius: var(--bo-radius-lg);
    overflow: hidden;
}

.bo-edit-section__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 4px 8px 4px 12px;
    background-color: var(--bo-surface-muted);
    border-bottom: 1px solid var(--bo-border);
    font-size: 0.82rem;
    font-weight: 600;
}

.bo-edit-section__body {
    padding: 10px 12px;
}

.bo-edit-hint {
    font-size: 0.75rem;
    color: var(--bo-text-muted);
}

/* Push the page aside while the panel is open (desktop). */
.mud-main-content.bo-edit-pushed {
    margin-right: min(var(--bo-edit-width), 100%);
}

.mud-main-content.bo-edit-pushed--wide {
    margin-right: min(var(--bo-edit-wide-width), 100%);
}

.mud-main-content.bo-edit-pushed--expanded {
    margin-right: 0;
}

@media (max-width: 959.98px) {
    .bo-edit-panel {
        width: 100%;
    }

    .mud-main-content.bo-edit-pushed {
        margin-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-edit-panel {
        animation: none;
    }
}

/* Focus lands on the panel itself only for a moment (edit-panel.js moves it to the first field). */
.bo-edit-panel:focus {
    outline: none;
}