/* Per-caller restyling of BobsComponents ModalSheet sheets (SheetClass). Plain global CSS on purpose: a
   Blazor scoped ::deep rule needs an ancestor carrying the page's scope attribute, and the package's root
   element doesn't get one, so scoped rules can't reach the sheet. Every selector is a compound of the
   package's .bob-modal and a BobFit-only class, so nothing here leaks to other modals. Callers set the
   documented --bob-modal-* variables where they exist (docs/CSS-CONTRACT.md in BobsComponents). */

/* ---- WorkoutItemList: item editor ---- */
/* Full-screen on mobile (so there's room to scroll and actually read the fields, per the user
   report that the old cramped inline row was "whack"), a centered dialog on desktop. Close/Save
   live in a header that's structurally outside the scrollable body - not just CSS-sticky - so
   they're always reachable regardless of scroll position. Shell (backdrop/sheet/header wiring,
   back-button handling) is the BobsComponents ModalSheet's now; the --bob-modal-* variables below
   override its default bottom-sheet sizing, and the compound `.bob-modal.item-edit-modal` selector
   carries the structural overrides (fixed, full-bleed, flex column). */
.bob-modal.item-edit-modal {
    --bob-modal-max-width: none;
    --bob-modal-max-height: none;
    --bob-modal-padding: 0;
    --bob-modal-radius: 0;
    --bob-modal-bg: var(--surface-strong);
    position: fixed;
    inset: 0;
    width: auto;
    overflow: hidden;
    border: none;
    display: flex;
    flex-direction: column;
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}

.bob-modal.item-edit-modal .bob-modal__header {
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--surface-border);
    flex-shrink: 0;
}

.bob-modal.item-edit-modal .bob-modal__body {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.25rem 1.1rem calc(2rem + env(safe-area-inset-bottom, 0px));
}

/* ---- TrainerCalendar: slot editor and day picker ---- */
.bob-modal.trainer-cal-slot-sheet {
    --bob-modal-max-width: 22rem;
    --bob-modal-padding: 1.25rem;
}

@media (min-width: 640px) {
    .bob-modal.item-edit-modal {
        inset: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90vw;
        --bob-modal-max-width: 28rem;
        --bob-modal-radius: var(--radius-lg);
        --bob-modal-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.4);
        /* A fixed height, not just a max: the dialog is centered, so one that grows with its content
           (adding an area chip) would shift everything on screen every time. The body scrolls. */
        height: min(85vh, 46rem);
        height: min(85dvh, 46rem);
        border: 1px solid var(--surface-border);
    }
    .bob-modal.trainer-cal-day-sheet {
        --bob-modal-max-width: 28rem;
        --bob-modal-max-height: 85vh;
    }
    .trainer-cal-day-sheet .bob-modal__handle {
        display: none;
    }
}