/*
    ProBook.Blazor.Controls styles. Served as _content/ProBook.Blazor.Controls/pb-controls.css.

    The look matches the existing Syncfusion forms (app.scss, .xt-form): 44px outlined boxes with a notched floating
    label, red when invalid, green when filled and valid, 14px reserved above each box for the floated label.
    Every colour and size is a --pb-* custom property so a theme can change it in one place.
    Everything is scoped to pb- classes; nothing here styles another library's markup.
*/
:root {
    --pb-font-size: 14px;
    --pb-text: #212529;
    --pb-muted: #6c757d;
    --pb-placeholder: #adb5bd; /* much lighter than a value, so an empty box never reads as filled in */
    --pb-surface: #fff;
    --pb-field-backdrop: var(--pb-surface); /* what a field sits on: the floated label's top half takes it */
    --pb-border: #ced4da;
    --pb-radius: 4px;
    --pb-box-height: 44px;
    --pb-label-gap: 14px;
    --pb-focus-border: #86b7fe;
    --pb-focus-ring: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    --pb-accent: #0d6efd;
    --pb-invalid-border: #e4707c;
    --pb-invalid-surface: #fef7f8;
    --pb-invalid-text: #dc3545;
    --pb-filled-border: #2eaa63;
    --pb-filled-surface: #f7fdfa;
    --pb-disabled-surface: #e9ecef;
    --pb-unavailable-surface: #dee2e6; /* calendar days that cannot be chosen */
    --pb-readonly-surface: #f8f9fa;
    --pb-required: #dc3545;
    --pb-gap-x: 16px;
    --pb-gap-y: 4px;
}

/* ---------- Field shell ---------- */
.pb-field {
    position: relative;
    font-size: var(--pb-font-size);
    color: var(--pb-text);
    margin-bottom: 4px;
}

.pb-field .validation-message {
    color: var(--pb-invalid-text);
    font-size: 0.8em;
    margin-top: 2px;
}

.pb-field__help {
    color: var(--pb-muted);
    font-size: 0.8em;
    margin-top: 2px;
}

.pb-field__required {
    color: var(--pb-required);
    margin-left: 2px;
}

/* ---------- Box controls (text, number, later date and lookup) ---------- */
.pb-field--box {
    --pb-box-surface: var(--pb-surface);
    --pb-box-border: var(--pb-border);
    padding-top: var(--pb-label-gap);
}

/* A box that never has a label (a grid filter, a search box in a header): no space kept for one. Opt-in, so a form row
   that mixes labelled and unlabelled fields stays aligned. */
.pb-field--box.pb-field--compact {
    padding-top: 0;
}

/* A box in a grid's filter row or toolbar: the height of the grid's own boxes beside it (use with pb-field--compact). */
.pb-field--box.pb-field--dense {
    --pb-box-height: 32px;
    margin-bottom: 0;
}

/* The grid sizes the inputs in its filter cells itself; the box's own height wins. */
.pb-field--box.pb-field--dense .pb-field__box > .pb-field__input {
    height: calc(var(--pb-box-height) - 2px);
}

.pb-field--filled {
    --pb-box-surface: var(--pb-filled-surface);
    --pb-box-border: var(--pb-filled-border);
}

/* Read-only: a quiet surface and a plain cursor; the value can still be focused, selected and copied. */
.pb-field--readonly {
    --pb-box-surface: var(--pb-readonly-surface);
    --pb-box-border: var(--pb-border);
}

.pb-field--readonly .pb-field__input {
    cursor: default;
}

.pb-field--invalid {
    --pb-box-surface: var(--pb-invalid-surface);
    --pb-box-border: var(--pb-invalid-border);
}

.pb-field--disabled {
    --pb-box-surface: var(--pb-disabled-surface);
    --pb-box-border: var(--pb-border);
}

.pb-field__box {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: var(--pb-box-height);
    background: var(--pb-box-surface);
    border: 1px solid var(--pb-box-border);
    border-radius: var(--pb-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.pb-field__box:focus-within {
    border-color: var(--pb-focus-border);
    box-shadow: var(--pb-focus-ring);
}

.pb-field--invalid .pb-field__box:focus-within {
    border-color: var(--pb-invalid-border);
}

/* The part of a typed date that is wrong (31 in 31/02/2026), drawn over the box's text by pb-date-mark.js: an input's
   text cannot be styled in part (Chris, 2026-10-19). It goes once the text is changed. */
.pb-date-mark {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    border-radius: 2px;
    background: color-mix(in srgb, var(--pb-invalid-border) 25%, transparent);
    box-shadow: inset 0 -2px 0 var(--pb-invalid-border);
}

/* Read-only and disabled fields never look selected: a click (or Tab) still focuses the value so it can be copied, but
   the box keeps its quiet border and label. */
.pb-field--readonly .pb-field__box:focus-within,
.pb-field--disabled .pb-field__box:focus-within {
    border-color: var(--pb-box-border);
    box-shadow: none;
}

.pb-field--readonly .pb-field__box:focus-within .pb-field__label,
.pb-field--disabled .pb-field__box:focus-within .pb-field__label {
    color: var(--pb-muted);
}

/* An empty read-only or disabled box keeps its label resting in the box when clicked, as if it had not been. */
:is(.pb-field--readonly, .pb-field--disabled):not(.pb-field--has-value, .pb-field--float) .pb-field__box:focus-within .pb-field__label {
    top: 50%;
    left: 12px;
    padding: 0;
    font-size: inherit;
    background: transparent;
    color: var(--pb-placeholder);
}

:is(.pb-field--readonly, .pb-field--disabled):not(.pb-field--has-value, .pb-field--float) .pb-field__box:focus-within .pb-field__label::before {
    content: none;
}

:is(.pb-field--readonly, .pb-field--disabled):not(.pb-field--has-value, .pb-field--float) .pb-field__box--multiline:focus-within .pb-field__label {
    top: 21px;
}

/* A Pb field shows its own validity (box, label, marks); the app's Blazor-template outlines on the .valid.modified /
   .invalid classes (app.css, RevA) are not drawn around the elements that carry those classes. Important because the app rule is more
   specific than any single Pb class and its stylesheet order is not fixed. */
.pb-field :is(.pb-field__input, .pb-check__input, .pb-choice).valid.modified,
.pb-field :is(.pb-field__input, .pb-check__input, .pb-choice).invalid {
    outline: none !important;
}

.pb-field__input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: calc(var(--pb-box-height) - 2px);
    padding: 0 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-overflow: ellipsis; /* text too long for the box ends in "…" rather than being cut off at a button */
}

/* A button after the text (clear, calendar, clock, caret) has its own space around its icon, so the text runs closer to it. */
.pb-field__box:has(> .pb-field__clear, > .pb-field__icon-button) > .pb-field__input {
    padding-right: 4px;
}

.pb-field__box--multiline .pb-field__input {
    height: auto;
    min-height: calc(var(--pb-box-height) - 2px);
    padding: 11px 12px;
    resize: vertical;
}

.pb-field__input:disabled {
    cursor: not-allowed;
}

/* A search box (PbTextType.Search) has the field's own clear button: the browser's would show a second one. */
.pb-field__input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.pb-field__input--number {
    font-variant-numeric: tabular-nums;
}

/* Floating label: inside the box when empty, notched into the top border when focused, filled or with a placeholder. */
.pb-field__label {
    position: absolute;
    left: 12px;
    top: 50%;
    max-width: calc(100% - 26px);
    transform: translateY(-50%);
    color: var(--pb-placeholder); /* resting in an empty box it stands in for a placeholder */
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px;
    transition: top 0.12s ease, font-size 0.12s ease, left 0.12s ease;
}

.pb-field__box--multiline .pb-field__label {
    top: 21px;
}

.pb-field__box:focus-within .pb-field__label,
.pb-field--has-value .pb-field__label,
.pb-field--float .pb-field__label {
    top: 0;
    left: 8px;
    padding: 0 6px;
    font-size: 12px;
    z-index: 0; /* its own layer, so the backdrop half below sits behind the text */
    background-color: var(--pb-box-surface);
    color: var(--pb-muted);
}

/* The label sits on the top border: its top half is the colour behind the field (hiding the border line under the text)
   and its bottom half the box's own, so the box keeps one colour and the label only overlays it. Plain background
   colours rather than a gradient, so colour-changing extensions such as Dark Reader recolour both halves. */
.pb-field__box:focus-within .pb-field__label::before,
.pb-field--has-value .pb-field__label::before,
.pb-field--float .pb-field__label::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50%;
    z-index: -1;
    background-color: var(--pb-field-backdrop);
}

/* Dark Reader recolours the label's own background but not this half, which would stay white on its dark page: there the
   label keeps the box colour only, as the dark box and dark page are close enough (the box in the selector outranks the
   focused rule). */
html[data-darkreader-scheme="dark"] .pb-field__box .pb-field__label::before {
    content: none;
}

.pb-field__input::placeholder {
    color: var(--pb-placeholder);
    opacity: 1;
}

.pb-field__box:focus-within .pb-field__label {
    color: var(--pb-accent);
}

.pb-field--invalid .pb-field__label {
    color: var(--pb-invalid-border);
}

/* Clear button */
.pb-field__clear {
    flex: 0 0 auto;
    width: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pb-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.pb-field__clear:hover {
    color: var(--pb-text);
}

/* Spin buttons */
.pb-field__spin {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--pb-border);
}

.pb-field__spin-button {
    flex: 1 1 50%;
    width: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pb-muted);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
}

.pb-field__spin-button:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.05);
    color: var(--pb-text);
}

.pb-field__spin-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ---------- Checkbox and switch ---------- */
.pb-field--check {
    align-items: flex-start; /* keep a label-before checkbox at the start of its cell, not stretched to the far side */
    padding-top: var(--pb-label-gap);
    min-height: calc(var(--pb-box-height) + var(--pb-label-gap));
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pb-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 0 0;
    cursor: pointer;
    user-select: none;
}

.pb-check--label-before {
    flex-direction: row-reverse;
}

.pb-check__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.pb-check__mark {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1px solid var(--pb-border);
    border-radius: 3px;
    background: var(--pb-surface);
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.pb-check__input:checked + .pb-check__mark {
    background: var(--pb-accent) center / 12px 12px no-repeat
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M3 8.5l3.2 3.2L13 5'/%3e%3c/svg%3e");
    border-color: var(--pb-accent);
}

.pb-check__input:focus-visible + .pb-check__mark {
    box-shadow: var(--pb-focus-ring);
    border-color: var(--pb-focus-border);
}

.pb-check__input:disabled ~ * {
    cursor: not-allowed;
}

.pb-check__input:disabled + .pb-check__mark {
    opacity: 0.6;
}

.pb-field--invalid .pb-check__mark {
    border-color: var(--pb-invalid-border);
}

/* Switch: the mark becomes a track with a knob. */
.pb-check--switch .pb-check__mark {
    position: relative;
    width: 34px;
    height: 18px;
    border-radius: 9px;
}

.pb-check--switch .pb-check__mark::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pb-muted);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.pb-check--switch .pb-check__input:checked + .pb-check__mark {
    background: var(--pb-accent);
}

.pb-check--switch .pb-check__input:checked + .pb-check__mark::after {
    transform: translateX(16px);
    background: #fff;
}

.pb-check__state {
    color: var(--pb-muted);
}

/* ---------- Groups: radio, toggle buttons, checkbox list ---------- */
.pb-field--group {
    padding-top: 2px;
}

.pb-field__caption {
    color: var(--pb-muted);
    font-size: 12px;
    margin-bottom: 4px;
}

.pb-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    min-height: 32px;
    align-items: center;
}

.pb-choice--vertical {
    flex-direction: column;
    align-items: flex-start;
}

.pb-choice__option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.pb-choice__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.pb-choice--radio .pb-choice__mark {
    width: 18px;
    height: 18px;
    border: 1px solid var(--pb-border);
    border-radius: 50%;
    background: var(--pb-surface);
}

.pb-choice--radio .pb-choice__input:checked + .pb-choice__mark {
    border: 5px solid var(--pb-accent);
}

/* A single radio option (PbRadio): sits inline like a checkbox. */
.pb-choice--single {
    display: inline-flex;
    min-height: 24px;
}

.pb-choice__option--label-before {
    flex-direction: row-reverse;
}

.pb-choice__input:focus-visible + .pb-choice__mark {
    box-shadow: var(--pb-focus-ring);
}

.pb-choice__option--disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.pb-field--invalid .pb-choice--radio .pb-choice__mark {
    border-color: var(--pb-invalid-border);
}

/* Toggle group: a segmented row of buttons. */
.pb-choice--buttons {
    gap: 0;
}

.pb-choice--buttons .pb-choice__mark {
    display: none;
}

.pb-choice--buttons .pb-choice__option {
    padding: 0 14px;
    height: 36px;
    border: 1px solid var(--pb-border);
    margin-left: -1px;
    background: var(--pb-surface);
}

.pb-choice--buttons .pb-choice__option:first-child {
    margin-left: 0;
    border-radius: var(--pb-radius) 0 0 var(--pb-radius);
}

.pb-choice--buttons .pb-choice__option:last-child {
    border-radius: 0 var(--pb-radius) var(--pb-radius) 0;
}

.pb-choice--buttons .pb-choice__option--selected {
    position: relative;
    z-index: 1;
    background: var(--pb-accent);
    border-color: var(--pb-accent);
    color: #fff;
}

.pb-choice--buttons .pb-choice__option:has(.pb-choice__input:focus-visible) {
    z-index: 2;
    box-shadow: var(--pb-focus-ring);
}

.pb-choice--buttons.pb-choice--vertical .pb-choice__option {
    margin-left: 0;
    margin-top: -1px;
    width: 100%;
    border-radius: 0;
}

.pb-field--invalid .pb-choice--buttons .pb-choice__option {
    border-color: var(--pb-invalid-border);
}

.pb-check--disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ---------- Form layout ---------- */
.pb-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--pb-gap-y) var(--pb-gap-x);
    align-items: start;
}

/* Spans set the end of the placement (span N) so BeginRow can set its start (grid-column-start: 1) independently. */
.pb-form-item,
.pb-form-group {
    /* Custom properties inherit: reset them so an item inside a group with SpanMd="6" does not take the group's
       spans. An item's own inline values still win over this rule. */
    --pb-span: initial;
    --pb-span-sm: initial;
    --pb-span-md: initial;
    --pb-span-lg: initial;
    --pb-span-xl: initial;
    grid-column-end: span var(--pb-span, 12);
    min-width: 0;
}

.pb-form-grid[hidden] {
    display: none;
}

@media (min-width: 576px) {
    .pb-form-item,
    .pb-form-group {
        grid-column-end: span var(--pb-span-sm, var(--pb-span, 12));
    }
}

@media (min-width: 768px) {
    .pb-form-item,
    .pb-form-group {
        grid-column-end: span var(--pb-span-md, var(--pb-span-sm, var(--pb-span, 12)));
    }
}

@media (min-width: 992px) {
    .pb-form-item,
    .pb-form-group {
        grid-column-end: span var(--pb-span-lg, var(--pb-span-md, var(--pb-span-sm, var(--pb-span, 12))));
    }
}

@media (min-width: 1200px) {
    .pb-form-item,
    .pb-form-group {
        grid-column-end: span var(--pb-span-xl, var(--pb-span-lg, var(--pb-span-md, var(--pb-span-sm, var(--pb-span, 12)))));
    }
}

.pb-form-group {
    margin: 8px 0 4px;
    padding: 4px 12px 8px;
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius);
}

.pb-form-group__caption {
    float: none;
    width: auto;
    margin: 0;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pb-text);
}

.pb-form-group__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.pb-form-group__chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.pb-form-group--collapsed .pb-form-group__chevron {
    transform: rotate(-45deg);
}

.pb-form-group--collapsed {
    padding-bottom: 4px;
}

.pb-form-group__error {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
}

.pb-form-group__error-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pb-invalid-text);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}

.pb-form-group__error-mark:focus-visible {
    outline: 0;
    box-shadow: var(--pb-focus-ring);
}

/* The error list: shown while the mark is hovered or focused. */
.pb-form-group__error-tip {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1050;
    display: none;
    min-width: 220px;
    max-width: 420px;
    padding: 6px 10px;
    border: 1px solid var(--pb-invalid-border);
    border-radius: var(--pb-radius);
    background: var(--pb-surface);
    color: var(--pb-text);
    font-size: 12px;
    font-weight: 400;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pb-form-group__error-tip ul {
    margin: 0;
    padding-left: 16px;
}

/* Hover, keyboard focus, or a tap (which focuses the button without :focus-visible) shows the list; leaving closes it. */
.pb-form-group__error:hover .pb-form-group__error-tip,
.pb-form-group__error-mark:focus + .pb-form-group__error-tip {
    display: block;
}

.pb-form-group--invalid {
    border-color: var(--pb-invalid-border);
}

.pb-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------- Lookups, selects and the popup list ---------- */
.pb-lookup .pb-field__input {
    cursor: text;
}

.pb-lookup .pb-field__input[readonly] {
    cursor: pointer;
}

.pb-field--readonly .pb-lookup .pb-field__input[readonly] {
    cursor: default;
}

.pb-field__icon-button {
    flex: 0 0 auto;
    width: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pb-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.pb-field__icon-button:hover:not(:disabled) {
    color: var(--pb-text);
}

.pb-field__icon-button:disabled {
    cursor: default;
    opacity: 0.5;
}

/* Caret: a CSS chevron that turns when the list is open. */
.pb-field__caret::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.15s ease;
}

.pb-lookup--open .pb-field__caret::before {
    transform: translateY(2px) rotate(-135deg);
}

.pb-lookup__inactive {
    align-self: center;
    margin-right: 4px;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--pb-disabled-surface);
    color: var(--pb-muted);
    font-size: 11px;
    white-space: nowrap;
}

.pb-popup {
    z-index: 1060;
    overflow-y: auto;
    padding: 4px 0;
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius);
    background: var(--pb-surface);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    font-size: var(--pb-font-size);
    color: var(--pb-text);
}

.pb-popup__divider {
    height: 1px;
    margin: 4px 0;
    background: var(--pb-border);
}

.pb-popup__status {
    padding: 8px 12px;
    color: var(--pb-muted);
}

.pb-popup__status--error {
    color: var(--pb-invalid-text);
}

/* A list still being read shows a small spinner beside "Loading..." (user, 2026-10-15) */
.pb-popup__status--loading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pb-popup__status--loading::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 2px solid var(--pb-accent);
    border-right-color: transparent;
    border-radius: 50%;
    animation: pb-spin 0.75s linear infinite;
}

@keyframes pb-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pb-popup__status--loading::before {
        animation-duration: 2.4s;
    }
}

.pb-popup__retry {
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* Refresh: shown while the box has the focus (the list can be read again at any time), or always when asked for */
.pb-field__refresh {
    display: none;
}

.pb-field__box:focus-within > .pb-field__refresh,
.pb-field__refresh--always {
    display: inline-block;
}

.pb-popup__more {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border: 0;
    background: transparent;
    color: var(--pb-accent);
    text-align: left;
    cursor: pointer;
}

.pb-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 12px;
    cursor: pointer;
    user-select: none;
}

.pb-option--active {
    background: rgba(13, 110, 253, 0.1);
}

.pb-option--selected {
    font-weight: 600;
}

.pb-option--pinned {
    background: rgba(46, 170, 99, 0.06);
}

.pb-option--active.pb-option--pinned {
    background: rgba(13, 110, 253, 0.1);
}

.pb-option--disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.pb-option__content {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-option__inactive {
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--pb-disabled-surface);
    color: var(--pb-muted);
    font-size: 11px;
    font-weight: 400;
}

.pb-option--inactive .pb-option__content {
    color: var(--pb-muted);
}

.pb-option__check {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 1px solid var(--pb-border);
    border-radius: 3px;
    background: var(--pb-surface);
}

.pb-option--selected .pb-option__check {
    background: var(--pb-accent) center / 11px 11px no-repeat
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M3 8.5l3.2 3.2L13 5'/%3e%3c/svg%3e");
    border-color: var(--pb-accent);
}

/* Colour picker: the stored colour's swatch, which opens the palette, and the hex text. The
   checkerboard behind a swatch shows through a colour that is not fully opaque. */
.pb-color {
    align-items: center;
    --pb-color-checks: repeating-conic-gradient(#d0d0d0 0% 25%, #ffffff 0% 50%) 0 0 / 8px 8px;
}

.pb-color__swatch {
    position: relative;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-left: 8px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--pb-border);
    border-radius: 4px;
    background: var(--pb-color-checks);
    cursor: pointer;
}

.pb-color__swatch:disabled {
    cursor: default;
}

.pb-color__fill {
    position: absolute;
    inset: 0;
}

.pb-color .pb-color__hex {
    min-width: calc(9ch + 24px); /* #rrggbbaa plus the input padding stays readable */
    font-family: var(--pb-font-mono, ui-monospace, monospace);
}

.pb-color__swatch:not(:disabled):hover {
    border-color: var(--pb-accent);
}

.pb-color__swatch:focus-visible {
    outline: 2px solid var(--pb-accent);
    outline-offset: 2px;
}

/* The palette: 248px wide inside (PbColorPicker.AreaWidth / AreaHeight read pointer offsets against the square). */
.pb-color__panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    cursor: default;
}

/* The body scrolls in a short window and the footer (Apply, Cancel) stays in view: the panel itself does not scroll,
   also as a top-layer popover (.pb-popup[popover] would otherwise scroll the whole panel). */
.pb-popup.pb-color__panel,
.pb-popup[popover].pb-color__panel {
    overflow: hidden;
}

.pb-color__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.pb-color__area {
    position: relative;
    flex: 0 0 auto;
    width: 248px;
    height: 160px;
    border-radius: 2px;
    background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent);
    cursor: crosshair;
    touch-action: none; /* a drag picks a colour; it does not scroll the page */
}

.pb-color__area-thumb {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.pb-color__presets {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
    width: 248px;
}

.pb-color__preset {
    height: 22px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    cursor: pointer;
}

.pb-color__preset[aria-pressed="true"] {
    outline: 2px solid var(--pb-accent);
    outline-offset: 1px;
}

/* Hue and opacity sliders, with the new colour over the current one beside them. */
.pb-color__sliders-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pb-color__sliders {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.pb-color__hue,
.pb-color__opacity {
    width: 100%;
    height: 10px;
    margin: 0;
    border-radius: 5px;
    appearance: none;
    cursor: pointer;
}

.pb-color__hue {
    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}

/* Transparent to the solid colour, over the checkerboard. */
.pb-color__opacity {
    background: linear-gradient(to right, transparent, var(--pb-color-solid, #000)), var(--pb-color-checks);
}

.pb-color__hue::-webkit-slider-thumb,
.pb-color__opacity::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    border: 1px solid #adb5bd;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    appearance: none;
}

.pb-color__hue::-moz-range-thumb,
.pb-color__opacity::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 1px solid #adb5bd;
    border-radius: 50%;
    background: #fff;
}

.pb-color__compare {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    width: 40px;
    height: 34px;
    overflow: hidden;
    border: 1px solid var(--pb-border);
    border-radius: 2px;
    background: var(--pb-color-checks);
}

.pb-color__new,
.pb-color__current {
    flex: 1 1 0;
}

/* HEX, R G B (or H S V) and A, captions above. */
.pb-color__values {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.pb-color__value {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    margin: 0;
    color: var(--pb-muted);
    font-size: 11px;
    font-weight: 600;
}

.pb-color__value--hex {
    flex: 2.2 1 0;
}

.pb-color__panel-hex,
.pb-color__number {
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    padding: 0 4px;
    border: 1px solid var(--pb-border);
    border-radius: 2px;
    background: var(--pb-surface);
    color: var(--pb-text);
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    -moz-appearance: textfield;
}

.pb-color__number::-webkit-inner-spin-button,
.pb-color__number::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.pb-color__panel-hex {
    font-family: var(--pb-font-mono, ui-monospace, monospace);
}

.pb-color__panel-hex[aria-invalid="true"] {
    border-color: var(--pb-invalid-border);
    background: var(--pb-invalid-surface);
}

.pb-color__mode-switch {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: var(--pb-accent);
    color: #fff;
    cursor: pointer;
}

.pb-color__mode-switch svg {
    width: 14px;
    height: 14px;
}

.pb-color__footer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

/* The preset switch: four colours in a square. */
.pb-color__presets-switch {
    width: 28px;
    height: 28px;
    margin-right: auto;
    padding: 3px;
    border: 1px solid var(--pb-border);
    border-radius: 4px;
    background:
        linear-gradient(#2196f3, #2196f3) 0 0 / 50% 50% no-repeat,
        linear-gradient(#ffc107, #ffc107) 100% 0 / 50% 50% no-repeat,
        linear-gradient(#4caf50, #4caf50) 0 100% / 50% 50% no-repeat,
        linear-gradient(#f44336, #f44336) 100% 100% / 50% 50% no-repeat;
    background-origin: content-box;
    background-clip: content-box;
    cursor: pointer;
}

.pb-color__presets-switch[aria-pressed="true"] {
    outline: 2px solid var(--pb-accent);
    outline-offset: 1px;
}

.pb-color__area:focus-visible,
.pb-color__hue:focus-visible,
.pb-color__opacity:focus-visible,
.pb-color__preset:focus-visible,
.pb-color__presets-switch:focus-visible,
.pb-color__mode-switch:focus-visible {
    outline: 2px solid var(--pb-accent);
    outline-offset: 2px;
}

.pb-color__panel-hex:focus,
.pb-color__number:focus {
    border-color: var(--pb-focus-border);
    outline: none;
    box-shadow: var(--pb-focus-ring);
}

/* Multi-select: chips before the search input. */
.pb-multiselect__chips {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 6px 8px;
}

.pb-multiselect .pb-multiselect__input {
    flex: 1 0 80px;
    height: 28px;
    padding: 0 4px;
}

/* Single-line multi-select (a grid's filter row): one row of chips and the search, never wrapping. */
.pb-multiselect--single-line .pb-multiselect__chips {
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 0 6px;
}

.pb-multiselect--single-line .pb-chip {
    flex: 0 1 auto;
    min-width: 0;
}

.pb-multiselect--single-line .pb-chip--more {
    flex: 0 0 auto;
    padding: 2px 4px;
}

.pb-multiselect--single-line .pb-multiselect__input {
    flex: 1 0 40px;
    min-width: 40px;
}

.pb-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 240px;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--pb-disabled-surface);
    font-size: 12px;
    white-space: nowrap;
}

/* Only the text shortens, so the remove button always stays visible. */
.pb-chip__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-chip--inactive {
    color: var(--pb-muted);
    font-style: italic;
}

.pb-chip--more {
    border: 0;
    background: transparent;
    color: var(--pb-accent);
    font-family: inherit;
    cursor: pointer;
}

.pb-chip--more:hover {
    text-decoration: underline;
}

.pb-chip__remove {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pb-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.pb-multiselect__select-all {
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pb-accent);
    font-size: 12px;
    cursor: pointer;
}

/* Dropdown tree: flat rows indented by level, an expander before each item that can have children. */
.pb-tree__row {
    gap: 4px;
    padding-left: calc(6px + (var(--pb-tree-level, 1) - 1) * 18px);
}

.pb-tree__toggle {
    flex: 0 0 18px;
    width: 18px;
    color: var(--pb-muted);
    text-align: center;
    cursor: pointer;
}

.pb-tree__toggle--none {
    cursor: default;
}

/* A branch that cannot be picked (only leaves may be chosen): it still expands, so it keeps its pointer. */
.pb-tree__row--branch .pb-option__content {
    color: var(--pb-muted);
}

.pb-tree__note {
    padding: 4px 12px 4px calc(28px + (var(--pb-tree-level, 1) - 1) * 18px);
    color: var(--pb-muted);
    font-size: 12px;
}

.pb-tree__link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pb-accent);
    font: inherit;
    cursor: pointer;
}

.pb-tree__link:hover {
    text-decoration: underline;
}

/* ---------- Columns in a lookup list (HeaderTemplate + ItemTemplate) ---------- */
/* Stays at the top while the rows scroll; the rows' side padding, so the column headings line up with the cells. */
.pb-popup__header {
    position: sticky;
    top: -4px; /* the popup's top padding */
    z-index: 1;
    margin-top: -4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pb-muted);
    background: var(--pb-surface);
    border-bottom: 1px solid var(--pb-border);
}

.pb-columns {
    display: flex;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.pb-columns__cell {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-columns__cell--fixed {
    flex: 0 0 auto;
}

/* ---------- Chips (PbChipGroup, PbChipList): outlined until chosen, filled once chosen ---------- */
.pb-choice--chips {
    gap: 6px;
}

.pb-choice--chips :is(.pb-choice__mark, .pb-check__mark) {
    display: none;
}

.pb-choice--chips :is(.pb-choice__option, .pb-check) {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border: 1px solid var(--pb-accent);
    border-radius: 15px;
    background: var(--pb-surface);
    color: var(--pb-accent);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pb-choice--chips :is(.pb-choice__option:not(.pb-choice__option--selected), .pb-check:not(.pb-check--checked)):hover {
    background: color-mix(in srgb, var(--pb-accent) 8%, var(--pb-surface));
}

.pb-choice--chips :is(.pb-choice__option--selected, .pb-check--checked) {
    background: var(--pb-accent);
    color: #fff;
}

.pb-choice--chips :is(.pb-choice__option, .pb-check):has(:focus-visible) {
    box-shadow: var(--pb-focus-ring);
}

.pb-choice--chips :is(.pb-choice__option--disabled, .pb-check--disabled) {
    cursor: not-allowed;
    opacity: 0.6;
}

.pb-choice--chips :is(.pb-choice__option--disabled, .pb-check--disabled):hover {
    background: var(--pb-surface);
}

.pb-choice--chips :is(.pb-choice__option--selected.pb-choice__option--disabled, .pb-check--checked.pb-check--disabled):hover {
    background: var(--pb-accent);
}

.pb-field--readonly .pb-choice--chips :is(.pb-choice__option, .pb-check) {
    cursor: default;
}

.pb-field--invalid .pb-choice--chips :is(.pb-choice__option, .pb-check) {
    border-color: var(--pb-invalid-border);
}

/* ---------- Date picker and its calendar ---------- */
.pb-date__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
}

.pb-date--open .pb-date__button {
    color: var(--pb-accent);
}

.pb-calendar {
    padding: 8px;
    overflow-y: auto;
    user-select: none;
}

.pb-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.pb-calendar__nav,
.pb-calendar__title,
.pb-calendar__today {
    border: 0;
    background: transparent;
    color: var(--pb-text);
    font: inherit;
    cursor: pointer;
    border-radius: var(--pb-radius);
}

.pb-calendar__nav {
    width: 32px;
    height: 32px;
    font-size: 20px;
    line-height: 1;
    color: var(--pb-muted);
}

.pb-calendar__title {
    flex: 1 1 auto;
    height: 32px;
    font-weight: 600;
}

.pb-calendar__title:disabled {
    cursor: default;
}

.pb-calendar__nav:hover,
.pb-calendar__title:hover:not(:disabled),
.pb-calendar__today:hover:not(:disabled) {
    background: var(--pb-disabled-surface);
    color: var(--pb-text);
}

.pb-calendar__grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    table-layout: fixed;
}

.pb-calendar__grid th {
    padding: 4px 0;
    color: var(--pb-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.pb-calendar__cell {
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

.pb-calendar__grid--wide .pb-calendar__cell {
    height: 48px;
    border-radius: var(--pb-radius);
}

.pb-calendar__cell:hover {
    background: var(--pb-disabled-surface);
}

.pb-calendar__cell--none,
.pb-calendar__cell--none:hover {
    background: transparent;
    cursor: default;
}

.pb-calendar__cell--other {
    color: var(--pb-placeholder);
}

/* Rings are drawn with inset shadows, not borders: a cell has no border to recolour. */
.pb-calendar__cell--today {
    box-shadow: inset 0 0 0 1px var(--pb-accent);
    color: var(--pb-accent);
    font-weight: 600;
}

.pb-calendar__cell--active {
    box-shadow: var(--pb-focus-ring);
}

.pb-calendar__cell--today.pb-calendar__cell--active {
    box-shadow: inset 0 0 0 1px var(--pb-accent), var(--pb-focus-ring);
}

.pb-calendar__cell--selected,
.pb-calendar__cell--selected:hover {
    background: var(--pb-accent);
    color: #fff;
}

/* A date range (PbDateRangePicker): the days between the ends tinted as one band, the ends filled and squared on the
   inside, so the range reads from one end to the other. */
.pb-calendar__cell--in-range,
.pb-calendar__cell--in-range:hover {
    border-radius: 0;
    background: color-mix(in srgb, var(--pb-accent) 14%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pb-accent) 14%, transparent);
}

/* The keyboard's day inside the band keeps its focus ring, and today its outline. */
.pb-calendar__cell--in-range.pb-calendar__cell--active {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pb-accent) 14%, transparent), var(--pb-focus-ring);
}

.pb-calendar__cell--in-range.pb-calendar__cell--today {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pb-accent) 14%, transparent), inset 0 0 0 1px var(--pb-accent);
}

.pb-calendar__cell--in-range.pb-calendar__cell--today.pb-calendar__cell--active {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pb-accent) 14%, transparent), inset 0 0 0 1px var(--pb-accent), var(--pb-focus-ring);
}

/* The filled ends reach into the spacing on their inner side, so they meet the band. */
.pb-calendar__cell--range-start:not(.pb-calendar__cell--active) {
    box-shadow: 1px 0 0 0 var(--pb-accent);
}

.pb-calendar__cell--range-end:not(.pb-calendar__cell--active) {
    box-shadow: -1px 0 0 0 var(--pb-accent);
}

.pb-calendar__cell--range-start {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.pb-calendar__cell--range-end {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.pb-calendar__hint {
    padding: 6px 8px 0;
    font-size: 0.8rem;
    color: var(--pb-muted);
    text-align: center;
}

/* Days that cannot be chosen (PbUnavailableDays): shaded square blocks, so a run of them reads as one band, and/or
   struck through. */
.pb-calendar__cell--disabled,
.pb-calendar__cell--disabled:hover {
    background: transparent;
    color: var(--pb-placeholder);
    cursor: not-allowed;
}

.pb-calendar__cell--shaded,
.pb-calendar__cell--shaded:hover,
.pb-calendar__grid--wide .pb-calendar__cell--shaded {
    border-radius: 0;
    background: var(--pb-unavailable-surface);
    box-shadow: 0 0 0 1px var(--pb-unavailable-surface);
    color: var(--pb-muted);
}

.pb-calendar__cell--shaded.pb-calendar__cell--today {
    box-shadow: 0 0 0 1px var(--pb-unavailable-surface), inset 0 0 0 1px var(--pb-accent);
}

.pb-calendar__cell--crossed {
    text-decoration: line-through;
}

.pb-calendar__footer {
    display: flex;
    justify-content: center;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--pb-border);
}

.pb-calendar__today {
    padding: 4px 16px;
    color: var(--pb-accent);
    font-weight: 600;
}

.pb-calendar__today:disabled {
    color: var(--pb-placeholder);
    cursor: not-allowed;
}

/* A date the page highlights (RevB HighlightWhenBeforeToday: a date already past). */
.pb-field--highlight .pb-field__input {
    color: var(--pb-invalid-text);
}

/* The date-time popup: the calendar beside a scrolling list of times as tall as the calendar (contain: size keeps the
   long list from setting the row's height). On a narrow screen the list goes under the calendar. */
.pb-datetime__popup {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* The calendar and the times side by side, Done under both. */
.pb-datetime__body {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    min-height: 0;
}

.pb-datetime__popup .pb-calendar {
    flex: 1 1 auto;
    min-width: 0;
}

.pb-datetime__times {
    flex: 0 0 112px;
    overflow-y: auto;
    contain: size;
    padding: 4px 0;
    border-left: 1px solid var(--pb-border);
}

/* Columns beside the calendar: two (24-hour) or three (12-hour) narrow columns, each scrolling on its own. */
.pb-datetime__times.pb-times--columns {
    display: flex;
    flex-direction: row;
    flex-basis: 112px;
    gap: 4px;
    padding: 4px;
    overflow: hidden;
}

.pb-datetime__times--12h.pb-times--columns {
    flex-basis: 156px;
}

.pb-datetime__times .pb-times__column {
    min-width: 0;
    max-height: none;
}

.pb-datetime__times .pb-option,
.pb-times .pb-option {
    justify-content: center;
    min-height: 26px;
    padding-top: 2px;
    padding-bottom: 2px;
}

@media (max-width: 480px) {
    .pb-datetime__body {
        flex-direction: column;
    }

    .pb-datetime__times {
        flex-basis: auto;
        max-height: 160px;
        contain: none;
        border-top: 1px solid var(--pb-border);
        border-left: 0;
    }

    .pb-datetime__times .pb-times__column {
        max-height: 150px;
    }
}

/* A disabled field with a reason: a click anywhere on it shows the reason as a toast. Disabled elements swallow clicks,
   so they let them through to the field. */
.pb-field--has-reason {
    cursor: not-allowed;
}

.pb-field--has-reason :disabled {
    pointer-events: none;
}

/* Toasts (PbToastHost): bottom centre, above dialogs and popups. */
.pb-toasts {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 32px);
    transform: translateX(-50%);
    pointer-events: none;
}

.pb-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 480px;
    padding: 10px 8px 10px 16px;
    border-radius: 6px;
    background: #323a45;
    color: #fff;
    font-size: var(--pb-font-size);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    animation: pb-toast-in 0.15s ease-out;
}

.pb-toast--warning {
    background: #8a5a00;
}

.pb-toast--error {
    background: #b02a37;
}

.pb-toast__message {
    flex: 1 1 auto;
    min-width: 0;
}

.pb-toast__close {
    flex: 0 0 auto;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    opacity: 0.8;
    cursor: pointer;
}

.pb-toast__close:hover {
    opacity: 1;
}

@keyframes pb-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pb-toast {
        animation: none;
    }
}

/* PbTimePicker popups (List and Columns): the times, then Done. The times scroll; Done stays in view. */
.pb-times {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pb-times__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Style="Columns" (the default): hours, minutes and AM/PM side by side, each scrolling on its own. */
.pb-times--columns {
    padding: 4px 4px 0;
}

.pb-times__columns {
    display: flex;
    flex: 1 1 auto;
    gap: 4px;
    min-height: 0;
}

.pb-times__footer {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    padding: 4px;
    border-top: 1px solid var(--pb-border);
}

.pb-times__footer .pb-button {
    --pb-button-colour: var(--pb-accent);
}

.pb-times .pb-times__footer {
    margin-top: 4px;
}

.pb-times__column {
    flex: 1 1 0;
    min-width: 48px;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    border-radius: var(--pb-radius);
}

.pb-times__column + .pb-times__column {
    border-left: 1px solid var(--pb-border);
}

.pb-times--columns .pb-option {
    padding-left: 4px;
    padding-right: 4px;
}

.pb-times--columns .pb-option--selected {
    background: var(--pb-accent);
    color: #fff;
}

.pb-times__column--active {
    background: rgba(13, 110, 253, 0.06);
}

.pb-times--columns .pb-option--pending {
    background: rgba(13, 110, 253, 0.16);
    font-weight: 600;
}

.pb-times--columns .pb-option--active {
    outline: 2px solid var(--pb-focus-border);
    outline-offset: -2px;
}

.pb-times--columns .pb-option--selected.pb-option--active {
    outline-color: #fff;
    box-shadow: inset 0 0 0 3px var(--pb-accent);
}

/* Clock style (PbTimePicker Style Clock): the time in large type over a dial, as on a phone. The dial is 224px square
   (PbTimePicker.DialSize reads pointer offsets against it). */
.pb-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 8px;
    overflow: hidden;
}

/* The header and dial scroll in a short window; Cancel and OK (the footer) stay in view. */
.pb-clock__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 8px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.pb-clock__footer {
    flex: 0 0 auto;
}

.pb-clock__header {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 36px;
    line-height: 1;
}

.pb-clock__part {
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: var(--pb-disabled-surface);
    color: var(--pb-text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.pb-clock__part--active {
    background: rgba(13, 110, 253, 0.14);
    color: var(--pb-accent);
}

.pb-clock__colon {
    padding: 0 2px;
}

.pb-clock__periods {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 8px;
}

.pb-clock__periods .pb-clock__part {
    padding: 3px 8px;
    font-size: 13px;
    font-weight: 600;
}

.pb-clock__dial {
    flex: 0 0 auto;
    width: 224px;
    height: 224px;
    cursor: pointer;
    touch-action: none; /* a drag turns the hand; it does not scroll the page */
    user-select: none;
}

.pb-clock__dial * {
    pointer-events: none; /* offsets are read against the dial itself */
}

.pb-clock__face {
    fill: var(--pb-disabled-surface);
}

.pb-clock__hand {
    stroke: var(--pb-accent);
    stroke-width: 2;
}

.pb-clock__pivot,
.pb-clock__knob {
    fill: var(--pb-accent);
}

.pb-clock__number {
    fill: var(--pb-text);
    font-size: 14px;
    text-anchor: middle;
    dominant-baseline: central;
}

.pb-clock__number--inner {
    font-size: 12px;
    fill: var(--pb-muted);
}

.pb-clock__number--selected {
    fill: #fff;
    font-weight: 600;
}

.pb-clock__number--disabled {
    fill: #bfc4c9;
}

.pb-clock__footer {
    display: flex;
    justify-content: flex-end;
    align-self: stretch;
    gap: 4px;
}

.pb-clock__footer .pb-button {
    --pb-button-colour: var(--pb-accent);
}

/* ---------- Buttons (PbButton, PbMenuButton) ----------
   The look of the ExTrack buttons they replace: the app paints every button in its primary colour (success green,
   danger red), 32px high, 14px text, 4px corners; small is 12px text, round is a 32px circle. XtButton renders
   PbButton with the old class names (LegacyTheme), so only new pages use these rules. */
:root {
    --pb-button-primary: var(--app-primary-600, #0284c7);
    --pb-button-secondary: #6c757d;
    --pb-button-success: #28a745;
    --pb-button-danger: #dc3545;
    --pb-button-link: #0d6efd;
    --pb-button-text: #f8f9fa;
    --pb-button-height: 32px;
    --pb-button-disabled-bg: rgba(108, 117, 125, 0.65);
    --pb-button-disabled-text: rgba(255, 255, 255, 0.65);
}

.pb-button {
    --pb-button-colour: var(--pb-button-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    box-sizing: border-box;
    min-height: var(--pb-button-height);
    margin: 2px;
    padding: 4px 8px;
    border: 1px solid var(--pb-button-colour);
    border-radius: 4px;
    background: var(--pb-button-colour);
    color: var(--pb-button-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5714;
    white-space: nowrap;
    cursor: pointer;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
}

.pb-button--secondary { --pb-button-colour: var(--pb-button-secondary); }
.pb-button--success { --pb-button-colour: var(--pb-button-success); }
.pb-button--danger { --pb-button-colour: var(--pb-button-danger); }

.pb-button:hover:not(:disabled) {
    filter: brightness(0.92);
}

.pb-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pb-button-colour) 45%, transparent);
}

.pb-button--outline {
    background: transparent;
    color: var(--pb-button-colour);
}

.pb-button--flat {
    background: transparent;
    border-color: transparent;
    color: var(--pb-button-colour);
}

.pb-button--outline:hover:not(:disabled),
.pb-button--flat:hover:not(:disabled) {
    filter: none;
    background: var(--pb-button-colour);
    color: var(--pb-button-text);
}

.pb-button--link {
    --pb-button-colour: var(--pb-button-link);
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    color: var(--pb-button-colour);
}

.pb-button--link:hover:not(:disabled) {
    filter: none;
    text-decoration: underline;
}

.pb-button:disabled {
    background: var(--pb-button-disabled-bg);
    border-color: transparent;
    color: var(--pb-button-disabled-text);
    cursor: default;
    filter: none;
}

.pb-button--success:disabled {
    background: #dcdcdc;
}

.pb-button--outline:disabled,
.pb-button--flat:disabled,
.pb-button--link:disabled {
    background: transparent;
    color: var(--pb-button-disabled-bg);
}

.pb-button--small {
    --pb-button-height: 26px;
    padding: 4px 6px;
    border-radius: 2px;
    font-size: 12px;
    line-height: 1.34;
}

.pb-button--icon-only {
    padding: 4px 11px;
}

.pb-button--round {
    width: var(--pb-button-height);
    height: var(--pb-button-height);
    padding: 0;
    border-radius: 50%;
}

.pb-button--pressed {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.25);
}

.pb-button__icon {
    font-size: 16px;
    line-height: 1;
}

.pb-button--small .pb-button__icon {
    font-size: 12px;
}

.pb-button--busy {
    cursor: progress;
}

/* The busy spinner, also inside a LegacyTheme (e-btn) button: a ring in the text colour. */
.pb-button__spinner {
    display: inline-block;
    box-sizing: border-box;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pb-button-spin 0.75s linear infinite;
    vertical-align: middle;
}

.e-btn .e-btn-icon.pb-button__spinner {
    width: 1em;
    margin-right: 0.5em;
}

@keyframes pb-button-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pb-button__spinner { animation-duration: 2s; }
}

/* A disabled button with a reason: the wrapper takes the hover and the click (the button gets neither). */
.pb-button-reason {
    display: inline-block;
    cursor: not-allowed;
}

.pb-button-reason > button {
    pointer-events: none;
}

/* ---------- Menu button (PbMenuButton): a button and its menu of actions ---------- */
.pb-menu-button {
    display: inline-block;
    position: relative;
}

.pb-menu-button__caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.25em;
    border-top: 5px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    vertical-align: middle;
}

.pb-menu {
    min-width: 160px;
    margin: 0;
    list-style: none;
}

.pb-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.pb-menu__item--active {
    background: rgba(13, 110, 253, 0.1);
}

.pb-menu__item--disabled {
    color: var(--pb-muted);
    cursor: default;
}

.pb-menu__item--disabled.pb-menu__item--active {
    background: none;
}

.pb-menu__icon {
    width: 1em;
    text-align: center;
}

.pb-menu__separator {
    height: 1px;
    margin: 4px 0;
    background: var(--pb-border);
}

/* A popup shown in the top layer (PbPopupOptions.TopLayer): the browser's own popover box (centred, inset 0) is
   replaced by the popup script's fixed position. */
.pb-popup[popover] {
    inset: auto;
    margin: 0;
    overflow: auto;
}

/* ---------- List box (PbListBox): a list that stays on the page ---------- */
.pb-listbox {
    display: flex;
    flex-direction: column;
    min-height: 120px;
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius);
    background: var(--pb-surface);
    color: var(--pb-text);
    font-size: var(--pb-font-size);
    overflow: hidden;
}

.pb-listbox__filter {
    margin: 6px;
    padding: 4px 8px;
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius);
    font: inherit;
}

.pb-listbox__filter:focus {
    outline: none;
    border-color: var(--pb-focus-border);
    box-shadow: var(--pb-focus-ring);
}

.pb-listbox__all {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--pb-border);
    background: none;
    font: inherit;
    text-align: left;
}

.pb-listbox__list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 0;
}

.pb-listbox__list:focus-visible {
    outline: 2px solid var(--pb-focus-border);
    outline-offset: -2px;
}

.pb-listbox__list .pb-option {
    cursor: pointer;
}

.pb-listbox__empty {
    padding: 8px 12px;
    color: var(--pb-muted);
}

.pb-listbox--disabled {
    background: var(--pb-disabled-surface);
    color: var(--pb-muted);
    pointer-events: none;
}

/* ---------- Pick list (PbPickList): available and chosen lists with move buttons ---------- */
.pb-picklist {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
}

.pb-picklist__side {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pb-picklist__header {
    margin-bottom: 4px;
    font-weight: 600;
}

.pb-picklist__list {
    flex: 1 1 auto;
    min-height: 240px;
}

.pb-picklist__buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.pb-picklist__move {
    width: 36px;
    height: 32px;
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius);
    background: var(--pb-surface);
    color: var(--pb-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.pb-picklist__move:hover:not(:disabled) {
    border-color: var(--pb-focus-border);
}

.pb-picklist__move:disabled {
    color: var(--pb-muted);
    cursor: default;
}

@media (max-width: 600px) {
    .pb-picklist {
        grid-template-columns: minmax(0, 1fr);
    }

    .pb-picklist__buttons {
        flex-direction: row;
        justify-content: center;
    }
}

/* PbSpinner, in place of SfSpinner: the grid's ring (border-colour track, accent arc) at three sizes. Inline beside
   text by default; the overlay form covers its nearest positioned parent and centres the ring. */
.pb-spinner {
    --pb-spinner-size: 22px;
    --pb-spinner-width: 3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    vertical-align: middle;
    color: var(--pb-muted);
    font-size: var(--pb-font-size);
}

.pb-spinner--small {
    --pb-spinner-size: 14px;
    --pb-spinner-width: 2px;
}

.pb-spinner--large {
    --pb-spinner-size: 36px;
    --pb-spinner-width: 4px;
}

.pb-spinner__ring {
    display: inline-block;
    flex: none;
    box-sizing: border-box;
    width: var(--pb-spinner-size);
    height: var(--pb-spinner-size);
    border: var(--pb-spinner-width) solid var(--pb-border);
    border-top-color: var(--pb-accent);
    border-radius: 50%;
    animation: pb-spin 0.8s linear infinite;
}

.pb-spinner--overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    background: color-mix(in srgb, var(--pb-surface) 60%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .pb-spinner__ring { animation-duration: 2.4s; }
}