h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ---- RetailPlan shell: the WinForms Main window (RPGlobal colours: gsModuleBackColor 195,220,255; gsModuleForeColor
   Navy; gsSelLstBkColor 210,230,255; gsGrdntBluFi 85,160,255 splitter; grids as RPGlobal.subSetGrid) ---- */
:root {
    --rp-bg: #c3dcff;
    --rp-surface: #ffffff;
    --rp-ink: #000000;
    --rp-muted: #616e7c;
    --rp-line: #a0a0a0;
    --rp-accent: #000080;
    --rp-accent-soft: #d2e6ff;
    --rp-top: #17365f;
    --wf-module: #c3dcff;      /* gsModuleBackColor */
    --wf-module-fore: #000080; /* gsModuleForeColor (Navy) */
    --wf-band: #d2e6ff;        /* gsSelLstBkColor */
    --wf-splitter: #55a0ff;    /* gsGrdntBluFi */
    --wf-strip: #f5f6f7;       /* ToolStrip professional renderer */
    --wf-strip-line: #d5dbe5;
    --wf-hover: #fff3c8;
    --wf-hover-line: #e5c365;
    --wf-link: #b0e0e6;        /* PowderBlue */
    --wf-link-hover: #ffe0c0;  /* FlatAppearance.MouseOverBackColor */
    --wf-link-down: #ffc080;   /* MouseDownBackColor */
    --wf-grid-head: #f5f5f5;   /* gsLightGrey */
    --wf-grid-row: #e6f2f8;    /* gsVLightBluColor2 */
    --wf-grid-alt: #ecf5fa;    /* gsVLightBluColor3 */
    --wf-grid-sel: #5073b4;    /* gsSelRowForeColor */
}

html, body {
    margin: 0;
    background: var(--wf-module);
    color: var(--rp-ink);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 13px;
}

.wf-shell { display: flex; flex-direction: column; height: 100vh; min-height: 0; }

/* menuStrip1 */
.wf-menubar { display: flex; align-items: center; background: var(--wf-strip); border-bottom: 1px solid var(--wf-strip-line); min-height: 28px; padding: 0 0 0 4px; flex: none; }
.wf-menubar .rz-menu.wf-menu { background: transparent; border: 0; padding: 0; min-height: 0; box-shadow: none; flex: none; }
.wf-menu > li > .rz-navigation-item-wrapper .rz-navigation-item-icon-children { display: none; }
.wf-menu .rz-navigation-item-link { padding: 3px 8px; color: #000; font-size: 13px; }
.wf-menu .rz-navigation-item-text { color: #000; }
.wf-menu .rz-navigation-item-wrapper:hover, .wf-menu .rz-navigation-item-wrapper-active { background: var(--wf-hover); outline: 1px solid var(--wf-hover-line); outline-offset: -1px; }
.wf-menu .rz-navigation-menu { background: var(--wf-strip); border: 1px solid #a0a0a0; box-shadow: 2px 2px 3px rgba(0,0,0,.25); padding: 2px; border-radius: 0; }
.wf-menu .rz-navigation-menu .rz-navigation-item-link { padding: 3px 24px 3px 6px; min-width: 12rem; }
.wf-menu img.rz-navigation-item-icon, .wf-menu .rz-navigation-item-link img { width: 20px; height: 20px; object-fit: contain; margin-right: 8px; }
.wf-caption { flex: 1; min-width: 0; padding: 0 10px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }

/* tlsMain */
.wf-toolbar { display: flex; align-items: center; gap: 2px; background: linear-gradient(#fafbfc, #e9eef5); border-bottom: 1px solid var(--wf-strip-line); padding: 2px 4px; min-height: 32px; overflow-x: auto; flex: none; }
.wf-tool { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: transparent; padding: 2px 10px 2px 6px; font: 15px "Segoe UI", Tahoma, sans-serif; color: #000; cursor: pointer; white-space: nowrap; height: 29px; }
.wf-tool img { width: 22px; height: 22px; object-fit: contain; }
.wf-tool:hover, .wf-split.open .wf-tool { background: var(--wf-hover); border-color: var(--wf-hover-line); }
.wf-split { position: relative; display: inline-flex; }
.wf-split > .wf-tool:first-child { padding-right: 4px; font-size: 13px; }
.wf-split-arrow { padding: 2px 4px; font-size: 11px; }
.wf-dropdown-backdrop { position: fixed; inset: 0; z-index: 900; }
.wf-dropdown { position: fixed; z-index: 901; margin: 30px 0 0; padding: 2px; list-style: none; background: var(--wf-strip); border: 1px solid #a0a0a0; box-shadow: 2px 2px 3px rgba(0,0,0,.25); min-width: 12rem; }
.wf-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid transparent; background: none; padding: 3px 18px 3px 6px; font: inherit; text-align: left; cursor: pointer; }
.wf-dropdown button:hover { background: var(--wf-hover); border-color: var(--wf-hover-line); }
.wf-dropdown img { width: 20px; height: 20px; object-fit: contain; }
.wf-location { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 15px; white-space: nowrap; }
.wf-location select { font: 13px "Segoe UI", sans-serif; padding: 2px; min-width: 6rem; }

/* pnlBodyLeft | splMain | pnlBodyRight */
.wf-body { display: flex; flex: 1; min-height: 0; }
.wf-leftbar { width: 237px; flex: none; display: flex; flex-direction: column; background: silver; min-height: 0; }
.wf-module-title { background: var(--wf-module); color: var(--wf-module-fore); font: bold 16px Arial, sans-serif; height: 43px; display: flex; align-items: center; padding-left: 8px; border: 1px solid #a0a0a0; border-bottom: 0; flex: none; }
.wf-module-links { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 2px 0; list-style: none; background: #fff; border: 1px solid #a0a0a0; }
.wf-module-links button { display: flex; align-items: center; gap: 6px; width: calc(100% - 5px); margin-left: 5px; border: 1px solid transparent; background: none; padding: 2px 4px; font: 12px "Segoe UI", sans-serif; color: #000; text-align: left; cursor: pointer; }
.wf-module-links button:hover { background: var(--wf-hover); border-color: var(--wf-hover-line); }
.wf-module-links img { width: 24px; height: 24px; object-fit: contain; }
.wf-module-buttons { flex: none; display: flex; flex-direction: column; }
.wf-module-buttons button { display: flex; align-items: center; gap: 10px; height: 43px; border: 1px solid #a0a0a0; border-top: 0; background: var(--wf-module); color: var(--wf-module-fore); font: bold 13px Arial, sans-serif; padding: 0 0 0 8px; text-align: left; cursor: pointer; }
.wf-module-buttons button:hover { background: #d7e8ff; }
.wf-module-buttons button.active { background: #b2d2ff; }
.wf-module-buttons img { width: 24px; height: 24px; object-fit: contain; }
.wf-splitter { width: 4px; flex: none; background: var(--wf-splitter); }
.wf-right { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--wf-module); }
.wf-bodytop { height: 43px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--wf-band); color: var(--wf-module-fore); font: 24px Tahoma, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; }
.wf-main { flex: 1; min-height: 0; overflow: auto; padding: 8px 12px; }
.rp-main { flex: 1; min-width: 0; padding: 1rem 1.25rem; }

/* CompanyLink ...: "List" and "Task" columns of PowderBlue buttons */
.wf-links { display: flex; flex-wrap: wrap; gap: 0 74px; padding: 0 0 0 33px; }
.wf-links section { width: 347px; max-width: 100%; }
.wf-links h2 { margin: 0; height: 30px; display: flex; align-items: center; font: bold 24px Arial, sans-serif; color: var(--wf-module-fore); }
.wf-link { display: flex; align-items: center; gap: 4px; width: 100%; height: 34px; margin: 3px 0 6px; padding: 0 8px; background: var(--wf-link); color: var(--wf-module-fore); border: 1px solid #fff; box-shadow: 0 0 0 1px #9cc; font: bold 13px Arial, sans-serif; text-align: left; cursor: pointer; }
.wf-link:hover { background: var(--wf-link-hover); }
.wf-link:active { background: var(--wf-link-down); }
.wf-link:disabled { opacity: .5; cursor: default; }
.wf-link img { width: 22px; height: 22px; object-fit: contain; }
.rp-error { background: #fdecea; border: 1px solid #f5c2c0; padding: .75rem 1rem; border-radius: 4px; }

/* Main/Login.cs: Azure form, the message line, the stretched logo, User Id / Password and OK / Cancel (pnlLogin),
   "By LevelFive Pte. Ltd" in grey. Sizes are the designer's, at 96 dpi. */
.rp-login-shell { min-height: 100vh; display: grid; place-items: center; background: #c3dcff; color: #000; padding: 16px; box-sizing: border-box; }
/* The Login window (FixedToolWindow): a small caption bar over the Azure form. */
.rp-login {
    width: min(620px, 100%); background: #f0ffff; border: 1px solid #7a9cc6; box-shadow: 0 8px 24px rgba(0,0,0,.25);
    font-family: "Microsoft Sans Serif", Arial, sans-serif;
}
.rp-login-caption { padding: 6px 10px; background: #fff; border-bottom: 1px solid #c8d4e0; font-size: 13px; }
.rp-login-message { min-height: 20px; padding: 8px 20px 0; color: #f00; font-weight: bold; font-size: 13px; }
.rp-login-message .validation-message { color: inherit; display: inline; }
.rp-login-logo { display: block; width: calc(100% - 24px); margin: 6px 12px 0; aspect-ratio: 939 / 215; object-fit: fill; }
.rp-login-panel {
    display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 300px); align-items: center; row-gap: 14px;
    width: min(420px, calc(100% - 32px)); margin: 18px auto 0;
}
.rp-login-panel label { font-size: 15px; font-weight: bold; }
.rp-login-panel input {
    box-sizing: border-box; width: 100%; height: 32px; border: 1px solid #7a7a7a; border-radius: 0; padding: 2px 6px;
    font: 16px "Microsoft Sans Serif", Arial, sans-serif; background: #fff;
}
.rp-login-buttons { grid-column: 2; display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.rp-login-buttons button {
    height: 40px; min-width: 84px; padding: 0 12px; font: 16px "Microsoft Sans Serif", Arial, sans-serif; color: #000;
    background: #e1e1e1; border: 1px solid #adadad; border-radius: 0; cursor: pointer;
}
.rp-login-buttons button:hover { background: #e5f1fb; border-color: #0078d7; }
.rp-login-buttons button:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.rp-login-by { margin: 22px 0 10px; text-align: center; color: #808080; font-size: 12px; }
@media (max-width: 500px) {
    .rp-login-panel { grid-template-columns: 1fr; row-gap: 4px; }
    .rp-login-panel label { margin-top: 8px; }
    .rp-login-buttons { grid-column: 1; margin-top: 14px; }
}

@media (max-width: 760px) {
    /* Phones: the menu bar (its toggle) is the way round; the left bar and splitter step aside. */
    .wf-leftbar, .wf-splitter, .wf-caption { display: none; }
    .wf-bodytop { height: 32px; font-size: 18px; }
    .wf-main { padding: 8px; }
    .wf-links { padding: 0; gap: 0; }
    .wf-links section { width: 100%; }
}

/* Radzen offsets its dialog wrapper by the container's left edge (the nav width); pin it to the viewport. */
.rz-dialog-wrapper { inset: 0 !important; }

/* Report forms (WinForms Reports/*Report.cs): trvInventory on the left (Arial 9.75pt bold, DarkBlue on gsLightBluColor,
   dotted lines, no root lines or plus/minus: ReportCommon.subSetReportsTreeView), gpbCriteria "Criteria" (Arial 9pt bold
   labels, white text boxes, the magnifier look-up button), Display / Print under it; the PDF below. */
.rp-report { display: flex; gap: 16px; align-items: flex-start; padding: 12px 20px 0; }
.rp-report-tree { width: 256px; flex: none; background: #e1f0ff; color: #00008b; font: bold 13px Arial, sans-serif; border: 1px solid #828790; box-shadow: inset 1px 1px 0 #a0a0a0; padding: 4px 0 8px 4px; max-height: calc(100vh - 150px); overflow: auto; }
.rp-report-group { padding: 2px 4px; line-height: 20px; }
.rp-report-tree ul { list-style: none; margin: 0 0 0 10px; padding: 0; border-left: 1px dotted #808080; }
.rp-report-tree li { position: relative; padding-left: 14px; }
.rp-report-tree li::before { content: ""; position: absolute; left: 0; top: 10px; width: 12px; border-top: 1px dotted #808080; }
.rp-report-tree li:last-child { background: linear-gradient(#e1f0ff, #e1f0ff) 0 11px / 1px 100% no-repeat; margin-left: -1px; padding-left: 15px; }
.rp-report-tree li:last-child::before { left: 1px; }
.rp-report-tree button { display: block; text-align: left; border: 1px solid transparent; background: none; padding: 0 3px; line-height: 18px; margin: 1px 0; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.rp-report-tree button:hover { text-decoration: underline; }
.rp-report-tree button.active { background: #cce8ff; border-color: #99d1ff; }
.rp-report-tree button:disabled { color: #8a93a6; cursor: default; text-decoration: none; }
.rp-report-main { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, max-content); align-content: start; gap: 8px; }
.wf-crit-row .rz-chkbox-box { width: 13px; height: 13px; border: 1px solid #333; border-radius: 0; background: #fff; box-shadow: none; }
.wf-crit-row .rz-chkbox-box.rz-state-active { background: #fff; border-color: #333; }
.wf-crit-row .rz-chkbox-box.rz-state-active .rz-chkbox-icon { color: #000; }
.wf-group { margin: 0; border: 1px solid #b4c8e0; border-radius: 3px; padding: 8px 14px 10px 8px; min-width: 459px; }
.wf-group legend { font: 11px Tahoma, sans-serif; color: #000; padding: 0 2px; width: auto; float: none; margin: 0; }
.wf-crit-row { display: flex; align-items: center; gap: 4px; min-height: 34px; }
.wf-crit-row.top { align-items: flex-start; padding-top: 6px; }
.wf-crit-row.wf-period { margin-top: 6px; }
.wf-label { width: 108px; flex: none; font: bold 12px Arial, sans-serif; color: #000; margin: 0; }
.wf-to { font: bold 12px Arial, sans-serif; color: #000; margin: 0 8px; }
.wf-crit-note { font: 12px Arial, sans-serif; }
.wf-box { width: 120px; flex: none; }
.wf-box.wide { width: 222px; }
.wf-box.date { width: 112px; }
.wf-box > * { width: 100%; }
.wf-box .rz-textbox, .wf-box .rz-dropdown, .wf-box .rz-datepicker { height: 22px; min-height: 22px; border: 1px solid #7a7a7a; border-radius: 0; background: #fff; box-shadow: none; font: 12px Arial, sans-serif; color: #000; padding: 0; }
.wf-box .rz-textbox { padding: 0 3px; }
.wf-box .rz-textbox[readonly] { background: #f0f0f0; }
.wf-box .rz-dropdown-label, .wf-box .rz-placeholder { padding: 0 3px; line-height: 20px; font: inherit; }
.wf-box .rz-dropdown-trigger { width: 18px; }
.wf-box .rz-dropdown-clear-icon { right: 18px; top: 3px; font-size: 14px; }
.wf-crit-row:has(.wf-lookup-btn) .rz-dropdown-trigger { display: none; }
.wf-crit-row:has(.wf-lookup-btn) .rz-dropdown-clear-icon { right: 2px; }
.wf-box .rz-datepicker .rz-inputtext { height: 20px; padding: 0 3px; font: inherit; border: 0; }
.wf-box .rz-datepicker .rz-button, .wf-box .rz-datepicker .rz-datepicker-trigger { height: 20px; width: 20px; min-width: 20px; padding: 0; }
.wf-lookup-btn { width: 22px; height: 22px; flex: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: #e1e1e1; border: 1px solid #adadad; cursor: pointer; }
.wf-lookup-btn:hover { background: #e5f1fb; border-color: #0078d7; }
.wf-lookup-btn img { width: 16px; height: 16px; }
.wf-button { min-width: 75px; height: 23px; padding: 0 10px; background: #e1e1e1; border: 1px solid #adadad; color: #000; font: 12px "Segoe UI", Tahoma, sans-serif; cursor: pointer; }
.wf-button:hover:not(:disabled) { background: #e5f1fb; border-color: #0078d7; }
.wf-button:active:not(:disabled) { background: #cce4f7; border-color: #005499; }
.wf-button:disabled { color: #a0a0a0; cursor: default; }
.wf-button.small { min-width: 0; height: 20px; font-size: 11px; }
.rp-report-buttons { display: flex; justify-content: center; gap: 18px; }
.rp-report-depts summary { cursor: pointer; font: 12px Arial, sans-serif; line-height: 22px; }
.rp-report-depts-buttons { display: flex; gap: 6px; margin: 4px 0; }
.rp-report-depts .rz-checkbox-list-vertical { max-height: 14rem; overflow: auto; background: #fff; border: 1px solid #7a7a7a; padding: 2px 4px; font-size: 12px; }
@media (max-width: 760px) {
    .rp-report { flex-direction: column; align-items: stretch; padding: 8px 0 0; }
    .rp-report-tree { width: auto; max-height: 14rem; }
    .rp-report-main { grid-template-columns: 100%; }
    .wf-group { min-width: 0; }
    .wf-label { width: 96px; }
    .wf-box.wide { flex: 1; width: auto; min-width: 0; }
    .wf-crit-row.wf-period { flex-wrap: wrap; row-gap: 6px; }
    .wf-crit-row.wf-period .wf-to { width: 96px; margin: 0; }
    }

/* Blazor's "An unhandled error has occurred" bar: hidden until the framework shows it (rule lost with MainLayout.razor.css in Phase 3). */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Touch Department colour pickers: sample label plus text/back colour inputs, as the WinForms colour labels. */
.rp-touch-colour { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.rp-touch-colour label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; }
.rp-touch-colour input[type=color] { width: 2.25rem; height: 1.75rem; padding: 0; border: 1px solid var(--rz-base-400, #ccc); }
.rp-touch-sample { display: inline-block; min-width: 8rem; padding: 0.2rem 0.6rem; border-radius: 3px; font-size: 0.95rem; }

/* Checked list box (WinForms CheckedListBox), e.g. Employee locations. */
.rp-check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.25rem 1rem; max-height: 12rem; overflow: auto; border: 1px solid var(--rz-base-300); border-radius: 4px; padding: 0.5rem; }
.rp-check-list > div { display: flex; align-items: center; gap: 0.5rem; }

/* Small editable tables (Inventory form price and location grids) and barcode chips. */
.rp-price-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.rp-price-table th, .rp-price-table td { border-bottom: 1px solid var(--rz-base-300); padding: 0.15rem 0.4rem; text-align: left; }
.rp-price-table td.num { text-align: right; }
.rp-chip-list { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.rp-chip { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--rz-base-200); border-radius: 1rem; padding: 0.1rem 0.5rem; font-size: 0.8rem; }
.rp-chip button { border: 0; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1; }

/* A file chooser that looks like a light toolbar button (Import Inventory: New Item / Update Item). */
.rp-file-button {
    display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer;
    padding: 0.5rem 1rem; border-radius: var(--rz-border-radius, 4px);
    background: var(--rz-base-200); color: var(--rz-on-base-200, inherit); font-size: var(--rz-body-font-size, 0.875rem);
}
.rp-file-button:hover { background: var(--rz-base-300); }
.rp-file-button input[type=file] { display: none; }
.rp-file-button.rp-disabled { opacity: 0.6; pointer-events: none; }

/* Item form, matrix panel: each user-category checklist scrolls on its own (cblCategoryN). */
.rp-matrix-list { max-height: 10rem; overflow-y: auto; border: 1px solid var(--rz-base-300); border-radius: 4px; padding: 0.25rem; margin-top: 0.25rem; }

/* A WinForms label with Cursor = Hand that opens another form (PurchaseOrder lblItem / lblVendor). */
.rp-label-link { color: var(--rz-primary); text-decoration: underline dotted; cursor: pointer; pointer-events: auto; }

/* A list row coloured by RowRender (style="color:...", e.g. processed rows in green): Radzen's cell text has its own
   colour, so the cells take the row's colour instead (unless the row is selected). */
.rz-data-row[style*="color"]:not(.rz-state-highlight) .rz-cell-data { color: inherit; }

/* RPGlobal.subSetGrid: grey bold Arial 9 headers, Arial 9 rows in two light blues, selection gsSelRowForeColor. */
.rz-data-grid { font-family: Arial, sans-serif; font-size: 12px; }
.rz-data-grid .rz-grid-table thead th { background: var(--wf-grid-head); color: #000; }
.rz-data-grid .rz-grid-table thead th .rz-column-title-content { font-weight: bold; }
.rz-data-grid .rz-data-row > td { background: var(--wf-grid-row); }
.rz-data-grid .rz-data-row:nth-child(even) > td { background: var(--wf-grid-alt); }
.rz-data-grid .rz-data-row.rz-state-highlight > td { background: var(--wf-grid-sel); }
.rz-data-grid .rz-data-row.rz-state-highlight > td .rz-cell-data { color: #fff; }

/* The list / entry toolbars (tlsListTool, tsbSaveClose ...): WinForms images in the buttons, light strip look. */
.rz-button img.rz-button-icon-left { width: 16px; height: 16px; object-fit: contain; }
.rz-button.rz-light { background: var(--wf-strip); border: 1px solid var(--wf-strip-line); color: #000; }
.rz-button.rz-light:not(.rz-state-disabled):hover { background: var(--wf-hover); border-color: var(--wf-hover-line); }

/* WinForms controls on every list and entry form (owner/user UAT feedback, 2026-11-12; parity-notes N-95): forms on
   gsLightBluColor, Arial 9pt bold captions above square white boxes (the Radzen floating labels sit above the box instead
   of inside it), grey push buttons, TabControl tabs and GroupBox frames. Scoped to the page and dialogs; the shell, the
   sign-in page and the report criteria (.wf-box) have their own rules. */
.rz-dialog .rz-dialog-content { background: #e1f0ff; }
.rz-dialog .rz-dialog-titlebar { background: #fff; border-bottom: 1px solid #c8c8c8; padding-block: 6px; }
.rz-dialog .rz-dialog-title { font: 14px "Segoe UI", Tahoma, sans-serif; color: #000; }

:is(.wf-main, .rz-dialog) .rz-form-field.rz-variant-outlined { position: relative; padding-top: 16px; }
:is(.wf-main, .rz-dialog) .rz-form-field.rz-variant-outlined .rz-form-field-content { position: static; margin: 0 !important; height: 22px; min-height: 22px; border: 1px solid #7a7a7a; border-radius: 0; background: #fff; box-shadow: none; }
:is(.wf-main, .rz-dialog) .rz-form-field.rz-variant-outlined .rz-form-field-content:focus-within { border-color: #0078d7; box-shadow: none; }
:is(.wf-main, .rz-dialog) .rz-form-field.rz-variant-outlined .rz-form-field-content:has(textarea),
:is(.wf-main, .rz-dialog) .rz-form-field.rz-variant-outlined .rz-form-field-content:has(.rz-chkbox-list, .rz-listbox, .rz-radiobutton-list) { height: auto; }
:is(.wf-main, .rz-dialog) .rz-form-field.rz-variant-outlined .rz-form-field-label { position: absolute; top: 0 !important; left: 0 !important; transform: none !important; margin: 0; padding: 0 !important; background: none !important; font: bold 12px/15px Arial, sans-serif !important; color: #000 !important; max-width: 100%; }
:is(.wf-main, .rz-dialog) .rz-form-field-content :is(input, textarea, .rz-dropdown, .rz-dropdown-label, .rz-datepicker, .rz-numeric, .rz-placeholder) { font: 12px Arial, sans-serif; color: #000; }
:is(.wf-main, .rz-dialog) .rz-form-field-content :is(input.rz-textbox, .rz-inputtext, .rz-numeric-input) { height: 20px; padding: 0 4px; }
:is(.wf-main, .rz-dialog) .rz-form-field-content :is(.rz-dropdown, .rz-datepicker, .rz-numeric) { height: 20px; min-height: 20px; border: 0; box-shadow: none; padding: 0 !important; align-items: center; }
:is(.wf-main, .rz-dialog) .rz-form-field-content .rz-dropdown-label { line-height: 20px; padding: 0 4px; flex: 1; text-align: left; }
:is(.wf-main, .rz-dialog) .rz-form-field-content .rz-dropdown { flex-direction: row; }
:is(.wf-main, .rz-dialog) .rz-form-field-content .rz-dropdown > .rz-helper-hidden-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:is(.wf-main, .rz-dialog) .rz-form-field-content :is(input, textarea, .rz-dropdown-label, .rz-inputtext, .rz-placeholder) { padding-top: 0 !important; padding-bottom: 0 !important; }
:is(.wf-main, .rz-dialog) .rz-form-field-content textarea { padding: 2px 4px !important; }
:is(.wf-main, .rz-dialog) .rz-form-field-content :is(.rz-dropdown-trigger, .rz-datepicker .rz-button, .rz-datepicker-trigger) { height: 20px; }
:is(.wf-main, .rz-dialog) .rz-form-field-content :is(input, textarea)[readonly]:not(.rz-dropdown *):not(.rz-datepicker *) { background: #f0f0f0; }
:is(.wf-main, .rz-dialog) .rz-form-field-content:has(:is(input, textarea)[readonly]:not(.rz-dropdown *):not(.rz-datepicker *)) { background: #f0f0f0; }
:is(.wf-main, .rz-dialog) .rz-form-field-content:has(:disabled), :is(.wf-main, .rz-dialog) .rz-form-field-content:has(.rz-state-disabled) { background: #f0f0f0; border-color: #bcbcbc; }

:is(.wf-main, .rz-dialog) .rz-button:is(.rz-primary, .rz-secondary, .rz-danger, .rz-base, .rz-info, .rz-success, .rz-warning) { background: #e1e1e1; border: 1px solid #adadad; border-radius: 0; color: #000; box-shadow: none; font: 12px "Segoe UI", Tahoma, sans-serif; min-height: 23px; }
:is(.wf-main, .rz-dialog) .rz-button:is(.rz-primary, .rz-secondary, .rz-danger, .rz-base, .rz-info, .rz-success, .rz-warning):not(.rz-state-disabled):hover { background: #e5f1fb; border-color: #0078d7; }
:is(.wf-main, .rz-dialog) .rz-button:is(.rz-primary, .rz-secondary, .rz-danger, .rz-base, .rz-info, .rz-success, .rz-warning):not(.rz-state-disabled):active { background: #cce4f7; border-color: #005499; }
:is(.wf-main, .rz-dialog) .rz-button.rz-light { border-radius: 2px; }
:is(.wf-main, .rz-dialog) .rz-button.rz-state-disabled { color: #a0a0a0; }

:is(.wf-main, .rz-dialog) .rz-chkbox-box { width: 13px; height: 13px; border: 1px solid #333; border-radius: 0; background: #fff; box-shadow: none; }
:is(.wf-main, .rz-dialog) .rz-chkbox-box.rz-state-active { background: #fff; border-color: #333; }
:is(.wf-main, .rz-dialog) .rz-chkbox-box.rz-state-active .rz-chkbox-icon { color: #000; }
:is(.wf-main, .rz-dialog) .rz-chkbox + label, :is(.wf-main, .rz-dialog) .rz-chkbox ~ .rz-label { font: 12px Arial, sans-serif; color: #000; }

:is(.wf-main, .rz-dialog) .rz-tabview { background: none; box-shadow: none; }
:is(.wf-main, .rz-dialog) .rz-tabview-nav { border-bottom: 1px solid #adadad; gap: 0; background: none; padding: 0 0 0 2px; }
:is(.wf-main, .rz-dialog) .rz-tabview-nav li { border: 1px solid #adadad; border-bottom: 0; margin: 2px -1px 0 0; background: #f0f0f0; border-radius: 0; box-shadow: none; }
:is(.wf-main, .rz-dialog) .rz-tabview-nav li::after, :is(.wf-main, .rz-dialog) .rz-tabview-nav li::before { display: none; }
:is(.wf-main, .rz-dialog) .rz-tabview-nav li.rz-tabview-selected { background: #fff; margin-top: 0; margin-bottom: -1px; padding-bottom: 1px; position: relative; z-index: 1; }
:is(.wf-main, .rz-dialog) .rz-tabview-nav li a { padding: 3px 10px; font: 12px "Segoe UI", Tahoma, sans-serif; color: #000; }
:is(.wf-main, .rz-dialog) .rz-tabview-panels { background: #fff; border: 1px solid #adadad; border-top: 0; border-radius: 0; }

:is(.wf-main, .rz-dialog) .rz-fieldset { border: 1px solid #b4c8e0; border-radius: 3px; background: none; padding: 4px 10px 8px; }
:is(.wf-main, .rz-dialog) .rz-fieldset-legend { font: 12px Tahoma, sans-serif; color: #000; background: none; padding: 0 2px; }
:is(.wf-main, .rz-dialog) .rz-fieldset-legend :is(.rz-fieldset-legend-text, span) { font: inherit; }