that carries the .pl-background-df class — the chrome (padding + radius) lives on that
wrapper and the inner img stays at intrinsic size. PlImageButton renders the
![]()
directly
as the DF root with the .pl-image-button-df class on the img — the chrome lives on the img
itself, and the inline width/height (no !important when FlowLayout cascades in, see
PlImageButton.razor) gets overridden by `width: auto` from this rule so the img can grow to
(intrinsic icon + padding). */
.pl-flex-item.pl-flex-bg-tile[b-xw8x3etdeb] {
width: auto !important;
height: auto !important;
}
.pl-flex-item.pl-flex-bg-tile[b-xw8x3etdeb] .pl-df {
position: static !important;
width: auto !important;
height: auto !important;
top: auto !important;
left: auto !important;
}
.pl-flex-item.pl-flex-bg-tile[b-xw8x3etdeb] .pl-background-df,
.pl-flex-item.pl-flex-bg-tile[b-xw8x3etdeb] .pl-image-button-df {
width: auto;
height: auto;
box-sizing: border-box;
border-radius: var(--pl-flex-bg-tile-radius, 4px);
padding: var(--pl-flex-bg-tile-padding, 8px);
}
.pl-flex-item.pl-flex-bg-tile[b-xw8x3etdeb] .pl-background-df {
display: flex;
align-items: center;
justify-content: center;
}
.pl-flex-item.pl-flex-bg-tile[b-xw8x3etdeb] .pl-background-df > img {
max-width: none;
max-height: none;
width: auto;
height: auto;
flex: 0 0 auto;
}
/* Pin Tag pills to their intrinsic content height. The wrapping .pl-flex-item is a flex
container with the default align-items: normal (→ stretch in a flex context), which would
otherwise grow the Tag to the wrapper's full cross-axis height (= row height when the body's
CrossAlignment is Stretch). The wrapper itself still stretches to the row so the
action-hover area in .pl-flex-da-action keeps covering the whole row — only the Tag inside
is centered.
The rule must live here rather than in PlFlexTagItem.razor.css because PlFlexTagItem's
root element IS the Ant
Blazor component, so the scope attribute never reaches the
rendered DOM and ::deep selectors from that file have no scoped ancestor to chain from. The
.pl-flex-item wrapper, on the other hand, carries this component's scope, so ::deep from
here resolves to `[b-XXX] .pl-flex-item .pl-flex-tag.ant-tag` and matches. */
.pl-flex-item[b-xw8x3etdeb] .pl-flex-tag.ant-tag {
align-self: center;
}
/* Round effect — matches the non-flex .pl-effect-round behaviour from pl-site.css for fields
inside flex DAs. The marker class .pl-flex-item-round is emitted on the wrapping
.pl-flex-item by PlFlexDataAreaBlock.RoundEffectClass when the DF declares an
EffectType.Round entry in its EffectsManager. Without this rule the flex-specific 4 px
radii defined above (`.pl-flex-da ::deep .pl-df` and the icon-tile chrome) win on
specificity over the global single-class .pl-effect-round and the Round effect appears
inert in flex layouts.
Placed at the end of the file so the source-order tie-break wins against the equal-
specificity icon-tile rule on .pl-background-df / .pl-image-button-df. */
.pl-flex-item.pl-flex-item-round[b-xw8x3etdeb] .pl-df,
.pl-flex-item.pl-flex-item-round[b-xw8x3etdeb] .pl-background-df,
.pl-flex-item.pl-flex-item-round[b-xw8x3etdeb] .pl-image-button-df {
border-radius: 50%;
}
/* /View/Components/BlockComponents/PlRootBlock.razor.rz.scp.css */
.pl-root[b-x1q6e85wz1] {
position: relative;
overflow: hidden;
min-width: 100%;
}
.pl-root.pl-main[b-x1q6e85wz1] {
overflow: visible !important;
z-index: var(--z-index-main-root);
}
.pl-root.pl-fixed-top[b-x1q6e85wz1],
.pl-root.pl-fixed-bottom[b-x1q6e85wz1],
.pl-root.pl-main-fixed-headers[b-x1q6e85wz1] {
background: white;
z-index: var(--z-index-fixed-root);
min-width: 100%;
width: fit-content;
}
.pl-root.pl-main-fixed-headers[b-x1q6e85wz1] {
background: #F3F4F5;
}
.pl-root.pl-fixed-bottom[b-x1q6e85wz1] {
margin-top: auto;
}
/* /View/Components/BlockComponents/PlRowHoverActions.razor.rz.scp.css */
.pl-row-hover-actions[b-y44zb0zx3a] {
position: absolute;
display: flex;
gap: 4px;
z-index: calc(var(--z-index-focus-field) + 1);
pointer-events: auto;
animation: pl-row-hover-fade-in-b-y44zb0zx3a 0.5s ease;
}
@keyframes pl-row-hover-fade-in-b-y44zb0zx3a {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.pl-row-hover-btn[b-y44zb0zx3a] {
width: 20px;
height: 20px;
box-sizing: border-box;
border: 1px solid var(--color-neutral-light, #d2d0ce);
border-radius: 3px;
background: var(--color-background, #fff);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
color: var(--color-base-black, #0A090B);
opacity: 0.8;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.pl-row-hover-btn:hover[b-y44zb0zx3a] {
opacity: 1;
transform: scale(1.1);
}
/* Drop the outline on mouse-click focus, but keep the keyboard :focus-visible ring. */
.pl-row-hover-btn:focus:not(:focus-visible)[b-y44zb0zx3a] {
outline: none;
box-shadow: none;
}
[b-y44zb0zx3a] .mud-menu-activator {
all: unset;
display: contents;
}
.pl-row-hover-btn[b-y44zb0zx3a] .anticon {
color: var(--color-base-black, #0A090B);
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
padding: 0;
margin: 0;
}
.pl-row-hover-btn[b-y44zb0zx3a] .anticon svg {
width: 14px;
height: 14px;
display: block;
shape-rendering: geometricPrecision;
}
/* Bolder strokes for the "+" glyph. */
.pl-row-hover-insert[b-y44zb0zx3a] .anticon svg path {
stroke: currentColor;
stroke-width: 60;
stroke-linecap: round;
stroke-linejoin: round;
paint-order: stroke fill;
}
/* /View/Components/BlockComponents/PlScaleTitleBlock.razor.rz.scp.css */
.pl-scale-title-block[b-nhy20a0lf1] {
position: absolute;
overflow: hidden;
cursor: default;
}
/* /View/Components/BlockComponents/PlTitleBlock.razor.rz.scp.css */
.pl-titleblock[b-hczf3j2ypy],
.pl-titleblock > div[b-hczf3j2ypy] {
position: absolute;
}
/* /View/Components/BlockComponents/PlWindow.razor.rz.scp.css */
.pl-window[b-lm9wwcz6h1] {
display: flex;
flex-direction: column;
min-height: 100%;
width: fit-content;
}
.pl-window.pl-window-stretch[b-lm9wwcz6h1] {
width: auto;
}
.pl-window-content[b-lm9wwcz6h1] {
width: fit-content;
flex: 1 1 auto;
overflow: hidden;
min-height: 0;
}
.pl-window-content.pl-window-content-stretch[b-lm9wwcz6h1] {
width: auto;
}
/* /View/Components/ChartComponents/PlChartWrapper.razor.rz.scp.css */
.pl-chart-wrapper[b-y5imycoxw7] {
width: 100%;
height: 100%
}
/* PlChart's root .pl-chart-holder is styled as `display: inline-block !important` in
PlChart.razor.css, which crushes it to ApexCharts' content size (300×150 fallback) and
ignores the wrapper's full 100%×100% box. Reaching across the component boundary with
::deep flips it to a block that fills both axes — the wrapper itself is already 100% of
the .pl-df cell, and the chart-specific width:100% branch in PlDataField.PositionStyle
keeps that cell from collapsing to the same 300 px fallback. The !important is required
to outrank the inline-block !important in PlChart.razor.css. */
[b-y5imycoxw7] .pl-chart-holder {
display: block !important;
height: 100% !important;
}
/* /View/Components/DashboardComponents/Customize/PlDashboardLeafProperties.razor.rz.scp.css */
.pl-dashboard-property-group[b-ni7olq9tj4] {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 12px;
}
.pl-dashboard-property-label[b-ni7olq9tj4] {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
color: #444;
}
.pl-dashboard-property-label-text[b-ni7olq9tj4] {
font-size: 12px;
color: #444;
}
.pl-dashboard-property-label input[type="text"][b-ni7olq9tj4],
.pl-dashboard-property-label input[type="number"][b-ni7olq9tj4],
.pl-dashboard-property-label select[b-ni7olq9tj4] {
padding: 6px 8px;
border: 1px solid rgba(0, 0, 0, 0.18);
border-radius: 4px;
font-size: 13px;
}
.pl-dashboard-width-options[b-ni7olq9tj4] {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
}
.pl-dashboard-width-options input[type="number"][b-ni7olq9tj4] {
width: 56px;
margin-left: 6px;
padding: 3px 6px;
border: 1px solid rgba(0, 0, 0, 0.18);
border-radius: 3px;
}
/* /View/Components/DashboardComponents/Customize/PlDashboardSidebar.razor.rz.scp.css */
.pl-dashboard-sidebar[b-9zg9ixduaz] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 320px;
background: white;
border-left: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
z-index: 10;
}
.pl-dashboard-sidebar-header[b-9zg9ixduaz] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
font-weight: 600;
}
.pl-dashboard-sidebar-title[b-9zg9ixduaz] {
font-size: 14px;
}
.pl-dashboard-sidebar-close[b-9zg9ixduaz] {
width: 24px;
height: 24px;
border: none;
background: transparent;
cursor: pointer;
font-size: 18px;
color: #666;
border-radius: 4px;
}
.pl-dashboard-sidebar-close:hover[b-9zg9ixduaz] {
background: rgba(0, 0, 0, 0.06);
}
.pl-dashboard-sidebar-body[b-9zg9ixduaz] {
flex: 1 1 auto;
overflow: auto;
padding: 12px 14px;
}
.pl-dashboard-sidebar-footer[b-9zg9ixduaz] {
padding: 10px 14px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.pl-dashboard-sidebar-delete[b-9zg9ixduaz] {
width: 100%;
height: 32px;
border: 1px solid rgba(180, 0, 0, 0.4);
background: rgba(180, 0, 0, 0.05);
color: rgb(140, 0, 0);
border-radius: 4px;
cursor: pointer;
font-size: 13px;
}
.pl-dashboard-sidebar-delete:hover[b-9zg9ixduaz] {
background: rgba(180, 0, 0, 0.12);
}
/* /View/Components/DashboardComponents/Customize/PlTileEditOverlay.razor.rz.scp.css */
/* Customize-mode chrome on dashboard tiles. Mirrors the design system's
Dashboard.jsx WidgetChrome: 1.5px dashed light-blue outline, faint blue
tint, "Verschieben" drag pill, size segmented control, square red X. */
.pl-tile-edit-overlay[b-o1hawvuar1] {
position: relative;
cursor: default;
outline: 1.5px dashed #9BD1EE;
outline-offset: -2px;
transition: outline-color 120ms ease-in-out;
min-width: 0;
box-sizing: border-box;
border-radius: 5px;
}
.pl-tile-edit-overlay.is-selected[b-o1hawvuar1] {
outline: 2px solid var(--pl-color-primary, #0070B5);
}
.pl-tile-edit-overlay-tint[b-o1hawvuar1] {
position: absolute;
inset: 0;
background: rgba(230, 244, 251, 0.15);
border-radius: 5px;
pointer-events: none;
z-index: 1;
}
.pl-tile-edit-overlay-toolbar[b-o1hawvuar1] {
position: absolute;
top: 6px;
z-index: 6;
display: inline-flex;
align-items: center;
gap: 4px;
}
.pl-tile-edit-overlay-toolbar-left[b-o1hawvuar1] {
left: 6px;
}
.pl-tile-edit-overlay-toolbar-right[b-o1hawvuar1] {
right: 6px;
}
/* Drag handle pill. Only this element is draggable — the rest of the tile is
selectable but inert for drag, matching the design's "Ziehen zum Verschieben"
affordance. */
.pl-tile-edit-overlay-drag[b-o1hawvuar1] {
height: 24px;
padding: 0 8px;
background: #fff;
border: 1px solid #9BD1EE;
border-radius: 3px;
color: #0161B8;
font-family: Asap, Roboto, sans-serif;
font-size: 11px;
font-weight: 500;
line-height: 1;
cursor: grab;
user-select: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
display: inline-flex;
align-items: center;
gap: 4px;
}
.pl-tile-edit-overlay-drag:hover[b-o1hawvuar1] {
background: #FAFAFC;
}
.pl-tile-edit-overlay-drag:active[b-o1hawvuar1] {
cursor: grabbing;
}
/* Inline size segmented control. */
.pl-tile-edit-overlay-size[b-o1hawvuar1] {
height: 24px;
display: inline-flex;
background: #fff;
border: 1px solid #C4CBDA;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.pl-tile-edit-overlay-size button[b-o1hawvuar1] {
min-width: 28px;
height: 100%;
border: 0;
border-left: 1px solid #E5E8ED;
background: #fff;
color: #495769;
font-family: Asap, Roboto, sans-serif;
font-size: 11px;
font-weight: 500;
cursor: pointer;
padding: 0 4px;
line-height: 1;
}
.pl-tile-edit-overlay-size button:first-child[b-o1hawvuar1] {
border-left: 0;
}
.pl-tile-edit-overlay-size button.is-active[b-o1hawvuar1] {
background: #E6F4FB;
color: #0161B8;
}
.pl-tile-edit-overlay-size button:hover:not(.is-active)[b-o1hawvuar1] {
background: #FAFAFC;
}
/* Remove button — square, white background, light-red border, red glyph. */
.pl-tile-edit-overlay-remove[b-o1hawvuar1] {
width: 24px;
height: 24px;
padding: 0;
border: 1px solid #F7B1B1;
border-radius: 3px;
background: #fff;
color: #C22704;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
display: inline-flex;
align-items: center;
justify-content: center;
}
.pl-tile-edit-overlay-remove:hover[b-o1hawvuar1] {
background: #FFEDE6;
}
/* Drop indicators — solid blue 4 px bars rendered OUTSIDE the tile so they
don't bleed across the tile's chrome. */
.pl-tile-drop-indicator[b-o1hawvuar1] {
position: absolute;
background: #009FE3;
border-radius: 2px;
pointer-events: none;
z-index: 7;
box-shadow: 0 0 8px rgba(0, 159, 227, 0.4);
}
.pl-tile-drop-indicator.left-edge[b-o1hawvuar1] {
left: -10px;
top: 0;
bottom: 0;
width: 4px;
}
.pl-tile-drop-indicator.right-edge[b-o1hawvuar1] {
right: -10px;
top: 0;
bottom: 0;
width: 4px;
}
.pl-tile-drop-indicator.top-edge[b-o1hawvuar1] {
top: -10px;
left: 0;
right: 0;
height: 4px;
}
.pl-tile-drop-indicator.bottom-edge[b-o1hawvuar1] {
bottom: -10px;
left: 0;
right: 0;
height: 4px;
}
/* Ambiguous-below: two stacked indicators below the tile. Primary (blue, new
Container) on top, accent (orange, new ColumnSet column) below. Active branch
has full opacity + brighter shadow; inactive branch is dimmed. */
.pl-tile-drop-indicator.ambiguous-primary[b-o1hawvuar1],
.pl-tile-drop-indicator.ambiguous-primary-active[b-o1hawvuar1] {
left: 0;
right: 0;
bottom: -16px;
height: 4px;
background: #009FE3;
}
.pl-tile-drop-indicator.ambiguous-primary[b-o1hawvuar1] {
opacity: 0.35;
box-shadow: none;
}
.pl-tile-drop-indicator.ambiguous-primary-active[b-o1hawvuar1] {
box-shadow: 0 0 10px rgba(0, 159, 227, 0.6);
}
.pl-tile-drop-indicator.ambiguous-accent[b-o1hawvuar1],
.pl-tile-drop-indicator.ambiguous-accent-active[b-o1hawvuar1] {
left: 0;
right: 0;
bottom: -28px;
height: 4px;
background: #F19822;
}
.pl-tile-drop-indicator.ambiguous-accent[b-o1hawvuar1] {
opacity: 0.35;
box-shadow: none;
}
.pl-tile-drop-indicator.ambiguous-accent-active[b-o1hawvuar1] {
box-shadow: 0 0 10px rgba(241, 152, 34, 0.6);
}
/* /View/Components/DashboardComponents/PlEmbeddedModule.razor.rz.scp.css */
/* Embedded modules whose internals are flex-layouted report DocumentSize 0 (their content sizes
itself to the parent rather than to authored pixels). The default `width: fit-content` on
.pl-window-content then evaluates to 0 because the flex chain has no definite anchor. Force
`min-width: 100%` here so when the host cell stretches (PlFlexDataAreaBlock detects flex-
layouted embedded modules and switches the wrapper from pl-flex-size-auto to
pl-flex-size-stretch), pl-window-content fills the cell and pl-main has a definite parent to
size against. Pixel-layouted modules carry their DocumentSize as inline width on pl-main, so
pl-window-content's fit-content still anchors there — min-width: 100% never exceeds the
pixel anchor in that case. */
[b-tp4tv8n7yd] .pl-window-content {
min-width: 100%;
}
/* PlModule's .pl-module-container no longer carries an inline height (the height: 100% used to be
inline; it has moved to a `.pl-module-container-standalone` CSS class that we deliberately do
not emit for embedded use). Re-establish the fill behaviour here so the wrapper's height: 100%
propagates into the module container. */
[b-tp4tv8n7yd] .pl-module-container {
height: 100%;
}
/* /View/Components/DashboardComponents/PlPersonalDashboard.razor.rz.scp.css */
/* Personal demo dashboard. Self-contained scoped CSS — disclaimer, alert, KPI cards,
sections, watchlist rows, plus the chart widgets specific to this layout (donut,
horizontal bar list, vertical bar chart). */
.pl-personal-dashboard[b-869mfecerq] {
height: 100%;
overflow: auto;
background-color: var(--pl-neutral-bg-color-bg-layout, #F2F4F7);
font-family: var(--pl-font-family-base, 'Asap', sans-serif);
color: var(--pl-neutral-text-color-text, #0D1A26);
}
.pl-personal-dashboard .pl-demo-dashboard__body[b-869mfecerq] {
padding: 16px 24px 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* ---- shared card / typography ---- */
.pl-personal-dashboard .pl-demo-card[b-869mfecerq] {
background-color: var(--pl-neutral-bg-color-bg-container, #FFFFFF);
border: 1px solid var(--pl-neutral-border-color-border, #C4CBDA);
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02);
}
.pl-personal-dashboard .pl-text--success[b-869mfecerq] { color: var(--pl-semantic-success-color-success-active, #21945E); }
.pl-personal-dashboard .pl-text--error[b-869mfecerq] { color: var(--pl-semantic-error-color-error, #C22704); }
.pl-personal-dashboard .pl-text--warning[b-869mfecerq] { color: var(--pl-semantic-warning-color-warning, #F19822); }
.pl-personal-dashboard .pl-text--info[b-869mfecerq] { color: var(--pl-semantic-info-color-info, #0070B5); }
.pl-personal-dashboard .pl-text--link[b-869mfecerq] { color: var(--pl-semantic-info-color-info, #0070B5); }
.pl-personal-dashboard .pl-text--secondary[b-869mfecerq] { color: var(--pl-neutral-text-color-text-secondary, #495769); }
.pl-personal-dashboard .pl-text--tertiary[b-869mfecerq] { color: var(--pl-neutral-text-color-text-tertiary, #6A778B); }
/* ---- alert banner ---- */
.pl-personal-dashboard .pl-demo-alert[b-869mfecerq] {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 9px 16px;
background-color: var(--pl-semantic-warning-color-warning-bg, #FFFBF0);
border: 1px solid var(--pl-semantic-warning-color-warning-border, #FFDF9E);
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02);
font: inherit;
font-size: 14px;
color: inherit;
text-align: left;
cursor: pointer;
}
.pl-personal-dashboard .pl-demo-alert:disabled[b-869mfecerq] {
cursor: default;
}
.pl-personal-dashboard .pl-demo-alert__lead[b-869mfecerq] {
display: flex;
align-items: center;
gap: 8px;
}
.pl-personal-dashboard .pl-demo-alert__lead i[b-869mfecerq] {
color: var(--pl-semantic-warning-color-warning, #F19822);
}
.pl-personal-dashboard .pl-demo-alert__chevron[b-869mfecerq] {
color: var(--pl-neutral-text-color-text-tertiary, #6A778B);
font-size: 12px;
}
/* ---- KPI row ---- */
.pl-personal-dashboard .pl-demo-kpis[b-869mfecerq] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.pl-personal-dashboard .pl-demo-kpi[b-869mfecerq] {
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
cursor: pointer;
}
.pl-personal-dashboard .pl-demo-kpi:focus[b-869mfecerq] {
border-color: var(--pl-semantic-info-color-info-border-hover, #0DB5F2);
outline: none;
}
.pl-personal-dashboard .pl-demo-kpi__label[b-869mfecerq],
.pl-personal-dashboard .pl-demo-kpi__label-row[b-869mfecerq] {
font-size: 14px;
color: var(--pl-neutral-text-color-text-secondary, #495769);
}
.pl-personal-dashboard .pl-demo-kpi__label-row[b-869mfecerq] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.pl-personal-dashboard .pl-demo-kpi__value-row[b-869mfecerq] {
display: flex;
align-items: baseline;
gap: 8px;
}
.pl-personal-dashboard .pl-demo-kpi__value[b-869mfecerq] {
font-size: 28px;
line-height: 32px;
font-weight: 600;
color: var(--pl-neutral-text-color-text, #0D1A26);
}
.pl-personal-dashboard .pl-demo-kpi__hint[b-869mfecerq] {
font-size: 14px;
}
/* ---- 2-col grid ---- */
.pl-personal-dashboard .pl-demo-grid[b-869mfecerq] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-items: start;
}
.pl-personal-dashboard .pl-demo-stack[b-869mfecerq] {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
/* ---- generic section ---- */
.pl-personal-dashboard .pl-demo-section[b-869mfecerq] {
display: flex;
flex-direction: column;
}
.pl-personal-dashboard .pl-demo-section__header[b-869mfecerq] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 24px;
border-bottom: 1px solid var(--pl-neutral-border-color-border-secondary, #DCE0EA);
}
.pl-personal-dashboard .pl-demo-section__title[b-869mfecerq] {
margin: 0;
font-size: 20px;
line-height: 28px;
font-weight: 600;
color: var(--pl-neutral-text-color-text, #0D1A26);
}
.pl-personal-dashboard .pl-demo-section__body[b-869mfecerq] {
flex: 1;
padding: 8px;
}
.pl-personal-dashboard .pl-demo-section__body--padded[b-869mfecerq] {
padding: 16px 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.pl-personal-dashboard .pl-demo-section__footer[b-869mfecerq] {
padding: 0 24px 16px;
}
/* ---- recent rows (same look as variant 1) ---- */
.pl-personal-dashboard .pl-demo-row[b-869mfecerq] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
}
.pl-personal-dashboard .pl-demo-row:focus[b-869mfecerq] {
background: linear-gradient(99deg, #F2F4F7 21%, #E2E7EE 47%);
outline: none;
}
.pl-personal-dashboard .pl-demo-row:focus .pl-demo-row__title[b-869mfecerq] {
color: var(--pl-semantic-info-color-info, #0070B5);
}
.pl-personal-dashboard .pl-demo-row__main[b-869mfecerq] {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.pl-personal-dashboard .pl-demo-row__title[b-869mfecerq] {
font-size: 16px;
line-height: 24px;
font-weight: 500;
color: var(--pl-neutral-text-color-text, #0D1A26);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pl-personal-dashboard .pl-demo-row__meta[b-869mfecerq] {
font-size: 14px;
color: var(--pl-neutral-text-color-text-tertiary, #6A778B);
white-space: nowrap;
}
.pl-personal-dashboard .pl-demo-icon-tile[b-869mfecerq] {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--pl-neutral-fill-color-fill-tertiary, #E9ECF1);
border-radius: 4px;
color: var(--pl-neutral-text-color-text-secondary, #495769);
font-size: 14px;
}
/* ---- tag / select / button ---- */
.pl-personal-dashboard .pl-demo-tag[b-869mfecerq] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 8px;
height: 20px;
background-color: var(--pl-neutral-fill-color-fill-quaternary, #F2F4F7);
border: 1px solid var(--pl-neutral-border-color-border, #C4CBDA);
border-radius: 3px;
font-size: 12px;
color: var(--pl-neutral-text-color-text-secondary, #495769);
white-space: nowrap;
}
.pl-personal-dashboard .pl-demo-tag--success[b-869mfecerq] {
background-color: var(--pl-semantic-success-color-success-bg, #EBFAEB);
border-color: var(--pl-semantic-success-color-success-border, #A8E0AF);
color: var(--pl-semantic-success-color-success, #32B968);
font-weight: 600;
}
.pl-personal-dashboard .pl-demo-tag--error[b-869mfecerq] {
background-color: var(--pl-semantic-error-color-error-bg, #FFEDE6);
border-color: var(--pl-semantic-error-color-error-border, #FF9063);
color: var(--pl-semantic-error-color-error, #C22704);
}
.pl-personal-dashboard .pl-demo-select[b-869mfecerq] {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 12px;
height: 32px;
min-width: 100px;
background-color: var(--pl-neutral-bg-color-bg-container, #FFFFFF);
border: 1px solid var(--pl-neutral-border-color-border, #C4CBDA);
border-radius: 4px;
font-size: 14px;
color: var(--pl-neutral-text-color-text, #0D1A26);
cursor: not-allowed;
}
.pl-personal-dashboard .pl-demo-select i[b-869mfecerq] {
color: var(--pl-neutral-text-color-text-tertiary, #6A778B);
font-size: 12px;
}
.pl-personal-dashboard .pl-demo-button[b-869mfecerq] {
margin-top: 8px;
padding: 8px 15px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 40px;
background-color: var(--pl-neutral-bg-color-bg-container, #FFFFFF);
border: 1px solid var(--pl-neutral-border-color-border, #C4CBDA);
border-radius: 4px;
box-shadow: 0 2px 0 rgba(18, 46, 94, 0.07);
font-size: 16px;
color: var(--pl-neutral-text-color-text, #0D1A26);
cursor: pointer;
}
.pl-personal-dashboard .pl-demo-button:disabled[b-869mfecerq] {
cursor: not-allowed;
}
.pl-personal-dashboard .pl-demo-button__arrow[b-869mfecerq] {
transform: rotate(45deg);
font-size: 12px;
}
/* ---- watchlist entries (taller list) ---- */
.pl-personal-dashboard .pl-demo-watch[b-869mfecerq] {
border: 1px solid #E5E8ED;
border-radius: 4px;
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.pl-personal-dashboard .pl-demo-watch__head[b-869mfecerq] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.pl-personal-dashboard .pl-demo-watch__title[b-869mfecerq] {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.pl-personal-dashboard .pl-demo-watch__name[b-869mfecerq] {
font-size: 16px;
font-weight: 600;
color: var(--pl-neutral-text-color-text, #0D1A26);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pl-personal-dashboard .pl-demo-watch__meta[b-869mfecerq] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 14px;
}
.pl-personal-dashboard .pl-demo-progress[b-869mfecerq] {
height: 6px;
background-color: var(--pl-neutral-fill-color-fill-quaternary, #F2F4F7);
border-radius: 9999px;
overflow: hidden;
}
.pl-personal-dashboard .pl-demo-progress__fill[b-869mfecerq] {
height: 100%;
background-color: var(--pl-semantic-primary-color-primary, #0070B5);
border-radius: 9999px;
}
/* ---- horizontal bar list (Manager) — labels rendered in HTML next to the
ApexChart so the avatar circles + names line up with each bar ---- */
.pl-demo-hbar-list[b-869mfecerq] {
display: grid;
grid-template-rows: repeat(5, 1fr);
gap: 0;
height: 220px;
padding: 6px 0;
box-sizing: border-box;
}
.pl-demo-hbar-row[b-869mfecerq] {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--pl-neutral-text-color-text-secondary, #495769);
min-width: 0;
white-space: nowrap;
}
.pl-demo-hbar-row__name[b-869mfecerq] {
overflow: hidden;
text-overflow: ellipsis;
}
.pl-demo-hbar-chart[b-869mfecerq] {
width: 100%;
}
.pl-demo-hbar-chart[b-869mfecerq] .apexcharts-canvas {
margin-left: -10px; /* trim Apex's default left padding so bars start near the labels */
}
.pl-demo-avatar[b-869mfecerq] {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
background-color: var(--pl-neutral-fill-color-fill-tertiary, #E9ECF1);
flex-shrink: 0;
}
/* The Manager card body is a vertical stack — labels grid on top of bars chart */
.pl-demo-card .pl-demo-section__body--padded:has(.pl-demo-hbar-list)[b-869mfecerq] {
display: grid;
grid-template-columns: 180px 1fr;
grid-template-rows: 1fr auto;
gap: 12px;
align-items: stretch;
}
.pl-demo-card .pl-demo-section__body--padded:has(.pl-demo-hbar-list) .pl-demo-hbar-list[b-869mfecerq] {
grid-column: 1;
grid-row: 1;
}
.pl-demo-card .pl-demo-section__body--padded:has(.pl-demo-hbar-list) .pl-demo-hbar-chart[b-869mfecerq] {
grid-column: 2;
grid-row: 1;
}
.pl-demo-card .pl-demo-section__body--padded:has(.pl-demo-hbar-list) .pl-demo-button[b-869mfecerq] {
grid-column: 1 / -1;
grid-row: 2;
}
/* ---- donut chart (ApexChart) + center labels + side legend ---- */
.pl-demo-chart-row[b-869mfecerq] {
flex-direction: row !important;
align-items: center;
gap: 24px !important;
}
.pl-demo-donut-host[b-869mfecerq] {
position: relative;
width: 200px;
height: 200px;
flex-shrink: 0;
}
.pl-demo-donut-host__center[b-869mfecerq] {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
}
.pl-demo-donut__label[b-869mfecerq] {
font-size: 14px;
color: var(--pl-neutral-text-color-text-tertiary, #6A778B);
}
.pl-demo-donut__value[b-869mfecerq] {
font-size: 28px;
font-weight: 600;
line-height: 32px;
color: var(--pl-neutral-text-color-text, #0D1A26);
}
.pl-demo-legend[b-869mfecerq] {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 14px;
flex: 1;
min-width: 0;
}
.pl-demo-legend__title[b-869mfecerq] {
font-weight: 600;
margin-bottom: 4px;
color: var(--pl-neutral-text-color-text, #0D1A26);
}
.pl-demo-legend__row[b-869mfecerq] {
display: grid;
grid-template-columns: 12px 1fr auto;
align-items: center;
gap: 8px;
}
.pl-demo-legend__dot[b-869mfecerq] {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.pl-demo-legend__label[b-869mfecerq] {
color: var(--pl-neutral-text-color-text-secondary, #495769);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pl-demo-legend__value[b-869mfecerq] {
font-weight: 600;
color: var(--pl-neutral-text-color-text, #0D1A26);
}
/* ---- responsive collapse ---- */
@media (max-width: 1100px) {
.pl-personal-dashboard .pl-demo-kpis[b-869mfecerq] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pl-personal-dashboard .pl-demo-grid[b-869mfecerq] {
grid-template-columns: minmax(0, 1fr);
}
.pl-demo-chart-row[b-869mfecerq] {
flex-direction: column !important;
}
.pl-demo-hbar[b-869mfecerq] {
grid-template-columns: 140px 1fr auto;
}
}
/* /View/Components/DashboardComponents/PlPortfolioDashboard.razor.rz.scp.css */
/* Portfolio demo dashboard. Self-contained scoped CSS — disclaimer, KPI cards,
sections, plus the portfolio-specific widgets (overview cards, radar legend,
risks, governance rows, watchlist). */
.pl-portfolio-dashboard[b-cr7slcry48] {
height: 100%;
overflow: auto;
background-color: var(--pl-neutral-bg-color-bg-layout, #F2F4F7);
font-family: var(--pl-font-family-base, 'Asap', sans-serif);
color: var(--pl-neutral-text-color-text, #0D1A26);
}
.pl-portfolio-dashboard .pl-demo-dashboard__body[b-cr7slcry48] {
padding: 16px 24px 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* ---- shared card / typography ---- */
.pl-portfolio-dashboard .pl-demo-card[b-cr7slcry48] {
background-color: var(--pl-neutral-bg-color-bg-container, #FFFFFF);
border: 1px solid #E5E8ED;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
overflow: clip;
}
.pl-portfolio-dashboard .pl-text--success[b-cr7slcry48] { color: var(--pl-semantic-success-color-success-active, #21945E); }
.pl-portfolio-dashboard .pl-text--error[b-cr7slcry48] { color: var(--pl-semantic-error-color-error, #C22704); }
.pl-portfolio-dashboard .pl-text--warning[b-cr7slcry48] { color: var(--pl-semantic-warning-color-warning, #F19822); }
.pl-portfolio-dashboard .pl-text--info[b-cr7slcry48] { color: var(--pl-semantic-info-color-info, #0070B5); }
.pl-portfolio-dashboard .pl-text--secondary[b-cr7slcry48] { color: var(--pl-neutral-text-color-text-secondary, #495769); }
/* ---- KPI row ---- */
.pl-portfolio-dashboard .pl-demo-kpis[b-cr7slcry48] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.pl-portfolio-dashboard .pl-demo-kpi[b-cr7slcry48] {
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
cursor: pointer;
}
.pl-portfolio-dashboard .pl-demo-kpi:focus[b-cr7slcry48] {
border-color: var(--pl-semantic-info-color-info-border-hover, #0DB5F2);
outline: none;
}
.pl-portfolio-dashboard .pl-demo-kpi__label[b-cr7slcry48] {
font-size: 14px;
color: var(--pl-neutral-text-color-text-secondary, #495769);
}
.pl-portfolio-dashboard .pl-demo-kpi__value-row[b-cr7slcry48] {
display: flex;
align-items: baseline;
gap: 8px;
}
.pl-portfolio-dashboard .pl-demo-kpi__value[b-cr7slcry48] {
font-size: 28px;
line-height: 32px;
font-weight: 600;
color: var(--pl-neutral-text-color-text, #0D1A26);
}
.pl-portfolio-dashboard .pl-demo-kpi__delta[b-cr7slcry48] {
font-size: 13px;
font-weight: 600;
}
/* ---- two-column grid (left wide, right narrow) ---- */
.pl-portfolio-dashboard .pl-demo-grid[b-cr7slcry48] {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.pl-portfolio-dashboard .pl-portfolio-main[b-cr7slcry48],
.pl-portfolio-dashboard .pl-portfolio-side[b-cr7slcry48] {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
/* ---- section ---- */
.pl-portfolio-dashboard .pl-demo-section[b-cr7slcry48] {
display: flex;
flex-direction: column;
}
.pl-portfolio-dashboard .pl-demo-section__header[b-cr7slcry48] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: 49px;
padding: 0 16px;
border-bottom: 1px solid #E5E8ED;
}
.pl-portfolio-dashboard .pl-demo-section__title[b-cr7slcry48] {
margin: 0;
font-size: 16px;
line-height: 24px;
font-weight: 600;
color: var(--pl-neutral-text-color-text, #0D1A26);
}
.pl-portfolio-dashboard .pl-portfolio-section__icon[b-cr7slcry48] {
color: var(--pl-neutral-text-color-text-tertiary, #6A778B);
font-size: 14px;
}
.pl-portfolio-dashboard .pl-portfolio-section__icon--star[b-cr7slcry48] {
color: var(--pl-semantic-warning-color-warning, #F19822);
}
.pl-portfolio-dashboard .pl-demo-section__body[b-cr7slcry48] {
flex: 1;
padding: 8px;
}
.pl-portfolio-dashboard .pl-demo-section__body--padded[b-cr7slcry48] {
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* ---- portfolio cards (Figma node 870:21406) ---- */
.pl-portfolio-card[b-cr7slcry48] {
border: 1px solid rgba(0, 159, 227, 0.2);
border-radius: 10px;
padding: 17px;
background: linear-gradient(90deg, rgba(0, 159, 227, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
display: flex;
flex-direction: column;
gap: 16px;
}
.pl-portfolio-card__head[b-cr7slcry48] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.pl-portfolio-card__title-block[b-cr7slcry48] {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.pl-portfolio-card__title[b-cr7slcry48] {
font-size: 18px;
line-height: 28px;
font-weight: 600;
color: var(--pl-neutral-text-color-text, #0D1A26);
}
.pl-portfolio-card__meta[b-cr7slcry48] {
font-size: 14px;
line-height: 20px;
color: var(--pl-neutral-text-color-text-tertiary, #6A778B);
}
.pl-portfolio-card__budget-block[b-cr7slcry48] {
text-align: right;
flex-shrink: 0;
}
.pl-portfolio-card__budget[b-cr7slcry48] {
font-size: 24px;
line-height: 32px;
font-weight: 700;
color: #009FE3;
}
.pl-portfolio-card__budget-label[b-cr7slcry48] {
font-size: 12px;
line-height: 16px;
color: var(--pl-neutral-text-color-text-tertiary, #6A778B);
}
.pl-portfolio-card__progress-row[b-cr7slcry48] {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
}
.pl-portfolio-card__progress-row > :first-child[b-cr7slcry48] {
color: var(--pl-neutral-text-color-text-tertiary, #6A778B);
}
.pl-portfolio-card__progress-value[b-cr7slcry48] {
font-weight: 600;
color: var(--pl-neutral-text-color-text, #0D1A26);
}
/* ---- progress bar (card progress) ---- */
.pl-portfolio-card .pl-demo-progress[b-cr7slcry48] {
height: 12px;
background-color: #E5E8ED;
border-radius: 9999px;
overflow: hidden;
}
.pl-portfolio-card .pl-demo-progress__fill[b-cr7slcry48] {
height: 100%;
background: linear-gradient(90deg, #009FE3 0%, #00375B 100%);
border-radius: 9999px;
}
/* ---- radar chart ---- */
.pl-portfolio-radar[b-cr7slcry48] {
align-items: center;
}
.pl-portfolio-radar-legend[b-cr7slcry48] {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
font-size: 13px;
color: var(--pl-neutral-text-color-text-secondary, #495769);
}
.pl-portfolio-radar-legend__row[b-cr7slcry48] {
display: inline-flex;
align-items: center;
gap: 6px;
}
.pl-portfolio-dashboard .pl-demo-legend__dot[b-cr7slcry48] {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
/* ---- side column: recent + watchlist list rows ---- */
.pl-portfolio-side__list[b-cr7slcry48] {
gap: 8px;
}
.pl-portfolio-recent[b-cr7slcry48] {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px;
border-radius: 4px;
}
.pl-portfolio-recent__title[b-cr7slcry48] {
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: var(--pl-neutral-text-color-text, #0D1A26);
}
.pl-portfolio-recent__kind[b-cr7slcry48] {
font-size: 12px;
line-height: 16px;
}
.pl-portfolio-watch[b-cr7slcry48] {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 14px;
color: var(--pl-neutral-text-color-text, #0D1A26);
}
.pl-portfolio-watch__star[b-cr7slcry48] {
color: var(--pl-semantic-warning-color-warning, #F19822);
font-size: 12px;
}
/* ---- risks (Figma node 870:21734) ---- */
.pl-portfolio-risk[b-cr7slcry48] {
background-color: #FEF2F2;
border: 1px solid #FFC9C9;
border-radius: 4px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.pl-portfolio-risk__title[b-cr7slcry48] {
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: var(--pl-neutral-text-color-text, #0D1A26);
}
.pl-portfolio-risk__desc[b-cr7slcry48] {
font-size: 12px;
line-height: 16px;
color: var(--pl-neutral-text-color-text-secondary, #495769);
}
.pl-portfolio-risk__footer[b-cr7slcry48] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 4px;
}
.pl-portfolio-risk-tag[b-cr7slcry48] {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 8px;
border-radius: 4px;
font-size: 12px;
line-height: 16px;
white-space: nowrap;
}
.pl-portfolio-risk-tag--high[b-cr7slcry48] {
background-color: #FFE2E2;
color: #9F0712;
}
.pl-portfolio-risk-tag--medium[b-cr7slcry48] {
background-color: #FEF9C2;
color: #894B00;
}
.pl-portfolio-risk__trend[b-cr7slcry48] {
font-size: 12px;
line-height: 16px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.pl-portfolio-risk__trend--up[b-cr7slcry48] {
color: #E7000B;
}
.pl-portfolio-risk__trend--stable[b-cr7slcry48] {
color: #6A778B;
}
/* ---- Portfolio-Wert ---- */
.pl-portfolio-value__total[b-cr7slcry48] {
text-align: center;
padding: 12px 0 8px;
border-bottom: 1px solid var(--pl-neutral-border-color-border-secondary, #DCE0EA);
}
.pl-portfolio-value__total-amount[b-cr7slcry48] {
font-size: 28px;
font-weight: 600;
color: var(--pl-semantic-info-color-info, #0070B5);
}
.pl-portfolio-value__total-label[b-cr7slcry48] {
font-size: 13px;
margin-top: 2px;
}
.pl-portfolio-value__rows[b-cr7slcry48] {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 4px;
}
.pl-portfolio-value__row[b-cr7slcry48] {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
}
.pl-portfolio-value__amount[b-cr7slcry48] {
font-weight: 600;
color: var(--pl-neutral-text-color-text, #0D1A26);
}
/* ---- Governance rows ---- */
.pl-portfolio-governance[b-cr7slcry48] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-radius: 4px;
font-size: 13px;
}
.pl-portfolio-governance--success[b-cr7slcry48] {
background-color: var(--pl-semantic-success-color-success-bg, #EBFAEB);
}
.pl-portfolio-governance--success .pl-portfolio-governance__value[b-cr7slcry48] {
color: var(--pl-semantic-success-color-success-active, #21945E);
}
.pl-portfolio-governance--warning[b-cr7slcry48] {
background-color: var(--pl-semantic-warning-color-warning-bg, #FFFBF0);
}
.pl-portfolio-governance--warning .pl-portfolio-governance__value[b-cr7slcry48] {
color: var(--pl-semantic-warning-color-warning, #F19822);
}
.pl-portfolio-governance--info[b-cr7slcry48] {
background-color: #F1ECFB;
}
.pl-portfolio-governance--info .pl-portfolio-governance__value[b-cr7slcry48] {
color: #6E3FC0;
}
.pl-portfolio-governance__value[b-cr7slcry48] {
font-weight: 600;
}
/* ---- responsive ---- */
@media (max-width: 1100px) {
.pl-portfolio-dashboard .pl-demo-kpis[b-cr7slcry48] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pl-portfolio-dashboard .pl-demo-grid[b-cr7slcry48] {
grid-template-columns: minmax(0, 1fr);
}
}
/* /View/Components/DashboardComponents/PlTileColumn.razor.rz.scp.css */
.pl-tile-column[b-5opmrjh735] {
box-sizing: border-box;
display: flex;
flex-direction: column;
}
/* /View/Components/DashboardComponents/PlTileColumnSet.razor.rz.scp.css */
.pl-tile-column-set[b-t1ezpdy3ao] {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
}
/* Non-root tiles fill their flex cell vertically. Root tiles size to content so the dashboard
surface (grey background applied one level up) determines the outer height. */
.pl-tile-column-set:not(.is-dashboard-root)[b-t1ezpdy3ao] {
height: 100%;
}
/* Dashboard root: 1px right gutter so cell chrome (border / shadow) doesn't sit exactly on
.pl-window-content's overflow:hidden clip and lose its rightmost pixel. */
.pl-tile-column-set.is-dashboard-root[b-t1ezpdy3ao] {
padding-right: 1px;
}
/* /View/Components/DashboardComponents/PlTileContainer.razor.rz.scp.css */
.pl-tile-container[b-l47ouz1lw0] {
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
}
/* Non-root tiles fill their flex cell vertically. Root tiles size to content so the dashboard
surface (grey background applied one level up) determines the outer height. */
.pl-tile-container:not(.is-dashboard-root)[b-l47ouz1lw0] {
height: 100%;
}
/* Dashboard root: 1px right gutter so the rightmost cell's chrome doesn't sit exactly on
.pl-window-content's overflow:hidden clip and lose its rightmost pixel. The grey surface and
the matching top inset live one level up on .pl-module-content-area.is-dashboard-module so
they cover the .pl-module-padded gutter too. */
.pl-tile-container.is-dashboard-root[b-l47ouz1lw0] {
padding-right: 1px;
}
/* Minimum visual chrome for dashboard tile leaves. Theme-driven; not customizing-driven.
The 1px border is rendered as an inset box-shadow so it draws inside the cell's border-box —
a real border at width:100% would be clipped where a row's rightmost cell touches the ancestor's
right edge (overflow boundary).
`overflow: hidden` keeps absolute-positioned DataFields (which still carry their authored
pixel widths) from escaping the cell when the column is narrower than the field's natural width.
The inset border-shadow renders before clipping, so the border itself is preserved. */
/* `::deep > .pl-block` rewrites to `[scope] > .pl-block` and matches direct .pl-block
children of every PlTileContainer instance (dashboard root AND nested ones inside Container
columns). Without this, leaves placed directly under the dashboard root get no chrome.
`::deep .pl-tile-column > .pl-block` covers leaves inside ColumnSet columns.
`::deep > .pl-tile-edit-overlay > .pl-block` (and the column variant) keeps chrome on tiles
that are wrapped in the customize-mode overlay — the overlay sits between the tile container
and the leaf's .pl-block, so the un-wrapped selectors would otherwise miss them.
Leaves nested deeper than direct children (e.g., child DAs of a leaf rendered recursively
via PlTileChildren) are NOT direct children of the column/root and therefore do not get
chrome — that's intentional, so a tile leaf can hold multiple sub-DAs as one chromed card. */
[b-l47ouz1lw0] > .pl-block,
[b-l47ouz1lw0] .pl-tile-column > .pl-block,
[b-l47ouz1lw0] > .pl-tile-edit-overlay > .pl-block,
[b-l47ouz1lw0] .pl-tile-column > .pl-tile-edit-overlay > .pl-block {
box-sizing: border-box;
overflow: hidden;
background-color: var(--pl-tile-background, #ffffff);
border-radius: var(--pl-tile-border-radius, 8px);
box-shadow:
var(--pl-tile-border-shadow, inset 0 0 0 1px #E5E8ED),
var(--pl-tile-shadow, 0 1px 2px rgba(0, 0, 0, 0.06));
padding: var(--pl-tile-padding, 16px);
}
/* DataFields inside a tile cell: anchor to the DfBlock's right edge instead of using the
customizing-authored pixel width. Otherwise df_width values larger than the (responsive) cell
would overflow into the chrome's right padding and the overflow:hidden above would clip them
flush with the cell border, eating the visible right padding. The !important is needed to win
over the inline width style emitted by PlDataField.
The :not(.pl-embedded-module *) guard keeps the rule from cascading into DataFields rendered
inside an embedded module — those carry the embedded module's own authored pixel positions and
widths, and stretching them to the cell's right edge would overlap titles and shift content. */
[b-l47ouz1lw0] .pl-tile-column .pl-datafield-block:not(.pl-embedded-module *) > .pl-df,
[b-l47ouz1lw0] .pl-tile-container .pl-datafield-block:not(.pl-embedded-module *) > .pl-df {
right: 0;
width: auto !important;
max-width: 100%;
}
/* Status Indicator — Context A (dashboard tile leaf).
Documented in docs/client_functionality/module_layout/status_indicator.md.
The customizing model is semantic (`StatusIndicator`); the current visual treatment is a
coloured left-edge bar, but the indication strategy is decided here on the client and may
evolve without changing the customizing.
The leaf already gets tile chrome (background, inset 1 px border via box-shadow, drop shadow,
16 px padding, border-radius) from the rule above. When `.pl-status-indicator` is present we
replace the chrome's 1 px inset border with a 4 px coloured bar on the LEFT side only by
re-emitting the box-shadow stack with an asymmetric inset shadow.
The inset border-color stays `#E5E8ED` (the tile-chrome colour) on top, right, bottom; the
left side becomes `var(--pl-status-indicator-color)` at the indicator width. The drop shadow
underneath is preserved unchanged.
The `border-left: 0` reset suppresses the bar that PlDataAreaBlock.razor.css applies for
Context B — inside a tile, the chrome's 16 px padding would otherwise place that border
inside the chrome rather than at the chrome's outer left edge.
Only direct children of the dashboard root or a column hit this rule. Inner DAs nested
inside a tile leaf (rendered recursively by PlTileChildren) are not direct children and
stay on Context B's plain border-left + radius. */
[b-l47ouz1lw0] > .pl-block.pl-status-indicator,
[b-l47ouz1lw0] .pl-tile-column > .pl-block.pl-status-indicator {
border-left: 0;
box-shadow:
inset 0 1px 0 0 #E5E8ED,
inset -1px 0 0 0 #E5E8ED,
inset 0 -1px 0 0 #E5E8ED,
inset var(--pl-status-indicator-width, 4px) 0 0 0 var(--pl-status-indicator-color, transparent),
var(--pl-tile-shadow, 0 1px 2px rgba(0, 0, 0, 0.06));
}
/* /View/Components/DashboardComponents/PlTileEmbeddedCell.razor.rz.scp.css */
/* The tile cell is a flex item in a dashboard column / column-set chain that has no definite
height (the dashboard root sizes to content). PlModule's `pl-module-container` carries an
inline `height: 100%` for the standalone case where its parent fills the viewport — inside
a tile that 100% resolves to 0 and the whole chain (.pl-module-content-area, splitter,
scrollbar, pl-scroll) collapses to zero. We rebuild the chain inside the cell to size to the
embedded module's intrinsic content height (driven by pl-main's inline DocumentSize) and
set the cell's `min-height` to that intrinsic content so the `flex: 1 1 0` from the
FlexStyle (Stretch / Weight) does not collapse it to chrome-only. */
.pl-tile-embedded-cell[b-xmnfgrhjsy] {
display: flex;
flex-direction: column;
min-height: max-content;
}
[b-xmnfgrhjsy] .pl-module-container {
height: auto;
flex: 1 1 auto;
min-height: 0;
width: 100%;
}
/* Flex-column the body chain from the content area down to the scroll viewport so the viewport
fills the cell: the content-sized module body sits at the top and the horizontal scrollbar
lands at the cell's bottom edge instead of hugging the content. The cell's min-height:
max-content still floors the chain at the intrinsic content height, so a content-sized cell
(no extra space) renders unchanged. */
[b-xmnfgrhjsy] .pl-module-content-area,
[b-xmnfgrhjsy] .fluent-multi-splitter-pane,
[b-xmnfgrhjsy] .scrollbar-container {
display: flex !important;
flex-direction: column !important;
}
[b-xmnfgrhjsy] .pl-module-content-area,
[b-xmnfgrhjsy] .fluent-multi-splitter,
[b-xmnfgrhjsy] .fluent-multi-splitter-pane,
[b-xmnfgrhjsy] .scrollbar-container,
[b-xmnfgrhjsy] .pl-scroll-window {
flex: 1 1 auto !important;
min-height: 0;
height: auto !important;
}
/* ─── Lifted title-area chrome ───────────────────────────────────────────────────────────────
When the embedded module exposes a liftable TitleArea (a DA with FlexLayout.TitleArea and at
least one DF marked Flex.InTitle), PlTileEmbeddedCell renders a title bar above the module
body using the same class names as PlFlexDataAreaBlock so the visual result is identical.
Blazor scoped CSS does not let rules in PlFlexDataAreaBlock.razor.css reach elements
rendered here, so the title-area chrome is duplicated below. Keep the two files in sync —
PlFlexDataAreaBlock.razor.css is the source of truth and any visual change there should be
mirrored here.
See docs/client_functionality/module_layout/embedded_module.md#widget-title. */
.pl-tile-embedded-cell.pl-flex-da-title-top[b-xmnfgrhjsy] { flex-direction: column; }
.pl-tile-embedded-cell.pl-flex-da-title-bottom[b-xmnfgrhjsy] { flex-direction: column-reverse; }
.pl-tile-embedded-cell.pl-flex-da-title-start[b-xmnfgrhjsy] { flex-direction: row; }
.pl-tile-embedded-cell.pl-flex-da-title-end[b-xmnfgrhjsy] { flex-direction: row-reverse; }
.pl-flex-da-title[b-xmnfgrhjsy],
.pl-flex-da-body[b-xmnfgrhjsy] {
display: flex;
box-sizing: border-box;
}
.pl-flex-da-body[b-xmnfgrhjsy] {
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
.pl-flex-da-title[b-xmnfgrhjsy] {
flex: 0 0 auto;
gap: var(--pl-flex-da-title-gap, 8px);
/* Match PlFlexDataAreaBlock's title height: 33 px min with an 8 px content offset toward
the bottom edge so the heading sits just above the separator. */
padding-bottom: var(--pl-flex-da-title-padding-bottom, 8px);
min-height: var(--pl-flex-da-title-min-height, 33px);
}
/* Extend the title past the surrounding tile padding so the separator line spans the full
widget width edge-to-edge. The --pl-tile-padding fallback mirrors the default in
PlTileContainer.razor.css. */
.pl-tile-embedded-cell.pl-flex-da-title-top > .pl-flex-da-title[b-xmnfgrhjsy],
.pl-tile-embedded-cell.pl-flex-da-title-bottom > .pl-flex-da-title[b-xmnfgrhjsy] {
margin-left: calc(-1 * var(--pl-tile-padding, 16px));
margin-right: calc(-1 * var(--pl-tile-padding, 16px));
padding-left: var(--pl-tile-padding, 16px);
padding-right: var(--pl-tile-padding, 16px);
}
.pl-tile-embedded-cell.pl-flex-da-title-start > .pl-flex-da-title[b-xmnfgrhjsy],
.pl-tile-embedded-cell.pl-flex-da-title-end > .pl-flex-da-title[b-xmnfgrhjsy] {
margin-top: calc(-1 * var(--pl-tile-padding, 16px));
margin-bottom: calc(-1 * var(--pl-tile-padding, 16px));
padding-top: var(--pl-tile-padding, 16px);
}
/* Title chrome: spacing between the title and the body plus the theme-driven 1px separator —
direction depends on title position. */
.pl-tile-embedded-cell.pl-flex-da-title-top > .pl-flex-da-title[b-xmnfgrhjsy] { margin-bottom: var(--pl-flex-da-title-spacing, 12px); border-bottom: var(--pl-flex-da-title-separator, 1px solid #E5E8ED); }
.pl-tile-embedded-cell.pl-flex-da-title-bottom > .pl-flex-da-title[b-xmnfgrhjsy] { margin-top: var(--pl-flex-da-title-spacing, 12px); border-top: var(--pl-flex-da-title-separator, 1px solid #E5E8ED); }
.pl-tile-embedded-cell.pl-flex-da-title-start > .pl-flex-da-title[b-xmnfgrhjsy] { margin-right: var(--pl-flex-da-title-spacing, 12px); border-right: var(--pl-flex-da-title-separator, 1px solid #E5E8ED); }
.pl-tile-embedded-cell.pl-flex-da-title-end > .pl-flex-da-title[b-xmnfgrhjsy] { margin-left: var(--pl-flex-da-title-spacing, 12px); border-left: var(--pl-flex-da-title-separator, 1px solid #E5E8ED); }
/* Per-child wrapper in the title area. */
.pl-flex-item[b-xmnfgrhjsy] {
display: flex;
box-sizing: border-box;
flex: 0 0 auto;
min-width: 0;
min-height: 0;
}
.pl-flex-size-stretch[b-xmnfgrhjsy] { flex: 1 1 auto; --pl-flex-btn-width: 100%; }
.pl-flex-size-auto[b-xmnfgrhjsy] { flex: 0 0 auto; --pl-flex-btn-width: fit-content; }
/* End group: only the first item keeps the auto margin, the rest reset it so they stay together. Mirror of PlFlexDataAreaBlock.razor.css. */
.pl-flex-da-title[style*="flex-direction: row"] > .pl-flex-item.pl-flex-align-end[b-xmnfgrhjsy] { margin-left: auto; }
.pl-flex-da-title[style*="flex-direction: row"] > .pl-flex-item.pl-flex-align-end ~ .pl-flex-item.pl-flex-align-end[b-xmnfgrhjsy] { margin-left: 0; }
.pl-flex-da-title[style*="flex-direction: column"] > .pl-flex-item.pl-flex-align-end[b-xmnfgrhjsy] { margin-top: auto; }
.pl-flex-da-title[style*="flex-direction: column"] > .pl-flex-item.pl-flex-align-end ~ .pl-flex-item.pl-flex-align-end[b-xmnfgrhjsy] { margin-top: 0; }
.pl-flex-da-title[style*="flex-direction: row"] > .pl-flex-item.pl-flex-align-center[b-xmnfgrhjsy] { margin-left: auto; margin-right: auto; }
.pl-flex-da-title[style*="flex-direction: column"] > .pl-flex-item.pl-flex-align-center[b-xmnfgrhjsy] { margin-top: auto; margin-bottom: auto; }
/* Figma select chrome for title-area listboxes — mirror of PlFlexDataAreaBlock.razor.css (the source of truth), needed here for lifted titles. */
.pl-flex-da-title > .pl-flex-item-listbox[b-xmnfgrhjsy] {
align-self: center;
height: 32px;
min-width: 117px;
}
.pl-flex-da-title > .pl-flex-item-listbox[b-xmnfgrhjsy] .pl-df {
width: 100% !important;
}
/* PlDataField's flex-flow reset flattens the inner datafield-customizing div to static/auto, which
collapses a listbox (it needs that div to fill the .pl-df cell and anchor the dropdown icon).
Restore the fill/anchor for listbox items. Mirror of PlFlexDataAreaBlock.razor.css. */
.pl-flex-da-title > .pl-flex-item-listbox[b-xmnfgrhjsy] .pl-df > div[class*="datafield-customizing-"] {
position: absolute !important;
inset: 0 !important;
}
/* !important beats the symbol-driven chrome (SymbolCssGenerator emits border/background with !important). */
.pl-flex-da-title > .pl-flex-item-listbox[b-xmnfgrhjsy] .pl-input-popover-container {
box-sizing: border-box;
background-color: #FFFFFF !important;
border: 1px solid var(--pl-flex-title-select-border, #C4CBDA) !important;
border-radius: 4px;
padding-left: 12px;
padding-right: 30px;
}
.pl-flex-da-title > .pl-flex-item-listbox[b-xmnfgrhjsy] .pl-input-field {
font-size: 14px;
line-height: 22px;
color: var(--pl-flex-title-select-color, #0D1A26);
}
.pl-flex-da-title > .pl-flex-item-listbox[b-xmnfgrhjsy] .pl-popover-icon.ddl-icon {
position: absolute;
inset: 0;
z-index: 2;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 3.75l4.5 4.5 4.5-4.5' fill='none' stroke='%238A95A8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 12px;
cursor: pointer;
}
.pl-flex-da-title > .pl-flex-item-listbox[b-xmnfgrhjsy] .pl-popover-icon.ddl-icon::before {
content: none;
}
.pl-flex-da-title > .pl-flex-item-listbox[b-xmnfgrhjsy] .pl-popover-icon.ddl-icon:hover {
background-color: transparent;
}
/* InTitle DFs are rendered as their df_hdg (Customizing.Title) text when set — that's the
PLANTA-wide convention for labels. Mirrors .pl-flex-da-title-fallback in
PlFlexDataAreaBlock.razor.css; keep the typography variables in sync. */
.pl-flex-da-title-fallback[b-xmnfgrhjsy] {
align-self: center;
font-family: var(--pl-flex-da-title-fallback-font-family, 'Asap', sans-serif);
font-size: var(--pl-flex-da-title-fallback-font-size, 20px);
font-weight: var(--pl-flex-da-title-fallback-font-weight, 600);
line-height: var(--pl-flex-da-title-fallback-line-height, 28px);
color: var(--pl-flex-da-title-fallback-color, #0d1a26);
}
/* /View/Components/DashboardComponents/PlTileFallbackCell.razor.rz.scp.css */
/* The outer `.pl-tile-fallback-cell` (also carrying `pl-block`) picks up the standard tile
chrome from PlTileContainer.razor.css (white background, inset border, drop shadow, padding,
border-radius). We just center the message inside that chrome. */
.pl-tile-fallback-cell[b-ryow5dioix] {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.pl-tile-fallback-cell-message[b-ryow5dioix] {
color: var(--pl-color-warning, #c97b00);
font-size: 13px;
word-break: break-word;
}
/* /View/Components/DataFieldComponents/PlBackground.razor.rz.scp.css */
.pl-effect-blank[b-rnh1b5dreo] {
background-color: white !important;
}
/* /View/Components/DataFieldComponents/PlButton.razor.rz.scp.css */
[b-fpt00e590y] .e-btn .e-btn-icon {
display: unset;
font-size: unset;
margin-top: unset;
vertical-align: unset;
width: auto;
margin: 0;
padding: 0;
}
.pl-datafield-content[b-fpt00e590y] {
overflow: unset !important;
text-overflow: unset !important;
}
.pl-button[b-fpt00e590y] {
width: 100%;
height: 100%;
}
/* Shared layout for all buttons */
.pl-button[b-fpt00e590y] .ant-btn {
width: 100%;
height: 100%;
display: flex;
align-items: center;
overflow: hidden;
}
/* Unconfigured buttons: mimic MudBlazor appearance */
.pl-button:not(.pl-button-configured)[b-fpt00e590y] .ant-btn {
min-width: unset;
background-color: white !important;
border-radius: 0 !important;
padding: 3px 3px !important;
font-family: 'Roboto', sans-serif;
letter-spacing: unset;
text-transform: unset;
}
/* --pl-flex-btn-width comes from the flex cell wrapper (PlFlexDataAreaBlock.razor.css); the fallbacks keep the classic hug-the-caption sizing. */
.pl-button.pl-button-configured[b-fpt00e590y] {
width: var(--pl-flex-btn-width, fit-content);
height: fit-content;
}
/* Configured buttons: ignore parent DataField size, let AntDesign handle sizing */
.pl-button.pl-button-configured[b-fpt00e590y] .ant-btn {
display: inline-flex;
position: static !important;
width: var(--pl-flex-btn-width, auto) !important;
height: auto !important;
justify-content: center;
}
.pl-button-icon[b-fpt00e590y] {
display: inline-block;
vertical-align: middle;
}
.pl-button-icon-start[b-fpt00e590y] {
margin-right: 3px;
}
.pl-button-icon-end[b-fpt00e590y] {
margin-left: 3px;
}
.pl-button .e-btn-content[b-fpt00e590y] {
display: inline-block;
min-width: 0;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
}
.pl-button[b-fpt00e590y] .ant-btn > span {
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
}
/* Configured buttons: use flex gap for icon-text spacing */
.pl-button.pl-button-configured[b-fpt00e590y] .ant-btn > span {
gap: 8px;
}
/* Configured buttons: zero out icon margins (gap handles spacing) */
.pl-button.pl-button-configured .pl-button-icon[b-fpt00e590y] {
margin: 0;
}
/* Icon-only configured buttons: square shape matching AntDesign standard sizes */
.pl-button.pl-button-configured.pl-button-icon-only[b-fpt00e590y] .ant-btn {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
padding: 0 !important;
}
.pl-button.pl-button-configured.pl-button-icon-only[b-fpt00e590y] .ant-btn.ant-btn-lg {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
}
.pl-button.pl-button-configured.pl-button-icon-only[b-fpt00e590y] .ant-btn.ant-btn-sm {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
}
.pl-button[b-fpt00e590y] i.pl-button-icon {
display: inline-flex;
align-items: center;
vertical-align: middle;
font-size: 1.1em;
}
/* Outlook subscription button: drop AntDesign's default bottom shadow so it
matches the borderless look of regular ImageButtons. */
.pl-button[b-fpt00e590y] .ant-btn.pl-outlook-subscription-button {
box-shadow: none !important;
}
/* /View/Components/DataFieldComponents/PlCheckBox.razor.rz.scp.css */
.e-icons.e-frame > input[type='checkbox'][b-qxol4qb5np] {
height: 14px !important;
}
/* /View/Components/DataFieldComponents/PlDataField.razor.rz.scp.css */
.pl-df[b-0tzc8vr7pr] {
width: 100%;
height: 100%;
position: absolute;
}
.pl-df:focus-within[b-0tzc8vr7pr] {
z-index: var(--z-index-focus-field) !important;
}
.pl-datafield-icon[b-0tzc8vr7pr] {
object-fit: contain;
padding-left: var(--spacing-field-padding, 3px);
padding-right: var(--spacing-field-padding, 3px);
}
[b-0tzc8vr7pr] input:not(:focus) {
color: inherit;
}
[b-0tzc8vr7pr] .pl-horizontaly-centered {
margin-left: auto;
margin-right: auto;
width: fit-content;
}
[b-0tzc8vr7pr] .pl-datafield-content {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* Flex-DA-hosted fields (FlowLayout cascade is true). Opening up overflow restores the
intrinsic-size chain — without it .pl-datafield-content's overflow:hidden reports a
max-content of 0 to its ancestors, pinning the wrapping .pl-flex-item to the declared
df_width and never letting content grow the cell. Keep white-space: nowrap so the row
layout stays single-line; the wrapper grows horizontally instead of wrapping. */
/* In flex flow the field's generated classic-layout rule (position: absolute; width/height: 100%)
still hits the inner component root and collapses it to 0 when the outer .pl-df is width:auto.
Reset the inner root to flow so it sizes to content (icon div excluded — no datafield-customizing class). */
.pl-df-flow[b-0tzc8vr7pr] > div[class*="datafield-customizing-"] {
position: static !important;
top: auto !important;
left: auto !important;
width: auto !important;
height: auto !important;
}
.pl-df-flow[b-0tzc8vr7pr] .pl-datafield-content {
overflow: visible;
text-overflow: clip;
/* In a flex DA the field always carries symmetric horizontal breathing room regardless
of text alignment — otherwise a right- or center-aligned cell would visibly hug one
edge of its .pl-flex-item / row background while a left-aligned neighbour does not.
The classic absolute-position layout still gates the padding on alignment via the
.left-padding / .right-padding classes below, so this override is scoped to flow. */
padding-left: var(--spacing-field-padding, 3px);
padding-right: var(--spacing-field-padding, 3px);
}
[b-0tzc8vr7pr] .pl-datafield-content.right-padding {
padding-right: var(--spacing-field-padding, 3px);
}
[b-0tzc8vr7pr] .pl-datafield-content.left-padding {
padding-left: var(--spacing-field-padding, 3px);
}
[b-0tzc8vr7pr] .pl-text-align-right {
text-align: right;
justify-content: flex-end !important;
}
[b-0tzc8vr7pr] .pl-text-align-center {
text-align: center;
justify-content: center !important;
}
[b-0tzc8vr7pr] .pl-text-align-left {
text-align: left;
justify-content: flex-start !important;
}
/* /View/Components/DataFieldComponents/PlFileUpload.razor.rz.scp.css */
.upload-forbidden[b-0part6x82d] {
cursor: not-allowed;
}
.error-message[b-0part6x82d] {
padding: 1.5rem 1.5rem 0;
margin: 0;
color: red;
}
/* /View/Components/DataFieldComponents/PlFlexTagItem.razor.rz.scp.css */
/* Ant's .ant-tag defaults supply margin, radius, padding, and line-height that don't match
the Figma tag spec — override them. Colours intentionally absent: the cascaded
pl-symbol-{uid} rules from SymbolCssGenerator (border-color, background-color, color) already
carry !important and win against Ant's defaults. */
[b-ls6ij1rmgf] .pl-flex-tag.ant-tag {
border-radius: 3px !important;
border-width: 1px !important;
border-style: solid;
margin: 0 !important;
padding: 0 8px !important;
line-height: 20px !important;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
font-size: 14px;
box-sizing: border-box;
}
[b-ls6ij1rmgf] .pl-flex-tag .pl-flex-tag-icon {
display: inline-flex;
align-items: center;
font-size: 14px;
line-height: 1;
}
[b-ls6ij1rmgf] .pl-flex-tag .pl-flex-tag-text {
line-height: 20px;
}
/* /View/Components/DataFieldComponents/PlImageButton.razor.rz.scp.css */
img[b-q6sft94f2z] {
position: relative !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
}
/* /View/Components/DataFieldComponents/PlImageEditable.razor.rz.scp.css */
.image-editable-uploader:hover .image-editable img[b-myrt55luop] {
outline: 1px solid #00a9ff;
}
.image-editable-uploader:hover .remove-img-btn[b-myrt55luop] {
display: block;
}
.image-editable[b-myrt55luop] {
position: absolute;
}
.remove-img-btn[b-myrt55luop] {
display: none;
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
top: 3px;
left: unset;
right: 3px;
transform: unset;
z-index: 11;
}
.remove-img-btn[b-myrt55luop]::before,
.remove-img-btn[b-myrt55luop]::after {
content: '';
display: block;
height: 1px;
width: 15px;
background-color: #1b1b1b;
position: absolute;
top: 50%;
left: 50%;
}
.remove-img-btn[b-myrt55luop]::before {
transform: translate(-50%, 0) rotate(45deg) !important;
}
.remove-img-btn[b-myrt55luop]::after {
transform: translate(-50%, 0) rotate(-45deg) !important;
}
/* /View/Components/DataFieldComponents/PlImageFallback.razor.rz.scp.css */
/* Avatar matches Figma User Avatar (Sidebar / User Dropdown):
- 1px gradient stroke (full-opacity #0DB5F2 -> #0070B5)
- Light gradient fill (same gradient at ~30% alpha, on white)
- Dark blue text #0070B5
The gradient border is achieved by stacking three background layers:
the light tint and a white base both clipped to padding-box, and the
full gradient clipped to border-box showing through a transparent border. */
.pl-image-fallback-initials[b-t9mw17gx8x] {
width: 100%;
height: 100%;
min-width: 28px;
min-height: 28px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(147deg, rgba(13, 181, 242, 0.3) 11%, rgba(0, 112, 181, 0.3) 100%) padding-box,
linear-gradient(#FFFFFF, #FFFFFF) padding-box,
linear-gradient(147deg, #0DB5F2 11%, #0070B5 100%) border-box;
border: 1px solid transparent;
color: var(--pl-color-seablue-7, #0070B5);
font-family: Asap, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1;
border-radius: 50%;
text-transform: uppercase;
user-select: none;
overflow: hidden;
flex-shrink: 0;
}
/* /View/Components/DataFieldComponents/PlInlineBar.razor.rz.scp.css */
.pl-inline-bar-wrapper[b-9c0c64nxsf] {
display: flex;
flex-direction: column;
gap: 2px;
width: 100%;
align-self: center;
}
/* Top/bottom lines hold optional label + value pairs. justify-content: space-between
produces the figma "label on the left, value on the right" alignment without forcing
the customizer to pick a separate alignment knob — a single item on the line falls
back to its natural edge via the auto-margin trick. */
.pl-inline-bar-line-top[b-9c0c64nxsf],
.pl-inline-bar-line-bottom[b-9c0c64nxsf] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
/* Middle line wraps the bar so Start/End label / value slots can sit beside it. The
bar itself takes flex: 1 to consume remaining space — a Start label + bar + End value
row therefore shrinks the bar by exactly the labels' widths, matching the figma
"Budget … 85%" layout. */
.pl-inline-bar-line-mid[b-9c0c64nxsf] {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
}
.pl-inline-bar-line-mid > .pl-inline-bar[b-9c0c64nxsf] {
flex: 1 1 auto;
min-width: 0;
}
/* A standalone Top/Bottom value (no label on that line) should still hug the trailing
edge so the figma "65%" / "85%" alignment holds. Putting the value alone on a
space-between line lands it at the start by default — push it to the end with margin
so the single-element case visually matches the two-element case. */
.pl-inline-bar-line-top > .pl-inline-bar-value:only-child[b-9c0c64nxsf],
.pl-inline-bar-line-bottom > .pl-inline-bar-value:only-child[b-9c0c64nxsf] {
margin-left: auto;
}
.pl-inline-bar[b-9c0c64nxsf] {
position: relative;
display: block;
width: 100%;
height: 8px;
background-color: var(--pl-inline-bar-track, rgba(0, 0, 0, 0.06));
border-radius: 4px;
overflow: hidden;
align-self: center;
}
.pl-inline-bar-fill[b-9c0c64nxsf] {
display: block;
height: 100%;
border-radius: inherit;
transition: width 120ms ease-out;
}
/* Label & value typography. Kept intentionally lean — colour / weight match the
secondary text token used elsewhere in dashboard tiles, so a customizer doesn't need
to wire up a symbol for a one-off bar caption. */
.pl-inline-bar-label[b-9c0c64nxsf] {
font-size: 12px;
line-height: 16px;
color: var(--pl-text-secondary, #6e6e6e);
white-space: nowrap;
}
.pl-inline-bar-value[b-9c0c64nxsf] {
font-size: 12px;
line-height: 16px;
font-weight: 600;
color: var(--pl-text-primary, #1f1f1f);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Inside variant — overlay the value on the bar's track. The bar is already
position: relative; this centres the value over the full width so it doesn't drift
with the fill. Mix-blend-mode keeps the digits readable over both the filled (left)
and unfilled (right) portions of the track. */
.pl-inline-bar-value-inside[b-9c0c64nxsf] {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
color: var(--pl-text-on-bar, #ffffff);
mix-blend-mode: difference;
font-size: 10px;
line-height: 1;
}
/* /View/Components/DataFieldComponents/PlMarkdown.razor.rz.scp.css */
/* Editing: fixed slot size, no grow. White card beats the skin's transparent bg.
Inner fill+scroll is in PlsMilkdownEditor.razor.css. */
.pl-markdown-wrapper.is-editing[b-55nnw8u097] {
height: 100% !important;
overflow: visible !important; /* don't clip the floating toolbar above the field */
position: relative;
background: var(--base-white, #fff) !important;
outline: 1px solid var(--color-primary-light-blue, #00B2F5);
outline-offset: -1px;
box-shadow: 0 2px 10px rgba(0, 178, 245, 0.18), 0 1px 3px rgba(0, 0, 0, 0.08);
z-index: 1;
}
/* /View/Components/DataFieldComponents/PlMultilineTextbox.razor.rz.scp.css */
.pl-multiline-wrapper[b-f2kzzjhm7d] {
height: 100%;
width: 100%;
overflow-y: auto !important;
box-sizing: border-box;
position: relative;
}
.pl-multiline[b-f2kzzjhm7d] {
width: 100%;
min-height: 100%;
box-sizing: border-box;
text-overflow: ellipsis;
border: none;
outline: none;
resize: none;
line-height: 1.5em !important;
background: inherit;
overflow: auto !important;
padding: 3px;
white-space: pre-wrap;
word-wrap: break-word;
}
.pl-multiline:focus[b-f2kzzjhm7d] {
outline: none;
border: none;
}
/* Re-inherit font/spacing so the edit textarea matches the read-only div (form controls reset letter-spacing → ~1px "shrink" on focus). */
.pl-multiline-editor[b-f2kzzjhm7d] {
margin: 0;
font-family: inherit;
font-size: inherit;
color: inherit;
letter-spacing: inherit;
word-spacing: inherit;
}
/* Editing: stay within the field's slot and scroll, like the desktop client — no escape/grow.
The wrapper keeps its slot height (base rule) so the field bounds don't change on activation;
the textarea fills the slot and scrolls its overflow. Visual edit affordance lives on the textarea. */
.pl-multiline-wrapper.is-editing[b-f2kzzjhm7d] {
position: relative;
z-index: 1;
}
.pl-multiline-wrapper.is-editing .pl-multiline-editor[b-f2kzzjhm7d] {
width: 100%;
height: 100%;
box-sizing: border-box;
resize: none;
overflow-y: auto;
background: var(--base-white, #fff);
/* Outline (not border) so the frame doesn't take layout space — a border with
box-sizing: border-box would shift the content ~1px on click→edit. */
outline: 1px solid var(--color-primary-light-blue, #00B2F5);
outline-offset: -1px;
box-shadow: 0 2px 10px rgba(0, 178, 245, 0.18), 0 1px 3px rgba(0, 0, 0, 0.08);
}
[b-f2kzzjhm7d] .e-float-input textarea, [b-f2kzzjhm7d] .e-float-input.e-control-wrapper textarea {
min-height: 0px !important;
}
/* /View/Components/DataFieldComponents/PlOutlookSubscriptionImageButton.razor.rz.scp.css */
i[b-g6nmyw4ysm] {
position: relative !important;
margin: auto !important;
cursor: pointer;
text-align: center;
font-size: 14px;
}
/* /View/Components/DataFieldComponents/PlTextBox.razor.rz.scp.css */
.pl-datafield-input-placeholder[b-ncf3tjm0im] {
cursor: text;
}
/* /View/Components/DataFieldComponents/WebEmbeddedComponents/PlEmbeddedWebpage.razor.rz.scp.css */
.pl-popup-button[b-8ym9m3tuz6] {
position: absolute;
width: 50px;
height: 50px;
border: none;
background: lightgrey;
transition: visibility 0s, opacity 0.5s linear;
}
.pl-iframe-container[b-8ym9m3tuz6] {
position: relative;
}
.pl-iframe-container iframe[b-8ym9m3tuz6] {
border: none;
display: block;
}
.pl-iframe-container .pl-popup-button[b-8ym9m3tuz6] {
visibility: hidden;
opacity: 0;
}
.pl-iframe-container:hover .pl-popup-button[b-8ym9m3tuz6] {
visibility: visible;
opacity: 0.5;
}
.pl-popup-button-top-left[b-8ym9m3tuz6] {
left: 0;
top: 0;
}
.pl-popup-button-top-right[b-8ym9m3tuz6] {
right: 0;
top: 0;
}
.pl-popup-button-bottom-left[b-8ym9m3tuz6] {
left: 0;
bottom: 0;
}
.pl-popup-button-bottom-right[b-8ym9m3tuz6] {
right: 0;
bottom: 0;
}
/* /View/Components/DialogComponents/PlDialogModule.razor.rz.scp.css */
.dialog-header[b-nwxvvhk5nk] {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
font-size: 18px;
}
.dialog-header .dialog-title[b-nwxvvhk5nk] {
font-weight: 600;
}
.close-button[b-nwxvvhk5nk] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: none;
outline: none;
background: none;
cursor: pointer;
flex-shrink: 0;
opacity: 0.7;
border-radius: 3px;
}
.close-button img[b-nwxvvhk5nk] {
width: 22px;
height: 22px;
}
.close-button:hover[b-nwxvvhk5nk] {
opacity: 1;
}
.close-button:focus-visible[b-nwxvvhk5nk] {
opacity: 1;
outline: 2px solid var(--pl-neutral-border-color-border);
outline-offset: 2px;
}
.pl-dialog-module-content-wrapper[b-nwxvvhk5nk]{
flex: 1 1 0;
min-height: 0;
}
/* /View/Components/DialogComponents/PlMessageBox.razor.rz.scp.css */
.pl-msgbox-text-container[b-v7rf94pa6d] {
display: flex;
align-items: center;
gap: 20px;
}
.pl-msgbox-inputs[b-v7rf94pa6d] {
margin-top: 10px;
}
.pl-msgbox-actions[b-v7rf94pa6d] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 24px;
}
/* /View/Components/DialogComponents/PlPasswordChange.razor.rz.scp.css */
.password-title[b-y0fr2px9ij] {
font-size: 1.5rem;
font-weight: 700;
color: var(--mud-palette-primary);
letter-spacing: 0.5px;
margin: 4px 0;
}
.change-password-content[b-y0fr2px9ij] {
width: 100%;
}
.password-field-container[b-y0fr2px9ij] {
margin-bottom: 10px;
}
.password-label[b-y0fr2px9ij] {
display: block;
margin-bottom: 6px;
font-size: 1rem;
font-weight: 600;
color: var(--mud-palette-primary-darken);
letter-spacing: 0.3px;
}
.password-input[b-y0fr2px9ij] {
width: 100%;
padding: 10px;
border: 1px solid rgba(0, 0, 0, 0.23);
border-radius: 4px;
font-size: 1rem;
line-height: 1;
transition: border-color 0.2s ease;
}
.password-input:focus[b-y0fr2px9ij] {
outline: none;
border-color: var(--mud-palette-primary);
box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), 0.2);
}
.error-message[b-y0fr2px9ij] {
color: var(--mud-palette-error);
font-size: 0.875rem;
margin-top: 8px;
font-weight: 500;
}
/* /View/Components/DialogComponents/ScheduleGenerationComponents/PlCreateScheduleMessageBox.razor.rz.scp.css */
[b-aq1xegcslg] .mud-button {
padding: 10px 20px;
border-radius: 4px;
background: #F3F4F5;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.08);
text-transform: none !important;
font-size: 16px;
text-align: center;
line-height: var(--font-line-height-caption, 19.02px); /* 118.875% */
letter-spacing: var(--font-letter-spacing-caption, 0.4px);
}
[b-aq1xegcslg] .mud-button:hover {
background: #E3E5E8;
box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.12);
}
[b-aq1xegcslg] .mud-button-filled.mud-button-filled-primary {
color: #FFF;
background-color: var(--mud-palette-primary);
}
[b-aq1xegcslg] .mud-button-filled.mud-button-filled-primary:hover {
background-color: #004575;
box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.12);
}
.ai-button-content[b-aq1xegcslg] {
display: flex;
align-items: center;
}
.text-14px[b-aq1xegcslg] {
color: #3C3F43;
font-family: Asap, serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 14px */
letter-spacing: var(--font-letter-spacing-caption, 0.4px);
}
.pl-title-text[b-aq1xegcslg] {
align-self: stretch;
color: #000;
font-family: Asap, serif;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 100%; /* 20px */
letter-spacing: var(--font-letter-spacing-caption, 0.4px);
}
/* /View/Components/DialogComponents/ScheduleGenerationComponents/PlGeneratedScheduleDialog.razor.rz.scp.css */
[b-iqhynrwdnj] .mud-button {
padding: 10px 20px;
border-radius: 4px;
background: #F3F4F5;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.08);
text-transform: none !important;
font-size: 16px;
text-align: center;
line-height: var(--font-line-height-caption, 19.02px); /* 118.875% */
letter-spacing: var(--font-letter-spacing-caption, 0.4px);
}
[b-iqhynrwdnj] .mud-button:hover {
background: #E3E5E8;
box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.12);
}
[b-iqhynrwdnj] .mud-button-filled.mud-button-filled-primary {
color: #FFF;
background-color: var(--mud-palette-primary);
}
[b-iqhynrwdnj] .mud-button-filled.mud-button-filled-primary:hover {
background-color: #004575;
box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.12);
}
.ai-button-content[b-iqhynrwdnj] {
display: flex;
align-items: center;
}
.custom-dialog-container[b-iqhynrwdnj] {
position: fixed;
display: flex;
padding: 10px 16px;
bottom: 55px;
left: 50%;
transform: translateX(-50%);
z-index: var(--z-index-custom-dialog-container);
width: auto;
border-radius: 8px;
background: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
gap: 10px;
}
.custom-dialog-container[b-iqhynrwdnj]::after {
content: '';
position: absolute;
inset: 0;
padding: 1px; /* Border width */
border-radius: 8px;
background: linear-gradient(to right, #01B0F3 0%, #016AB4 100%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.generated-schedule-text[b-iqhynrwdnj] {
color: #000;
font-family: Asap, serif;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 38px;
letter-spacing: 0.4px;
}
/* /View/Components/DialogComponents/ScheduleGenerationComponents/PlGenerateScheduleDialog.razor.rz.scp.css */
[b-cnz4kd2u8n] .ant-input,
.df-container[b-cnz4kd2u8n] .pl-popover-input {
background-color: white;
border: 1px solid var(--mud-palette-lines-inputs) !important;
border-radius: var(--mud-default-borderradius);
box-shadow: none !important;
color: #000;
font-family: Asap, serif !important;
font-size: var(--font-size-body, 16px) !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 20px; /* 125% */
letter-spacing: var(--Font-Spacing-spacing-input, 0.15px);
padding: 10px 8px !important;
margin: 0;
}
.date-input-container .df-container[b-cnz4kd2u8n] .pl-popover-input {
border: none !important;
background-color: transparent;
}
[b-cnz4kd2u8n] .ant-input:hover {
border-color: rgba(0, 0, 0, 0.87) !important;
}
[b-cnz4kd2u8n] .ant-input:focus {
border-color: var(--mud-palette-primary) !important;
border-width: 2px !important;
box-shadow: none !important;
outline: none;
}
[b-cnz4kd2u8n] textarea.ant-input {
resize: none;
}
.pl-dialog-title-text[b-cnz4kd2u8n] {
color: #000;
font-family: Asap, serif;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 19.02px; /* 79.25% */
letter-spacing: 0.4px;
}
[b-cnz4kd2u8n] .pl-popover-icon {
padding-right: 8px;
}
.text-14px[b-cnz4kd2u8n] {
color: #3C3F43;
font-family: Asap, serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 14px */
letter-spacing: var(--font-letter-spacing-caption, 0.4px);
}
.input-container[b-cnz4kd2u8n] {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex-shrink: 0;
width: 100%;
}
[b-cnz4kd2u8n] .ant-tag {
background-color: white;
margin: 4px;
height: 24px;
padding: 0 8px;
border-radius: var(--mud-default-borderradius);
border-color: var(--mud-palette-lines-inputs);
}
[b-cnz4kd2u8n] .ant-tag:hover {
background-color: var(--mud-palette-action-default-hover);
}
/* Projektsteckbrief expansion panel — match the MudExpansionPanel look (grey card with rounded corners). */
[b-cnz4kd2u8n] .ant-collapse {
background: #F4F6F8;
border: none;
border-radius: 4px;
margin-top: 16px;
width: 100%;
}
[b-cnz4kd2u8n] .ant-collapse > .ant-collapse-item {
border: none;
}
[b-cnz4kd2u8n] .ant-collapse-content {
background: transparent;
border-top: none !important;
}
/* AntDesign also draws a bottom border on the header itself — disable it so we don't get a double line. */
[b-cnz4kd2u8n] .ant-collapse-item > .ant-collapse-header,
[b-cnz4kd2u8n] .ant-collapse-item > .ant-collapse-header::after {
border-bottom: none !important;
padding: 16px 24px;
}
/* Collapse with the expand icon on the right side — flip header layout and tweak arrow spacing. */
[b-cnz4kd2u8n] .ant-collapse-icon-position-right .ant-collapse-header {
display: flex;
flex-direction: row-reverse;
}
[b-cnz4kd2u8n] .ant-collapse-arrow {
margin-left: 0 !important;
margin-right: 5px !important;
}
[b-cnz4kd2u8n] .ant-collapse-expand-icon {
margin: auto 0 !important;
}
[b-cnz4kd2u8n] .ant-collapse-content-box {
padding: 0 24px 16px !important;
}
/*
* NOTE: AntDesign Modal's header / body / footer wrap our ChildContent from the OUTSIDE,
* and the portal lives in after AntDesign moves it via JS. Those wrappers have no
* scoped ancestor, so ::deep cannot reach them — those rules live in the