/* /Components/AgendaCalendar.razor.rz.scp.css */
.agenda[b-ui31e43vjr] {
    display: grid;
    grid-template-columns: repeat(var(--agenda-cols, 1), minmax(0, 1fr));
    gap: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.agenda__column[b-ui31e43vjr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    min-width: 0;
    border-right: 1px solid var(--color-border);
}
.agenda__column:last-child[b-ui31e43vjr] { border-right: 0; }

.agenda__column.is-today[b-ui31e43vjr] {
    background: var(--color-primary-50);
}

.agenda__column.is-day-selected[b-ui31e43vjr] {
    background: var(--color-primary-100);
}

.agenda__column.is-today.is-day-selected[b-ui31e43vjr] {
    background: color-mix(in srgb, var(--color-primary-100) 60%, var(--color-primary-200) 40%);
}

.agenda__header[b-ui31e43vjr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.agenda__header__labels[b-ui31e43vjr] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.agenda__weekday[b-ui31e43vjr] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.agenda__date[b-ui31e43vjr] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.agenda__column.is-today .agenda__weekday[b-ui31e43vjr] {
    color: var(--color-primary-700);
}
.agenda__column.is-today .agenda__date[b-ui31e43vjr] {
    color: var(--color-primary-700);
}

/* Clickable header — the whole day header toggles selection when the parent
   passes DayClicked. Resets native <button> chrome, keeps the header layout. */
.agenda__header--clickable[b-ui31e43vjr] {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.agenda__header--clickable:focus-visible[b-ui31e43vjr] {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-primary-500);
}

.agenda__events[b-ui31e43vjr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 60px;
}

.agenda__empty[b-ui31e43vjr] {
    color: var(--color-text-subtle);
    font-style: italic;
    font-size: var(--font-size-sm);
    margin: var(--space-2) 0;
}

.agenda__incoming[b-ui31e43vjr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    text-decoration: none;
    transition: background-color var(--transition-fast);
}
.agenda__incoming:hover[b-ui31e43vjr] {
    background: color-mix(in srgb, var(--color-warning-bg) 60%, var(--color-warning) 5%);
    text-decoration: none;
}
.agenda__incoming-time[b-ui31e43vjr] {
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-semibold);
}
.agenda__incoming-label[b-ui31e43vjr] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Below 640px the multi-column grid collapses to a vertical stack of full-
   width day sections — the agenda still reads top-to-bottom. */
@media (max-width: 639px) {
    .agenda[b-ui31e43vjr] {
        grid-template-columns: 1fr;
    }
    .agenda__column[b-ui31e43vjr] {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }
    .agenda__column:last-child[b-ui31e43vjr] { border-bottom: 0; }
}
/* /Components/CalendarEventChip.razor.rz.scp.css */
/* The chip is now a flex-column card. With only the main link inside it
   reads as a single-row chip (Calendar's compact view); when the capacity
   bar or action row are added (Events), they stack below the main line. */

.calendar-chip[b-f5or5doldk] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary-500); /* overridden inline per-event */
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    line-height: 1.3;
    color: var(--color-text);
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}
.calendar-chip:hover[b-f5or5doldk] {
    box-shadow: var(--shadow-sm);
}

/* ----- Main row: the click target (link to event detail) ----- */
.calendar-chip__main[b-f5or5doldk] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color var(--transition-fast);
}
.calendar-chip__main:hover[b-f5or5doldk] {
    background: var(--color-surface-hover);
    text-decoration: none;
}
.calendar-chip__main:focus-visible[b-f5or5doldk] {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-primary-500);
}
.calendar-chip__main:active[b-f5or5doldk] { background: var(--color-surface-muted); }

.calendar-chip__time[b-f5or5doldk] {
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.calendar-chip__dot[b-f5or5doldk] {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.calendar-chip__type[b-f5or5doldk] {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.calendar-chip__crossday[b-f5or5doldk] {
    margin-left: auto;
    color: var(--color-warning);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}

/* ----- Capacity bar: how full the event is -----
   Severity tracks "occupied" fraction; the more booked, the redder.
   --ok       = success green (lots of room)
   --warning  = amber          (filling up)
   --critical = error red      (almost full / full) */
.calendar-chip__capacity[b-f5or5doldk] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-2) var(--space-1);
}
.calendar-chip__capacity-track[b-f5or5doldk] {
    flex: 1;
    height: 4px;
    background: var(--color-surface-muted);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.calendar-chip__capacity-fill[b-f5or5doldk] {
    height: 100%;
    background: var(--color-success);
    border-radius: var(--radius-pill);
    transition: width var(--transition-base);
}
.calendar-chip__capacity.is-warning  .calendar-chip__capacity-fill[b-f5or5doldk] { background: var(--color-warning); }
.calendar-chip__capacity.is-critical .calendar-chip__capacity-fill[b-f5or5doldk] { background: var(--color-error); }

.calendar-chip__capacity-label[b-f5or5doldk] {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    font-size: 10px;
    flex-shrink: 0;
}

/* ----- Action row: optional button per chip (Apply / Confirm / Withdraw) ----- */
.calendar-chip__action[b-f5or5doldk] {
    padding: var(--space-1) var(--space-2) var(--space-2);
    border-top: 1px solid var(--color-border);
}
.calendar-chip__action:empty[b-f5or5doldk] {
    /* If the caller's RenderFragment produces nothing (e.g., no action
       available on this event) the row would be a visible blank stripe.
       Hiding empty content keeps the chip clean. */
    display: none;
}
.calendar-chip__action[b-f5or5doldk]  .btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .calendar-chip__capacity-fill[b-f5or5doldk] { transition: none; }
}
/* /Components/InviteGuidePanel.razor.rz.scp.css */
.members__invite-grid[b-3ytw4hjkd4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.members__invite-flags[b-3ytw4hjkd4] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.toggle-field[b-3ytw4hjkd4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.members__invite-actions[b-3ytw4hjkd4] {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 640px) {
    .members__invite-grid[b-3ytw4hjkd4] {
        grid-template-columns: 1fr;
    }
}
/* /Components/MonthCalendar.razor.rz.scp.css */
/* Scoped styles for MonthCalendar. All values resolve to styleguide tokens. */

.month-calendar[b-j2gxjna4d2] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.month-calendar__header[b-j2gxjna4d2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-muted);
    border-bottom: 1px solid var(--color-border);
}

.month-calendar__title[b-j2gxjna4d2] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-transform: capitalize;
}

.month-calendar__nav[b-j2gxjna4d2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.month-calendar__weekdays[b-j2gxjna4d2] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background: var(--color-surface-muted);
    border-bottom: 1px solid var(--color-border);
}

.month-calendar__weekday[b-j2gxjna4d2] {
    padding: var(--space-2);
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.month-calendar__grid[b-j2gxjna4d2] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: minmax(72px, auto);
}

.month-calendar__day[b-j2gxjna4d2] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-2);
    gap: var(--space-1);
    background: var(--color-surface);
    border: 0;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    font: inherit;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    min-height: 72px;
    width: 100%;
}
/* Last cell in each row of 7 shouldn't have right border. */
.month-calendar__day:nth-child(7n)[b-j2gxjna4d2] { border-right: 0; }
/* Last row of 6 shouldn't have bottom border. */
.month-calendar__day:nth-last-child(-n+7)[b-j2gxjna4d2] { border-bottom: 0; }

.month-calendar__day:hover:not(.is-disabled)[b-j2gxjna4d2] {
    background: var(--color-surface-hover);
}
.month-calendar__day:focus-visible[b-j2gxjna4d2] {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-primary-500);
    z-index: 1;
}

.month-calendar__day.is-outside .month-calendar__day-number[b-j2gxjna4d2] {
    color: var(--color-text-subtle);
}
.month-calendar__day.is-outside[b-j2gxjna4d2] {
    background: var(--color-surface-muted);
}

.month-calendar__day.is-today .month-calendar__day-number[b-j2gxjna4d2] {
    color: var(--color-primary-600);
    font-weight: var(--font-weight-bold);
}
.month-calendar__day.is-today .month-calendar__day-number[b-j2gxjna4d2]::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-500);
    margin-left: var(--space-1);
    vertical-align: middle;
}

.month-calendar__day.is-selected[b-j2gxjna4d2] {
    background: var(--color-primary-50);
    box-shadow: inset 0 0 0 2px var(--color-primary-500);
    z-index: 1;
}

.month-calendar__day.is-disabled[b-j2gxjna4d2] {
    cursor: not-allowed;
    opacity: 0.65;
}

.month-calendar__day-header[b-j2gxjna4d2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
}

.month-calendar__day-number[b-j2gxjna4d2] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.month-calendar__day-content[b-j2gxjna4d2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    min-height: 0;
}

/* Compact layout for narrow viewports. */
@media (max-width: 519px) {
    .month-calendar__grid[b-j2gxjna4d2] {
        grid-auto-rows: minmax(54px, auto);
    }
    .month-calendar__day[b-j2gxjna4d2] {
        padding: var(--space-1);
        min-height: 54px;
    }
    .month-calendar__day-content[b-j2gxjna4d2] { font-size: 10px; }
}
/* /Components/MultiSelectDropdown.razor.rz.scp.css */
/* Scoped styles for MultiSelectDropdown. All values resolve to styleguide tokens. */

.multiselect[b-auraigf0cu] {
    position: relative;
    width: 100%;
}

.multiselect__trigger[b-auraigf0cu] {
    width: 100%;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}
.multiselect__trigger:hover[b-auraigf0cu] { border-color: var(--color-primary-200); }
.multiselect__trigger:focus-visible[b-auraigf0cu],
.multiselect.is-open .multiselect__trigger[b-auraigf0cu] {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: var(--shadow-focus);
}

.multiselect__label[b-auraigf0cu] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multiselect__chevron[b-auraigf0cu] {
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}
.multiselect.is-open .multiselect__chevron[b-auraigf0cu] { transform: rotate(180deg); }

.multiselect__backdrop[b-auraigf0cu] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-overlay) - 1);
    background: transparent;
}

.multiselect__panel[b-auraigf0cu] {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    z-index: var(--z-overlay);
    max-height: 320px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
}

.multiselect__option[b-auraigf0cu] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: background-color var(--transition-fast);
}
.multiselect__option:hover[b-auraigf0cu] { background: var(--color-surface-hover); }
.multiselect__option--all[b-auraigf0cu]  { font-weight: var(--font-weight-semibold); }

/* Optional color swatch placed between the checkbox and the label. */
.multiselect__option-swatch[b-auraigf0cu] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
}

.multiselect__divider[b-auraigf0cu] {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-1) 0;
}

.multiselect__empty[b-auraigf0cu] {
    padding: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
}
/* /Components/OrganizationMemberList.razor.rz.scp.css */
.members__table[b-78y2pen314] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-6);
}

.members__table th[b-78y2pen314],
.members__table td[b-78y2pen314] {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.members__col-flag[b-78y2pen314] {
    text-align: center;
    width: 6rem;
}

.members__table td.members__col-flag[b-78y2pen314] {
    text-align: center;
}

.members__email[b-78y2pen314] {
    color: var(--color-text-muted);
}

.members__actions[b-78y2pen314] {
    white-space: nowrap;
    text-align: right;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.members__pill[b-78y2pen314] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}
/* /Components/QuotaWidget.razor.rz.scp.css */
/* QuotaWidget — horizontal progress bars for year/month/week consumption.

   Colour signal:
     default      (0–99 %)  = brand blue   — work in progress
     is-complete  (100 %+)  = success green — target reached
*/

.quota-widget[b-7c4ornslvn] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--space-5);
}

.quota-widget__title[b-7c4ornslvn] {
    margin: 0 0 var(--space-3) 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.quota-widget__bars[b-7c4ornslvn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Shown in place of the bar grid when the organization has no quota configured
   (Year / Month / Week all unlimited). Keeps the widget on the page so the
   guide sees that quota tracking is "available, just uncapped". */
.quota-widget__unlimited[b-7c4ornslvn] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ----- Individual bar row ----- */
.quota-bar[b-7c4ornslvn] {
    --bar-color: var(--color-primary-500);

    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: var(--space-4);
}

.quota-bar.is-complete[b-7c4ornslvn] { --bar-color: var(--color-success); }

.quota-bar__label[b-7c4ornslvn] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quota-bar__track[b-7c4ornslvn] {
    height: 14px;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
    min-width: 0;
}

.quota-bar__fill[b-7c4ornslvn] {
    height: 100%;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--bar-color) 80%, white 0%) 0%,
        var(--bar-color) 100%);
    transition: width var(--transition-base);
    border-radius: var(--radius-pill);
    min-width: 2px; /* always show a sliver, even at 0 % */
}

.quota-bar__values[b-7c4ornslvn] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    min-width: 88px;
}

.quota-bar__percent[b-7c4ornslvn] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--bar-color);
    font-variant-numeric: tabular-nums;
}

.quota-bar__detail[b-7c4ornslvn] {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
}

/* Narrow viewports: tighten gaps and shrink the label column. */
@media (max-width: 519px) {
    .quota-bar[b-7c4ornslvn] {
        grid-template-columns: 60px 1fr auto;
        gap: var(--space-3);
    }
    .quota-bar__values[b-7c4ornslvn] { min-width: 64px; }
    .quota-bar__percent[b-7c4ornslvn] { font-size: var(--font-size-sm); }
}

@media (prefers-reduced-motion: reduce) {
    .quota-bar__fill[b-7c4ornslvn] { transition: none; }
}
/* /Layout/AccountBar.razor.rz.scp.css */
.account-bar[b-vo2hns7uyr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    gap: var(--space-3);
}

.account-bar__organization[b-vo2hns7uyr] {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.account-bar__user[b-vo2hns7uyr] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
}

.account-bar__greeting[b-vo2hns7uyr] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    /* Hide on very narrow screens so the organization dropdown keeps its width. */
    display: none;
}

@media (min-width: 480px) {
    .account-bar__greeting[b-vo2hns7uyr] { display: inline; }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Mobile-first: stack vertically; bottom nav floats; footer hidden. */
.app-shell[b-koiad5goiv] {
    min-height: 100vh;
    background: var(--color-bg);
    display: grid;
    grid-template-areas:
        "topbar"
        "content"
        "bottomnav";
    grid-template-rows: var(--layout-topbar-height) 1fr var(--layout-bottomnav-height);
    grid-template-columns: 1fr;
}

.app-shell__sidebar[b-koiad5goiv] {
    /* Hidden on mobile; surfaced as bottom nav instead. */
    display: none;
}

.app-shell__topbar[b-koiad5goiv] {
    grid-area: topbar;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    z-index: var(--z-topbar);
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    padding: 0 var(--layout-gutter);
}

.app-shell__content[b-koiad5goiv] {
    grid-area: content;
    overflow-y: auto;
    padding: var(--space-5) var(--layout-gutter);
    /* Leave breathing room above the floating bottom nav. */
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0));
}

.app-shell__content-inner[b-koiad5goiv] {
    max-width: var(--layout-content-max);
    margin: 0 auto;
    width: 100%;
}

.app-shell__bottomnav[b-koiad5goiv] {
    grid-area: bottomnav;
    position: sticky;
    bottom: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    z-index: var(--z-bottomnav);
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.04);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* The footer is a desktop-only element; bottom-nav covers branding space on mobile. */
.app-shell__footer[b-koiad5goiv] {
    display: none;
}

/* Desktop: sidebar visible, bottom nav hidden, footer pinned bottom-right. */
@media (min-width: 768px) {
    .app-shell[b-koiad5goiv] {
        grid-template-areas:
            "sidebar topbar"
            "sidebar content"
            "sidebar footer";
        grid-template-rows: var(--layout-topbar-height) 1fr var(--layout-footer-height);
        grid-template-columns: var(--layout-sidebar-width) 1fr;
    }

    .app-shell__sidebar[b-koiad5goiv] {
        grid-area: sidebar;
        display: block;
        background: var(--color-surface);
        border-right: 1px solid var(--color-border);
        height: 100vh;
        position: sticky;
        top: 0;
        overflow-y: auto;
        z-index: var(--z-sidebar);
    }

    .app-shell__bottomnav[b-koiad5goiv] {
        display: none;
    }

    .app-shell__content[b-koiad5goiv] {
        padding: var(--space-8) var(--layout-gutter);
    }

    .app-shell__footer[b-koiad5goiv] {
        grid-area: footer;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        padding: 0 var(--layout-gutter);
        position: sticky;
        bottom: 0;
        z-index: var(--z-topbar);
    }

    .app-shell__footer-logo[b-koiad5goiv] {
        height: 20px;
        width: 160px;
        max-width: 100%;
        background: var(--brand-logo) center / contain no-repeat;
    }
}

/* ----- Print: strip the app shell so save-as-PDF outputs only the page's
   body content. Pages opt their own non-essential elements out via their
   own scoped @media print rules. */
@media print {
    .app-shell[b-koiad5goiv] {
        display: block;
        min-height: 0;
        background: transparent;
    }
    .app-shell__sidebar[b-koiad5goiv],
    .app-shell__topbar[b-koiad5goiv],
    .app-shell__bottomnav[b-koiad5goiv],
    .app-shell__footer[b-koiad5goiv] {
        display: none !important;
    }
    .app-shell__content[b-koiad5goiv] {
        overflow: visible;
        padding: 0;
    }
    .app-shell__content-inner[b-koiad5goiv] {
        max-width: none;
        margin: 0;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* --- Sidebar variant (desktop) ------------------------------------------- */
.nav-menu--sidebar[b-cc1yj4lc74] {
    display: flex;
    flex-direction: column;
    padding: var(--space-5) var(--space-3) var(--space-3);
    height: 100%;
    gap: var(--space-3);
}

/* Brand block at the top of the sidebar (icon + title + version). */
.nav-menu__brand[b-cc1yj4lc74] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.nav-menu__brand-icon[b-cc1yj4lc74] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.nav-menu__brand-text[b-cc1yj4lc74] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}
.nav-menu__brand-title[b-cc1yj4lc74] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: 1.2;
}
.nav-menu__brand-version[b-cc1yj4lc74] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
}

.nav-menu__list[b-cc1yj4lc74] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu__item[b-cc1yj4lc74] { width: 100%; }

[b-cc1yj4lc74] .nav-menu__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-menu__icon[b-cc1yj4lc74] {
    display: inline-flex;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}
.nav-menu__icon[b-cc1yj4lc74]  svg {
    width: 100%;
    height: 100%;
}

/* ----- Primary tiles: stacked icon + text, button-like --------------------- */
.nav-menu__list--primary[b-cc1yj4lc74] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.nav-menu__link--primary[b-cc1yj4lc74] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast);
}
.nav-menu__link--primary:hover[b-cc1yj4lc74] {
    background: var(--color-surface-hover);
    color: var(--color-text);
    text-decoration: none;
}
.nav-menu__link--primary.active[b-cc1yj4lc74] {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    box-shadow: inset 0 0 0 1px var(--color-primary-200);
}
.nav-menu__link--primary:focus-visible[b-cc1yj4lc74] {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.nav-menu__link--primary .nav-menu__icon[b-cc1yj4lc74] {
    width: 26px;
    height: 26px;
}

/* ----- Secondary row: icon-only, evenly spread at the bottom -------------- */
.nav-menu__list--secondary[b-cc1yj4lc74] {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding-top: var(--space-3);
    margin-top: auto;
    border-top: 1px solid var(--color-border);
    gap: 0;
}
.nav-menu__list--secondary .nav-menu__item[b-cc1yj4lc74] {
    width: auto;
    flex: 0 0 auto;
}

.nav-menu__link--secondary[b-cc1yj4lc74] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background-color var(--transition-fast),
                color var(--transition-fast);
}
.nav-menu__link--secondary:hover[b-cc1yj4lc74] {
    background: var(--color-surface-hover);
    color: var(--color-text);
    text-decoration: none;
}
.nav-menu__link--secondary.active[b-cc1yj4lc74] {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}
.nav-menu__link--secondary:focus-visible[b-cc1yj4lc74] {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.nav-menu__link--secondary .nav-menu__icon[b-cc1yj4lc74] {
    width: 22px;
    height: 22px;
}

/* --- Bottom-bar variant (mobile) ----------------------------------------- */
.nav-menu--bottombar[b-cc1yj4lc74] {
    height: 100%;
}
.nav-menu--bottombar .nav-menu__brand[b-cc1yj4lc74] {
    display: none;
}
.nav-menu--bottombar .nav-menu__list[b-cc1yj4lc74] {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    height: 100%;
    gap: 0;
}
.nav-menu--bottombar .nav-menu__item[b-cc1yj4lc74] {
    flex: 1;
}
.nav-menu--bottombar[b-cc1yj4lc74]  .nav-menu__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2);
    border-radius: 0;
    font-size: var(--font-size-xs);
    line-height: 1.1;
    height: 100%;
    color: var(--color-text-muted);
    text-align: center;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.nav-menu--bottombar[b-cc1yj4lc74]  .nav-menu__link.active {
    background: transparent;
    color: var(--color-primary-600);
}
.nav-menu--bottombar .nav-menu__icon[b-cc1yj4lc74] {
    width: 24px;
    height: 24px;
}
/* /Layout/OrganizationSelect.razor.rz.scp.css */
.organization-select[b-3xn54611q5] {
    min-height: 36px;
    max-width: 260px;
    padding: 0 var(--space-3);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}
.organization-select:hover[b-3xn54611q5]  { border-color: var(--color-primary-200); }
.organization-select:focus-visible[b-3xn54611q5] {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: var(--shadow-focus);
}

.organization-select__single[b-3xn54611q5] {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--color-surface-muted);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

/* Below 480px shrink the dropdown a touch to keep the user-actions visible. */
@media (max-width: 479px) {
    .organization-select[b-3xn54611q5] { max-width: 160px; }
}
/* /Pages/Events/EventDetail.razor.rz.scp.css */
/* Event-detail summary card: two-column table of label / value rows,
   capped by an action footer. The capacity bar mirrors the agenda chip's
   bar (same severity thresholds and palette) so the two surfaces read as
   one feature. */

.event-detail__card[b-zobgemumlj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: var(--space-4) 0;
}

.event-detail__table[b-zobgemumlj] {
    width: 100%;
    border-collapse: collapse;
}

.event-detail__table th[b-zobgemumlj],
.event-detail__table td[b-zobgemumlj] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
}

.event-detail__table tr:last-child th[b-zobgemumlj],
.event-detail__table tr:last-child td[b-zobgemumlj] {
    border-bottom: none;
}

.event-detail__table th[b-zobgemumlj] {
    width: 30%;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.event-detail__resources[b-zobgemumlj] {
    list-style: none;
    margin: 0;
    padding: 0;
}
.event-detail__resources > li + li[b-zobgemumlj] {
    margin-top: var(--space-1);
}

.event-detail__dot[b-zobgemumlj] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill);
    margin-right: var(--space-2);
    vertical-align: middle;
}

/* ----- Capacity bar (mirrors .calendar-chip__capacity) ----- */
.event-detail__capacity[b-zobgemumlj] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.event-detail__capacity-track[b-zobgemumlj] {
    flex: 1;
    height: 6px;
    background: var(--color-surface-muted);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.event-detail__capacity-fill[b-zobgemumlj] {
    height: 100%;
    background: var(--color-success);
    border-radius: var(--radius-pill);
    transition: width var(--transition-base);
}
.event-detail__capacity.is-warning  .event-detail__capacity-fill[b-zobgemumlj] { background: var(--color-warning); }
.event-detail__capacity.is-critical .event-detail__capacity-fill[b-zobgemumlj] { background: var(--color-error); }

.event-detail__capacity-label[b-zobgemumlj] {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

/* ----- Action footer ----- */
.event-detail__actions[b-zobgemumlj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.event-detail__actions-secondary[b-zobgemumlj],
.event-detail__actions-primary[b-zobgemumlj] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
    .event-detail__capacity-fill[b-zobgemumlj] { transition: none; }
}

/* ----- Print: keep only the event-detail card.
   The Back-to-list anchor (page's first <a>), the card's action footer
   (Apply / iCal / PDF buttons), and the Assigned Guides card are all hidden.
   `print-color-adjust: exact` on the capacity bar overrides Chrome's default
   "no backgrounds" so the orange fill survives Save-as-PDF.
   The page (and the @page rule) is sized A4 portrait with tight margins so
   the card always fits on a single sheet. */
@page {
    size: A4 portrait;
    margin: 12mm 15mm;
}

@media print {
    a.btn.btn--secondary[b-zobgemumlj] {
        display: none;
    }

    .event-detail__card[b-zobgemumlj] {
        border: 1px solid var(--color-border);
        box-shadow: none;
        margin: 0;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .event-detail__card + .event-detail__card[b-zobgemumlj] {
        /* Second card is Assigned Guides — not part of the printout. */
        display: none;
    }

    .event-detail__actions[b-zobgemumlj] {
        display: none;
    }

    .event-detail__dot[b-zobgemumlj] {
        display: none;
    }

    .event-detail__capacity-track[b-zobgemumlj],
    .event-detail__capacity-fill[b-zobgemumlj] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* /Pages/Profile/Profile.razor.rz.scp.css */
/* First and Last name share a row; each takes half the section width. The
   row collapses to a stack on narrow viewports so neither input gets too
   cramped. */
.profile-form__row[b-5t3zatirhe] {
    display: flex;
    gap: var(--space-4);
}

.profile-form__row > .form-field[b-5t3zatirhe] {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 480px) {
    .profile-form__row[b-5t3zatirhe] {
        flex-direction: column;
        gap: 0;
    }
}

/* Save (primary) sits flush right; Change password (secondary) sits on the
   left, so the two actions read as "cancel-style ↔ commit". */
.profile-form__actions[b-5t3zatirhe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

/* Stack the organization-card children with a consistent vertical rhythm so the
   role pills and the quota widget aren't crammed together. */
.profile-organization[b-5t3zatirhe] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.profile-organization__header[b-5t3zatirhe] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Neutral pill for the customer number; mirrors `.organization-permissions li` but
   uses the muted greyscale palette so it reads as metadata, not a role. */
.profile-organization__pill[b-5t3zatirhe] {
    padding: var(--space-1) var(--space-3);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-medium);
}
/* /Pages/Settings.razor.rz.scp.css */
/* ----- Admin-email multi-input list -----
   Each row is an email input + remove button; rows stack with a small gap. */
.settings-organization__emails[b-zcrmuppg1o] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.settings-organization__add-email[b-zcrmuppg1o] {
    /* "+ Add email" button sits below the rows; the h2 below it brings its
       own top margin so we only need a gap above this button. */
    margin-top: 0;
}

/* The "Organization settings" h2 sits between the emails area and the table.
   Reset the table's own top margin so the heading provides all the spacing. */
.settings-organization__table-heading[b-zcrmuppg1o] {
    margin-top: var(--space-6);
}

.settings-organization__email-row[b-zcrmuppg1o] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* The email rows live outside a `.form-field` wrapper now that the section
   uses an <h2> instead of an inline label, so the form-field's input styling
   no longer cascades. Re-apply the same baseline locally. */
.settings-organization__email-row input[b-zcrmuppg1o] {
    flex: 1;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.settings-organization__email-row input:hover[b-zcrmuppg1o] {
    border-color: var(--color-primary-200);
}

.settings-organization__email-row input:focus[b-zcrmuppg1o] {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: var(--shadow-focus);
}

/* ----- 3-column settings table -----
   Section name (rowspan) — Description — Toggle. */
.settings-organization__table[b-zcrmuppg1o] {
    width: 100%;
    border-collapse: collapse;
}

.settings-organization__table th[b-zcrmuppg1o],
.settings-organization__table td[b-zcrmuppg1o] {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.settings-organization__table tr:last-child th[b-zcrmuppg1o],
.settings-organization__table tr:last-child td[b-zcrmuppg1o] {
    border-bottom: none;
}

.settings-organization__section[b-zcrmuppg1o] {
    width: 20%;
    min-width: 140px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--font-size-sm);
    border-right: 1px solid var(--color-border);
}

.settings-organization__description[b-zcrmuppg1o] {
    color: var(--color-text);
}

.settings-organization__toggle-cell[b-zcrmuppg1o] {
    width: 80px;
    text-align: right;
}

/* The toggle-switch widget itself now lives in the global stylesheet
   (app.css) so it can be shared with the organization member controls. */

/* ----- Form footer: Reset (left, secondary) ↔ Save (right, primary) ----- */
.settings-organization__actions[b-zcrmuppg1o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    flex-wrap: wrap;
}