/* _content/CSI.UI/Components/Buttons/CsiButton.razor.rz.scp.css */
.csi-button[b-l062qy0ocw] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--csi-space-2);
  min-height: var(--csi-touch-target);
  padding: 0 var(--csi-space-4);
  border: 1px solid transparent;
  border-radius: var(--csi-radius-md);
  font-family: inherit;
  font-size: var(--csi-text-base);
  font-weight: var(--csi-weight-semibold);
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}

.csi-button__content[b-l062qy0ocw] {
  display: inline-flex;
  align-items: center;
  gap: var(--csi-space-2);
}

.csi-button[aria-busy="true"] .csi-button__content[b-l062qy0ocw] {
  opacity: 0;
}

.csi-button__spinner[b-l062qy0ocw] {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

@media (prefers-reduced-motion: no-preference) {
  .csi-button__spinner .csi-icon[b-l062qy0ocw] {
    animation: csi-button-spin-b-l062qy0ocw 800ms linear infinite;
  }
}

@keyframes csi-button-spin-b-l062qy0ocw {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .csi-button[b-l062qy0ocw] {
    transition: background-color var(--csi-duration-fast) var(--csi-ease-out),
                color var(--csi-duration-fast) var(--csi-ease-out),
                border-color var(--csi-duration-fast) var(--csi-ease-out),
                box-shadow var(--csi-duration-fast) var(--csi-ease-out);
  }
}

.csi-button:focus-visible[b-l062qy0ocw] {
  outline: none;
  box-shadow: var(--csi-focus-ring);
}

.csi-button--primary[b-l062qy0ocw] {
  background: var(--csi-action-primary);
  color: var(--csi-action-primary-fg);
}
.csi-button--primary:hover[b-l062qy0ocw] {
  background: var(--csi-action-primary-hover);
}

.csi-button--secondary[b-l062qy0ocw] {
  background: var(--csi-action-secondary);
  color: var(--csi-action-secondary-fg);
  border-color: var(--csi-action-secondary-border);
}
.csi-button--secondary:hover[b-l062qy0ocw] {
  background: var(--csi-action-secondary-hover);
}

.csi-button--tertiary[b-l062qy0ocw] {
  background: var(--csi-action-tertiary);
  color: var(--csi-action-tertiary-fg);
}
.csi-button--tertiary:hover[b-l062qy0ocw] {
  background: var(--csi-action-tertiary-hover);
}

.csi-button--ghost[b-l062qy0ocw] {
  background: var(--csi-action-ghost);
  color: var(--csi-action-ghost-fg);
}
.csi-button--ghost:hover[b-l062qy0ocw] {
  background: var(--csi-action-ghost-hover);
}

.csi-button--destructive[b-l062qy0ocw] {
  background: var(--csi-action-danger);
  color: var(--csi-action-danger-fg);
}
.csi-button--destructive:hover[b-l062qy0ocw] {
  background: var(--csi-action-danger-hover);
}

.csi-button--sm[b-l062qy0ocw] {
  padding: 0 var(--csi-space-3);
  font-size: var(--csi-text-sm);
}

.csi-button--lg[b-l062qy0ocw] {
  min-height: 48px;
  padding: 0 var(--csi-space-6);
  font-size: var(--csi-text-lg);
}

.csi-button--full-width[b-l062qy0ocw] {
  width: 100%;
}

.csi-button:disabled[b-l062qy0ocw] {
  opacity: 0.5;
  cursor: not-allowed;
}
/* _content/CSI.UI/Components/Buttons/CsiButtonGroup.razor.rz.scp.css */
.csi-button-group[b-toubjsxbsh] { display: inline-flex; }
.csi-button-group[b-toubjsxbsh]  > * { border-radius: 0; }
.csi-button-group[b-toubjsxbsh]  > *:first-child { border-radius: var(--csi-radius-md) 0 0 var(--csi-radius-md); }
.csi-button-group[b-toubjsxbsh]  > *:last-child  { border-radius: 0 var(--csi-radius-md) var(--csi-radius-md) 0; }
.csi-button-group[b-toubjsxbsh]  > *:not(:first-child) { margin-left: -1px; }
.csi-button-group--vertical[b-toubjsxbsh] { flex-direction: column; }
.csi-button-group--vertical[b-toubjsxbsh]  > * { border-radius: 0; }
.csi-button-group--vertical[b-toubjsxbsh]  > *:first-child { border-radius: var(--csi-radius-md) var(--csi-radius-md) 0 0; }
.csi-button-group--vertical[b-toubjsxbsh]  > *:last-child  { border-radius: 0 0 var(--csi-radius-md) var(--csi-radius-md); }
.csi-button-group--vertical[b-toubjsxbsh]  > *:not(:first-child) { margin-left: 0; margin-top: -1px; }
/* _content/CSI.UI/Components/Buttons/CsiIconButton.razor.rz.scp.css */
.csi-icon-button[b-u704v606vv] {
  width: var(--csi-touch-target);
  height: var(--csi-touch-target);
  border: 0;
  border-radius: var(--csi-radius-md);
  background: transparent;
  color: var(--csi-fg-secondary);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.csi-icon-button:hover[b-u704v606vv] { background: var(--csi-bg-page); color: var(--csi-fg-primary); }
.csi-icon-button:focus-visible[b-u704v606vv] { outline: 0; box-shadow: var(--csi-focus-ring); }
.csi-icon-button[disabled][b-u704v606vv] { opacity: 0.4; cursor: not-allowed; }
/* _content/CSI.UI/Components/DatePicker/CsiDatePicker.razor.rz.scp.css */
.csi-date-picker[b-76k32ogm8u] { position: relative; display: inline-block; }

.csi-date-picker__trigger[b-76k32ogm8u] {
    display: inline-flex;
    align-items: center;
    gap: var(--csi-space-2);
    background: var(--csi-bg-surface);
    border: 1px solid var(--csi-border-strong);
    border-radius: var(--csi-radius-md);
    padding: 0 var(--csi-space-3);
    min-height: var(--csi-touch-target);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--csi-text-base);
    color: var(--csi-fg-primary);
}

.csi-date-picker__trigger:focus-visible[b-76k32ogm8u] {
    outline: 0;
    box-shadow: var(--csi-focus-ring);
    border-color: var(--csi-action-primary);
}

.csi-date-picker--disabled .csi-date-picker__trigger[b-76k32ogm8u] {
    opacity: 0.5;
    cursor: not-allowed;
}

.csi-date-picker__popover[b-76k32ogm8u] {
    position: absolute;
    top: calc(100% + var(--csi-space-1));
    left: 0;
    background: var(--csi-bg-raised);
    border: 1px solid var(--csi-border-default);
    border-radius: var(--csi-radius-md);
    box-shadow: var(--csi-elevation-overlay);
    padding: var(--csi-space-3);
    /* Above modal (500) so we render correctly when hosted inside
       a CsiModal with AllowOverflow=true. Falls back to dropdown
       stacking outside of modal contexts. */
    z-index: var(--csi-z-tooltip);
    min-width: 280px;
}

.csi-date-picker__nav[b-76k32ogm8u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--csi-space-2);
    margin-bottom: var(--csi-space-2);
}

.csi-date-picker__month-label[b-76k32ogm8u] {
    flex: 1;
    text-align: center;
    font-weight: var(--csi-weight-semibold);
}

.csi-date-picker__weekdays[b-76k32ogm8u] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    font-size: var(--csi-text-xs);
    color: var(--csi-fg-muted);
    text-align: center;
    padding: var(--csi-space-1) 0;
}

.csi-date-picker__grid[b-76k32ogm8u] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.csi-date-picker__day[b-76k32ogm8u] {
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--csi-radius-sm);
    min-height: 36px;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--csi-text-sm);
    color: var(--csi-fg-primary);
    position: relative;
}

.csi-date-picker__day:hover:not([disabled]):not(.csi-date-picker__day--selected)[b-76k32ogm8u] {
    background: var(--csi-bg-page);
}

.csi-date-picker__day:focus-visible[b-76k32ogm8u] {
    outline: 0;
    box-shadow: var(--csi-focus-ring);
}

.csi-date-picker__day--out-of-month[b-76k32ogm8u] {
    color: var(--csi-fg-muted);
    opacity: 0.5;
}

.csi-date-picker__day--disabled[b-76k32ogm8u] {
    color: var(--csi-fg-muted);
    opacity: 0.4;
    cursor: not-allowed;
}

.csi-date-picker__day--selected[b-76k32ogm8u] {
    background: var(--csi-action-primary);
    color: var(--csi-action-primary-fg);
}

.csi-date-picker__day--in-range[b-76k32ogm8u] {
    background: var(--csi-color-brand-50);
}

.csi-date-picker__day--today[b-76k32ogm8u]::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--csi-action-primary);
}

.csi-date-picker__day--selected.csi-date-picker__day--today[b-76k32ogm8u]::after {
    background: var(--csi-action-primary-fg);
}

.csi-date-picker__footer[b-76k32ogm8u] {
    display: flex;
    gap: var(--csi-space-2);
    margin-top: var(--csi-space-2);
    padding-top: var(--csi-space-2);
    border-top: 1px solid var(--csi-border-default);
}

.csi-date-picker__terms[b-76k32ogm8u] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.csi-date-picker__term[b-76k32ogm8u] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: var(--csi-space-2) var(--csi-space-3);
    background: transparent;
    border: 0;
    border-radius: var(--csi-radius-sm);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.csi-date-picker__term:hover[b-76k32ogm8u] {
    background: var(--csi-bg-page);
}

.csi-date-picker__term:focus-visible[b-76k32ogm8u] {
    outline: 0;
    box-shadow: var(--csi-focus-ring);
}

.csi-date-picker__term--selected[b-76k32ogm8u] {
    background: color-mix(in srgb, var(--csi-action-primary) 10%, transparent);
}

.csi-date-picker__term-label[b-76k32ogm8u] {
    font-weight: var(--csi-weight-semibold);
    color: var(--csi-fg-primary);
}

.csi-date-picker__term-range[b-76k32ogm8u] {
    font-size: var(--csi-text-sm);
    color: var(--csi-fg-muted);
}
/* _content/CSI.UI/Components/Display/CsiAvatar.razor.rz.scp.css */
.csi-avatar[b-uvnredvvyx] {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  background: var(--csi-color-brand-200);
  color: var(--csi-color-neutral-0);
  font-weight: var(--csi-weight-semibold);
  text-align: center;
  flex-shrink: 0;
  position: relative;
}
.csi-avatar img[b-uvnredvvyx] { width: 100%; height: 100%; object-fit: cover; display: block; }
.csi-avatar__initials[b-uvnredvvyx] { display: grid; place-items: center; height: 100%; width: 100%; }
.csi-avatar--sm[b-uvnredvvyx] { width: 32px; height: 32px; font-size: var(--csi-text-xs); line-height: 32px; }
.csi-avatar--md[b-uvnredvvyx] { width: 40px; height: 40px; font-size: var(--csi-text-sm); line-height: 40px; }
.csi-avatar--lg[b-uvnredvvyx] { width: 56px; height: 56px; font-size: var(--csi-text-lg); line-height: 56px; }
/* _content/CSI.UI/Components/Display/CsiBadge.razor.rz.scp.css */
.csi-badge[b-jw066v3fqp] {
  display: inline-flex; align-items: center;
  padding: 0.15rem 0.5rem;
  font-size: var(--csi-text-xs);
  font-weight: var(--csi-weight-semibold);
  border-radius: var(--csi-radius-full);
  line-height: 1.4;
  white-space: nowrap;
}
.csi-badge--neutral[b-jw066v3fqp] { background: var(--csi-color-neutral-100); color: var(--csi-color-neutral-900); }
.csi-badge--info[b-jw066v3fqp]    { background: var(--csi-color-info-50);    color: var(--csi-color-info-700); }
.csi-badge--success[b-jw066v3fqp] { background: var(--csi-color-success-50); color: var(--csi-color-success-700); }
.csi-badge--warning[b-jw066v3fqp] { background: var(--csi-color-warning-50); color: var(--csi-color-warning-700); }
.csi-badge--danger[b-jw066v3fqp]  { background: var(--csi-color-danger-50);  color: var(--csi-color-danger-700); }
/* _content/CSI.UI/Components/Display/CsiBarComparison.razor.rz.scp.css */
/* CsiBarComparison — HTML/CSS planned-vs-spent rows. */

.csi-bar-comparison[b-g5ch4zxehg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.csi-bar-comparison__row[b-g5ch4zxehg] {
    display: grid;
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(0, 130px);
    gap: var(--csi-space-4, 1rem);
    align-items: center;
    font-size: 0.8125rem;
}

@media (max-width: 720px) {
    .csi-bar-comparison__row[b-g5ch4zxehg] {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.csi-bar-comparison__label[b-g5ch4zxehg] {
    color: var(--csi-fg-primary, #1b1b1b);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.csi-bar-comparison__track[b-g5ch4zxehg] {
    position: relative;
    height: 12px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: var(--csi-fg-secondary, #4a4b4d);
    border-radius: var(--csi-radius-full, 9999px);
    overflow: hidden;
}

.csi-bar-comparison__spent-fill[b-g5ch4zxehg] {
    position: absolute;
    inset: 0;
    border-radius: var(--csi-radius-full, 9999px);
    transition: width 200ms ease;
}
.csi-bar-comparison__spent-fill--good[b-g5ch4zxehg] { background: #2c8a4a; }
.csi-bar-comparison__spent-fill--warn[b-g5ch4zxehg] { background: #c47f00; }
.csi-bar-comparison__spent-fill--over[b-g5ch4zxehg] { background: #c63838; }

.csi-bar-comparison__amount[b-g5ch4zxehg] {
    text-align: right;
    color: var(--csi-fg-primary, #1b1b1b);
    font-variant-numeric: tabular-nums;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.csi-bar-comparison__planned-amount[b-g5ch4zxehg] {
    color: var(--csi-fg-secondary, #4a4b4d);
    font-weight: 400;
}
.csi-bar-comparison__overage[b-g5ch4zxehg] {
    color: #c63838;
    font-size: 0.6875rem;
    font-weight: 600;
}
/* _content/CSI.UI/Components/Display/CsiBreadcrumbs.razor.rz.scp.css */
.csi-breadcrumbs__list[b-jjt0f7op5d] {
  display: flex; flex-wrap: wrap;
  gap: var(--csi-space-1);
  list-style: none; padding: 0; margin: 0;
  font-size: var(--csi-text-sm);
}
.csi-breadcrumbs__item[b-jjt0f7op5d] {
  display: inline-flex; align-items: center;
  gap: var(--csi-space-1);
  color: var(--csi-fg-muted);
}
.csi-breadcrumbs__item a[b-jjt0f7op5d] {
  color: var(--csi-fg-muted);
  text-decoration: none;
}
.csi-breadcrumbs__item a:hover[b-jjt0f7op5d] { text-decoration: underline; }
.csi-breadcrumbs__item [aria-current="page"][b-jjt0f7op5d] {
  color: var(--csi-fg-primary);
  font-weight: var(--csi-weight-semibold);
}
/* _content/CSI.UI/Components/Display/CsiCard.razor.rz.scp.css */
.csi-card[b-63klov0dwx] {
  background: var(--csi-bg-surface);
  border-radius: var(--csi-radius-lg);
  display: block;
  text-align: left;
  font-family: inherit;
  color: var(--csi-fg-primary);
  width: 100%;
}

.csi-card--default[b-63klov0dwx] {
  border: 1px solid var(--csi-border-default);
  box-shadow: var(--csi-elevation-raised);
}

.csi-card--outline[b-63klov0dwx] {
  border: 1px solid var(--csi-border-default);
  box-shadow: none;
}

.csi-card--elevated[b-63klov0dwx] {
  border: 0;
  box-shadow: var(--csi-elevation-overlay);
}

.csi-card__header[b-63klov0dwx],
.csi-card__footer[b-63klov0dwx] {
  padding: var(--csi-space-3) var(--csi-space-6);
}

.csi-card__header[b-63klov0dwx] {
  border-bottom: 1px solid var(--csi-border-default);
}

.csi-card__footer[b-63klov0dwx] {
  border-top: 1px solid var(--csi-border-default);
}

.csi-card__body[b-63klov0dwx] {
  padding: var(--csi-space-6);
}

.csi-card--density-compact .csi-card__header[b-63klov0dwx],
.csi-card--density-compact .csi-card__footer[b-63klov0dwx] {
  padding: var(--csi-space-2) var(--csi-space-3);
}

.csi-card--density-compact .csi-card__body[b-63klov0dwx] {
  padding: var(--csi-space-3);
}

.csi-card--interactive[b-63klov0dwx] {
  cursor: pointer;
  transition: box-shadow var(--csi-duration-fast) var(--csi-ease-out);
  border-width: 1px;
  border-style: solid;
  border-color: var(--csi-border-default);
}

.csi-card--interactive:hover[b-63klov0dwx] {
  box-shadow: var(--csi-elevation-overlay);
}

.csi-card--interactive:focus-visible[b-63klov0dwx] {
  outline: 0;
  box-shadow: var(--csi-focus-ring);
}

button.csi-card[b-63klov0dwx] {
  font-size: var(--csi-text-base);
}

@media (prefers-reduced-motion: reduce) {
  .csi-card--interactive[b-63klov0dwx] {
    transition: none;
  }
}
/* _content/CSI.UI/Components/Display/CsiDonutChart.razor.rz.scp.css */
/* CsiDonutChart — donut + legend layout. */

.csi-donut[b-65157p11wa] {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(0, 1.2fr);
    gap: var(--csi-space-4, 1rem);
    align-items: center;
}

.csi-donut__chart[b-65157p11wa] {
    position: relative;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}
.csi-donut__chart svg[b-65157p11wa] {
    width: 100%;
    height: 100%;
    display: block;
}

/* Center label overlay — fixed rem sizes so the text never scales with
   the SVG container (the bug that made the value render at ~80px). */
.csi-donut__center[b-65157p11wa] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}
.csi-donut__center-value[b-65157p11wa] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--csi-fg-primary, #1b1b1b);
    font-variant-numeric: tabular-nums;
}
.csi-donut__center-label[b-65157p11wa] {
    font-size: 0.6875rem;
    color: var(--csi-fg-secondary, #4a4b4d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-top: 0.125rem;
}

.csi-donut__legend[b-65157p11wa] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8125rem;
}
.csi-donut__legend li[b-65157p11wa] {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: var(--csi-space-2, 0.5rem);
    align-items: center;
}
.csi-donut__legend-swatch[b-65157p11wa] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
}
.csi-donut__legend-label[b-65157p11wa] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--csi-fg-primary, #1b1b1b);
}
.csi-donut__legend-pct[b-65157p11wa] {
    color: var(--csi-fg-secondary, #4a4b4d);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .csi-donut[b-65157p11wa] { grid-template-columns: 1fr; }
}
/* _content/CSI.UI/Components/Display/CsiHeatmap.razor.rz.scp.css */
/* CsiHeatmap — accent-tinted heatmap using CSS grid. The
   --heatmap-intensity custom property is set per-cell from C# and
   drives the background opacity. App-accent color seeds the hue so
   each consumer's brand reads through. */

.csi-heatmap[b-rb63cmqezt] {
    display: inline-flex;
    flex-direction: column;
    border: 1px solid var(--csi-border-subtle);
    border-radius: var(--csi-radius-sm, 6px);
    overflow: hidden;
    background: var(--csi-surface-default);
    font-size: 0.8125rem;
}

.csi-heatmap__row[b-rb63cmqezt] {
    display: flex;
}
.csi-heatmap__row--header[b-rb63cmqezt] {
    background: var(--csi-surface-subtle);
}

.csi-heatmap__corner[b-rb63cmqezt],
.csi-heatmap__col-header[b-rb63cmqezt],
.csi-heatmap__row-header[b-rb63cmqezt],
.csi-heatmap__cell[b-rb63cmqezt] {
    min-width: 60px;
    min-height: 36px;
    padding: 4px 6px;
    border-right: 1px solid var(--csi-border-subtle);
    border-bottom: 1px solid var(--csi-border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.csi-heatmap__corner[b-rb63cmqezt],
.csi-heatmap__row-header[b-rb63cmqezt] {
    background: var(--csi-surface-subtle);
    color: var(--csi-fg-default);
    font-weight: 500;
    min-width: 140px;
    justify-content: flex-start;
    text-align: left;
}
.csi-heatmap__col-header[b-rb63cmqezt] {
    color: var(--csi-fg-default);
    font-weight: 500;
}

.csi-heatmap__cell[b-rb63cmqezt] {
    /* Mix the app-accent into the surface background based on the
       per-cell --heatmap-intensity (0..1). Apps that haven't defined
       --csi-action-primary fall back to a neutral gray. */
    background: color-mix(
        in srgb,
        var(--csi-action-primary, #4f6bed) calc(var(--heatmap-intensity, 0) * 80%),
        var(--csi-surface-default)
    );
    color: var(--csi-fg-default);
    transition: background 80ms ease;
    position: relative;
}

.csi-heatmap__cell:hover[b-rb63cmqezt] {
    outline: 2px solid var(--csi-action-primary, #4f6bed);
    outline-offset: -2px;
    z-index: 1;
}

.csi-heatmap__cell-label[b-rb63cmqezt] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--csi-fg-default);
    /* Darken text on dense cells so it stays legible. */
    mix-blend-mode: difference;
    filter: invert(1) grayscale(1) contrast(2);
}
/* _content/CSI.UI/Components/Display/CsiIcon.razor.rz.scp.css */
.csi-icon[b-efzsti55sk] {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.csi-icon--sm[b-efzsti55sk] { width: 14px; height: 14px; }
.csi-icon--md[b-efzsti55sk] { width: 18px; height: 18px; }
.csi-icon--lg[b-efzsti55sk] { width: 22px; height: 22px; }
/* _content/CSI.UI/Components/Display/CsiImage.razor.rz.scp.css */
.csi-image[b-d97rn1ly9z] { display: block; max-width: 100%; height: auto; }
/* _content/CSI.UI/Components/Display/CsiLineChart.razor.rz.scp.css */
/* CsiLineChart — SVG plot area with HTML-overlay axis labels. */

.csi-line-chart[b-jtw72hbly2] {
    display: flex;
    flex-direction: column;
    gap: var(--csi-space-3, 0.75rem);
    flex: 1 1 auto;
    min-height: 0;
}

.csi-line-chart__plot[b-jtw72hbly2] {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 240px;
}
@media (max-width: 720px) {
    .csi-line-chart__plot[b-jtw72hbly2] { min-height: 200px; }
}
.csi-line-chart__plot svg[b-jtw72hbly2] {
    width: 100%;
    height: 100%;
    display: block;
}

.csi-line-chart__grid[b-jtw72hbly2] {
    stroke: color-mix(in srgb, currentColor 14%, transparent);
    stroke-width: 1;
    color: var(--csi-fg-secondary, #4a4b4d);
    vector-effect: non-scaling-stroke;
}

.csi-line-chart__today-line[b-jtw72hbly2] {
    stroke: var(--csi-fg-secondary, #4a4b4d);
    stroke-width: 1;
    stroke-dasharray: 2, 4;
    opacity: 0.55;
    vector-effect: non-scaling-stroke;
}

.csi-line-chart__plot path[b-jtw72hbly2] {
    vector-effect: non-scaling-stroke;
}

/* Y-axis labels — positioned by % of plot height. */
.csi-line-chart__y-labels[b-jtw72hbly2] {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 56px; /* matches viewBox mL */
    pointer-events: none;
}
.csi-line-chart__y-label[b-jtw72hbly2] {
    position: absolute;
    right: 8px;
    transform: translateY(-50%);
    font-size: 0.6875rem;
    color: var(--csi-fg-secondary, #4a4b4d);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* X-axis labels — positioned by % of plot width. */
.csi-line-chart__x-labels[b-jtw72hbly2] {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 36px; /* matches viewBox mB */
    pointer-events: none;
}
.csi-line-chart__x-label[b-jtw72hbly2] {
    position: absolute;
    bottom: 8px;
    transform: translateX(-50%);
    font-size: 0.6875rem;
    color: var(--csi-fg-secondary, #4a4b4d);
    white-space: nowrap;
}

/* "today" badge above the vertical guide. */
.csi-line-chart__today-badge[b-jtw72hbly2] {
    position: absolute;
    top: 4px;
    transform: translateX(-50%);
    font-size: 0.625rem;
    color: var(--csi-fg-secondary, #4a4b4d);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--csi-bg-surface, #fff);
    border-radius: var(--csi-radius-sm, 4px);
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    pointer-events: none;
}

.csi-line-chart__legend[b-jtw72hbly2] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--csi-space-4, 1rem);
    font-size: 0.8125rem;
}
.csi-line-chart__legend li[b-jtw72hbly2] {
    display: flex;
    align-items: center;
    gap: var(--csi-space-2, 0.5rem);
    color: var(--csi-fg-primary, #1b1b1b);
}
.csi-line-chart__legend-swatch[b-jtw72hbly2] {
    display: inline-block;
    width: 18px;
    height: 3px;
    border-radius: 2px;
}
/* _content/CSI.UI/Components/Display/CsiStackedBar.razor.rz.scp.css */
/* CsiStackedBar — single full-width horizontal allocation strip. */

.csi-stacked-bar[b-65por1m5x4] {
    display: flex;
    flex-direction: column;
    gap: var(--csi-space-4, 1rem);
}

.csi-stacked-bar__total[b-65por1m5x4] {
    display: flex;
    align-items: baseline;
    gap: var(--csi-space-2, 0.5rem);
}
.csi-stacked-bar__total-value[b-65por1m5x4] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--csi-fg-primary, #1b1b1b);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.csi-stacked-bar__total-label[b-65por1m5x4] {
    font-size: 0.75rem;
    color: var(--csi-fg-secondary, #4a4b4d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.csi-stacked-bar__bar[b-65por1m5x4] {
    display: flex;
    height: 28px;
    width: 100%;
    border-radius: var(--csi-radius-md, 6px);
    overflow: hidden;
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: var(--csi-fg-secondary, #4a4b4d);
}
.csi-stacked-bar__seg[b-65por1m5x4] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    overflow: hidden;
    transition: filter 120ms ease;
    min-width: 2px;
}
.csi-stacked-bar__seg:hover[b-65por1m5x4] {
    filter: brightness(1.08);
}
.csi-stacked-bar__seg + .csi-stacked-bar__seg[b-65por1m5x4] {
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}
.csi-stacked-bar__seg-pct[b-65por1m5x4] {
    padding: 0 0.4rem;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

.csi-stacked-bar__legend[b-65por1m5x4] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--csi-space-2, 0.5rem) var(--csi-space-4, 1rem);
    font-size: 0.8125rem;
}
.csi-stacked-bar__legend li[b-65por1m5x4] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto auto;
    gap: var(--csi-space-2, 0.5rem);
    align-items: center;
}
.csi-stacked-bar__legend-swatch[b-65por1m5x4] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
}
.csi-stacked-bar__legend-label[b-65por1m5x4] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--csi-fg-primary, #1b1b1b);
}
.csi-stacked-bar__legend-amount[b-65por1m5x4] {
    color: var(--csi-fg-primary, #1b1b1b);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.csi-stacked-bar__legend-pct[b-65por1m5x4] {
    color: var(--csi-fg-secondary, #4a4b4d);
    font-variant-numeric: tabular-nums;
    min-width: 3em;
    text-align: right;
}
/* _content/CSI.UI/Components/Display/CsiTabs.razor.rz.scp.css */
.csi-tabs[b-1904x8hl1r] { display: flex; flex-direction: column; }
.csi-tabs--vertical[b-1904x8hl1r] { flex-direction: row; }

.csi-tabs__tablist[b-1904x8hl1r] {
    display: flex;
    gap: var(--csi-space-1);
    border-bottom: 1px solid var(--csi-border-default);
}

.csi-tabs--vertical .csi-tabs__tablist[b-1904x8hl1r] {
    flex-direction: column;
    border-bottom: 0;
    border-right: 1px solid var(--csi-border-default);
}

.csi-tabs__tab[b-1904x8hl1r] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: var(--csi-space-3) var(--csi-space-4);
    font-family: inherit;
    font-size: var(--csi-text-base);
    color: var(--csi-fg-muted);
    min-height: var(--csi-touch-target);
    position: relative;
}

.csi-tabs__tab:hover[b-1904x8hl1r] { color: var(--csi-fg-primary); }
.csi-tabs__tab:focus-visible[b-1904x8hl1r] { outline: 0; box-shadow: var(--csi-focus-ring); }

/* Underline variant */
.csi-tabs--underline .csi-tabs__tab--active[b-1904x8hl1r] {
    color: var(--csi-action-primary);
    font-weight: var(--csi-weight-semibold);
}

.csi-tabs--underline .csi-tabs__tab--active[b-1904x8hl1r]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--csi-action-primary);
}

/* Pill variant */
.csi-tabs--pill .csi-tabs__tablist[b-1904x8hl1r] { border-bottom: 0; gap: var(--csi-space-2); }
.csi-tabs--pill .csi-tabs__tab[b-1904x8hl1r] { border-radius: var(--csi-radius-full); }
.csi-tabs--pill .csi-tabs__tab--active[b-1904x8hl1r] {
    background: var(--csi-action-primary);
    color: var(--csi-action-primary-fg);
}

/* Segmented variant */
.csi-tabs--segmented .csi-tabs__tablist[b-1904x8hl1r] {
    border: 1px solid var(--csi-border-default);
    border-radius: var(--csi-radius-md);
    padding: var(--csi-space-1);
    display: inline-flex;
    gap: 0;
}

.csi-tabs--segmented .csi-tabs__tab[b-1904x8hl1r] {
    border-radius: var(--csi-radius-sm);
    padding: var(--csi-space-2) var(--csi-space-4);
    min-height: 36px;
}

.csi-tabs--segmented .csi-tabs__tab--active[b-1904x8hl1r] {
    background: var(--csi-action-primary);
    color: var(--csi-action-primary-fg);
}

.csi-tabs__panel[b-1904x8hl1r] { padding: var(--csi-space-6) 0; }
.csi-tabs--vertical .csi-tabs__panel[b-1904x8hl1r] { padding: 0 var(--csi-space-6); flex: 1; }
.csi-tabs__panel--hidden[b-1904x8hl1r] { display: none; }
/* _content/CSI.UI/Components/Feedback/CsiAlert.razor.rz.scp.css */
.csi-alert[b-1gh7icjthf] {
  display: flex;
  align-items: center;
  gap: var(--csi-space-3);
  padding: var(--csi-space-3) var(--csi-space-4);
  border-radius: var(--csi-radius-md);
  border-left-width: 4px;
  border-left-style: solid;
  font-size: var(--csi-text-base);
  line-height: var(--csi-leading-normal);
}

.csi-alert > svg:first-child[b-1gh7icjthf] {
  flex-shrink: 0;
}

.csi-alert__content[b-1gh7icjthf] {
  flex: 1;
  min-width: 0;
}

.csi-alert__title[b-1gh7icjthf] {
  font-weight: var(--csi-weight-semibold);
  margin-bottom: var(--csi-space-1);
}

.csi-alert__message[b-1gh7icjthf] {
  color: inherit;
}

.csi-alert--info[b-1gh7icjthf] {
  background: var(--csi-color-info-50);
  border-left-color: var(--csi-color-info-500);
  color: var(--csi-color-info-700);
}

.csi-alert--success[b-1gh7icjthf] {
  background: var(--csi-color-success-50);
  border-left-color: var(--csi-color-success-500);
  color: var(--csi-color-success-700);
}

.csi-alert--warning[b-1gh7icjthf] {
  background: var(--csi-color-warning-50);
  border-left-color: var(--csi-color-warning-500);
  color: var(--csi-color-warning-700);
}

.csi-alert--danger[b-1gh7icjthf] {
  background: var(--csi-color-danger-50);
  border-left-color: var(--csi-color-danger-500);
  color: var(--csi-color-danger-700);
}
/* _content/CSI.UI/Components/Feedback/CsiEmptyState.razor.rz.scp.css */
.csi-empty-state[b-kls0qnjw42] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--csi-space-12) var(--csi-space-6);
  gap: var(--csi-space-2);
  color: var(--csi-fg-muted);
}
.csi-empty-state__icon[b-kls0qnjw42] {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--csi-color-neutral-100);
  color: var(--csi-fg-muted);
  display: grid; place-items: center;
  margin-bottom: var(--csi-space-2);
}
.csi-empty-state__headline[b-kls0qnjw42] {
  margin: 0;
  font-size: var(--csi-text-lg);
  font-weight: var(--csi-weight-semibold);
  color: var(--csi-fg-primary);
}
.csi-empty-state__description[b-kls0qnjw42] {
  margin: 0;
  max-width: 360px;
  font-size: var(--csi-text-base);
  color: var(--csi-fg-muted);
}
.csi-empty-state__action[b-kls0qnjw42] {
  margin-top: var(--csi-space-4);
}
/* _content/CSI.UI/Components/Feedback/CsiSkeleton.razor.rz.scp.css */
.csi-skeleton[b-636gnvm04v] {
  display: inline-block;
  background: linear-gradient(90deg,
    var(--csi-color-neutral-100) 0%,
    var(--csi-color-neutral-200) 50%,
    var(--csi-color-neutral-100) 100%);
  background-size: 200% 100%;
  animation: csi-skeleton-shimmer-b-636gnvm04v 1.4s ease-in-out infinite;
  border-radius: var(--csi-radius-sm);
}
.csi-skeleton--rect[b-636gnvm04v] { width: 100%; height: 1rem; }
.csi-skeleton--text[b-636gnvm04v] { display: block; height: 0.875rem; margin-bottom: var(--csi-space-1); width: 100%; }
.csi-skeleton-text > .csi-skeleton:last-child[b-636gnvm04v] { width: 70%; }
.csi-skeleton--avatar[b-636gnvm04v] { border-radius: 50%; }
.csi-skeleton--avatar-sm[b-636gnvm04v] { width: 32px; height: 32px; }
.csi-skeleton--avatar-md[b-636gnvm04v] { width: 40px; height: 40px; }
.csi-skeleton--avatar-lg[b-636gnvm04v] { width: 56px; height: 56px; }
@keyframes csi-skeleton-shimmer-b-636gnvm04v { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .csi-skeleton[b-636gnvm04v] { animation: none; } }
/* _content/CSI.UI/Components/Feedback/CsiSpinner.razor.rz.scp.css */
.csi-spinner[b-jivev22hen] {
  display: inline-block;
  border-style: solid;
  border-color: color-mix(in srgb, var(--csi-action-primary) 30%, transparent);
  border-top-color: var(--csi-action-primary);
  border-radius: 50%;
  animation: csi-spinner-rotate-b-jivev22hen 0.8s linear infinite;
}
.csi-spinner--sm[b-jivev22hen] { width: 14px; height: 14px; border-width: 2px; }
.csi-spinner--md[b-jivev22hen] { width: 20px; height: 20px; border-width: 2px; }
.csi-spinner--lg[b-jivev22hen] { width: 28px; height: 28px; border-width: 3px; }
@keyframes csi-spinner-rotate-b-jivev22hen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .csi-spinner[b-jivev22hen] { animation-duration: 2s; } }
/* _content/CSI.UI/Components/Feedback/CsiToast.razor.rz.scp.css */
.csi-toast[b-vb3m2x8xrr] {
  display: flex;
  align-items: flex-start;
  gap: var(--csi-space-3);
  padding: var(--csi-space-3) var(--csi-space-4);
  border-radius: var(--csi-radius-md);
  border-left: 4px solid;
  box-shadow: var(--csi-elevation-overlay);
  width: 360px;
  max-width: 92vw;
  font-size: var(--csi-text-base);
  line-height: var(--csi-leading-normal);
  animation: csi-toast-slide-b-vb3m2x8xrr var(--csi-duration-normal) var(--csi-ease-out);
}

.csi-toast__content[b-vb3m2x8xrr] {
  flex: 1;
  min-width: 0;
}

.csi-toast__title[b-vb3m2x8xrr] {
  font-weight: var(--csi-weight-semibold);
  margin-bottom: var(--csi-space-1);
}

.csi-toast--info[b-vb3m2x8xrr] {
  background: var(--csi-color-info-50);
  border-left-color: var(--csi-color-info-500);
  color: var(--csi-color-info-700);
}

.csi-toast--success[b-vb3m2x8xrr] {
  background: var(--csi-color-success-50);
  border-left-color: var(--csi-color-success-500);
  color: var(--csi-color-success-700);
}

.csi-toast--warning[b-vb3m2x8xrr] {
  background: var(--csi-color-warning-50);
  border-left-color: var(--csi-color-warning-500);
  color: var(--csi-color-warning-700);
}

.csi-toast--danger[b-vb3m2x8xrr] {
  background: var(--csi-color-danger-50);
  border-left-color: var(--csi-color-danger-500);
  color: var(--csi-color-danger-700);
}

@keyframes csi-toast-slide-b-vb3m2x8xrr {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .csi-toast[b-vb3m2x8xrr] {
    animation: none;
  }
}
/* _content/CSI.UI/Components/Feedback/CsiToastHost.razor.rz.scp.css */
.csi-toast-host[b-tss97v301x] {
  position: fixed;
  z-index: var(--csi-z-tooltip);
  display: flex;
  flex-direction: column;
  gap: var(--csi-space-2);
  pointer-events: none;
  padding: var(--csi-space-4);
  max-width: 100vw;
}

.csi-toast-host > *[b-tss97v301x] {
  pointer-events: auto;
}

.csi-toast-host--bottomright[b-tss97v301x] {
  right: 0;
  bottom: 0;
  align-items: flex-end;
}

.csi-toast-host--bottomleft[b-tss97v301x] {
  left: 0;
  bottom: 0;
  align-items: flex-start;
}

.csi-toast-host--topright[b-tss97v301x] {
  right: 0;
  top: 0;
  align-items: flex-end;
  flex-direction: column-reverse;
}

.csi-toast-host--topleft[b-tss97v301x] {
  left: 0;
  top: 0;
  align-items: flex-start;
  flex-direction: column-reverse;
}

.csi-toast-host--bottomcenter[b-tss97v301x] {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  align-items: center;
}

.csi-toast-host--topcenter[b-tss97v301x] {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  align-items: center;
  flex-direction: column-reverse;
}
/* _content/CSI.UI/Components/Feedback/CsiTooltip.razor.rz.scp.css */
.csi-tooltip-wrapper[b-qzxzhjfyea] { position: relative; display: inline-flex; }
.csi-tooltip[b-qzxzhjfyea] {
  position: absolute;
  background: var(--csi-color-neutral-900);
  color: var(--csi-color-neutral-0);
  padding: var(--csi-space-1) var(--csi-space-2);
  border-radius: var(--csi-radius-sm);
  font-size: var(--csi-text-xs);
  white-space: nowrap;
  z-index: var(--csi-z-tooltip);
  pointer-events: none;
  animation: csi-tooltip-fade-b-qzxzhjfyea var(--csi-duration-fast) var(--csi-ease-out);
}
.csi-tooltip--top[b-qzxzhjfyea]    { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: var(--csi-space-1); }
.csi-tooltip--bottom[b-qzxzhjfyea] { top: 100%; left: 50%; transform: translateX(-50%); margin-top: var(--csi-space-1); }
.csi-tooltip--left[b-qzxzhjfyea]   { right: 100%; top: 50%; transform: translateY(-50%); margin-right: var(--csi-space-1); }
.csi-tooltip--right[b-qzxzhjfyea]  { left: 100%; top: 50%; transform: translateY(-50%); margin-left: var(--csi-space-1); }
@keyframes csi-tooltip-fade-b-qzxzhjfyea { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .csi-tooltip[b-qzxzhjfyea] { animation: none; } }
/* _content/CSI.UI/Components/Forms/CsiCheckbox.razor.rz.scp.css */
.csi-checkbox[b-566nzndtq4] {
    display: inline-flex;
    align-items: center;
    gap: var(--csi-space-2);
    cursor: pointer;
    min-height: var(--csi-touch-target);
}

.csi-checkbox__box[b-566nzndtq4] {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--csi-border-strong);
    border-radius: var(--csi-radius-sm);
    display: inline-grid;
    place-items: center;
    background: var(--csi-bg-surface);
    flex-shrink: 0;
}

.csi-checkbox__input:checked + .csi-checkbox__box[b-566nzndtq4] {
    background: var(--csi-action-primary);
    border-color: var(--csi-action-primary);
}

.csi-checkbox__input:checked + .csi-checkbox__box[b-566nzndtq4]::after {
    content: '';
    width: 10px;
    height: 6px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: translateY(-1px) rotate(-45deg);
}

.csi-checkbox__input[data-indeterminate="true"] + .csi-checkbox__box[b-566nzndtq4] {
    background: var(--csi-action-primary);
    border-color: var(--csi-action-primary);
}

.csi-checkbox__input[data-indeterminate="true"] + .csi-checkbox__box[b-566nzndtq4]::after {
    content: '';
    width: 10px;
    height: 2px;
    background: white;
}

.csi-checkbox__input[b-566nzndtq4] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.csi-checkbox:focus-within .csi-checkbox__box[b-566nzndtq4] {
    box-shadow: var(--csi-focus-ring);
}

.csi-checkbox__label[b-566nzndtq4] {
    font-size: var(--csi-text-base);
    color: var(--csi-fg-primary);
}

.csi-checkbox--disabled[b-566nzndtq4] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* _content/CSI.UI/Components/Forms/CsiDateField.razor.rz.scp.css */
.csi-date-field[b-5lxhf6ubo4] { display: inline-block; }
/* _content/CSI.UI/Components/Forms/CsiFormField.razor.rz.scp.css */
.csi-form-field[b-e0zrzabpmw] {
  display: flex;
  flex-direction: column;
}

.csi-form-field__label[b-e0zrzabpmw] {
  display: block;
  margin-bottom: var(--csi-space-1);
  font-size: var(--csi-text-base);
  font-weight: var(--csi-weight-medium);
  color: var(--csi-fg-default);
  line-height: 1.4;
}

.csi-form-field__required[b-e0zrzabpmw] {
  margin-left: 0.2em;
  color: var(--csi-color-danger-500);
  font-weight: var(--csi-weight-semibold);
}

/* Screen-reader-only span for "required" — visually hidden, available to AT */
.csi-form-field__sr[b-e0zrzabpmw] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.csi-form-field__helper[b-e0zrzabpmw] {
  display: flex;
  align-items: flex-start;
  gap: var(--csi-space-1);
  margin-top: var(--csi-space-1);
  font-size: var(--csi-text-sm);
  color: var(--csi-fg-muted);
  line-height: 1.4;
}

.csi-form-field__error[b-e0zrzabpmw] {
  display: flex;
  align-items: flex-start;
  gap: var(--csi-space-1);
  margin-top: var(--csi-space-1);
  font-size: var(--csi-text-sm);
  color: var(--csi-color-danger-700);
  line-height: 1.4;
}

/* Error border state on slotted inputs — applied via a data attribute
   that CsiFormField adds to the wrapper div when HasError is true.
   Inner components also apply this via the HasError cascade. */
.csi-form-field--error :global(input)[b-e0zrzabpmw],
.csi-form-field--error :global(select)[b-e0zrzabpmw],
.csi-form-field--error :global(textarea)[b-e0zrzabpmw] {
  border-color: var(--csi-color-danger-500) !important;
}
/* _content/CSI.UI/Components/Forms/CsiNumberField.razor.rz.scp.css */
.csi-number-field[b-xsp4yn6vwn] {
  display: flex; align-items: center;
  background: var(--csi-bg-surface);
  border: 1px solid var(--csi-border-strong);
  border-radius: var(--csi-radius-md);
  padding: 0 var(--csi-space-3);
  min-height: var(--csi-touch-target);
}
.csi-number-field:focus-within[b-xsp4yn6vwn] { box-shadow: var(--csi-focus-ring); border-color: var(--csi-action-primary); }
.csi-number-field__input[b-xsp4yn6vwn] {
  flex: 1; min-width: 0;
  border: 0; outline: 0;
  background: transparent;
  padding: var(--csi-space-2) 0;
  font-family: var(--csi-font-sans);
  font-size: var(--csi-text-base);
  color: var(--csi-fg-primary);
}
.csi-number-field--invalid[b-xsp4yn6vwn] { border-color: var(--csi-color-danger-500); }
/* _content/CSI.UI/Components/Forms/CsiRadioGroup.razor.rz.scp.css */
.csi-radio-group[b-rfz6fvp1b1] {
    display: flex;
    gap: var(--csi-space-3);
}

.csi-radio-group--vertical[b-rfz6fvp1b1] {
    flex-direction: column;
}

.csi-radio-group--horizontal[b-rfz6fvp1b1] {
    flex-direction: row;
    flex-wrap: wrap;
}

.csi-radio[b-rfz6fvp1b1] {
    display: inline-flex;
    align-items: center;
    gap: var(--csi-space-2);
    cursor: pointer;
    min-height: var(--csi-touch-target);
}

.csi-radio__circle[b-rfz6fvp1b1] {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--csi-border-strong);
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: var(--csi-bg-surface);
    flex-shrink: 0;
}

.csi-radio__input:checked + .csi-radio__circle[b-rfz6fvp1b1] {
    border-color: var(--csi-action-primary);
}

.csi-radio__input:checked + .csi-radio__circle[b-rfz6fvp1b1]::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--csi-action-primary);
    border-radius: 50%;
}

.csi-radio__input[b-rfz6fvp1b1] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.csi-radio:focus-within .csi-radio__circle[b-rfz6fvp1b1] {
    box-shadow: var(--csi-focus-ring);
}

.csi-radio__label[b-rfz6fvp1b1] {
    font-size: var(--csi-text-base);
    color: var(--csi-fg-primary);
}

.csi-radio--disabled[b-rfz6fvp1b1] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* _content/CSI.UI/Components/Forms/CsiSelect.razor.rz.scp.css */
.csi-select[b-kg6q1mwqgi] {
    display: block;
    width: 100%;
    min-height: var(--csi-touch-target);
    padding: 0 var(--csi-space-3);
    border: 1px solid var(--csi-border-strong);
    border-radius: var(--csi-radius-md);
    background: var(--csi-bg-surface);
    color: var(--csi-fg-primary);
    font-family: var(--csi-font-sans);
    font-size: var(--csi-text-base);
    cursor: pointer;
}

.csi-select:focus[b-kg6q1mwqgi] {
    outline: 0;
    box-shadow: var(--csi-focus-ring);
    border-color: var(--csi-action-primary);
}

.csi-select[disabled][b-kg6q1mwqgi] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* _content/CSI.UI/Components/Forms/CsiTextArea.razor.rz.scp.css */
.csi-text-area[b-jfilrgy9rs] {
  background: var(--csi-bg-surface);
  border: 1px solid var(--csi-border-strong);
  border-radius: var(--csi-radius-md);
  padding: var(--csi-space-2) var(--csi-space-3);
}
.csi-text-area:focus-within[b-jfilrgy9rs] { box-shadow: var(--csi-focus-ring); border-color: var(--csi-action-primary); }
.csi-text-area__input[b-jfilrgy9rs] {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--csi-font-sans);
  font-size: var(--csi-text-base);
  color: var(--csi-fg-primary);
  resize: vertical;
  field-sizing: content;
}
.csi-text-area--invalid[b-jfilrgy9rs] { border-color: var(--csi-color-danger-500); }
/* _content/CSI.UI/Components/Forms/CsiTextField.razor.rz.scp.css */
.csi-text-field[b-1vi4lzwihy] {
  display: flex; align-items: center;
  background: var(--csi-bg-surface);
  border: 1px solid var(--csi-border-strong);
  border-radius: var(--csi-radius-md);
  padding: 0 var(--csi-space-3);
  min-height: var(--csi-touch-target);
}
.csi-text-field:focus-within[b-1vi4lzwihy] { box-shadow: var(--csi-focus-ring); border-color: var(--csi-action-primary); }
.csi-text-field__input[b-1vi4lzwihy] {
  flex: 1; min-width: 0;
  border: 0; outline: 0;
  background: transparent;
  padding: var(--csi-space-2) 0;
  font-family: var(--csi-font-sans);
  font-size: var(--csi-text-base);
  color: var(--csi-fg-primary);
}
.csi-text-field__prefix[b-1vi4lzwihy], .csi-text-field__suffix[b-1vi4lzwihy] {
  color: var(--csi-fg-muted);
  font-size: var(--csi-text-sm);
  white-space: nowrap;
}
.csi-text-field__prefix[b-1vi4lzwihy] { padding-right: var(--csi-space-2); }
.csi-text-field__suffix[b-1vi4lzwihy] { padding-left: var(--csi-space-2); }
.csi-text-field--invalid[b-1vi4lzwihy] { border-color: var(--csi-color-danger-500); }
/* _content/CSI.UI/Components/Forms/CsiToggle.razor.rz.scp.css */
.csi-toggle[b-p0vrvdr5j6] {
    display: inline-flex;
    align-items: center;
    gap: var(--csi-space-3);
    cursor: pointer;
    min-height: var(--csi-touch-target);
}

.csi-toggle--label-before[b-p0vrvdr5j6] {
    flex-direction: row;
}

.csi-toggle--label-after[b-p0vrvdr5j6] {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.csi-toggle__track[b-p0vrvdr5j6] {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--csi-color-neutral-200);
    border-radius: var(--csi-radius-full);
    flex-shrink: 0;
    transition: background var(--csi-duration-fast) var(--csi-ease-out);
}

.csi-toggle__track[b-p0vrvdr5j6]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--csi-color-neutral-0);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: left var(--csi-duration-fast) var(--csi-ease-out);
}

.csi-toggle__input:checked + .csi-toggle__track[b-p0vrvdr5j6] {
    background: var(--csi-action-primary);
}

.csi-toggle__input:checked + .csi-toggle__track[b-p0vrvdr5j6]::after {
    left: 18px;
}

.csi-toggle__input[b-p0vrvdr5j6] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.csi-toggle:focus-within .csi-toggle__track[b-p0vrvdr5j6] {
    box-shadow: var(--csi-focus-ring);
}

.csi-toggle__label[b-p0vrvdr5j6] {
    font-size: var(--csi-text-base);
    color: var(--csi-fg-primary);
}

.csi-toggle--disabled[b-p0vrvdr5j6] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .csi-toggle__track[b-p0vrvdr5j6],
    .csi-toggle__track[b-p0vrvdr5j6]::after {
        transition: none;
    }
}
/* _content/CSI.UI/Components/GranteePicker.razor.rz.scp.css */
.grantee-picker[b-p79dvjmwn9] { position: relative; }
.grantee-search[b-p79dvjmwn9] { width: 100%; padding: 0.5rem; box-sizing: border-box; }
.grantee-loading[b-p79dvjmwn9], .grantee-empty[b-p79dvjmwn9] {
    padding: 0.5rem;
    color: var(--csi-text-muted, #666);
    font-style: italic;
}
.grantee-results[b-p79dvjmwn9] {
    list-style: none;
    margin: 0; padding: 0;
    border: 1px solid var(--csi-border, #ddd);
    max-height: 16rem;
    overflow-y: auto;
}
.grantee-hit[b-p79dvjmwn9] {
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.grantee-hit:hover[b-p79dvjmwn9] { background: var(--csi-row-hover, #f5f5f5); }
.grantee-kind-badge[b-p79dvjmwn9] {
    text-transform: uppercase;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.2rem;
    background: var(--csi-tag-bg, #e0e0e0);
}
.grantee-hit-group .grantee-kind-badge[b-p79dvjmwn9] { background: var(--csi-tag-group-bg, #d0e7ff); }
.grantee-label[b-p79dvjmwn9] { font-weight: 500; }
.grantee-sublabel[b-p79dvjmwn9] { color: var(--csi-text-muted, #888); font-size: 0.85rem; }
/* _content/CSI.UI/Components/Overlays/CsiDialog.razor.rz.scp.css */
.csi-dialog__body[b-jq5fglbw3v] { display: flex; gap: var(--csi-space-4); align-items: flex-start; }
.csi-dialog__icon[b-jq5fglbw3v] { flex-shrink: 0; padding-top: var(--csi-space-1); }
.csi-dialog__icon--destructiveconfirm[b-jq5fglbw3v] { color: var(--csi-color-danger-500); }
.csi-dialog__icon--alert[b-jq5fglbw3v] { color: var(--csi-color-info-500); }
.csi-dialog__icon--confirm[b-jq5fglbw3v] { color: var(--csi-action-primary); }
.csi-dialog__message p[b-jq5fglbw3v] { margin: 0; }
/* _content/CSI.UI/Components/Overlays/CsiDrawer.razor.rz.scp.css */
.csi-drawer-backdrop[b-z8ip3ai06t] {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: var(--csi-z-modal-backdrop);
  animation: csi-drawer-backdrop-fade-b-z8ip3ai06t var(--csi-duration-normal) var(--csi-ease-out);
}

.csi-drawer[b-z8ip3ai06t] {
  position: fixed; top: 0; bottom: 0;
  background: var(--csi-bg-raised);
  box-shadow: var(--csi-elevation-overlay);
  z-index: var(--csi-z-modal);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.csi-drawer--right[b-z8ip3ai06t] {
  right: 0;
  animation: csi-drawer-slide-right-b-z8ip3ai06t var(--csi-duration-normal) var(--csi-ease-out);
}

.csi-drawer--left[b-z8ip3ai06t] {
  left: 0;
  animation: csi-drawer-slide-left-b-z8ip3ai06t var(--csi-duration-normal) var(--csi-ease-out);
}

.csi-drawer--sm[b-z8ip3ai06t] { width: 92vw; max-width: 300px; }
.csi-drawer--md[b-z8ip3ai06t] { width: 92vw; max-width: 400px; }
.csi-drawer--lg[b-z8ip3ai06t] { width: 92vw; max-width: 560px; }

.csi-drawer__header[b-z8ip3ai06t] {
  display: flex; align-items: center;
  gap: var(--csi-space-3);
  padding: var(--csi-space-4) var(--csi-space-6);
  border-bottom: 1px solid var(--csi-border-default);
}

.csi-drawer__title[b-z8ip3ai06t] {
  margin: 0; flex: 1; min-width: 0;
  font-size: var(--csi-text-xl);
  font-weight: var(--csi-weight-semibold);
  color: var(--csi-fg-primary);
}

.csi-drawer__body[b-z8ip3ai06t] {
  padding: var(--csi-space-6);
  overflow-y: auto; flex: 1;
  font-size: var(--csi-text-base); color: var(--csi-fg-primary);
}

.csi-drawer__footer[b-z8ip3ai06t] {
  padding: var(--csi-space-3) var(--csi-space-6) var(--csi-space-4);
  border-top: 1px solid var(--csi-border-default);
  display: flex; justify-content: flex-end; gap: var(--csi-space-3);
}

@keyframes csi-drawer-backdrop-fade-b-z8ip3ai06t { from { opacity: 0; } to { opacity: 1; } }
@keyframes csi-drawer-slide-right-b-z8ip3ai06t { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes csi-drawer-slide-left-b-z8ip3ai06t  { from { transform: translateX(-100%); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .csi-drawer-backdrop[b-z8ip3ai06t], .csi-drawer[b-z8ip3ai06t] { animation: none; }
}
/* _content/CSI.UI/Components/Overlays/CsiModal.razor.rz.scp.css */
.csi-modal-backdrop[b-0z97qioeea] {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: var(--csi-z-modal-backdrop);
  animation: csi-modal-fade-in-b-0z97qioeea var(--csi-duration-normal) var(--csi-ease-out);
}

.csi-modal[b-0z97qioeea] {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--csi-bg-raised);
  border-radius: var(--csi-radius-lg);
  box-shadow: var(--csi-elevation-overlay);
  z-index: var(--csi-z-modal);
  max-height: calc(100vh - var(--csi-space-12));
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: csi-modal-zoom-in-b-0z97qioeea var(--csi-duration-normal) var(--csi-ease-out);
}

.csi-modal--sm[b-0z97qioeea] { width: 92vw; max-width: 420px; }
.csi-modal--md[b-0z97qioeea] { width: 92vw; max-width: 560px; }
.csi-modal--lg[b-0z97qioeea] { width: 92vw; max-width: 720px; }

.csi-modal__header[b-0z97qioeea] {
  display: flex; align-items: flex-start;
  gap: var(--csi-space-3);
  padding: var(--csi-space-6) var(--csi-space-6) var(--csi-space-3);
  border-bottom: 1px solid var(--csi-border-default);
}

.csi-modal__titles[b-0z97qioeea] { flex: 1; min-width: 0; }

.csi-modal__title[b-0z97qioeea] {
  margin: 0; font-size: var(--csi-text-xl);
  font-weight: var(--csi-weight-semibold); color: var(--csi-fg-primary);
}

.csi-modal__subtitle[b-0z97qioeea] {
  margin: var(--csi-space-1) 0 0;
  font-size: var(--csi-text-sm); color: var(--csi-fg-muted);
}

.csi-modal__body[b-0z97qioeea] {
  padding: var(--csi-space-6);
  overflow-y: auto; flex: 1;
  font-size: var(--csi-text-base); color: var(--csi-fg-primary);
}

/* Opt-in: when AllowOverflow is set, child popovers (date pickers,
   dropdowns) escape the modal box. Trade-off — tall content
   overflows the modal rather than scrolling inside. */
.csi-modal--allow-overflow[b-0z97qioeea] {
  overflow: visible;
}
.csi-modal--allow-overflow .csi-modal__body[b-0z97qioeea] {
  overflow: visible;
}

.csi-modal__footer[b-0z97qioeea] {
  padding: var(--csi-space-3) var(--csi-space-6) var(--csi-space-6);
  border-top: 1px solid var(--csi-border-default);
  display: flex; justify-content: flex-end; gap: var(--csi-space-3);
}

@keyframes csi-modal-fade-in-b-0z97qioeea {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes csi-modal-zoom-in-b-0z97qioeea {
  from { transform: translate(-50%, -50%) scale(0.95); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .csi-modal-backdrop[b-0z97qioeea], .csi-modal[b-0z97qioeea] { animation: none; }
}
/* _content/CSI.UI/Components/Overlays/CsiPopover.razor.rz.scp.css */
.csi-popover[b-1x1hz48n3y] {
  position: absolute; /* fallback default; JS overrides to fixed for non-anchor browsers */
  z-index: var(--csi-z-dropdown);
  background: var(--csi-bg-raised);
  border: 1px solid var(--csi-border-default);
  border-radius: var(--csi-radius-md);
  box-shadow: var(--csi-elevation-overlay);
  padding: var(--csi-space-2);
  min-width: 180px;
  /* Modern browsers respect position-anchor + position-area set via JS. */
}

/* Modern browsers with anchor support: small gap between trigger and popover */
@supports (anchor-name: --x) {
  .csi-popover[b-1x1hz48n3y] {
    position: absolute;
    margin: var(--csi-space-1);
  }
}

.csi-popover--bottom[b-1x1hz48n3y] { }
.csi-popover--top[b-1x1hz48n3y]    { }
.csi-popover--left[b-1x1hz48n3y]   { }
.csi-popover--right[b-1x1hz48n3y]  { }
/* _content/CSI.UI/Components/PersonDetailPage.razor.rz.scp.css */
/* Scoped chrome for PersonDetailPage (#145 Phase C).

   Lifted from DirectoryStaffDetail.razor.css — this is the canonical
   home for the person hero / general-info grid / restricted-fields
   panel. Both /directory/{id} and /admin/users/{id} consume through
   the primitive so the layout chrome stays in one place.

   Notes:
   - .csi-detail-card is duplicated here (slightly tighter padding than
     the shared _detail.css rule used by the academic-family pages) to
     match the wireframe lock from PR #181. Consumer pages may add
     additional cards in the Sections fragment using the shared rule.
   - .csi-pill / .csi-pill.is-* live in shared _pill.css so consumers
     get the category + status pills automatically. The primitive only
     defines hero-specific layout for the pill cluster, not the pill
     itself.
   - Blazor's automatic .razor.css rewriting scopes these rules to
     elements rendered by THIS component; consumer fragments inserted
     via RenderFragment (RoleLine, DeepLinks, GeneralInfo, etc.) do NOT
     pick up the scoped attribute, so any page-local class they emit
     stays orphaned unless mirrored in shared CSS or the consumer's
     own .razor.css. */

.csi-detail-breadcrumb[b-15qdbouq71] {
    color: var(--csi-text-secondary);
    font-size: 13px;
    margin-bottom: var(--csi-space-sm);
}

/* Breadcrumb links come from the consumer's RenderFragment (anchor
   tags with hrefs); ::deep punches through the scoped attribute so
   the consumer-emitted anchors pick up the muted-link styling. */
.csi-detail-breadcrumb[b-15qdbouq71]  a {
    color: var(--csi-text-secondary);
    text-decoration: none;
}

.csi-detail-breadcrumb[b-15qdbouq71]  a:hover {
    text-decoration: underline;
}

.csi-detail-page-header[b-15qdbouq71] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--csi-space-md);
    margin-bottom: var(--csi-space-md);
}

.csi-detail-page-header-actions[b-15qdbouq71] {
    display: flex;
    align-items: center;
    gap: var(--csi-space-sm);
    flex-shrink: 0;
}

.csi-detail-back-btn[b-15qdbouq71] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: var(--csi-border-width) solid var(--csi-border-tertiary);
    border-radius: var(--csi-radius-sm);
    background: var(--csi-surface-primary);
    color: var(--csi-text-primary);
    text-decoration: none;
    font-size: 13px;
}

.csi-detail-back-btn:hover[b-15qdbouq71] {
    background: var(--csi-surface-secondary, #f9fafb);
}

/* ── Identity card — full-width hero + General Information ───────── */
.csi-person-detail-card[b-15qdbouq71] {
    background: var(--csi-surface-primary);
    border: var(--csi-border-width) solid var(--csi-border-tertiary);
    border-radius: var(--csi-radius-md);
    padding: var(--csi-space-lg);
    /* 2026-05-01: bumped from --csi-space-md (12px) to --csi-space-xl
       (20px) to match the gap between variant sections below — they
       now sit inside a .csi-detail-body flex stack with the same
       spacing token, so the hero's bottom margin needs to keep parity
       or the hero feels glued to the first variant card. */
    margin-bottom: var(--csi-space-xl);
}

.csi-section-title[b-15qdbouq71] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--csi-space-sm);
    gap: var(--csi-space-sm);
}

.csi-section-title h2[b-15qdbouq71] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--csi-text-primary);
}

/* ── Person hero ─────────────────────────────────────────────────── */
.csi-person-hero[b-15qdbouq71] {
    display: flex;
    gap: var(--csi-space-lg);
    align-items: flex-start;
    padding-bottom: var(--csi-space-md);
    border-bottom: var(--csi-border-width) solid var(--csi-border-tertiary);
    margin-bottom: var(--csi-space-md);
}

.csi-avatar-lg[b-15qdbouq71] {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--csi-brand-primary, #003366);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.csi-avatar-lg-img[b-15qdbouq71] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.csi-avatar-lg-initials[b-15qdbouq71] {
    font-weight: 600;
    font-size: 32px;
}

.csi-person-hero-meta[b-15qdbouq71] {
    flex: 1;
    min-width: 0;
}

.csi-person-hero-name[b-15qdbouq71] {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--csi-text-primary);
}

.csi-person-hero-role[b-15qdbouq71] {
    color: var(--csi-text-secondary);
    margin-bottom: var(--csi-space-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.csi-person-hero-deeplinks[b-15qdbouq71] {
    display: flex;
    gap: var(--csi-space-sm);
    flex-wrap: wrap;
}

.csi-person-hero-actions[b-15qdbouq71] {
    display: flex;
    align-items: flex-start;
    gap: var(--csi-space-sm);
    flex-shrink: 0;
}

/* General Information section sits inside the identity card. The
   consumer-side csi-grid-2 + field cells need to be visible to
   consumer-emitted markup, so the rules live in the consumer page's
   scoped CSS (or in shared _detail.css when CSI.UI grows a person-
   field primitive). */
.csi-person-general-info[b-15qdbouq71] {
    margin-top: 0;
}

/* ── Restricted Fields panel (D18 + D19) ─────────────────────────── */
.csi-restricted-summary[b-15qdbouq71] {
    display: inline-flex;
    align-items: center;
    gap: var(--csi-space-sm);
    cursor: pointer;
    user-select: none;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
}

.csi-restricted-summary h2[b-15qdbouq71] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.csi-restricted-caret[b-15qdbouq71] {
    color: var(--csi-text-secondary);
    transition: transform 0.15s;
    display: inline-block;
}

.csi-restricted-caret.is-open[b-15qdbouq71] {
    transform: rotate(90deg);
}

.csi-restricted-gate-label[b-15qdbouq71] {
    color: var(--csi-text-secondary);
    font-size: 12px;
}

.csi-restricted-block[b-15qdbouq71] {
    padding: var(--csi-space-md);
    background: #fff8f0;
    border: var(--csi-border-width) dashed #d9a866;
    border-radius: var(--csi-radius-sm);
    margin-top: var(--csi-space-sm);
}

.csi-sensitive-notice[b-15qdbouq71] {
    display: flex;
    align-items: flex-start;
    gap: var(--csi-space-sm);
    padding: var(--csi-space-sm);
    background: #fff4d6;
    border: var(--csi-border-width) solid #f0d588;
    border-radius: var(--csi-radius-sm);
    color: #7a5a00;
    margin-bottom: var(--csi-space-sm);
    font-size: 13px;
}

.csi-sensitive-notice-icon[b-15qdbouq71] {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1.2;
}

.csi-sensitive-notice strong[b-15qdbouq71] {
    font-weight: 600;
}
/* _content/CSI.UI/Components/Schedule/CsiScheduleGrid.razor.rz.scp.css */
/* <CsiScheduleGrid> scoped styles. Three responsive layouts per
   FTC v3.0 design spec §6.1:
   - Desktop ≥1024px: full week grid (5 columns of days × N station rows).
   - Tablet 768–1024px: same shape, narrower cells with horizontal scroll fallback.
   - Mobile <768px: day picker tabs + single-day station list.
   Status colors follow the v2 design system token palette. */

/* ── Validation list inside whole-week banners ──────────────────── */

.csi-schedule-grid__validation-list[b-e98kxqftiu] {
    margin: 0;
    padding-left: 1.25rem;
}

/* ── Drag-and-drop drop-target highlight (Build mode only) ─────── */
.csi-schedule-grid__cell--drop-target[b-e98kxqftiu] {
    background: color-mix(in srgb, var(--csi-action-primary) 12%, transparent);
    outline: 2px dashed var(--csi-action-primary);
    outline-offset: -4px;
}
.csi-schedule-grid--build .csi-schedule-grid__assignment[b-e98kxqftiu] {
    cursor: grab;
}
.csi-schedule-grid--build .csi-schedule-grid__assignment:active[b-e98kxqftiu] {
    cursor: grabbing;
}

/* ── Day picker (mobile only) ───────────────────────────────────── */

.csi-schedule-grid__day-picker[b-e98kxqftiu] {
    display: none; /* desktop default */
    gap: var(--csi-space-xs);
    margin-bottom: var(--csi-space-sm);
    overflow-x: auto;
}

.csi-schedule-grid__day-picker-tab[b-e98kxqftiu] {
    flex: 1 1 auto;
    min-width: 48px;
    padding: var(--csi-space-sm);
    background: var(--csi-bg-surface);
    border: var(--csi-border-width) solid var(--csi-border-default);
    border-radius: var(--csi-radius-sm);
    color: var(--csi-fg-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.csi-schedule-grid__day-picker-tab--active[b-e98kxqftiu] {
    background: var(--csi-app-ftc, var(--csi-color-primary, #0a4a8a));
    color: white;
    border-color: var(--csi-app-ftc, var(--csi-color-primary, #0a4a8a));
}

/* ── Grid (desktop default) ─────────────────────────────────────── */

.csi-schedule-grid[b-e98kxqftiu] {
    display: grid;
    grid-template-columns: minmax(140px, max-content) repeat(var(--csi-schedule-grid-days, 5), minmax(160px, 1fr));
    gap: 1px;
    background: var(--csi-border-default);
    border: var(--csi-border-width) solid var(--csi-border-default);
    border-radius: var(--csi-radius-md);
    overflow: hidden;
}

.csi-schedule-grid__corner[b-e98kxqftiu],
.csi-schedule-grid__day-header[b-e98kxqftiu],
.csi-schedule-grid__station-label[b-e98kxqftiu],
.csi-schedule-grid__cell[b-e98kxqftiu] {
    background: var(--csi-bg-surface);
    padding: var(--csi-space-sm);
}

.csi-schedule-grid__day-header[b-e98kxqftiu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-weight: 600;
    color: var(--csi-fg-primary);
}

.csi-schedule-grid__day-header-date[b-e98kxqftiu] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--csi-fg-muted);
}

.csi-schedule-grid__station-label[b-e98kxqftiu] {
    display: flex;
    align-items: center;
    gap: var(--csi-space-xs);
    font-weight: 500;
    color: var(--csi-fg-secondary);
}

.csi-schedule-grid__station-number[b-e98kxqftiu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--csi-space-xs);
    background: var(--csi-bg-page);
    border-radius: 14px;
    font-size: 0.8125rem;
    color: var(--csi-fg-muted);
}

.csi-schedule-grid__cell[b-e98kxqftiu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 48px;
    position: relative;
}

/* Density overlay (Build mode planning aid). Cell background tint
   comes from inline style on the cell; the badge anchors top-right. */
.csi-schedule-grid__density-badge[b-e98kxqftiu] {
    position: absolute;
    top: 2px;
    right: 4px;
    z-index: 1;
    padding: 1px 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--csi-fg-secondary);
    background: color-mix(in srgb, var(--csi-color-warning, #f59e0b) 18%, var(--csi-bg-surface));
    border: 1px solid color-mix(in srgb, var(--csi-color-warning, #f59e0b) 35%, transparent);
    border-radius: 999px;
    pointer-events: none;
}

/* ── Assignment chips ───────────────────────────────────────────── */

.csi-schedule-grid__assignment[b-e98kxqftiu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: var(--csi-space-xs) var(--csi-space-sm);
    background: var(--csi-bg-page);
    border: var(--csi-border-width) solid var(--csi-border-default);
    border-radius: var(--csi-radius-sm);
    color: var(--csi-fg-primary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: transform 80ms, box-shadow 80ms;
    position: relative;
}

.csi-schedule-grid__assignment:hover:not(:disabled)[b-e98kxqftiu] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.csi-schedule-grid__assignment:disabled[b-e98kxqftiu] {
    cursor: default;
}

.csi-schedule-grid__assignment-time[b-e98kxqftiu] {
    font-size: 0.6875rem;
    color: var(--csi-fg-muted);
    line-height: 1.1;
}

.csi-schedule-grid__assignment-body[b-e98kxqftiu] {
    line-height: 1.2;
    word-break: break-word;
}

.csi-schedule-grid__assignment--assigned[b-e98kxqftiu] {
    /* default styling */
}

.csi-schedule-grid__assignment--open[b-e98kxqftiu] {
    background: color-mix(in srgb, var(--csi-color-info, #3b82f6) 8%, var(--csi-bg-surface));
    border-color: var(--csi-color-info, #3b82f6);
}

.csi-schedule-grid__assignment--reserved[b-e98kxqftiu] {
    background: color-mix(in srgb, var(--csi-color-warning, #f59e0b) 8%, var(--csi-bg-surface));
    border-color: var(--csi-color-warning, #f59e0b);
    color: var(--csi-fg-secondary);
}

.csi-schedule-grid__assignment--muted[b-e98kxqftiu] {
    opacity: 0.35;
}

.csi-schedule-grid__assignment--error[b-e98kxqftiu] {
    box-shadow: 0 0 0 2px var(--csi-color-danger, #dc2626);
}

.csi-schedule-grid__assignment--warning[b-e98kxqftiu] {
    box-shadow: 0 0 0 2px var(--csi-color-warning, #f59e0b);
}

.csi-schedule-grid__self-scheduled-badge[b-e98kxqftiu] {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 4px;
    background: var(--csi-app-ftc, var(--csi-color-primary, #0a4a8a));
    color: white;
    border-radius: 3px;
    line-height: 1.2;
}

/* ── Empty-slot affordance (Build mode only) ────────────────────── */

.csi-schedule-grid__empty-slot[b-e98kxqftiu] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    background: transparent;
    border: 1px dashed var(--csi-border-default);
    border-radius: var(--csi-radius-sm);
    color: var(--csi-fg-muted);
    font-size: 1rem;
    cursor: pointer;
}

.csi-schedule-grid__empty-slot:hover[b-e98kxqftiu] {
    background: var(--csi-bg-page);
    color: var(--csi-fg-secondary);
    border-color: var(--csi-fg-muted);
}

/* Small "+" affordance shown below existing chips in a cell with
   content — lets a Lead stack a second shift on the same station/day
   (per feedback #B-2). Smaller + lower contrast than the empty-slot
   variant so it doesn't compete with the chips above. */
.csi-schedule-grid__add-slot[b-e98kxqftiu] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    margin-top: 2px;
    background: transparent;
    border: 1px dashed var(--csi-border-subtle);
    border-radius: var(--csi-radius-sm);
    color: var(--csi-fg-muted);
    font-size: 0.875rem;
    cursor: pointer;
    opacity: 0.6;
}
.csi-schedule-grid__add-slot:hover[b-e98kxqftiu] {
    background: var(--csi-bg-page);
    color: var(--csi-fg-secondary);
    border-color: var(--csi-fg-muted);
    opacity: 1;
}

/* ── Mobile <768px: hide grid columns except active day ─────────── */

@media (max-width: 767px) {
    .csi-schedule-grid[b-e98kxqftiu] {
        grid-template-columns: minmax(120px, max-content) 1fr;
    }

    .csi-schedule-grid__day-picker[b-e98kxqftiu] {
        display: flex;
    }

    .csi-schedule-grid__day-header[b-e98kxqftiu] {
        display: none;
    }

    .csi-schedule-grid__day-header[data-day]:has(+ .csi-schedule-grid__cell--mobile-active)[b-e98kxqftiu] {
        /* not actually used; mobile header handled via day-picker instead */
    }

    .csi-schedule-grid__cell[b-e98kxqftiu] {
        display: none;
    }

    .csi-schedule-grid__cell--mobile-active[b-e98kxqftiu] {
        display: flex;
    }
}

/* ── Tablet 768–1024px: narrow column cells, horizontal scroll fallback ── */

@media (min-width: 768px) and (max-width: 1023px) {
    .csi-schedule-grid[b-e98kxqftiu] {
        grid-template-columns: minmax(120px, max-content) repeat(var(--csi-schedule-grid-days, 5), minmax(110px, 1fr));
    }
}
/* _content/CSI.UI/Components/Tables/CsiTable.razor.rz.scp.css */
/* Horizontal-scroll wrapper. The table itself maintains its natural
   width (driven by column content + explicit Width="..." parameters);
   when the wrapper is narrower than the table, the user gets a
   horizontal scrollbar instead of the table squishing its cells into
   wrapping headers. The wrapper carries the rounded outer frame so
   the scrollbar tucks under the bottom border. */
.csi-table-wrapper[b-npxdqb7qry] {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--csi-border-default);
  border-radius: var(--csi-radius-md);
  background: var(--csi-bg-surface);
}

.csi-table[b-npxdqb7qry] {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--csi-text-sm, .875rem);
  color: var(--csi-fg-primary);
  background: var(--csi-bg-surface);
}

/* Opt-in: fixed layout makes column widths absolute (driven by the
   th width:px style emitted from CsiTableColumn.Width). Cells respect
   white-space: nowrap + text-overflow: ellipsis. Per feedback C-11.

   width: max-content keeps the table from compressing column widths
   below their declared sizes — combined with the wrapper's
   overflow-x: auto this means the user gets a horizontal scrollbar
   instead of columns overlapping when the viewport is narrower than
   the sum of column widths. Feedback E-9. */
.csi-table--fixed[b-npxdqb7qry] {
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
}
.csi-table--fixed td[b-npxdqb7qry] {
  overflow: hidden;
}

.csi-table thead th[b-npxdqb7qry] {
  background: var(--csi-bg-page);
  color: var(--csi-fg-secondary);
  font-weight: var(--csi-weight-semibold, 600);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: left;
  border-bottom: 1px solid var(--csi-border-default);
}

.csi-table--sticky thead th[b-npxdqb7qry] {
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: 0 1px 0 var(--csi-border-default);
}

.csi-table th[b-npxdqb7qry],
.csi-table td[b-npxdqb7qry] {
  text-align: left;
  vertical-align: middle;
}

.csi-table tbody td[b-npxdqb7qry] {
  border-bottom: 1px solid var(--csi-border-default);
  color: var(--csi-fg-primary);
  font-size: .875rem;
}

.csi-table tbody tr:last-child td[b-npxdqb7qry] {
  border-bottom: 0;
}

.csi-table--density-regular th[b-npxdqb7qry],
.csi-table--density-regular td[b-npxdqb7qry] {
  padding: var(--csi-space-3) var(--csi-space-4);
}

.csi-table--density-compact th[b-npxdqb7qry],
.csi-table--density-compact td[b-npxdqb7qry] {
  padding: var(--csi-space-2) var(--csi-space-3);
}

.csi-table tbody tr[b-npxdqb7qry] {
  transition: background-color 80ms ease;
}

.csi-table tbody tr:hover[b-npxdqb7qry] {
  background: color-mix(in srgb, var(--csi-action-primary) 4%, var(--csi-bg-surface));
}

.csi-table--striped tbody tr:nth-child(even)[b-npxdqb7qry] {
  background: var(--csi-bg-page);
}

.csi-table--striped tbody tr:nth-child(even):hover[b-npxdqb7qry] {
  background: color-mix(in srgb, var(--csi-action-primary) 6%, var(--csi-bg-page));
}

.csi-table__row--selected[b-npxdqb7qry] {
  background: color-mix(in srgb, var(--csi-action-primary) 10%, transparent) !important;
}

.csi-table__row--clickable[b-npxdqb7qry] {
  cursor: pointer;
}

.csi-table__row--clickable:focus-visible[b-npxdqb7qry] {
  outline: 2px solid var(--csi-action-primary);
  outline-offset: -2px;
}

.csi-table__sort-button[b-npxdqb7qry] {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--csi-space-2);
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

.csi-table__sort-button:hover[b-npxdqb7qry] {
  color: var(--csi-action-primary);
}

.csi-table__sort-button:hover .csi-table__sort-icon[b-npxdqb7qry] {
  opacity: .9;
}

.csi-table__sort-button:focus-visible[b-npxdqb7qry] {
  outline: 0;
  box-shadow: var(--csi-focus-ring);
  border-radius: var(--csi-radius-sm);
}

/* Inactive sortable columns get a faint up-down indicator so the
   click affordance is visible without screaming. The active column's
   chevron is the same opacity as the label. */
.csi-table__sort-icon[b-npxdqb7qry] {
  display: inline-flex;
  opacity: .35;
  transition: opacity 120ms ease;
}

.csi-table__sort-icon--active[b-npxdqb7qry] {
  opacity: 1;
  color: var(--csi-action-primary);
}

.csi-table__select-cell[b-npxdqb7qry] {
  width: 40px;
}

.csi-table__empty[b-npxdqb7qry] {
  padding: var(--csi-space-8);
  text-align: center;
}
/* _content/CSI.UI/Components/ThemePicker.razor.rz.scp.css */
.csi-theme-picker[b-7t9pasrcxp] {
    display: flex;
    flex-direction: column;
    gap: var(--csi-space-2);
    padding: var(--csi-space-2);
}

.csi-theme-picker__section-label[b-7t9pasrcxp] {
    font-size: var(--csi-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--csi-fg-muted);
    font-weight: var(--csi-weight-bold);
    padding: var(--csi-space-2) var(--csi-space-3);
}

.csi-theme-picker__appearance-row[b-7t9pasrcxp] {
    display: flex;
    gap: var(--csi-space-1);
    padding: 0 var(--csi-space-3);
}

.csi-theme-picker__appearance[b-7t9pasrcxp] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: var(--csi-space-2);
    border: 1px solid var(--csi-border-strong);
    background: var(--csi-bg-surface);
    color: var(--csi-fg-secondary);
    border-radius: var(--csi-radius-sm);
    font-size: var(--csi-text-sm);
    cursor: pointer;
    font-family: inherit;
}

.csi-theme-picker__appearance--active[b-7t9pasrcxp] {
    background: color-mix(in srgb, var(--csi-action-primary) 10%, transparent);
    border-color: var(--csi-action-primary);
    color: var(--csi-action-primary);
    font-weight: var(--csi-weight-semibold);
}

.csi-theme-picker__a11y-row[b-7t9pasrcxp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--csi-space-2) var(--csi-space-3);
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: var(--csi-text-sm);
    color: var(--csi-fg-primary);
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.csi-theme-picker__a11y-row:hover[b-7t9pasrcxp] {
    background: var(--csi-bg-page);
}

.csi-theme-picker__a11y-label[b-7t9pasrcxp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.csi-theme-picker__switch[b-7t9pasrcxp] {
    width: 36px;
    height: 20px;
    background: var(--csi-color-neutral-200);
    border-radius: var(--csi-radius-full);
    position: relative;
    flex-shrink: 0;
    transition: background var(--csi-duration-fast) var(--csi-ease-out);
}

.csi-theme-picker__switch[b-7t9pasrcxp]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--csi-color-neutral-0);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: left var(--csi-duration-fast) var(--csi-ease-out);
}

.csi-theme-picker__switch--on[b-7t9pasrcxp] {
    background: var(--csi-action-primary);
}

.csi-theme-picker__switch--on[b-7t9pasrcxp]::after {
    left: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .csi-theme-picker__switch[b-7t9pasrcxp],
    .csi-theme-picker__switch[b-7t9pasrcxp]::after {
        transition: none;
    }
}