/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-opqko77hdm] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-opqko77hdm] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* SmartAdmin's base `a[target]:not(.btn) { text-decoration: underline !important }` treats every
   link with a target as external and underlines it; the API entry sets target="_blank" on purpose,
   so cancel that underline for nav links only. */
.nav-menu li a[target][b-dzx1zwipgj] {
  text-decoration: none !important;
}
/* /Components/Layout/PageHeader.razor.rz.scp.css */
.tt-user-menu__trigger[b-ya7fav4h5e] {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: inherit;
  font-size: 1.2rem;
  transition: background-color 0.15s;
}

.tt-user-menu__trigger:hover[b-ya7fav4h5e] {
  background-color: rgba(0, 0, 0, 0.05);
}

.tt-user-menu__panel[b-ya7fav4h5e] {
  min-width: 260px;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
}

.tt-user-menu__header[b-ya7fav4h5e] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, #1dc9b7 0%, #886aea 100%);
  color: #fff;
}

.tt-user-menu__avatar[b-ya7fav4h5e] {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tt-user-menu__name[b-ya7fav4h5e] {
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tt-user-menu__item[b-ya7fav4h5e] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 16px;
  width: 100%;
  border: none;
  background: none;
  color: #333;
  text-decoration: none;
  font-size: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s;
}

.tt-user-menu__panel form[b-ya7fav4h5e] {
  margin: 0;
}

.tt-user-menu__item:hover[b-ya7fav4h5e] {
  background-color: #f5f5f5;
  color: #333;
  text-decoration: none;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-248rq7okzm],
.components-reconnect-repeated-attempt-visible[b-248rq7okzm],
.components-reconnect-failed-visible[b-248rq7okzm],
.components-pause-visible[b-248rq7okzm],
.components-resume-failed-visible[b-248rq7okzm],
.components-rejoining-animation[b-248rq7okzm] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-248rq7okzm],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-248rq7okzm],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-248rq7okzm],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-248rq7okzm],
#components-reconnect-modal.components-reconnect-retrying[b-248rq7okzm],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-248rq7okzm],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-248rq7okzm],
#components-reconnect-modal.components-reconnect-failed[b-248rq7okzm],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-248rq7okzm] {
    display: block;
}


#components-reconnect-modal[b-248rq7okzm] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-248rq7okzm 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-248rq7okzm 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-248rq7okzm 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-248rq7okzm]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-248rq7okzm 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-248rq7okzm {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-248rq7okzm {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-248rq7okzm {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-248rq7okzm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-248rq7okzm] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-248rq7okzm] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-248rq7okzm] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-248rq7okzm] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-248rq7okzm] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-248rq7okzm] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-248rq7okzm 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-248rq7okzm] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-248rq7okzm {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Administration/CompanyStructure.razor.rz.scp.css */
.mud-company-panel-header[b-o2pi4a1ezq] {
  display: flex;
  align-items: center;
  height: 52px;
  overflow: visible;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-company-panel-title[b-o2pi4a1ezq] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.mud-company-panel-body[b-o2pi4a1ezq] {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px;
}

.mud-company-tree-area[b-o2pi4a1ezq] {
  overflow-y: auto;
}

.mud-company-users-area[b-o2pi4a1ezq] {
  overflow: hidden;
  display: flex;
  min-height: 0;
}

.mud-company-users-area[b-o2pi4a1ezq]  .mud-company-users-table {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.mud-company-users-area[b-o2pi4a1ezq]  .mud-company-users-table .mud-table-root,
.mud-company-users-area[b-o2pi4a1ezq]  .mud-company-users-table .mud-table-container,
.mud-company-users-area[b-o2pi4a1ezq]  .mud-company-users-table .mud-table-root table {
  width: 100%;
}

.mud-company-users-area[b-o2pi4a1ezq]  .mud-company-users-table .mud-table-container {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  overflow-y: auto;
}

.mud-company-users-area[b-o2pi4a1ezq]  .mud-table-sort-label-icon {
  color: var(--mud-palette-text-secondary) !important;
}

.mud-company-panel-header[b-o2pi4a1ezq]  .mud-input-clear-button {
  padding: 2px !important;
}

.mud-company-loading[b-o2pi4a1ezq] {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 160px;
}

.mud-company-tree-row[b-o2pi4a1ezq] {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding-right: 4px;
  border-radius: 4px;
}

.mud-company-tree-row-selected[b-o2pi4a1ezq] {
  background: rgba(25, 118, 210, 0.08);
}

.mud-company-node-icon[b-o2pi4a1ezq] {
  font-size: 14px;
  width: 16px;
}

.mud-company-node-text[b-o2pi4a1ezq] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mud-company-tree-actions[b-o2pi4a1ezq] {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  opacity: 1;
  visibility: visible;
}

@media (max-width: 960px) {
  .mud-company-content[b-o2pi4a1ezq] {
    min-height: auto;
  }

  .mud-company-panel[b-o2pi4a1ezq] {
    min-height: 420px;
  }
}
/* /Components/Pages/Administration/NoneWorkDays.razor.rz.scp.css */
/* The pager toolbar's own border-top is removed globally in site.css — every admin grid's
   PagerContent shares this layout. */

/* .mud-table-container is overflow-y:auto with a fractional CSS height (needed to size to the last
   row's content). clientHeight/scrollHeight report no overflow, but Chromium's paint-time clip mask
   for that fractional box rounds to slightly less than the true layout height, so the last row's
   border-bottom — sitting right at that edge — gets clipped away almost entirely. This grid never
   needs to scroll vertically (no fixed Height, pagination replaces rows rather than scrolling to
   them), so dropping the vertical clip is safe; horizontal scroll for wide content is unaffected
   since only the Y axis is overridden. */
[b-afsd97h71q] .mud-table-container {
  overflow-y: visible;
}
/* /Components/Pages/Administration/TeamRoles.razor.rz.scp.css */
/* The pager toolbar's own border-top is removed globally in site.css — every admin grid's
   PagerContent shares this layout. */

/* .mud-table-container is overflow-y:auto with a fractional CSS height (needed to size to the last
   row's content). clientHeight/scrollHeight report no overflow, but Chromium's paint-time clip mask
   for that fractional box rounds to slightly less than the true layout height, so the last row's
   border-bottom — sitting right at that edge — gets clipped away almost entirely. This grid never
   needs to scroll vertically (no fixed Height, pagination replaces rows rather than scrolling to
   them), so dropping the vertical clip is safe; horizontal scroll for wide content is unaffected
   since only the Y axis is overridden. */
[b-tqwq3lnkh1] .mud-table-container {
  overflow-y: visible;
}
/* /Components/Pages/Administration/WebApiKeys.razor.rz.scp.css */
/* The pager toolbar's own border-top is removed globally in site.css — every admin grid's
   PagerContent shares this layout. */

/* .mud-table-container is overflow-y:auto with a fractional CSS height (needed to size to the last
   row's content). clientHeight/scrollHeight report no overflow, but Chromium's paint-time clip mask
   for that fractional box rounds to slightly less than the true layout height, so the last row's
   border-bottom — sitting right at that edge — gets clipped away almost entirely. This grid never
   needs to scroll vertically (no fixed Height, pagination replaces rows rather than scrolling to
   them), so dropping the vertical clip is safe; horizontal scroll for wide content is unaffected
   since only the Y axis is overridden. */
[b-f26o0map4x] .mud-table-container {
  overflow-y: visible;
}
/* /Components/Pages/Administration/WhatsNewEditor.razor.rz.scp.css */
/* The pager toolbar's own border-top is removed globally in site.css — every admin grid's
   PagerContent shares this layout. */

/* .mud-table-container is overflow-y:auto with a fractional CSS height (confirmed live: 88.9688px
   for a one-row grid, bottom edge at 321.96875px). clientHeight/scrollHeight report no overflow,
   but Chromium's paint-time clip mask for that fractional box still rounds to slightly less than
   the true layout height, so the last row's border-bottom — sitting right at that edge — gets
   clipped away almost entirely (measured: only its bottommost ~1 device-pixel sliver survived).
   This grid never needs to scroll vertically (no fixed Height, pagination replaces rows rather
   than scrolling to them), so dropping the vertical clip is safe; horizontal scroll for wide
   content is unaffected since only the Y axis is overridden. */
[b-xzsmk0mmfg] .mud-table-container {
  overflow-y: visible;
}
/* /Components/Pages/Administration/WorkTypes.razor.rz.scp.css */
/* The pager toolbar's own border-top is removed globally in site.css — every admin grid's
   PagerContent shares this layout. */

/* .mud-table-container is overflow-y:auto with a fractional CSS height (needed to size to the last
   row's content). clientHeight/scrollHeight report no overflow, but Chromium's paint-time clip mask
   for that fractional box rounds to slightly less than the true layout height, so the last row's
   border-bottom — sitting right at that edge — gets clipped away almost entirely. This grid never
   needs to scroll vertically (no fixed Height, pagination replaces rows rather than scrolling to
   them), so dropping the vertical clip is safe; horizontal scroll for wide content is unaffected
   since only the Y axis is overridden. */
[b-q1opzf9pnu] .mud-table-container {
  overflow-y: visible;
}
/* /Components/Pages/Dashboard/ManagerWidget.razor.rz.scp.css */
/* Make branch nodes (with expand toggle) the same height as leaf nodes */
.dashboard-tree[b-61wbw85j27]  .mud-treeview-item-expand-button {
  padding: 0;
  height: auto;
  width: auto;
}

.dashboard-tree[b-61wbw85j27]  .mud-treeview-item-expand-button .mud-icon-root {
  font-size: 1.125rem;
}

/* Doughnut + HTML legend. The legend lives outside the canvas so it can be scrolled to when it does
   not fit; a native canvas legend is clipped at the canvas edge and cannot scroll (#473). */
.chart-scroll[b-61wbw85j27] {
  overflow-x: auto;
}

.chart-row[b-61wbw85j27] {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: min-content;
  height: 260px;
}

.chart-canvas-box[b-61wbw85j27] {
  position: relative;
  flex: 0 0 auto;
  width: 240px;
  height: 240px;
}

/* Column-wrapping legend: fills a column up to max-height, then wraps into the next column to the
   right, so the row grows horizontally and .chart-scroll shows a horizontal scrollbar. */
.chart-legend[b-61wbw85j27] {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  max-height: 240px;
  margin: 0;
  padding: 0;
  list-style: none;
  column-gap: 24px;
}

.chart-legend[b-61wbw85j27]  .chart-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
}

.chart-legend[b-61wbw85j27]  .chart-legend-swatch {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
/* /Components/Pages/Dashboard/ProjectsSummaryWidget.razor.rz.scp.css */
/* Doughnut + HTML legend. The legend lives outside the canvas so it can be scrolled to when it does
   not fit; a native canvas legend is clipped at the canvas edge and cannot scroll (#473). */
.chart-scroll[b-148ksrlj9k] {
  overflow-x: auto;
}

.chart-row[b-148ksrlj9k] {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: min-content;
  height: 260px;
}

.chart-canvas-box[b-148ksrlj9k] {
  position: relative;
  flex: 0 0 auto;
  width: 240px;
  height: 240px;
}

/* Column-wrapping legend: fills a column up to max-height, then wraps into the next column to the
   right, so the row grows horizontally and .chart-scroll shows a horizontal scrollbar. */
.chart-legend[b-148ksrlj9k] {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  max-height: 240px;
  margin: 0;
  padding: 0;
  list-style: none;
  column-gap: 24px;
}

.chart-legend[b-148ksrlj9k]  .chart-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
}

.chart-legend[b-148ksrlj9k]  .chart-legend-swatch {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
/* /Components/Pages/Dashboard/SpecialWorkTypesManagerWidget.razor.rz.scp.css */
/* Make branch nodes (with expand toggle) the same height as leaf nodes */
.dashboard-tree[b-l2espwkfqb]  .mud-treeview-item-expand-button {
  padding: 0;
  height: auto;
  width: auto;
}

.dashboard-tree[b-l2espwkfqb]  .mud-treeview-item-expand-button .mud-icon-root {
  font-size: 1.125rem;
}

/* HTML legend injected by ttChart.createBarChart: a filter checkbox plus a rounded colour pill per
   work type. The items are created in JS, so they are reached through ::deep. */
.bar-legend[b-l2espwkfqb] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  margin-bottom: 10px;
}

.bar-legend[b-l2espwkfqb]  .bar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  cursor: pointer;
}

.bar-legend[b-l2espwkfqb]  .bar-legend-checkbox {
  cursor: pointer;
}

.bar-legend[b-l2espwkfqb]  .bar-legend-pill {
  padding: 6px 20px;
  border-radius: 13px;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
}
/* /Components/Pages/Dashboard/SpecialWorkTypesWidget.razor.rz.scp.css */
/* HTML legend injected by ttChart.createBarChart: a filter checkbox plus a rounded colour pill per
   work type. The items are created in JS, so they are reached through ::deep. */
.bar-legend[b-rz56558fk9] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  margin-bottom: 10px;
}

.bar-legend[b-rz56558fk9]  .bar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  cursor: pointer;
}

.bar-legend[b-rz56558fk9]  .bar-legend-checkbox {
  cursor: pointer;
}

.bar-legend[b-rz56558fk9]  .bar-legend-pill {
  padding: 6px 20px;
  border-radius: 13px;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
}
/* /Components/Pages/Identity/IdentityLayout.razor.rz.scp.css */
#blazor-error-ui[b-3o6phlvep0] {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

  #blazor-error-ui .dismiss[b-3o6phlvep0] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
  }
/* /Components/Pages/LiveTimeEntry/IntervalCollisionDialog.razor.rz.scp.css */
/* The collision dialog's own parts: the red recalculated hours with their change chip, and the amber warning
   with its icon. The intro, panel, option cards and footnote it shares with the other decision dialogs come
   from tt-decision-dialog.css. Light values are the design's; the dark ones come from the .mod-skin-dark
   overrides. */
.lte-collision[b-gmxkgaodb2] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lte-collision[b-gmxkgaodb2]  .lte-dialog-after {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #F44336;
}

.lte-collision[b-gmxkgaodb2]  .lte-dialog-delta {
  height: 22px;
  margin: 0;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background-color: #FEECEB;
  color: #5F2120;
}

.lte-collision[b-gmxkgaodb2]  .lte-dialog-amber {
  margin: 0;
  border-radius: 4px;
  background-color: #FFF4E5;
  color: #663C00;
}

.lte-collision[b-gmxkgaodb2]  .lte-dialog-amber .mud-alert-icon {
  color: #FF9800;
}

.mod-skin-dark .lte-collision[b-gmxkgaodb2]  .lte-dialog-after {
  color: #EF5350;
}

.mod-skin-dark .lte-collision[b-gmxkgaodb2]  .lte-dialog-delta {
  background-color: #3A1F27;
  color: #FFB3C1;
}

.mod-skin-dark .lte-collision[b-gmxkgaodb2]  .lte-dialog-amber {
  background-color: #3A2E17;
  color: #FFCC80;
}
/* /Components/Pages/LiveTimeEntry/IntervalOverlapDialog.razor.rz.scp.css */
/* The overlap dialog, as drawn in the design: an intro, an amber warning with its icon, one card per affected
   record - a pill, the record, its hours and the change - and a footnote. A deleted record's card is tinted red
   with a red hours figure. Light values are the design's; the dark ones come from the .mod-skin-dark overrides. */
.lte-overlap[b-h9xx3gz9xi] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lte-overlap[b-h9xx3gz9xi]  .lte-overlap-intro {
  color: #666666;
}

.lte-overlap[b-h9xx3gz9xi]  .lte-overlap-alert {
  margin: 0;
  border-radius: 4px;
  background-color: #FFF4E5;
  color: #663C00;
}

.lte-overlap[b-h9xx3gz9xi]  .lte-overlap-alert .mud-alert-icon {
  color: #FF9800;
}

.lte-overlap-records[b-h9xx3gz9xi] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lte-overlap-card[b-h9xx3gz9xi] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  background-color: #F7F9FC;
}

.lte-overlap-card.mod-deleted[b-h9xx3gz9xi] {
  border-color: #F44336;
  background-color: #FEECEB;
}

.lte-overlap-card-head[b-h9xx3gz9xi] {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lte-overlap[b-h9xx3gz9xi]  .lte-overlap-chip {
  height: 22px;
  margin: 0;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #FFFFFF;
}

.lte-overlap[b-h9xx3gz9xi]  .lte-overlap-heading {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  color: #212121;
}

.lte-overlap[b-h9xx3gz9xi]  .lte-overlap-hours {
  flex: 0 0 auto;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #212121;
}

.lte-overlap-card.mod-deleted[b-h9xx3gz9xi]  .lte-overlap-hours {
  color: #F44336;
}

.lte-overlap[b-h9xx3gz9xi]  .lte-overlap-delta {
  height: 22px;
  margin: 0;
  padding: 1px 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  background-color: #EEEEEE;
  color: #666666;
}

.lte-overlap[b-h9xx3gz9xi]  .lte-overlap-sentence {
  color: #666666;
}

.lte-overlap[b-h9xx3gz9xi]  .lte-overlap-footnote {
  color: #9E9E9E;
}

.mod-skin-dark .lte-overlap[b-h9xx3gz9xi]  .lte-overlap-intro,
.mod-skin-dark .lte-overlap[b-h9xx3gz9xi]  .lte-overlap-sentence,
.mod-skin-dark .lte-overlap[b-h9xx3gz9xi]  .lte-overlap-delta {
  color: #9AA0AB;
}

.mod-skin-dark .lte-overlap[b-h9xx3gz9xi]  .lte-overlap-alert {
  background-color: #3A2E17;
  color: #FFCC80;
}

.mod-skin-dark .lte-overlap-card[b-h9xx3gz9xi] {
  border-color: #3A3A3A;
  background-color: #262626;
}

.mod-skin-dark .lte-overlap-card.mod-deleted[b-h9xx3gz9xi] {
  border-color: #EF5350;
  background-color: #3A1F27;
}

.mod-skin-dark .lte-overlap[b-h9xx3gz9xi]  .lte-overlap-heading,
.mod-skin-dark .lte-overlap[b-h9xx3gz9xi]  .lte-overlap-hours {
  color: #BDBDBD;
}

.mod-skin-dark .lte-overlap-card.mod-deleted[b-h9xx3gz9xi]  .lte-overlap-hours {
  color: #EF5350;
}

.mod-skin-dark .lte-overlap[b-h9xx3gz9xi]  .lte-overlap-delta {
  background-color: #303030;
}

.mod-skin-dark .lte-overlap[b-h9xx3gz9xi]  .lte-overlap-footnote {
  color: #6E6E6E;
}
/* /Components/Pages/LiveTimeEntry/LiveTimeEntry.razor.rz.scp.css */
/* The heading is the design's page title: the h6 style (Roboto Medium 20/32) in the primary text colour, set
   12px in from the entry form's left edge, with 24px between it and the form. */
.lte-page[b-icmv8n6ooz]  .lte-page-date {
  line-height: 32px;
  margin: 0 0 24px;
  padding-left: 12px;
  color: var(--mud-palette-text-primary);
}
/* /Components/Pages/LiveTimeEntry/LiveTimeEntryForm.razor.rz.scp.css */
/* Geometry of the entry-form card: 24px card padding, 40px fields, 16px between fields in a row, 22px between rows,
   and a 32px title with 22px beneath it. Title and Comment take whatever width the form has left, down to a
   minimum, below which their row wraps. */
.lte-form[b-vlo9e8ic3m]  .lte-form-title {
  line-height: 32px;
  margin-bottom: 22px;
}

/* The warning about running work from an earlier day sits between the page heading and the form card. */
.lte-form[b-vlo9e8ic3m]  .lte-running-warning {
  margin-bottom: 24px;
  background-color: color-mix(in srgb, var(--mud-palette-warning) 10%, var(--mud-palette-surface));
  color: color-mix(in srgb, var(--mud-palette-warning) 40%, black);
}

.mod-skin-dark .lte-form[b-vlo9e8ic3m]  .lte-running-warning {
  background-color: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-surface));
  color: color-mix(in srgb, var(--mud-palette-warning) 50%, white);
}

.lte-form[b-vlo9e8ic3m]  .lte-running-warning {
  padding: 12px 16px;
}

.lte-form[b-vlo9e8ic3m]  .lte-running-warning .mud-alert-message {
  padding: 0;
}

.lte-form[b-vlo9e8ic3m]  .lte-running-warning-title {
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 2px;
}

.lte-rows[b-vlo9e8ic3m] {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.lte-row[b-vlo9e8ic3m] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

.lte-field[b-vlo9e8ic3m] {
  flex: 0 0 auto;
}

.lte-field-194[b-vlo9e8ic3m] { width: 194px; }
.lte-field-150[b-vlo9e8ic3m] { width: 150px; }

.lte-field-grow[b-vlo9e8ic3m] {
  flex: 1 1 0;
  min-width: 240px;
}

.lte-field[b-vlo9e8ic3m]  .mud-input-control {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

/* The spacer pushes Start work and Save interval to the row's right edge. */
.lte-row-spacer[b-vlo9e8ic3m] {
  flex: 1 1 0;
  min-width: 0;
}

.lte-form[b-vlo9e8ic3m]  .lte-start,
.lte-form[b-vlo9e8ic3m]  .lte-save {
  width: 165px;
  height: 39px;
  padding: 0 12px 0 16px;
  white-space: nowrap;
  margin-top: 0.5px;
}

/* "Next work" labels the form rows as the description of what starts next, set apart from the running work. */
.lte-form[b-vlo9e8ic3m]  .lte-next-work {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 8px;
  color: var(--mud-palette-text-disabled);
  text-transform: uppercase;
}

.lte-form[b-vlo9e8ic3m]  .lte-start-blocked {
  display: block;
  margin-top: -14px;
  text-align: right;
  color: var(--mud-palette-text-secondary);
}

@media (max-width: 600px) {
  .lte-field[b-vlo9e8ic3m],
  .lte-field-194[b-vlo9e8ic3m] {
    width: 100%;
    flex-basis: 100%;
  }

  .lte-field-time[b-vlo9e8ic3m] {
    width: calc((100% - 16px) / 2);
    flex-basis: calc((100% - 16px) / 2);
  }

  .lte-row-spacer[b-vlo9e8ic3m] {
    display: none;
  }

  .lte-form[b-vlo9e8ic3m]  .lte-start,
  .lte-form[b-vlo9e8ic3m]  .lte-save {
    width: 100%;
  }

  .lte-form[b-vlo9e8ic3m]  .lte-start-blocked {
    margin-top: 0;
    text-align: left;
  }
}
/* /Components/Pages/LiveTimeEntry/LiveTimeEntryHistory.razor.rz.scp.css */
/* The history card sits 24px below the entry form. Its rows run edge to edge, so the card itself has no padding:
   the 68px header and the status line carry their own 24px inset, and the card clips the date bands to its
   rounded corners. */
.lte-history-host[b-b1yfn2vkw2] {
  margin-top: 24px;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history {
  overflow: hidden;
}

.lte-history-header[b-b1yfn2vkw2] {
  display: flex;
  align-items: center;
  height: 68px;
  padding-left: 24px;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-title {
  font-size: 20px;
  font-weight: 500;
  color: #212121;
}

.lte-history-status[b-b1yfn2vkw2] {
  padding: 0 24px 24px;
}

.lte-history-list[b-b1yfn2vkw2] {
  display: flex;
  flex-direction: column;
}

/* Every row of all three levels has the same column tracks, so the key, project, comment and hours line up down
   the whole list: a 3px accent column, the title cell, key 102px, project 116px, the comment, hours 80px flush
   right and the row actions 96px, with 8px to the card's edge. The title cell and the comment share the width
   left over in the design's 434 : 282 proportion, so both grow and shrink with the window. The indent that
   moves the title further in at each level lives inside the title cell, which keeps it from shifting the
   columns to its right. */
.lte-history-row[b-b1yfn2vkw2] {
  --lte-lead: 64px;
  display: grid;
  grid-template-columns: 3px minmax(0, 434fr) 102px 116px minmax(0, 282fr) 80px 96px;
  align-items: center;
  padding-right: 8px;
  border-bottom: 1px solid #EEEEEE;
}

.lte-history-accent[b-b1yfn2vkw2] {
  grid-column: 1;
  align-self: stretch;
}

/* The title cell: the level's fixed indent holding the expander, then the content, which takes the rest and lets a
   long title end in an ellipsis. */
.lte-history-title-cell[b-b1yfn2vkw2] {
  grid-column: 2;
  display: flex;
  align-items: center;
  min-width: 0;
  padding-right: 16px;
}

.lte-history-lead[b-b1yfn2vkw2] {
  flex: 0 0 var(--lte-lead);
  display: flex;
  align-items: center;
}

.lte-history-main[b-b1yfn2vkw2] {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lte-history-key-cell[b-b1yfn2vkw2] {
  grid-column: 3;
  display: flex;
  align-items: center;
  min-width: 0;
}

/* The key chip: a 22px grey pill sized to its text, 8px either side, the key in 12px secondary grey. A key too
   long for the column ends in an ellipsis. */
.lte-history-host[b-b1yfn2vkw2]  .lte-history-key {
  height: 22px;
  max-width: 100%;
  margin: 0;
  padding: 0 8px;
  border-radius: 99px;
  background-color: #EEEEEE;
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-key .mud-chip-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-project {
  grid-column: 4;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-comment {
  grid-column: 5;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-label,
.lte-history-host[b-b1yfn2vkw2]  .lte-history-project,
.lte-history-host[b-b1yfn2vkw2]  .lte-history-comment {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-project,
.lte-history-host[b-b1yfn2vkw2]  .lte-history-comment {
  padding-right: 16px;
  color: #666666;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-hours {
  grid-column: 6;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: #212121;
}

/* The row actions: three 20px icons on a 30px pitch, the first icon 16px into the cell. Each button is 30px
   square with the icon centred, so it starts 5px before its icon. Colours come from the theme's palette. */
.lte-history-actions[b-b1yfn2vkw2] {
  grid-column: 7;
  display: flex;
  align-items: center;
  padding-left: 11px;
}

.lte-history-action-slot[b-b1yfn2vkw2] {
  flex: none;
  width: 30px;
  height: 30px;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-action {
  width: 30px;
  height: 30px;
  padding: 5px;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-toggle {
  width: 40px;
  height: 40px;
  padding: 10px;
  color: #757575;
}

/* Level 1, the date: a 52px band with the accent bar down its left edge and the expander right after it, so the
   label starts at 43px. Today has nothing to collapse; its expander cell stays empty to keep the label in line.
   The title cell runs across the key, project and comment columns, which a date row leaves empty. */
.lte-history-date[b-b1yfn2vkw2] {
  --lte-lead: 40px;
  min-height: 52px;
  background-color: #F7F9FC;
}

.lte-history-date .lte-history-accent[b-b1yfn2vkw2] {
  background-color: #4679CC;
}

.lte-history-date .lte-history-title-cell[b-b1yfn2vkw2] {
  grid-column: 2 / 6;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-date-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 500;
  color: #212121;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-date .lte-history-hours {
  font-size: 16px;
}

/* Level 2, the piece of work: the expander sits 24px further in, so the title starts at 67px. */
.lte-history-record[b-b1yfn2vkw2] {
  min-height: 44px;
}

.lte-history-record .lte-history-lead[b-b1yfn2vkw2] {
  justify-content: flex-end;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-record .lte-history-label {
  color: #212121;
}

/* Today's intervals: the time range in a fixed 88px, then the title in the secondary grey, both starting at 67px
   like the work rows. */
.lte-history-interval.mod-flat[b-b1yfn2vkw2] {
  min-height: 42px;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lte-history-host[b-b1yfn2vkw2]  .mod-flat .lte-history-time {
  width: 88px;
  font-weight: 500;
  color: #212121;
}

.lte-history-host[b-b1yfn2vkw2]  .mod-flat .lte-history-label {
  color: #666666;
}

/* Level 3, an interval under its work: a quieter row of only the time range, from 115px, and its hours. */
.lte-history-interval.mod-nested[b-b1yfn2vkw2] {
  --lte-lead: 112px;
  min-height: 40px;
}

.lte-history-host[b-b1yfn2vkw2]  .mod-nested .lte-history-time {
  color: #666666;
}

.lte-history-host[b-b1yfn2vkw2]  .mod-nested .lte-history-hours {
  font-weight: 400;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-note {
  padding: 12px 24px 12px 67px;
  border-bottom: 1px solid #EEEEEE;
  color: #666666;
}

/* The earlier months' failure sits under the current month's list, so it keeps a gap above it. */
.lte-history-status.mod-after-list[b-b1yfn2vkw2] {
  padding-top: 16px;
}

/* Show more stands centred under the last earlier month. */
.lte-history-more[b-b1yfn2vkw2] {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}

/*
 * Show more reads as the footer's muted caption rather than a call to action: the disabled-text grey in mixed case,
 * at caption size on a 20px line with no vertical padding, so the footer keeps the 52px of a caption footer.
 */
.lte-history-host[b-b1yfn2vkw2]  .lte-history-more-button {
  color: #9E9E9E;
  text-transform: none;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  min-width: 0;
  padding: 0 4px;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-more-button .mud-button-icon-start {
  margin-left: 0;
  margin-right: 4px;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-more-button .mud-button-icon-start .mud-icon-root {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

/* The progress indicator takes the expand icon's place and size while a page of months is read. */
.lte-history-host[b-b1yfn2vkw2]  .lte-history-more-progress {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

/* The progress bar or error of a month whose work is being read, directly under its band. */
.lte-history-status.mod-under-band[b-b1yfn2vkw2] {
  padding: 8px 24px;
}

/* An earlier month: the date band's structure in a deeper tint with a grey accent bar instead of the blue one, and
   a lock after the expander, so the closed region reads differently from a date of the current month without a
   caption. The lead is wide enough for the expander and the lock, so the label starts further in than a date's. */
.lte-history-date.mod-month[b-b1yfn2vkw2] {
  --lte-lead: 64px;
  background-color: #EDF2F9;
}

.lte-history-date.mod-month .lte-history-accent[b-b1yfn2vkw2] {
  background-color: #E0E0E0;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-lock {
  flex: 0 0 auto;
  margin-left: -3px;
  font-size: 14px;
  color: #9E9E9E;
}

/* Level 2 of an earlier month: the comment column carries the date the work was last worked, after a small
   history icon. */
.lte-history-last-worked[b-b1yfn2vkw2] {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-last-worked-icon {
  flex: 0 0 auto;
  font-size: 13px;
  color: #9E9E9E;
}

.lte-history-host[b-b1yfn2vkw2]  .lte-history-last-worked-date {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: #9E9E9E;
}

/* Level 3 of an earlier month: a small bold date in a fixed 34px column and a 10px gap ahead of the time range, so the times line up
   down the month. */
.lte-history-host[b-b1yfn2vkw2]  .lte-history-interval-date {
  flex: 0 0 34px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: #666666;
}

/* The dark theme keeps the structure; the band takes the dark panel tint, text the theme's light
   grey and secondary grey, and the hairlines the dark theme's translucent white. */
.mod-skin-dark .lte-history-row[b-b1yfn2vkw2],
.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .lte-history-note {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.mod-skin-dark .lte-history-date[b-b1yfn2vkw2] {
  background-color: #262626;
}

/* A date band's accent bar takes a lighter blue that stands out on the dark surface. */
.mod-skin-dark .lte-history-date .lte-history-accent[b-b1yfn2vkw2] {
  background-color: #8AA6E6;
}

/* An earlier month's band takes the page tone, a step darker than the date band, with a grey accent bar. */
.mod-skin-dark .lte-history-date.mod-month[b-b1yfn2vkw2] {
  background-color: #121212;
}

.mod-skin-dark .lte-history-date.mod-month .lte-history-accent[b-b1yfn2vkw2] {
  background-color: #3A3A3A;
}

.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .lte-history-title,
.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .lte-history-date-label,
.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .lte-history-hours,
.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .lte-history-record .lte-history-label,
.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .mod-flat .lte-history-time {
  color: #BDBDBD;
}

.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .lte-history-project,
.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .lte-history-comment,
.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .mod-flat .lte-history-label,
.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .mod-nested .lte-history-time,
.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .lte-history-key {
  color: #9AA0AB;
}

.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .lte-history-note {
  color: var(--mud-palette-text-secondary);
}

.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .lte-history-more-button {
  color: #6E6E6E;
}

.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .lte-history-toggle {
  color: #757575;
}

/* The month region's own details: the lock and the history icon keep the light theme's grey, the last-worked date
   is dimmer than the text beside it, and the interval's date matches its time. */
.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .lte-history-lock,
.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .lte-history-last-worked-icon {
  color: #9E9E9E;
}

.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .lte-history-last-worked-date {
  color: #6E6E6E;
}

.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .lte-history-interval-date {
  color: #9AA0AB;
}

.mod-skin-dark .lte-history-host[b-b1yfn2vkw2]  .lte-history-key {
  background-color: rgba(255, 255, 255, 0.12);
}

/* On a narrow screen the key chip stays right after the title, the project and comment drop under them, each on
   its own line and only when it has a value, the hours keep a narrower column and the row actions stay at the
   right end of the first line; nothing scrolls sideways. */
@media (max-width: 600px) {
  .lte-history-row[b-b1yfn2vkw2] {
    grid-template-columns: 3px minmax(0, 1fr) auto 56px auto;
    padding-right: 16px;
  }

  .lte-history-record[b-b1yfn2vkw2],
  .lte-history-interval.mod-flat[b-b1yfn2vkw2],
  .lte-history-interval.mod-dated[b-b1yfn2vkw2] {
    row-gap: 2px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .lte-history-accent[b-b1yfn2vkw2],
  .lte-history-title-cell[b-b1yfn2vkw2],
  .lte-history-key-cell[b-b1yfn2vkw2],
  .lte-history-actions[b-b1yfn2vkw2],
  .lte-history-host[b-b1yfn2vkw2]  .lte-history-hours {
    grid-row: 1;
  }

  .lte-history-actions[b-b1yfn2vkw2] {
    grid-column: 5;
    padding-left: 4px;
  }

  .lte-history-key-cell[b-b1yfn2vkw2] {
    max-width: 96px;
    padding-right: 8px;
  }

  .lte-history-host[b-b1yfn2vkw2]  .lte-history-hours {
    grid-column: 4;
  }

  .lte-history-date .lte-history-title-cell[b-b1yfn2vkw2] {
    grid-column: 2 / 4;
  }

  .lte-history-host[b-b1yfn2vkw2]  .lte-history-project,
  .lte-history-host[b-b1yfn2vkw2]  .lte-history-comment {
    grid-column: 2 / 6;
    padding-left: var(--lte-lead);
  }

  .lte-history-host[b-b1yfn2vkw2]  .lte-history-project {
    grid-row: 2;
  }

  .lte-history-host[b-b1yfn2vkw2]  .lte-history-comment {
    grid-row: 3;
  }

  .lte-history-host[b-b1yfn2vkw2]  .lte-history-project:empty,
  .lte-history-host[b-b1yfn2vkw2]  .lte-history-comment:empty {
    display: none;
  }

  .lte-history-host[b-b1yfn2vkw2]  .lte-history-note {
    padding-left: 24px;
  }
}
/* /Components/Pages/LiveTimeEntry/RunningWorkBar.razor.rz.scp.css */
/* Geometry of the running bar: a primary-tinted band, radius 4, padding 14px 20px, its parts 16px apart in one
   row — the pulse dot, the description, the elapsed count, Finish work and Discard. The tint mixes the theme's primary
   into its surface, more strongly on the dark surface so the band still reads there. */
.lte-running[b-shjnsnvmcx] {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 108px;
  padding: 14px 20px;
  margin-bottom: 22px;
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
}

.mod-skin-dark .lte-running[b-shjnsnvmcx] {
  background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, var(--mud-palette-surface));
}

.lte-running-dot[b-shjnsnvmcx] {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--mud-palette-tertiary) 25%, transparent);
  animation: lte-running-pulse-b-shjnsnvmcx 2s ease-in-out infinite;
}

.lte-running-dot-core[b-shjnsnvmcx] {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--mud-palette-tertiary);
}

@keyframes lte-running-pulse-b-shjnsnvmcx {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-tertiary) 35%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-tertiary) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .lte-running-dot[b-shjnsnvmcx] {
    animation: none;
  }
}

/* The description takes the room left in the row and lets a long title end in an ellipsis rather than push the
   elapsed count and the button out of line. */
.lte-running-info[b-shjnsnvmcx] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.lte-running[b-shjnsnvmcx]  .lte-running-overline {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--mud-palette-primary);
}

.lte-running[b-shjnsnvmcx]  .lte-running-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--mud-palette-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lte-running[b-shjnsnvmcx]  .lte-running-subtitle {
  font-size: 12px;
  line-height: 20px;
  color: var(--mud-palette-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lte-running-elapsed[b-shjnsnvmcx] {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.lte-running[b-shjnsnvmcx]  .lte-running-elapsed-value {
  font-size: 34px;
  font-weight: 500;
  line-height: 42px;
  color: var(--mud-palette-primary);
  font-variant-numeric: tabular-nums;
}

/* The theme's primary is too dark to read on the dark band, so the overline and the elapsed count take the
   lighter violet the design sets for the dark theme; Finish work keeps the primary fill. */
.mod-skin-dark .lte-running[b-shjnsnvmcx]  .lte-running-overline,
.mod-skin-dark .lte-running[b-shjnsnvmcx]  .lte-running-elapsed-value {
  color: #A99EFF;
}

.lte-running[b-shjnsnvmcx]  .lte-running-elapsed-caption {
  font-size: 12px;
  line-height: 20px;
  color: var(--mud-palette-text-secondary);
}

.lte-running[b-shjnsnvmcx]  .lte-finish {
  flex: 0 0 auto;
  width: 150px;
  height: 39px;
  white-space: nowrap;
}

/* The warning skin, for work begun on an earlier day: the same band tinted with the theme's warning colour, and
   the resolve row below the description — End time 150px, Finish work 150px and Discard 93px, 16px apart —
   indented to line up with the description past the dot. */
.lte-running.mod-warning[b-shjnsnvmcx] {
  flex-wrap: wrap;
  row-gap: 14px;
  padding-bottom: 18px;
  background-color: color-mix(in srgb, var(--mud-palette-warning) 10%, var(--mud-palette-surface));
}

.mod-skin-dark .lte-running.mod-warning[b-shjnsnvmcx] {
  background-color: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-surface));
}

.lte-running.mod-warning .lte-running-dot[b-shjnsnvmcx] {
  background-color: color-mix(in srgb, var(--mud-palette-warning) 25%, transparent);
  animation: none;
}

.lte-running.mod-warning .lte-running-dot-core[b-shjnsnvmcx] {
  background-color: var(--mud-palette-warning);
}

/* Discard takes a deeper warning tone than MudBlazor's own on either band, whose plain warning text is too pale
   to read on the tint; the warning skin's overline shares it. */
.lte-running.mod-warning[b-shjnsnvmcx]  .lte-running-overline,
.lte-running[b-shjnsnvmcx]  .lte-discard {
  color: color-mix(in srgb, var(--mud-palette-warning) 40%, black);
}

.lte-running[b-shjnsnvmcx]  .lte-discard {
  border-color: currentColor;
}

.lte-running.mod-warning[b-shjnsnvmcx]  .lte-running-elapsed-value {
  color: var(--mud-palette-warning);
}

.mod-skin-dark .lte-running.mod-warning[b-shjnsnvmcx]  .lte-running-overline,
.mod-skin-dark .lte-running[b-shjnsnvmcx]  .lte-discard {
  color: color-mix(in srgb, var(--mud-palette-warning) 50%, white);
}

.lte-running-resolve[b-shjnsnvmcx] {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  padding-left: 36px;
}

.lte-running-end-time[b-shjnsnvmcx] {
  flex: 0 0 auto;
  width: 150px;
}

.lte-running-end-time[b-shjnsnvmcx]  .mud-input-control {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

.lte-running-resolve[b-shjnsnvmcx]  .lte-finish,
.lte-running-resolve[b-shjnsnvmcx]  .lte-discard {
  margin-top: 0.5px;
}

.lte-running[b-shjnsnvmcx]  .lte-discard {
  flex: 0 0 auto;
  width: 93px;
  height: 39px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .lte-running[b-shjnsnvmcx] {
    flex-wrap: wrap;
  }

  .lte-running-info[b-shjnsnvmcx] {
    flex-basis: calc(100% - 36px);
  }

  .lte-running-elapsed[b-shjnsnvmcx] {
    align-items: flex-start;
  }

  .lte-running[b-shjnsnvmcx]  .lte-finish {
    margin-left: auto;
  }

  .lte-running-resolve[b-shjnsnvmcx] {
    padding-left: 0;
  }

  .lte-running-resolve[b-shjnsnvmcx]  .lte-finish {
    margin-left: 0;
  }
}
/* /Components/Pages/Reports/LackTimeReport.razor.rz.scp.css */
.ltr-panel-header[b-n9v7h7lq1m] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  overflow: visible;
  padding: 8px 16px;
  border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ltr-panel-title[b-n9v7h7lq1m] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Honor the <col> widths strictly so the hours columns stay narrow
   and Full name absorbs the remaining width. */
.pa-4[b-n9v7h7lq1m]  table {
  table-layout: fixed;
}

/* Allow narrow column headers to wrap onto multiple lines instead of
   being clipped by the fixed column widths. */
.pa-4[b-n9v7h7lq1m]  th,
.pa-4[b-n9v7h7lq1m]  th .column-header,
.pa-4[b-n9v7h7lq1m]  th .sortable-column-header {
  white-space: normal;
}

/* Top-align the header title cells so wrapped two-line titles start at the top. */
.pa-4[b-n9v7h7lq1m]  thead tr:first-child th {
  vertical-align: top;
}

/* Vertically center the filter (search) row so its inputs sit at the same
   height as on the Time Board grid, rather than pinned to the top of the cell. */
.pa-4[b-n9v7h7lq1m]  thead tr:nth-child(2) th {
  vertical-align: middle;
}

/* Center the header text of the numeric (hours) columns. The sortable
   header spans the full cell width (.sortable-column-header{width:100%})
   and reserves space for the sort icon, so center the text inside it and
   trim the cell padding to leave room for the text + icon in the narrow
   fixed-width columns. */
.pa-4[b-n9v7h7lq1m]  th.ltr-num-header {
  padding-left: 6px;
  padding-right: 6px;
}

.pa-4[b-n9v7h7lq1m]  th.ltr-num-header .sortable-column-header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Keep the first-column header + filter cells as real table cells so they
   stretch to the header row height like every other column (a flex <th> would
   drop out of the table row's height equalization and render shorter). Center
   their content vertically; horizontal placement of the buttons and the body
   person icon is handled by the flex wrappers in the column templates, matching
   the Web API Keys actions column (header icons end-aligned, the single body
   icon start-aligned under the leftmost header icon). */
.pa-4[b-n9v7h7lq1m]  thead tr th:first-child {
  display: table-cell;
  vertical-align: middle;
}

/* Trim the default cell padding on the actions column so its content box is
   exactly the width of the two header icons (Refresh + filter toggle). That
   makes the start-aligned body person icon line up under Refresh and the
   end-aligned filter-row clear button line up under the filter toggle. */
.pa-4[b-n9v7h7lq1m]  thead tr th:first-child,
.pa-4[b-n9v7h7lq1m]  tbody tr td:first-child {
  padding-left: 6px;
  padding-right: 6px;
}

/* The body person icon is a plain (non-interactive) icon, so it starts flush at
   the cell content edge; the header icons are icon buttons with 3px of internal
   padding, so nudge the person icon 3px to keep its glyph under the Refresh glyph. */
.pa-4[b-n9v7h7lq1m]  td:first-child .ltr-person-cell {
  padding-left: 3px;
}
/* /Components/Pages/Reports/TimeControl.razor.rz.scp.css */
.tc-panel-header[b-hno1wvwe1o] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: calc(48px + 32px + 1px);
  flex: 0 0 auto;
  overflow: visible;
  padding: 16px;
  border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tc-panel-title[b-hno1wvwe1o] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-panel-body[b-hno1wvwe1o] {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px;
}

.tc-tree-area[b-hno1wvwe1o] {
  overflow-y: auto;
}

.tc-content-area[b-hno1wvwe1o] {
  overflow-y: auto;
}

.tc-loading[b-hno1wvwe1o] {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 160px;
}

.tc-tree-row[b-hno1wvwe1o] {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding-right: 4px;
  border-radius: 4px;
  cursor: pointer;
}

.tc-tree-row-selected[b-hno1wvwe1o] {
  background: rgba(25, 118, 210, 0.08);
}

.tc-node-icon[b-hno1wvwe1o] {
  font-size: 14px;
  width: 16px;
}

.tc-node-text[b-hno1wvwe1o] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Highlight users who reported fewer hours than the period target (legacy "text-danger" parity). */
.tc-content-area[b-hno1wvwe1o]  .tc-row-danger td {
  color: var(--mud-palette-error);
}
/* /Components/Pages/TimeBoard/SummaryPanel.razor.rz.scp.css */
.summary-table[b-4rgupo19mo] {
  border-collapse: collapse;
  font-size: 0.85rem;
}

.summary-table th[b-4rgupo19mo],
.summary-table td[b-4rgupo19mo] {
  border: 1px solid #dee2e6;
  padding: 6px 8px;
}

.summary-label-cell[b-4rgupo19mo] {
  min-width: 140px;
  background: #f8f9fa;
  vertical-align: bottom;
}

.summary-header-cell[b-4rgupo19mo] {
  text-align: center;
  vertical-align: bottom;
  min-width: 40px;
  padding: 4px !important;
}

.summary-sum-cell[b-4rgupo19mo] {
  font-size: 1.1rem;
  font-weight: bold;
}

.summary-rotated[b-4rgupo19mo] {
  height: 46px;
  width: 45px;
  white-space: nowrap;
  position: relative;
  vertical-align: bottom;
  padding: 0 !important;
}

.summary-rotated > div[b-4rgupo19mo] {
  position: relative;
  top: -15px;
  left: 1px;
  transform: rotate(-50deg);
  font-size: 0.8rem;
}

[b-4rgupo19mo] .summary-weekend {
  color: #c62828;
  background-color: rgba(198, 40, 40, 0.06);
}

.summary-value-cell[b-4rgupo19mo] {
  text-align: center;
  color: #999;
}

.summary-has-value[b-4rgupo19mo] {
  color: #333;
  font-weight: 600;
}

.summary-expected[b-4rgupo19mo] {
  color: #999;
  font-weight: 600;
  white-space: nowrap;
}

[b-4rgupo19mo] .summary-weekend-cell {
  background-color: rgba(198, 40, 40, 0.06);
}

[b-4rgupo19mo] .summary-row-billable td {
  background-color: rgba(40, 167, 69, 0.1);
}

[b-4rgupo19mo] .summary-row-billable .summary-weekend-cell {
  background-color: rgba(40, 167, 69, 0.15);
}

[b-4rgupo19mo] .summary-row-nonbillable td {
  background-color: rgba(255, 193, 7, 0.1);
}

[b-4rgupo19mo] .summary-row-nonbillable .summary-weekend-cell {
  background-color: rgba(255, 193, 7, 0.15);
}

[b-4rgupo19mo] .summary-row-total td {
  background-color: rgba(0, 123, 255, 0.08);
}

[b-4rgupo19mo] .summary-row-total .summary-weekend-cell {
  background-color: rgba(0, 123, 255, 0.12);
}
/* /Components/Pages/TimeBoard/TimeBoardHoursDialog.razor.rz.scp.css */
/* The hours dialog, as drawn in the design: alerts, the shared panel and option cards of the decision dialogs
   (tt-decision-dialog.css), and the difference row with its success-coloured value and grey pill. Light values
   are the design's; the dark ones come from the .mod-skin-dark overrides. */
.tb-hours[b-jvsugqz03s] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 601px) {
  .tb-hours[b-jvsugqz03s]  .lte-dialog-label {
    flex-basis: 150px;
  }
}

.tb-hours[b-jvsugqz03s]  .tb-hours-alert {
  margin: 0;
  border-radius: 4px;
}

.tb-hours[b-jvsugqz03s]  .tb-hours-alert.mud-alert-text-warning {
  background-color: #FFF4E5;
  color: #663C00;
}

.tb-hours[b-jvsugqz03s]  .tb-hours-alert.mud-alert-text-error {
  background-color: #FDEDED;
  color: #5F2120;
}

.tb-hours[b-jvsugqz03s]  .tb-hours-difference {
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #212121;
}

.tb-hours[b-jvsugqz03s]  .tb-hours-difference.mod-increase {
  color: #4CAF50;
}

.tb-hours[b-jvsugqz03s]  .tb-hours-pill {
  height: 22px;
  margin: 0;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background-color: #EEEEEE;
  color: #424242;
}

.mod-skin-dark .tb-hours[b-jvsugqz03s]  .tb-hours-alert.mud-alert-text-warning {
  background-color: #3A2E17;
  color: #FFCC80;
}

.mod-skin-dark .tb-hours[b-jvsugqz03s]  .tb-hours-alert.mud-alert-text-error {
  background-color: #3A1F27;
  color: #FFB3C1;
}

.mod-skin-dark .tb-hours[b-jvsugqz03s]  .tb-hours-difference {
  color: #BDBDBD;
}

.mod-skin-dark .tb-hours[b-jvsugqz03s]  .tb-hours-difference.mod-increase {
  color: #66BB6A;
}

.mod-skin-dark .tb-hours[b-jvsugqz03s]  .tb-hours-pill {
  background-color: #3A3A3A;
  color: #BDBDBD;
}
/* /Components/Pages/TimeBoard/TimeBoardIdentityDialog.razor.rz.scp.css */
/* The identity dialog's diff: four label | old | → | new lines inside the shared decision-dialog panel
   (tt-decision-dialog.css). A changed line is tinted, its old value grey and struck through and its new value
   bold in the primary colour; an unchanged line stays plain. Light values are the design's; the dark ones come
   from the .mod-skin-dark overrides. */
.tb-identity[b-ji57nipwm3] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 601px) {
  .tb-identity[b-ji57nipwm3]  .lte-dialog-label {
    flex-basis: 150px;
  }
}

.tb-identity .tb-identity-diff[b-ji57nipwm3] {
  gap: 2px;
  padding: 8px;
}

.tb-identity .tb-identity-diff-row[b-ji57nipwm3] {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  padding: 6px 8px;
  border-radius: 4px;
}

.tb-identity .tb-identity-diff-row.mod-changed[b-ji57nipwm3] {
  background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, #FFFFFF);
}

.tb-identity[b-ji57nipwm3]  .tb-identity-label {
  color: #666666;
}

.tb-identity[b-ji57nipwm3]  .tb-identity-old,
.tb-identity[b-ji57nipwm3]  .tb-identity-new {
  overflow-wrap: anywhere;
  color: #212121;
}

.tb-identity[b-ji57nipwm3]  .tb-identity-arrow {
  color: #9E9E9E;
}

.tb-identity .mod-changed[b-ji57nipwm3]  .tb-identity-old {
  color: #9E9E9E;
  text-decoration: line-through;
}

.tb-identity .mod-changed[b-ji57nipwm3]  .tb-identity-new {
  font-weight: 500;
  color: var(--mud-palette-primary);
}

.mod-skin-dark .tb-identity .tb-identity-diff-row.mod-changed[b-ji57nipwm3] {
  background-color: #2A2748;
}

.mod-skin-dark .tb-identity[b-ji57nipwm3]  .tb-identity-label {
  color: #9AA0AB;
}

.mod-skin-dark .tb-identity[b-ji57nipwm3]  .tb-identity-old,
.mod-skin-dark .tb-identity[b-ji57nipwm3]  .tb-identity-new {
  color: #BDBDBD;
}

.mod-skin-dark .tb-identity[b-ji57nipwm3]  .tb-identity-arrow {
  color: #6E6E6E;
}

.mod-skin-dark .tb-identity .mod-changed[b-ji57nipwm3]  .tb-identity-old {
  color: #6E6E6E;
}

.mod-skin-dark .tb-identity .mod-changed[b-ji57nipwm3]  .tb-identity-new {
  color: var(--mud-palette-primary);
}
/* /Components/Pages/WhatsNew/WhatsNewPage.razor.rz.scp.css */
/* The release notes are authored in the Quill editor and stored verbatim, then rendered here as a raw
   MarkupString. None of Quill's editor stylesheet reaches this page, so the list markers, list indentation
   and heading rhythm the author sees in the editor are reproduced here to match it. */

/* Quill encodes a list's kind in a data-list attribute and always uses <ol> as the element, so native <ol>
   numbering is switched off and the marker is drawn from data-list instead: a bullet for "bullet", a running
   number for "ordered". The counter restarts per list so each block numbers from one. */
.whats-new-content[b-ifxmtjjokb]  ol,
.whats-new-content[b-ifxmtjjokb]  ul {
  list-style: none;
  margin: 0.5em 0;
  padding-left: 2em;
  counter-reset: whats-new-ordered;
}

.whats-new-content[b-ifxmtjjokb]  li {
  position: relative;
  margin: 0.15em 0;
}

.whats-new-content[b-ifxmtjjokb]  li[data-list="ordered"] {
  counter-increment: whats-new-ordered;
}

.whats-new-content[b-ifxmtjjokb]  li[data-list="bullet"]::before {
  content: "\2022";
  position: absolute;
  left: -1em;
}

.whats-new-content[b-ifxmtjjokb]  li[data-list="ordered"]::before {
  content: counter(whats-new-ordered) ". ";
  position: absolute;
  left: -1.5em;
}

/* Quill leaks empty spacer spans (its runtime marker holders) into the saved markup; they carry nothing on
   this page and the marker is drawn from the li itself, so they are hidden to avoid stray inline boxes. */
.whats-new-content[b-ifxmtjjokb]  .ql-ui {
  display: none;
}

/* Heading rhythm matching the editor: headings are separated from what precedes them and sit close to the
   content they introduce. The first block never carries a leading gap. */
.whats-new-content[b-ifxmtjjokb]  h1,
.whats-new-content[b-ifxmtjjokb]  h2,
.whats-new-content[b-ifxmtjjokb]  h3 {
  margin: 1em 0 0.4em;
  line-height: 1.2;
  font-weight: 600;
}

/* Sizes match the editor. Each level steps up noticeably from the body text, with the largest relative jump
   at h3 so a third-level heading still reads as a heading rather than emphasised body text. The global
   FontProperties.css collapses h1/h2/h3 to 26/16/16px with !important, so these sizes need !important to win
   inside the release notes without disturbing headings elsewhere. */
.whats-new-content[b-ifxmtjjokb]  h1 {
  font-size: 2.1em !important;
}

.whats-new-content[b-ifxmtjjokb]  h2 {
  font-size: 1.65em !important;
}

.whats-new-content[b-ifxmtjjokb]  h3 {
  font-size: 1.4em !important;
}

.whats-new-content[b-ifxmtjjokb]  p {
  margin: 0.5em 0;
}

.whats-new-content[b-ifxmtjjokb]  > :first-child {
  margin-top: 0;
}
/* /Components/Shared/AnalyzerReportPanel.razor.rz.scp.css */
/* The header cell holds only the select-all checkbox: MudBlazor's empty column-options slot is dropped and the flex header centres what remains, so the checkbox sits on the column centre like the row checkboxes. */
.analyzer-report[b-0sco4y1gyr]  .analyzer-select-column .column-options {
  display: none;
}

.analyzer-report[b-0sco4y1gyr]  .analyzer-select-column .column-header {
  justify-content: center;
}

/* The error popup is teleported into the popover provider, outside .analyzer-report, so it is styled by its own scoped class. The error text is explicitly selectable so the user can copy it whatever the popover inherits. */
.analyzer-error-text[b-0sco4y1gyr] {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
  max-width: 480px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* /Components/Shared/AppPageHeader.razor.rz.scp.css */
/* The current page is the last breadcrumb, which MudBlazor renders as a disabled link and therefore
   near-transparent. Give that link full-emphasis text and a medium weight so "you are here" reads
   clearly instead of fading out; the palette token keeps it correct in both the light and dark themes. */
[b-xkdr86mpys] .mud-breadcrumbs .mud-breadcrumb-item:last-child a {
  color: var(--mud-palette-text-primary);
  font-weight: 500;
}
/* /Components/Shared/DateRangeSelector.razor.rz.scp.css */
.tt-date-range-selector[b-9jrdwyie61] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Fix the picker input to a stable width via scoped CSS rather than an inline Style on the
   MudDateRangePicker. MudPicker splats its Style onto both the input and the teleported popover
   paper, so an inline "width:300px" also capped the popover and clipped the range picker's second
   month calendar (#487 regression). This ::deep rule targets only the in-place .mud-picker inside
   the wrapper; the popover teleports to <body>, outside the wrapper, so it keeps auto-sizing to
   both months. */
.tt-date-range-selector[b-9jrdwyie61]  .mud-picker {
  width: 300px;
}
/* /Components/Shared/GridFilterToggle.razor.rz.scp.css */
/* Active state of the filter-row toggle: a light chip (info colour at 14%) behind the icon.
   Same treatment as TimeBoard.razor.css from #511. */
.tt-filter-toggle[b-llqzi9v8md] {
    display: inline-flex;
    border-radius: var(--mud-default-borderradius);
}

.tt-filter-toggle--active[b-llqzi9v8md] {
    background-color: rgba(33, 150, 243, 0.14);
}
/* /Components/Shared/InlineDataGrid.razor.rz.scp.css */
[b-k0si66g6n0] .inline-editing-row td {
  background-color: lightcyan !important;
  padding: 4px 8px;
  overflow: hidden;
}

/* ── Strip top-level MudBlazor input control wrapper margins ─────────────── */
[b-k0si66g6n0] .inline-editing-row td .mud-input-control {
  margin: 0;
  height: 1.25em;
  overflow: hidden;
}

[b-k0si66g6n0] .inline-editing-row td .mud-input {
  margin: 0;
}

/* ── Hide helper / hint / validation text (removes reserved space below input) */
[b-k0si66g6n0] .inline-editing-row td .mud-input-helper-text {
  display: none;
}

/* ── Input slot — strip vertical padding, centred flex ───────────────────── */
[b-k0si66g6n0] .inline-editing-row td .mud-input-slot {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
  display: flex;
  align-items: center;
}

/* ── Native inputs and textareas — match cell font size, constrain height ── */
[b-k0si66g6n0] .inline-editing-row td input.mud-input-slot,
[b-k0si66g6n0] .inline-editing-row td textarea.mud-input-slot,
[b-k0si66g6n0] .inline-editing-row td input {
  font-size: inherit !important;
  line-height: inherit !important;
  vertical-align: middle;
  height: 1.25em;
  padding: 0;
}

/* ── MudSelect display value ─────────────────────────────────────────────── */
[b-k0si66g6n0] .inline-editing-row td .mud-select-input {
  font-size: inherit !important;
  line-height: inherit !important;
  vertical-align: middle;
  height: 1.25em;
  padding: 0;
}

/* ── Outlined / text input variant wrappers ──────────────────────────────── */
[b-k0si66g6n0] .inline-editing-row td .mud-input-outlined,
[b-k0si66g6n0] .inline-editing-row td .mud-input-text {
  padding-top: 0;
  padding-bottom: 0;
  height: 1.25em;
}

/* ── Fieldset (outlined variant border box) — strip spacing, remove border ─ */
[b-k0si66g6n0] .inline-editing-row td fieldset {
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  min-height: 0;
  border: none !important;
}

/* ── Control-input-slot inner container ─────────────────────────────────── */
[b-k0si66g6n0] .inline-editing-row td .mud-input-control-input-slot {
  margin: 0;
  padding: 0;
}

/* ── Floating labels — collapse so they don't add height ────────────────── */
[b-k0si66g6n0] .inline-editing-row td .mud-input-label {
  font-size: inherit !important;
  line-height: inherit !important;
  position: static;
  transform: none;
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
}

/* ── Checkbox label text ─────────────────────────────────────────────────── */
[b-k0si66g6n0] .inline-editing-row td .mud-checkbox .mud-button-label {
  font-size: inherit;
  line-height: inherit;
  vertical-align: middle;
}

[b-k0si66g6n0] .inline-inserted-row td {
  background-color: #f5f5f5 !important;
}

/* ── Grid separators (#518) ──────────────────────────────────────────────────
   1. MudDataGridPager draws the footer separator as its own toolbar's
      border-top. TimeBoard fills PagerContent with Add / Bulk add + a spacer
      before the pager, so the pager (and that border) is pushed to the right
      and the line floats mid-grid. Remove it — the row/header cell borders
      already separate the body from the footer. */
[b-k0si66g6n0] .mud-table-pagination .mud-table-pagination-toolbar {
  border-top: none;
}

/* 2. MudBlazor draws the row/header separators as a 1px border on each
      <td>/<th>. When the grid lands on a fractional device-Y — which happens
      once the Summary panel expands and the page gains a vertical scrollbar —
      Chromium drops those hairlines on every column except the first, so the
      grid's bottom edge renders only under the icons column and "hangs in the
      air". Promoting the grid to its own compositing layer snaps it to whole
      device pixels, keeping the per-cell borders crisp and continuous. This is
      layer-snapping, not a paint primitive, so it behaves the same across
      Chrome versions (unlike box-shadow on a <tr>, which some builds ignore). */
[b-k0si66g6n0] .mud-data-grid {
  transform: translateZ(0);
}
/* /Components/Shared/QuillEditor.razor.rz.scp.css */
.tt-quill[b-epeqn3tfpb] {
  position: relative;
  margin-top: 8px;
}

.tt-quill-label[b-epeqn3tfpb] {
  position: absolute;
  top: -9px;
  left: 10px;
  z-index: 1;
  background: var(--mud-palette-surface);
  padding: 0 4px;
  font-size: 0.75rem;
  color: var(--mud-palette-text-secondary);
  pointer-events: none;
}

/* Progressive enhancement, CSS-only: the host is empty until Quill fills it, so it stays collapsed and the
   plain textarea fallback shows. Once Quill has populated the host, the fallback is no longer needed. */
.tt-quill-host:empty[b-epeqn3tfpb] {
  display: none;
}

.tt-quill-host:not(:empty) + .tt-quill-fallback[b-epeqn3tfpb] {
  display: none;
}

.tt-quill-fallback[b-epeqn3tfpb] {
  width: 100%;
  box-sizing: border-box;
  min-height: 240px;
  padding: 8px 12px;
  border: 1px solid var(--mud-palette-lines-inputs);
  border-radius: 4px;
  font: inherit;
  resize: vertical;
  background: var(--mud-palette-surface);
  color: var(--mud-palette-text-primary);
}

/* Quill injects its toolbar and editor into the host, outside Blazor's control, so they are reached with
   ::deep and themed from the MudBlazor palette so the editor tracks light/dark like the rest of the dialog. */
.tt-quill-host[b-epeqn3tfpb]  .ql-toolbar {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-color: var(--mud-palette-lines-inputs);
}

.tt-quill-host[b-epeqn3tfpb]  .ql-container {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-color: var(--mud-palette-lines-inputs);
  min-height: 240px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--mud-palette-surface);
}

.tt-quill-host[b-epeqn3tfpb]  .ql-editor {
  min-height: 240px;
  color: var(--mud-palette-text-primary);
}

.tt-quill-host[b-epeqn3tfpb]  .ql-editor.ql-blank::before {
  color: var(--mud-palette-text-disabled);
  font-style: normal;
}

/* Quill's stylesheet zeroes every heading margin inside the editor, so consecutive headings and the text
   below them run together. Restore vertical rhythm around headings to match the rendered What's New page;
   the first block keeps no leading gap. */
.tt-quill-host[b-epeqn3tfpb]  .ql-editor h1,
.tt-quill-host[b-epeqn3tfpb]  .ql-editor h2,
.tt-quill-host[b-epeqn3tfpb]  .ql-editor h3 {
  margin: 1em 0 0.4em;
  line-height: 1.2;
  font-weight: 600;
}

/* Sizes match the rendered What's New page, with the largest relative jump at h3 so a third-level heading
   stays visibly a heading. The global FontProperties.css collapses h1/h2/h3 to 26/16/16px with !important —
   which otherwise flattens Quill's own heading sizes here too — so these sizes need !important to win. */
.tt-quill-host[b-epeqn3tfpb]  .ql-editor h1 {
  font-size: 2.1em !important;
}

.tt-quill-host[b-epeqn3tfpb]  .ql-editor h2 {
  font-size: 1.65em !important;
}

.tt-quill-host[b-epeqn3tfpb]  .ql-editor h3 {
  font-size: 1.4em !important;
}

.tt-quill-host[b-epeqn3tfpb]  .ql-editor > :first-child {
  margin-top: 0;
}

/* Keep the toolbar glyphs visible on the dark theme (Quill hard-codes dark strokes/fills for the light one). */
.tt-quill-host[b-epeqn3tfpb]  .ql-toolbar .ql-stroke {
  stroke: var(--mud-palette-text-primary);
}

.tt-quill-host[b-epeqn3tfpb]  .ql-toolbar .ql-fill {
  fill: var(--mud-palette-text-primary);
}

.tt-quill-host[b-epeqn3tfpb]  .ql-toolbar .ql-picker {
  color: var(--mud-palette-text-primary);
}

/* Quill only supplies labels for its built-in pickers. The configured token picker stores its literal values
   in data-value, so render those values explicitly rather than leaving an empty menu. */
.tt-quill-host[b-epeqn3tfpb]  .ql-toolbar .ql-picker.ql-placeholder {
  width: 150px;
}

.tt-quill-host[b-epeqn3tfpb]  .ql-toolbar .ql-picker.ql-placeholder .ql-picker-label::before {
  content: "Insert token";
}

.tt-quill-host[b-epeqn3tfpb]  .ql-toolbar .ql-picker.ql-placeholder .ql-picker-options {
  min-width: 180px;
}

.tt-quill-host[b-epeqn3tfpb]  .ql-toolbar .ql-picker.ql-placeholder .ql-picker-item::before {
  content: attr(data-value);
  white-space: nowrap;
}

/* The picker inserts text instead of holding a value, so no option is ever "current": render every item and
   its label in the same colour, overriding Quill's blue highlight for selected/active/hovered picker state. */
.tt-quill-host[b-epeqn3tfpb]  .ql-toolbar .ql-picker.ql-placeholder .ql-picker-label,
.tt-quill-host[b-epeqn3tfpb]  .ql-toolbar .ql-picker.ql-placeholder .ql-picker-item {
  color: var(--mud-palette-text-primary) !important;
}

/* Give the opened token list the same surface/border as other menus so the tokens read clearly on dark themes. */
.tt-quill-host[b-epeqn3tfpb]  .ql-toolbar .ql-picker.ql-placeholder .ql-picker-options {
  background-color: var(--mud-palette-surface);
  border-color: var(--mud-palette-lines-default);
}

.tt-quill-host[b-epeqn3tfpb]  .ql-toolbar .ql-picker.ql-placeholder .ql-picker-item:hover {
  color: var(--mud-palette-primary) !important;
}