@import '_content/SharedUI/SharedUI.ttzyd2eods.bundle.scp.css';

/* /Layout/MainLayout.razor.rz.scp.css */
.page-shell[b-i6lf9rfkpn] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    max-width: none;
    margin-inline: 0;
    --color-brand-light: var(--color-insight);
    --color-brand-light-5: color-mix(in srgb, var(--color-insight) 5%, transparent);
    --color-brand-light-10: color-mix(in srgb, var(--color-insight) 10%, transparent);
}

.app-body[b-i6lf9rfkpn] {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.main-content[b-i6lf9rfkpn] {
    flex: 1;
    overflow-y: auto;
    position: relative;
    padding: 24px;
    /* Page content stays on the platform blue; only the header/sidebar chrome uses the Insight orange set above. */
    --color-brand-light: var(--color-brand-blue);
    --color-brand-light-5: color-mix(in srgb, var(--color-brand-blue) 5%, transparent);
    --color-brand-light-10: color-mix(in srgb, var(--color-brand-blue) 10%, transparent);
}

/* Selected sidebar item is a solid Insight-orange block with white text and icon. .menu-icon sets its own
   gray color, so the icon has to be told to follow the link's color. */
.page-shell[b-i6lf9rfkpn]  .app-sidebar .nav-item.active,
.page-shell[b-i6lf9rfkpn]  .app-sidebar .nav-item.active:hover {
    background-color: var(--color-brand-light);
    color: var(--color-white);
}

.page-shell[b-i6lf9rfkpn]  .app-sidebar .nav-item:hover .menu-icon,
.page-shell[b-i6lf9rfkpn]  .app-sidebar .nav-item.active .menu-icon {
    color: inherit;
}

/* SharedHeader's brand icon slot is built for background-image logos (see Sequence);
   icon-activity is a pt-icon mask asset, so it needs mask sizing/positioning and a
   fill color, scoped here rather than in the shared component. */
[b-i6lf9rfkpn] .app-header__brand-icon.icon-activity {
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Matches the Control Center tab. Fixed with no `left` so it sits at its static position against the
   sidebar edge (tracking collapse) without scrolling; the negative margin cancels .main-content's padding. */
.sidebar-toggle-button[b-i6lf9rfkpn] {
    position: fixed;
    top: 45%;
    margin-left: -24px;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-left: none;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    cursor: pointer;
    z-index: 10;
}
/* /Pages/Gantts.razor.rz.scp.css */
.gantts-page[b-uhvouszftn] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px;
    overflow: hidden;
}

.gantts-header[b-uhvouszftn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex: 0 0 auto;
}

.gantts-header-title[b-uhvouszftn] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.gantts-card[b-uhvouszftn] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.gantts-tabs[b-uhvouszftn] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 16px;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    overflow-y: hidden;
}

.gantt-tab[b-uhvouszftn] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: -1px;
    min-width: 160px;
    justify-content: center;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.gantt-tab.active[b-uhvouszftn] {
    background-color: var(--color-brand-light);
    color: var(--color-white);
    border-bottom-color: var(--color-brand-light);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.gantt-tab-label[b-uhvouszftn] {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-tab-close[b-uhvouszftn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 999px;
}

.gantt-tab-close:hover[b-uhvouszftn] {
    background-color: var(--color-surface-hover);
}

.gantt-tab.active .gantt-tab-close:hover[b-uhvouszftn] {
    background-color: color-mix(in srgb, var(--color-white) 20%, transparent);
}

.gantts-content[b-uhvouszftn] {
    flex: 1;
    min-height: 0;
    padding: 32px;
    overflow-y: auto;
}

.gantt-tab-panel[b-uhvouszftn] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.gantts-filter-bar[b-uhvouszftn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 24px;
    background: var(--color-filter-bar);
    border: 0.5px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.gantts-loading[b-uhvouszftn] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.gantts-empty[b-uhvouszftn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 200px;
    text-align: center;
    color: var(--color-text-secondary);
}

.gantts-empty .pt-icon[b-uhvouszftn] {
    margin-bottom: 8px;
    color: var(--color-border);
}

.gantts-empty h2[b-uhvouszftn] {
    font-size: var(--text-xl);
    color: var(--color-text-primary);
}

.gantts-empty p[b-uhvouszftn] {
    max-width: 360px;
    margin: 0;
    font-size: var(--text-sm);
}

.gantt-section[b-uhvouszftn] {
    margin-bottom: 40px;
}

.gantt-section:last-child[b-uhvouszftn] {
    margin-bottom: 0;
}

.section-header[b-uhvouszftn] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 0;
    margin-bottom: 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.section-header-title[b-uhvouszftn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 16px;
}

.section-bar[b-uhvouszftn] {
    flex: 0 0 auto;
    width: 6px;
    height: 24px;
    background-color: var(--color-brand-light);
    border-radius: 999px;
}

.section-title[b-uhvouszftn] {
    font-size: var(--text-xl);
}

.section-header-line[b-uhvouszftn] {
    flex: 1;
    height: 1px;
    background-color: var(--color-border);
    margin: 0 16px;
}

.section-chevron[b-uhvouszftn] {
    flex: 0 0 auto;
    color: var(--color-text-secondary);
}

.gantt-grid[b-uhvouszftn] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .gantt-grid[b-uhvouszftn] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1400px) {
    .gantt-grid[b-uhvouszftn] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.gantt-card[b-uhvouszftn] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 16px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--default-transition-duration), box-shadow var(--default-transition-duration);
}

.gantt-card:hover[b-uhvouszftn] {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.gantt-card-accent[b-uhvouszftn] {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--color-brand-light);
    opacity: 0;
    transition: opacity var(--default-transition-duration);
}

.gantt-card:hover .gantt-card-accent[b-uhvouszftn] {
    opacity: 1;
}

.gantt-card-top[b-uhvouszftn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 32px;
    min-width: 0;
}

.gantt-card-name[b-uhvouszftn] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--default-transition-duration);
}

.gantt-card:hover .gantt-card-name[b-uhvouszftn] {
    color: var(--color-brand-light);
}

.gantt-card-env[b-uhvouszftn] {
    flex: 0 0 auto;
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.gantt-card-fav[b-uhvouszftn] {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 6px;
    background: none;
    border: none;
    border-radius: 999px;
    color: var(--color-text-secondary);
}

.gantt-card-fav:hover[b-uhvouszftn] {
    background-color: var(--color-surface-hover);
}

.gantt-card-meta[b-uhvouszftn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-size: var(--text-sm);
}

.gantt-card-meta > div[b-uhvouszftn] {
    display: flex;
    gap: 8px;
    min-width: 0;
}

.gantt-card-meta dt[b-uhvouszftn] {
    flex: 0 0 auto;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.gantt-card-meta dd[b-uhvouszftn] {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

.gantt-card-more[b-uhvouszftn] {
    margin-left: 6px;
    font-size: 11px;
    opacity: 0.75;
}
/* /Pages/Home.razor.rz.scp.css */
.dashboard-page[b-l5nu29qo9g] {
    padding: 32px;
}

.dashboard-page__subtitle[b-l5nu29qo9g] {
    color: var(--color-text-secondary);
    margin-bottom: 32px;
}

.dashboard-cards[b-l5nu29qo9g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    max-width: 900px;
}

.dashboard-card[b-l5nu29qo9g] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
    .dashboard-card:hover[b-l5nu29qo9g] {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    }

.dashboard-card__icon[b-l5nu29qo9g] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-2xl);
    background: var(--color-brand-light-10);
    color: var(--color-brand-light);
    transition: background-color 0.15s ease, color 0.15s ease;
}
    .dashboard-card:hover .dashboard-card__icon[b-l5nu29qo9g] {
        background: var(--color-brand-light);
        color: var(--color-white);
    }

.dashboard-card__body h4[b-l5nu29qo9g] {
    margin-bottom: 6px;
}
.dashboard-card__body p[b-l5nu29qo9g] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.dashboard-section[b-l5nu29qo9g] {
    margin-top: 48px;
}

.dashboard-section__header[b-l5nu29qo9g] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}
    .dashboard-section__header .icon-gold-star[b-l5nu29qo9g] {
        color: var(--color-warning);
    }
    .dashboard-section__header h2[b-l5nu29qo9g] {
        white-space: nowrap;
        margin: 0;
    }

.dashboard-section__line[b-l5nu29qo9g] {
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-border-dark);
}

.dashboard-favorites-grid[b-l5nu29qo9g] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 767px) {
    .dashboard-favorites-grid[b-l5nu29qo9g] {
        grid-template-columns: 1fr;
    }
}

.favorite-card[b-l5nu29qo9g] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
    .favorite-card:hover[b-l5nu29qo9g] {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    }

.favorite-card__accent[b-l5nu29qo9g] {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--color-brand-light);
    opacity: 0;
    transition: opacity 0.15s ease;
}
    .favorite-card:hover .favorite-card__accent[b-l5nu29qo9g] {
        opacity: 1;
    }

.favorite-card__top[b-l5nu29qo9g] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
    color: var(--color-warning);
}

.favorite-card h3[b-l5nu29qo9g] {
    margin-bottom: 8px;
}

.favorite-card p[b-l5nu29qo9g] {
    flex: 1 1 auto;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.favorite-card__action[b-l5nu29qo9g] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 16px;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-light);
    opacity: 0;
    transition: opacity 0.15s ease;
}
    .favorite-card:hover .favorite-card__action[b-l5nu29qo9g] {
        opacity: 1;
    }
/* /Pages/Reports.razor.rz.scp.css */
.reports-page[b-m4ptq6fdyu] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 32px;
    overflow: hidden;
}

/* Header */

.reports-header[b-m4ptq6fdyu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex: 0 0 auto;
}

.reports-header-title[b-m4ptq6fdyu] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.reports-header-actions[b-m4ptq6fdyu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-btn[b-m4ptq6fdyu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    outline: none;
    transition: background-color var(--default-transition-duration), opacity var(--default-transition-duration);
}

.header-btn--secondary[b-m4ptq6fdyu] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.header-btn--secondary:hover[b-m4ptq6fdyu] {
    background-color: var(--color-surface-hover);
}

.header-btn--secondary .pt-icon[b-m4ptq6fdyu] {
    color: var(--color-brand-light);
}

.header-btn--primary[b-m4ptq6fdyu] {
    background-color: var(--color-brand-light);
    color: var(--color-white);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-brand-light) 25%, transparent);
}

.header-btn--primary:hover[b-m4ptq6fdyu] {
    opacity: 0.9;
}

/* Phone: three header buttons don't fit on one row, so let them wrap onto their own full-width row. */

@media (max-width: 767px) {
    .reports-page[b-m4ptq6fdyu] {
        padding: 0 16px;
    }

    .reports-header[b-m4ptq6fdyu] {
        flex-wrap: wrap;
        gap: 12px;
    }

    .reports-header-actions[b-m4ptq6fdyu] {
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
    }

    .header-btn[b-m4ptq6fdyu] {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 44px;
        white-space: nowrap;
    }
}

/* Card shell */

.reports-card[b-m4ptq6fdyu] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.reports-tabs[b-m4ptq6fdyu] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 16px;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    overflow-y: hidden;
}

.report-tab[b-m4ptq6fdyu] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: -1px;
    min-width: 160px;
    justify-content: center;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.report-tab.active[b-m4ptq6fdyu] {
    background-color: var(--color-brand-light);
    color: var(--color-white);
    border-bottom-color: var(--color-brand-light);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.report-tab-label[b-m4ptq6fdyu] {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-tab-close[b-m4ptq6fdyu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 999px;
}

.report-tab-close:hover[b-m4ptq6fdyu] {
    background-color: var(--color-surface-hover);
}

.report-tab.active .report-tab-close:hover[b-m4ptq6fdyu] {
    background-color: color-mix(in srgb, var(--color-white) 20%, transparent);
}

.reports-content[b-m4ptq6fdyu] {
    flex: 1;
    min-height: 0;
    padding: 32px;
    overflow-y: auto;
}

.report-tab-panel[b-m4ptq6fdyu] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.reports-loading[b-m4ptq6fdyu] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.reports-empty[b-m4ptq6fdyu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 200px;
    text-align: center;
    color: var(--color-text-secondary);
}

.reports-empty .pt-icon[b-m4ptq6fdyu] {
    margin-bottom: 8px;
    color: var(--color-border);
}

.reports-empty h2[b-m4ptq6fdyu] {
    font-size: var(--text-xl);
    color: var(--color-text-primary);
}

.reports-empty p[b-m4ptq6fdyu] {
    max-width: 360px;
    margin: 0;
    font-size: var(--text-sm);
}

/* Filter bar */

.reports-filter-bar[b-m4ptq6fdyu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 24px;
    background: var(--color-filter-bar);
    border: 0.5px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

/* Sections */

.report-section[b-m4ptq6fdyu] {
    margin-bottom: 40px;
}

.report-section:last-child[b-m4ptq6fdyu] {
    margin-bottom: 0;
}

.section-header[b-m4ptq6fdyu] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 0;
    margin-bottom: 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.section-header-title[b-m4ptq6fdyu] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 16px;
}

.category-bar[b-m4ptq6fdyu] {
    flex: 0 0 auto;
    width: 6px;
    height: 24px;
    background-color: var(--color-brand-light);
    border-radius: 999px;
}

.section-title[b-m4ptq6fdyu] {
    font-size: var(--text-xl);
}

.section-header-line[b-m4ptq6fdyu] {
    flex: 1;
    height: 1px;
    background-color: var(--color-border);
    margin: 0 16px;
}

.section-chevron[b-m4ptq6fdyu] {
    flex: 0 0 auto;
    color: var(--color-text-secondary);
}

/* Report grid */

.report-grid[b-m4ptq6fdyu] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .report-grid[b-m4ptq6fdyu] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.report-card[b-m4ptq6fdyu] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 16px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--default-transition-duration), box-shadow var(--default-transition-duration);
}

.report-card:hover[b-m4ptq6fdyu] {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* While the card's actions menu is open the card must be neither lifted nor clipping. The menu is position: fixed, and a
   transformed ancestor (the hover lift) makes the card its containing block: the menu was then placed relative to the
   card, clipped by overflow: hidden, and thrown across the page when the hover ended. With no transform (applied at once,
   not animated, so report-actions-menu.js measures the final layout) it is placed against the viewport as intended. */
.report-card.report-card:has(.report-actions-menu)[b-m4ptq6fdyu] {
    transform: none;
    overflow: visible;
    transition: box-shadow var(--default-transition-duration);
}

.report-card-accent[b-m4ptq6fdyu] {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--color-brand-light);
    opacity: 0;
    transition: opacity var(--default-transition-duration);
}

.report-card:hover .report-card-accent[b-m4ptq6fdyu] {
    opacity: 1;
}

.report-card-top[b-m4ptq6fdyu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding-right: 24px;
}

.report-name[b-m4ptq6fdyu] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--default-transition-duration);
}

.report-card:hover .report-name[b-m4ptq6fdyu] {
    color: var(--color-brand-light);
}

.report-fav-button[b-m4ptq6fdyu] {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 6px;
    background: none;
    border: none;
    border-radius: 999px;
    color: var(--color-text-secondary);
}

.report-fav-button:hover[b-m4ptq6fdyu] {
    background-color: var(--color-surface-hover);
}

.report-desc[b-m4ptq6fdyu] {
    flex: 1;
    font-size: 11px;
    line-height: 1.3;
    color: var(--color-text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The gear (up to 44px wide, 8px from the card's right edge) sits over the description's end: keep the text clear of it. */
.report-card.report-card:has(.report-actions-btn--gear) .report-desc[b-m4ptq6fdyu] {
    padding-right: 44px;
}

/* /Pages/Scorecards.razor.rz.scp.css */
.reports-page[b-z4sn69y7uz] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px;
    overflow: hidden;
}

.reports-header[b-z4sn69y7uz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex: 0 0 auto;
}

.reports-header-title[b-z4sn69y7uz] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.reports-card[b-z4sn69y7uz] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.view-toggle[b-z4sn69y7uz] {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.view-toggle-btn[b-z4sn69y7uz] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.view-toggle-btn.active[b-z4sn69y7uz] {
    background-color: var(--color-surface-hover);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
}

.scorecard-list[b-z4sn69y7uz] {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    overflow-y: auto;
}

.scorecard-list-row[b-z4sn69y7uz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
}

.scorecard-list-row:hover[b-z4sn69y7uz] {
    background-color: var(--color-surface-hover);
}

.scorecard-list-name[b-z4sn69y7uz] {
    flex: 1;
    font-weight: var(--font-weight-bold);
}

.scorecard-list-row .pt-icon.icon-chevron-right[b-z4sn69y7uz] {
    color: var(--color-text-secondary);
}

.scorecard-grid[b-z4sn69y7uz] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 32px;
    overflow-y: auto;
}

@media (min-width: 768px) {
    .scorecard-grid[b-z4sn69y7uz] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.scorecard-card[b-z4sn69y7uz] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--default-transition-duration), box-shadow var(--default-transition-duration);
}

.scorecard-card:hover[b-z4sn69y7uz] {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.scorecard-card-accent[b-z4sn69y7uz] {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--color-brand-light);
    opacity: 0;
    transition: opacity var(--default-transition-duration);
}

.scorecard-card:hover .scorecard-card-accent[b-z4sn69y7uz] {
    opacity: 1;
}

.scorecard-card-name[b-z4sn69y7uz] {
    font-size: var(--text-md);
}

.goal-progress[b-z4sn69y7uz] {
    font-weight: var(--font-weight-bold);
}

.goal-progress-change[b-z4sn69y7uz] {
    font-size: 11px;
    color: var(--color-text-secondary);
}

.reports-content[b-z4sn69y7uz] {
    flex: 1;
    min-height: 0;
    padding: 32px;
    overflow-y: auto;
}

.reports-loading[b-z4sn69y7uz] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.reports-empty[b-z4sn69y7uz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 200px;
    text-align: center;
    color: var(--color-text-secondary);
}

.reports-empty .pt-icon[b-z4sn69y7uz] {
    margin-bottom: 8px;
    color: var(--color-border);
}

.reports-empty h2[b-z4sn69y7uz] {
    font-size: var(--text-xl);
    color: var(--color-text-primary);
}

.reports-empty p[b-z4sn69y7uz] {
    max-width: 360px;
    margin: 0;
    font-size: var(--text-sm);
}

.goal-table[b-z4sn69y7uz] {
    margin-bottom: 0;
}

.goal-row[b-z4sn69y7uz] {
    cursor: pointer;
}

.goal-row:hover[b-z4sn69y7uz] {
    background-color: var(--color-surface-hover);
}

.goal-trend-cell[b-z4sn69y7uz] {
    width: 130px;
}
/* /Shared/ConfirmDeleteDialog.razor.rz.scp.css */
.confirm-delete-backdrop[b-ipnbbqwxvc] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background-color: rgba(0, 0, 0, 0.45);
}

.confirm-delete-dialog[b-ipnbbqwxvc] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1301;
    width: min(440px, calc(100vw - 32px));
    transform: translate(-50%, -50%);
    padding: 20px 24px 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
}

.confirm-delete-title[b-ipnbbqwxvc] {
    margin: 0 0 12px;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
}

.confirm-delete-message[b-ipnbbqwxvc] {
    margin: 0 0 16px;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.confirm-delete-label[b-ipnbbqwxvc] {
    display: block;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}

.confirm-delete-input[b-ipnbbqwxvc] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    font: inherit;
    outline: none;
}

.confirm-delete-input:focus[b-ipnbbqwxvc] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-light) 20%, transparent);
}

.confirm-delete-error[b-ipnbbqwxvc] {
    margin: 12px 0 0;
}

.confirm-delete-buttons[b-ipnbbqwxvc] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.confirm-delete-cancel[b-ipnbbqwxvc],
.confirm-delete-confirm[b-ipnbbqwxvc] {
    padding: 8px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    font: inherit;
    font-weight: var(--font-weight-bold);
}

.confirm-delete-cancel[b-ipnbbqwxvc] {
    border-color: var(--color-border);
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

.confirm-delete-confirm[b-ipnbbqwxvc] {
    background-color: var(--color-orange-500);
    color: var(--color-white);
}

.confirm-delete-confirm:disabled[b-ipnbbqwxvc],
.confirm-delete-cancel:disabled[b-ipnbbqwxvc] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Shared/CopyReportFlyout.razor.rz.scp.css */
.copy-report-panel[b-is84y0lbkl] {
    /* Start below the app header (z-index 1000), which would otherwise cover the flyout title and close button. */
    top: var(--header-height);
}

.copy-report-subtitle[b-is84y0lbkl] {
    margin: 2px 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.copy-report-source[b-is84y0lbkl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-background);
}

.copy-report-source-label[b-is84y0lbkl] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.copy-report-source-name[b-is84y0lbkl] {
    overflow-wrap: anywhere;
}

.copy-report-source-meta[b-is84y0lbkl] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.copy-report-custom-note[b-is84y0lbkl] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-purple-600, #9333ea);
}
/* /Shared/EditReportFlyout.razor.rz.scp.css */
.edit-report-panel[b-yucq12pq97] {
    /* Start below the app header (z-index 1000), which would otherwise cover the flyout title and close button. */
    top: var(--header-height);
}

.edit-report-loading[b-yucq12pq97] {
    align-items: center;
    justify-content: center;
}

.edit-report-banner[b-yucq12pq97] {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--color-brand-light);
    border-radius: var(--radius-xl);
    background-color: color-mix(in srgb, var(--color-brand-light) 10%, transparent);
    color: var(--color-brand-dark);
    font-size: var(--text-xs);
}

.edit-report-banner p[b-yucq12pq97] {
    margin: 2px 0 0;
}

.edit-report-readonly[b-yucq12pq97] {
    margin-left: 6px;
    font-weight: normal;
    color: var(--color-text-secondary);
}

.flyout-field input[readonly][b-yucq12pq97],
.flyout-field textarea[readonly][b-yucq12pq97] {
    background-color: var(--color-background);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

.edit-report-delete-btn[b-yucq12pq97] {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--color-red-200);
    outline: none;
    border-radius: var(--radius-2xl);
    background-color: var(--color-surface);
    color: var(--color-red-600);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
}

.edit-report-delete-btn:hover:not(:disabled)[b-yucq12pq97] {
    background-color: var(--color-red-50);
}

.edit-report-delete-btn:disabled[b-yucq12pq97] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Shared/FilterDropdown.razor.rz.scp.css */
.filter-dropdown[b-b75byflver] {
    position: relative;
    flex: 0 0 auto;
}

.filter-dropdown-button[b-b75byflver] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 104px;
    height: 40px;
    padding: 0 12px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    outline: none;
    transition: border-color var(--default-transition-duration);
}

.filter-dropdown-button:hover[b-b75byflver],
.filter-dropdown-button:focus-visible[b-b75byflver] {
    border-color: var(--color-brand-light);
}

.filter-dropdown-button .pt-icon[b-b75byflver] {
    margin-left: auto;
    width: 12px;
    height: 12px;
    color: var(--color-text-secondary);
}

.filter-dropdown-badge[b-b75byflver] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: var(--color-brand-light);
    color: var(--color-white);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
}

.filter-dropdown-backdrop[b-b75byflver] {
    position: fixed;
    inset: 0;
    z-index: 410;
}

.filter-dropdown-panel[b-b75byflver] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 411;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    max-height: 280px;
    overflow-y: auto;
    padding: 8px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.filter-dropdown-panel--right[b-b75byflver] {
    left: auto;
    right: 0;
}

.filter-dropdown-option[b-b75byflver] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--default-transition-duration);
}

.filter-dropdown-option:hover[b-b75byflver] {
    background-color: var(--color-surface-hover);
}

.filter-dropdown-option input[b-b75byflver] {
    accent-color: var(--color-brand-light);
}

.filter-dropdown-clear[b-b75byflver] {
    margin-top: 4px;
    padding: 8px 12px;
    border: none;
    border-top: 1px solid var(--color-border);
    background: none;
    color: var(--color-brand-light);
    font-size: var(--text-sm);
    text-align: center;
}
/* /Shared/FilterSearchBox.razor.rz.scp.css */
.filter-search[b-tn2nndr21d] {
    position: relative;
    flex: 1 1 200px;
    min-width: 200px;
    display: flex;
    align-items: center;
}

.filter-search .pt-icon[b-tn2nndr21d] {
    position: absolute;
    left: 12px;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.filter-search input[b-tn2nndr21d] {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 38px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    outline: none;
    transition: border-color var(--default-transition-duration);
}

.filter-search input[b-tn2nndr21d]::placeholder {
    color: var(--color-text-secondary);
}

.filter-search input:focus[b-tn2nndr21d] {
    border-color: var(--color-brand-light);
}
/* /Shared/GoalDetailFlyout.razor.rz.scp.css */
/* Overrides the shared 450px flyout width (css/flyout.css) for this flyout only -- the trend chart
   needs more room than a form-style flyout does. Scoped CSS isolation keeps this from affecting
   AddReportFlyout/ManageCategoriesFlyout, which still use the shared default width. */
.flyout-panel[b-u11nxo601g] {
    width: 50vw;
    min-width: 560px;
}

.goal-detail-tabs[b-u11nxo601g] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 0 24px;
    border-bottom: 1px solid var(--color-border);
}

.goal-detail-tab[b-u11nxo601g] {
    padding: 12px 8px;
    margin-bottom: -1px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.goal-detail-tab.active[b-u11nxo601g] {
    color: var(--color-text-primary);
    border-bottom-color: var(--color-brand-light);
    font-weight: var(--font-weight-bold);
}

.goal-detail-body[b-u11nxo601g] {
    gap: 20px;
    overflow-x: hidden;
}

.goal-detail-summary[b-u11nxo601g] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.goal-detail-value-row[b-u11nxo601g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.goal-detail-value[b-u11nxo601g] {
    font-size: 32px;
    font-weight: var(--font-weight-bold);
}

.goal-detail-change[b-u11nxo601g] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.goal-detail-chart[b-u11nxo601g] {
    width: 100%;
    height: 320px;
    max-width: 100%;
    /* Must be "visible" on both axes -- per the CSS overflow spec, pairing overflow-x: hidden with
       overflow-y: visible coerces the "visible" value to "auto", which still clips the hover
       tooltip when it renders slightly above the plot area near the top edge. Width/max-width
       already keep the chart itself from overflowing horizontally. */
    overflow: visible;
    box-sizing: border-box;
}

.goal-detail-chart[b-u11nxo601g]  svg {
    max-width: 100%;
}

.goal-trend-tooltip[b-u11nxo601g] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-sm);
}
/* /Shared/ManageCategoriesFlyout.razor.rz.scp.css */
.category-add-section[b-t1nigtx7dh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
}

.category-add-section > label[b-t1nigtx7dh] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
}

.category-add-row[b-t1nigtx7dh] {
    display: flex;
    gap: 8px;
}

.category-add-row input[b-t1nigtx7dh] {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface);
    font-size: var(--text-sm);
    outline: none;
    transition: box-shadow var(--default-transition-duration);
}

.category-add-row input:focus[b-t1nigtx7dh] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-light) 20%, transparent);
}

.category-add-btn[b-t1nigtx7dh] {
    flex: 0 0 auto;
    padding: 10px 20px;
    border: none;
    outline: none;
    border-radius: var(--radius-xl);
    background-color: var(--color-brand-light);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    transition: opacity var(--default-transition-duration);
}

.category-add-btn:hover[b-t1nigtx7dh] {
    opacity: 0.9;
}

.category-add-btn:disabled[b-t1nigtx7dh] {
    opacity: 0.6;
    cursor: not-allowed;
}

.category-list-section[b-t1nigtx7dh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-list-section > label[b-t1nigtx7dh] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
}

.category-list-loading[b-t1nigtx7dh] {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.category-list[b-t1nigtx7dh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-row[b-t1nigtx7dh] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: color-mix(in srgb, var(--color-background) 50%, transparent);
    overflow: hidden;
}

.category-row-header[b-t1nigtx7dh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    color: var(--color-text-secondary);
}

.category-row-name[b-t1nigtx7dh] {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.category-row-body[b-t1nigtx7dh] {
    padding: 0 16px 16px;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
}
/* /Shared/ManageReportsFlyout.razor.rz.scp.css */
/* Manage Reports: a full-width variant of the shared right-side flyout (see css/flyout.css). */

.manage-reports-panel[b-fnu5f1pb0p] {
    /* Start below the app header (z-index 1000), which would otherwise cover the flyout's title and actions. */
    top: var(--header-height);
    left: 0;
    width: 100%;
}

/* Header */

.manage-reports-header[b-fnu5f1pb0p] {
    gap: 16px;
}

.manage-reports-heading[b-fnu5f1pb0p] {
    min-width: 0;
}

/* Wireframe: 24px Exo 2 bold, -0.02em tracking. */
.manage-reports-heading .flyout-title[b-fnu5f1pb0p] {
    font-size: var(--text-2xl);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.manage-reports-subtitle[b-fnu5f1pb0p] {
    margin: 2px 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.manage-reports-header-actions[b-fnu5f1pb0p] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 12px;
}

.manage-reports-create-btn[b-fnu5f1pb0p] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    border: none;
    outline: none;
    border-radius: var(--radius-lg);
    background-color: var(--color-brand-light);
    color: var(--color-white);
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.01em;
    font-weight: var(--font-weight-bold);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-brand-light) 25%, transparent);
    transition: opacity var(--default-transition-duration);
}

.manage-reports-create-btn:hover[b-fnu5f1pb0p] {
    opacity: 0.9;
}

/* Sync Reports: a quieter button than Create Report, next to it. */
.manage-reports-sync-btn[b-fnu5f1pb0p] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    outline: none;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.01em;
    font-weight: var(--font-weight-bold);
    transition: background-color var(--default-transition-duration);
}

.manage-reports-sync-btn:hover:not(:disabled)[b-fnu5f1pb0p] {
    background-color: var(--color-surface-hover);
}

.manage-reports-sync-btn:disabled[b-fnu5f1pb0p] {
    cursor: progress;
    opacity: 0.7;
}

.manage-reports-sync-btn:focus-visible[b-fnu5f1pb0p] {
    outline: 2px solid var(--color-brand-light);
    outline-offset: 2px;
}

.manage-reports-sync-spin[b-fnu5f1pb0p] {
    animation: manage-reports-sync-rotate-b-fnu5f1pb0p 1s linear infinite;
}

@keyframes manage-reports-sync-rotate-b-fnu5f1pb0p {
    to {
        transform: rotate(360deg);
    }
}

/* Body */

.manage-reports-body[b-fnu5f1pb0p] {
    gap: 20px;
    background-color: var(--color-background);
}

/* Filter bar */

.manage-reports-filters[b-fnu5f1pb0p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.manage-reports-search[b-fnu5f1pb0p] {
    position: relative;
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    align-items: center;
}

.manage-reports-search .pt-icon[b-fnu5f1pb0p] {
    position: absolute;
    left: 12px;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.manage-reports-search input[b-fnu5f1pb0p] {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px 10px 38px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    outline: none;
}

.manage-reports-filter-select:disabled[b-fnu5f1pb0p] {
    background-color: var(--color-gray-50);
    color: var(--color-text-secondary);
    cursor: not-allowed;
    opacity: 0.85;
}

.manage-reports-search input:focus[b-fnu5f1pb0p],
.manage-reports-filter-select:focus[b-fnu5f1pb0p] {
    border-color: var(--color-brand-light);
}

.manage-reports-filter-select[b-fnu5f1pb0p] {
    flex: 0 1 200px;
    min-width: 0;
    min-height: 40px;
    padding: 10px 12px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    outline: none;
    /* The browser's own arrow sits flush against the right edge; draw it a little in from the border instead. */
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* States */

.manage-reports-loading[b-fnu5f1pb0p] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.manage-reports-warning[b-fnu5f1pb0p] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--color-amber-200);
    border-radius: var(--radius-lg);
    background-color: var(--color-amber-50);
    color: var(--color-amber-700);
    font-size: var(--text-sm);
}

.manage-reports-warning .pt-icon[b-fnu5f1pb0p] {
    margin-top: 2px;
}

.manage-reports-empty[b-fnu5f1pb0p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 16px;
    text-align: center;
    color: var(--color-text-secondary);
}

.manage-reports-empty .pt-icon[b-fnu5f1pb0p] {
    margin-bottom: 8px;
    color: var(--color-border);
}

.manage-reports-empty h3[b-fnu5f1pb0p] {
    font-size: var(--text-xl);
    color: var(--color-text-primary);
}

.manage-reports-empty p[b-fnu5f1pb0p] {
    margin: 0;
    font-size: var(--text-sm);
}

/* Grid (DevExpress DxGrid, APS-7762-7) dressed to match the wireframe's table. The grid's own markup carries no
   scope attribute, so its rules go through ::deep from the body; the repeated class outranks DevExpress's selectors.
   Cell padding, colours and the header look are DevExpress CSS variables, which is how they are meant to be set. */

.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid {
    --dxbl-grid-bg: var(--color-surface);
    --dxbl-grid-border-color: var(--color-border);
    --dxbl-grid-border-radius: var(--radius-xl);
    --dxbl-grid-text-cell-padding-x: 12px;
    --dxbl-grid-text-cell-padding-y: 10px;
    --dxbl-grid-header-bg: color-mix(in srgb, var(--color-background) 50%, transparent);
    --dxbl-grid-header-color: var(--color-text-secondary);
    --dxbl-grid-header-font-weight: var(--font-weight-bold);

    flex: 0 0 auto;
    overflow: hidden;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

/* The open actions menu lives inside a grid cell; lift the cell and its ancestors so the sticky header and pager don't paint over it. */
.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid :has(.report-actions-menu) {
    position: relative;
    z-index: 1200;
}

.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid th.dxbl-grid-header {
    font-size: var(--text-xs);
    line-height: 1.3333;
}

.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid td {
    vertical-align: middle;
}

/* The wireframe has horizontal row dividers only: no lines between columns. DevExpress's border rules are very
   specific, hence !important on the side borders only. */
.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid th,
.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid td {
    border-left-width: 0 !important;
    border-right-width: 0 !important;
}

.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid tbody tr:last-child td {
    border-bottom-width: 0;
}

.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid tbody tr:hover td {
    background-color: var(--color-surface-hover);
}

/* Pager: the standard DevExpress pager (as on ControlCenter's grids), in the app's colours. */

.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid .dxbl-pager-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background-color: var(--color-surface);
}

.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid .dxbl-grid-top-panel {
    border-bottom: 1px solid var(--color-border);
}

.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid .dxbl-grid-bottom-panel {
    border-top: 1px solid var(--color-border);
}

/* The buttons are one group with the page numbers and the arrows: same size, border and radius, and the text size of
   the "Page X of Y" summary beside them, with a small gap instead of a joined strip. */
.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid .dxbl-pager {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid .dxbl-pager .dxbl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* Lighter arrows, smaller than the 16px default so they sit with the 12px text. */
.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid .dxbl-pager .dxbl-btn .dxbl-image {
    width: 14px;
    height: 14px;
    color: var(--color-text-secondary);
}

.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid .dxbl-pager .dxbl-pager-page-btn {
    color: var(--color-text-primary);
}

.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid .dxbl-pager .dxbl-pager-page-btn:hover:not(:disabled) {
    background-color: var(--color-surface-hover);
}

.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid .dxbl-pager .dxbl-pager-active-page-btn,
.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid .dxbl-pager .dxbl-pager-active-page-btn:hover {
    border-color: var(--color-brand-light);
    background-color: var(--color-brand-light);
    color: var(--color-white);
}

.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid .dxbl-pager .dxbl-btn:disabled {
    opacity: 0.4;
}

/* "Page X of Y (N items)" beside the page buttons. */
.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid .dxbl-grid-pager-and-pager-summary-container {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}

.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid .dxbl-pager-page-size-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}

/* Sortable column headers: the whole label is the button, like the wireframe. */
.manage-reports-sort[b-fnu5f1pb0p] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* A long header title wraps onto a second line; the sort icon stays right next to the text. */
.manage-reports-body[b-fnu5f1pb0p]  .manage-reports-grid.manage-reports-grid dxbl-grid-header-content > span {
    min-width: 0;
    max-width: 100%;
}

.manage-reports-sort[b-fnu5f1pb0p] {
    max-width: 100%;
    white-space: normal;
}

.manage-reports-sort:hover[b-fnu5f1pb0p] {
    color: var(--color-text-primary);
}

.manage-reports-sort:focus-visible[b-fnu5f1pb0p] {
    outline: 2px solid var(--color-brand-light);
    outline-offset: 2px;
    border-radius: 4px;
}

.manage-reports-sort .pt-icon[b-fnu5f1pb0p] {
    width: 13px;
    height: 13px;
}

.manage-reports-sort-idle[b-fnu5f1pb0p] {
    opacity: 0.4;
}

.manage-reports-sort .manage-reports-sort-active[b-fnu5f1pb0p] {
    width: 14px;
    height: 14px;
    color: var(--color-brand-light);
}

/* Name, Description, Dataset, Source, Last Modified and Categories cells */

.manage-reports-name[b-fnu5f1pb0p] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.manage-reports-name-icon[b-fnu5f1pb0p] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    background-color: color-mix(in srgb, var(--color-brand-light) 10%, transparent);
    color: var(--color-brand-light);
}

.manage-reports-name-text[b-fnu5f1pb0p] {
    min-width: 0;
    white-space: nowrap;
}

/* One line, ending in an ellipsis; the full text is the cell's tooltip. */
.manage-reports-desc-text[b-fnu5f1pb0p] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    line-height: 1.3333;
}

.manage-reports-dataset[b-fnu5f1pb0p] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 4px 10px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-100);
    color: var(--color-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-xs);
    line-height: 1.3333;
}

.manage-reports-dataset .pt-icon[b-fnu5f1pb0p] {
    color: var(--color-brand-light);
}

.manage-reports-dataset-name[b-fnu5f1pb0p] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Workspace: briefcase icon + name, no chip (wireframe: 12px / 500). */
.manage-reports-workspace[b-fnu5f1pb0p] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-primary);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.3333;
    max-width: 100%;
    white-space: nowrap;
}

.manage-reports-workspace > span:last-child[b-fnu5f1pb0p] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.manage-reports-workspace .pt-icon[b-fnu5f1pb0p] {
    width: 13px;
    height: 13px;
    color: var(--color-text-secondary);
}

.manage-reports-source[b-fnu5f1pb0p] {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--text-xs);
    line-height: 1.3333;
    font-weight: 600;
    white-space: nowrap;
}

.manage-reports-source--standard[b-fnu5f1pb0p] {
    background-color: var(--color-blue-50);
    border-color: var(--color-blue-200);
    color: var(--color-blue-700);
}

.manage-reports-source--custom[b-fnu5f1pb0p] {
    background-color: var(--color-purple-50);
    border-color: var(--color-purple-200);
    color: var(--color-purple-700);
}

.manage-reports-date[b-fnu5f1pb0p] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    line-height: 1.3333;
    white-space: nowrap;
}

.manage-reports-date .pt-icon[b-fnu5f1pb0p] {
    color: var(--color-gray-400);
}

.manage-reports-categories[b-fnu5f1pb0p] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--color-gray-200);
    border-radius: 999px;
    background-color: var(--color-gray-100);
    color: var(--color-text-primary);
    font-size: var(--text-xs);
    line-height: 1.3333;
    font-weight: 600;
    white-space: nowrap;
}

.manage-reports-categories .pt-icon[b-fnu5f1pb0p] {
    color: var(--color-brand-light);
}

.manage-reports-sr-only[b-fnu5f1pb0p] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Tablet and below: tighter spacing; the grid scrolls sideways inside its own frame. */

@media (max-width: 1023px) {
    .manage-reports-body[b-fnu5f1pb0p] {
        padding: 24px;
    }
}

@media (max-width: 767px) {
    .manage-reports-heading .flyout-title[b-fnu5f1pb0p] {
        font-size: var(--text-xl);
    }

    .manage-reports-header[b-fnu5f1pb0p] {
        align-items: flex-start;
        padding: 16px;
    }

    .manage-reports-header-actions[b-fnu5f1pb0p] {
        gap: 8px;
    }

    .manage-reports-body[b-fnu5f1pb0p] {
        padding: 16px;
        gap: 16px;
    }

    .manage-reports-filters[b-fnu5f1pb0p] {
        padding: 12px;
    }

    .manage-reports-search[b-fnu5f1pb0p] {
        flex-basis: 100%;
    }

    .manage-reports-filter-select[b-fnu5f1pb0p] {
        flex: 1 1 calc(50% - 6px);
    }
}
/* /Shared/MultiSelectTagBox.razor.rz.scp.css */
.tagbox[b-09i4pv1ahw] {
    position: relative;
}

.tagbox-control[b-09i4pv1ahw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: color-mix(in srgb, var(--color-background) 50%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.tagbox-pill[b-09i4pv1ahw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-lg);
    background-color: color-mix(in srgb, var(--color-brand-light) 15%, white);
    color: var(--color-brand-dark);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
}

.tagbox-pill-remove[b-09i4pv1ahw] {
    display: inline-flex;
    align-items: center;
    color: var(--color-brand-dark);
}

.tagbox-pill-remove .pt-icon[b-09i4pv1ahw] {
    width: 12px;
    height: 12px;
}

/* A category the user may not change: muted, with a lock instead of a remove button. */
.tagbox-pill-locked[b-09i4pv1ahw] {
    background-color: var(--color-gray-100);
    color: var(--color-text-secondary);
}

.tagbox-pill-lock[b-09i4pv1ahw] {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-secondary);
}

.tagbox-pill-lock .pt-icon[b-09i4pv1ahw] {
    width: 12px;
    height: 12px;
}

.tagbox-add-btn[b-09i4pv1ahw] {
    padding: 4px 12px;
    border: none;
    outline: none;
    background: none;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    transition: color var(--default-transition-duration);
}

.tagbox-add-btn:hover[b-09i4pv1ahw] {
    color: var(--color-brand-light);
}

.tagbox-dropdown[b-09i4pv1ahw] {
    position: absolute;
    /* Opens upward: the tag box is usually the last field of a scrolling flyout, which would clip a list opening below it. */
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 411;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 240px;
    overflow-y: auto;
    /* Keeps the list's scroll from chaining to the flyout once it hits an end. */
    overscroll-behavior: contain;
    padding: 8px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.tagbox-option[b-09i4pv1ahw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: var(--radius-lg);
    background: none;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    text-align: left;
    transition: background-color var(--default-transition-duration);
}

.tagbox-option:hover[b-09i4pv1ahw] {
    background-color: var(--color-surface-hover);
}

.tagbox-option.selected[b-09i4pv1ahw] {
    background-color: color-mix(in srgb, var(--color-brand-light) 10%, transparent);
    color: var(--color-brand-light);
    font-weight: var(--font-weight-bold);
}

.tagbox-option-dot[b-09i4pv1ahw] {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 999px;
    background-color: var(--color-brand-light);
}
/* /Shared/ReportActionsMenu.razor.rz.scp.css */
/* Same look as the grid's original Actions button; scoped CSS does not reach into child components, so it is restated here. */
.report-actions-btn[b-eismmaph9l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    outline: none;
    border-radius: 999px;
    background-color: var(--color-brand-light);
    color: var(--color-white);
    transition: opacity var(--default-transition-duration);
}

.report-actions-btn:hover[b-eismmaph9l] {
    opacity: 0.85;
}

.report-actions-btn:focus-visible[b-eismmaph9l] {
    outline: 2px solid var(--color-brand-light);
    outline-offset: 2px;
}

/* On a report card on the Reports page: a plain gear in the card's bottom-right corner, as the card's placeholder was. */
.report-actions-btn--gear[b-eismmaph9l] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: auto;
    height: auto;
    padding: 6px;
    background: none;
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    transition: background-color var(--default-transition-duration), color var(--default-transition-duration);
}

.report-actions-btn--gear:hover[b-eismmaph9l] {
    opacity: 1;
    color: var(--color-brand-light);
    background-color: color-mix(in srgb, var(--color-brand-light) 10%, transparent);
}

/* Invisible click-catcher so a click anywhere else closes the menu. */
.report-actions-backdrop[b-eismmaph9l] {
    position: fixed;
    inset: 0;
    z-index: 1190;
}

/* Fixed (not absolute) so the grid's horizontal scroll container cannot clip it; report-actions-menu.js sets top/left. */
.report-actions-menu[b-eismmaph9l] {
    position: fixed;
    z-index: 1200;
    min-width: 168px;
    padding: 6px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
    text-align: left;
}

.report-actions-item[b-eismmaph9l] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: var(--radius-lg);
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.report-actions-item:hover[b-eismmaph9l],
.report-actions-item:focus-visible[b-eismmaph9l] {
    background-color: var(--color-gray-100, #f3f4f6);
    outline: none;
}

.report-actions-item--danger[b-eismmaph9l] {
    margin-top: 4px;
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    color: var(--color-red-600);
}

.report-actions-item--danger:hover[b-eismmaph9l],
.report-actions-item--danger:focus-visible[b-eismmaph9l] {
    background-color: var(--color-red-50);
}

@media (max-width: 767px) {
    .report-actions-btn[b-eismmaph9l] {
        width: 44px;
        height: 44px;
    }
}
/* /Shared/ReportCreatorPanel.razor.rz.scp.css */
/*
 * Blazor scopes a component's .razor.css to that component only, so these mirror the report-viewer rules in
 * ReportEmbedPanel.razor.css that the creator panel reuses. Without them the designer collapses to a sliver.
 */

.report-viewer-page[b-ym83xl5k0g] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.report-viewer-page.is-fullscreen[b-ym83xl5k0g] {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    /* Size from top/bottom; height: 100% would resolve to the full viewport and push the page tabs off-screen. */
    height: auto;
    z-index: 1100;
    background-color: var(--color-surface);
}

.report-viewer-header[b-ym83xl5k0g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border);
    background-color: color-mix(in srgb, var(--color-background) 30%, transparent);
    flex: 0 0 auto;
}

.report-viewer-header-left[b-ym83xl5k0g] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.report-viewer-icon-box[b-ym83xl5k0g] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    background-color: color-mix(in srgb, var(--color-brand-light) 10%, transparent);
    color: var(--color-brand-light);
}

.report-viewer-title[b-ym83xl5k0g] {
    line-height: 1;
}

.report-viewer-subtitle[b-ym83xl5k0g] {
    color: var(--color-text-secondary);
    margin-top: 4px;
    margin-bottom: 0;
}

.report-viewer-header-right[b-ym83xl5k0g] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-viewer-header-btn[b-ym83xl5k0g] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    outline: none;
    cursor: pointer;
    transition: background-color var(--default-transition-duration);
}

.report-viewer-header-btn:hover[b-ym83xl5k0g] {
    background-color: var(--color-surface-hover);
}

.report-viewer-notice[b-ym83xl5k0g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    padding: 12px 24px;
    border-bottom: 1px solid var(--color-border);
    background-color: color-mix(in srgb, var(--color-brand-light) 8%, transparent);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

/* Rename-and-retry row shown when a saved report could not be registered in Insight. */
.report-viewer-retry[b-ym83xl5k0g] {
    flex-wrap: wrap;
}

.report-viewer-retry-form[b-ym83xl5k0g] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-viewer-retry-form input[b-ym83xl5k0g] {
    min-width: 240px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    outline: none;
}

.report-viewer-notice.is-error[b-ym83xl5k0g] {
    background-color: color-mix(in srgb, var(--color-error) 8%, transparent);
    color: var(--color-error);
}

/* Tighter padding than the viewer: the designer needs as much room as it can get. */
.report-viewer-body[b-ym83xl5k0g] {
    flex: 1;
    min-height: 0;
    display: flex;
    padding: 12px;
}

.report-viewer-content[b-ym83xl5k0g] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.report-viewer-embed[b-ym83xl5k0g] {
    position: relative;
    flex: 1;
    min-height: 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
/* /Shared/ReportEmbedPanel.razor.rz.scp.css */
.report-viewer-page[b-00xjil9yi7] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.report-viewer-page.is-fullscreen[b-00xjil9yi7] {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    /* Size from top/bottom; height: 100% would resolve to the full viewport and push the page tabs off-screen. */
    height: auto;
    z-index: 1100;
    background-color: var(--color-surface);
}

.report-viewer-header[b-00xjil9yi7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    border-bottom: 1px solid var(--color-border);
    background-color: color-mix(in srgb, var(--color-background) 30%, transparent);
    flex: 0 0 auto;
}

.report-viewer-header-left[b-00xjil9yi7] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.report-viewer-icon-box[b-00xjil9yi7] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    background-color: color-mix(in srgb, var(--color-brand-light) 10%, transparent);
    color: var(--color-brand-light);
}

.report-viewer-title[b-00xjil9yi7] {
    line-height: 1;
}

.report-viewer-subtitle[b-00xjil9yi7] {
    color: var(--color-text-secondary);
    margin-top: 4px;
    margin-bottom: 0;
}

.report-viewer-header-right[b-00xjil9yi7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-viewer-dataset-status[b-00xjil9yi7] {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin-right: 8px;
}

.report-viewer-actions[b-00xjil9yi7] {
    position: relative;
}

.report-viewer-header-btn[b-00xjil9yi7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    outline: none;
    cursor: pointer;
    transition: background-color var(--default-transition-duration);
}

.report-viewer-header-btn:hover[b-00xjil9yi7] {
    background-color: var(--color-surface-hover);
}

.report-viewer-header-btn:disabled[b-00xjil9yi7] {
    opacity: 0.5;
}

/* Catches the click that dismisses the menu; sits under the menu but over everything else. */
.report-viewer-menu-backdrop[b-00xjil9yi7] {
    position: fixed;
    inset: 0;
    z-index: 10;
}

.report-viewer-menu[b-00xjil9yi7] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    min-width: 220px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.report-viewer-menu-item[b-00xjil9yi7] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: var(--radius-lg);
    background: none;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    text-align: left;
    outline: none;
    transition: background-color var(--default-transition-duration);
}

.report-viewer-menu-item:hover:not(:disabled)[b-00xjil9yi7] {
    background-color: var(--color-surface-hover);
}

.report-viewer-menu-item:disabled[b-00xjil9yi7] {
    color: var(--color-text-secondary);
    opacity: 0.5;
}

.report-viewer-menu-item > .fa-solid[b-00xjil9yi7] {
    width: 16px;
    color: var(--color-text-secondary);
    text-align: center;
}

.report-viewer-menu-item > .pt-icon[b-00xjil9yi7] {
    color: var(--color-brand-light);
}

.report-viewer-notice[b-00xjil9yi7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    padding: 12px 24px;
    border-bottom: 1px solid var(--color-border);
    background-color: color-mix(in srgb, var(--color-brand-light) 8%, transparent);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

.report-viewer-notice.is-error[b-00xjil9yi7] {
    background-color: color-mix(in srgb, var(--color-error) 8%, transparent);
    color: var(--color-error);
}

.report-viewer-notice-close[b-00xjil9yi7] {
    border: none;
    background: none;
    color: inherit;
    outline: none;
    padding: 4px;
}

.report-viewer-body[b-00xjil9yi7] {
    flex: 1;
    min-height: 0;
    display: flex;
    padding: 32px;
}

.report-viewer-loading[b-00xjil9yi7] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.report-viewer-content[b-00xjil9yi7] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.report-export-banner[b-00xjil9yi7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.report-viewer-embed[b-00xjil9yi7] {
    position: relative;
    flex: 1;
    min-height: 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.export-dialog-backdrop[b-00xjil9yi7] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background-color: rgba(0, 0, 0, 0.5);
}

.export-dialog[b-00xjil9yi7] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1400;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

/* While picking a visual there's no backdrop (clicks must reach the report underneath), so the
   dialog moves out of the way into a corner instead of covering the center of the report. */
.export-dialog.is-pick-mode[b-00xjil9yi7] {
    top: auto;
    left: auto;
    right: 24px;
    bottom: 24px;
    transform: none;
}

/* Replaces the full dialog while picking a visual and none is selected yet - even corner-positioned,
   the full dialog covers enough of the report that a small/cramped visual's clickable area can be hard
   to reach. This badge leaves nearly the whole report visible and clickable. */
.export-pick-badge[b-00xjil9yi7] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1400;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 360px;
    padding: 10px 12px 10px 16px;
    border-radius: var(--radius-xl);
    background-color: var(--color-surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.export-pick-badge > .pt-icon[b-00xjil9yi7] {
    flex: 0 0 auto;
    color: var(--color-brand-light);
}

.export-pick-badge-text[b-00xjil9yi7] {
    flex: 1;
    min-width: 0;
}

.export-pick-badge-link[b-00xjil9yi7] {
    flex: 0 0 auto;
    border: none;
    background: none;
    color: var(--color-brand-light);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    cursor: pointer;
}

.export-pick-badge-close[b-00xjil9yi7] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.export-dialog-header[b-00xjil9yi7] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border-bottom: 1px solid var(--color-border);
}

.export-dialog-icon[b-00xjil9yi7] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background-color: color-mix(in srgb, var(--color-brand-light) 12%, transparent);
    color: var(--color-brand-light);
}

.export-dialog-heading[b-00xjil9yi7] {
    flex: 1;
    min-width: 0;
}

.export-dialog-heading h3[b-00xjil9yi7] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.export-dialog-heading p[b-00xjil9yi7] {
    margin: 4px 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.export-dialog-close[b-00xjil9yi7] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    outline: none;
    cursor: pointer;
}

.export-dialog-body[b-00xjil9yi7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    overflow-y: auto;
}

.export-dialog-label[b-00xjil9yi7] {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.export-scope-toggle[b-00xjil9yi7] {
    display: flex;
    gap: 8px;
}

.export-scope-option[b-00xjil9yi7] {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: none;
    font-size: var(--text-sm);
    cursor: pointer;
}

.export-scope-option:hover[b-00xjil9yi7] {
    background-color: var(--color-surface-hover);
}

.export-scope-option.is-selected[b-00xjil9yi7] {
    border-color: var(--color-brand-light);
    background-color: color-mix(in srgb, var(--color-brand-light) 6%, transparent);
}

.export-visual-select[b-00xjil9yi7] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
}

.export-visual-empty[b-00xjil9yi7] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.export-format-card[b-00xjil9yi7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--default-transition-duration), background-color var(--default-transition-duration);
}

.export-format-card:hover[b-00xjil9yi7] {
    background-color: var(--color-surface-hover);
}

.export-format-card.is-selected[b-00xjil9yi7] {
    border-color: var(--color-brand-light);
    background-color: color-mix(in srgb, var(--color-brand-light) 6%, transparent);
}

.export-format-radio[b-00xjil9yi7] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    color: var(--color-brand-light);
    font-size: 1rem;
}

.export-format-card.is-selected .export-format-radio[b-00xjil9yi7] {
    border-color: transparent;
}

.export-format-info[b-00xjil9yi7] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.export-format-title[b-00xjil9yi7] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.export-format-ext[b-00xjil9yi7] {
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.export-format-description[b-00xjil9yi7] {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.export-format-badge[b-00xjil9yi7] {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-text-secondary) 12%, transparent);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.export-dialog-footer[b-00xjil9yi7] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border);
    background-color: color-mix(in srgb, var(--color-background) 30%, transparent);
}

.export-dialog-cancel[b-00xjil9yi7] {
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.export-dialog-cancel:hover[b-00xjil9yi7] {
    background-color: var(--color-surface-hover);
}

.export-dialog-submit[b-00xjil9yi7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-lg);
    background-color: var(--color-brand-light);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color var(--default-transition-duration);
}

.export-dialog-submit:hover:not(:disabled)[b-00xjil9yi7] {
    background-color: color-mix(in srgb, var(--color-brand-light) 85%, black);
}

.export-dialog-submit:disabled[b-00xjil9yi7] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Shared/ReportHistoryDialog.razor.rz.scp.css */
.report-history-backdrop[b-z5swom181m] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background-color: rgba(0, 0, 0, 0.45);
}

.report-history-dialog[b-z5swom181m] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1301;
    display: flex;
    flex-direction: column;
    width: min(720px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 32px));
    transform: translate(-50%, -50%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
}

.report-history-header[b-z5swom181m] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 32px 16px;
}

.report-history-icon[b-z5swom181m] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background-color: rgba(14, 165, 233, 0.12);
    color: #0284c7;
}

.report-history-heading[b-z5swom181m] {
    flex: 1 1 auto;
    min-width: 0;
}

.report-history-title[b-z5swom181m] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.report-history-subtitle[b-z5swom181m] {
    color: var(--color-text-secondary);
    font-size: .75rem;
}

.report-history-x[b-z5swom181m] {
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
}

.report-history-summary[b-z5swom181m] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 40px;
    margin: 0 32px 16px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-background);
    font-size: .75rem;
}

.report-history-summary dt[b-z5swom181m] {
    color: var(--color-text-secondary);
    font-weight: normal;
}

.report-history-summary dd[b-z5swom181m] {
    margin: 0;
    font-weight: var(--font-weight-bold);
    overflow-wrap: anywhere;
}

.report-history-body[b-z5swom181m] {
    flex: 1 1 auto;
    min-height: 80px;
    padding: 4px 32px 16px;
    overflow-y: auto;
}

.report-history-state[b-z5swom181m] {
    padding: 24px 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-align: center;
}

.report-history-list[b-z5swom181m] {
    margin: 0 0 0 6px;
    padding: 0;
    list-style: none;
}

.report-history-entry[b-z5swom181m] {
    position: relative;
    padding: 0 0 20px 22px;
    border-left: 2px solid var(--color-border);
}

.report-history-entry:last-child[b-z5swom181m] {
    padding-bottom: 8px;
}

/* The dot sits on the timeline bar; the latest entry's is highlighted. */
.report-history-entry[b-z5swom181m]::before {
    content: "";
    position: absolute;
    top: 4px;
    left: -6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-border);
}

.report-history-entry-latest[b-z5swom181m]::before {
    background-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

.report-history-entry-head[b-z5swom181m] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.report-history-action[b-z5swom181m] {
    font-size: .9375rem;
    font-weight: var(--font-weight-bold);
}

.report-history-time[b-z5swom181m] {
    color: var(--color-text-secondary);
    font-size: .75rem;
    white-space: nowrap;
}

.report-history-changes[b-z5swom181m] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 6px;
}

.report-history-change[b-z5swom181m] {
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: baseline;
    gap: 8px;
}

.report-history-change dt[b-z5swom181m] {
    color: var(--color-text-secondary);
    font-size: .6875rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.report-history-change dd[b-z5swom181m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 0;
    font-size: .8125rem;
    overflow-wrap: anywhere;
}

.rh-value[b-z5swom181m] {
    color: var(--color-text-primary);
}

.rh-chip[b-z5swom181m] {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .75rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.rh-chip-added[b-z5swom181m] {
    background-color: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.rh-chip-removed[b-z5swom181m] {
    background-color: rgba(220, 38, 38, 0.1);
    color: #b91c1c;
}

/* The previous value of a Name or Description: neutral, so only the new value stands out. */
.rh-chip-old[b-z5swom181m] {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.rh-chip-empty[b-z5swom181m] {
    background-color: var(--color-background);
    border: 1px dashed var(--color-border);
    color: var(--color-text-secondary);
    font-style: italic;
}

.rh-arrow[b-z5swom181m] {
    color: var(--color-text-secondary);
}

.report-history-user[b-z5swom181m] {
    color: var(--color-text-secondary);
    font-size: .6875rem;
}

.report-history-note[b-z5swom181m] {
    margin: 8px 0 0;
    color: var(--color-text-secondary);
    font-size: .6875rem;
}

.report-history-footer[b-z5swom181m] {
    display: flex;
    justify-content: flex-end;
    padding: 12px 32px 20px;
    border-top: 1px solid var(--color-border);
}

.report-history-close[b-z5swom181m] {
    padding: 8px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    font: inherit;
    font-size: .8125rem;
    font-weight: var(--font-weight-bold);
}
/* /Shared/Toasts/ToastHost.razor.rz.scp.css */
/* Same look as Control Center's toasts (PTToast): a card with a coloured edge, a dot and title, the time, a close button and the message. */

.pt-toast-host[b-dfw5n8xr8n] {
    position: fixed;
    top: calc(var(--header-height) + 12px);
    right: 24px;
    /* Above the flyouts and dialogs (up to 1400) so a notification is never hidden behind the flyout that raised it. */
    z-index: 20000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.pt-toast[b-dfw5n8xr8n] {
    width: 360px;
    max-width: calc(100vw - 48px);
    min-height: 96px;
    display: flex;
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
    pointer-events: auto;
}

/* The coloured edge on the left. */
.pt-toast[b-dfw5n8xr8n]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    width: 18px;
    background: var(--pt-toast-color);
    border-radius: 14px 0 0 14px;
    z-index: 0;
    pointer-events: none;
}

.pt-toast-body[b-dfw5n8xr8n] {
    flex: 1;
    position: relative;
    z-index: 1;
    min-width: 0;
    background: var(--color-surface);
    border-radius: 14px;
    padding: 14px 16px 12px 16px;
}

.pt-toast-top[b-dfw5n8xr8n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pt-toast-label[b-dfw5n8xr8n] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pt-toast-color);
    font-size: 12px;
    font-weight: 700;
}

.pt-toast-dot[b-dfw5n8xr8n] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--pt-toast-color);
}

.pt-toast-meta[b-dfw5n8xr8n] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.pt-toast-close[b-dfw5n8xr8n] {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.pt-toast-message[b-dfw5n8xr8n] {
    margin-top: 10px;
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.pt-toast-info[b-dfw5n8xr8n] {
    --pt-toast-color: #0ea5e9;
}

.pt-toast-success[b-dfw5n8xr8n] {
    --pt-toast-color: #10b981;
}

.pt-toast-error[b-dfw5n8xr8n] {
    --pt-toast-color: #ef4444;
}

.pt-toast-warning[b-dfw5n8xr8n] {
    --pt-toast-color: #f97316;
}