.ahr-staff-schedules-page {
    min-width: 0;
    /* THE TOOLBAR HAS TO REFLOW ON THE WIDTH IT ACTUALLY HAS, NOT ON THE WINDOW'S.
       The assistant panel insets the app root by 22rem rather than resizing the window, so every
       `@media (max-width: …)` below still reads the full viewport while this page is 352px narrower.
       Measured with the panel open at 1366: the toolbar's grid minimums come to 790px plus 36px of
       gaps, this container was 722px, and the segmented control overflowed to 1102 — putting
       Calendar, Month and Year underneath the panel where `elementFromPoint` returns the panel.
       -> Declaring the container lets the mirrored block further down answer the same question
       against 722 instead of 1366. Same pattern the patient home already uses (index.css `akhome`). */
    container-type: inline-size;
    container-name: schedulespage;
}

.ahr-staff-schedules-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.ahr-staff-schedules-header__text {
    flex: 1 1 auto;
    min-width: 0;
}

.ahr-staff-schedules-header__action {
    flex: none;
}

/* The deck's neutral notice: a limit stated plainly, not an alert. */
.ahr-staff-schedules-scope-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    /* The page body's own row gap spaces it from what follows; a margin here stacked on top of it. */
    margin-bottom: 0;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--sunken);
    color: var(--ink);
    font-size: 12.5px;
    line-height: 1.55;
}

.ahr-staff-schedules-scope-notice svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--ink-muted);
}

.ahr-staff-schedules-filter-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.ahr-staff-schedules-staff-filter {
    min-width: 320px;
}

.ahr-staff-schedules-staff-filter .components-custom-select-control,
.ahr-staff-schedules-staff-filter .components-custom-select-control__button {
    width: 100%;
    max-width: none;
}

.ahr-staff-schedules-search-filter {
    flex: 0 1 360px;
    min-width: 0;
}

.ahr-staff-schedules-search-filter .components-base-control,
.ahr-staff-schedules-search-filter .components-combobox-control,
.ahr-staff-schedules-search-filter .components-input-control__container {
    width: 100%;
    max-width: none;
}

.ahr-staff-schedules-search-filter .components-base-control {
    margin-bottom: 0;
}

.ahr-staff-schedules-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ahr-staff-schedules-toolbar__navigation,
.ahr-staff-schedules-toolbar__selectors {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ahr-staff-schedules-toolbar__navigation {
    gap: 7px;
}

.ahr-staff-schedules-toolbar__selectors {
    justify-content: flex-end;
}

.ahr-staff-schedules-toolbar__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    text-align: center;
}

/* Your own week, as the deck draws it: ‹ title › on one line, then Day / Week / Month. */
.ahr-staff-schedules-toolbar--own {
    grid-template-columns: minmax(0, 1fr) auto;
}

.ahr-staff-schedules-toolbar__week {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ahr-staff-schedules-toolbar--own .ahr-staff-schedules-toolbar__title {
    flex: 1;
    align-items: center;
    text-align: center;
}

/* Your own rows carry no dot: the deck leads each with its time and place. */
.ahr-staff-schedules-calendar-shell--own.ahr-staff-schedules-calendar-shell .fc .fc-list-event td.fc-list-event-graphic {
    display: none;
}

.ahr-staff-schedules-calendar-shell {
    --fc-list-event-dot-width: 9px;
    --fc-today-bg-color: transparent;
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--ak-card-radius);
    background: var(--surface);
    transition: opacity 0.15s ease;
}

.ahr-staff-schedules-calendar-shell.is-loading {
    opacity: 0.72;
}

.ahr-staff-schedules-calendar-shell .fc {
    color: var(--ink);
    font-size: 13px;
}

.ahr-staff-schedules-calendar-shell .fc-theme-standard td,
.ahr-staff-schedules-calendar-shell .fc-theme-standard th,
.ahr-staff-schedules-calendar-shell .fc-theme-standard .fc-scrollgrid {
    border-color: var(--line);
}

.ahr-staff-schedules-calendar-shell .fc .fc-col-header-cell-cushion,
.ahr-staff-schedules-calendar-shell .fc .fc-daygrid-day-number {
    color: var(--ink);
    text-decoration: none;
}

.ahr-staff-schedules-calendar-shell .fc .fc-col-header-cell {
    background: var(--sunken);
    font-weight: 400;
}

/* Today's column, as the shared Appointments calendar tints it. */
.ahr-staff-schedules-calendar-shell .fc .fc-day-today,
.ahr-staff-schedules-calendar-shell .fc .fc-col-header-cell.fc-day-today {
    background: var(--amber-soft);
}

.ahr-staff-schedules-calendar-shell .fc .fc-col-header-cell-cushion {
    padding: 6px;
    font-size: 12px;
    font-weight: 400;
}

.ahr-staff-schedules-calendar-shell .fc .fc-timegrid-slot-label-cushion {
    color: var(--ink-muted);
    font-size: 11px;
}

.ahr-staff-schedules-calendar-shell .fc .fc-list {
    border: 0;
}

.ahr-staff-schedules-calendar-shell .fc .fc-list-day-cushion {
    padding: 8px 14px;
    background: var(--sunken);
    color: var(--ink);
    font-size: 16px;
    font-weight: 400;
}

.ahr-staff-schedules-calendar-shell .fc .fc-list-day-text,
.ahr-staff-schedules-calendar-shell .fc .fc-list-day-side-text {
    color: var(--ink);
    text-decoration: none;
}

.ahr-staff-schedules-calendar-shell .fc .fc-list-event td {
    vertical-align: top;
    border-color: var(--line-soft);
}

.ahr-staff-schedules-calendar-shell .fc .fc-list-event-time {
    width: 130px;
    padding: 12px 16px 12px 14px;
    color: var(--ink-muted);
    font-size: 13px;
    white-space: nowrap;
}

.ahr-staff-schedules-calendar-shell .fc .fc-list-event-graphic {
    padding: 17px 0 11px;
}

.ahr-staff-schedules-calendar-shell .fc .fc-list-event-title {
    padding: 12px 14px;
}

.ahr-staff-schedules-calendar-shell .fc .fc-list-event-title a {
    color: inherit;
    text-decoration: none;
}

.ahr-staff-schedules-calendar-shell .fc .fc-list-event {
    cursor: pointer;
}

.ahr-staff-schedules-calendar-shell .fc .fc-list-event:hover td {
    background: var(--paper);
}

.ahr-staff-schedules-calendar-shell .fc .fc-list-empty {
    background: var(--surface);
    color: var(--ink-muted);
}

.ahr-staff-schedules-event {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.ahr-staff-schedules-event--list {
    width: 100%;
}

.ahr-staff-schedules-event__primary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

.ahr-staff-schedules-event__staff {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 14px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ahr-staff-schedules-event__time {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
}

.ahr-staff-schedules-event__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.35;
}

.ahr-staff-schedules-event__meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A list row wraps inside the card rather than running under its edge. */
.ahr-staff-schedules-event--list .ahr-staff-schedules-event__meta {
    flex-wrap: wrap;
    font-size: 12px;
}

/* Your own hours lead with the place, set as the practitioner deck sets it. */
.ahr-staff-schedules-event__staff--place {
    font-weight: 500;
    color: var(--ink-strong);
}

.ahr-staff-schedules-event--list .ahr-staff-schedules-event__staff,
.ahr-staff-schedules-event--list .ahr-staff-schedules-event__meta span {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* THE STATE IS A WORD IN ITS COLOUR, not a pill: "Scheduled", "On break", "Unavailable". The word
   carries the meaning; the colour only repeats it. */
.ahr-staff-schedules-calendar-shell .fc-timegrid-event,
.ahr-staff-schedules-calendar-shell .fc-daygrid-event {
    cursor: pointer;
}

/* A time block is a left rule on its tint, as the frame draws it. */
.ahr-staff-schedules-calendar-shell .fc .fc-timegrid-event {
    border-width: 0 0 0 3px;
    border-radius: 0;
    box-shadow: none;
}

.ahr-staff-schedules-calendar-shell .fc .fc-timegrid-event .fc-event-main {
    padding: 7px;
}


.ahr-staff-schedules-calendar-shell .fc-timegrid-event .ahr-staff-schedules-event__meta,
.ahr-staff-schedules-calendar-shell .fc-daygrid-event .ahr-staff-schedules-event__meta {
    color: inherit;
    font-size: 10px;
}

.ahr-staff-schedules-calendar-shell .fc-timegrid-event .ahr-staff-schedules-event__staff,
.ahr-staff-schedules-calendar-shell .fc-daygrid-event .ahr-staff-schedules-event__staff {
    color: inherit;
    font-size: 11px;
}

/* In a calendar cell the name gets its own whole line, then the state, then the site. */
.ahr-staff-schedules-event:not(.ahr-staff-schedules-event--list) .ahr-staff-schedules-event__primary-row {
    flex-direction: column;
    gap: 0;
}

.ahr-staff-schedules-event:not(.ahr-staff-schedules-event--list) .ahr-staff-schedules-event__staff,
.ahr-staff-schedules-event:not(.ahr-staff-schedules-event--list) .ahr-staff-schedules-event__meta span {
    overflow: visible;
    white-space: normal;
    overflow-wrap: break-word;
}

.ahr-staff-schedules-event:not(.ahr-staff-schedules-event--list) .ahr-staff-schedules-event__meta {
    flex-wrap: wrap;
}

.ahr-staff-schedules-event:not(.ahr-staff-schedules-event--list) .ahr-staff-schedules-status {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
}

@media (max-width: 1180px) {
    .ahr-staff-schedules-toolbar {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ahr-staff-schedules-toolbar__navigation {
        grid-column: 1;
        grid-row: 1;
    }

    .ahr-staff-schedules-toolbar__title {
        grid-column: 2;
        grid-row: 1;
        align-items: flex-end;
        text-align: right;
    }

    .ahr-staff-schedules-toolbar__selectors {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

/* The same layout asked of the container, which the assistant panel narrows without the window.
   826px leaves the one-row toolbar room for its title; 1180 here would fire with no panel open. */
@container schedulespage (max-width: 826px) {
    .ahr-staff-schedules-toolbar {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ahr-staff-schedules-toolbar__navigation {
        grid-column: 1;
        grid-row: 1;
    }

    .ahr-staff-schedules-toolbar__title {
        grid-column: 2;
        grid-row: 1;
        align-items: flex-end;
        text-align: right;
    }

    .ahr-staff-schedules-toolbar__selectors {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

@media (max-width: 640px) {
    .ahr-staff-schedules-header {
        flex-direction: column;
        gap: 8px;
    }

    .ahr-staff-schedules-search-filter {
        flex: 1 1 auto;
    }

    .ahr-staff-schedules-toolbar__selectors {
        flex-direction: column;
        align-items: stretch;
    }

    #akashic-health-records-patient-portal-root .ahr-staff-schedules-segmented-control {
        width: 100%;
    }

    #akashic-health-records-patient-portal-root .ahr-staff-schedules-segmented-control button {
        flex: 1 1 auto;
    }

    /* A list row wraps as the deck phone row does: time and dot, then the entry, then its state. */
    .ahr-staff-schedules-calendar-shell .fc .fc-list-table,
    .ahr-staff-schedules-calendar-shell .fc .fc-list-table tbody,
    .ahr-staff-schedules-calendar-shell .fc .fc-list-day,
    .ahr-staff-schedules-calendar-shell .fc .fc-list-day > th {
        display: block;
    }

    .ahr-staff-schedules-calendar-shell .fc .fc-list-event {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 14px;
        row-gap: 3px;
        padding: 11px 16px;
        border-top: 1px solid var(--line-soft);
    }

    .ahr-staff-schedules-calendar-shell .fc .fc-list-event td.fc-list-event-time,
    .ahr-staff-schedules-calendar-shell .fc .fc-list-event td.fc-list-event-graphic,
    .ahr-staff-schedules-calendar-shell .fc .fc-list-event td.fc-list-event-title {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
    }

    .ahr-staff-schedules-calendar-shell .fc .fc-list-event td.fc-list-event-time {
        flex: 0 0 130px;
        padding-top: 1px;
    }

    /* The dot sits level with the time, as the phone board draws it, not between the time and the name. */
    .ahr-staff-schedules-calendar-shell .fc .fc-list-event td.fc-list-event-graphic {
        display: flex;
        align-items: center;
        height: 19px;
        margin-top: 1px;
    }

    .ahr-staff-schedules-calendar-shell .fc .fc-list-event td.fc-list-event-title {
        flex: 1 1 100%;
        min-width: 0;
        padding-left: 26px;
    }

    .ahr-staff-schedules-calendar-shell .fc .fc-list-event:hover {
        background: var(--paper);
    }

    .ahr-staff-schedules-event--list .ahr-staff-schedules-event__primary-row {
        display: contents;
    }

    .ahr-staff-schedules-event--list .ahr-staff-schedules-event__meta {
        order: 1;
    }

    .ahr-staff-schedules-event--list .ahr-staff-schedules-status {
        order: 2;
        margin-top: 1px;
    }

    /* Your own hours' Bookable pill keeps its own width when the row stacks. */
    .ahr-staff-schedules-event--list .ahr-staff-schedules-status.ak-pill {
        align-self: flex-start;
    }
}

/* The spinner sits over the calendar while it reloads, so the calendar keeps its view and date. */
.ahr-staff-schedules-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 132px;
}

.ahr-staff-schedules-bookability {
    margin-bottom: 12px;
}

/* The HR schedules frame spaces the date bar; its controls are the shared buttons. */
#akashic-health-records-patient-portal-root .ahr-staff-schedules-toolbar {
  margin: 16px 0;
  gap: 14px;
}

/* Your own week sits one grid gap under the scope notice, as the deck draws it, not under three stacked spaces. */
#akashic-health-records-patient-portal-root .ahr-staff-schedules-scope-notice + .ahr-staff-schedules-toolbar--own {
  margin-top: 0;
}

/* Narrower, your own week's ‹ title › keeps a whole line above Day / Week / Month. */
@media (max-width: 1180px) {
    .ahr-staff-schedules-toolbar--own .ahr-staff-schedules-toolbar__week {
        grid-column: 1 / -1;
        grid-row: 1;
    }
}