/* /Components/Internal/Billing/BillingRuleList.razor.rz.scp.css */
/* CSS isolation for the vertical tab list inside the linked-environment expansion panel.
   Two goals:
   1. Left-align the icon + label inside each tab item (default MudBlazor centers them).
   2. Make the tab-content area always span the full available width — no smushing. */

[b-sts0xfjxu4] .mud-tabs-vertical .mud-tab {
    justify-content: flex-start !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    text-align: left;
}

[b-sts0xfjxu4] .mud-tabs-vertical .mud-tab .mud-icon-root {
    margin-right: 0.5rem;
}

[b-sts0xfjxu4] .mud-tabs-panels {
    width: 100%;
    flex: 1 1 0%;
    min-width: 0;
}

[b-sts0xfjxu4] .mud-tab-panel {
    width: 100% !important;
}
/* /Components/MudAdapted/PubbleExpansionPanel.razor.rz.scp.css */
[b-abx9p24w2r] .rotate-icon {
    transform: rotate(180deg);
}

[b-abx9p24w2r] .animated-icon {
    transition: transform 0.15s ease;
}
/* /Components/Pubble/ArticleCollabPresence.razor.rz.scp.css */
/* Consolidated article-collaboration presence indicator.
   Subtle, theme-aware (MudBlazor palette vars), self-contained animations — no
   Tailwind dependency, so it works without a CSS rebuild. */

.collab-presence[b-76zfqjf9wm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    padding: 0.2rem 0.7rem 0.2rem 0.45rem;
    border-radius: 9999px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    /* Gentle entrance when someone first appears ("knocks"). */
    animation: collab-in-b-76zfqjf9wm 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.collab-state[b-76zfqjf9wm] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

/* --- status dots --- */
.collab-dot[b-76zfqjf9wm] {
    position: relative;
    display: inline-block;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 9999px;
    flex: none;
}

/* booting / connecting: a soft amber breathing dot */
.collab-dot--connecting[b-76zfqjf9wm] {
    background: var(--mud-palette-warning, #fdcb6e);
    animation: collab-breathe-b-76zfqjf9wm 1.2s ease-in-out infinite;
}

/* live / working: solid green core with a slow expanding ping ring */
.collab-dot--live[b-76zfqjf9wm] {
    background: var(--mud-palette-success, #4caf50);
}

.collab-dot__ping[b-76zfqjf9wm] {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: var(--mud-palette-success, #4caf50);
    opacity: 0.6;
    animation: collab-ping-b-76zfqjf9wm 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* connection trouble: a red dot with a slow attention pulse */
.collab-dot--warn[b-76zfqjf9wm] {
    background: var(--mud-palette-error, #f44336);
    animation: collab-breathe-b-76zfqjf9wm 1.4s ease-in-out infinite;
}

/* tint the whole pill's text when the connection is down, so it reads as a real problem */
.collab-state--warn[b-76zfqjf9wm] {
    color: var(--mud-palette-error, #f44336);
    font-weight: 600;
}

@keyframes collab-in-b-76zfqjf9wm {
    from { opacity: 0; transform: translateY(-3px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes collab-breathe-b-76zfqjf9wm {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1); }
}

@keyframes collab-ping-b-76zfqjf9wm {
    0%        { transform: scale(1);   opacity: 0.6; }
    70%, 100% { transform: scale(2.4); opacity: 0; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .collab-presence[b-76zfqjf9wm],
    .collab-dot--connecting[b-76zfqjf9wm],
    .collab-dot--warn[b-76zfqjf9wm],
    .collab-dot__ping[b-76zfqjf9wm] {
        animation: none;
    }
}
/* /Components/Pubble/AuthorPicker/MultiAuthorPanel.razor.rz.scp.css */
[b-8wabnwvwws] .mud-panel-expanded {
    margin: 0 !important;
}

[b-8wabnwvwws] .mud-expand-panel.mud-panel-next-expanded {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.author-card:first-of-type[b-8wabnwvwws] {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.author-card:last-of-type[b-8wabnwvwws] {
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
/* /Components/Pubble/Charts/DateDistributionHistogram.razor.rz.scp.css */
.date-histogram[b-kadffm6idm] {
    width: 280px;
    padding: 8px 10px 8px;
    border-radius: 10px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(6px);
    user-select: none;
}

.date-histogram--inline[b-kadffm6idm] {
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.date-histogram--inline .date-histogram__track[b-kadffm6idm] {
    height: 27px;
}

.date-histogram__crumbs[b-kadffm6idm] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    font-size: 11px;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
}

.date-histogram__crumb[b-kadffm6idm] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.date-histogram__crumb:not(:disabled):hover[b-kadffm6idm] {
    background-color: rgb(113 113 122 / 0.15);
    color: var(--mud-palette-text-primary);
}

.date-histogram__crumb:disabled[b-kadffm6idm] {
    cursor: default;
}

.date-histogram__crumb--current[b-kadffm6idm] {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    padding: 2px 4px;
}

.date-histogram__sep[b-kadffm6idm] {
    opacity: 0.4;
}

.date-histogram__bars[b-kadffm6idm] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
}

.date-histogram__loading[b-kadffm6idm] {
    display: flex;
    align-items: center;
    height: 52px;
}

.date-histogram--inline .date-histogram__loading[b-kadffm6idm] {
    height: 27px;
}

.date-histogram__bar[b-kadffm6idm] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.date-histogram__bar:disabled[b-kadffm6idm] {
    cursor: default;
}

.date-histogram__track[b-kadffm6idm] {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 52px;
}

.date-histogram__fill[b-kadffm6idm] {
    width: 100%;
    border-radius: 3px 3px 0 0;
    background-color: rgb(113 113 122 / 0.35);
    transition: background-color 0.15s, height 0.2s ease;
    min-height: 2px;
}

.date-histogram__bar:not(:disabled):hover .date-histogram__fill[b-kadffm6idm] {
    background-color: rgb(113 113 122 / 0.6);
}

.date-histogram__bar.is-selected .date-histogram__fill[b-kadffm6idm] {
    background-color: var(--mud-palette-primary);
    opacity: 0.85;
}

.date-histogram__bar.is-empty .date-histogram__fill[b-kadffm6idm] {
    background-color: rgb(113 113 122 / 0.12);
}

.date-histogram__label[b-kadffm6idm] {
    margin-top: 3px;
    font-size: 9px;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* /Components/Pubble/DashboardCard.razor.rz.scp.css */
.widget-card-head[b-exca2fwq7w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

/* when the card itself has no padding (Flush), inset the header so it doesn't sit flush to the edge */
.widget-card-head--flush[b-exca2fwq7w] {
    padding: 14px 16px 0;
}

.widget-card-head-main[b-exca2fwq7w] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.widget-card-title[b-exca2fwq7w] {
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary, #2b2b2b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-card-head-actions[b-exca2fwq7w] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
/* /Components/Pubble/Excel/Dialog/AuthorExcelDialog/ExcelImport.razor.rz.scp.css */
[b-63e0aztcgm] th, [b-63e0aztcgm] td {
    border-bottom: 1px solid rgba(101, 101, 101, 0.5);
    border-collapse: collapse;
    border-spacing: 0;
}

[b-63e0aztcgm] table {
    border-spacing: 0;
    table-layout: fixed;
    border-collapse: collapse;
}

[b-63e0aztcgm] tr:last-of-type td {
    border: none;
}
/* /Components/Pubble/HtmlTextArea.razor.rz.scp.css */
.editor p[b-hjuesj3qis] {
    margin-bottom: 14px !important;
}

[b-hjuesj3qis] p {
    margin-bottom: 14px !important;
}

.editor:focus[b-hjuesj3qis] {
    outline: none;
}
/* /Components/Pubble/Image/ImageCropper.razor.rz.scp.css */
.cropper[b-nlrv1rer40] {
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.cropper-wrapper[b-nlrv1rer40] {
    width: 400px;
    height: 400px;
}

.overlay[b-nlrv1rer40] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(59, 59, 59);
    z-index: 100;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    flex-direction: column;
}

/* /Components/Pubble/Image/ImageEditor/ImageEditor.razor.rz.scp.css */

.image-container[b-l1ieod28l2] {
    position: relative;
}

.image-container img[b-l1ieod28l2] {
    margin: auto;
    display: block;
    position: relative;
}

.checkered-background[b-l1ieod28l2] {
    opacity: .05;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(45deg, var(--mud-palette-gray-dark) 25%, transparent 25%),
    linear-gradient(-45deg, var(--mud-palette-gray-dark) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--mud-palette-gray-dark) 75%),
    linear-gradient(-45deg, transparent 75%, var(--mud-palette-gray-dark) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.overlay[b-l1ieod28l2] {
    position: absolute;
    inset: 0;
}

.crop-box[b-l1ieod28l2] {
    position: absolute;
    border: 2px solid;
    border-color: var(--mud-palette-primary) !important;
    cursor: move;
    box-shadow: 0 0 10px 9999px rgba(0, 0, 0, 0.6);
    z-index: 199 !important;
}

.resize-node[b-l1ieod28l2] {
    position: absolute;
    width: .7rem;
    height: auto;
    aspect-ratio: 1;
    background-color: var(--mud-palette-primary);
    border: 1px solid;
    border-color: var(--mud-palette-primary);
    border-radius: 50%;
    z-index: 202 !important;
}

.resize-node.top-left[b-l1ieod28l2] {
    top: 0;
    left: 0;
    transform: translate(-60%, -60%);
    cursor: nwse-resize;
}

.resize-node.top-right[b-l1ieod28l2] {
    top: 0;
    right: 0;
    transform: translate(60%, -60%);
    cursor: nesw-resize;
}

.resize-node.bottom-left[b-l1ieod28l2] {
    bottom: 0;
    left: 0;
    transform: translate(-60%, 60%);
    cursor: nesw-resize;
}

.resize-node.bottom-right[b-l1ieod28l2] {
    bottom: 0;
    right: 0;
    transform: translate(60%, 60%);
    cursor: nwse-resize;
}

[class*="blur-box"][b-l1ieod28l2] {
    position: absolute;
    backdrop-filter: blur(4px);
    z-index: 200 !important;
}

.disabled-box[b-l1ieod28l2] {
    border: none !important;
}

.disabled-box-with-border[b-l1ieod28l2] {
    border-color: var(--mud-palette-lines-default);
}

[class*="disabled-box"] .resize-node[b-l1ieod28l2] {
    display: none !important;
}

.blur-box .resize-node[b-l1ieod28l2] {
    display: block;
    background-color: var(--mud-palette-secondary);
    border-color: var(--mud-palette-secondary);
}

.blur-box[b-l1ieod28l2] {
    border: 1px solid;
    border-color: var(--mud-palette-secondary);
}

[b-l1ieod28l2] .editor-buttons button {
    transition: background-color 0.3s ease;
}
/* /Components/Pubble/Image/ImageLibrary/ImageLibrary.razor.rz.scp.css */
.container[b-dmdlxtq6tz] {
    padding: 40px 5%;
}

.heading-text[b-dmdlxtq6tz] {
    margin-bottom: 2rem;
    font-size: 2rem;
}

.heading-text span[b-dmdlxtq6tz] {
    font-weight: 100;
}

ul[b-dmdlxtq6tz] {
    list-style: none;
}

/* Responsive image gallery rules begin*/

.image-gallery > li:hover[b-dmdlxtq6tz],
.image-gallery > li.selected[b-dmdlxtq6tz] {
    transform: scale(1.05);
}

.image-gallery > li.selected img[b-dmdlxtq6tz] {
    transform: scale(.84);
    border-radius: 10px;
}

.image-gallery[b-dmdlxtq6tz] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
} 

.image-gallery > li:hover[b-dmdlxtq6tz] {
    transform: scale(1.05);
}

.image-gallery > li[b-dmdlxtq6tz] {
    flex: 1 1 auto; /* or flex: auto; */
    height: 220px;
    cursor: pointer;
    position: relative;

    overflow: hidden;
    transition: all 0.3s ease;
}

.image-gallery[b-dmdlxtq6tz]::after {
    content: "";
    flex-grow: 999;
}

.image-gallery li img[b-dmdlxtq6tz] {
    object-fit: cover;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    border-radius: 5px;
}

/* Additional styles for responsiveness */
@media (max-width: 768px) {
    .image-gallery > li[b-dmdlxtq6tz] {
        height: 180px;
    }
}

@media (max-width: 480px) {
    .image-gallery > li[b-dmdlxtq6tz] {
        height: 140px;
    }
}

/* Styles from the original CSS */
[b-dmdlxtq6tz] .search-navbar {
    border-bottom: 2px solid var(--color-nav-border);
    background-color: var(--mud-palette-drawer-background);
}

[b-dmdlxtq6tz] .mud-select {
    flex-grow: 0;
}

[b-dmdlxtq6tz] .no-mud-margin,
[b-dmdlxtq6tz] .no-mud-margin > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 0 !important;
}
/* /Components/Pubble/Input/AdvancedSearch.razor.rz.scp.css */
[b-lqt7mio4oh] .searchbar,
[b-lqt7mio4oh] .searchbar-color {
    background-color: var(--color-background);
}
[b-lqt7mio4oh] .searchbar,
[b-lqt7mio4oh] .searchbar-filter {
    filter: brightness(90%);
}

[b-lqt7mio4oh] .no-mud-margin,
[b-lqt7mio4oh] .no-mud-margin > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 0 !important;
}

[b-lqt7mio4oh] .autocomplete-menu {

    clip-path: inset(0px -10px -10px -10px);
}
/* /Components/Pubble/Input/BasicSearch.razor.rz.scp.css */
[b-avx8wisjtn] .searchbar {
    background-color: var(--color-background);
    filter: brightness(90%);
}

[b-avx8wisjtn] .no-mud-margin,
[b-avx8wisjtn] .no-mud-margin > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 0 !important;
}
/* /Components/Pubble/Input/MultiSelectAutoComplete/MultiSelectAutoCompleteV2.razor.rz.scp.css */
/* /Components/Pubble/Input/TextInputAutoComplete.razor.rz.scp.css */
[b-vh9basxlwh] .no-mud-margin,
[b-vh9basxlwh] .no-mud-margin > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 0 !important;
}

/* /Components/Pubble/RawHtmlEditor.razor.rz.scp.css */
.raw-html-editor iframe[b-mibxcxovop] {
    width: 100%;
    height: 100%;
    border: none;
}
/* /Components/Pubble/Reporting/DataSelectionBar.razor.rz.scp.css */
.select[b-u61gz1g9za] {
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc; /* Light border for light mode */
    border-radius: 4px; /* Rounded corners */
    background-color: white;
    color: black;
    cursor: pointer;
}

.--root-dark .dark .select[b-u61gz1g9za] {
    background-color: #333; /* Dark background for dark mode */
    color: white; /* Light text for dark mode */
    border-color: #555; /* Darker border for dark mode */
}
/* /Components/Pubble/Settings/Authors/AuthorForm.razor.rz.scp.css */
[b-uh5v2pc5bk] .no-text-outline .mud-input-outlined-border {
    display: none;
}

[b-uh5v2pc5bk] .mud-counter .mud-input-control-helper-container {
    position: absolute;
    bottom: 0;
    right: 0;
}
/* /Components/Pubble/SubscriptionTypePicker/SubscriptionTypePicker.razor.rz.scp.css */
/* Highlight the currently selected item in the picker list.
   Uses the same recipe as .plan-nav__item--active and .nav__link--create so the
   primary-tinted background tracks the MudBlazor theme automatically. */

[b-jd3n4ak4ma] .sub-picker__item--selected {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important;
    border-left: 3px solid var(--mud-palette-primary);
}
/* /Components/Pubble/Toggles/ToggleTabs.razor.rz.scp.css */
.pc-tab[b-z9og458749] {
    background: transparent;
    border: 0;
    outline: none;
    transition: color 100ms linear;
}

/* Keyboard focus ring — offset outward so it reads clearly over the sliding pill
   and the surrounding track. Uses the MudBlazor theme primary so it follows the theme. */
.pc-tab:focus-visible[b-z9og458749] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 0.375rem;
}
/* /Components/Pubble/WidgetCard.razor.rz.scp.css */
.widget-card-head[b-mw3175yq37] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

/* when the card itself has no padding (Flush), inset the header so it doesn't sit flush to the edge */
.widget-card-head--flush[b-mw3175yq37] {
    padding: 14px 16px 0;
}

.widget-card-head-main[b-mw3175yq37] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.widget-card-title[b-mw3175yq37] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary, #2b2b2b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-card-head-actions[b-mw3175yq37] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
/* /Features/Planning/Components/ActivityLine.razor.rz.scp.css */
.pl-act[b-o4zxjameyq] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}

.pl-act-link[b-o4zxjameyq] {
    transition: background-color .12s ease;
    cursor: pointer;
}

.pl-act-link:hover[b-o4zxjameyq] {
    background: var(--mud-palette-action-default-hover, rgba(0,0,0,0.04));
}

[b-o4zxjameyq] .pl-act-ic {
    width: 16px;
    height: 16px;
    color: var(--mud-palette-text-secondary, #9aa0a6);
    margin-top: 2px;
    flex: 0 0 auto;
}

.pl-act-body[b-o4zxjameyq] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pl-act-line[b-o4zxjameyq] {
    font-size: 0.85rem;
    line-height: 1.35;
}

.pl-act-actor[b-o4zxjameyq] {
    font-weight: 600;
    color: var(--mud-palette-text-primary, #2b2b2b);
}

.pl-act-verb[b-o4zxjameyq] {
    margin-left: 4px;
    color: var(--mud-palette-text-secondary, #6b7280);
}

.pl-act-target[b-o4zxjameyq] {
    display: block;
    font-size: 0.8rem;
    color: var(--mud-palette-text-primary, #2b2b2b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.pl-act-when[b-o4zxjameyq] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-disabled, #9aa0a6);
}

/* feed (TargetFirst) layout: ticket leads, then a compact muted sub-line */
.pl-act-target.lead[b-o4zxjameyq] {
    font-size: 0.85rem;
}

.pl-act-sub[b-o4zxjameyq] {
    font-size: 0.76rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary, #6b7280);
}

.pl-act-sub .pl-act-actor[b-o4zxjameyq] {
    font-weight: 600;
}

.pl-act-sub .pl-act-when[b-o4zxjameyq] {
    font-size: 0.76rem;
}

.pl-act-dot[b-o4zxjameyq] {
    margin: 0 3px;
    color: var(--mud-palette-text-disabled, #9aa0a6);
}
/* /Features/Planning/Components/BoardPicker.razor.rz.scp.css */
/* The dropdown items render in a teleported popover, so they're styled straight from the global
   --mud-palette-* variables (theme-correct in both light & dark, unreachable component tokens avoided). */
.bp-ac[b-liqvl80k6o]{min-width:240px;max-width:340px}
.bp-item[b-liqvl80k6o]{display:flex;flex-direction:column;line-height:1.25}
.bp-item-proj[b-liqvl80k6o]{font-size:.72rem;color:var(--mud-palette-text-secondary);text-transform:uppercase;letter-spacing:.02em}
.bp-item-name[b-liqvl80k6o]{font-size:.88rem;color:var(--mud-palette-text-primary)}
/* /Features/Planning/Components/ColumnEditorDialog.razor.rz.scp.css */
.pl-coleditor[b-svvsrhdngm]{
  --pl-primary:var(--mud-palette-primary); --pl-primary-100:color-mix(in srgb,var(--mud-palette-primary) 22%,var(--mud-palette-surface)); --pl-primary-ink:color-mix(in srgb,var(--mud-palette-primary) 55%,var(--mud-palette-text-primary));
  --pl-bg:var(--mud-palette-background); --pl-surface:var(--mud-palette-surface); --pl-subnav:var(--mud-palette-surface); --pl-appbar:var(--mud-palette-appbar-background);
  --pl-border:var(--mud-palette-lines-default); --pl-nav-border:var(--mud-palette-lines-default); --pl-line-strong:var(--mud-palette-lines-inputs);
  --pl-text:var(--mud-palette-text-primary); --pl-text-2:var(--mud-palette-text-secondary); --pl-muted:color-mix(in srgb,var(--mud-palette-text-primary) 38%,var(--mud-palette-surface));
  --pl-hov:color-mix(in srgb,var(--mud-palette-primary) 10%,var(--mud-palette-surface)); --pl-chip:color-mix(in srgb,var(--mud-palette-text-primary) 7%,var(--mud-palette-surface)); --pl-grp:color-mix(in srgb,var(--mud-palette-text-primary) 5%,var(--mud-palette-background));
  --pl-tint:color-mix(in srgb,var(--mud-palette-text-primary) 6%,transparent); --pl-danger:var(--mud-palette-error); --pl-radius:4px;
  color:var(--pl-text);
}
.pl-coleditor .pl-d-sec[b-svvsrhdngm]{display:flex;align-items:baseline;gap:8px;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--pl-text-2);font-weight:600;margin:16px 0 7px}
.pl-coleditor .pl-d-note[b-svvsrhdngm]{text-transform:none;letter-spacing:0;font-weight:400;font-size:.72rem;color:var(--pl-text-2);opacity:.85}
.pl-coleditor .pl-d-hint[b-svvsrhdngm]{color:var(--pl-text-2);font-size:.8rem;margin:6px 0 4px}

/* segmented mode toggle (reuse existing field vs. create a new one) */
.pl-coleditor .pl-seg[b-svvsrhdngm]{display:flex;gap:4px;padding:3px;background:var(--pl-chip);border-radius:7px;margin:2px 0 14px}
.pl-coleditor .pl-seg-btn[b-svvsrhdngm]{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;background:transparent;border-radius:5px;padding:7px 10px;cursor:pointer;font:inherit;font-size:.83rem;font-weight:500;color:var(--pl-text-2);transition:all .12s}
.pl-coleditor .pl-seg-btn:hover[b-svvsrhdngm]{color:var(--pl-text)}
.pl-coleditor .pl-seg-btn.sel[b-svvsrhdngm]{background:var(--pl-surface);color:var(--pl-primary-ink);box-shadow:0 1px 2px var(--pl-border)}

/* search box for the field library */
.pl-coleditor .pl-search[b-svvsrhdngm]{display:flex;align-items:center;gap:7px;border:1px solid var(--pl-border);border-radius:var(--pl-radius);padding:6px 10px;margin-bottom:6px;transition:border-color .12s}
.pl-coleditor .pl-search:focus-within[b-svvsrhdngm]{border-color:var(--pl-primary)}
.pl-coleditor .pl-search-ic[b-svvsrhdngm]{color:var(--pl-text-2);flex:none}
.pl-coleditor .pl-search-in[b-svvsrhdngm]{flex:1;border:none;outline:none;background:transparent;font:inherit;font-size:.86rem;color:var(--pl-text)}
.pl-coleditor .pl-search-in[b-svvsrhdngm]::placeholder{color:var(--pl-text-2)}
.pl-coleditor .pl-search-x[b-svvsrhdngm]{cursor:pointer;color:var(--pl-text-2);font-size:.78rem;padding:0 2px}
.pl-coleditor .pl-search-x:hover[b-svvsrhdngm]{color:var(--pl-danger)}

/* field library rows (built-in + reusable workspace fields) */
.pl-coleditor .pl-fieldlist[b-svvsrhdngm]{display:flex;flex-direction:column;gap:2px}
.pl-coleditor .pl-fieldrow[b-svvsrhdngm]{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid transparent;border-radius:var(--pl-radius);cursor:pointer;transition:background .1s,border-color .1s}
.pl-coleditor .pl-fieldrow:hover[b-svvsrhdngm]{background:var(--pl-hov);border-color:var(--pl-primary)}
.pl-coleditor .pl-fr-ic[b-svvsrhdngm]{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--pl-radius);background:var(--pl-chip);color:var(--pl-text-2);flex:none}
.pl-coleditor .pl-fieldrow:hover .pl-fr-ic[b-svvsrhdngm]{background:var(--pl-surface);color:var(--pl-primary-ink)}
.pl-coleditor .pl-fr-name[b-svvsrhdngm]{flex:1;min-width:0;font-size:.88rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-coleditor .pl-fr-type[b-svvsrhdngm]{font-size:.72rem;color:var(--pl-text-2);white-space:nowrap}
.pl-coleditor .pl-fr-add[b-svvsrhdngm]{width:20px;text-align:center;color:var(--pl-text-2);font-size:1rem;opacity:0;transition:opacity .1s;flex:none}
.pl-coleditor .pl-fieldrow:hover .pl-fr-add[b-svvsrhdngm]{opacity:1;color:var(--pl-primary)}

/* already-on-this-board: keep it visible but clearly inert (no add affordance, no hover lift) */
.pl-coleditor .pl-fieldrow.applied[b-svvsrhdngm]{cursor:default;opacity:.55}
.pl-coleditor .pl-fieldrow.applied:hover[b-svvsrhdngm]{background:transparent;border-color:transparent}
.pl-coleditor .pl-fieldrow.applied:hover .pl-fr-ic[b-svvsrhdngm]{background:var(--pl-chip);color:var(--pl-text-2)}
.pl-coleditor .pl-fr-applied[b-svvsrhdngm]{font-size:.7rem;font-weight:600;color:var(--pl-text-2);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;flex:none}

/* empty / no-results state inside the library */
.pl-coleditor .pl-emptylib[b-svvsrhdngm]{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:26px 16px;color:var(--pl-text-2)}
.pl-coleditor .pl-el-text[b-svvsrhdngm]{font-size:.85rem}
.pl-coleditor .pl-link[b-svvsrhdngm]{border:none;background:none;cursor:pointer;font:inherit;font-size:.85rem;font-weight:600;color:var(--pl-primary);padding:2px 4px}
.pl-coleditor .pl-link:hover[b-svvsrhdngm]{color:var(--pl-primary-ink);text-decoration:underline}

/* create-field type grid */
.pl-coleditor .pl-coltypes[b-svvsrhdngm]{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 14px}
.pl-coleditor .pl-coltype[b-svvsrhdngm]{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 6px;border:1px solid var(--pl-border);border-radius:var(--pl-radius);cursor:pointer;color:var(--pl-text-2);transition:all .12s}
.pl-coleditor .pl-coltype:hover[b-svvsrhdngm]{border-color:var(--pl-primary);color:var(--pl-text);background:var(--pl-hov)}
.pl-coleditor .pl-coltype.sel[b-svvsrhdngm]{border-color:var(--pl-primary);background:var(--pl-primary-100);color:var(--pl-primary-ink)}
.pl-coleditor .pl-ct-name[b-svvsrhdngm]{font-size:.78rem;font-weight:500}

/* enum option editor + per-option colour palette */
.pl-coleditor .pl-opt[b-svvsrhdngm]{display:flex;align-items:center;gap:9px;padding:3px 0}
.pl-coleditor .pl-opt .pl-sw[b-svvsrhdngm]{width:18px;height:18px;border-radius:5px;border:1px solid var(--pl-border);flex:none;cursor:pointer;transition:transform .1s}
.pl-coleditor .pl-opt .pl-sw:hover[b-svvsrhdngm]{transform:scale(1.12)}
.pl-coleditor .pl-opt .pl-x[b-svvsrhdngm]{cursor:pointer;color:var(--pl-text-2);font-size:.85rem}
.pl-coleditor .pl-opt .pl-x:hover[b-svvsrhdngm]{color:var(--pl-danger)}
.pl-coleditor .pl-palette[b-svvsrhdngm]{display:flex;flex-wrap:wrap;gap:7px;padding:6px 0 8px 27px}
.pl-coleditor .pl-pd[b-svvsrhdngm]{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid var(--pl-surface);box-shadow:0 0 0 1px var(--pl-border);transition:transform .1s}
.pl-coleditor .pl-pd:hover[b-svvsrhdngm]{transform:scale(1.15)}
.pl-coleditor .pl-pd.sel[b-svvsrhdngm]{box-shadow:0 0 0 2px var(--pl-primary)}
.pl-coleditor .pl-addopt[b-svvsrhdngm]{color:var(--pl-primary);font-size:.85rem;cursor:pointer;margin-top:6px;display:inline-block}
.pl-coleditor .pl-addopt:hover[b-svvsrhdngm]{color:var(--pl-primary-ink)}

/* live preview card */
.pl-coleditor .pl-preview[b-svvsrhdngm]{margin-top:18px;padding-top:14px;border-top:1px dashed var(--pl-border)}
.pl-coleditor .pl-pv-cap[b-svvsrhdngm]{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--pl-text-2);font-weight:600}
.pl-coleditor .pl-pv-card[b-svvsrhdngm]{margin-top:8px;border:1px solid var(--pl-border);border-radius:var(--pl-radius);overflow:hidden}
.pl-coleditor .pl-pv-head[b-svvsrhdngm]{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--pl-appbar);border-bottom:1px solid var(--pl-border);font-size:.74rem;font-weight:600;color:var(--pl-text-2)}
.pl-coleditor .pl-pv-val[b-svvsrhdngm]{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:9px 10px;min-height:20px}
.pl-coleditor .pl-pv-muted[b-svvsrhdngm]{color:var(--pl-text-2);font-size:.82rem}
.pl-coleditor .pl-pv-chip[b-svvsrhdngm]{display:inline-block;border-radius:10px;padding:1px 9px;font-size:.74rem;font-weight:500}
.pl-coleditor .pl-pv-person[b-svvsrhdngm]{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--pl-text)}
.pl-coleditor .pl-pv-ava[b-svvsrhdngm]{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#cfd8dc,#90a4ae);flex:none}
.pl-coleditor .pl-pv-bool[b-svvsrhdngm]{color:var(--pl-primary)}

/* Done-toggle inline config (two status pickers) */
.pl-toggle-cfg[b-svvsrhdngm] { padding: 6px 2px 2px; }
.pl-tcfg-row[b-svvsrhdngm] { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.pl-tcfg-lbl[b-svvsrhdngm] { width: 92px; font-size: 0.85rem; color: var(--mud-palette-text-secondary, #6b7280); }
.pl-tcfg-foot[b-svvsrhdngm] { margin-top: 10px; }
/* /Features/Planning/Components/DeadlinePicker.razor.rz.scp.css */
/* Uses --mud-palette-* (not --pl-*) because the popover is teleported to <body>, outside the planning token
   scope. The trigger reads like a meta value; the popover is a self-contained card. */
.dlp[b-ce1kjanlx5]{display:inline-flex}

/* trigger */
.dlp-trigger[b-ce1kjanlx5]{cursor:pointer;font-size:.85rem;color:var(--mud-palette-text-primary);border-radius:3px;padding:1px 3px;white-space:nowrap}
.dlp-trigger:hover[b-ce1kjanlx5]{box-shadow:inset 0 0 0 1px var(--mud-palette-lines-default)}
.dlp-trigger.late[b-ce1kjanlx5]{color:var(--mud-palette-error)}
.dlp-empty[b-ce1kjanlx5]{color:var(--mud-palette-text-secondary)}

/* popover card */
.dlp-pop[b-ce1kjanlx5]{width:268px;background:var(--mud-palette-surface);border:1px solid var(--mud-palette-lines-default);
  border-radius:10px;box-shadow:0 10px 34px rgba(0,0,0,.16);padding:10px 10px 8px;
  color:var(--mud-palette-text-primary);font-size:13px}

.dlp-head[b-ce1kjanlx5]{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 6px}
.dlp-month[b-ce1kjanlx5]{font-weight:600;font-size:.86rem;text-transform:capitalize}
.dlp-nav[b-ce1kjanlx5]{width:24px;height:24px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-size:15px;
  color:var(--mud-palette-text-secondary);display:inline-flex;align-items:center;justify-content:center}
.dlp-nav:hover[b-ce1kjanlx5]{background:color-mix(in srgb,var(--mud-palette-primary) 10%,var(--mud-palette-surface));color:var(--mud-palette-text-primary)}

.dlp-dow[b-ce1kjanlx5]{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.dlp-dow span[b-ce1kjanlx5]{text-align:center;font-size:.62rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--mud-palette-text-secondary);padding:2px 0}
.dlp-grid[b-ce1kjanlx5]{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dlp-day[b-ce1kjanlx5]{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.82rem;border-radius:50%;
  cursor:pointer;color:var(--mud-palette-text-primary);user-select:none}
.dlp-day:hover[b-ce1kjanlx5]{background:color-mix(in srgb,var(--mud-palette-primary) 10%,var(--mud-palette-surface))}
.dlp-day.dim[b-ce1kjanlx5]{color:var(--mud-palette-text-secondary);opacity:.45}
.dlp-day.today[b-ce1kjanlx5]{box-shadow:inset 0 0 0 1.5px var(--mud-palette-primary);color:var(--mud-palette-primary);font-weight:600}
.dlp-day.sel[b-ce1kjanlx5]{background:var(--mud-palette-primary);color:var(--mud-palette-primary-text,#fff);font-weight:600}
.dlp-day.sel:hover[b-ce1kjanlx5]{background:var(--mud-palette-primary)}

.dlp-divider[b-ce1kjanlx5]{height:1px;background:var(--mud-palette-lines-default);margin:8px 0;opacity:.7}

.dlp-timerow[b-ce1kjanlx5]{display:flex;align-items:center;min-height:30px;padding:0 2px}
.dlp-addtime[b-ce1kjanlx5]{display:inline-flex;align-items:center;gap:6px;color:var(--mud-palette-primary);font-size:.82rem;
  cursor:pointer;background:none;border:none;padding:4px 2px;font:inherit}
.dlp-addtime:hover[b-ce1kjanlx5]{text-decoration:underline}
.dlp-addtime:disabled[b-ce1kjanlx5]{color:var(--mud-palette-text-disabled);cursor:default;text-decoration:none}
.dlp-timeset[b-ce1kjanlx5]{display:inline-flex;align-items:center;gap:8px}
.dlp-time-lbl[b-ce1kjanlx5]{font-size:.66rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mud-palette-text-secondary)}
.dlp-time-in[b-ce1kjanlx5]{font:inherit;font-size:.84rem;border:1px solid var(--mud-palette-lines-default);border-radius:6px;
  padding:3px 6px;color:var(--mud-palette-text-primary);background:var(--mud-palette-surface);color-scheme:light dark}
.dlp-tx[b-ce1kjanlx5]{color:var(--mud-palette-text-secondary);cursor:pointer;font-size:.8rem}
.dlp-tx:hover[b-ce1kjanlx5]{color:var(--mud-palette-error)}

.dlp-foot[b-ce1kjanlx5]{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.dlp-clear[b-ce1kjanlx5]{background:none;border:none;color:var(--mud-palette-text-secondary);font-size:.8rem;cursor:pointer;padding:4px 2px;font:inherit}
.dlp-clear:hover[b-ce1kjanlx5]{color:var(--mud-palette-error)}
.dlp-done[b-ce1kjanlx5]{background:var(--mud-palette-primary);color:var(--mud-palette-primary-text,#fff);border:none;border-radius:6px;
  padding:5px 14px;font-size:.82rem;cursor:pointer;font:inherit}
.dlp-done:hover[b-ce1kjanlx5]{filter:brightness(1.05)}
/* /Features/Planning/Components/EntityTaskPanel.razor.rz.scp.css */
.etp[b-vdlhdeb14i]{display:flex;flex-direction:column;height:100%;min-height:0}
.etp-center[b-vdlhdeb14i]{display:flex;justify-content:center;padding:28px}

/* multiple-linked-tasks switcher */
.etp-switch[b-vdlhdeb14i]{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:2px 2px 8px}
.etp-switch-lbl[b-vdlhdeb14i]{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--mud-palette-text-secondary);margin-right:4px}
.etp-chip[b-vdlhdeb14i]{cursor:pointer;font-size:.78rem;font-variant-numeric:tabular-nums;padding:1px 8px;border-radius:10px;border:1px solid var(--mud-palette-lines-default);color:var(--mud-palette-text-secondary)}
.etp-chip:hover[b-vdlhdeb14i]{border-color:var(--mud-palette-primary);color:var(--mud-palette-text-primary)}
.etp-chip.active[b-vdlhdeb14i]{background:color-mix(in srgb,var(--mud-palette-primary) 16%,var(--mud-palette-surface));border-color:var(--mud-palette-primary);color:var(--mud-palette-primary)}
/* "+ New" — add another task for this entity; primary-tinted, sits after the numbered chips */
.etp-chip.etp-new[b-vdlhdeb14i]{margin-left:auto;border-style:dashed;color:var(--mud-palette-primary)}
.etp-chip.etp-new:hover[b-vdlhdeb14i]{background:color-mix(in srgb,var(--mud-palette-primary) 12%,var(--mud-palette-surface));border-style:solid}

/* the detail panel fills the remaining height */
.etp-panel[b-vdlhdeb14i]{flex:1;min-height:0;display:flex;flex-direction:column}

/* empty state */
.etp-empty[b-vdlhdeb14i]{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:40px 20px}
.etp-close[b-vdlhdeb14i]{position:absolute;top:6px;right:6px;cursor:pointer;color:var(--mud-palette-text-secondary);font-size:1rem;line-height:1;padding:4px}
.etp-close:hover[b-vdlhdeb14i]{color:var(--mud-palette-text-primary)}
.etp-empty-ic[b-vdlhdeb14i]{color:var(--mud-palette-text-disabled)}
.etp-empty-t[b-vdlhdeb14i]{font-size:.9rem;color:var(--mud-palette-text-secondary);max-width:280px}
.etp-create[b-vdlhdeb14i]{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px}
.etp-title-in[b-vdlhdeb14i]{width:100%;box-sizing:border-box;font:inherit;font-size:.9rem;color:var(--mud-palette-text-primary);background:var(--mud-palette-surface);border:1px solid var(--mud-palette-lines-inputs);border-radius:6px;padding:8px 10px;outline:none}
.etp-title-in:focus[b-vdlhdeb14i]{border-color:var(--mud-palette-primary)}
/* /Features/Planning/Components/FavoriteBoardsWidget.razor.rz.scp.css */
/* Card chrome + header now come from the shared <WidgetCard>. This file styles only the inner list/states. */
[b-quvgs54yh3] .pl-w-head-ic {
    width: 18px;
    height: 18px;
    color: #f5b301;
}

.pl-w-loading[b-quvgs54yh3] {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.pl-w-empty[b-quvgs54yh3] {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary, #8a8a8a);
    padding: 6px 2px 2px;
}

.pl-w-list[b-quvgs54yh3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pl-w-row[b-quvgs54yh3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--mud-palette-text-primary, #2b2b2b);
    transition: background-color .12s ease;
}

.pl-w-row:hover[b-quvgs54yh3] {
    background: var(--mud-palette-action-default-hover, rgba(0,0,0,0.04));
}

.pl-w-row-name[b-quvgs54yh3] {
    flex: 1 1 auto;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-quvgs54yh3] .pl-w-row-go {
    width: 16px;
    height: 16px;
    color: var(--mud-palette-text-disabled, #c4c4c4);
    opacity: 0;
    transition: opacity .12s ease;
}

.pl-w-row:hover .pl-w-row-go[b-quvgs54yh3] {
    opacity: 1;
}
/* /Features/Planning/Components/FilterBuilder.razor.rz.scp.css */
.pl-fb[b-3j34sl9opm]{
  --pl-primary:var(--mud-palette-primary); --pl-primary-100:color-mix(in srgb,var(--mud-palette-primary) 22%,var(--mud-palette-surface)); --pl-primary-ink:color-mix(in srgb,var(--mud-palette-primary) 55%,var(--mud-palette-text-primary));
  --pl-bg:var(--mud-palette-background); --pl-surface:var(--mud-palette-surface); --pl-subnav:var(--mud-palette-surface); --pl-appbar:var(--mud-palette-appbar-background);
  --pl-border:var(--mud-palette-lines-default); --pl-nav-border:var(--mud-palette-lines-default); --pl-line-strong:var(--mud-palette-lines-inputs);
  --pl-text:var(--mud-palette-text-primary); --pl-text-2:var(--mud-palette-text-secondary); --pl-muted:color-mix(in srgb,var(--mud-palette-text-primary) 38%,var(--mud-palette-surface));
  --pl-hov:color-mix(in srgb,var(--mud-palette-primary) 10%,var(--mud-palette-surface)); --pl-chip:color-mix(in srgb,var(--mud-palette-text-primary) 7%,var(--mud-palette-surface)); --pl-grp:color-mix(in srgb,var(--mud-palette-text-primary) 5%,var(--mud-palette-background));
  --pl-tint:color-mix(in srgb,var(--mud-palette-text-primary) 6%,transparent); --pl-danger:var(--mud-palette-error); --pl-radius:4px;
  display:inline-flex;position:relative;
}

/* trigger button */
.pl-fb-btn[b-3j34sl9opm]{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--pl-line-strong);border-radius:6px;background:var(--pl-surface);color:var(--pl-text);font:inherit;font-size:.85rem;cursor:pointer}
.pl-fb-btn:hover[b-3j34sl9opm]{border-color:var(--pl-primary);color:var(--pl-primary-ink)}
.pl-fb-btn.on[b-3j34sl9opm]{border-color:var(--pl-primary);background:var(--pl-primary-100);color:var(--pl-primary-ink);font-weight:500}
.pl-fb-btn .mud-icon-root[b-3j34sl9opm]{font-size:1.05rem}
.pl-fb-count[b-3j34sl9opm]{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--pl-primary);color:#fff;font-size:.68rem;font-weight:700}

/* Inline mode: render the panel as a normal in-flow block (no floating popover) so it can't be clipped by a
   host's overflow (e.g. the config dialog). Drops the popover chrome — the surrounding form provides framing. */
.pl-fb.inline[b-3j34sl9opm]{display:block;position:static;flex:1 1 100%;width:100%}
.pl-fb.inline .pl-fb-pop[b-3j34sl9opm]{position:static;min-width:0;max-width:none;border:none;border-radius:0;padding:0;background:transparent}

/* plain CSS popover (no MudPopover) — a click-away scrim + an absolutely-positioned panel */
.pl-fb-scrim[b-3j34sl9opm]{position:fixed;inset:0;z-index:40;background:transparent}
.pl-fb-pop[b-3j34sl9opm]{position:absolute;top:calc(100% + 6px);right:0;z-index:41;background:var(--pl-surface);border:1px solid var(--pl-line-strong);border-radius:8px;padding:12px 14px;min-width:380px;max-width:520px}
.pl-fb-head[b-3j34sl9opm]{font-size:.78rem;font-weight:600;color:var(--pl-text);margin-bottom:8px}
.pl-fb-sub[b-3j34sl9opm]{font-weight:400;color:var(--pl-text-2)}
.pl-fb-empty[b-3j34sl9opm]{color:var(--pl-text-2);font-size:.82rem;padding:2px 0 8px}

/* a condition row */
.pl-fb-row[b-3j34sl9opm]{display:flex;align-items:center;gap:7px;margin:6px 0}
.pl-fb-field[b-3j34sl9opm]{flex:none;min-width:96px;font-size:.82rem;font-weight:500;color:var(--pl-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-fb-op[b-3j34sl9opm]{flex:none;font-size:.78rem;color:var(--pl-text-2)}
.pl-fb-row .pl-inline[b-3j34sl9opm]{flex:1;min-width:0}
.pl-fb-row .pl-fb-opsel[b-3j34sl9opm]{flex:none;width:auto;min-width:54px}
.pl-fb-x[b-3j34sl9opm]{flex:none;cursor:pointer;color:var(--pl-muted);font-size:.8rem}
.pl-fb-x:hover[b-3j34sl9opm]{color:var(--pl-danger)}

/* the inline editors mirror the table's .pl-inline so they read as one family */
.pl-fb-pop .pl-inline[b-3j34sl9opm]{box-sizing:border-box;border:1px solid var(--pl-line-strong);border-radius:4px;padding:3px 5px;font:inherit;font-size:.82rem;background:var(--pl-surface);outline:none}
.pl-fb-pop .pl-inline:focus[b-3j34sl9opm]{border-color:var(--pl-primary)}

/* add-condition area: a label + one "add" chip per available field (no select to retain/reset) */
.pl-fb-add[b-3j34sl9opm]{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pl-fb-add-lbl[b-3j34sl9opm]{font-size:.78rem;color:var(--pl-text-2);margin-right:2px}
.pl-fb-addchip[b-3j34sl9opm]{font:inherit;font-size:.8rem;line-height:1;cursor:pointer;padding:4px 9px;border:1px dashed var(--pl-line-strong);border-radius:12px;background:transparent;color:var(--pl-primary-ink)}
.pl-fb-addchip:hover[b-3j34sl9opm]{border-style:solid;border-color:var(--pl-primary);background:var(--pl-primary-100)}
.pl-fb-foot[b-3j34sl9opm]{margin-top:10px;display:flex;justify-content:flex-end}
.pl-fb-clear[b-3j34sl9opm]{cursor:pointer;color:var(--pl-text-2);font-size:.8rem}
.pl-fb-clear:hover[b-3j34sl9opm]{color:var(--pl-danger)}
/* /Features/Planning/Components/MyTaskActivityWidget.razor.rz.scp.css */
/* Card chrome + header now come from the shared <WidgetCard>. This file styles only the inner list/states. */
[b-9tm7odf1a8] .pl-aw-head-ic {
    width: 18px;
    height: 18px;
    color: var(--mud-palette-text-secondary, #6b7280);
}

.pl-aw-loading[b-9tm7odf1a8] {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.pl-aw-empty[b-9tm7odf1a8] {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary, #8a8a8a);
    padding: 6px 2px 2px;
}

.pl-aw-list[b-9tm7odf1a8] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 340px;
    overflow-y: auto;
}

/* "and N other changes" toggle — aligned under the ticket title (icon + gap of the activity line) */
.pl-aw-more[b-9tm7odf1a8] {
    padding: 0 10px 4px 36px;
}

.pl-aw-more-toggle[b-9tm7odf1a8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary, #6b7280);
    user-select: none;
}

.pl-aw-more-toggle:hover[b-9tm7odf1a8] {
    color: var(--mud-palette-primary, #2f6fb0);
}

.pl-aw-more-caret[b-9tm7odf1a8] {
    width: 10px;
    font-size: 0.6rem;
    display: inline-block;
    text-align: center;
}

/* expanded sibling changes: indented with a tree-like left rule */
.pl-aw-sub[b-9tm7odf1a8] {
    margin: 0 0 4px 24px;
    padding-left: 4px;
    border-left: 2px solid var(--mud-palette-lines-default, #e7e9ee);
}
/* /Features/Planning/Components/PlanningBoardView.razor.rz.scp.css */
/* Self-contained board embed. Declares the planning tokens on its root (like the other planning components) so
   the reused TaskBoardTable / TaskDetailPanel / FilterBuilder resolve their --pl-* vars even outside the
   /planning grid. */
.pbv[b-yuq2kdsf2w]{
  --pl-primary:var(--mud-palette-primary); --pl-primary-100:color-mix(in srgb,var(--mud-palette-primary) 22%,var(--mud-palette-surface)); --pl-primary-ink:color-mix(in srgb,var(--mud-palette-primary) 55%,var(--mud-palette-text-primary));
  --pl-bg:var(--mud-palette-background); --pl-surface:var(--mud-palette-surface); --pl-subnav:var(--mud-palette-surface); --pl-appbar:var(--mud-palette-appbar-background);
  --pl-border:var(--mud-palette-lines-default); --pl-nav-border:var(--mud-palette-lines-default); --pl-line-strong:var(--mud-palette-lines-inputs);
  --pl-text:var(--mud-palette-text-primary); --pl-text-2:var(--mud-palette-text-secondary); --pl-muted:color-mix(in srgb,var(--mud-palette-text-primary) 38%,var(--mud-palette-surface));
  --pl-hov:color-mix(in srgb,var(--mud-palette-primary) 10%,var(--mud-palette-surface)); --pl-chip:color-mix(in srgb,var(--mud-palette-text-primary) 7%,var(--mud-palette-surface)); --pl-grp:color-mix(in srgb,var(--mud-palette-text-primary) 5%,var(--mud-palette-background));
  --pl-tint:color-mix(in srgb,var(--mud-palette-text-primary) 6%,transparent); --pl-danger:var(--mud-palette-error); --pl-radius:4px;
  position:relative; display:flex; flex-direction:column; min-height:0; flex:1;
  color:var(--pl-text); font-size:.9rem;
}

.pbv-loading[b-yuq2kdsf2w]{display:flex;justify-content:center;padding:24px}

/* compact filter row */
.pbv-filters[b-yuq2kdsf2w]{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:4px 2px 8px}
.pbv-groupby[b-yuq2kdsf2w]{display:inline-flex;align-items:center;gap:6px}
.pbv-groupby-lbl[b-yuq2kdsf2w]{color:var(--pl-text-2);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.pbv-sel[b-yuq2kdsf2w]{font:inherit;font-size:.82rem;color:var(--pl-text);background:var(--pl-surface);border:1px solid var(--pl-border);border-radius:var(--pl-radius);padding:3px 6px;color-scheme:light dark}
.pbv-sel option[b-yuq2kdsf2w]{background:var(--pl-surface);color:var(--pl-text)}
.pbv-search[b-yuq2kdsf2w]{display:inline-flex;align-items:center;gap:6px;flex:1;min-width:140px;background:var(--pl-surface);border:1px solid var(--pl-border);border-radius:var(--pl-radius);padding:3px 8px}
.pbv-search-ic[b-yuq2kdsf2w]{color:var(--pl-text-2)}
.pbv-search-in[b-yuq2kdsf2w]{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;font-size:.85rem;color:var(--pl-text)}
.pbv-search-x[b-yuq2kdsf2w]{cursor:pointer;color:var(--pl-text-2);font-size:.8rem}
.pbv-search-x:hover[b-yuq2kdsf2w]{color:var(--pl-text)}

/* The table carries a 20px side gutter for the full /planning page; inside the sidebar we want it flush to the
   edges, so drop that margin here (::deep — .pl-tablewrap is rendered by the child TaskBoardTable). */
.pbv[b-yuq2kdsf2w]  .pl-tablewrap{margin:0}

/* drawer overlays the embed area (no room for a side panel in the sidebar) */
.pbv-scrim[b-yuq2kdsf2w]{position:absolute;inset:0;background:rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity .16s;z-index:40}
.pbv-scrim.open[b-yuq2kdsf2w]{opacity:1;pointer-events:auto}
.pbv-drawer[b-yuq2kdsf2w]{position:absolute;inset:0;background:var(--pl-surface);transform:translateX(100%);transition:transform .16s ease;z-index:41;display:flex;flex-direction:column;min-height:0}
.pbv-drawer.open[b-yuq2kdsf2w]{transform:none}
/* /Features/Planning/Components/PlanningConfigDialog.razor.rz.scp.css */
.pl-config[b-0zch5suk98]{
  --pl-primary:var(--mud-palette-primary); --pl-primary-100:color-mix(in srgb,var(--mud-palette-primary) 22%,var(--mud-palette-surface)); --pl-primary-ink:color-mix(in srgb,var(--mud-palette-primary) 55%,var(--mud-palette-text-primary));
  --pl-bg:var(--mud-palette-background); --pl-surface:var(--mud-palette-surface); --pl-subnav:var(--mud-palette-surface); --pl-appbar:var(--mud-palette-appbar-background);
  --pl-border:var(--mud-palette-lines-default); --pl-nav-border:var(--mud-palette-lines-default); --pl-line-strong:var(--mud-palette-lines-inputs);
  --pl-text:var(--mud-palette-text-primary); --pl-text-2:var(--mud-palette-text-secondary); --pl-muted:color-mix(in srgb,var(--mud-palette-text-primary) 38%,var(--mud-palette-surface));
  --pl-hov:color-mix(in srgb,var(--mud-palette-primary) 10%,var(--mud-palette-surface)); --pl-chip:color-mix(in srgb,var(--mud-palette-text-primary) 7%,var(--mud-palette-surface)); --pl-grp:color-mix(in srgb,var(--mud-palette-text-primary) 5%,var(--mud-palette-background));
  --pl-tint:color-mix(in srgb,var(--mud-palette-text-primary) 6%,transparent); --pl-danger:var(--mud-palette-error); --pl-radius:4px;
  color:var(--pl-text);
}
.pl-config .pl-d-sec[b-0zch5suk98]{display:flex;align-items:baseline;gap:8px;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--pl-text-2);font-weight:600;margin:16px 0 7px}
.pl-config .pl-d-note[b-0zch5suk98]{text-transform:none;letter-spacing:0;font-weight:400;font-size:.72rem;color:var(--pl-text-2);opacity:.85}
.pl-config .pl-d-hint[b-0zch5suk98]{color:var(--pl-text-2);font-size:.8rem;margin:6px 0 4px}

/* neutral inline text field — green border only on focus */
.pl-config .pl-inline[b-0zch5suk98]{box-sizing:border-box;border:1px solid var(--pl-border);border-radius:var(--pl-radius);padding:5px 8px;font:inherit;font-size:.86rem;background:var(--pl-surface);outline:none;transition:border-color .12s}
.pl-config .pl-inline:focus[b-0zch5suk98]{border-color:var(--pl-primary)}

/* segmented mode toggle (keuzelijsten vs. automatisering) */
.pl-config .pl-seg[b-0zch5suk98]{display:flex;gap:4px;padding:3px;background:var(--pl-chip);border-radius:7px;margin:2px 0 16px}
.pl-config .pl-seg-btn[b-0zch5suk98]{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;background:transparent;border-radius:5px;padding:7px 10px;cursor:pointer;font:inherit;font-size:.83rem;font-weight:500;color:var(--pl-text-2);transition:all .12s}
.pl-config .pl-seg-btn:hover[b-0zch5suk98]{color:var(--pl-text)}
.pl-config .pl-seg-btn.sel[b-0zch5suk98]{background:var(--pl-surface);color:var(--pl-primary-ink);box-shadow:0 1px 2px var(--pl-border)}

/* ── keuzelijsten: master / detail ─────────────────────────────────── */
.pl-config .pl-cfg[b-0zch5suk98]{display:grid;grid-template-columns:230px 1fr;gap:18px;min-height:300px}
.pl-config .pl-cfg-list[b-0zch5suk98]{border-right:1px solid var(--pl-border);padding-right:14px;display:flex;flex-direction:column;gap:2px}

.pl-config .pl-cfg-set[b-0zch5suk98]{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid transparent;border-radius:var(--pl-radius);cursor:pointer;transition:background .1s,border-color .1s}
.pl-config .pl-cfg-set:hover[b-0zch5suk98]{background:var(--pl-hov);border-color:var(--pl-primary)}
.pl-config .pl-cfg-set.active[b-0zch5suk98]{background:var(--pl-primary-100);border-color:transparent;color:var(--pl-primary-ink)}
.pl-config .pl-cfg-set-ic[b-0zch5suk98]{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--pl-radius);background:var(--pl-chip);color:var(--pl-text-2);flex:none}
.pl-config .pl-cfg-set:hover .pl-cfg-set-ic[b-0zch5suk98],.pl-config .pl-cfg-set.active .pl-cfg-set-ic[b-0zch5suk98]{background:var(--pl-surface);color:var(--pl-primary-ink)}
.pl-config .pl-cfg-set-name[b-0zch5suk98]{flex:1;min-width:0;font-size:.88rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-config .pl-cfg-set-n[b-0zch5suk98]{flex:none;min-width:20px;text-align:center;font-size:.72rem;font-weight:600;color:var(--pl-text-2);background:var(--pl-chip);border-radius:9px;padding:1px 7px}
.pl-config .pl-cfg-set.active .pl-cfg-set-n[b-0zch5suk98]{background:var(--pl-surface);color:var(--pl-primary-ink)}

.pl-config .pl-cfg-empty[b-0zch5suk98]{color:var(--pl-text-2);font-size:.82rem;padding:10px 9px}

/* boxed add-list row */
.pl-config .pl-cfg-add[b-0zch5suk98]{display:flex;align-items:center;gap:6px;margin-top:10px}
.pl-config .pl-cfg-addin[b-0zch5suk98]{flex:1;min-width:0;box-sizing:border-box;border:1px solid var(--pl-border);border-radius:var(--pl-radius);padding:6px 8px;font:inherit;font-size:.84rem;background:var(--pl-surface);outline:none;transition:border-color .12s}
.pl-config .pl-cfg-addin:focus[b-0zch5suk98]{border-color:var(--pl-primary)}
.pl-config .pl-cfg-addbtn[b-0zch5suk98]{flex:none;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--pl-border);border-radius:var(--pl-radius);background:var(--pl-surface);color:var(--pl-primary);font-size:1.05rem;line-height:1;cursor:pointer;transition:all .12s}
.pl-config .pl-cfg-addbtn:hover:not(:disabled)[b-0zch5suk98]{border-color:var(--pl-primary);background:var(--pl-hov);color:var(--pl-primary-ink)}
.pl-config .pl-cfg-addbtn:disabled[b-0zch5suk98]{opacity:.4;cursor:default}

/* detail pane */
.pl-config .pl-cfg-detail[b-0zch5suk98]{min-width:0}
.pl-config .pl-cfg-title[b-0zch5suk98]{width:100%;box-sizing:border-box;border:1px solid transparent;border-radius:var(--pl-radius);padding:6px 8px;margin:-6px 0 2px -8px;font:inherit;font-size:1.02rem;font-weight:600;background:transparent;outline:none;transition:border-color .12s,background .12s}
.pl-config .pl-cfg-title:hover[b-0zch5suk98]{background:var(--pl-chip)}
.pl-config .pl-cfg-title:focus[b-0zch5suk98]{border-color:var(--pl-primary);background:var(--pl-surface)}

/* workflow statuses tab */
.pl-config .pl-statuses[b-0zch5suk98]{min-height:280px}
.pl-config .pl-cat-sel[b-0zch5suk98]{flex:none;width:130px}
.pl-config .pl-reorder[b-0zch5suk98]{flex:none;display:inline-flex;gap:1px}
.pl-config .pl-ro[b-0zch5suk98]{cursor:pointer;color:var(--pl-text-2);font-size:.72rem;line-height:1;padding:2px 3px;border-radius:3px}
.pl-config .pl-ro:hover[b-0zch5suk98]{color:var(--pl-primary-ink);background:var(--pl-hov)}
.pl-config .pl-ro.off[b-0zch5suk98]{opacity:.25;pointer-events:none}

/* enum option rows + per-option colour palette (shared by the statuses tab) */
.pl-config .pl-opt[b-0zch5suk98]{display:flex;align-items:center;gap:9px;padding:3px 0}
.pl-config .pl-opt .pl-sw[b-0zch5suk98]{width:18px;height:18px;border-radius:5px;border:1px solid var(--pl-border);flex:none;cursor:pointer;transition:transform .1s}
.pl-config .pl-opt .pl-sw:hover[b-0zch5suk98]{transform:scale(1.12)}
.pl-config .pl-opt-in[b-0zch5suk98]{flex:1;min-width:0}
.pl-config .pl-opt .pl-x[b-0zch5suk98]{cursor:pointer;color:var(--pl-text-2);font-size:.85rem;flex:none}
.pl-config .pl-opt .pl-x:hover[b-0zch5suk98]{color:var(--pl-danger)}

.pl-config .pl-palette[b-0zch5suk98]{display:flex;flex-wrap:wrap;gap:7px;padding:6px 0 8px 27px}
.pl-config .pl-pd[b-0zch5suk98]{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid var(--pl-surface);box-shadow:0 0 0 1px var(--pl-border);transition:transform .1s}
.pl-config .pl-pd:hover[b-0zch5suk98]{transform:scale(1.15)}
.pl-config .pl-pd.sel[b-0zch5suk98]{box-shadow:0 0 0 2px var(--pl-primary)}
.pl-config .pl-pd-custom[b-0zch5suk98]{position:relative;overflow:hidden;background:conic-gradient(from 0deg,#e53935,#fb8c00,#fdd835,var(--pl-primary),#00ace4,#3949ab,#8445f1,#e53935)}
.pl-config .pl-pd-custom input[type=color][b-0zch5suk98]{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);border:none;padding:0;background:transparent;opacity:0;cursor:pointer}

/* add-option row */
.pl-config .pl-cfg-addopt[b-0zch5suk98]{display:flex;align-items:center;gap:8px;margin-top:12px}
.pl-config .pl-mini-btn[b-0zch5suk98]{flex:none;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--pl-border);border-radius:var(--pl-radius);background:var(--pl-surface);color:var(--pl-primary);font:inherit;font-size:.8rem;font-weight:600;padding:5px 10px;cursor:pointer;white-space:nowrap;transition:all .12s}
.pl-config .pl-mini-btn:hover:not(:disabled)[b-0zch5suk98]{border-color:var(--pl-primary);background:var(--pl-hov);color:var(--pl-primary-ink)}
.pl-config .pl-mini-btn:disabled[b-0zch5suk98]{opacity:.4;cursor:default}

/* empty / placeholder states */
.pl-config .pl-emptylib[b-0zch5suk98]{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:34px 16px;color:var(--pl-text-2)}
.pl-config .pl-emptylib .mud-icon-root[b-0zch5suk98]{font-size:2rem;color:var(--pl-muted)}
.pl-config .pl-el-text[b-0zch5suk98]{font-size:.85rem;max-width:280px}

/* ── automatisering ────────────────────────────────────────────────── */
.pl-config .pl-auto-help[b-0zch5suk98]{display:flex;align-items:flex-start;gap:8px;background:var(--pl-hov);border:1px solid var(--pl-primary-100);border-radius:var(--pl-radius);padding:9px 12px;margin:2px 0 14px;color:var(--pl-text-2);font-size:.82rem;line-height:1.4}
.pl-config .pl-auto-help .mud-icon-root[b-0zch5suk98]{color:var(--pl-primary-ink);flex:none;margin-top:1px}

.pl-config .pl-rules[b-0zch5suk98]{display:flex;flex-direction:column;gap:8px}
.pl-config .pl-rule[b-0zch5suk98]{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--pl-border);border-radius:var(--pl-radius);background:var(--pl-surface);transition:opacity .12s}
.pl-config .pl-rule.off[b-0zch5suk98]{opacity:.55}
.pl-config .pl-rule-text[b-0zch5suk98]{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.84rem}
.pl-config .pl-rule-when[b-0zch5suk98]{color:var(--pl-text-2)}
.pl-config .pl-rule-status[b-0zch5suk98],.pl-config .pl-rule-board[b-0zch5suk98]{display:inline-block;border-radius:10px;padding:1px 9px;font-size:.76rem;font-weight:600;background:var(--pl-chip);color:var(--pl-text)}
.pl-config .pl-rule-board[b-0zch5suk98]{background:var(--pl-primary-100);color:var(--pl-primary-ink)}
/* archive action — red, to read as a terminal step (vs the primary-tinted "move to board") */
.pl-config .pl-rule-archive[b-0zch5suk98]{display:inline-block;border-radius:10px;padding:1px 9px;font-size:.76rem;font-weight:600;background:color-mix(in srgb,var(--mud-palette-error) 16%,var(--mud-palette-surface));color:var(--mud-palette-error)}
/* "Move to archive instead" toggle under the board chooser */
.pl-config .pl-archive-opt[b-0zch5suk98]{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-size:.8rem;font-weight:500;color:var(--mud-palette-error);border:1px solid transparent;border-radius:6px;padding:2px 8px;transition:background .12s,border-color .12s}
.pl-config .pl-archive-opt:hover[b-0zch5suk98]{background:color-mix(in srgb,var(--mud-palette-error) 8%,var(--mud-palette-surface))}
.pl-config .pl-archive-opt.on[b-0zch5suk98]{background:color-mix(in srgb,var(--mud-palette-error) 14%,var(--mud-palette-surface));border-color:var(--mud-palette-error)}
.pl-config .pl-archive-opt .mud-icon-root[b-0zch5suk98]{font-size:1rem}
.pl-config .pl-rule-arrow[b-0zch5suk98]{color:var(--pl-text-2)}
.pl-config .pl-rule .pl-x[b-0zch5suk98]{cursor:pointer;color:var(--pl-text-2);font-size:.85rem;flex:none}
.pl-config .pl-rule .pl-x:hover[b-0zch5suk98]{color:var(--pl-danger)}

/* new-rule recipe builder */
.pl-config .pl-builder[b-0zch5suk98]{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px;border:1px dashed var(--pl-border);border-radius:var(--pl-radius);background:var(--pl-bg)}
.pl-config .pl-builder>span[b-0zch5suk98]{font-size:.84rem;color:var(--pl-text-2)}
/* /Features/Planning/Components/PlanningSidebar.razor.rz.scp.css */
/* Self-contained nav rail — declares its own tokens (it's its own CSS-isolation scope). */
.pl-subnav[b-so7xzg0l3j]{
  --pl-primary:var(--mud-palette-primary); --pl-primary-100:color-mix(in srgb,var(--mud-palette-primary) 22%,var(--mud-palette-surface)); --pl-primary-ink:color-mix(in srgb,var(--mud-palette-primary) 55%,var(--mud-palette-text-primary));
  --pl-bg:var(--mud-palette-background); --pl-surface:var(--mud-palette-surface); --pl-subnav:var(--mud-palette-surface); --pl-appbar:var(--mud-palette-appbar-background);
  --pl-border:var(--mud-palette-lines-default); --pl-nav-border:var(--mud-palette-lines-default); --pl-line-strong:var(--mud-palette-lines-inputs);
  --pl-text:var(--mud-palette-text-primary); --pl-text-2:var(--mud-palette-text-secondary); --pl-muted:color-mix(in srgb,var(--mud-palette-text-primary) 38%,var(--mud-palette-surface));
  --pl-hov:color-mix(in srgb,var(--mud-palette-primary) 10%,var(--mud-palette-surface)); --pl-chip:color-mix(in srgb,var(--mud-palette-text-primary) 7%,var(--mud-palette-surface)); --pl-grp:color-mix(in srgb,var(--mud-palette-text-primary) 5%,var(--mud-palette-background));
  --pl-tint:color-mix(in srgb,var(--mud-palette-text-primary) 6%,transparent); --pl-danger:var(--mud-palette-error); --pl-radius:4px;
  background:var(--pl-subnav);border-right:1px solid var(--pl-nav-border);padding:14px 10px;
  /* Own the height: header pinned, nav body scrolls within the viewport so the rail never grows the page. */
  display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;
}
.pl-head[b-so7xzg0l3j]{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.05rem;padding:2px 8px 10px;flex:none}
/* scroll region: everything below the header. Negative side margins let the scrollbar hug the rail edge while
   the rows keep the rail's horizontal padding. */
.pl-nav-scroll[b-so7xzg0l3j]{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;margin:0 -10px;padding:0 10px}
/* collapse chevron, pushed to the far right of the header */
.pl-collapse[b-so7xzg0l3j]{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--pl-radius);cursor:pointer;color:var(--pl-text-2);transition:background .12s,color .12s}
.pl-collapse:hover[b-so7xzg0l3j]{background:var(--pl-primary-100);color:var(--pl-primary-ink)}
.pl-label[b-so7xzg0l3j]{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--pl-text-2);margin:22px 10px 3px;font-weight:600}
/* collapsible section label (Recent): caret + label, click to fold/unfold */
.pl-label-toggle[b-so7xzg0l3j]{display:flex;align-items:center;gap:4px;cursor:pointer;user-select:none}
.pl-label-toggle:hover[b-so7xzg0l3j]{color:var(--pl-text)}

/* quick-filter: jump straight to a board/project by name (sits under the "My teams" label) */
.pl-navfilter[b-so7xzg0l3j]{display:flex;align-items:center;gap:6px;margin:0 10px 6px;padding:3px 8px;border:1px solid var(--pl-border);border-radius:var(--pl-radius);background:var(--pl-surface);color:var(--pl-text-2)}
.pl-navfilter:focus-within[b-so7xzg0l3j]{border-color:var(--pl-primary)}
.pl-navfilter-in[b-so7xzg0l3j]{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;font-size:.82rem;color:var(--pl-text)}
.pl-navfilter-in[b-so7xzg0l3j]::placeholder{color:var(--pl-muted)}
.pl-item[b-so7xzg0l3j]{display:flex;align-items:center;gap:9px;padding:4px 10px;border-radius:var(--pl-radius);cursor:pointer;font-size:.86rem;line-height:1.3;color:var(--pl-text)}
.pl-item:hover[b-so7xzg0l3j]{background:var(--pl-chip)}
.pl-item.active[b-so7xzg0l3j]{background:var(--pl-primary-100);color:var(--pl-primary-ink);font-weight:600}
/* "My tasks" gets its own flamingo accent when active (instead of the storage-purple) so it reads as distinct. */
.pl-item.island.active[b-so7xzg0l3j]{background:rgba(251,111,146,.14);color:color-mix(in srgb,#fb6f92 60%,var(--mud-palette-text-primary))}
.pl-item.proj[b-so7xzg0l3j]{color:var(--pl-text-2)}
.pl-item.muted[b-so7xzg0l3j]{color:var(--pl-text-2)}
.pl-pin[b-so7xzg0l3j]{width:9px;height:9px;border-radius:50%;background:var(--pl-muted);flex:none}
/* board name beside its colour tile (favourites / my boards) */
.pl-bname[b-so7xzg0l3j]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* favourite toggle: quiet, hover-only star on the right — no persistent stars cluttering the rail */
.pl-favtoggle[b-so7xzg0l3j]{flex:none;color:var(--pl-muted);font-size:.95rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s,color .12s}
.pl-item:hover .pl-favtoggle[b-so7xzg0l3j]{opacity:1}
.pl-favtoggle:hover[b-so7xzg0l3j]{color:var(--pl-primary)}
.pl-favtoggle.on[b-so7xzg0l3j]{color:#e6a43b}

/* Recent rows: project name primary, last-visited board as a quieter secondary hint on the same line */
.pl-recent-text[b-so7xzg0l3j]{display:flex;align-items:baseline;gap:6px;min-width:0;flex:1}
.pl-recent-proj[b-so7xzg0l3j]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-recent-board[b-so7xzg0l3j]{flex:none;max-width:48%;color:var(--pl-text-2);font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* teams (top-level collapsible groups; General first). The whole header toggles collapse; a team reads as a
   colour circle with a two-letter monogram, distinct from the rounded glyph-tiles projects use. */
.pl-team-head[b-so7xzg0l3j]{position:relative;display:flex;align-items:center;gap:8px;padding:5px 11px;border-radius:var(--pl-radius);cursor:pointer;font-size:.84rem;font-weight:400;color:var(--pl-text)}
.pl-team-head:hover[b-so7xzg0l3j]{background:var(--pl-chip)}
.pl-team-ava[b-so7xzg0l3j]{flex:none;width:27px;height:27px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.02em;line-height:1}
.pl-team-name[b-so7xzg0l3j]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-team-gear[b-so7xzg0l3j],.pl-team-add[b-so7xzg0l3j]{color:var(--pl-muted);font-size:.9rem;opacity:0;flex:none;width:18px;text-align:center;cursor:pointer}
.pl-team-add[b-so7xzg0l3j]{font-size:1.05rem;line-height:1}
.pl-team-head:hover .pl-team-gear[b-so7xzg0l3j],.pl-team-head:hover .pl-team-add[b-so7xzg0l3j]{opacity:1}
.pl-team-gear:hover[b-so7xzg0l3j],.pl-team-add:hover[b-so7xzg0l3j]{color:var(--pl-primary)}
.pl-team-children[b-so7xzg0l3j]{position:relative;margin:2px 0 10px 18px;padding-left:4px;border-left:1px solid color-mix(in srgb,var(--pl-rail,var(--pl-primary)) 18%,transparent)}

/* the team's "all tasks" entry — a real selectable scope, lighter than a board row */
.pl-all-tasks[b-so7xzg0l3j]{display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:var(--pl-radius);cursor:pointer;font-size:.82rem;color:var(--pl-text-2)}
.pl-all-tasks:hover[b-so7xzg0l3j]{background:var(--pl-chip)}
.pl-all-tasks.active[b-so7xzg0l3j]{background:var(--pl-primary-100);color:var(--pl-primary-ink)}

/* per-team "＋" add-menu (New project / New folder) — a tiny popover with a click-away backdrop */
.pl-addmenu-backdrop[b-so7xzg0l3j]{position:fixed;inset:0;z-index:30}
.pl-addmenu[b-so7xzg0l3j]{position:absolute;z-index:31;margin:0 11px 4px 36px;background:var(--pl-surface);border:1px solid var(--pl-border);border-radius:var(--pl-radius);box-shadow:0 6px 20px rgba(0,0,0,.16);padding:3px;width:max-content}
.pl-addmenu-item[b-so7xzg0l3j]{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:3px;cursor:pointer;font-size:.82rem;color:var(--pl-text);white-space:nowrap}
.pl-addmenu-item:hover[b-so7xzg0l3j]{background:var(--pl-primary-100);color:var(--pl-primary-ink)}

/* "Browse all teams…" — quiet text link pinned under the team list */
.pl-browse-teams[b-so7xzg0l3j]{display:flex;align-items:center;gap:8px;margin:8px 10px 2px;padding:4px 0;cursor:pointer;font-size:.8rem;color:var(--pl-text-2)}
.pl-browse-teams:hover[b-so7xzg0l3j]{color:var(--pl-primary)}

/* project folders (collapsible groups) */
.pl-folder-head[b-so7xzg0l3j]{display:flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--pl-radius);cursor:pointer;font-size:.82rem;color:var(--pl-text);}
.pl-folder-head:hover[b-so7xzg0l3j]{background:var(--pl-chip)}
.pl-fold-name[b-so7xzg0l3j]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-fold-edit[b-so7xzg0l3j],.pl-fold-del[b-so7xzg0l3j]{color:var(--pl-muted);font-size:.78rem;opacity:0;flex:none}
.pl-folder-head:hover .pl-fold-edit[b-so7xzg0l3j],.pl-folder-head:hover .pl-fold-del[b-so7xzg0l3j]{opacity:1}
.pl-fold-edit:hover[b-so7xzg0l3j]{color:var(--pl-primary)}
.pl-fold-del:hover[b-so7xzg0l3j]{color:var(--pl-danger)}
.pl-fold-input[b-so7xzg0l3j]{flex:1;min-width:0;font:inherit;font-weight:600;border:1px solid var(--pl-primary);border-radius:3px;padding:1px 4px;outline:none;background:var(--pl-surface)}

/* project rows: icon/colour + name + edit affordance. Nested projects sit in a guide-lined gutter under their
   folder: one faint vertical line for the whole group (on the wrapper, not per-row) + a subtle indent. */
.pl-fold-children[b-so7xzg0l3j]{margin-left:11px;border-left:1px solid var(--pl-border);margin-bottom:7px}
.pl-fold-children .pl-item.proj[b-so7xzg0l3j]{padding-left:8px}
.pl-proj-name[b-so7xzg0l3j]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-proj-edit[b-so7xzg0l3j]{color:var(--pl-muted);font-size:.82rem;opacity:0;flex:none}
.pl-item.proj:hover .pl-proj-edit[b-so7xzg0l3j]{opacity:1}
.pl-proj-edit:hover[b-so7xzg0l3j]{color:var(--pl-primary)}
/* /Features/Planning/Components/ProjectEditorDialog.razor.rz.scp.css */
.pe-wrap[b-27u9sv2b5q]{
  --pl-primary:var(--mud-palette-primary); --pl-primary-100:color-mix(in srgb,var(--mud-palette-primary) 22%,var(--mud-palette-surface)); --pl-primary-ink:color-mix(in srgb,var(--mud-palette-primary) 55%,var(--mud-palette-text-primary));
  --pl-bg:var(--mud-palette-background); --pl-surface:var(--mud-palette-surface); --pl-subnav:var(--mud-palette-surface); --pl-appbar:var(--mud-palette-appbar-background);
  --pl-border:var(--mud-palette-lines-default); --pl-nav-border:var(--mud-palette-lines-default); --pl-line-strong:var(--mud-palette-lines-inputs);
  --pl-text:var(--mud-palette-text-primary); --pl-text-2:var(--mud-palette-text-secondary); --pl-muted:color-mix(in srgb,var(--mud-palette-text-primary) 38%,var(--mud-palette-surface));
  --pl-hov:color-mix(in srgb,var(--mud-palette-primary) 10%,var(--mud-palette-surface)); --pl-chip:color-mix(in srgb,var(--mud-palette-text-primary) 7%,var(--mud-palette-surface)); --pl-grp:color-mix(in srgb,var(--mud-palette-text-primary) 5%,var(--mud-palette-background));
  --pl-tint:color-mix(in srgb,var(--mud-palette-text-primary) 6%,transparent); --pl-danger:var(--mud-palette-error); --pl-radius:4px;
  display:flex;flex-direction:column;gap:8px;min-width:0;
}

/* preview chip + name */
.pe-head[b-27u9sv2b5q]{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.pe-preview[b-27u9sv2b5q]{flex:none;width:42px;height:42px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 1px 2px var(--pl-line-strong)}
.pe-preview .mud-icon-root[b-27u9sv2b5q]{font-size:1.4rem}
.pe-initial[b-27u9sv2b5q]{font-size:1.25rem;font-weight:600;line-height:1}
.pe-name[b-27u9sv2b5q]{flex:1;min-width:0}

.pe-label[b-27u9sv2b5q]{font-size:.78rem;font-weight:600;color:var(--pl-text-2);margin-top:6px}

/* colour swatches */
.pe-swatches[b-27u9sv2b5q]{display:flex;flex-wrap:wrap;gap:8px}
.pe-swatch[b-27u9sv2b5q]{width:24px;height:24px;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px var(--pl-border);transition:transform .08s}
.pe-swatch:hover[b-27u9sv2b5q]{transform:scale(1.12)}
.pe-swatch.sel[b-27u9sv2b5q]{box-shadow:0 0 0 2px var(--pl-surface),0 0 0 4px var(--pl-primary)}
.pe-swatch-none[b-27u9sv2b5q]{background:var(--pl-surface);position:relative;overflow:hidden}
.pe-swatch-none[b-27u9sv2b5q]::after{content:"";position:absolute;left:50%;top:-2px;width:2px;height:30px;background:#e53935;transform:translateX(-50%) rotate(45deg)}

/* icon grid */
.pe-search[b-27u9sv2b5q]{margin-top:2px}
.pe-icons[b-27u9sv2b5q]{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;max-height:228px;overflow:auto;padding:6px 2px;border:1px solid var(--pl-border);border-radius:6px}
.pe-icon[b-27u9sv2b5q]{display:inline-flex;align-items:center;justify-content:center;height:40px;border-radius:6px;cursor:pointer;color:var(--pl-text);transition:background .08s,color .08s}
.pe-icon:hover[b-27u9sv2b5q]{background:var(--pl-primary-100);color:var(--pl-primary-ink)}
.pe-icon.sel[b-27u9sv2b5q]{background:var(--pl-primary);color:#fff}
.pe-noicons[b-27u9sv2b5q]{grid-column:1/-1;text-align:center;color:var(--pl-text-2);font-size:.82rem;padding:14px}
/* /Features/Planning/Components/ShareBoardDialog.razor.rz.scp.css */
.pl-share[b-esqehgv6oc]{
  --pl-primary:var(--mud-palette-primary); --pl-primary-100:color-mix(in srgb,var(--mud-palette-primary) 22%,var(--mud-palette-surface)); --pl-primary-ink:color-mix(in srgb,var(--mud-palette-primary) 55%,var(--mud-palette-text-primary));
  --pl-bg:var(--mud-palette-background); --pl-surface:var(--mud-palette-surface); --pl-subnav:var(--mud-palette-surface); --pl-appbar:var(--mud-palette-appbar-background);
  --pl-border:var(--mud-palette-lines-default); --pl-nav-border:var(--mud-palette-lines-default); --pl-line-strong:var(--mud-palette-lines-inputs);
  --pl-text:var(--mud-palette-text-primary); --pl-text-2:var(--mud-palette-text-secondary); --pl-muted:color-mix(in srgb,var(--mud-palette-text-primary) 38%,var(--mud-palette-surface));
  --pl-hov:color-mix(in srgb,var(--mud-palette-primary) 10%,var(--mud-palette-surface)); --pl-chip:color-mix(in srgb,var(--mud-palette-text-primary) 7%,var(--mud-palette-surface)); --pl-grp:color-mix(in srgb,var(--mud-palette-text-primary) 5%,var(--mud-palette-background));
  --pl-tint:color-mix(in srgb,var(--mud-palette-text-primary) 6%,transparent); --pl-danger:var(--mud-palette-error); --pl-radius:4px;
  color:var(--pl-text);
}
.pl-share .muted[b-esqehgv6oc]{color:var(--pl-text-2)}
.pl-share .pl-d-sec[b-esqehgv6oc]{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--pl-text-2);font-weight:600;margin:16px 0 7px}
.pl-share .pl-assignee[b-esqehgv6oc]{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:.85rem}
.pl-share .pl-assignee .pl-x[b-esqehgv6oc]{margin-left:auto;cursor:pointer;color:var(--pl-text-2);font-size:.85rem}
.pl-share .pl-assignee .pl-x:hover[b-esqehgv6oc]{color:var(--pl-danger)}
.pl-share .pl-assign-add[b-esqehgv6oc]{display:flex;align-items:center;gap:8px;margin-top:6px}
.pl-share .pl-picktrigger[b-esqehgv6oc]{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px solid var(--pl-border);border-radius:var(--pl-radius);padding:5px 10px;min-width:160px;font-size:.85rem}
.pl-share .pl-picktrigger:hover[b-esqehgv6oc]{border-color:var(--pl-primary)}
/* /Features/Planning/Components/StatusPicker.razor.rz.scp.css */
/* --pl-* tokens are inherited from the hosting .planning / .pl-taskpanel root at runtime (CSS custom properties
   cascade regardless of scope), with mud-palette fallbacks for safety. */
.stp[b-v98uejo3jd]{position:relative;display:inline-flex;align-items:center;max-width:100%}
.stp-trigger[b-v98uejo3jd]{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border-radius:3px;padding:1px 3px;max-width:100%;overflow:hidden}
.stp-trigger:hover[b-v98uejo3jd]{box-shadow:inset 0 0 0 1px var(--pl-border, var(--mud-palette-lines-default))}
.stp-chip[b-v98uejo3jd]{display:inline-block;border-radius:10px;padding:1px 9px;font-size:.74rem;color:#fff;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stp-dot[b-v98uejo3jd]{width:8px;height:8px;border-radius:50%;flex:none}
.stp-muted[b-v98uejo3jd]{color:var(--pl-text-2, var(--mud-palette-text-secondary))}
/* /Features/Planning/Components/TaskBoardTable.razor.rz.scp.css */
/* Tokens declared on the wrapper so the table styles resolve even though this is its own isolation scope. */
/* The 20px horizontal gutter is a margin, not padding: keeping it outside the scroll/overflow region means
   the frozen columns stick flush to the scroll edge, so the right-hand columns can never peek through a
   padding strip to the left of them while scrolling (and the table border/separators stay intact). */
.pl-tablewrap[b-qi3l7v5e3b]{
  --pl-primary:var(--mud-palette-primary); --pl-primary-100:color-mix(in srgb,var(--mud-palette-primary) 22%,var(--mud-palette-surface)); --pl-primary-ink:color-mix(in srgb,var(--mud-palette-primary) 55%,var(--mud-palette-text-primary));
  --pl-bg:var(--mud-palette-background); --pl-surface:var(--mud-palette-surface); --pl-subnav:var(--mud-palette-surface); --pl-appbar:var(--mud-palette-appbar-background);
  --pl-border:var(--mud-palette-lines-default); --pl-nav-border:var(--mud-palette-lines-default); --pl-line-strong:var(--mud-palette-lines-inputs);
  --pl-text:var(--mud-palette-text-primary); --pl-text-2:var(--mud-palette-text-secondary); --pl-muted:color-mix(in srgb,var(--mud-palette-text-primary) 38%,var(--mud-palette-surface));
  --pl-hov:color-mix(in srgb,var(--mud-palette-primary) 10%,var(--mud-palette-surface)); --pl-chip:color-mix(in srgb,var(--mud-palette-text-primary) 7%,var(--mud-palette-surface)); --pl-grp:color-mix(in srgb,var(--mud-palette-text-primary) 5%,var(--mud-palette-background));
  --pl-tint:color-mix(in srgb,var(--mud-palette-text-primary) 6%,transparent); --pl-danger:var(--mud-palette-error); --pl-radius:4px;
  flex:1;overflow:auto;min-height:0;margin:0 20px;padding:0 0 24px;background:var(--pl-bg);color:var(--pl-text);font-size:.9rem;
  /* Hard cap the scroll container to the viewport minus the chrome above it (left rail offset, app bar,
     board tabs, filter bar). This guarantees the TABLE scrolls vertically — with sticky thead + group/section
     headers staying put — instead of the whole page growing. Tweak the subtracted value if the chrome height
     changes. overflow-y:auto means it only scrolls when the rows actually exceed this height. */
  max-height:calc(100vh - 150px);
}

/* The left edge intentionally has no table border: it scrolls away horizontally and would leave the frozen
   columns with no left edge. Instead the leftmost frozen cells carry a sticky border-left (below), so the
   left border stays put while scrolling. Left corners are squared to meet that straight sticky edge cleanly. */
/* user-select:none across the grid: column reorder + row drag are pointer-tracked, so any drag would otherwise
   start a text selection in the cells it sweeps over. Inputs/selects (inline editing) keep their own
   selectability, so this only suppresses the stray highlight. */
.pl-table[b-qi3l7v5e3b]{table-layout:fixed;border-collapse:separate;border-spacing:0;width:100%;min-width:992px;background:var(--pl-surface);border-top:1px solid var(--pl-border);border-right:1px solid var(--pl-border);border-radius:0 var(--pl-radius) var(--pl-radius) 0;margin-top:14px;user-select:none;-webkit-user-select:none}
.pl-table th[b-qi3l7v5e3b],.pl-table td[b-qi3l7v5e3b]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-table thead th[b-qi3l7v5e3b]{position:sticky;top:0;background:var(--pl-surface);text-align:left;font-size:.72rem;font-weight:500;color:var(--pl-text-2);padding:7px 12px;border-bottom:1px solid var(--pl-border);z-index:2;cursor:pointer;user-select:none}
.pl-table thead th:hover[b-qi3l7v5e3b]{color:var(--pl-text);background:var(--pl-appbar)}
.pl-table th.sorted[b-qi3l7v5e3b]{color:var(--pl-text)}
.pl-table .caret[b-qi3l7v5e3b]{color:var(--pl-primary);font-weight:700;margin-left:4px}
.pl-table th.sortable[b-qi3l7v5e3b]{cursor:pointer;user-select:none}
.pl-table th.sortable:hover[b-qi3l7v5e3b]{color:var(--pl-primary)}
.pl-table tbody td[b-qi3l7v5e3b]{padding:5px 12px;border-bottom:1px solid var(--pl-border);height:34px}
.pl-table tr.task:hover td[b-qi3l7v5e3b]{background:var(--pl-hov)}

/* inline cell editing */
.pl-edit[b-qi3l7v5e3b]{cursor:text;border-radius:3px;padding:1px 3px;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.pl-table td:hover .pl-edit[b-qi3l7v5e3b]{box-shadow:inset 0 0 0 1px var(--pl-border)}
.pl-inline[b-qi3l7v5e3b]{width:100%;box-sizing:border-box;border:1px solid var(--pl-primary);border-radius:3px;padding:2px 4px;font:inherit;background:var(--pl-surface);color:var(--pl-text);outline:none;color-scheme:light dark}
.pl-inline option[b-qi3l7v5e3b]{background:var(--pl-surface);color:var(--pl-text)}
/* hover value menu (Dash0-style dark popover): a compact horizontal strip of icon-only actions, one shared
   instance anchored at the cursor */
.pl-valmenu[b-qi3l7v5e3b]{position:fixed;z-index:50;transform:translateY(calc(-100% - 4px));display:flex;align-items:center;gap:2px;max-width:440px;background:#23262b;border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:3px;box-shadow:0 6px 24px rgba(0,0,0,.28)}
/* Invisible "bridge" filling the 4px gap (plus a little overlap into the cell) below the widget. It's part of
   the widget element, so the pointer travelling from the cell up to the buttons never crosses a dead zone where
   neither is hovered — which is what made the widget vanish mid-reach. */
.pl-valmenu[b-qi3l7v5e3b]::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
/* the cell's value, shown so a truncated column is still fully readable on hover, alongside the filter/copy actions */
.pl-vm-val[b-qi3l7v5e3b]{max-width:320px;padding:1px 7px;font-size:.8rem;line-height:1.3;color:#e8eaed;white-space:normal;overflow-wrap:anywhere}
.pl-valmenu .pl-vm-val + .pl-vm-item[b-qi3l7v5e3b]{margin-left:2px;border-left:1px solid rgba(255,255,255,.12);padding-left:6px}
.pl-vm-item[b-qi3l7v5e3b]{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:none;color:var(--pl-muted);border-radius:4px;cursor:pointer}
.pl-vm-item:hover[b-qi3l7v5e3b]{background:rgba(255,255,255,.12);color:#fff}
.pl-vm-item svg[b-qi3l7v5e3b]{width:15px;height:15px;stroke:currentColor}

/* frozen #/title columns. .c-num carries the persistent left border for the whole grid (it's sticky, so it
   stays at the scroll edge no matter how far you scroll horizontally). */
.c-num[b-qi3l7v5e3b]{position:sticky;left:0;width:106px;background:var(--pl-surface);color:var(--pl-text-2);font-size:.74rem;font-weight:500;border-left:1px solid var(--pl-border)}
.c-title[b-qi3l7v5e3b]{position:sticky;left:106px;background:var(--pl-surface);border-right:1px solid var(--pl-border)}
.pl-table thead .c-num[b-qi3l7v5e3b],.pl-table thead .c-title[b-qi3l7v5e3b]{z-index:3}
.pl-table tbody td.c-num[b-qi3l7v5e3b],.pl-table tbody td.c-title[b-qi3l7v5e3b]{z-index:1}
.pl-table tr.task:hover td.c-num[b-qi3l7v5e3b],.pl-table tr.task:hover td.c-title[b-qi3l7v5e3b]{background:var(--pl-hov)}
/* The id is the explicit "open task" affordance: a touch smaller than the rest of the cell, and it reads as a
   link (primary colour + underline) on row hover so it's clear that clicking it opens the task. */
.pl-num[b-qi3l7v5e3b]{cursor:pointer;font-size:.68rem;font-variant-numeric:tabular-nums;border-radius:3px;padding:0 2px}
.pl-table tr.task:hover .pl-num[b-qi3l7v5e3b]{color:var(--pl-primary);text-decoration:underline}
.c-title-inner[b-qi3l7v5e3b]{display:flex;align-items:center;gap:5px;min-width:0}
.c-title-inner .pl-edit[b-qi3l7v5e3b]{min-width:0}

/* group headers + section management */
/* Group/add-section rows are single full-width cells. Pinning them at left:0 keeps the header bar (and its
   left border) static during horizontal scroll, matching the frozen-column left edge on data rows. */
/* Sticky on BOTH axes: left:0 keeps the bar pinned during horizontal scroll; top:29px (the sticky thead's
   height) keeps the current group/section heading parked under the column header while scrolling a long
   list. z-index:2 lifts it above data rows; the thead (z 2/3) still paints over it as it tucks underneath. */
/* Group/section header = a sticky band parked under the thead (top:29px). It freezes the SAME way the data and
   quick-add rows do: a narrow grp-edge cell (sticky left:0, carries the left border), a frozen grp-label cell
   (sticky left:106 — past the # column — holds the heading), then a scrolling grp-fill band. Because the edge
   and label are genuinely-sticky narrow cells (not a full-width colspan), the left border and heading hold on
   horizontal scroll; grp-fill tucks under them (lower z-index). */
.grp td[b-qi3l7v5e3b]{position:sticky;top:29px;z-index:2;overflow:visible;background:var(--pl-grp);padding:14px 12px 6px;border-bottom:1px solid var(--pl-border)}
/* The heading lives in grp-edge (the # column, far left) and overflows into the empty, frozen grp-label, which
   is its grey backing on scroll. grp-edge therefore needs a higher z than grp-label so its text paints over
   that backing; both sit above the scrolling grp-fill. */
.grp td.grp-edge[b-qi3l7v5e3b]{left:0;z-index:4;border-left:1px solid var(--pl-border)}
.grp td.grp-label[b-qi3l7v5e3b]{left:106px;z-index:3}
.grp .gh[b-qi3l7v5e3b]{display:block; width: 240px; align-items:center;gap:9px;font-weight:500;font-size:.82rem;white-space:nowrap}
/* collapse chevron on a group/section header — points down when expanded, rotates to the right when collapsed */
.pl-collapse[b-qi3l7v5e3b]{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:1rem;line-height:1;color:var(--pl-muted);transition:transform .12s ease,color .12s;flex:none}
.pl-collapse:hover[b-qi3l7v5e3b]{color:var(--pl-primary)}
.pl-collapse.collapsed[b-qi3l7v5e3b]{transform:rotate(-90deg)}
.grp .dot[b-qi3l7v5e3b]{width:11px;height:11px;border-radius:50%}
.grp .n[b-qi3l7v5e3b]{color:var(--pl-text-2);font-size:.78rem}
.grp .gh.sec[b-qi3l7v5e3b]{gap:6px}
.gh.sec .sec-name[b-qi3l7v5e3b]{cursor:text;padding:1px 4px;border-radius:3px}
.gh.sec .sec-name:hover[b-qi3l7v5e3b]{box-shadow:inset 0 0 0 1px var(--pl-border)}
.gh.sec .sec-del[b-qi3l7v5e3b]{cursor:pointer;color:var(--pl-muted);opacity:0;font-size:.8rem;margin-left:2px}
.grp:hover .gh.sec .sec-del[b-qi3l7v5e3b]{opacity:1}
.gh.sec .sec-del:hover[b-qi3l7v5e3b]{color:var(--pl-danger)}
.grp.dropzone td[b-qi3l7v5e3b]{background:var(--pl-primary-100);box-shadow:inset 0 0 0 2px var(--pl-primary)}
/* Same frozen-cell structure as the group header (grp-edge + grp-label + grp-fill), so the add-section row's
   left border holds on horizontal scroll. Opaque surface bg on the frozen cells so the scrolling fill tucks
   under them. */
.addsection td[b-qi3l7v5e3b]{position:sticky;z-index:1;background:var(--pl-surface);padding:6px 12px;border-bottom:1px solid var(--pl-border);overflow:visible}
.addsection td.grp-edge[b-qi3l7v5e3b]{left:0;z-index:3;border-left:1px solid var(--pl-border)}
.addsection td.grp-label[b-qi3l7v5e3b]{left:106px;z-index:2}
.pl-addsection[b-qi3l7v5e3b]{display:inline-block;cursor:pointer;color:var(--pl-text-2);font-size:.82rem}
.pl-addsection:hover[b-qi3l7v5e3b]{color:var(--pl-primary)}

/* per-group "Load more" — a subtle pinned link under a group's rows when the board overflows one page */
.loadmore td[b-qi3l7v5e3b]{padding:4px 12px;border-bottom:1px solid var(--pl-border)}
.pl-loadmore[b-qi3l7v5e3b]{position:sticky;left:20px;width:max-content;display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--pl-primary);font-size:.8rem;font-weight:500}
.pl-loadmore:hover[b-qi3l7v5e3b]{color:var(--pl-primary-ink)}
.pl-loadmore.busy[b-qi3l7v5e3b]{opacity:.5;pointer-events:none}
.pl-loadmore .n[b-qi3l7v5e3b]{color:var(--pl-text-2);font-weight:600}

/* shared cell bits */
.owner[b-qi3l7v5e3b]{display:flex;align-items:center;gap:8px;overflow:hidden}
.muted[b-qi3l7v5e3b]{color:var(--pl-text-2)}
.due.late[b-qi3l7v5e3b]{color:var(--pl-danger)}
.lock[b-qi3l7v5e3b]{opacity:.4;flex:none}

/* priority glyph (dense) */
.pl-prio[b-qi3l7v5e3b]{display:inline-flex;align-items:center;gap:6px}
.pl-prio>div[b-qi3l7v5e3b]{width:1.15rem!important;height:1.15rem!important}
.pl-prio>div>div[b-qi3l7v5e3b]{width:.7rem!important;height:.7rem!important}
.pl-prio .mud-icon-root[b-qi3l7v5e3b]{font-size:.95rem}
.pl-prio svg[b-qi3l7v5e3b]{width:1.15em!important;height:1.15em!important}

/* quick-add row — pin the cell (like the frozen columns) so the input stays put on horizontal scroll,
   aligned right after the # column rather than offset by the input's own sticky positioning. */
.addrow td[b-qi3l7v5e3b]{padding:4px 12px}
.addrow .c-num[b-qi3l7v5e3b]{color:var(--pl-text-2)}
/* The input lives in a real frozen Titel cell (.c-title), so it pins on horizontal scroll exactly like
   the Titel column and lines up directly under it — reusing the proven frozen-column mechanism rather
   than a sticky span (which didn't hold inside a colspan cell). */
.addinput[b-qi3l7v5e3b]{width:100%;box-sizing:border-box;border:none;outline:none;background:transparent;font:inherit;color:var(--pl-text);padding:3px 0}
.addinput[b-qi3l7v5e3b]::placeholder{color:var(--pl-text-2)}
.addrow:hover td[b-qi3l7v5e3b],.addrow:focus-within td[b-qi3l7v5e3b]{background:var(--pl-hov)}
.pl-hint[b-qi3l7v5e3b]{padding:14px;color:var(--pl-text-2);font-size:.85rem}

/* projecten column */
.c-proj[b-qi3l7v5e3b]{overflow:visible}
.pl-projchip[b-qi3l7v5e3b]{display:inline-flex;align-items:center;gap:4px;background:var(--pl-chip);border-radius:var(--pl-radius);padding:1px 4px 1px 7px;margin:0 4px 0 0;font-size:.72rem;max-width:100%}
.pl-pc-proj[b-qi3l7v5e3b]{color:var(--pl-text-2);font-weight:600;white-space:nowrap}
.pl-pc-board[b-qi3l7v5e3b]{background:var(--pl-surface);border:1px solid var(--pl-border);border-radius:3px;padding:0 5px;color:var(--pl-text-2);cursor:pointer;white-space:nowrap}
.pl-pc-board:hover[b-qi3l7v5e3b]{border-color:var(--pl-primary);color:var(--pl-primary-ink)}

/* single-line cell wrapper + "+N" overflow trigger (projects / multi-people) */
.pl-overflow[b-qi3l7v5e3b]{display:inline-flex;align-items:center;gap:5px;max-width:100%}
.pl-more[b-qi3l7v5e3b]{cursor:pointer;color:var(--pl-text-2);background:var(--pl-chip);border-radius:var(--pl-radius);padding:0 6px;font-size:.72rem;font-weight:600;white-space:nowrap;flex:none}
.pl-more:hover[b-qi3l7v5e3b]{color:var(--pl-primary)}

/* person + assignees cells — single line; extras live behind the "+N" popover */
.pl-people[b-qi3l7v5e3b]{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:5px;max-width:100%}
.pl-person[b-qi3l7v5e3b]{display:inline-flex;align-items:center;gap:5px;background:var(--pl-chip);border-radius:12px;padding:1px 8px 1px 3px;font-size:.78rem;color:var(--pl-text)}
.pl-person .pl-x[b-qi3l7v5e3b]{margin-left:1px;cursor:pointer;color:var(--pl-text-2);font-size:.7rem}
.pl-person .pl-x:hover[b-qi3l7v5e3b]{color:var(--pl-danger)}
.pl-person-add[b-qi3l7v5e3b]{cursor:pointer;color:var(--pl-text-2)}
.pl-person-add:hover[b-qi3l7v5e3b]{color:var(--pl-primary)}

/* Assignees cell: bare avatars (no name chip → narrow). The full name + per-person filter come from the hover
   value strip; ✕ to unassign appears on hovering the avatar. */
.pl-asg[b-qi3l7v5e3b]{gap:4px}
.pl-asg-av[b-qi3l7v5e3b]{position:relative;display:inline-flex}
.pl-asg-av[b-qi3l7v5e3b]  .mud-avatar{width:24px!important;height:24px!important;min-width:24px!important;font-size:.64rem!important}
.pl-asg-x[b-qi3l7v5e3b]{position:absolute;top:-5px;right:-5px;display:none;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:var(--pl-danger);color:#fff;font-size:.56rem;line-height:1;cursor:pointer}
.pl-asg-av:hover .pl-asg-x[b-qi3l7v5e3b]{display:inline-flex}


/* custom enum-option value chip (background = the option's colour, text colour auto-contrasted) */
.pl-enumchip[b-qi3l7v5e3b]{display:inline-block;border-radius:10px;padding:1px 9px;margin:0 3px 0 0;font-size:.74rem;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}

/* article-link cells (Web / Print columns): id chips + add affordance; one ArticlePicker mounts only while adding */
.pl-arts[b-qi3l7v5e3b]{display:inline-flex;align-items:center;flex-wrap:wrap;gap:5px;max-width:100%}
.pl-artchip[b-qi3l7v5e3b]{display:inline-flex;align-items:center;gap:5px;background:var(--pl-chip);border-radius:12px;padding:1px 6px 1px 8px;font-size:.76rem;color:var(--pl-text)}
.pl-art-id[b-qi3l7v5e3b]{font-variant-numeric:tabular-nums;font-weight:500}
.pl-art-open[b-qi3l7v5e3b]{cursor:pointer}
.pl-art-open:hover[b-qi3l7v5e3b]{color:var(--pl-primary);text-decoration:underline}
.pl-artchip .pl-x[b-qi3l7v5e3b]{cursor:pointer;color:var(--pl-text-2);font-size:.7rem}
.pl-artchip .pl-x:hover[b-qi3l7v5e3b]{color:var(--pl-danger)}
.pl-art-add[b-qi3l7v5e3b]{cursor:pointer;color:var(--pl-text-2)}
.pl-art-add:hover[b-qi3l7v5e3b]{color:var(--pl-primary)}
.pl-art-picker[b-qi3l7v5e3b]{display:inline-block;min-width:220px;max-width:340px}

/* draggable column headers — pointer-driven drag (threshold) doubles as the sort click target */
/* sticky (not relative) so these draggable headers stay pinned on vertical scroll like the frozen #/Titel
   headers; sticky still establishes the positioning context the remove-✕ / dragover indicator rely on. */
.pl-table th.pl-colh[b-qi3l7v5e3b]{cursor:grab;position:sticky;top:0;touch-action:none}
.pl-table th.pl-colh:hover[b-qi3l7v5e3b]{background:var(--pl-appbar)}
.pl-table th.pl-colh:active[b-qi3l7v5e3b]{cursor:grabbing}
.pl-table th.pl-colh.dragging[b-qi3l7v5e3b]{opacity:.45}
.pl-table th.pl-colh.dragover[b-qi3l7v5e3b]{box-shadow:inset 2px 0 0 var(--pl-primary)}

/* Resize grip: a thin hit-area pinned to each header's right edge. stopPropagation on pointerdown keeps it from
   starting a column reorder; a faint bar shows on hover so the affordance is discoverable. Sits above the header
   content (z-index) but the headers are sticky, which is the positioning context it anchors to. */
.pl-colsize[b-qi3l7v5e3b]{position:absolute;top:0;right:0;width:8px;height:100%;z-index:4;cursor:col-resize;touch-action:none}
.pl-colsize[b-qi3l7v5e3b]::after{content:"";position:absolute;top:6px;bottom:6px;right:2px;width:2px;border-radius:1px;background:transparent;transition:background .12s}
.pl-colsize:hover[b-qi3l7v5e3b]::after,.pl-colsize:active[b-qi3l7v5e3b]::after{background:var(--pl-primary)}
/* Full-window capture surface active only during a drag, so the resize tracks past the grip and releases anywhere. */
.pl-resize-overlay[b-qi3l7v5e3b]{position:fixed;inset:0;z-index:60;cursor:col-resize}
.pl-colh-x[b-qi3l7v5e3b]{cursor:pointer;color:var(--pl-muted);margin-left:6px;font-size:.72rem;opacity:0}
.pl-table th.pl-colh:hover .pl-colh-x[b-qi3l7v5e3b]{opacity:1}
.pl-colh-x:hover[b-qi3l7v5e3b]{color:var(--pl-danger)}

/* row drag handle */
.pl-rowgrip[b-qi3l7v5e3b]{display:inline-block;width:13px;cursor:grab;color:var(--pl-muted);font-size:.8rem;opacity:0;vertical-align:middle;margin-right:2px}
.pl-table tr.task:hover .pl-rowgrip[b-qi3l7v5e3b]{opacity:1}
.pl-rowgrip:active[b-qi3l7v5e3b]{cursor:grabbing}

/* row selection checkbox — reserves its width so revealing it never shifts the row; visible on hover and while
   any row is selected (select mode). */
.pl-rowcheck[b-qi3l7v5e3b]{display:inline-block;width:14px;height:14px;box-sizing:border-box;border:1.5px solid var(--pl-line-strong);border-radius:3px;cursor:pointer;vertical-align:middle;margin-right:5px;opacity:0;position:relative;transition:opacity .1s,background .1s}
.pl-table tr.task:hover .pl-rowcheck[b-qi3l7v5e3b]{opacity:1}
.pl-table.selecting .pl-rowcheck[b-qi3l7v5e3b]{opacity:1}
.pl-rowcheck.on[b-qi3l7v5e3b]{background:var(--pl-primary);border-color:var(--pl-primary)}
.pl-rowcheck.on[b-qi3l7v5e3b]::after{content:"";position:absolute;left:3.5px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* selection toolbar — floats bottom-centre while rows are selected (Gmail/Linear-style). */
.pl-bulkbar[b-qi3l7v5e3b]{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:14px;
  padding:7px 12px 7px 16px;background:var(--pl-surface);border:1px solid var(--pl-border);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.pl-bulk-count[b-qi3l7v5e3b]{font-size:.85rem;font-weight:600;color:var(--pl-text);white-space:nowrap}
.pl-bulk-act[b-qi3l7v5e3b]{display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-size:.82rem;color:var(--pl-text-2);padding:4px 8px;border-radius:6px;white-space:nowrap}
.pl-bulk-act:hover[b-qi3l7v5e3b]{background:var(--pl-chip);color:var(--pl-text)}
.pl-bulk-clear[b-qi3l7v5e3b]{cursor:pointer;font-size:.95rem;line-height:1;color:var(--pl-text-2);padding:2px 4px}
.pl-bulk-clear:hover[b-qi3l7v5e3b]{color:var(--pl-text)}
.pl-bulk-muted[b-qi3l7v5e3b]{color:var(--pl-text-2)}
.pl-bulk-newsec[b-qi3l7v5e3b]{padding:4px 10px}
.pl-bulk-newsec .pl-inline[b-qi3l7v5e3b]{width:170px}
.pl-table tr.task.row-dragging td[b-qi3l7v5e3b]{opacity:.4}

/* trailing add-column header */
.pl-table th.c-addcol[b-qi3l7v5e3b],.pl-table td.c-addcol[b-qi3l7v5e3b]{width:46px;text-align:center;padding:0}
.pl-table thead th.c-addcol[b-qi3l7v5e3b]{cursor:default}
.pl-table thead th.c-addcol:hover[b-qi3l7v5e3b]{background:var(--pl-surface)}
.pl-addcol[b-qi3l7v5e3b]{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--pl-radius);cursor:pointer;color:var(--pl-text-2);font-size:1rem;line-height:1}
.pl-addcol:hover[b-qi3l7v5e3b]{background:var(--pl-primary-100);color:var(--pl-primary-ink)}

/* overflow reveal popover body (the hidden projects / people). The popover content is teleported to the
   MudPopoverProvider at the document root, so the page-level --pl-* tokens don't cascade in — re-declare
   them here so the reused .pl-projchip / .pl-person chips render with the same colours and radius. */
.pl-overflow-pop[b-qi3l7v5e3b]{
  --pl-primary:var(--mud-palette-primary); --pl-primary-100:color-mix(in srgb,var(--mud-palette-primary) 22%,var(--mud-palette-surface)); --pl-primary-ink:color-mix(in srgb,var(--mud-palette-primary) 55%,var(--mud-palette-text-primary));
  --pl-bg:var(--mud-palette-background); --pl-surface:var(--mud-palette-surface); --pl-subnav:var(--mud-palette-surface); --pl-appbar:var(--mud-palette-appbar-background);
  --pl-border:var(--mud-palette-lines-default); --pl-nav-border:var(--mud-palette-lines-default); --pl-line-strong:var(--mud-palette-lines-inputs);
  --pl-text:var(--mud-palette-text-primary); --pl-text-2:var(--mud-palette-text-secondary); --pl-muted:color-mix(in srgb,var(--mud-palette-text-primary) 38%,var(--mud-palette-surface));
  --pl-hov:color-mix(in srgb,var(--mud-palette-primary) 10%,var(--mud-palette-surface)); --pl-chip:color-mix(in srgb,var(--mud-palette-text-primary) 7%,var(--mud-palette-surface)); --pl-grp:color-mix(in srgb,var(--mud-palette-text-primary) 5%,var(--mud-palette-background));
  --pl-tint:color-mix(in srgb,var(--mud-palette-text-primary) 6%,transparent); --pl-danger:var(--mud-palette-error); --pl-radius:4px;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:8px;max-width:340px;max-height:320px;overflow:auto;
}

/* Done toggle — a big, satisfying check-circle. Grey when open, green when done. */
.pl-toggle[b-qi3l7v5e3b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--mud-palette-text-disabled, #c4c4c4);
    transition: color .12s ease, transform .08s ease;
}
.pl-toggle:hover[b-qi3l7v5e3b] { color: var(--mud-palette-text-secondary, #9aa0a6); }
.pl-toggle.on[b-qi3l7v5e3b] { color: #43a047; }
.pl-toggle:active[b-qi3l7v5e3b] { transform: scale(0.86); }
.pl-toggle[b-qi3l7v5e3b]  .mud-icon-root { width: 26px; height: 26px; }
/* /Features/Planning/Components/TaskChatPanel.razor.rz.scp.css */
.pl-taskchat[b-lz5c865yqp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pl-tc-loading[b-lz5c865yqp] {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

/* Empty state — calm, centered, explains threads vs replies */
.pl-tc-empty[b-lz5c865yqp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 28px 24px 22px;
    border: 1px dashed var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 12px;
    background: var(--mud-palette-background-grey, #fafafa);
}

/* MudIcon renders its own <svg>, so pierce the child component with ::deep */
[b-lz5c865yqp] .pl-tc-empty-ic {
    width: 34px;
    height: 34px;
    color: var(--mud-palette-text-disabled, #b0b0b0);
    margin-bottom: 2px;
}

.pl-tc-empty-title[b-lz5c865yqp] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary, #2b2b2b);
}

.pl-tc-empty-sub[b-lz5c865yqp] {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary, #8a8a8a);
    max-width: 320px;
}

.pl-tc-threads[b-lz5c865yqp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* "New comment" — centered, prettier pill, breathing room */
.pl-tc-newrow[b-lz5c865yqp] {
    display: flex;
    justify-content: center;
    padding: 6px 0 4px;
}

.pl-tc-new[b-lz5c865yqp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-primary, #5b3cc4);
    color: var(--mud-palette-primary, #5b3cc4);
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.pl-tc-new:hover:not(:disabled)[b-lz5c865yqp] {
    background: var(--mud-palette-primary, #5b3cc4);
    color: #fff;
    box-shadow: 0 2px 8px rgba(91, 60, 196, 0.25);
}

.pl-tc-new:disabled[b-lz5c865yqp] {
    opacity: 0.5;
    cursor: default;
}

.pl-tc-morerow[b-lz5c865yqp] {
    display: flex;
    justify-content: center;
}

.pl-tc-more[b-lz5c865yqp] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary, #8a8a8a);
    padding: 4px 8px;
}

.pl-tc-more:hover:not(:disabled)[b-lz5c865yqp] {
    color: var(--mud-palette-primary, #5b3cc4);
}
/* /Features/Planning/Components/TaskDetailPanel.razor.rz.scp.css */
/* Self-contained task panel: defines its own tokens so it renders correctly inside a MudDialog
   (outside the .planning grid that normally provides them) as well as in the board drawer. */
.pl-taskpanel[b-ugewlupp5a]{
  --pl-primary:var(--mud-palette-primary); --pl-primary-100:color-mix(in srgb,var(--mud-palette-primary) 22%,var(--mud-palette-surface)); --pl-primary-ink:color-mix(in srgb,var(--mud-palette-primary) 55%,var(--mud-palette-text-primary));
  --pl-bg:var(--mud-palette-background); --pl-surface:var(--mud-palette-surface); --pl-subnav:var(--mud-palette-surface); --pl-appbar:var(--mud-palette-appbar-background);
  --pl-border:var(--mud-palette-lines-default); --pl-nav-border:var(--mud-palette-lines-default); --pl-line-strong:var(--mud-palette-lines-inputs);
  --pl-text:var(--mud-palette-text-primary); --pl-text-2:var(--mud-palette-text-secondary); --pl-muted:color-mix(in srgb,var(--mud-palette-text-primary) 38%,var(--mud-palette-surface));
  --pl-hov:color-mix(in srgb,var(--mud-palette-primary) 10%,var(--mud-palette-surface)); --pl-chip:color-mix(in srgb,var(--mud-palette-text-primary) 7%,var(--mud-palette-surface)); --pl-grp:color-mix(in srgb,var(--mud-palette-text-primary) 5%,var(--mud-palette-background));
  --pl-tint:color-mix(in srgb,var(--mud-palette-text-primary) 6%,transparent); --pl-danger:var(--mud-palette-error); --pl-radius:4px;
  display:flex; flex-direction:column; height:100%; min-height:0;
  color:var(--pl-text); font-size:.9rem; background:var(--pl-surface);
}

.pl-spacer[b-ugewlupp5a]{flex:1}
.muted[b-ugewlupp5a]{color:var(--pl-text-2)}
.owner[b-ugewlupp5a]{display:flex;align-items:center;gap:8px;overflow:hidden}

.pl-edit[b-ugewlupp5a]{cursor:pointer;border-radius:3px;padding:1px 3px;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.pl-edit:hover[b-ugewlupp5a]{box-shadow:inset 0 0 0 1px var(--pl-border)}
.pl-inline[b-ugewlupp5a]{box-sizing:border-box;border:1px solid var(--pl-primary);border-radius:3px;padding:2px 4px;font:inherit;background:var(--pl-surface);color:var(--pl-text);outline:none;color-scheme:light dark}
.pl-inline option[b-ugewlupp5a]{background:var(--pl-surface);color:var(--pl-text)}

.pl-d-head[b-ugewlupp5a]{display:flex;align-items:center;gap:10px;min-height:59px;padding:0 18px;border-bottom:1px solid var(--pl-border);background:var(--pl-appbar)}
.pl-d-code[b-ugewlupp5a]{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:.92rem}
.pl-d-head[b-ugewlupp5a]  .pl-copylink{color:var(--pl-text-2);opacity:.6}
.pl-d-head[b-ugewlupp5a]  .pl-copylink:hover{color:var(--pl-text);opacity:1}
.pl-d-head .pl-x[b-ugewlupp5a]{cursor:pointer;color:var(--pl-text-2);font-size:1rem}
.pl-d-head .pl-x:hover[b-ugewlupp5a]{color:var(--pl-text)}
.pl-x[b-ugewlupp5a]{margin-left:auto;cursor:pointer;color:var(--pl-text-2);font-size:1.05rem}
.pl-d-body[b-ugewlupp5a]{padding:14px 18px;overflow:auto;flex:1;min-height:0}
.pl-d-headerslot[b-ugewlupp5a]{margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--pl-border)}
.pl-d-title[b-ugewlupp5a]{font-size:1.05rem;font-weight:600;line-height:1.2;cursor:pointer;border-radius:var(--pl-radius);padding:2px 4px;margin:-2px -4px}
.pl-d-title:hover[b-ugewlupp5a]{background:var(--pl-tint)}
.pl-d-titleinput[b-ugewlupp5a]{font-size:1.05rem;font-weight:600;max-width:none;flex:1;min-width:120px}
.pl-prio-btn[b-ugewlupp5a]{flex:none}
.pl-d-foot[b-ugewlupp5a]{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--pl-border)}
.pl-d-foot .pl-spacer[b-ugewlupp5a]{flex:1}

.pl-prop[b-ugewlupp5a]{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--pl-border);align-items:center}
.pl-prop .k[b-ugewlupp5a]{width:110px;color:var(--pl-text-2);font-size:.82rem;flex:none}
.pl-prop .v[b-ugewlupp5a]{flex:1;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pl-d-sec[b-ugewlupp5a]{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--pl-text-2);font-weight:600;margin:16px 0 7px}
.pl-desc[b-ugewlupp5a]{white-space:pre-wrap;cursor:pointer;border:1px solid transparent;border-radius:var(--pl-radius);padding:6px 8px;min-height:2.2em}
.pl-desc:hover[b-ugewlupp5a]{border-color:var(--pl-border);background:var(--pl-hov)}

.pl-metabar[b-ugewlupp5a]{display:flex;flex-wrap:wrap;gap:6px 22px;padding:10px 0 14px;border-bottom:1px solid var(--pl-border)}
.pl-meta[b-ugewlupp5a]{display:flex;align-items:center;gap:8px;min-height:28px}
.pl-meta-k[b-ugewlupp5a]{color:var(--pl-text-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.pl-meta-v[b-ugewlupp5a]{display:inline-flex;align-items:center;gap:6px;font-size:.85rem}
.pl-meta .dot[b-ugewlupp5a]{width:8px;height:8px;border-radius:50%;flex:none}
.pl-meta .lock[b-ugewlupp5a]{font-size:1rem}
.pl-comments[b-ugewlupp5a]{margin-top:4px}

/* Comments / Activity tab strip */
.pl-tabs2[b-ugewlupp5a]{display:flex;gap:2px;border-bottom:1px solid var(--pl-border);margin:16px 0 10px}
.pl-tab2[b-ugewlupp5a]{background:none;border:none;font:inherit;font-size:.82rem;font-weight:600;color:var(--pl-text-2);cursor:pointer;padding:6px 10px;border-bottom:2px solid transparent;margin-bottom:-1px}
.pl-tab2:hover[b-ugewlupp5a]{color:var(--pl-text)}
.pl-tab2.active[b-ugewlupp5a]{color:var(--pl-primary);border-bottom-color:var(--pl-primary)}
/* activity tab loader — centered both axes in the open area */
.pl-act-loading[b-ugewlupp5a]{display:flex;align-items:center;justify-content:center;min-height:200px}
.due.late[b-ugewlupp5a]{color:var(--pl-danger)}

/* Assigned folded into the meta bar: overlapping avatars + a dashed "+" to add; hover an avatar to reveal its ✕. */
.pl-assignees[b-ugewlupp5a]{display:inline-flex;align-items:center}
.pl-av[b-ugewlupp5a]{position:relative;display:inline-flex}
.pl-av:not(:first-child)[b-ugewlupp5a]{margin-left:-6px}
.pl-av[b-ugewlupp5a]  .mud-avatar{width:22px!important;height:22px!important;min-width:22px!important;font-size:.62rem!important;box-shadow:0 0 0 2px var(--pl-surface)}
.pl-av-x[b-ugewlupp5a]{position:absolute;top:-4px;right:-4px;display:none;width:13px;height:13px;border-radius:50%;background:var(--pl-danger);color:#fff;font-size:.55rem;line-height:1;align-items:center;justify-content:center;cursor:pointer}
.pl-av:hover .pl-av-x[b-ugewlupp5a]{display:inline-flex}
.pl-av-add[b-ugewlupp5a]{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:3px;border:1px dashed var(--pl-line-strong);border-radius:50%;color:var(--pl-text-2);cursor:pointer;font-size:.95rem;line-height:1}
.pl-av-add:hover[b-ugewlupp5a]{border-color:var(--pl-primary);color:var(--pl-primary-ink)}

/* On boards + Linked articles in one row (variant B). Wraps to stacked on a narrow panel. */
.pl-cols[b-ugewlupp5a]{display:flex;flex-wrap:wrap;gap:8px 28px}
.pl-col[b-ugewlupp5a]{flex:1;min-width:210px}

.pl-boards[b-ugewlupp5a]{display:flex;flex-direction:column;gap:2px;align-items:stretch}
.pl-mh-proj[b-ugewlupp5a]{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--pl-text-2);font-weight:600;margin:8px 0 2px}
.pl-mh-board[b-ugewlupp5a]{display:flex;align-items:center;gap:8px;padding:3px 0 3px 10px}
.pl-mh-bname[b-ugewlupp5a]{font-size:.88rem}
.pl-mh-sec[b-ugewlupp5a]{font-size:.76rem;flex:1}
.pl-mh-board .pl-x[b-ugewlupp5a]{cursor:pointer;color:var(--pl-text-2);font-size:.8rem}
.pl-link[b-ugewlupp5a]{cursor:pointer;color:var(--mud-palette-info)}
.pl-link:hover[b-ugewlupp5a]{color:var(--pl-primary);text-decoration:underline}
.pl-tag[b-ugewlupp5a]{display:inline-flex;align-items:center;gap:6px;background:var(--pl-chip);color:var(--pl-text-2);border-radius:var(--pl-radius);padding:2px 8px;font-size:.78rem}
.pl-tag .pl-x[b-ugewlupp5a]{cursor:pointer;color:var(--pl-text-2);font-size:.7rem;margin-left:2px}
.pl-addtag[b-ugewlupp5a]{background:transparent;border:1px dashed var(--pl-border);color:var(--pl-text-2);cursor:pointer;align-self:flex-start;margin-top:8px}
.pl-addtag:hover[b-ugewlupp5a]{border-color:var(--pl-primary);color:var(--pl-primary-ink)}
.pl-act[b-ugewlupp5a]{display:flex;gap:9px;padding:6px 0;font-size:.83rem}
.pl-act .dot[b-ugewlupp5a]{width:7px;height:7px;border-radius:50%;background:var(--pl-primary);margin-top:6px;flex:none}
.pl-act .when[b-ugewlupp5a]{color:var(--pl-text-2);font-size:.75rem}
.pl-assignee[b-ugewlupp5a]{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:.85rem}
.pl-assignee .pl-x[b-ugewlupp5a]{margin-left:auto;cursor:pointer;color:var(--pl-text-2);font-size:.85rem}
.pl-assign-add[b-ugewlupp5a]{display:flex;align-items:center;gap:8px;margin-top:6px}

.pl-person[b-ugewlupp5a]{display:inline-flex;align-items:center;gap:5px;background:var(--pl-chip);border-radius:12px;padding:1px 8px 1px 3px;font-size:.78rem;color:var(--pl-text)}

/* linked articles: a row per link with a type badge, resolved headline, id, and unlink */
.pl-artlist[b-ugewlupp5a]{display:flex;flex-direction:column;gap:6px}
.pl-artrow[b-ugewlupp5a]{display:flex;align-items:center;gap:8px;font-size:.85rem;min-width:0}
.pl-artbadge[b-ugewlupp5a]{flex:none;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:4px;padding:1px 6px;color:#fff}
.pl-artbadge.web[b-ugewlupp5a]{background:var(--color-internetarticle,#00ace4)}
.pl-artbadge.print[b-ugewlupp5a]{background:var(--color-newspaperarticle,#8445f1)}
.pl-art-title[b-ugewlupp5a]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-art-open[b-ugewlupp5a]{cursor:pointer}
.pl-art-open:hover[b-ugewlupp5a]{color:var(--pl-primary);text-decoration:underline}
.pl-art-num[b-ugewlupp5a]{flex:none;color:var(--pl-text-2);font-size:.74rem;font-variant-numeric:tabular-nums}
.pl-artrow .pl-x[b-ugewlupp5a]{flex:none;margin-left:0;cursor:pointer;color:var(--pl-text-2);font-size:.8rem}
.pl-artrow .pl-x:hover[b-ugewlupp5a]{color:var(--pl-danger)}
.pl-art-adds[b-ugewlupp5a]{display:flex;flex-wrap:wrap;gap:8px}
.pl-art-picker[b-ugewlupp5a]{width:100%;margin-top:8px}
.pl-art-newrow[b-ugewlupp5a]{display:flex;align-items:center;gap:12px;margin-top:6px}
.pl-art-createnew[b-ugewlupp5a]{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px dashed var(--pl-border);color:var(--pl-text-2);border-radius:var(--pl-radius);padding:4px 10px;font-size:.8rem;cursor:pointer;font:inherit;font-size:.8rem}
.pl-art-createnew:hover:not(:disabled)[b-ugewlupp5a]{border-color:var(--pl-primary);color:var(--pl-primary-ink)}
.pl-art-createnew:disabled[b-ugewlupp5a]{opacity:.6;cursor:default}
.pl-art-cancel[b-ugewlupp5a]{cursor:pointer;color:var(--pl-text-2);font-size:.78rem}
.pl-art-cancel:hover[b-ugewlupp5a]{color:var(--pl-text)}

/* edition-link panel (find-or-create publication project + edition board) */
.pl-edlink[b-ugewlupp5a]{border:1px solid var(--pl-border);border-radius:var(--pl-radius);padding:10px;margin-top:8px;display:flex;flex-direction:column;gap:8px}
.pl-edlink-opts[b-ugewlupp5a]{display:flex;flex-direction:column;gap:6px}
.pl-edlink-off[b-ugewlupp5a]{display:flex;align-items:center;gap:6px;font-size:.82rem}
.pl-edlink-actions[b-ugewlupp5a]{display:flex;justify-content:flex-end;gap:6px}
/* /Features/Planning/Components/TeamDirectoryDialog.razor.rz.scp.css */
.pl-teamdir[b-j8p2z3t2y2]{display:flex;flex-direction:column;gap:12px;min-width:0}

/* create-team row (admins only) */
.pl-team-new[b-j8p2z3t2y2]{display:flex;gap:8px;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--pl-border)}
.pl-team-new .pl-search-in[b-j8p2z3t2y2]{flex:1;min-width:0;font:inherit;border:1px solid var(--pl-border);border-radius:var(--pl-radius);padding:6px 9px;outline:none;background:var(--pl-surface)}
.pl-team-new .pl-search-in:focus[b-j8p2z3t2y2]{border-color:var(--pl-primary)}
.pl-team-new .pl-inline[b-j8p2z3t2y2]{font:inherit;border:1px solid var(--pl-border);border-radius:var(--pl-radius);padding:6px 8px;background:var(--pl-surface);color:var(--pl-text)}

.pl-teamdir-empty[b-j8p2z3t2y2]{padding:18px 4px;text-align:center;color:var(--pl-text-2);font-size:.86rem}

.pl-teamlist[b-j8p2z3t2y2]{display:flex;flex-direction:column;gap:2px}
.pl-teamrow[b-j8p2z3t2y2]{display:flex;align-items:center;gap:11px;padding:8px 6px;border-radius:var(--pl-radius)}
.pl-teamrow:hover[b-j8p2z3t2y2]{background:var(--pl-hov)}
.pl-teamrow-main[b-j8p2z3t2y2]{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pl-teamrow-name[b-j8p2z3t2y2]{font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.pl-teamrow-sys[b-j8p2z3t2y2]{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--pl-text-2);background:var(--pl-chip);border-radius:6px;padding:1px 5px}
.pl-teamrow-meta[b-j8p2z3t2y2]{font-size:.74rem;color:var(--pl-text-2)}
.pl-teamrow-badge[b-j8p2z3t2y2]{font-size:.72rem;font-weight:600;border-radius:10px;padding:2px 9px;flex:none}
.pl-teamrow-badge.member[b-j8p2z3t2y2]{color:var(--pl-primary-ink,var(--pl-primary));background:var(--pl-chip)}
.pl-teamrow-badge.pending[b-j8p2z3t2y2]{color:var(--pl-text-2);background:var(--pl-chip)}
/* /Features/Planning/Components/TeamEditorDialog.razor.rz.scp.css */
/* Self-contained: a MudDialog renders in a portal, so it can't inherit the sidebar's tokens — declare our own. */
.pl-teamed[b-4070rslto9], .pl-teamed-empty[b-4070rslto9]{
  --pl-primary:var(--mud-palette-primary);
  --pl-primary-100:color-mix(in srgb,var(--mud-palette-primary) 16%,var(--mud-palette-surface));
  --pl-primary-ink:color-mix(in srgb,var(--mud-palette-primary) 62%,var(--mud-palette-text-primary));
  --pl-surface:var(--mud-palette-surface);
  --pl-border:var(--mud-palette-lines-default);
  --pl-text:var(--mud-palette-text-primary);
  --pl-text-2:var(--mud-palette-text-secondary);
  --pl-muted:color-mix(in srgb,var(--mud-palette-text-primary) 40%,var(--mud-palette-surface));
  --pl-hov:color-mix(in srgb,var(--mud-palette-primary) 8%,var(--mud-palette-surface));
  --pl-chip:color-mix(in srgb,var(--mud-palette-text-primary) 6%,var(--mud-palette-surface));
  --pl-danger:var(--mud-palette-error);
  --pl-radius:6px;
}
.pl-teamed[b-4070rslto9]{display:flex;flex-direction:column;gap:12px;min-width:0}
.pl-teamed-empty[b-4070rslto9]{padding:18px 4px;text-align:center;color:var(--pl-text-2)}

/* identity header: live avatar + inline name + subtitle */
.pl-teamed-head[b-4070rslto9]{display:flex;align-items:center;gap:12px}
.pl-teamed-ava[b-4070rslto9]{flex:none;width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:1.05rem;font-weight:700;letter-spacing:.02em;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.pl-teamed-headmain[b-4070rslto9]{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pl-teamed-name[b-4070rslto9]{font:inherit;font-size:1.15rem;font-weight:600;color:var(--pl-text);border:0;border-bottom:1px solid transparent;background:transparent;padding:1px 0;outline:none}
.pl-teamed-name:hover[b-4070rslto9]{border-bottom-color:var(--pl-border)}
.pl-teamed-name:focus[b-4070rslto9]{border-bottom-color:var(--pl-primary)}
.pl-teamed-name[b-4070rslto9]::placeholder{color:var(--pl-muted)}
.pl-teamed-sub[b-4070rslto9]{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--pl-text-2)}
.pl-teamed-dot[b-4070rslto9]{opacity:.5}
.pl-teamed-badge[b-4070rslto9]{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--pl-primary-ink);background:var(--pl-primary-100);border-radius:999px;padding:2px 8px}
.pl-teamed-badge.sys[b-4070rslto9]{color:var(--pl-text-2);background:var(--pl-chip)}

/* label + control rows */
.pl-teamed-field[b-4070rslto9]{display:flex;align-items:center;gap:10px}
.pl-teamed-lbl[b-4070rslto9]{font-size:.8rem;color:var(--pl-text-2);width:60px;flex:none}
.pl-teamed-locked[b-4070rslto9]{font-size:.82rem;color:var(--pl-text-2);font-style:italic}
.pl-teamed-hint[b-4070rslto9]{font-size:.76rem;color:var(--pl-text-2);margin:-4px 0 0 70px}

/* colour swatches */
.pl-swatches[b-4070rslto9]{display:flex;gap:7px;flex-wrap:wrap}
.pl-sw[b-4070rslto9]{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .1s}
.pl-sw:hover[b-4070rslto9]{transform:scale(1.12)}
.pl-sw.sel[b-4070rslto9]{border-color:var(--pl-text);box-shadow:0 0 0 2px var(--pl-surface) inset}

/* segmented join-policy control */
.pl-seg[b-4070rslto9]{display:inline-flex;border:1px solid var(--pl-border);border-radius:var(--pl-radius);overflow:hidden}
.pl-seg-btn[b-4070rslto9]{font:inherit;font-size:.8rem;border:0;background:var(--pl-surface);color:var(--pl-text-2);padding:5px 12px;cursor:pointer;border-left:1px solid var(--pl-border)}
.pl-seg-btn:first-child[b-4070rslto9]{border-left:0}
.pl-seg-btn:hover[b-4070rslto9]{background:var(--pl-hov)}
.pl-seg-btn.sel[b-4070rslto9]{background:var(--pl-primary);color:#fff;font-weight:600}

/* footer: archive (left) + save (right) */
.pl-teamed-foot[b-4070rslto9]{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding-bottom:10px;border-bottom:1px solid var(--pl-border)}
.pl-teamed-archive[b-4070rslto9]{display:flex;align-items:center;gap:6px;margin-right:auto;font-size:.82rem;color:var(--pl-text-2);cursor:pointer;user-select:none}
.pl-teamed-archive input[b-4070rslto9]{cursor:pointer}

/* members */
.pl-d-sec[b-4070rslto9]{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--pl-text-2);margin-top:2px}
.pl-d-sec-count[b-4070rslto9]{font-weight:600;color:var(--pl-muted)}
.pl-teamed-note[b-4070rslto9]{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--pl-text-2);background:var(--pl-chip);border-radius:var(--pl-radius);padding:8px 10px}

.pl-teamed-pending[b-4070rslto9]{background:color-mix(in srgb,var(--mud-palette-warning) 12%,var(--pl-surface));border:1px solid color-mix(in srgb,var(--mud-palette-warning) 35%,transparent);border-radius:var(--pl-radius);padding:6px 8px;display:flex;flex-direction:column;gap:2px}
.pl-teamed-pending-h[b-4070rslto9]{display:flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--pl-text-2);padding:2px}
.pl-pill[b-4070rslto9]{font-size:.7rem;font-weight:700;color:#fff;background:var(--mud-palette-warning);border-radius:999px;padding:0 6px;line-height:1.5}

.pl-memberlist[b-4070rslto9]{display:flex;flex-direction:column;max-height:320px;overflow-y:auto;margin:0 -4px}
.pl-memberrow[b-4070rslto9]{display:flex;align-items:center;gap:10px;padding:5px 6px;border-radius:var(--pl-radius)}
.pl-memberrow:hover[b-4070rslto9]{background:var(--pl-hov)}
.pl-member-ava[b-4070rslto9]{flex:none;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;color:#fff;background:color-mix(in srgb,var(--mud-palette-text-primary) 38%,var(--pl-surface))}
.pl-member-ava.pending[b-4070rslto9]{background:var(--mud-palette-warning)}
.pl-member-name[b-4070rslto9]{flex:1;min-width:0;font-size:.86rem;color:var(--pl-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-member-role[b-4070rslto9]{font-size:.66rem;font-weight:700;color:var(--pl-text-2);text-transform:uppercase;letter-spacing:.04em;background:var(--pl-chip);border-radius:999px;padding:2px 8px;flex:none}
.pl-member-role.admin[b-4070rslto9]{color:var(--pl-primary-ink);background:var(--pl-primary-100)}
.pl-member-actions[b-4070rslto9]{display:flex;align-items:center;gap:12px;flex:none;opacity:0;transition:opacity .1s}
.pl-memberrow:hover .pl-member-actions[b-4070rslto9]{opacity:1}
.pl-member-actions .pl-link[b-4070rslto9]{font-size:.76rem;color:var(--pl-text-2);cursor:pointer;white-space:nowrap}
.pl-member-actions .pl-link:hover[b-4070rslto9]{color:var(--pl-primary)}
.pl-member-actions .pl-x[b-4070rslto9]{color:var(--pl-muted);cursor:pointer;font-size:.85rem}
.pl-member-actions .pl-x:hover[b-4070rslto9]{color:var(--pl-danger)}

/* add member */
.pl-teamed-add[b-4070rslto9]{display:flex;gap:8px;align-items:center;padding-top:10px;border-top:1px solid var(--pl-border);color:var(--pl-text-2)}
.pl-teamed-add .pl-search-in[b-4070rslto9]{flex:1;min-width:0;font:inherit;border:1px solid var(--pl-border);border-radius:var(--pl-radius);padding:6px 9px;outline:none;background:var(--pl-surface);color:var(--pl-text)}
.pl-teamed-add .pl-search-in:focus[b-4070rslto9]{border-color:var(--pl-primary)}
/* /Features/Planning/Pages/PlanningOverview.razor.rz.scp.css */
/* Page shell only. The sidebar, board table, task drawer body and all dialogs are self-contained components
   with their own scoped CSS — this file styles just the grid, app bar, tabs, filter bar, empty states and the
   drawer slide-in chrome that the page still owns. The --pl-* tokens cascade to nested components at runtime. */
.planning[b-2z76bujeaq]{
  --pl-primary:var(--mud-palette-primary); --pl-primary-100:color-mix(in srgb,var(--mud-palette-primary) 22%,var(--mud-palette-surface)); --pl-primary-ink:color-mix(in srgb,var(--mud-palette-primary) 55%,var(--mud-palette-text-primary));
  --pl-bg:var(--mud-palette-background); --pl-surface:var(--mud-palette-surface); --pl-subnav:var(--mud-palette-surface); --pl-appbar:var(--mud-palette-appbar-background);
  --pl-border:var(--mud-palette-lines-default); --pl-nav-border:var(--mud-palette-lines-default); --pl-line-strong:var(--mud-palette-lines-inputs);
  --pl-text:var(--mud-palette-text-primary); --pl-text-2:var(--mud-palette-text-secondary); --pl-muted:color-mix(in srgb,var(--mud-palette-text-primary) 38%,var(--mud-palette-surface));
  --pl-hov:color-mix(in srgb,var(--mud-palette-primary) 10%,var(--mud-palette-surface)); --pl-chip:color-mix(in srgb,var(--mud-palette-text-primary) 7%,var(--mud-palette-surface)); --pl-grp:color-mix(in srgb,var(--mud-palette-text-primary) 5%,var(--mud-palette-background));
  --pl-tint:color-mix(in srgb,var(--mud-palette-text-primary) 6%,transparent); --pl-danger:var(--mud-palette-error); --pl-radius:4px;
  display:grid; grid-template-columns:248px 1fr;
  /* Pin to the viewport directly — the ancestor height chain isn't reliable (.main__stage is min-height:100vh,
     not a definite height, so height:100% wouldn't resolve and the whole PAGE would scroll instead of the panes).
     Desktop has no top app bar; the dense MudAppBar (48px) only appears below 960px — mirror .main__stage. */
  height:100vh; min-height:0;
  color:var(--pl-text); font-size:.9rem;
}
@media screen and (max-width:959px){ .planning[b-2z76bujeaq]{ height:calc(100vh - 48px); } }

/* Collapsed left rail: hide the rail and drop to a single column so the main area fills the width. Must be a
   one-track grid (not "0 1fr"): with the rail display:none'd it's no longer a grid item, so a "0 1fr" grid would
   auto-place the main area into the first (0-width) track and squish it. The ::deep targets .pl-subnav because
   it's rendered by the child PlanningSidebar (its scope, not this component's). The appbar chevron expands it. */
.planning.nav-collapsed[b-2z76bujeaq]{grid-template-columns:1fr}
.planning.nav-collapsed[b-2z76bujeaq]  .pl-subnav{display:none}

/* content column. Background matches the board area so the 20px gutter beside the table (now the scroll
   container's margin rather than its padding) reads as one continuous surface with the filter bar. */
.pl-main[b-2z76bujeaq]{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--pl-bg)}
.pl-appbar[b-2z76bujeaq]{display:flex;align-items:center;gap:12px;height:54px;padding:0 20px;border-bottom:1px solid var(--pl-nav-border);background:var(--pl-appbar)}
.pl-title[b-2z76bujeaq]{font-size:1.25rem;font-weight:600}
/* expand chevron shown in the appbar when the rail is collapsed */
.pl-expandnav[b-2z76bujeaq]{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:-6px;border-radius:var(--pl-radius);cursor:pointer;color:var(--pl-text-2);transition:background .12s,color .12s}
.pl-expandnav:hover[b-2z76bujeaq]{background:var(--pl-primary-100);color:var(--pl-primary-ink)}
.pl-fav[b-2z76bujeaq]{flex:none;cursor:pointer;color:var(--pl-muted);font-size:1.2rem;line-height:1;margin-left:-4px;transition:color .12s,transform .1s}
.pl-fav:hover[b-2z76bujeaq]{color:var(--pl-primary);transform:scale(1.1)}
.pl-fav.on[b-2z76bujeaq]{color:#e6a43b}
.pl-spacer[b-2z76bujeaq]{flex:1}

/* per-project board tabs */
.pl-tabs[b-2z76bujeaq]{display:flex;gap:2px;padding:0 20px;background:var(--pl-surface);border-bottom:1px solid var(--pl-nav-border)}
.pl-tab[b-2z76bujeaq]{padding:10px 14px;cursor:pointer;color:var(--pl-text-2);font-weight:500;font-size:.88rem;border-bottom:2px solid transparent}
.pl-tab-add[b-2z76bujeaq]{color:var(--pl-primary)}
.pl-tab-add:hover[b-2z76bujeaq]{color:var(--pl-primary-ink)}
.pl-tab:hover[b-2z76bujeaq]{color:var(--pl-text)}
.pl-tab.active[b-2z76bujeaq]{color:var(--pl-primary);border-bottom-color:var(--pl-primary)}

/* filter / toolbar bar: grouping + task search cluster on the left, condition builder pinned right */
.pl-filters[b-2z76bujeaq]{display:flex;align-items:center;gap:12px;padding:12px 20px 2px;background:var(--pl-bg)}
.pl-filters-left[b-2z76bujeaq]{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:0 1 auto;min-width:0}
.pl-filters-right[b-2z76bujeaq]{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
/* "Open edition" deep-link (only on edition boards): a plain anchor so ctrl/middle-click opens a new tab. */
.pl-openedition[b-2z76bujeaq]{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px;border:1px solid var(--pl-border);border-radius:6px;background:transparent;color:var(--pl-text-2);font-size:.83rem;font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.pl-openedition:hover[b-2z76bujeaq]{border-color:var(--pl-primary);color:var(--pl-primary-ink);background:var(--pl-primary-100)}

/* boxed task search — matches the feature's hand-styled controls (column dialog, filter button) rather
   than a stretched MudBlazor underline field. Fixed width so it sits snug beside "Groeperen", not centered. */
.pl-search[b-2z76bujeaq]{display:inline-flex;align-items:center;gap:7px;width:260px;max-width:100%;height:34px;box-sizing:border-box;
  padding:0 10px;border:1px solid var(--pl-line-strong);border-radius:6px;background:var(--pl-surface);transition:border-color .12s}
.pl-search:focus-within[b-2z76bujeaq]{border-color:var(--pl-primary)}
.pl-search-ic[b-2z76bujeaq]{color:var(--pl-text-2);flex:none}
.pl-search-ic .mud-icon-root[b-2z76bujeaq]{font-size:1.1rem}
.pl-search-in[b-2z76bujeaq]{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;font-size:.85rem;color:var(--pl-text)}
.pl-search-in[b-2z76bujeaq]::placeholder{color:var(--pl-text-2)}
.pl-search-x[b-2z76bujeaq]{cursor:pointer;color:var(--pl-text-2);font-size:.78rem;line-height:1;padding:0 2px;flex:none}
.pl-search-x:hover[b-2z76bujeaq]{color:var(--pl-danger)}

/* boxed "Groeperen" select — same 34px chip as the search/filter controls so the toolbar reads as one set.
   A faint inline caption sits left of a borderless native <select> that carries its own dropdown caret. */
.pl-groupby[b-2z76bujeaq]{display:inline-flex;align-items:center;gap:7px;height:34px;box-sizing:border-box;padding:0 10px;
  border:1px solid var(--pl-line-strong);border-radius:6px;background:var(--pl-surface);cursor:pointer;transition:border-color .12s}
.pl-groupby:hover[b-2z76bujeaq]{border-color:var(--pl-primary)}
.pl-groupby:focus-within[b-2z76bujeaq]{border-color:var(--pl-primary)}
.pl-groupby-lbl[b-2z76bujeaq]{color:var(--pl-text-2);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;flex:none}
.pl-groupby-sel[b-2z76bujeaq]{border:none;outline:none;background:transparent;font:inherit;font-size:.85rem;font-weight:500;color:var(--pl-text);cursor:pointer;padding:0;margin:0}

/* empty / loading states */
.pl-empty[b-2z76bujeaq]{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}
.pl-loading[b-2z76bujeaq]{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}
.pl-panel[b-2z76bujeaq]{max-width:440px;text-align:center;background:var(--pl-surface);border:1px solid var(--pl-border);border-radius:var(--pl-radius);padding:40px 36px;display:flex;flex-direction:column;align-items:center;gap:4px}
.pl-empty-h[b-2z76bujeaq]{font-size:1.25rem;font-weight:600}
.pl-empty-p[b-2z76bujeaq]{color:var(--pl-text-2);margin-bottom:16px}

/* task detail drawer slide-in chrome (the body is <TaskDetailPanel>) */
/* Transparent (no dim): other sidebars don't darken the page, and the tint only covered the content area, not
   the nav rail — which read as broken. Kept as an invisible layer purely so an outside click still closes the drawer. */
.pl-scrim[b-2z76bujeaq]{position:fixed;inset:0;background:transparent;display:none;z-index:80}
.pl-scrim.open[b-2z76bujeaq]{display:block}
.pl-drawer[b-2z76bujeaq]{position:fixed;top:0;right:0;height:100vh;width:680px;max-width:96vw;background:var(--pl-surface);border-left:1px solid var(--pl-border);transform:translateX(100%);transition:transform .16s ease;z-index:90;display:flex;flex-direction:column}
.pl-drawer.open[b-2z76bujeaq]{transform:none}

/* Inline board rename (appbar) */
.pl-renameboard[b-2z76bujeaq]{cursor:pointer;display:inline-flex;align-items:center;color:var(--mud-palette-text-disabled,#c4c4c4);opacity:.5;transition:opacity .12s,color .12s}
.pl-renameboard:hover[b-2z76bujeaq]{opacity:1;color:var(--pl-primary,#5b3cc4)}
.pl-title-input[b-2z76bujeaq]{font-size:1.25rem;font-weight:600;border:1px solid var(--mud-palette-lines-default,#d0d0d0);border-radius:6px;padding:1px 8px;outline:none;background:var(--mud-palette-surface,#fff);color:inherit}
.pl-title-input:focus[b-2z76bujeaq]{border-color:var(--pl-primary,#5b3cc4)}

/* Truncation banner: shown above the grid when only the first page of a larger result set is loaded. Sits in
   the 20px table gutter so it lines up with the grid's left edge. */
.pl-truncbar[b-2z76bujeaq]{display:flex;align-items:center;gap:8px;margin:12px 20px 0;padding:7px 12px;border-radius:6px;
  background:var(--pl-primary-100);color:var(--pl-primary-ink);font-size:.82rem;line-height:1.3}
.pl-truncbar .mud-icon-root[b-2z76bujeaq]{flex:none;font-size:1.05rem}
/* /Pages/Activities/SideBarActivities.razor.rz.scp.css */
.send-in-bar[b-g3dooa3vwu] {
    background-color: var(--mud-palette-surface);
}

.send-in-bar--contents[b-g3dooa3vwu] {
    max-height: calc(100vh - 200px);
}

.send-in-bar--contents-with-search[b-g3dooa3vwu] {
    max-height: calc(100vh - 202px);
}

@media (max-width: 960px) {
.send-in-bar--contents[b-g3dooa3vwu] {
        max-height: calc(100vh - 200px);
    }

.send-in-bar--contents-with-search[b-g3dooa3vwu] {
        max-height: calc(100vh - 247px);
    }
}
/* /Pages/Articles/AuthorComponents/ArticleOwnerLine.razor.rz.scp.css */
/* Owner subtitle under the author byline. Indented to line up with the author
   name (past the avatar). Reads as quiet, secondary metadata. */
.owner-line[b-vmmh0jvq4z] {
    padding-left: 2rem;
}

.owner-chip[b-vmmh0jvq4z] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: color 120ms ease;
}

.owner-chip:not(.owner-chip--readonly):hover[b-vmmh0jvq4z] {
    color: var(--mud-palette-text-primary);
}

.owner-chip--empty[b-vmmh0jvq4z] {
    font-style: italic;
    opacity: 0.7;
}

.owner-chip--readonly[b-vmmh0jvq4z] {
    cursor: default;
}

/* Pencil only appears on hover, so the resting state stays clean.
   ::deep reaches into the MudIcon child component (scoped CSS stops at
   the component boundary otherwise). */
.owner-chip[b-vmmh0jvq4z]  .owner-chip__edit {
    font-size: 0.95rem !important;
    color: var(--mud-palette-primary);
    opacity: 0;
    transition: opacity 120ms ease;
}

.owner-chip:hover[b-vmmh0jvq4z]  .owner-chip__edit {
    opacity: 1;
}
/* /Pages/Articles/EditArticle/Buttons/CreateArticleButton.razor.rz.scp.css */
/* /Pages/Articles/EditArticle/EditArticle.razor.rz.scp.css */
/* /Pages/Articles/EditArticle/ForwardArticleDialog.razor.rz.scp.css */
.pc-option[b-7fq59jzrlb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    padding: 0.375rem 0.5rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
    outline: none;
}

.pc-option:hover[b-7fq59jzrlb] {
    background: var(--mud-palette-action-default-hover);
}

/* Selected rows get a subtle tint so selection is visible even when not focused. */
.pc-option[aria-selected="true"][b-7fq59jzrlb] {
    background: var(--mud-palette-primary-hover);
}

/* Keyboard focus ring — inset so it never causes horizontal overflow inside the
   scrollable list, and clearly visible on top of hover/selected backgrounds. */
.pc-option:focus-visible[b-7fq59jzrlb] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.pc-option--header[b-7fq59jzrlb] {
    font-weight: 600;
}

/* ---- Consistent keyboard-focus ring across every control in the dialog ----
   The custom toggle (.pc-tab) and list rows (.pc-option) already show a ring; these
   ::deep rules give the MudBlazor controls (autocomplete inputs, action buttons, the
   close button) the same clear ring so the current Tab target is always visible. */
[b-7fq59jzrlb] .mud-input-slot:focus-visible,
[b-7fq59jzrlb] .mud-button:focus-visible,
[b-7fq59jzrlb] .mud-icon-button:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* The checkbox's real <input> is visually hidden, so ring its visible box instead. */
[b-7fq59jzrlb] .mud-checkbox:has(input:focus-visible) .mud-button-root {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
/* /Pages/Articles/EditArticle/Tabs/NewspaperArticleTab.razor.rz.scp.css */
/* Owner subtitle under the author byline.
   Indented to line up with the author name: ProfileImage Size.Small avatar
   (2rem) + the bar's gap-2 (0.5rem) = 2.5rem. Reads as quiet, secondary
   metadata beneath the primary author. */
.owner-line[b-9ylx40opnz] {
    padding-left: 2.5rem;
}

.owner-chip[b-9ylx40opnz] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: color 120ms ease;
}

.owner-chip:not(.owner-chip--readonly):hover[b-9ylx40opnz] {
    color: var(--mud-palette-text-primary);
}

.owner-chip--empty[b-9ylx40opnz] {
    font-style: italic;
    opacity: 0.7;
}

.owner-chip--readonly[b-9ylx40opnz] {
    cursor: default;
}

/* Pencil only appears on hover, so the resting state stays clean.
   ::deep reaches into the MudIcon child component (scoped CSS stops at
   the component boundary otherwise). */
.owner-chip[b-9ylx40opnz]  .owner-chip__edit {
    font-size: 0.95rem !important;
    color: var(--mud-palette-primary);
    opacity: 0;
    transition: opacity 120ms ease;
}

.owner-chip:hover[b-9ylx40opnz]  .owner-chip__edit {
    opacity: 1;
}
/* /Pages/Articles/SendInContent/Email/EmailAttachments.razor.rz.scp.css */
[b-mlpyr7i4pq] .image-button:hover {
    color: var(--color-images);
}
 
/* /Pages/Articles/SendInContent/SideBarSendInContent.razor.rz.scp.css */
.send-in-bar[b-t28k9wk2z2] {
    background-color: var(--mud-palette-surface);
}

.send-in-bar--contents[b-t28k9wk2z2] {
    max-height: calc(100vh - 155px);
}

.send-in-bar--contents-with-search[b-t28k9wk2z2] {
    max-height: calc(100vh - 202px);
}

@media (max-width: 960px) {
    .send-in-bar--contents[b-t28k9wk2z2] {
        max-height: calc(100vh - 200px);
    }

    .send-in-bar--contents-with-search[b-t28k9wk2z2] {
        max-height: calc(100vh - 247px);
    }
}
/* /Pages/Campaign/CampaignDetail.razor.rz.scp.css */
[b-8lkcid2z5w] .mud-input-control-input-container {
    width:100%;
}

[b-8lkcid2z5w] .custom-chip{
    cursor: default !important; 
}

.mailing-linked[b-8lkcid2z5w] { 
    margin-left: 8px;
    margin-right: 4px;
    border-radius: 4px 4px 0 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom: 0px;
}
/* /Pages/Campaign/Components/CampaignNewDialog.razor.rz.scp.css */

.pane--left[b-0l7ya4vqfg] {
}
.--root-dark
.pane--left[b-0l7ya4vqfg] {
}

.--root-dark .pane--right[b-0l7ya4vqfg] {
}
/* /Pages/Campaign/Components/Mail/Content/MailBuilder.razor.rz.scp.css */
.content-container[b-jni80a4vnl] {
    border-radius: 10px;
    background: red;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-jni80a4vnl] .item-deleted-alert{
    -webkit-animation: fadein 0.4s;
    animation: fadein-b-jni80a4vnl 0.4s;
}

[b-jni80a4vnl] .mud-expand-panel .mud-expand-panel-header {
    padding: 12px 18px;
}
[b-jni80a4vnl] .mud-expand-panel .mud-expand-panel-content {
    padding: 12px 18px;
}

@-webkit-keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadein-b-jni80a4vnl {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/* /Pages/Campaign/ComponentVersions.razor.rz.scp.css */
iframe[b-tay2zvnhmr] {
    transition: height 0.1s ease-out, opacity 0.3s ease-out;
    height: 320px;
} 
/* /Pages/Campaign/Filters/FilterBaseElement.razor.rz.scp.css */
[b-xukzbi02rs] .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text
{
margin-top: 0 !important;
}

[b-xukzbi02rs] .select-text-sm .mud-input {
    font-size: 1em !important;
}
/* /Pages/Campaign/Filters/FilterBuilder.razor.rz.scp.css */
[b-bvuonikoup] .mud-table-container {
    width: 100%;
    overflow-x: auto;
    max-height: 100%;
    overflow-y: auto;
}

[b-bvuonikoup] .mud-select {
    flex:none;
    min-width: 75px;
}

[b-bvuonikoup] .select--year .mud-select
{
    flex:none;
    min-width: 70px;
}

[b-bvuonikoup] .mud-input-number-control{
    max-width: 100px;
}
[b-bvuonikoup] .mud-input-text {
    max-width: 140px;
}

[b-bvuonikoup] .mud-text--no-max-width .mud-input-text {
    max-width: none !important
}

[b-bvuonikoup] .pubble-filter-ghost {
    opacity: 0.35;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 6px;
}

[b-bvuonikoup] .pubble-filter-chosen {
    outline: 1px dashed rgba(99, 102, 241, 0.5);
    outline-offset: 2px;
}

[b-bvuonikoup] .pubble-filter-drag {
    cursor: grabbing;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    border-radius: 6px;
}

[b-bvuonikoup] .pubble-filter-drag-handle .mud-icon-root {
    transition: color 120ms ease;
}

[b-bvuonikoup] .pubble-filter-chosen .pubble-filter-drag-handle,
[b-bvuonikoup] .pubble-filter-drag .pubble-filter-drag-handle,
[b-bvuonikoup] .pubble-filter-ghost .pubble-filter-drag-handle {
    opacity: 1 !important;
}

[b-bvuonikoup] .pubble-filter-group {
    transition: background-color 120ms ease;
}

[b-bvuonikoup] .pubble-filter-group__elements:empty {
    border: 1px dashed rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.02);
}

[b-bvuonikoup] .pubble-filter-group__elements:empty::before {
    content: '↳ drop a filter or group here';
    color: rgba(0, 0, 0, 0.35);
    font-size: 12px;
    font-style: italic;
    align-self: center;
    margin: auto;
    pointer-events: none;
}
/* /Pages/Campaign/Filters/Filters.razor.rz.scp.css */
[b-cz1bqlles0] .mud-input-control-input-container {
    width:100%;
}

[b-cz1bqlles0] .custom-chip{
    cursor: default !important; 
}
/* /Pages/Campaign/MailingDetail.razor.rz.scp.css */
[b-bgydhmodp1] .custom-chip{
    cursor: default !important;
}
/* /Pages/Campaign/MailingEditor.razor.rz.scp.css */
[b-rahbsmhjdy] .mud-button-label{
    margin-top: 1.5px;
    margin-bottom: -1.5px;
}

[b-rahbsmhjdy] .mud-button-label .mud-button-icon-end{
    margin-bottom: 3px;
}

[b-rahbsmhjdy] .mud-button-label .mud-button-icon-start{
    margin-bottom: 3px;
}

[b-rahbsmhjdy] .mud-table-edit-campaign th .mud-checkbox {
    display: none !important
}

[b-rahbsmhjdy] .mud-table-edit-campaign .mud-table-toolbar {
    background: var(--color-editorial);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    padding: 16px;
}

[b-rahbsmhjdy] .hidden-searchbar-custom .mud-input.mud-input-underline:before {
    color: white;
    border-bottom-color: white;
}

[b-rahbsmhjdy] .hidden-searchbar-custom .mud-input > input.mud-input-root.mud-input-root-margin-dense, div.mud-input-slot.mud-input-root.mud-input-root-margin-dense[b-rahbsmhjdy] {
    color: white;
}

[b-rahbsmhjdy] .hidden-searchbar-custom .mud-icon-root.mud-svg-icon {
    fill: white;
    font-size: 1.5rem;
    margin-right: -6px;
}

[b-rahbsmhjdy] .hidden-searchbar {
    width: 250px;
    height: 45px;
    margin-top: -20px;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
}

.selected[b-rahbsmhjdy] {
    animation: slide-in-b-rahbsmhjdy 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
    display: flex;
}

.dismiss[b-rahbsmhjdy] {
    animation: slide-out-b-rahbsmhjdy 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
    display: none;
}

@keyframes slide-in-b-rahbsmhjdy {
    0% {
        -webkit-transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}

@-webkit-keyframes slide-in {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}

@keyframes slide-out-b-rahbsmhjdy {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(100%);
    }
}

@-webkit-keyframes slide-out {
    0% {
        -webkit-transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(100%);
    }
}
/* /Pages/Campaign/Templates.razor.rz.scp.css */
.content-container[b-1tmlzu7u30] {
    border-radius: 10px;
    width: 100%;
    background: red;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-1tmlzu7u30] .item-deleted-alert{
    -webkit-animation: fadein 0.4s;
    animation: fadein-b-1tmlzu7u30 0.4s;
}

@-webkit-keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadein-b-1tmlzu7u30 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/* /Pages/CloudStorage/StorageView.razor.rz.scp.css */
[b-kr4fevlezp] .mud-input-control {
    margin: 0 !important;
}
[b-kr4fevlezp] .mud-input-slot {
    /* match bottom */
    padding-top: 6px !important; 
}
/* /Pages/Customers/Components/BookingAttachmentsForm.razor.rz.scp.css */
/* Accordion arrow rotation animation */
details[open] .accordion-arrow[b-eydl9uh5mf] {
    transform: rotate(180deg);
}

.accordion-arrow[b-eydl9uh5mf] {
    transition: transform 0.2s ease-in-out;
}
/* /Pages/Customers/SubscriptionForm.razor.rz.scp.css */
/* =========================================================
   SubscriptionForm — structural styles only.
   All colors / theming live in the razor via Tailwind dark: utilities,
   because the app toggles `.dark` on <html> (see pubble.utilities.js).
   Putting colors here breaks CSS isolation scoping and leaks between themes.
   ========================================================= */

[b-dwi7vl5miq] .sub-form__body {
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 0.15) transparent;
}

/* Numbered step badge — shares the design of .nav__link--create:
   primary color at 12% opacity for the background, full primary for the digit. */
[b-dwi7vl5miq] .sub-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    flex: none;
    font-variant-numeric: tabular-nums;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}


/* Date sub-cards in the Duration section.
   They sit inside a card that already uses `bg-darker`, so the date cards
   use `background-color--surface` (one step lighter in dark mode) to read
   as a separate visual group. In light mode both are near-white, so the
   border carries the separation. */
[b-dwi7vl5miq] .sub-datecard {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.875rem;
    min-height: 3.5rem;
    justify-content: center;
}

[b-dwi7vl5miq] .sub-datecard__label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    line-height: 1;
}

/* ── <details> disclosures ─────────────────────────────── */

[b-dwi7vl5miq] .sub-disclosure > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

[b-dwi7vl5miq] .sub-disclosure > summary::-webkit-details-marker { display: none; }

[b-dwi7vl5miq] .sub-disclosure > summary .sub-disclosure__chevron {
    transition: transform 0.15s ease;
    display: inline-block;
}

[b-dwi7vl5miq] .sub-disclosure[open] > summary .sub-disclosure__chevron {
    transform: rotate(90deg);
}

/* ── Timeline — minimal vertical rail with muted dots ──── */

[b-dwi7vl5miq] .sub-timeline {
    list-style: none;
    padding: 0 0 0 0.875rem;
    margin: 0;
    position: relative;
}

[b-dwi7vl5miq] .sub-timeline::before {
    content: "";
    position: absolute;
    left: 0.1875rem;
    top: 0.75rem;
    bottom: 0.75rem;
    width: 1px;
    background: currentColor;
    opacity: 0.12;
}

[b-dwi7vl5miq] .sub-timeline__dot {
    position: absolute;
    left: -0.875rem;
    top: 0.75rem;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.35;
    flex: none;
}

/* Consent entries stand out with a distinct hue — they represent a legal
   record (GDPR consent) rather than a routine subscription event. */
[b-dwi7vl5miq] .sub-timeline__dot--consent {
    background: var(--mud-palette-info);
    opacity: 1;
}

[b-dwi7vl5miq] .sub-timeline__title--consent {
    color: var(--mud-palette-info);
}

/* Foreign-chain entries — events from sibling aggregates that share the same
   customer + subscription type but a different renewal chain. Kept on the
   timeline for context (admins can spot duplicates / cross-talk) but rendered
   with a hollow dot so they don't read as activity on the chain currently open. */
[b-dwi7vl5miq] .sub-timeline__dot--foreign {
    background: transparent;
    border: 1px solid currentColor;
    opacity: 0.4;
}

/* ── Tabular numerals for prices and dates ─────────────── */

[b-dwi7vl5miq] .sub-tnum {
    font-variant-numeric: tabular-nums;
}

/* ── Date-card picker — render MudDatePicker as minimal text-style ──
   The 3rd date card hosts a MudDatePicker but the mockup shows it as
   bold text with a trailing calendar icon, not a full input field. */

[b-dwi7vl5miq] .sub-datecard-picker .mud-input-control-input-container { padding: 0; }
[b-dwi7vl5miq] .sub-datecard-picker .mud-input { margin: 0; padding: 0; }
[b-dwi7vl5miq] .sub-datecard-picker .mud-input-slot { padding: 0; min-height: 0; }
[b-dwi7vl5miq] .sub-datecard-picker .mud-input-slot > input {
    padding: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: 0 !important;
    font-variant-numeric: tabular-nums;
}
[b-dwi7vl5miq] .sub-datecard-picker .mud-input-slot::before,
[b-dwi7vl5miq] .sub-datecard-picker .mud-input-slot::after { display: none; }
[b-dwi7vl5miq] .sub-datecard-picker .mud-input-adornment { padding: 0; margin: 0; }
[b-dwi7vl5miq] .sub-datecard-picker .mud-input-adornment .mud-icon-button { padding: 0.125rem; }

/* ── Consistent sidebar buttons ──────────────────────────
   All Klantacties / Gevaarlijke-acties buttons share one visual style:
   · left-aligned icon + single-line label
   · identical height, padding, icon gap, font weight
   · `--danger` modifier adds the red border for destructive actions */

[b-dwi7vl5miq] .sub-sidebar-btn {
    min-height: 2.25rem;
    text-transform: none !important;
    font-weight: 500 !important;
    justify-content: flex-start !important;
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
}

[b-dwi7vl5miq] .sub-sidebar-btn .mud-button-label {
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    line-height: 1.3;
    /* Single-line labels across all locales: truncate with ellipsis instead of wrapping. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-dwi7vl5miq] .sub-sidebar-btn .mud-button-icon-start {
    margin-right: 0.625rem;
    flex: none;
}

/* Red outline variant — only for destructive actions (Terminate). */
[b-dwi7vl5miq] .sub-sidebar-btn.sub-sidebar-btn--danger {
    border-color: rgb(239 68 68 / 0.45) !important;
    color: rgb(248 113 113) !important;
}

[b-dwi7vl5miq] .sub-sidebar-btn.sub-sidebar-btn--danger:hover {
    background: rgb(239 68 68 / 0.08) !important;
    border-color: rgb(239 68 68 / 0.7) !important;
}
/* /Pages/Customers/SubscriptionStarterDialog.razor.rz.scp.css */
/* Structural only — colors live in the razor via Tailwind dark: utilities
   because CSS isolation doesn't propagate `:global(html.dark)` reliably. */

[b-80ii19lhxa] .sub-starter-picker .mud-paper {
    background: transparent !important;
    box-shadow: none !important;
}
/* /Pages/Customers/TemplatedEmailDialog.razor.rz.scp.css */
/* /Pages/Edition/Components/ExpandedPageInfo.razor.rz.scp.css */
.expanded-page-info[b-fagiruulya] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.page-status-icons[b-fagiruulya] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-badge[b-fagiruulya] {
    background: var(--mud-palette-primary);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.page-metadata[b-fagiruulya] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    max-width: 200px;
    text-align: center;
}

.metadata-item[b-fagiruulya] {
    white-space: nowrap;
}

.metadata-infoline[b-fagiruulya] {
    font-style: italic;
    opacity: 0.9;
}

.metadata-separator[b-fagiruulya] {
    color: var(--mud-palette-text-disabled);
}
/* /Pages/Edition/Components/ExpandedPagesOverlay.razor.rz.scp.css */
/* Expanded overlay - covers from top to bottom of screen */
.expanded-overlay[b-mi9cbd871b] {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--mud-palette-background);
    z-index: 100;
    display: flex;
    flex-direction: column;
}

:global(.dark) .expanded-overlay[b-mi9cbd871b] {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

/* Close button container - absolute top left within overlay */
.close-button-container[b-mi9cbd871b] {
    position: absolute;
    top: 14px;
    left: 72px;
    z-index: 10;
}

/* Content area with scrollable pages */
.expanded-content[b-mi9cbd871b] {
    flex: 1;
    overflow: auto;
    padding: 32px 60px;
}

/* Cover section - centered */
.cover-section[b-mi9cbd871b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32px;
}

/* Pages container - horizontal layout with wrapping */
.expanded-pages[b-mi9cbd871b] {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
    align-items: flex-start;
}

/* Spread group - pairs pages together */
.spread-group[b-mi9cbd871b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
}

:global(.dark) .spread-group[b-mi9cbd871b] {
    background: rgba(255, 255, 255, 0.03);
}

.spread-single[b-mi9cbd871b] {
    background: transparent;
    padding: 16px;
}

/* Pages within a spread group */
.spread-group-pages[b-mi9cbd871b] {
    display: flex;
    gap: 12px;
}

/* Individual page in expanded view */
.expanded-page[b-mi9cbd871b] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Page thumbnail container */
.expanded-page-thumbnail[b-mi9cbd871b] {
    position: relative;
    cursor: pointer;
}

.expanded-page-thumbnail--selected[b-mi9cbd871b] {
    outline: 3px solid var(--mud-palette-primary);
}

/* Warning badge - top left corner of page number */
.page-warning-badge[b-mi9cbd871b] {
    position: absolute;
    top: -8px;
    left: -8px;
    z-index: 10;
}


/* Controls below page */
.expanded-page-controls[b-mi9cbd871b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
}

/* Page number container with badge */
.expanded-page-number-container[b-mi9cbd871b] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Page number label */
.expanded-page-number[b-mi9cbd871b] {
    position: relative;
    font-size: 14px;
    color: var(--mud-palette-text-primary);
    min-width: 24px;
    text-align: center;
}

/* Status badge next to page number (right side) */
[b-mi9cbd871b] .page-status-badge {
    font-size: 16px;
}

/* Status buttons container */
.expanded-page-status[b-mi9cbd871b] {
    display: flex;
    align-items: center;
}

/* /Pages/Edition/EditionStatus/EditionStatusViewSideBar.razor.rz.scp.css */
.sticky-title[b-wum07dqe8a] {
    position: sticky;
    position: -webkit-sticky; /* For Safari */
    top: 0;
    background-color: white;
    z-index: 0;
    padding: 8px;
    border-bottom: 1px solid #ddd;
}
.seven-column-grid[b-wum07dqe8a] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1rem;
}

.day-column[b-wum07dqe8a] {
    min-width: 0; /* Prevent columns from overflowing */
}

.mud-card[b-wum07dqe8a] {
    overflow: hidden;
}

.mud-card-content[b-wum07dqe8a] {
    overflow: hidden;
}
/* /Pages/Internet/PlanningBoardDialog.razor.rz.scp.css */
.calendar-slide-viewport[b-j8vf7525e5] {
    position: relative;
    overflow: hidden;
}

.calendar-grid[b-j8vf7525e5] {
    will-change: transform;
}
/* /Pages/Invoicing/BatchInvoices.razor.rz.scp.css */
/*
 * The "Print" split button: a MudButton (front) + a MudMenu (arrow) inside a MudButtonGroup.
 * MudMenu applies its `Class` to the wrapper, not to the activator icon-button, so the front
 * button's Tailwind border colour can't be carried over via a class. Match it here instead so
 * both halves share one continuous border. Values mirror `border-gray-300 dark:border-gray-600`.
 */
.print-bg-dropdown[b-l3ksev51js]  .mud-button-root {
    border-color: #d1d5db !important; /* gray-300 */
}

.dark .print-bg-dropdown[b-l3ksev51js]  .mud-button-root {
    border-color: #4b5563 !important; /* gray-600 */
}
/* /Pages/Invoicing/InvoiceConfiguration.razor.rz.scp.css */
/* Fix container sizing to prevent overflow */
.invoice-preview-container[b-t3c3hlx105] {
    background: #f8fafc;
    padding: 1rem;
    width: fit-content;
    min-height: fit-content;
    position: relative;
}

/* Style individual invoice pages */
.invoice-preview-container[b-t3c3hlx105]  .page {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: 2rem;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background-image: var(--invoice-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Industry standard page separator */
.invoice-preview-container[b-t3c3hlx105]  .page:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #cbd5e1 25%, #cbd5e1 75%, transparent);
}

/* Page number indicator */
.invoice-preview-container[b-t3c3hlx105]  .page:not(:first-child)::before {
    content: "Page " counter(page);
    position: absolute;
    top: -1.5rem;
    right: 1rem;
    background: #64748b;
    color: white;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.invoice-preview-container[b-t3c3hlx105]  .page {
    counter-increment: page;
}

.invoice-preview-container[b-t3c3hlx105] {
    counter-reset: page;
}

/* Add subtle border to pages */
.invoice-preview-container[b-t3c3hlx105]  .page {
    border: 1px solid #e2e8f0;
}

/* Improve continuation page styling */
.invoice-preview-container[b-t3c3hlx105]  .continuation-page {
    margin-top: 1.5rem;
}

/* Add visual distinction between pages */
.invoice-preview-container[b-t3c3hlx105]  .page:nth-child(even) {
    transform: translateX(2px);
}

.invoice-preview-container[b-t3c3hlx105]  .page:nth-child(odd) {
    transform: translateX(-2px);
}
/* /Pages/Invoicing/Invoicing.razor.rz.scp.css */
.invoice-aggregate[b-8ff3ug24vo] {
    background-color: var(--mud-palette-drawer-background);
}

/* Make invoice list table transparent and fit container */
[b-8ff3ug24vo] .invoice-list-table {
    background: transparent;
    table-layout: fixed;
    width: 100%;
}

[b-8ff3ug24vo] .invoice-list-table .mud-table-container {
    background: transparent;
    overflow-x: hidden;
}

[b-8ff3ug24vo] .invoice-list-table .mud-table-root {
    background: transparent;
}

/* Checkbox column - fixed narrow width when multi-select is enabled */
[b-8ff3ug24vo] .invoice-list-table td:first-child:has(.mud-checkbox) {
    width: 34px;
    max-width: 34px;
    min-width: 34px;
    padding: 0 4px;
}

/* Customer name column - takes remaining space, truncates */
/* When checkbox is present, customer name is second column */
[b-8ff3ug24vo] .invoice-list-table tr:has(td:first-child .mud-checkbox) td:nth-child(2) {
    width: auto;
    max-width: 0;
    overflow: hidden;
}

/* When no checkbox, customer name is first column */
[b-8ff3ug24vo] .invoice-list-table tr:not(:has(td:first-child .mud-checkbox)) td:first-child {
    width: auto;
    max-width: 0;
    overflow: hidden;
}

/* Price column - fixed width, never truncates */
[b-8ff3ug24vo] .invoice-list-table td:last-child {
    width: 80px;
    min-width: 80px;
    white-space: nowrap;
}
/* /Pages/Publications/AdSizesTable.razor.rz.scp.css */
/* /Pages/Reporting/Charts/BulletChart.razor.rz.scp.css */
/* /Pages/Reporting/Components/InsightsPage.razor.rz.scp.css */
[b-vmg8r3epg0] .price-col {
    text-align: right;
    white-space: nowrap;
}

.greyed-out[b-vmg8r3epg0] {
    opacity: .5;
}

.title-column[b-vmg8r3epg0] {
    padding-left: 10px;
    text-align: left;
}

.nowrap[b-vmg8r3epg0] {
    white-space: nowrap;
}

[b-vmg8r3epg0] .table-hover td,
[b-vmg8r3epg0] .table-hover th {
    position: relative;
}

[b-vmg8r3epg0] .table-hover td:hover::after,
[b-vmg8r3epg0] .table-hover th:not(.title-column):hover::after {
    content: "";
    position: absolute;
    background-color: var(--mud-palette-action-default-hover);
    left: 0;
    top: -5000px;
    height: 10000px;
    width: 100%;
    z-index: -1;
}

/* Make the entire thead sticky as a unit so both header rows stick together.
   MudBlazor's FixedHeader only makes individual <th> sticky (top:0), which
   makes it so we can only have 1 sticky header row. We override that. */
[b-vmg8r3epg0] .--insights-table .mud-table-container thead {
    position: sticky;
    top: 0;
    z-index: 4;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

[b-vmg8r3epg0] .--insights-table .mud-table-sticky-header {
    position: relative;
    top: auto;
}

/* Column header row */
[b-vmg8r3epg0] .--insights-table thead tr:first-child th {
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Totals row */
[b-vmg8r3epg0] .--insights-table thead tr:nth-child(2) td {
    background-color: var(--mud-palette-background-grey);
    border-bottom: 2px solid var(--mud-palette-divider);
}
/* /Pages/Reporting/Insights.razor.rz.scp.css */
/* /Pages/Reporting/InsightsPrice.razor.rz.scp.css */
.down[b-7mn8cagb72] {
    background: #fee2e2;
    color: #b91c1c;
    border-radius: 12px;
    padding: 1px 7px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.up[b-7mn8cagb72] {
    background: #dcfce7;
    color: #15803d;
    border-radius: 12px;
    padding: 1px 7px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.upordown[b-7mn8cagb72] {
    font-size: 12px;
    display: inline-block;
}

.totalcompare[b-7mn8cagb72] {
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.3;
    display: block;
    font-weight: normal;
}

small[b-7mn8cagb72] {
    font-size: 100%;
    opacity: .9;
}
/* /Pages/Reporting/PublicationReportSettingsDialog.razor.rz.scp.css */
.greyed-out[b-xg0q3w5mmm] {
    opacity: .6;
}
/* /Pages/Reporting/PublicationReportSettingsTargets.razor.rz.scp.css */
.greyed-out[b-22sul82qfs] {
    opacity: .6;
}
/* /Pages/Reporting/Report.razor.rz.scp.css */
/* /Pages/Reporting/ReportAdvertisements.razor.rz.scp.css */
/* /Pages/Reporting/ReportCustomerComparisons.razor.rz.scp.css */
/* /Pages/Reporting/ReportEditionsTable.razor.rz.scp.css */
.sticky-col[b-p7x68737oa] {
    position: sticky;
    position: -webkit-sticky; /* For Safari */
    left: 0;
    z-index: 100;
    background-color: #323232;
    color: #fff;

    box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.15); /* Optional: for better separation */
}
.--root-dark .dark .sticky-col[b-p7x68737oa] {
    background-color: #323232;
}
/* /Pages/Reporting/ReportGrouped.razor.rz.scp.css */
.greyed-out[b-22t0t93yzh] {
    opacity: .6;
}
/* /Pages/Reporting/ReportLayoutActivity.razor.rz.scp.css */
/* /Pages/Reporting/ReportProducts.razor.rz.scp.css */
/* /Pages/Settings/Components/PermissionsTable.razor.rz.scp.css */
[b-82f85axm0h] .table__header {
    background-color: var(--mud-palette-background);
    position: sticky;
    z-index: 4;
    top: 0;
}

[b-82f85axm0h] .h-table {
    height: calc(100% - 54px); /* class needs to be applied to MudTable, and tailwind doesnt take calc in custom classes, and style applies to wrong element (child) because mudblazor is weird */
}

[b-82f85axm0h] .hidden {
    display: none !important; /* override tailwind to force display none because mudblazor is wacky */
}

[b-82f85axm0h] .mud-table-cell-custom-group {
    font-weight: 500;
}

[b-82f85axm0h] .mud-table-cell-custom-group-footer {
    padding-bottom: 50px;
    text-align: right;
}

[b-82f85axm0h] .mud-table-container {
    width: 100%;
    overflow-x: auto;
    max-height: 85vh;
}

[b-82f85axm0h] .mud-table-root {
    width: 100%;
    overflow-x: auto;
}

[b-82f85axm0h] .sticky-table-headers__sticky {
    background-color: var(--mud-palette-background);
    position: sticky;
    z-index: 3;
}

[b-82f85axm0h] .permission-column--striped {
    background-color: var(--mud-palette-background);
}

[b-82f85axm0h] .permission-column {
    padding: 6px 6px 6px 6px !important;
    padding-inline-start: 6px !important;
    padding-inline-end: 6px !important;
}


[b-82f85axm0h] .permission-column--last {
    padding-inline-end: 20px !important;
}

[b-82f85axm0h] .permission-column--first {
    padding-inline-start: 20px !important;
}

[b-82f85axm0h] .mud-table-row .mud-table-cell:first-child {
    background-color: var(--mud-palette-background);
    left: 0;
    position: sticky;
    z-index: 3;
}

[b-82f85axm0h] .mud-table-cell {
    line-height: 0;
}

[b-82f85axm0h] .mud-table-cell button {
    vertical-align: middle
}

[b-82f85axm0h] .permission-column--minwidth {
    height: 50px;
}

[b-82f85axm0h] .mud-button {
    min-width: 44px;
}
/* /Pages/Settings/DocumentTemplates/DocumentTemplateEditor.razor.rz.scp.css */
/* Fix container sizing to prevent overflow */
.document-preview-container[b-vvems23iri] {
    background: #f8fafc;
    padding: 1rem;
    width: fit-content;
    min-height: fit-content;
    position: relative;
}



/* Style individual invoice pages */
.document-preview-container[b-vvems23iri]  .page {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: 2rem;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background-image: var(--invoice-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Industry standard page separator */
.document-preview-container[b-vvems23iri]  .page:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #cbd5e1 25%, #cbd5e1 75%, transparent);
}

/* Page number indicator */
.document-preview-container[b-vvems23iri]  .page:not(:first-child)::before {
    content: "Page " counter(page);
    position: absolute;
    top: -1.5rem;
    right: 1rem;
    background: #64748b;
    color: white;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.document-preview-container[b-vvems23iri]  .page {
    counter-increment: page;
}

.document-preview-container[b-vvems23iri] {
    counter-reset: page;
}

/* Add subtle border to pages */
.document-preview-container[b-vvems23iri]  .page {
    border: 1px solid #e2e8f0;
}

/* Improve continuation page styling */
.document-preview-container[b-vvems23iri]  .continuation-page {
    margin-top: 1.5rem;
}

/* Add visual distinction between pages */
.document-preview-container[b-vvems23iri]  .page:nth-child(even) {
    transform: translateX(2px);
}

.document-preview-container[b-vvems23iri]  .page:nth-child(odd) {
    transform: translateX(-2px);
}
/* /Pages/Settings/EditorStyles/EditorStylesTable.razor.rz.scp.css */
/* /Pages/Settings/SettingsUsers.razor.rz.scp.css */
[b-f0yntfn5qk] .mud-table-row .mud-table-cell:first-child {
    width:80px;
}

[b-f0yntfn5qk] .table--users th .mud-checkbox {
    display: none !important
}
[b-f0yntfn5qk] .table--users .mud-table-container {
    overflow-x: hidden !important
}

/* /Pages/Subscriptions/ActivationCodes.razor.rz.scp.css */
[b-j5hj6l7hlq] .mud-input-control-input-container {
    width:100%;
}
/* /Pages/Subscriptions/Components/SubscriptionTypeDetail.razor.rz.scp.css */
/* =========================================================
   SubscriptionTypeDetail — structural styles only.
   Colours come from Tailwind `dark:` utilities in the razor so
   they track the `.dark` class toggled on <html>.
   Mirrors the shape used by SubscriptionForm.razor.css.
   ========================================================= */

[b-bypzplpw80] .h--48px {
    height: calc(100% - 48px) !important;
}

/* ── Section nav (left rail) ──────────────────────────── */

[b-bypzplpw80] .plan-nav__item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left !important;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background 0.12s;
}

[b-bypzplpw80] .plan-nav__item:hover {
    background: rgb(0 0 0 / 0.04);
}

:global(html.dark)[b-bypzplpw80]  .plan-nav__item:hover {
    background: rgb(255 255 255 / 0.04);
}

[b-bypzplpw80] .plan-nav__item--active {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

[b-bypzplpw80] .plan-nav__item--active:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

/* ── Card shell (shared with .std-card pattern) ──────── */

[b-bypzplpw80] .std-card {
    border-radius: 0.75rem;
    overflow: hidden;
}

[b-bypzplpw80] .std-card__header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.875rem;
}

[b-bypzplpw80] .std-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

[b-bypzplpw80] .std-card__body {
    padding: 0.875rem;
}

[b-bypzplpw80] .std-label {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
}

/* .sub-num numbered-step badge removed — the plan editor's cards aren't really a sequence,
   so the numbers added noise without meaning. The definition still lives in
   SubscriptionForm.razor.css where it's used for the subscription dialog's 1/2/3/4 steps. */

/* ── Right-rail buttons — single style, red variant for destructive. */
 
[b-bypzplpw80] .plan-rail-btn .mud-button-label {
    justify-content: flex-start;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

[b-bypzplpw80] .plan-rail-btn.plan-rail-btn--danger {
    border-color: rgb(239 68 68 / 0.45) !important;
    color: rgb(248 113 113) !important;
}

[b-bypzplpw80] .plan-rail-btn.plan-rail-btn--danger:hover {
    background: rgb(239 68 68 / 0.08) !important;
    border-color: rgb(239 68 68 / 0.7) !important;
}
/* /Pages/Subscriptions/SubscriptionGifts.razor.rz.scp.css */
[b-k88hdl13x8] .mud-input-control-input-container {
    width:100%;
}
/* /Pages/Subscriptions/SubscriptionTypeParents.razor.rz.scp.css */
[b-tasu8o9x8s] .mud-input-control-input-container {
    width:100%;
}


[b-tasu8o9x8s] .h--48px {
    height: calc(100% - 48px) !important;
}

/* ── Section nav (left rail) ──────────────────────────── */

[b-tasu8o9x8s] .plan-nav__item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left !important;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background 0.12s;
}

[b-tasu8o9x8s] .plan-nav__item:hover {
    background: rgb(0 0 0 / 0.04);
}

:global(html.dark)[b-tasu8o9x8s]  .plan-nav__item:hover {
    background: rgb(255 255 255 / 0.04);
}

[b-tasu8o9x8s] .plan-nav__item--active {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

[b-tasu8o9x8s] .plan-nav__item--active:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

/* ── Card shell (shared with .std-card pattern) ──────── */

[b-tasu8o9x8s] .std-card {
    border-radius: 0.75rem;
    overflow: hidden;
}

[b-tasu8o9x8s] .std-card__header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.875rem;
}

[b-tasu8o9x8s] .std-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

[b-tasu8o9x8s] .std-card__body {
    padding: 0.875rem;
}

[b-tasu8o9x8s] .std-label {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
}
/* /Pages/Subscriptions/SubscriptionTypesOverview.razor.rz.scp.css */
[b-r52c7el9h8] .h--48px {
    height: calc(100% - 48px)
}
/* /Shared/Layout/ParentLayout.razor.rz.scp.css */
[b-q9c96ck5a6] .hide-overflow {
    overflow-y: hidden;
}

[b-q9c96ck5a6] .profile-activator {
    position: relative;
    display: inline-block;
    line-height: 0;
}

[b-q9c96ck5a6] .profile-activator--update {
    border-radius: 9999px;
    box-shadow: 0 0 0 2px var(--mud-palette-info, #2196f3);
    transition: box-shadow .2s ease;
}

[b-q9c96ck5a6] .update-dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: var(--mud-palette-info, #2196f3);
    border: 2px solid var(--mud-palette-surface, #fff);
    pointer-events: none;
}

[b-q9c96ck5a6] .update-dot__pulse {
    position: absolute;
    inset: -2px;
    border-radius: 9999px;
    background: var(--mud-palette-info, #2196f3);
    opacity: .55;
    animation: update-dot-pulse-b-q9c96ck5a6 2.4s ease-out infinite;
}

@keyframes update-dot-pulse-b-q9c96ck5a6 {
    0%   { transform: scale(.9); opacity: .55; }
    70%  { transform: scale(2.2); opacity: 0; }
    100% { transform: scale(2.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    [b-q9c96ck5a6] .update-dot__pulse { animation: none; opacity: 0; }
}
