@import '_content/Toolbelt.Blazor.PWA.Updater/Toolbelt.Blazor.PWA.Updater.2drl8nn3fe.bundle.scp.css';

/* /Components/BqBar.razor.rz.scp.css */
.bq-bar-track[b-yo4z5z03ix] {
    position: relative;
    background: #f0f0f0;
    border-radius: 3px;
    height: 18px;
    width: 100%;
    min-width: 90px;
    overflow: hidden;
}

.bq-bar-fill[b-yo4z5z03ix] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    min-width: 2px;
    border-radius: 3px 0 0 3px;
}

.bq-bar-label[b-yo4z5z03ix] {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    padding-left: 6px;
    line-height: 18px;
    color: #222;
}

/* For dark fills — e.g. the rejected satellite red (#8B0000) — that the default label cannot sit on. */
.bq-bar-label--inverse[b-yo4z5z03ix] {
    color: #fff;
}

.bq-bar-tip[role="tooltip"][b-yo4z5z03ix] {
    visibility: hidden;
    position: absolute;
    top: auto;
    left: auto;
    margin-top: 6px;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 1);
    color: var(--color-text-dark);
    border: 1px solid var(--color-border-subtle);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    font-size: 0.8rem;
    line-height: 1.35;
    width: max-content;
    max-width: 25%;
    white-space: normal;
    overflow-wrap: break-word;
    pointer-events: none;
    /* Give some time before hiding so the mouse can leave the bar and enter the tooltip. */
    transition: visibility 0.5s;
    z-index: 2000;
}

/* Arrow, drawn the way Radzen draws its own (.rz-*-tooltip-content:after): a small square rotated 45°
   that inherits the card's background and two of its borders, so after rotation the top and left edges
   become the two visible outward faces of the tip. translate(-50%, -50%) centres it on the tooltip's top
   edge so half protrudes (~5.7px) — it needs .bq-bar-tip's margin-top to stay at 6px or more. */
.bq-bar-tip[role="tooltip"][b-yo4z5z03ix]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    width: 8px;
    height: 8px;
    background-color: inherit;
    border-top: inherit;
    border-left: inherit;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* CSS only, deliberately: a hover handler on a grid cell races the renderer under WASM threads. */
.bq-bar-track[aria-describedby]:hover + .bq-bar-tip[role="tooltip"][b-yo4z5z03ix],
.bq-bar-track[aria-describedby]:focus + .bq-bar-tip[role="tooltip"][b-yo4z5z03ix],
.bq-bar-tip[role="tooltip"]:hover[b-yo4z5z03ix],
.bq-bar-tip[role="tooltip"]:focus[b-yo4z5z03ix] {
    visibility: visible;
}
/* /Components/BqDairySelector.razor.rz.scp.css */
.bq-dairy-selector[b-zd5k74cmso] {
    position: relative;
    height: var(--shell-selector-height, var(--space-12));
    width: var(--shell-selector-width, 13.25rem);
    border: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--shell-selector-radius, var(--radius-xl));
    box-shadow: var(--shell-selector-shadow, 0 2px 8px rgba(0, 0, 0, 0.10));
    backdrop-filter: var(--shell-selector-backdrop, blur(8px));
    padding: 0;
    max-width: var(--shell-selector-max-width, 15vw);
    box-sizing: border-box;
}

/* Match FarmSelector's existing appearance. Shared values live in app.css. */
    .bq-dairy-selector[b-zd5k74cmso]  .bq-dairy-dropdown.e-control-wrapper.e-multiselect {
        height: 100%;
        padding: var(--shell-selector-input-padding-block, var(--rz-input-padding-block)) var(--shell-selector-input-padding-inline, var(--rz-input-padding-inline));
        border: var(--shell-selector-input-border, var(--rz-input-border));
        border-radius: var(--shell-selector-radius, var(--radius-xl));
        background-color: var(--shell-selector-input-background-color, var(--rz-input-background-color));
        box-shadow: var(--shell-selector-input-shadow, var(--rz-input-shadow));
        box-sizing: border-box;
        font-family: inherit;
        line-height: var(--shell-selector-input-line-height, var(--rz-input-line-height));
        transition: var(--shell-selector-input-transition, var(--rz-input-transition));
    }

.bq-dairy-selector[b-zd5k74cmso]  .bq-dairy-dropdown.e-control-wrapper.e-multiselect:not(.e-disabled):hover {
    border: var(--shell-selector-input-hover-border, var(--rz-input-hover-border));
    background-color: var(--shell-selector-input-hover-background-color, var(--rz-input-hover-background-color));
    box-shadow: var(--shell-selector-input-hover-shadow, var(--rz-input-hover-shadow));
}

.bq-dairy-selector[b-zd5k74cmso]  .bq-dairy-dropdown.e-control-wrapper.e-multiselect.e-input-focus {
    border: var(--shell-selector-input-focus-border, var(--rz-input-focus-border));
    background-color: var(--shell-selector-input-focus-background-color, var(--rz-input-focus-background-color));
    box-shadow: var(--shell-selector-input-focus-shadow, var(--rz-input-focus-shadow));
}

.bq-dairy-selector[b-zd5k74cmso]  .bq-dairy-dropdown input.e-multiselect {
    height: auto;
    padding: 0 var(--shell-selector-icon-size, var(--rz-icon-size)) 0 0;
    color: var(--shell-selector-input-value-color, var(--rz-input-value-color));
    font: inherit;
    line-height: inherit;
}

.bq-dairy-selector[b-zd5k74cmso]  .bq-dairy-dropdown input.e-multiselect::placeholder {
    color: var(--shell-selector-input-placeholder-color, var(--rz-input-placeholder-color));
    opacity: 1;
}

.bq-dairy-selector[b-zd5k74cmso]  .bq-dairy-dropdown .e-input-group-icon.e-ddl-icon {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--shell-selector-dropdown-trigger-icon-width, var(--rz-dropdown-trigger-icon-width));
    min-width: var(--shell-selector-dropdown-trigger-icon-width, var(--rz-dropdown-trigger-icon-width));
    height: auto;
    min-height: 0;
    margin-block: var(--shell-selector-dropdown-trigger-icon-margin-block, var(--rz-dropdown-trigger-icon-margin-block));
    margin-inline: var(--shell-selector-dropdown-trigger-icon-margin-inline, var(--rz-dropdown-trigger-icon-margin-inline));
    color: var(--shell-selector-input-value-color, var(--rz-input-value-color));
    font-size: var(--shell-selector-dropdown-trigger-icon-height, var(--rz-dropdown-trigger-icon-height));
}

/* The theme paints a hovered or pressed icon grey with a white glyph; keep the arrow as it is. */
.bq-dairy-selector[b-zd5k74cmso]  .bq-dairy-dropdown .e-input-group-icon.e-ddl-icon:hover,
.bq-dairy-selector[b-zd5k74cmso]  .bq-dairy-dropdown .e-input-group-icon.e-ddl-icon:active {
    background: transparent;
    color: var(--shell-selector-input-value-color, var(--rz-input-value-color));
}

/* Shared selector chevron. */
.bq-dairy-selector[b-zd5k74cmso]  .bq-dairy-dropdown .e-input-group-icon.e-ddl-icon::before {
    content: "arrow_drop_down";
    font-family: var(--shell-selector-icon-font-family, var(--rz-icon-font-family));
    font-style: normal;
    font-weight: var(--shell-selector-icon-weight, var(--rz-icon-weight, inherit));
    line-height: 1;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" var(--shell-selector-icon-fill, var(--rz-icon-fill)), "GRAD" var(--shell-selector-icon-grade, var(--rz-icon-grade)), "opsz" var(--shell-selector-icon-optical-size, var(--rz-icon-optical-size));
}

.bq-dairy-selector[b-zd5k74cmso]  .bq-dairy-dropdown.e-input-group.e-control-wrapper.e-multiselect.e-disabled {
    border: var(--shell-selector-input-disabled-border, var(--rz-input-disabled-border));
    background-color: var(--shell-selector-input-disabled-background-color, var(--rz-input-disabled-background-color));
    box-shadow: var(--shell-selector-input-disabled-shadow, var(--rz-input-disabled-shadow));
}

.bq-dairy-selector[b-zd5k74cmso]  .bq-dairy-dropdown.e-disabled input.e-multiselect,
.bq-dairy-selector[b-zd5k74cmso]  .bq-dairy-dropdown.e-disabled input.e-multiselect::placeholder {
    color: var(--shell-selector-input-disabled-color, var(--rz-input-disabled-color));
}

@media (max-width: 768px) {
    .bq-dairy-selector[b-zd5k74cmso] {
        max-width: var(--shell-selector-mobile-max-width, 45vw);
    }
}

/* MultiSelect has an extra content wrapper; leave the arrow anchored to the input frame and
   centre its inline text, which FarmSelector's input gets for free. */
.bq-dairy-selector[b-zd5k74cmso]  .e-multi-select-wrapper {
    position: static;
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 0;
    padding: 0;
    line-height: inherit;
}
.bq-dairy-selector[b-zd5k74cmso]  .e-multi-searcher { max-width: 100%; min-width: 0; }
.bq-dairy-selector[b-zd5k74cmso]  .e-delim-values {
    padding: 0;
    padding-right: calc(var(--shell-selector-icon-size, var(--rz-icon-size)) + var(--shell-selector-dropdown-trigger-icon-width, var(--rz-dropdown-trigger-icon-width)));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: inherit;
    color: var(--shell-selector-input-value-color, var(--rz-input-value-color));
    line-height: inherit;
}
/* The theme places the clear icon at top: 100% less 2em, which sits low in this taller frame.
   Stretch it over the frame like the arrow and let its flex box centre the glyph. */
.bq-dairy-selector[b-zd5k74cmso]  .bq-dairy-dropdown.e-multiselect .e-multi-select-wrapper .e-clear-icon {
    inset-block: 0;
    height: auto;
    margin-top: 0;
    justify-content: center;
}
.bq-dairy-selector.is-loading[b-zd5k74cmso] { opacity: .65; pointer-events: none; }
/* /Components/EditGrid/BqCaptureModal.razor.rz.scp.css */
.bq-modal-title[b-cvu94thbmo] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.bq-capture-actions[b-cvu94thbmo] {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.bq-capture-status[b-cvu94thbmo] {
    flex: 1 1 auto;
    min-width: 0;
    color: #666;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.bq-capture-status.pending[b-cvu94thbmo] {
    color: #8a5300;
}

.bq-capture-status.success[b-cvu94thbmo],
.bq-capture-status.error[b-cvu94thbmo] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
}

.bq-capture-status.success[b-cvu94thbmo] {
    background: #e7f6ec;
    color: #1b7a3d;
}

.bq-capture-status.error[b-cvu94thbmo] {
    background: #fdecea;
    color: #8b0000;
}

@media (max-width: 768px) {
    .bq-capture-actions[b-cvu94thbmo] {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* The body is a flex row, so its one child, the stack, is stretched to the body's height and that height
   counts as definite. The stack lays its content out in a column and gives the grid what is left, so a
   grid Height of "100%" resolves and the grid scrolls its rows itself: one scroll bar. Making the body a
   column instead leaves that height indefinite, and the body and the grid both scroll. */
.bq-modal-body.bq-capture-body[b-cvu94thbmo] {
    display: flex;
    min-height: 0;
}

.bq-capture-stack[b-cvu94thbmo] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* Written with ::deep so the caller's Body content can use the same classes. */
.bq-capture-body[b-cvu94thbmo]  .bq-grid-state {
    padding: 24px 16px;
    text-align: center;
    color: #555;
    line-height: 1.5;
}

.bq-capture-body[b-cvu94thbmo]  .bq-grid-state--view {
    padding: 0 0 12px;
    text-align: left;
}

.bq-capture-body[b-cvu94thbmo]  .bq-grid-note {
    font-size: 0.8rem;
    color: #666;
}

.bq-capture-body[b-cvu94thbmo]  .bq-grid-note--warn {
    margin-bottom: 8px;
    color: #8a5300;
}

.bq-capture-body[b-cvu94thbmo]  .bq-grid-add-error {
    color: #8b0000;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.bq-capture-body[b-cvu94thbmo]  .bq-grid-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    flex-wrap: wrap;
}
/* /Components/EditGrid/BqEditGrid.razor.rz.scp.css */
/* Grid overflow stays inside its containing layout, with headers pinned while rows scroll. */
.bq-grid-scroll[b-98vn1dmyqk] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid #eee;
    border-radius: 4px;
    scrollbar-gutter: stable;
}

/* The one sizing floor. The containing feature sets it with GridMinWidth. */
.bq-grid-scroll[b-98vn1dmyqk]  .e-grid {
    min-width: var(--bq-grid-min-width, 0);
    border: 0;
}

.bq-grid-scroll[b-98vn1dmyqk]  .e-headercell,
.bq-grid-scroll[b-98vn1dmyqk]  .e-rowcell {
    white-space: nowrap;
}

/* Edit and delete buttons in a modal's row template. */
.bq-grid-scroll[b-98vn1dmyqk]  .bq-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

@media (max-width: 768px) {
    .bq-grid-scroll[b-98vn1dmyqk]  .e-headercell,
    .bq-grid-scroll[b-98vn1dmyqk]  .e-rowcell {
        padding: 6px 4px;
    }
}

/* A cell the row or its Type does not allow editing (BqGridColumn CellClass, or a disabled template). */
.bq-grid-scroll[b-98vn1dmyqk]  .bq-cell--readonly {
    color: var(--fg-disabled);
    background: var(--bg-page);
    cursor: default;
}

/* Cell editing. An editable cell outlines on hover. While a cell is open its whole row takes the side
   menu's selected fill, and the open cell holds a white editor box in a solid frame of the selected blue,
   so it is plain which row and cell are being edited. */
.bq-grid-scroll[b-98vn1dmyqk]  .bq-cell--editable {
    cursor: text;
}

.bq-grid-scroll[b-98vn1dmyqk]  .bq-cell--editable:hover {
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.bq-grid-scroll[b-98vn1dmyqk]  .e-row:has(> .e-editedbatchcell) > .e-rowcell {
    background: var(--nav-active-bg);
}

.bq-grid-scroll[b-98vn1dmyqk]  .e-rowcell.e-editedbatchcell {
    background: var(--bg-surface);
    box-shadow: inset 0 0 0 2px var(--nav-active);
}

/* That frame already shows which cell is open, so its editor drops the Syncfusion theme's blue focus
   border and glow. The :not() list matches the theme's rule, so validation colours still win. */
.bq-grid-scroll[b-98vn1dmyqk]  .e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: var(--border-strong);
    box-shadow: none;
}
/* /Components/FarmSelector.razor.rz.scp.css */
.farm-selector[b-gscsu2k2ko] {
    position: relative;
    height: var(--shell-selector-height, var(--space-12));
    width: var(--shell-selector-width, 13.25rem);
    border: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--shell-selector-radius, var(--radius-xl));
    box-shadow: var(--shell-selector-shadow, 0 2px 8px rgba(0, 0, 0, 0.10));
    backdrop-filter: var(--shell-selector-backdrop, blur(8px));
    padding: 0;
    max-width: var(--shell-selector-max-width, 15vw);
    box-sizing: border-box;
}

/* Preserve the established FarmSelector appearance. Shared values live in app.css. */
    .farm-selector[b-gscsu2k2ko]  .farm-dropdown.e-control-wrapper.e-ddl {
        height: 100%;
        padding: var(--shell-selector-input-padding-block, var(--rz-input-padding-block)) var(--shell-selector-input-padding-inline, var(--rz-input-padding-inline));
        border: var(--shell-selector-input-border, var(--rz-input-border));
        border-radius: var(--shell-selector-radius, var(--radius-xl));
        background-color: var(--shell-selector-input-background-color, var(--rz-input-background-color));
        box-shadow: var(--shell-selector-input-shadow, var(--rz-input-shadow));
        box-sizing: border-box;
        font-family: inherit;
        line-height: var(--shell-selector-input-line-height, var(--rz-input-line-height));
        transition: var(--shell-selector-input-transition, var(--rz-input-transition));
    }

.farm-selector[b-gscsu2k2ko]  .farm-dropdown.e-control-wrapper.e-ddl:not(.e-disabled):hover {
    border: var(--shell-selector-input-hover-border, var(--rz-input-hover-border));
    background-color: var(--shell-selector-input-hover-background-color, var(--rz-input-hover-background-color));
    box-shadow: var(--shell-selector-input-hover-shadow, var(--rz-input-hover-shadow));
}

.farm-selector[b-gscsu2k2ko]  .farm-dropdown.e-control-wrapper.e-ddl.e-input-focus {
    border: var(--shell-selector-input-focus-border, var(--rz-input-focus-border));
    background-color: var(--shell-selector-input-focus-background-color, var(--rz-input-focus-background-color));
    box-shadow: var(--shell-selector-input-focus-shadow, var(--rz-input-focus-shadow));
}

.farm-selector[b-gscsu2k2ko]  .farm-dropdown input.e-input {
    height: auto;
    padding: 0 var(--shell-selector-icon-size, var(--rz-icon-size)) 0 0;
    color: var(--shell-selector-input-value-color, var(--rz-input-value-color));
    font: inherit;
    line-height: inherit;
}

.farm-selector[b-gscsu2k2ko]  .farm-dropdown input.e-input::placeholder {
    color: var(--shell-selector-input-placeholder-color, var(--rz-input-placeholder-color));
    opacity: 1;
}

.farm-selector[b-gscsu2k2ko]  .farm-dropdown .e-input-group-icon.e-ddl-icon {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--shell-selector-dropdown-trigger-icon-width, var(--rz-dropdown-trigger-icon-width));
    min-width: var(--shell-selector-dropdown-trigger-icon-width, var(--rz-dropdown-trigger-icon-width));
    height: auto;
    min-height: 0;
    margin-block: var(--shell-selector-dropdown-trigger-icon-margin-block, var(--rz-dropdown-trigger-icon-margin-block));
    margin-inline: var(--shell-selector-dropdown-trigger-icon-margin-inline, var(--rz-dropdown-trigger-icon-margin-inline));
    color: var(--shell-selector-input-value-color, var(--rz-input-value-color));
    font-size: var(--shell-selector-dropdown-trigger-icon-height, var(--rz-dropdown-trigger-icon-height));
}

/* Shared selector chevron. */
.farm-selector[b-gscsu2k2ko]  .farm-dropdown .e-input-group-icon.e-ddl-icon::before {
    content: "arrow_drop_down";
    font-family: var(--shell-selector-icon-font-family, var(--rz-icon-font-family));
    font-style: normal;
    font-weight: var(--shell-selector-icon-weight, var(--rz-icon-weight, inherit));
    line-height: 1;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" var(--shell-selector-icon-fill, var(--rz-icon-fill)), "GRAD" var(--shell-selector-icon-grade, var(--rz-icon-grade)), "opsz" var(--shell-selector-icon-optical-size, var(--rz-icon-optical-size));
}

.farm-selector[b-gscsu2k2ko]  .farm-dropdown.e-input-group.e-control-wrapper.e-ddl.e-disabled {
    border: var(--shell-selector-input-disabled-border, var(--rz-input-disabled-border));
    background-color: var(--shell-selector-input-disabled-background-color, var(--rz-input-disabled-background-color));
    box-shadow: var(--shell-selector-input-disabled-shadow, var(--rz-input-disabled-shadow));
}

.farm-selector[b-gscsu2k2ko]  .farm-dropdown.e-disabled input.e-input,
.farm-selector[b-gscsu2k2ko]  .farm-dropdown.e-disabled input.e-input::placeholder {
    color: var(--shell-selector-input-disabled-color, var(--rz-input-disabled-color));
}

@media (max-width: 768px) {
    .farm-selector[b-gscsu2k2ko] {
        max-width: var(--shell-selector-mobile-max-width, 45vw);
    }
}
/* /Components/List/BqList.razor.rz.scp.css */
/* The body does not scroll: the cards do, under a fixed toolbar.
   div. outranks the host's .bq-modal-body overflow rule, which has the same class count. */
div.bq-modal-body.bq-list-body[b-nwagzh3goz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

.bq-list-state[b-nwagzh3goz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    text-align: center;
    color: #555;
    line-height: 1.5;
}

.bq-list-note[b-nwagzh3goz] {
    font-size: 0.8rem;
    color: #666;
}

.bq-list-note--warn[b-nwagzh3goz] {
    color: #8a5300;
}

.bq-list-error[b-nwagzh3goz] {
    color: #8b0000;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.bq-list-toolbar[b-nwagzh3goz] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

/* Add on the left, Filter pushed to the right. */
.bq-list-filter-toggle[b-nwagzh3goz] {
    margin-left: auto;
}

.bq-list-count[b-nwagzh3goz] {
    flex: 0 0 auto;
    color: #555;
    font-size: 0.8rem;
}

/* One bordered section per filter column, titled by its legend; Clear filters sits bottom right. */
.bq-list-filters[b-nwagzh3goz] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
    max-height: 40vh;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f7f8fa;
}

.bq-list-filter-groups[b-nwagzh3goz] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.bq-list-filter[b-nwagzh3goz] {
    display: flex;
    flex: 1 1 160px;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 6px 12px 10px;
    border: 1px solid #dfe2e6;
    border-radius: 6px;
    background: #fff;
}

.bq-list-filter legend[b-nwagzh3goz] {
    padding: 0 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #555;
}

.bq-list-option[b-nwagzh3goz] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.bq-list-filter-actions[b-nwagzh3goz] {
    display: flex;
    justify-content: flex-end;
}

/* Vertical only. */
.bq-list-cards[b-nwagzh3goz] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.bq-list-card[b-nwagzh3goz] {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    border-left: 6px solid var(--bq-list-strip, #b0b0b0);
    border-radius: 6px;
    background: #f2f3f5;
    overflow: hidden;
    transition: background-color 0.2s ease;
}

.bq-list-card-content[b-nwagzh3goz] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

/* One continuous card, with only the outside corners rounded. */
.bq-list-card-action[b-nwagzh3goz] {
    box-sizing: border-box;
    flex: 0 0 56px;
    align-self: stretch;
    min-height: 44px;
    margin: 0;
    padding: 10px;
    border-radius: 0 6px 6px 0;
    background: transparent;
}

.bq-list-card-action[b-nwagzh3goz]  .rzi {
    font-size: 1.35rem;
}

/* The card colour at 65% opacity over the white body; the strip keeps it at full strength. */
.bq-list-card--tinted[b-nwagzh3goz] {
    background: color-mix(in srgb, var(--bq-list-strip) 35%, transparent);
}

/* Darkens grey and tinted cards alike. */
.bq-list-card:hover[b-nwagzh3goz] {
    box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.04);
}

.bq-list-card-content:focus-visible[b-nwagzh3goz],
.bq-list-card-action:focus-visible[b-nwagzh3goz] {
    outline: 2px solid var(--nav-focus, #258cfb);
    outline-offset: -2px;
}

.bq-list-card-title[b-nwagzh3goz] {
    font-weight: 600;
}

.bq-list-card-details[b-nwagzh3goz] {
    font-size: 0.85rem;
}

.bq-list-card-status[b-nwagzh3goz] {
    color: #666;
    font-size: 0.8rem;
}

.bq-list-embedded[b-nwagzh3goz] {
    max-height: 300px;
    gap: 4px;
}

.bq-list-embedded .bq-list-card-content[b-nwagzh3goz] {
    padding: 6px 8px;
    font-size: 0.85rem;
}

/* Embedded cards are buttons only when the owner supplies OnOpen. */
.bq-list-embedded div.bq-list-card-content[b-nwagzh3goz] {
    cursor: default;
}

.bq-list-embedded .bq-list-card:hover[b-nwagzh3goz] {
    box-shadow: none;
}
/* /Components/Modals/Grazing/GrazingEditForm.razor.rz.scp.css */
/* One field per row, always: the popup is a portrait column (see GrazingListModal's width). */
.gz-form[b-kf5h9z1w4u] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.gz-field[b-kf5h9z1w4u] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.gz-field label[b-kf5h9z1w4u] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
}

.gz-field-error[b-kf5h9z1w4u],
.gz-form-error[b-kf5h9z1w4u] {
    color: #8b0000;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.gz-note[b-kf5h9z1w4u] {
    color: #666;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

/* Orange, not error red: the dates note is a notice and does not block saving. */
.gz-note--warning[b-kf5h9z1w4u] {
    color: #c2410c;
    font-weight: 600;
}
/* /Components/Modals/ModalPopup.razor.rz.scp.css */
/* Fixed to the viewport: nothing between here and the host backdrop creates a containing block, so the
   layer covers the whole modal behind it. The z-index only competes inside the host's stacking context. */
.bq-popup-backdrop[b-f3p7plcw0j] {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
}

/* The same visual shell as .modal-overlay-panel. The size belongs to ModalBase's parameters. */
.bq-popup-panel[b-f3p7plcw0j] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
}

/* The panel takes focus programmatically only; the controls inside carry the visible focus rings. */
.bq-popup-panel:focus[b-f3p7plcw0j] {
    outline: none;
}

.bq-popup-actions[b-f3p7plcw0j] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

@media (max-width: 768px) {
    .bq-popup-actions[b-f3p7plcw0j] {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}
/* /Components/Modals/OutboxConflict/OutboxConflictModal.razor.rz.scp.css */
.outbox-conflict-note[b-4mw98se7xd] {
    margin-bottom: 8px;
    color: #666;
    font-size: 0.85rem;
}

.outbox-conflict-state[b-4mw98se7xd] {
    padding: 24px 16px;
    color: #555;
    line-height: 1.5;
    text-align: center;
}

.outbox-conflict-error[b-4mw98se7xd] {
    color: #8b0000;
}

.outbox-conflict-actions[b-4mw98se7xd] {
    display: flex;
    gap: 6px;
}

.outbox-conflict-grid-scroll[b-4mw98se7xd] {
    overflow: auto;
    border: 1px solid #eee;
    border-radius: 4px;
}

[b-4mw98se7xd] .outbox-conflict-grid {
    min-width: 980px;
    border: 0;
}

[b-4mw98se7xd] .outbox-conflict-grid .rz-cell-data,
[b-4mw98se7xd] .outbox-conflict-grid .rz-column-title {
    white-space: nowrap;
}
/* /Components/Modals/PastureEvent/BatchRecordsModal.razor.rz.scp.css */
/* Labels, notes and errors match PastureEventEditForm.razor.css. Every blue is the side menu's selected
   blue (--nav-active, --nav-active-bg in app.css), not the Syncfusion theme's. */

/* The stepper sits in the modal header, beside the close button. It stretches to the width it is given,
   so it gets one that shrinks with narrow windows; below 768px only the step numbers show. */
.br-steps[b-o7ag5qt5h9] { width: min(26rem, 40vw); }
@media (max-width: 768px) {
    .br-steps[b-o7ag5qt5h9]  .e-stepper .e-step-text-container { display: none; }
}
.br-steps[b-o7ag5qt5h9]  .e-stepper .e-step-selected .e-indicator,
.br-steps[b-o7ag5qt5h9]  .e-stepper .e-step-completed .e-indicator,
.br-steps[b-o7ag5qt5h9]  .e-stepper .e-step-inprogress .e-indicator {
    background: var(--nav-active);
    color: var(--fg-inverse);
}
.br-steps[b-o7ag5qt5h9]  .e-stepper .e-step-selected:not(.e-step-error) .e-label,
.br-steps[b-o7ag5qt5h9]  .e-stepper .e-step-selected:not(.e-step-error) .e-text,
.br-steps[b-o7ag5qt5h9]  .e-stepper .e-step-completed:not(.e-step-error) .e-label,
.br-steps[b-o7ag5qt5h9]  .e-stepper .e-step-completed:not(.e-step-error) .e-text {
    color: var(--nav-active);
}
.br-steps[b-o7ag5qt5h9]  .e-stepper .e-stepper-progressbar > .e-progressbar-value { background-color: var(--nav-active); }

/* Both columns share five rows (heading, help, search, list, count) through a subgrid, so each row is
   as tall as the taller column's and the two sides line up. The lists take the height the record
   fields leave in the capture stack, and shrink with the modal, so the body itself does not scroll.
   No row has a fixed height. */
.br-lists[b-o7ag5qt5h9] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    column-gap: 16px;
    row-gap: 8px;
}
.br-list[b-o7ag5qt5h9] { display: grid; grid-row: span 5; grid-template-rows: subgrid; min-width: 0; }
.br-field[b-o7ag5qt5h9] { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.br-list-head[b-o7ag5qt5h9] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.br-list label[b-o7ag5qt5h9], .br-field label[b-o7ag5qt5h9] { font-weight: 600; }
.br-help[b-o7ag5qt5h9] { color: var(--fg-muted); font-size: 0.8rem; }
.br-items[b-o7ag5qt5h9] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--border-default);
    border-radius: 6px;
}
.br-items--paddocks[b-o7ag5qt5h9] { gap: 2px; padding: 4px; }
.br-row[b-o7ag5qt5h9] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0.5em 0.75em; }
.br-items--pivots .br-row + .br-row[b-o7ag5qt5h9] { border-top: 1px solid var(--border-subtle); }
.br-items--paddocks .br-row[b-o7ag5qt5h9] { border-radius: 6px; }
.br-row--selected[b-o7ag5qt5h9] { background: var(--nav-active-bg); }
.br-count[b-o7ag5qt5h9] { flex: none; color: var(--fg-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.br-empty[b-o7ag5qt5h9] { padding: 0.5em 0.75em; }
/* Long pivot and paddock names wrap instead of widening the list. */
.br-items[b-o7ag5qt5h9]  .e-checkbox-wrapper { min-width: 0; }
.br-items[b-o7ag5qt5h9]  .e-label { white-space: normal; overflow-wrap: anywhere; }
.br-items[b-o7ag5qt5h9]  .e-checkbox-wrapper .e-frame.e-check,
.br-items[b-o7ag5qt5h9]  .e-checkbox-wrapper .e-frame.e-stop,
.br-items[b-o7ag5qt5h9]  .e-checkbox-wrapper:hover .e-frame.e-check,
.br-items[b-o7ag5qt5h9]  .e-checkbox-wrapper:hover .e-frame.e-stop,
.br-items[b-o7ag5qt5h9]  .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.br-items[b-o7ag5qt5h9]  .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-stop {
    background-color: var(--nav-active);
    border-color: var(--nav-active);
}

.br-fields[b-o7ag5qt5h9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: end;
    margin-top: 12px;
}
/* Below the lists, after a divider; top-aligned so the labels line up when Sub-type shows a note. */
.br-record[b-o7ag5qt5h9] { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-default); align-items: start; }
.br-action[b-o7ag5qt5h9] { justify-content: flex-end; }
/* Apply buttons keep the shared button colours at rest and turn the side menu's blue on hover. */
.br-apply:hover:not(:disabled)[b-o7ag5qt5h9] { background: var(--nav-active-bg); color: var(--nav-active); }
/* The split Apply (all paddocks, or one pivot from its menu): both halves take the shaded Apply look and
   hover, with a thin divider between them and the app's focus outline instead of the theme's shadow.
   Its menu opens inside the cell (AppendTo). Syncfusion writes a left and top measured from the
   screen, which are wrong once the cell is the menu's positioning parent, so these rules replace
   them: the menu always sits just under the button, at the button's width. It no longer flips above
   when there is no room below. Its height stops at four times the cell's (the button's) and the
   rest scrolls, so a long pivot list never runs past the modal. */
.br-action[b-o7ag5qt5h9] { position: relative; }
.br-action[b-o7ag5qt5h9]  .e-dropdown-popup {
    left: 0 !important;
    top: calc(100% + 4px) !important;
    width: 100% !important;
    max-height: 400%;
    overflow-y: auto;
}
.br-action[b-o7ag5qt5h9]  .e-split-btn-wrapper { width: 100%; } /* fills its column, as the plain Apply does */
.br-action[b-o7ag5qt5h9]  .e-split-btn-wrapper .e-split-btn { flex: 1 1 auto; }
.br-action[b-o7ag5qt5h9]  .e-split-btn-wrapper .e-btn {
    border: none;
    background: var(--btn-shade-bg);
    color: var(--btn-shade-color);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
}
.br-action[b-o7ag5qt5h9]  .e-split-btn-wrapper .e-split-btn { padding: 0.45rem 0.7rem 0.45rem 0.9rem; border-radius: 12px 0 0 12px; }
.br-action[b-o7ag5qt5h9]  .e-split-btn-wrapper .e-dropdown-btn {
    margin-left: 0;
    padding: 0.45rem 0.55rem;
    border-left: 1px solid var(--border-strong);
    border-radius: 0 12px 12px 0;
}
.br-action[b-o7ag5qt5h9]  .e-split-btn-wrapper .e-btn:hover:not(:disabled) { background: var(--nav-active-bg); color: var(--nav-active); }
.br-action[b-o7ag5qt5h9]  .e-split-btn-wrapper .e-btn:focus { box-shadow: none; }
.br-action[b-o7ag5qt5h9]  .e-split-btn-wrapper .e-btn:focus-visible { outline: 2px solid var(--nav-focus); outline-offset: 2px; }
.br-action[b-o7ag5qt5h9]  .e-split-btn-wrapper .e-btn:disabled { opacity: 0.55; cursor: default; }

/* Show more / Show less: a small solid pill in the side menu's blue, at the bottom of the Apply panel
   under the note, in the heading's column. */
.br-more[b-o7ag5qt5h9] { grid-column: 1; justify-self: start; padding: 0.3rem 0.75rem; gap: 0.25rem; border-radius: 10px; font-size: 0.8rem; background: var(--nav-active); color: var(--fg-inverse); }
.br-more:hover:not(:disabled)[b-o7ag5qt5h9] { background: var(--color-brand-link); color: var(--fg-inverse); }
.br-more[b-o7ag5qt5h9]  .rzi { font-size: 1.1em; }

/* Inputs show focus with a darker grey border instead of the Syncfusion theme's blue border and glow.
   The :not() list matches the theme's rule, so validation colours still win. */
.br-field[b-o7ag5qt5h9]  .e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
.br-list[b-o7ag5qt5h9]  .e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
.br-common-note[b-o7ag5qt5h9]  .e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: var(--4q-grey);
    box-shadow: none;
}

/* Step 2: the record's summary, the bulk panel and the records table. */
.br-summary[b-o7ag5qt5h9] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-default);
}
/* Each fact reads on one line: its muted label, then the value. */
.br-fact[b-o7ag5qt5h9] { display: flex; align-items: baseline; gap: 8px; font-weight: 600; }
.br-fact--end[b-o7ag5qt5h9] { margin-left: auto; text-align: end; }
/* The heading on the left and the fields on the right. The common note's row lines up
   under both through a subgrid: its label under the heading, its box under the fields. One column on
   narrow windows. */
.br-panel[b-o7ag5qt5h9] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 12px;
    align-items: center;
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: 8px;
}
.br-panel-head[b-o7ag5qt5h9] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.br-panel-title[b-o7ag5qt5h9] { font-size: 1.05rem; font-weight: 600; }
.br-panel .br-fields[b-o7ag5qt5h9] { margin-top: 0; }
.br-common-note[b-o7ag5qt5h9] { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
.br-common-note label[b-o7ag5qt5h9] { font-weight: 600; }
@media (max-width: 768px) {
    .br-panel[b-o7ag5qt5h9] { grid-template-columns: minmax(0, 1fr); }
}
.br-section-head[b-o7ag5qt5h9] { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 600; }
.br-records-head[b-o7ag5qt5h9] { margin: 16px 0 8px; }
.br-help[b-o7ag5qt5h9], .br-section-head .br-help[b-o7ag5qt5h9] { font-weight: normal; }

/* Grid templates: the unit under a heading, the pivot under a paddock name. */
.br-unit[b-o7ag5qt5h9], .br-sub[b-o7ag5qt5h9] { display: block; color: var(--fg-muted); font-size: 0.75rem; font-weight: normal; }
/* The grid zeroes its cells' line height for a fixed row height, which stacks both lines on one; this restores it. */
.br-paddock[b-o7ag5qt5h9] { line-height: 1.2; }
.br-note[b-o7ag5qt5h9] { color: #666; font-size: 0.85rem; font-weight: normal; }
.br-error[b-o7ag5qt5h9] { color: #8b0000; font-size: 0.85rem; overflow-wrap: anywhere; }
/* /Components/Modals/PastureEvent/PastureEventEditForm.razor.rz.scp.css */
.pe-form[b-b0z0y70qur], .pe-field[b-b0z0y70qur] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 4px;
}
.pe-form[b-b0z0y70qur] { gap: 12px; }
.pe-field label[b-b0z0y70qur] { font-weight: 600; }
.pe-note[b-b0z0y70qur] { color: #666; font-size: 0.85rem; }
.pe-error[b-b0z0y70qur] { color: #8b0000; font-size: 0.85rem; overflow-wrap: anywhere; }
/* /Components/Modals/PastureWalk/PastureWalkEditForm.razor.rz.scp.css */
/* One field per row, always: the modal is a portrait column (see PastureWalkModal's width), so the
   fields never share a row and the layout does not change with the viewport. */
.pw-form[b-pscux2pgpu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.pw-field[b-pscux2pgpu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pw-field label[b-pscux2pgpu] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
}

.pw-field-error[b-pscux2pgpu],
.pw-form-error[b-pscux2pgpu] {
    color: #8b0000;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}
/* /Components/Modals/PastureWalk/PastureWalkModal.razor.rz.scp.css */
.pw-saved[b-icjivp4z72] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-radius: 4px;
    background: #e7f6ec;
    color: #1b7a3d;
}

.pw-saved-title[b-icjivp4z72] {
    font-weight: 600;
}
/* /Components/Modals/Satellite/SatelliteStatusModal.razor.rz.scp.css */
@media (max-width: 768px) {
    .sat-action[b-etpzos3r4g] {
        max-width: 100%;
        min-width: 0;
        padding-inline: 4px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}
/* /Components/MonthYearPicker.razor.rz.scp.css */
/* Month/year picker.

   Colours come entirely from the FourthQ design tokens in app.css: brand blue for the year tabs,
   brand green for the month tiles, and one shared "selected" treatment — deep blue-900 with inverse
   text — used for both the active year and the active month, so emphasis reads the same way in both
   rows. Nothing here defines a literal colour that is not a token fallback. */

.myp[b-b68gu9a5mh] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
}

/* Fixed square box with the icon flex-centred (.bq-btn already supplies the flex centring). The
   arrows are Material chevrons, not ‹ › text: a text glyph sits on a baseline at a font-dependent
   height that also scales with font-size, so it never lines up with a neighbour set at a different
   size. An icon glyph is drawn centred in its own em square, so centring the box centres the mark. */
.myp-step[b-b68gu9a5mh] {
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 1;
}

.myp-step[b-b68gu9a5mh]  .rzi {
    font-size: 20px;
}

.myp-label[b-b68gu9a5mh] {
    min-width: 9.5rem;
    justify-content: center;
    white-space: nowrap;
}

/* ── Popup ─────────────────────────────────────────────────────────────────
   Both layers are out of flow, so opening the picker cannot move, resize or
   reflow anything around it. The backdrop is what makes this behave like a
   popup rather than an inline panel: it swallows the next click anywhere on
   screen and closes. */
.myp-backdrop[b-b68gu9a5mh] {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 2000);
    background: transparent;
}

.myp-popup[b-b68gu9a5mh] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: calc(var(--z-modal, 2000) + 1);
    width: min(420px, 92vw);
    max-height: min(72vh, 560px);
    overflow-y: auto;
    padding: var(--space-2, 8px);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-default, #e5e7eb);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
    font-family: var(--app-font-family, inherit);
}

/* ── Year tab strip ───────────────────────────────────────────────────── */
.myp-years[b-b68gu9a5mh] {
    display: flex;
    gap: 2px;
    overflow: hidden;
    border-radius: var(--radius-sm, 4px);
}

.myp-year[b-b68gu9a5mh] {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--space-2, 8px) var(--space-1, 4px);
    border: none;
    background: var(--4q-blue, #0f5aab);
    color: var(--fg-inverse, #fff);
    font-family: inherit;
    font-size: var(--text-sm, 13px);
    font-weight: var(--weight-semi, 600);
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--ease-fast, 150ms ease);
}

.myp-year:hover:not(:disabled)[b-b68gu9a5mh] {
    background: var(--4q-blue-600, #0c4a8e);
}

/* The one emphasis treatment, shared with the selected month tile below. */
.myp-year.is-selected[b-b68gu9a5mh] {
    background: var(--4q-blue-900, #051d3a);
    color: var(--fg-inverse, #fff);
}

.myp-year:disabled[b-b68gu9a5mh] {
    background: var(--4q-grey-200, #d1d5db);
    color: var(--fg-disabled, #9ca3af);
    cursor: default;
}

.myp-year:focus-visible[b-b68gu9a5mh] {
    outline: 2px solid var(--border-focus, #0f5aab);
    outline-offset: -2px;
}

/* "More" is a peer tab that reveals the overflow row; open state reads as pressed, not selected. */
.myp-more[b-b68gu9a5mh] {
    flex: 0 0 auto;
    padding-left: var(--space-3, 12px);
    padding-right: var(--space-3, 12px);
}

/* Open reads as "pressed", not "selected" — it takes the colour of the overflow band it reveals, so
   it cannot be confused with the deep-blue selected year sitting next to it. */
.myp-more.is-open[b-b68gu9a5mh] {
    background: var(--4q-grey-100, #e5e7eb);
    color: var(--fg-primary, #111827);
}

.myp-more.is-open:hover[b-b68gu9a5mh] {
    background: var(--4q-grey-200, #d1d5db);
}

/* Older years, revealed under the tabs. Scrolls horizontally rather than growing the popup. */
.myp-years-overflow[b-b68gu9a5mh] {
    display: flex;
    gap: 2px;
    margin-top: 2px;
    padding: var(--space-2, 8px);
    overflow-x: auto;
    background: var(--4q-grey-100, #e5e7eb);
    border-radius: var(--radius-sm, 4px);
    scrollbar-width: thin;
}

.myp-years-overflow .myp-year[b-b68gu9a5mh] {
    flex: 0 0 auto;
    min-width: 4.25rem;
    border-radius: var(--radius-sm, 4px);
}

/* ── Month grid ───────────────────────────────────────────────────────── */
.myp-months[b-b68gu9a5mh] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-1, 4px);
    margin-top: var(--space-2, 8px);
}

.myp-month[b-b68gu9a5mh] {
    display: flex;
    align-items: flex-start;
    min-height: 62px;
    padding: var(--space-2, 8px);
    border: none;
    border-radius: var(--radius-sm, 4px);
    background: var(--4q-green, #3eb684);
    color: var(--fg-inverse, #fff);
    font-family: inherit;
    font-size: var(--text-sm, 13px);
    font-weight: var(--weight-medium, 500);
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--ease-fast, 150ms ease);
}

.myp-month:hover:not(:disabled)[b-b68gu9a5mh] {
    background: var(--4q-green-600, #2e9466);
}

.myp-month.is-selected[b-b68gu9a5mh] {
    background: var(--4q-blue-900, #051d3a);
    color: var(--fg-inverse, #fff);
    font-weight: var(--weight-bold, 700);
}

.myp-month:disabled[b-b68gu9a5mh] {
    background: var(--4q-grey-100, #e5e7eb);
    color: var(--fg-disabled, #9ca3af);
    cursor: default;
}

.myp-month:focus-visible[b-b68gu9a5mh] {
    outline: 2px solid var(--border-focus, #0f5aab);
    outline-offset: -2px;
}

.myp-note[b-b68gu9a5mh] {
    margin-top: var(--space-2, 8px);
    font-size: var(--text-xs, 11px);
    color: var(--fg-muted, #6b7280);
}

@media (max-width: 768px) {
    .myp-label[b-b68gu9a5mh] {
        min-width: 7.5rem;
    }

    .myp-month[b-b68gu9a5mh] {
        min-height: 48px;
        font-size: var(--text-xs, 11px);
    }

    .myp-year[b-b68gu9a5mh] {
        font-size: var(--text-xs, 11px);
    }
}
/* /Components/Reports/Charts/BarChart.razor.rz.scp.css */
/* The SVG belongs to SfChart, two component levels down, so it carries no scope attribute —
   ::deep is required and matches any descendant. Pairs with the ChartPrimaryXAxis
   LabelRotation="-50" in BarChart.razor. */
.bar-chart[b-b5cnrckcwk]  g[id$="AxisLabels0"] text {
    dominant-baseline: central;
}
/* /Components/Shell/ShellTopRightActions.razor.rz.scp.css */
.shell-top-actions[b-g20gsmrejw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    flex-shrink: 0;
}

/* Status card */
.shell-status-card[b-g20gsmrejw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,0.15));
    backdrop-filter: blur(8px);
    white-space: nowrap;
    box-sizing: border-box;
    flex-shrink: 0;
    /* Button reset — the card is a button so clicking it starts a fetch. */
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.shell-status-card:hover[b-g20gsmrejw] {
    background: #fff;
    box-shadow: var(--shadow-lg, 0 6px 18px rgba(0, 0, 0, 0.2));
}

.shell-status-card:focus-visible[b-g20gsmrejw] {
    outline: 2px solid var(--shell-status-online, #22C55E);
    outline-offset: 2px;
}

/* While a fetch is running the card offers no click affordance. Pointer events are deliberately left
   enabled so the sync icon keeps its own progress tooltip; the click itself is refused in the handler. */
.shell-status-card--busy[b-g20gsmrejw] {
    cursor: default;
}

.shell-status-card--busy:hover[b-g20gsmrejw] {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-md, 0 4px 14px rgba(0, 0, 0, 0.15));
}

.shell-status-card-icon[b-g20gsmrejw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.shell-status-card-text[b-g20gsmrejw] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.shell-status-card-subtitle[b-g20gsmrejw] {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}

.shell-status-dot[b-g20gsmrejw] {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    flex-shrink: 0;
}

.shell-status-dot.online[b-g20gsmrejw] {
    background: var(--shell-status-online, #22C55E);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.shell-status-dot.offline[b-g20gsmrejw] {
    background: var(--shell-status-offline, #EF4444);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

/* Notification */
.shell-notification-wrapper[b-g20gsmrejw] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.shell-notification-button[b-g20gsmrejw] {
    position: relative;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #1f2937;
}

.shell-notification-dot[b-g20gsmrejw] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--shell-status-offline);
    border: 2px solid #fff;
}

.shell-notification-toast-list[b-g20gsmrejw] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(320px, 80vw);
    z-index: 950;
}

.shell-notification-toast[b-g20gsmrejw] {
    position: relative;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
}

.shell-notification-toast-clearable .shell-toast-title[b-g20gsmrejw] {
    padding-right: 26px;
}

.shell-toast-clear-button[b-g20gsmrejw] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

    .shell-toast-clear-button:hover[b-g20gsmrejw],
    .shell-toast-clear-button:focus-visible[b-g20gsmrejw] {
        border-color: rgba(107, 114, 128, 0.65);
        background: transparent;
        color: #374151;
        outline: none;
    }

.shell-toast-title[b-g20gsmrejw] {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.shell-toast-message[b-g20gsmrejw] {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.4;
}

.shell-toast-button-row[b-g20gsmrejw] {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.shell-toast-button[b-g20gsmrejw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    color: #1f2937;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .shell-toast-button:hover:not(:disabled)[b-g20gsmrejw] {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14);
        transform: translateY(-1px);
    }

    .shell-toast-button:active:not(:disabled)[b-g20gsmrejw] {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    }

    .shell-toast-button:focus-visible[b-g20gsmrejw] {
        outline: 2px solid rgba(59, 130, 246, 0.35);
        outline-offset: 2px;
    }

    .shell-toast-button--busy[b-g20gsmrejw] {
        background: rgba(243, 244, 246, 0.98);
        box-shadow: none;
        transform: none;
    }

    .shell-toast-button:disabled[b-g20gsmrejw] {
        cursor: wait;
        opacity: 1;
    }

.shell-toast-button-spinner[b-g20gsmrejw] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(31, 41, 55, 0.22);
    border-top-color: #1f2937;
    border-radius: 50%;
    flex: 0 0 auto;
    animation: shell-toast-spin-b-g20gsmrejw 0.7s linear infinite;
}

@keyframes shell-toast-spin-b-g20gsmrejw {
    to { transform: rotate(360deg); }
}

/* Mobile */
@media (max-width: 768px) {
    .shell-top-actions[b-g20gsmrejw] {
        gap: 6px;
        padding: 4px 6px;
        flex-wrap: wrap;
        justify-content: flex-end;
        /* Leave room for the existing fixed mobile menu button. */
        max-width: calc(100vw - 64px);
    }

    /* Hide the "Offline" text label on small screens; the icon is enough. */
    .shell-status-card-text[b-g20gsmrejw] {
        display: none;
    }

    .shell-status-card[b-g20gsmrejw] {
        padding: 0 10px;
    }

    .shell-notification-toast-list[b-g20gsmrejw] {
        width: min(280px, 90vw);
    }
}
/* /Components/Workspace/DockWorkspaceHost.razor.rz.scp.css */
.dock-workspace-shell[b-z2u5tj0h28] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--dock-surface);
    position: relative; /* containing block for overlay actions in single-tab mode */
}

/* Top bar: always in the DOM; behaviour switches on .has-tabs */
.dock-top-bar[b-z2u5tj0h28] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 52px;
}

/* White bar + border only when multiple tabs are visible */
.dock-top-bar.has-tabs[b-z2u5tj0h28] {
    border-bottom: 1px solid var(--dock-border);
    background: #ffffff;
}

/* Single-tab: top bar collapses to 0 — actions are absolute, so no in-flow height */
.dock-top-bar:not(.has-tabs)[b-z2u5tj0h28] {
    min-height: 0;
}

/* Scrollable tab strip — tabs are bounded by the actions on the right */
.dock-tab-strip[b-z2u5tj0h28] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    min-height: 52px;
    padding: 6px 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

.dock-tab-strip[b-z2u5tj0h28]::-webkit-scrollbar {
    display: none;
}

/* Scroll arrow buttons — hidden until JS detects overflow in that direction */
.dock-tab-scroll-btn[b-z2u5tj0h28] {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--dock-tab-color);
    cursor: pointer;
    flex-shrink: 0;
}

.dock-tab-scroll-btn:hover[b-z2u5tj0h28] {
    background: var(--dock-tab-hover-bg);
    color: var(--dock-tab-dark);
}

.dock-top-bar.can-scroll-left  .dock-tab-scroll-btn--left[b-z2u5tj0h28],
.dock-top-bar.can-scroll-right .dock-tab-scroll-btn--right[b-z2u5tj0h28] {
    display: flex;
}

/* Multi-tab: actions sit inline at the right end of the tab bar */
.dock-bar-actions[b-z2u5tj0h28] {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* Single-tab: actions overlay the content, anchored to .dock-workspace-shell */
.dock-top-bar:not(.has-tabs) .dock-bar-actions[b-z2u5tj0h28] {
    position: absolute;
    top: 0;
    right: 0;
    margin-left: 0;
    z-index: 900;
    transition: right 0.3s ease; /* matches panel transform 0.3s ease */
}

@media (max-width: 768px) {
    /* Push tab strip past the fixed mobile menu button (42px + ~14px left offset). */
    .dock-tab-strip[b-z2u5tj0h28] {
        padding-left: 56px;
    }
}

.dock-tab[b-z2u5tj0h28] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;  /* never compress — strip scrolls instead */
    max-width: 20em;
    min-height: 32px;
    padding: 5px 8px 5px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--dock-tab-color);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.dock-tab:hover[b-z2u5tj0h28] {
    background: var(--dock-tab-hover-bg);
    color: var(--dock-tab-dark);
}

.dock-tab.active[b-z2u5tj0h28] {
    background: var(--dock-tab-active-bg);
    border-color: var(--dock-tab-active-border);
    color: var(--dock-tab-active-color);
    font-weight: 600;
}

.dock-tab-icon[b-z2u5tj0h28] {
    flex: 0 0 auto;
    font-size: 18px;
}

.dock-tab-title[b-z2u5tj0h28] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dock-tab-close[b-z2u5tj0h28] {
    display: inline-flex;
    flex: 0 0 auto;
}

[b-z2u5tj0h28] .dock-tab-close-button {
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    border-radius: 50%;
}

[b-z2u5tj0h28] .dock-tab-close-button .rz-button-box {
    padding: 0;
}

.dock-dirty-dot[b-z2u5tj0h28] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dock-dirty);
    flex: 0 0 auto;
}

.dock-content-surface[b-z2u5tj0h28] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.dock-pane[b-z2u5tj0h28] {
    height: 100%;
    width: 100%;
    overflow: auto;
}

.dock-pane.hidden[b-z2u5tj0h28] {
    display: none;
}

.dock-pane.active[b-z2u5tj0h28] {
    display: block;
}

.dock-empty-state[b-z2u5tj0h28] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dock-empty-color);
    font-size: 0.95rem;
}

[b-z2u5tj0h28] .workspace-sample {
    min-height: 100%;
    padding: 18px;
    background: var(--dock-surface);
    color: var(--dock-tab-dark);
}

[b-z2u5tj0h28] .workspace-sample-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

[b-z2u5tj0h28] .workspace-sample-kicker {
    color: var(--dock-kicker);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

[b-z2u5tj0h28] .workspace-sample-title {
    margin: 2px 0 4px 0;
    color: var(--dock-tab-dark);
    font-size: 1.45rem;
    font-weight: 700;
}

[b-z2u5tj0h28] .workspace-sample-meta {
    color: var(--dock-meta);
    font-size: 0.88rem;
}

[b-z2u5tj0h28] .workspace-sample-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

[b-z2u5tj0h28] .workspace-sample-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

[b-z2u5tj0h28] .workspace-sample-card {
    min-width: 0;
    border: 1px solid var(--dock-card-border);
    border-radius: 8px;
    background: #ffffff;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

[b-z2u5tj0h28] .workspace-sample-card.accent-green {
    border-top: 3px solid var(--dock-accent-green);
}

[b-z2u5tj0h28] .workspace-sample-card.accent-blue {
    border-top: 3px solid var(--dock-accent-blue);
}

[b-z2u5tj0h28] .workspace-sample-card.accent-gold {
    border-top: 3px solid var(--dock-accent-gold);
}

[b-z2u5tj0h28] .workspace-sample-label {
    color: var(--dock-meta);
    font-size: 0.78rem;
    font-weight: 600;
}

[b-z2u5tj0h28] .workspace-sample-value {
    margin-top: 4px;
    color: var(--dock-tab-dark);
    font-size: 1.35rem;
    font-weight: 700;
}

[b-z2u5tj0h28] .workspace-sample-note {
    margin-top: 8px;
    color: var(--dock-meta);
    font-size: 0.82rem;
    line-height: 1.35;
}

[b-z2u5tj0h28] .workspace-sample-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

[b-z2u5tj0h28] .workspace-sample-table th,
[b-z2u5tj0h28] .workspace-sample-table td {
    padding: 9px 8px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

[b-z2u5tj0h28] .workspace-sample-table th {
    color: var(--dock-kicker);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    [b-z2u5tj0h28] .workspace-sample-grid {
        grid-template-columns: 1fr;
    }

    [b-z2u5tj0h28] .workspace-sample-header {
        flex-direction: column;
    }

    [b-z2u5tj0h28] .workspace-sample-toolbar {
        justify-content: flex-start;
    }
}
/* /Components/Workspace/ModalOverlayHost.razor.rz.scp.css */
.modal-overlay-backdrop[b-k4swy2lovv] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The panel is the visual shell only — background, radius, shadow — and hugs whatever
   .bq-modal asks to be. It deliberately declares no width or height of its own: the size
   envelope belongs to the container so a modal can set it per instance (see ModalBase).
   overflow:hidden clips the children to the radius; the scrolling happens in .bq-modal-body. */
.modal-overlay-panel[b-k4swy2lovv] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
}

/* ── Modal size envelope ───────────────────────────────────────────────────
   Five knobs, read from custom properties with the app defaults as fallbacks.
   ModalBase sets any of them inline on this same element, so a modal that
   needs a different size passes a parameter instead of writing CSS — and a
   modal that renders .bq-modal by hand still gets the defaults.

   Bootstrap breakpoints (mobile-first) follow below for width and the two
   heights: each one reads its own custom property and falls back through the
   smaller breakpoints to the always-on default. The media queries have to live
   here because an inline style cannot carry one, and the properties themselves
   (width/min-height/max-height) are only ever set here — never inline — so a
   breakpoint rule can win.

   Do not add a raw width/height here or on .modal-overlay-panel: this is the
   one place the envelope is defined, and a second declaration would fight it. */
.modal-overlay-panel[b-k4swy2lovv]  .bq-modal {
    display: flex;
    flex-direction: column;
    width:      var(--bq-modal-width,      80vw);
    min-width:  var(--bq-modal-min-width,  320px);
    max-width:  var(--bq-modal-max-width,  100vw);
    min-height: var(--bq-modal-min-height, 50vh);
    max-height: var(--bq-modal-max-height, 90vh);
}

@media (min-width: 576px) {
    .modal-overlay-panel[b-k4swy2lovv]  .bq-modal {
        width:      var(--bq-modal-width-sm,      var(--bq-modal-width,      80vw));
        min-height: var(--bq-modal-min-height-sm, var(--bq-modal-min-height, 50vh));
        max-height: var(--bq-modal-max-height-sm, var(--bq-modal-max-height, 90vh));
    }
}

@media (min-width: 768px) {
    .modal-overlay-panel[b-k4swy2lovv]  .bq-modal {
        width:      var(--bq-modal-width-md,      var(--bq-modal-width-sm,      var(--bq-modal-width,      80vw)));
        min-height: var(--bq-modal-min-height-md, var(--bq-modal-min-height-sm, var(--bq-modal-min-height, 50vh)));
        max-height: var(--bq-modal-max-height-md, var(--bq-modal-max-height-sm, var(--bq-modal-max-height, 90vh)));
    }
}

@media (min-width: 992px) {
    .modal-overlay-panel[b-k4swy2lovv]  .bq-modal {
        width:      var(--bq-modal-width-lg,      var(--bq-modal-width-md,      var(--bq-modal-width-sm,      var(--bq-modal-width,      80vw))));
        min-height: var(--bq-modal-min-height-lg, var(--bq-modal-min-height-md, var(--bq-modal-min-height-sm, var(--bq-modal-min-height, 50vh))));
        max-height: var(--bq-modal-max-height-lg, var(--bq-modal-max-height-md, var(--bq-modal-max-height-sm, var(--bq-modal-max-height, 90vh))));
    }
}

@media (min-width: 1200px) {
    .modal-overlay-panel[b-k4swy2lovv]  .bq-modal {
        width:      var(--bq-modal-width-xl,      var(--bq-modal-width-lg,      var(--bq-modal-width-md,      var(--bq-modal-width-sm,      var(--bq-modal-width,      80vw)))));
        min-height: var(--bq-modal-min-height-xl, var(--bq-modal-min-height-lg, var(--bq-modal-min-height-md, var(--bq-modal-min-height-sm, var(--bq-modal-min-height, 50vh)))));
        max-height: var(--bq-modal-max-height-xl, var(--bq-modal-max-height-lg, var(--bq-modal-max-height-md, var(--bq-modal-max-height-sm, var(--bq-modal-max-height, 90vh)))));
    }
}

@media (min-width: 1400px) {
    .modal-overlay-panel[b-k4swy2lovv]  .bq-modal {
        width:      var(--bq-modal-width-xxl,      var(--bq-modal-width-xl,      var(--bq-modal-width-lg,      var(--bq-modal-width-md,      var(--bq-modal-width-sm,      var(--bq-modal-width,      80vw))))));
        min-height: var(--bq-modal-min-height-xxl, var(--bq-modal-min-height-xl, var(--bq-modal-min-height-lg, var(--bq-modal-min-height-md, var(--bq-modal-min-height-sm, var(--bq-modal-min-height, 50vh))))));
        max-height: var(--bq-modal-max-height-xxl, var(--bq-modal-max-height-xl, var(--bq-modal-max-height-lg, var(--bq-modal-max-height-md, var(--bq-modal-max-height-sm, var(--bq-modal-max-height, 90vh))))));
    }
}

.modal-overlay-panel[b-k4swy2lovv]  .bq-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}

.modal-overlay-panel[b-k4swy2lovv]  .bq-modal-title {
    font-size: 1rem;
    font-weight: 600;
}

.modal-overlay-panel[b-k4swy2lovv]  .bq-modal-subtitle {
    font-size: 0.85rem;
    font-weight: 400;
    color: #666;
}

.modal-overlay-panel[b-k4swy2lovv]  .bq-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Square box with a Material close icon flex-centred. It is an icon, not a × text glyph: a text
   glyph sits on a baseline at a font-dependent height that scales with font-size, so it could never
   line up with the differently-sized controls beside it in the header. An icon is drawn centred in
   its own em square, so centring the box centres the mark. */
.modal-overlay-panel[b-k4swy2lovv]  .bq-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    color: #555;
    cursor: pointer;
    line-height: 1;
}

.modal-overlay-panel[b-k4swy2lovv]  .bq-modal-close .rzi {
    font-size: 22px;
    color: inherit;
}

.modal-overlay-panel[b-k4swy2lovv]  .bq-modal-close:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.modal-overlay-panel[b-k4swy2lovv]  .bq-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 16px;
    overflow-y: auto;
}

.modal-overlay-panel[b-k4swy2lovv]  .bq-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #eee;
}

/* On a phone the 80vw gutter is dead space the modal content can't afford. Retune the knob, not
   the property, so the envelope above stays the single source of the modal's size. A width passed
   through ModalBase still wins — it lands inline on the same element. */
@media (max-width: 768px) {
    .modal-overlay-panel[b-k4swy2lovv]  .bq-modal {
        --bq-modal-width: 96vw;
    }

    .modal-overlay-panel[b-k4swy2lovv]  .bq-modal-header,
    .modal-overlay-panel[b-k4swy2lovv]  .bq-modal-body,
    .modal-overlay-panel[b-k4swy2lovv]  .bq-modal-footer {
        padding-left: 12px;
        padding-right: 12px;
    }

    .modal-overlay-panel[b-k4swy2lovv]  .bq-modal-header {
        align-items: flex-start;
    }

    .modal-overlay-panel[b-k4swy2lovv]  .bq-modal-title {
        min-width: 0;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .modal-overlay-panel[b-k4swy2lovv]  .bq-modal-header-actions {
        flex: 0 0 auto;
    }

    .modal-overlay-panel[b-k4swy2lovv]  .bq-modal-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-k75biz6p76] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
}

main[b-k75biz6p76] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    height: 100dvh;
    overflow: hidden;
}

.workspace-content[b-k75biz6p76] {
    height: 100%;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

.top-row[b-k75biz6p76] {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--layout-border);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-k75biz6p76]  a, .top-row[b-k75biz6p76]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-k75biz6p76]  a:hover, .top-row[b-k75biz6p76]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-k75biz6p76]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640px) {
    .top-row[b-k75biz6p76] {
        justify-content: space-between;
    }

    .top-row[b-k75biz6p76]  a, .top-row[b-k75biz6p76]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 769px) {
    .page[b-k75biz6p76] {
        flex-direction: row;
    }

    .sidebar[b-k75biz6p76] {
        width: var(--sidebar-width-desktop);
        height: 100vh;
        transform: none;
    }

    main[b-k75biz6p76] {
        margin-left: var(--sidebar-width-desktop);
    }

    .top-row[b-k75biz6p76] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-k75biz6p76] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

.mobile-menu-btn[b-k75biz6p76] {
    display: none;
}

.mobile-menu-backdrop[b-k75biz6p76] {
    display: none;
}

@media (max-width: 768px) {
    .sidebar[b-k75biz6p76] {
        width: 280px;
        max-width: 82vw;
        height: 100vh;
        transform: translateX(-100%);
        box-shadow: none;
    }

        .sidebar.mobile-open[b-k75biz6p76] {
            transform: translateX(0);
            box-shadow: 0 8px 24px rgba(0,0,0,0.18);
        }

    main[b-k75biz6p76] {
        margin-left: 0;
    }

    .mobile-menu-backdrop[b-k75biz6p76] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1100;
        background: var(--layout-backdrop);
        cursor: pointer;
    }

    .mobile-menu-btn[b-k75biz6p76] {
        display: flex;
        position: fixed;
        top: 0.5rem;
        left: 0.9rem;
        z-index: 4001;
        width: 42px;
        height: 42px;
        border: none;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 4px 14px rgba(0,0,0,0.15);
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        .mobile-menu-btn[b-k75biz6p76]  .rz-icon {
            font-size: 24px;
            color: var(--color-text-body);
        }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.custom-sidebar[b-ro6uv34tfz] {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 1rem 0.5rem;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    z-index: 2000;
    pointer-events: auto;
}

.custom-sidebar-inner[b-ro6uv34tfz] {
    width: 100%;
    max-width: var(--sidebar-width-desktop);
    background: var(--color-surface);
    border-radius: 20px;
    padding: 1rem 0.5rem;
    box-shadow: 0 8px 24px var(--color-shadow-card);
    height: calc(100vh - 2rem);
    height: calc(100dvh - 2rem);
    min-height: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 2001;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-logo[b-ro6uv34tfz] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.sidebar-logo-icon[b-ro6uv34tfz] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #F0F4F8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sidebar-logo-icon img[b-ro6uv34tfz] {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.nav-scroll-region[b-ro6uv34tfz] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.custom-panel-menu[b-ro6uv34tfz] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: transparent;
    border: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.custom-panel-menu[b-ro6uv34tfz]::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Overflow arrows — hidden until the shared scrollArrows helper detects overflow. */
.nav-scroll-btn[b-ro6uv34tfz] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    display: none;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    pointer-events: auto;
}

.nav-scroll-btn:hover[b-ro6uv34tfz] {
    color: #111;
}

.nav-scroll-btn--up[b-ro6uv34tfz] {
    top: 0;
    background: linear-gradient(to bottom, var(--color-surface) 40%, transparent);
}

.nav-scroll-btn--down[b-ro6uv34tfz] {
    bottom: 0;
    background: linear-gradient(to top, var(--color-surface) 40%, transparent);
}

.nav-scroll-region.can-scroll-up   .nav-scroll-btn--up[b-ro6uv34tfz],
.nav-scroll-region.can-scroll-down .nav-scroll-btn--down[b-ro6uv34tfz] {
    display: flex;
}

.sidebar-footer[b-ro6uv34tfz] {
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--nav-footer-border);
    flex: 0 0 auto;
}

.dock-nav-item[b-ro6uv34tfz] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    min-height: 72px;
    padding: 0.75rem 0.35rem;
    border: none;
    border-radius: 16px;
    background: transparent;
    color: var(--color-text-label);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dock-nav-item:hover:not(:disabled)[b-ro6uv34tfz] {
    background: var(--nav-hover-bg);
    color: #111;
}

.dock-nav-item:focus-visible[b-ro6uv34tfz] {
    outline: 2px solid var(--nav-focus);
    outline-offset: 2px;
}

.dock-nav-item:disabled[b-ro6uv34tfz] {
    cursor: default;
    opacity: 0.55;
}

.dock-nav-placeholder:disabled[b-ro6uv34tfz] {
    opacity: 0.7;
}

.dock-nav-icon[b-ro6uv34tfz] {
    font-size: 22px;
    color: var(--color-text-muted);
    line-height: 1;
}

.dock-nav-item:hover:not(:disabled) .dock-nav-icon[b-ro6uv34tfz] {
    color: #111;
}

.dock-nav-text[b-ro6uv34tfz] {
    display: block;
    line-height: 1.15;
    white-space: normal;
}

.dock-nav-logout[b-ro6uv34tfz] {
    color: var(--nav-logout-color);
}

.dock-nav-logout:hover:not(:disabled)[b-ro6uv34tfz] {
    background: var(--nav-danger-bg);
    color: var(--nav-danger);
}

.dock-nav-logout:hover:not(:disabled) .dock-nav-icon[b-ro6uv34tfz] {
    color: var(--nav-danger);
}

/* Active nav item — wired from DockService.ActiveItem */
.dock-nav-item.active[b-ro6uv34tfz] {
    background: var(--nav-active-bg);
    color: var(--nav-active);
    font-weight: 600;
    position: relative;
}

.dock-nav-item.active .dock-nav-icon[b-ro6uv34tfz] {
    color: var(--nav-active);
}

.dock-nav-item.active[b-ro6uv34tfz]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--nav-active);
}

@media (max-width: 768px) {
    .custom-sidebar[b-ro6uv34tfz] {
        padding: 1rem 0.75rem;
        position: relative;
        z-index: 2000;
    }

    .custom-sidebar-inner[b-ro6uv34tfz] {
        max-width: none;
        min-height: 0;
        border-radius: 20px;
        position: relative;
        z-index: 2001;
    }
}
/* /Layout/StandalonePageLayout.razor.rz.scp.css */
:root[b-ccew82ysdn] {
    --sidebar-width: 0;
}

main[b-ccew82ysdn] {
    margin-left: 0 !important; /* Remove sidebar spacer */
}
/* /Pages/Login.razor.rz.scp.css */
:root[b-82jwksjht2] {
    /* Login-specific */
    --login-form-bg: #ffffff;
}

.login-shell[b-82jwksjht2] {
    display: flex;
    min-height: 100vh;
    background: var(--color-page-bg);
}

.login-left[b-82jwksjht2] {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--color-page-bg);
}

.login-right[b-82jwksjht2] {
    flex: 1 1 50%;
    background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-link) 100%);
}

.login-form-wrap[b-82jwksjht2] {
    width: 100%;
    max-width: 380px;
    background: var(--login-form-bg);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 24px var(--color-shadow-card);
}

.login-logo-row[b-82jwksjht2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.login-logo-icon[b-82jwksjht2] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--color-page-bg);
    box-shadow: 0 4px 12px var(--color-shadow-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-body);
    font-size: 20px;
    flex-shrink: 0;
}

.login-heading[b-82jwksjht2] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-body);
    margin: 0;
}

.login-subheading[b-82jwksjht2] {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-bottom: 1.75rem;
}

.login-field[b-82jwksjht2] {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
}

.login-field label[b-82jwksjht2] {
    vertical-align: middle;
    margin-top: 0;
    margin-bottom: 0.35rem;
    font-weight: 500;
    color: var(--color-text-label);
    font-size: 0.875rem;
}

/* The Syncfusion controls below are drawn as the Radzen Material controls they replaced, from Radzen's own
   variables (same approach as FarmSelector). Selectors carry as much weight as the bootstrap5 rules they
   must beat; this file loads after bootstrap5.css, so a tie goes to these rules. */

/* Text boxes — Radzen .rz-textbox (medium). The padding sits on the input, not this wrapper, so the input
   fills the whole box and the browser's autofill colour covers it edge to edge as it did on Radzen. */
.login-field[b-82jwksjht2]  .login-input.e-input-group.e-control-wrapper {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: var(--rz-input-size-md);
    padding: 0;
    overflow: hidden;
    border: var(--rz-input-border);
    border-block-end: var(--rz-input-border-block-end);
    border-radius: var(--rz-input-border-radius);
    box-shadow: var(--rz-input-shadow);
    background-color: var(--rz-input-background-color);
    color: var(--rz-input-value-color);
    font-family: inherit;
    font-size: var(--rz-input-font-size-md);
    line-height: calc(var(--rz-input-size-md) - 2 * var(--rz-input-padding-block-md) - 2 * var(--rz-border-width));
    transition: var(--rz-input-transition);
}

.login-field[b-82jwksjht2]  .login-input.e-input-group.e-control-wrapper:hover:not(.e-disabled) {
    border: var(--rz-input-hover-border);
    border-block-end: var(--rz-input-hover-border-block-end);
    box-shadow: var(--rz-input-hover-shadow);
    background-color: var(--rz-input-hover-background-color);
}

/* The second selector keeps the focus look while the pointer is over the field. */
.login-field[b-82jwksjht2]  .login-input.e-input-group.e-control-wrapper.e-input-focus,
.login-field[b-82jwksjht2]  .login-input.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-disabled) {
    border: var(--rz-input-focus-border);
    border-block-end: var(--rz-input-focus-border-block-end);
    border-radius: var(--rz-input-border-radius);
    box-shadow: var(--rz-input-focus-shadow);
    background-color: var(--rz-input-focus-background-color);
    outline: var(--rz-input-focus-outline);
    outline-offset: var(--rz-input-focus-outline-offset);
}

.login-field[b-82jwksjht2]  .login-input.e-input-group.e-control-wrapper.e-disabled {
    border: var(--rz-input-disabled-border);
    border-block-end: var(--rz-input-disabled-border-block-end);
    box-shadow: var(--rz-input-disabled-shadow);
    background-color: var(--rz-input-disabled-background-color);
    color: var(--rz-input-disabled-color);
    opacity: var(--rz-input-disabled-opacity);
}

.login-field[b-82jwksjht2]  .login-input input.e-input {
    box-sizing: border-box;
    height: 100%;
    padding-block: var(--rz-input-padding-block-md);
    padding-inline: var(--rz-input-padding-inline-md);
    border: 0;
    border-radius: 0;
    text-indent: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

/* Repeat the inset focus ring on the input: an autofill background would otherwise paint over the wrapper's. */
.login-field[b-82jwksjht2]  .login-input.e-input-group.e-control-wrapper.e-input-focus input.e-input {
    box-shadow: var(--rz-input-focus-shadow);
}

.login-field[b-82jwksjht2]  .login-input input.e-input::placeholder {
    color: var(--rz-input-placeholder-color);
    font-size: inherit;
}

.login-field[b-82jwksjht2]  .login-input.e-disabled input.e-input::placeholder {
    color: var(--rz-input-disabled-placeholder-color);
}

/* Required-field messages — Radzen .rz-messages-error. */
.login-required[b-82jwksjht2] {
    display: inline-block;
    box-sizing: border-box;
    color: var(--rz-form-error-color);
    font-size: var(--rz-form-error-font-size);
    padding: var(--rz-validator-text-padding);
}

.login-remember[b-82jwksjht2] {
    display: flex;
    align-items: center;
    margin-top: 0.25rem;
}

/* Remember-me checkbox — Radzen .rz-chkbox-box. */
.login-remember[b-82jwksjht2]  .login-checkbox .e-checkbox + .e-frame {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--rz-checkbox-width);
    height: var(--rz-checkbox-height);
    border: var(--rz-input-border-block-end);
    border-width: var(--rz-checkbox-border-width);
    border-radius: var(--rz-checkbox-border-radius);
    box-shadow: var(--rz-input-shadow);
    background-color: var(--rz-input-background-color);
    line-height: 1;
    transition: var(--rz-transition-all);
}

.login-remember[b-82jwksjht2]  .login-checkbox .e-checkbox + .e-frame:hover {
    border: var(--rz-input-hover-border);
    border-width: var(--rz-checkbox-border-width);
    box-shadow: var(--rz-input-hover-shadow);
    background-color: var(--rz-input-hover-background-color);
}

.login-remember[b-82jwksjht2]  .login-checkbox .e-checkbox + .e-frame.e-check {
    border: var(--rz-checkbox-checked-border);
    background-color: var(--rz-checkbox-checked-background-color);
}

.login-remember[b-82jwksjht2]  .login-checkbox .e-checkbox + .e-frame.e-check:hover {
    border: var(--rz-checkbox-checked-hover-border);
    background-color: var(--rz-checkbox-checked-hover-background-color);
}

.login-remember[b-82jwksjht2]  .login-checkbox .e-checkbox:focus-visible + .e-frame {
    outline: var(--rz-checkbox-focus-outline);
    outline-offset: var(--rz-checkbox-focus-outline-offset);
}

.login-remember[b-82jwksjht2]  .login-checkbox.e-checkbox-disabled .e-checkbox + .e-frame {
    border: var(--rz-input-disabled-border);
    border-width: var(--rz-checkbox-border-width);
    box-shadow: var(--rz-input-disabled-shadow);
    background-color: var(--rz-input-disabled-background-color);
    opacity: var(--rz-input-disabled-opacity);
}

.login-remember[b-82jwksjht2]  .login-checkbox.e-checkbox-disabled .e-checkbox + .e-frame.e-check {
    border: var(--rz-checkbox-checked-disabled-border);
    background-color: var(--rz-checkbox-checked-disabled-background-color);
    opacity: 0.5;
}

/* Material hover halo. */
.login-remember[b-82jwksjht2]  .login-checkbox .e-frame::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    opacity: 0;
    transition: background-color var(--rz-transition), width var(--rz-transition), height var(--rz-transition);
}

.login-remember[b-82jwksjht2]  .login-checkbox:not(.e-checkbox-disabled) .e-frame:hover::after {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--rz-base-400);
    opacity: 0.3;
}

.login-remember[b-82jwksjht2]  .login-checkbox:not(.e-checkbox-disabled) .e-frame.e-check:hover::after {
    background-color: var(--rz-primary);
    opacity: 0.08;
}

/* Same Material Symbols tick as RadzenCheckBox. */
.login-remember[b-82jwksjht2]  .login-checkbox .e-frame.e-check::before {
    content: "check";
    color: var(--rz-checkbox-checked-color);
    font-family: var(--rz-icon-font-family);
    font-size: var(--rz-checkbox-icon-font-size);
    font-style: normal;
    font-weight: var(--rz-icon-weight, inherit);
    line-height: 1;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size);
}

.login-remember[b-82jwksjht2]  .login-checkbox .e-label {
    margin-left: 0.5rem;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

/* Inline messages — match Radzen .rz-messages-error style */
.login-error[b-82jwksjht2],
.login-offline-notice[b-82jwksjht2] {
    display: block;
    color: var(--color-error);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.4rem 0.1rem 0;
    margin: 0;
    line-height: 1.4;
}

.login-status[b-82jwksjht2] {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.4rem 0.1rem 0;
    margin: 0;
    line-height: 1.4;
}

/* Sign-in button — matches the toast-button style from PaddockMap. The width, margin, min-height, letter
   spacing, upper case and 1.25rem line height reproduce what the Radzen Material medium button added. */
[b-82jwksjht2] .login-submit-btn.e-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: var(--rz-button-size-md);
    margin-top: 1.5rem;
    padding: 10px 16px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-text-dark);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: var(--rz-button-line-height);
    letter-spacing: 1.25px;
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

[b-82jwksjht2] .login-submit-btn.e-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14);
    transform: translateY(-1px);
}

[b-82jwksjht2] .login-submit-btn.e-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

[b-82jwksjht2] .login-submit-btn.e-btn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

[b-82jwksjht2] .login-submit-btn.e-btn:disabled {
    cursor: default;
    opacity: 0.55;
    transform: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}

/* Busy state — Radzen's rotating "refresh" icon (medium button size). */
.login-busy-icon[b-82jwksjht2] {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    font-family: var(--rz-icon-font-family);
    font-size: 1.25rem;
    font-style: normal;
    line-height: 1.25rem;
    letter-spacing: normal;
    text-transform: none;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size);
    animation: login-busy-rotation-b-82jwksjht2 700ms linear infinite;
}

@keyframes login-busy-rotation-b-82jwksjht2 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .login-right[b-82jwksjht2] {
        display: none;
    }

    .login-left[b-82jwksjht2] {
        flex: 1 1 100%;
    }

    .login-form-wrap[b-82jwksjht2] {
        padding: 1.75rem 1.25rem;
    }
}
/* /Pages/PaddockMap.razor.rz.scp.css */
.map-container[b-m2gpw4h0vw] {
    /* PaddockMap-specific colours */
    --map-panel-surface: #ffffff;
    --map-panel-border: #ddd;
    --map-panel-header-border: #e5e5e5;
    --map-panel-shadow: rgba(0, 0, 0, 0.15);
    --map-drag-handle: #ccc;
    --map-detail-label: #666;
    --map-detail-muted: #a8a8a8;
    --map-detail-secondary: #949494;
    --map-detail-strong: #000000;
    --map-paddock-info-bg: #b5b5b7;
    --map-paddock-info-color: #45474A;
    --map-growth-bg: #dff3e7;
    --map-growth-color: #3f7f5f;
    --map-soil-bg: #f6dce6;
    --map-soil-color: #9a4f6a;
    --map-fertilizer-bg: #f4ebd7;
    --map-fertilizer-color: #9a7a2f;
    --map-satellite-bg: #e0f4f5;
    --map-satellite-color: #077090;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

[b-m2gpw4h0vw] .leaflet-container {
    width: 100%;
    height: 100%;
}

[b-m2gpw4h0vw] .leaflet-top.leaflet-right {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

[b-m2gpw4h0vw] .leaflet-top.leaflet-right .leaflet-control {
    margin-top: 0;
    margin-bottom: 10px;
}

[b-m2gpw4h0vw] .leaflet-top.leaflet-right .leaflet-control:last-child {
    margin-bottom: 0;
}
[b-m2gpw4h0vw] a.leaflet-control-zoom-in,
[b-m2gpw4h0vw] a.leaflet-control-zoom-out {
    display: none;
}

.details-panel[b-m2gpw4h0vw] {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 0;
    width: var(--side-panel-width, 350px);
    max-width: 90vw;
    height: 100%;
    background: var(--color-page-bg);
    border-left: 1px solid var(--map-panel-border);
    box-shadow: -4px 0 14px var(--map-panel-shadow);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    overflow: hidden;
}

.details-panel.open[b-m2gpw4h0vw] {
    transform: translateX(0);
}

.details-panel-header[b-m2gpw4h0vw] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--map-panel-header-border);
    min-height: 30px;
    background: var(--color-page-bg);
}

.details-panel-header-actions[b-m2gpw4h0vw] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.details-panel-title[b-m2gpw4h0vw] {
    font-size: 1rem;
    font-weight: 600;
}

/* Material close icon in a square flex box, matching the capture button opposite it and the modal
   close buttons. Not a × text glyph: that sits on a baseline at a font-dependent height and never
   lines up with differently-sized controls beside it. 30px matches .paddock-capture-btn and the
   header's own min-height, so the row's height is unchanged. */
.details-panel-close[b-m2gpw4h0vw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.details-panel-close[b-m2gpw4h0vw]  .rzi {
    font-size: 22px;
    color: inherit;
}

.details-panel-body[b-m2gpw4h0vw] {
    flex: 1;
    padding: 1rem;
    min-height: 0;
    background: var(--color-page-bg);
    overflow-y: auto;
    overflow-x: hidden;
}

.detail-item[b-m2gpw4h0vw] {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.detail-label[b-m2gpw4h0vw] {
    font-size: 12px;
    font-weight: 600;
    color: var(--map-detail-label);
    margin-bottom: 2px;
    line-height: 1.2;
}

.detail-value[b-m2gpw4h0vw] {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-body);
    line-height: 1.3;
}

.two-column-details[b-m2gpw4h0vw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    margin-top: 12px;
}

.three-column-details[b-m2gpw4h0vw] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px 9px;
    margin-top: 12px;
}

.panel-section[b-m2gpw4h0vw] {
    padding: 16px;
    margin-bottom: 12px;
    background: var(--map-panel-surface);
    border: none;
    border-radius: 12px;
    height: auto;
    min-height: unset;
    flex: 0 0 auto;
    align-self: start;
}

.panel-section-more[b-m2gpw4h0vw] {
    display: none;
    margin-top: 14px;
}

.panel-section-more.open[b-m2gpw4h0vw] {
    display: block;
}

.panel-section-header[b-m2gpw4h0vw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 12px;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.panel-section-header-left[b-m2gpw4h0vw] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.panel-section-header-icon[b-m2gpw4h0vw] {
    font-size: 18px;
    line-height: 1;
    color: inherit;
}

.panel-section-title[b-m2gpw4h0vw] {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: inherit;
    align-content: center;
}

/* Header colour variants */
.paddock-info-header[b-m2gpw4h0vw] {
    background: var(--map-paddock-info-bg);
    color: var(--map-paddock-info-color);
}
.growth-header[b-m2gpw4h0vw] {
    background: var(--map-growth-bg);
    color: var(--map-growth-color);
}

.soil-header[b-m2gpw4h0vw] {
    background: var(--map-soil-bg);
    color: var(--map-soil-color);
}

.fertilizer-header[b-m2gpw4h0vw] {
    background: var(--map-fertilizer-bg);
    color: var(--map-fertilizer-color);
}

.satellite-header[b-m2gpw4h0vw] {
    background: var(--map-satellite-bg);
    color: var(--map-satellite-color);
}

.grazing-header[b-m2gpw4h0vw] {
    background: #e0e0e0; /* Color.Silver (#C0C0C0) as a pastel: half silver, half white */
    color: #4d4d4d;
}

.pasture-event-header[b-m2gpw4h0vw] {
    background: color-mix(in srgb, var(--4q-lavender) 22%, white);
    color: color-mix(in srgb, var(--4q-lavender) 70%, black);
}

/* Monospace font for nutrient values, dates, and tabular data in the detail panel */
.panel-option-one-smaller-text[b-m2gpw4h0vw] {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
}

.panel-option-one-date[b-m2gpw4h0vw] {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 13px;
}

.panel-section-last[b-m2gpw4h0vw] {
    margin-bottom: 0;
}

.fertilizer-chart[b-m2gpw4h0vw] {
    height: 220px;
    margin-top: 4px;
}

.paddock-chart[b-m2gpw4h0vw] {
    height: 220px;
    margin-top: 4px;
}

.paddock-types-list[b-m2gpw4h0vw] {
    margin-top: 8px;
}

@media (max-width: 768px) {
    .details-panel[b-m2gpw4h0vw] {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: 45vh;
        max-height: 80vh;
        border-left: none;
        border-top: 1px solid var(--map-panel-border);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 14px var(--map-panel-shadow);
        transform: translateY(100%);
        transition: transform 0.3s ease, height 0.3s ease, max-height 0.3s ease;
    }

     .details-panel.open[b-m2gpw4h0vw] {
        transform: translateY(0);
     }

     .details-panel.expanded[b-m2gpw4h0vw] {
        height: 100%;
        max-height: 100%;
        border-radius: 0;
     }

     .details-panel-header[b-m2gpw4h0vw] {
        position: relative;
        padding-top: 1rem;
        min-height: 52px;
     }

    .details-panel-close[b-m2gpw4h0vw] {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }

     .details-panel-drag-area[b-m2gpw4h0vw] {
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: none;
        cursor: pointer;
     }

     .details-panel-drag-handle[b-m2gpw4h0vw] {
        width: 40px;
        height: 4px;
        background: var(--map-drag-handle);
        border-radius: 999px;
     }

     .details-panel-body[b-m2gpw4h0vw] {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
     }
}

.chart-row[b-m2gpw4h0vw] {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 15px;
}

.chart-row .paddock-chart[b-m2gpw4h0vw] {
    width: 100%;
    height: 220px;
}

.value-grid-section[b-m2gpw4h0vw] {
    background: var(--map-panel-surface);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: none;
}

.value-grid-2x2[b-m2gpw4h0vw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    align-items: start;
}

.value-heading[b-m2gpw4h0vw] {
    font-size: 16px;
    font-weight: 500;
    color: var(--map-detail-strong);
    line-height: 1.3;
}

.value-cell[b-m2gpw4h0vw] {
    display: flex;
    font-size: 12px;
    font-weight: 500;
    color: var(--map-detail-secondary);
    line-height: 1.3;
}
.value-cell div.label[b-m2gpw4h0vw] {
    font-weight: 700;
    color: var(--map-detail-strong);
}

.value-grid-2x2 .value-cell:nth-child(2)[b-m2gpw4h0vw],
.value-grid-2x2 .value-cell:nth-child(4)[b-m2gpw4h0vw] {
    text-align: right;
}

.value-grid-action-cell[b-m2gpw4h0vw] {
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.panel-option-one-section[b-m2gpw4h0vw] {
    background: var(--map-panel-surface);
    border-radius: 12px;
    border: none;
}

.panel-option-one-heading[b-m2gpw4h0vw] {
    font-size: 11px;
    font-weight: 500;
    color: var(--map-detail-muted);
    line-height: 1.2;
    margin-bottom: 6px;
}

.panel-option-one-date[b-m2gpw4h0vw] {
    font-size: 15px;
    font-weight: 700;
    color: var(--map-detail-strong);
    line-height: 1.1;
    margin-bottom: 14px;
}

.panel-option-one-subheading[b-m2gpw4h0vw],
.panel-option-one-smaller-text[b-m2gpw4h0vw] {
    margin-bottom: 8px;
}

.panel-option-one-smaller-text[b-m2gpw4h0vw] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--map-detail-strong);
    line-height: 1.3;
}

[b-m2gpw4h0vw] .paddock-types-grid .rz-datatable-thead th,
[b-m2gpw4h0vw] .paddock-types-grid .rz-datatable-thead th .rz-column-title,
[b-m2gpw4h0vw] .paddock-types-grid .rz-cell-data,
[b-m2gpw4h0vw] .paddock-types-grid .rz-grid-table thead th .rz-column-title,
[b-m2gpw4h0vw] .paddock-types-grid .rz-datatable-data td {
    font-size: 12px !important;
    line-height: 1.2 !important;
}

[b-m2gpw4h0vw] .paddock-types-grid .rz-datatable-data td {
    padding: 6px 8px !important;
}

/* Batch Records button: the shell action look (ShellTopRightActions .shell-notification-button), not the
   Syncfusion theme. Level with the sidebar's Sign out; above Leaflet controls (800), under modals (1000). */
.map-container[b-m2gpw4h0vw]  .e-fab.e-btn.bq-map-fab {
    bottom: 2rem;
    left: 16px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    color: #1f2937;
    font-size: 18px;
}

.map-container[b-m2gpw4h0vw]  .e-fab.e-btn.bq-map-fab:hover,
.map-container[b-m2gpw4h0vw]  .e-fab.e-btn.bq-map-fab:active {
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    color: #1f2937;
}

.map-container[b-m2gpw4h0vw]  .e-fab.e-btn.bq-map-fab:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.35);
    outline-offset: 2px;
}

/* Batch Records is desktop only; individual capture stays available on phones. */
@media (max-width: 768px) {
    .map-container[b-m2gpw4h0vw]  .e-fab.e-btn.bq-map-fab {
        display: none;
    }
}
/* /Pages/PaddockRoadTrip.razor.rz.scp.css */
/* Standalone full-screen map. StandalonePageLayout wraps the page in .page > main > article, none of
   which carry a height, so the container claims the viewport directly rather than inheriting one. */
.road-trip-container[b-yxx80kwvth] {
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

[b-yxx80kwvth] .leaflet-container {
    width: 100%;
    height: 100%;
}

/* Match PaddockMap: move the zoom/layers stack off the corner so it clears the status pill. */
[b-yxx80kwvth] .leaflet-top.leaflet-right {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.road-trip-status[b-yxx80kwvth] {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000; /* above Leaflet panes (400) and controls (800) */
    padding: 6px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    font-size: 0.85rem;
    white-space: nowrap;
}

.road-trip-recentre[b-yxx80kwvth] {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background: #1d73f4; /* the "You are here" marker colour, from mapCore.locateUser */
    color: #fff;
    font-size: 0.9rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.road-trip-recentre:hover[b-yxx80kwvth] {
    background: #1560d8;
}
/* /Pages/Reports/TAS/YearToYearSummary/YearlyReport.razor.rz.scp.css */
/* Vertical padding only, as longhands: this rule outranks .container-fluid, so a
   `padding` shorthand here would zero its horizontal gutter and let .row's negative
   margins overflow the page. */
.yearly-report[b-hf487zpa9x] {
    box-sizing: border-box;
    display: grid;
    gap: var(--space-6);
    width: 100%;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
    background: var(--bg-page);
}

.yearly-report-print-area[b-hf487zpa9x] {
    display: grid;
    gap: var(--space-6);
}

/* Second column is a percentage rather than auto so the logo can be sized against the report
   width — which is the page width in print — instead of against its own intrinsic size. */
.yearly-report-print-area header[b-hf487zpa9x] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15%;
    align-items: start;
    gap: var(--space-4);
}

.report-brand[b-hf487zpa9x] {
    display: grid;
    justify-items: end;
    gap: var(--space-3);
}

.report-logo[b-hf487zpa9x] {
    width: 100%;
    height: auto;
}

.report-heading[b-hf487zpa9x] {
    display: grid;
    gap: var(--space-1);
}

.report-toolbar[b-hf487zpa9x] {
    display: flex;
    justify-content: flex-end;
}

.yearly-report-print-area h1[b-hf487zpa9x],
.yearly-report-print-area p[b-hf487zpa9x] {
    margin: 0;
}

.yearly-report-print-area h1[b-hf487zpa9x] {
    color: var(--fg-primary);
    font-size: var(--text-3xl);
    font-weight: var(--weight-semi);
}

.yearly-report-print-area p[b-hf487zpa9x] {
    color: var(--fg-muted);
    font-size: var(--text-base);
}

.report-section[b-hf487zpa9x] {
    display: grid;
    gap: var(--space-4);
}

.report-section h2[b-hf487zpa9x] {
    margin: 0;
    color: var(--fg-primary);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semi);
}

.chart-card[b-hf487zpa9x] {
    min-width: 0;
    padding: var(--space-4);
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.chart-skeleton[b-hf487zpa9x] {
    display: grid;
    grid-template-rows: 20px 1fr 14px;
    gap: var(--space-6);
    height: 420px;
    padding: var(--space-2);
}

.skeleton-legend[b-hf487zpa9x] {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
}

.chart-message[b-hf487zpa9x] {
    display: grid;
    place-content: center;
    gap: var(--space-2);
    min-height: 420px;
    text-align: center;
}

.chart-message h3[b-hf487zpa9x] {
    margin: 0;
    color: var(--fg-primary);
    font-size: var(--text-xl);
    font-weight: var(--weight-semi);
}

.chart-message-error p[b-hf487zpa9x] {
    color: var(--status-error);
}

.report-state[b-hf487zpa9x] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    color: var(--fg-muted);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.report-state-error[b-hf487zpa9x] {
    color: var(--status-error);
}

@media (max-width: 640px) {
    .yearly-report[b-hf487zpa9x] {
        gap: var(--space-4);
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
    }

    .yearly-report-print-area[b-hf487zpa9x] {
        gap: var(--space-4);
    }

    .yearly-report-print-area header[b-hf487zpa9x] {
        grid-template-columns: 1fr;
    }

    /* Single column here, so 25% of the report no longer applies — cap the logo instead. */
    .report-brand[b-hf487zpa9x] {
        justify-items: start;
    }

    .report-logo[b-hf487zpa9x] {
        display: none;
    }

    .report-toolbar[b-hf487zpa9x] {
        justify-content: flex-start;
    }

    .chart-card[b-hf487zpa9x] {
        padding: var(--space-2);
    }
}

@media print {
    .yearly-report[b-hf487zpa9x],
    .yearly-report-print-area[b-hf487zpa9x] {
        display: block;
        background: #ffffff;
    }

    /* Two columns are kept: the toolbar is hidden but the logo still occupies the right one,
       so the 25% keeps it at a quarter of the sheet. */
    .yearly-report-print-area header[b-hf487zpa9x] {
        margin-bottom: var(--space-6);
    }

    /* Grid and flex containers are not fragmented by Firefox, so a .row that does not fit
       under its heading moves to the next sheet whole and strands the <h2> on a page of its
       own. Both containers become plain block boxes for print and the columns are floated —
       floats fragment, and unlike inline-block they do not wrap on the whitespace between
       elements. The grid `gap` goes with them, so spacing is margins from here on. */
    .report-section[b-hf487zpa9x] {
        display: block;
    }

    /* flow-root, not block + a clearing ::after: the generated clear box has to come after
       every float, so when a section's last row ends near the bottom of a sheet the clearfix
       lands on the next one — and with break-before: page moving the following section past
       it, that sheet contains nothing but an empty box. A block formatting context contains
       the floats without generating anything that can be paginated on its own. */
    .report-section > .row[b-hf487zpa9x] {
        display: flow-root;
    }

    .report-section > .row > div[b-hf487zpa9x] {
        float: left;
        margin-bottom: var(--space-4);
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .report-section > .row > .col-md-6[b-hf487zpa9x] {
        width: 50%;
    }

    /* Full-width charts clear the pair above them rather than sitting beside one. */
    .report-section > .row > .col-12:not(.col-md-6)[b-hf487zpa9x] {
        float: none;
        clear: both;
        width: 100%;
    }

    .chart-card[b-hf487zpa9x] {
        overflow: visible;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .chart-card[b-hf487zpa9x]  .e-chart {
        height: auto !important;
    }

    /* Absolute, not dvh: viewport units resolve against the page box in Chromium but their
       paged-media behaviour is unspecified in Firefox and Safari. The trade is that this cap
       does not scale with paper size — it is a fixed height on every sheet. */
    .chart-card[b-hf487zpa9x]  svg {
        width: 100%;
        height: auto;
        max-height: 65mm;
    }

    .chart-card[b-hf487zpa9x]  [id$="_tooltip"] {
        display: none !important;
    }

    .report-section h2[b-hf487zpa9x] {
        margin-bottom: var(--space-4);
        break-after: avoid;
        page-break-after: avoid;
    }
}