/* Option 5: neutral surfaces, restrained blue accents. Loaded after vendor themes.
   Keep component structure and all workflow/status semantics in the application. */
.lr-refined {
    --lr-bg: #f5f6f8;
    --lr-paper: #fff;
    --lr-ink: #30353b;
    --lr-heading: #344862;
    --lr-muted: #65707d;
    --lr-line: #dfe3e8;
    --lr-accent: #35658f;
    --lr-selected: #edf3f9;
    --lr-soft: #f7f8fa;
    --lr-page-gutter: 22px;
    --lr-header-height: 62px;
    background: var(--lr-bg);
    color: var(--lr-ink);
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
}
.lr-refined a { color: var(--lr-accent); }
.lr-refined a:focus-visible, .lr-refined button:focus-visible {
    outline: 2px solid var(--lr-accent);
    outline-offset: 3px;
}
.lr-refined .navbar, .lr-refined .navbar .navbar-inner {
    min-height: 62px;
    height: auto;
    background: var(--lr-paper);
    border-bottom: 1px solid var(--lr-line);
    box-shadow: none;
}
.lr-refined .navbar .navbar-inner .navbar-container {
    display: flex; align-items: center; flex-wrap: wrap; column-gap: 22px;
    padding: 0 21px 0 18px;
}
.lr-refined .navbar .navbar-container::before, .lr-refined .navbar .navbar-container::after { display: none; }
.lr-refined .lr-navbar-brand-group { display: flex; align-items: center; flex: 0 0 218px; }
.lr-refined .navbar .navbar-inner { min-height: 61px; border-bottom: 0; }
.lr-refined .navbar .navbar-inner .lr-navbar-brand-group { display: flex; }
.lr-refined .lr-navbar-account { flex: 0 0 auto; margin-left: auto; }
.lr-refined .navbar .navbar-brand { height: 61px; width: 126px; padding: 0; overflow: hidden; }
/* The existing square logo asset includes whitespace around the wordmark. */
.lr-refined .navbar .navbar-brand img { height: 126px; width: 126px; max-height: none; max-width: none; position: relative; top: 50%; transform: translateY(-50%); }
.lr-refined .lr-product-name {
    margin: 0 0 0 20px;
    padding-left: 20px;
    border-left: 1px solid var(--lr-line);
    color: var(--lr-muted);
    font-size: 13px;
}
/* One native form handles both Enter and the visible Search action. */
.lr-refined .lr-header-search {
    display: flex; align-items: center; flex: 1 1 0; min-width: 0; max-width: 410px;
    height: 36px; margin: 0; background: var(--lr-soft);
    border: 1px solid var(--lr-line); border-radius: 5px; color: var(--lr-muted);
}
.lr-refined .lr-header-search:focus-within { border-color: var(--lr-accent); box-shadow: 0 0 0 2px #35658f17; }
.lr-refined .lr-header-search > .fa { flex: 0 0 auto; margin: 0 10px 0 12px; }
.lr-refined .lr-header-search .searchinput {
    flex: 1 1 0; min-width: 0; width: 100%; height: 34px; padding: 7px 0;
    background: transparent; border: 0; border-radius: 0 !important; box-shadow: none; font-size: 13px;
}
.lr-refined .lr-header-search .searchinput::placeholder { color: var(--lr-muted) !important; opacity: 1; font-style: normal !important; }
.lr-refined .lr-header-search .btn {
    align-self: stretch; flex: 0 0 auto; margin: 0 0 0 8px; padding: 0 12px;
    border: 0; border-left: 1px solid var(--lr-line); border-radius: 0 4px 4px 0 !important;
    color: var(--lr-accent); font-weight: 600;
}
.lr-refined .navbar .navbar-account, .lr-refined .navbar .account-area,
.lr-refined .navbar .account-area > li { height: 61px; }
.lr-refined .navbar .navbar-account { margin-right: 0; }
.lr-refined .lr-avatar-initials {
    display: inline-flex;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    background: var(--lr-selected);
    color: var(--lr-accent);
    border-radius: 50%;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
}
.lr-refined .lr-avatar-initials img { width: 100%; height: 100%; object-fit: cover; }
.lr-refined .dropdown-menu { border: 1px solid var(--lr-line); border-radius: 6px; box-shadow: 0 6px 20px #263c501a; }
.lr-refined .page-sidebar { width: 236px; border-right: 1px solid var(--lr-line); background: var(--lr-paper); }
.lr-refined .page-sidebar:before { left: 0; width: 236px; box-shadow: none; background: var(--lr-paper); }
/* The menu scrolls within the viewport, but its background and divider must
   continue through long pages such as Home, including in compact mode. */
.lr-refined .main-container > .page-container { background: var(--lr-paper); }
.lr-refined .page-sidebar ~ .page-content { margin-left: 236px; box-shadow: -1px 0 0 var(--lr-line); }
.lr-refined .page-sidebar .sidebar-menu { margin-left: 0; }
.lr-refined .lr-sidebar-tools {
    display: flex;
    position: relative;
    z-index: 2;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 8px 14px;
}
.lr-refined .lr-sidebar-label { color: var(--lr-muted); font-size: 11px; font-weight: 600; }
.lr-refined .lr-sidebar-toggle {
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    color: var(--lr-muted);
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 18px;
}
.lr-refined .lr-sidebar-toggle:hover { background: var(--lr-selected); color: var(--lr-accent); }
.lr-refined .page-sidebar .sidebar-menu a { color: var(--lr-ink); font-size: 12px; }
.lr-refined .page-sidebar .sidebar-menu > li > a { min-height: 42px; line-height: 42px; border: 0; }
.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon { color: #718094; font-size: 16px; }
.lr-refined .page-sidebar .sidebar-menu > li > a .menu-expand { color: #8290a0; }
.lr-refined .page-sidebar .sidebar-menu > li.open > a,
.lr-refined .page-sidebar .sidebar-menu a:hover { background: var(--lr-selected); color: var(--lr-accent); }
.lr-refined .page-sidebar .sidebar-menu .submenu { background: var(--lr-paper); }
.lr-refined .page-sidebar .sidebar-menu .submenu li > a { border: 0; }
.lr-refined .page-sidebar .sidebar-menu .submenu > li > a:before,
.lr-refined .page-sidebar .sidebar-menu .submenu:before { display: none; }
.lr-refined .page-sidebar .sidebar-menu li:before { background: var(--lr-accent); }
/* The page on screen (is_current_menu_entry in app.component.side-bar.js): accent bar and bold text. */
.lr-refined .page-sidebar .sidebar-menu li.lr-current > a { background: var(--lr-selected); color: var(--lr-accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--lr-accent); }
.lr-refined .page-sidebar .sidebar-menu li.lr-current > a > .menu-icon { color: var(--lr-accent); }
.lr-refined .page-sidebar .menu-text.label {
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-shadow: none;
    box-shadow: none;
}
/* Retain the server's semantic status classes, with quieter backgrounds. */
.lr-refined .label-default, .lr-refined .label-gray { background: #eef0f3 !important; color: #596572 !important; }
.lr-refined .label-blue, .lr-refined .label-primary, .lr-refined .label-azure,
.lr-refined .label-sky, .lr-refined .label-info, .lr-refined .label-lightblue { background: #e8f1fa !important; color: #315d87 !important; }
.lr-refined .label-palegreen, .lr-refined .label-green, .lr-refined .label-darkgreen, .lr-refined .label-success { background: #e9f3ed !important; color: #39704e !important; }
.lr-refined .label-yellow, .lr-refined .label-gold, .lr-refined .label-warning,
.lr-refined .label-orange, .lr-refined .label-lightyellow { background: #fbf1de !important; color: #896222 !important; }
.lr-refined .label-darkorange, .lr-refined .label-danger, .lr-refined .label-red,
.lr-refined .label-maroon { background: #f9eaea !important; color: #a04b4b !important; }
.lr-refined .label-purple, .lr-refined .label-magenta { background: #f0eaf6 !important; color: #75548e !important; }
.lr-refined .page-sidebar.menu-compact, .lr-refined .page-sidebar.menu-compact:before,
.lr-refined .page-sidebar.menu-compact .sidebar-menu { width: 60px; }
.lr-refined .page-sidebar.menu-compact ~ .page-content { margin-left: 60px; }
.lr-refined .menu-compact .lr-sidebar-tools { justify-content: center; padding: 8px 0; }
.lr-refined .menu-compact .lr-sidebar-label { display: none; }
.lr-refined .page-sidebar.menu-compact .sidebar-menu > li > a { text-align: center; }
.lr-refined .page-sidebar.menu-compact .sidebar-menu > li > a > .menu-icon { width: 58px; margin: 0; }
.lr-refined .page-sidebar.menu-compact .sidebar-menu > li > a .menu-text,
.lr-refined .page-sidebar.menu-compact .sidebar-menu > li > .submenu { left: 59px; width: 245px; text-align: left; }
.lr-refined .page-sidebar.menu-compact .sidebar-menu > li:focus-within > .submenu { display: block !important; }
.lr-refined .page-sidebar.menu-compact .sidebar-menu > li:focus-within > a > .menu-text { display: block; }
.lr-refined .page-content { background: var(--lr-bg); }
.lr-refined .page-body { padding: 12px var(--lr-page-gutter); background: var(--lr-bg); }
.lr-refined .widget { box-shadow: none; }
.lr-refined .widget-header {
    background: var(--lr-paper);
    color: var(--lr-heading);
    box-shadow: none;
    border-bottom: 1px solid var(--lr-line) !important;
}
.lr-refined .widget-header > .widget-caption { font-weight: 600; color: var(--lr-heading); }
.lr-refined .page-body > .widget > .widget-header { min-height: 52px; padding: 8px 12px; }
.lr-refined .page-body > .widget > .widget-header > .widget-caption { font-size: 20px; line-height: 34px; }
.lr-refined .widget-body { background: var(--lr-paper); box-shadow: none; }
.lr-refined .dx-datagrid, .lr-refined .dx-widget { font-family: 'Segoe UI', Arial, sans-serif; font-size: 12px; }
.lr-refined .dx-datagrid { color: var(--lr-ink); }
.lr-refined .dx-datagrid-headers { color: var(--lr-heading); background: var(--lr-soft); border-color: var(--lr-line); font-weight: 600; }
.lr-refined .dx-datagrid-headers .dx-header-row > td { background: var(--lr-soft) !important; white-space: normal; vertical-align: middle; padding-top: 11px; padding-bottom: 11px; }
.lr-refined .dx-datagrid-headers .dx-header-row .dx-datagrid-text-content { white-space: normal; line-height: 1.4; }
.lr-refined .dx-datagrid .dx-row > td { border-color: #e8ebef; }
.lr-refined .dx-datagrid .dx-data-row > td { padding-top: 9px; padding-bottom: 9px; vertical-align: middle; }
/* Keep the last fixed Sites cell from stretching over Country when DevExtreme assigns it an auto width. */
.lr-refined .dx-datagrid .dx-datagrid-content-fixed .dx-row > td.lr-sites-actions { box-sizing: border-box; width: 110px; }
.lr-refined .dx-datagrid .dx-row-alt > td { background: #fafbfc; }
.lr-refined .dx-datagrid .dx-selection > td,
.lr-refined .dx-datagrid .dx-selection.dx-row:hover > td { background: var(--lr-selected); color: var(--lr-ink); }
.lr-refined .dx-datagrid .dx-row-focused > td { background: var(--lr-selected); color: var(--lr-ink); }
.lr-refined .dx-datagrid-rowsview { border-color: var(--lr-line); }
.lr-refined .dx-datagrid-header-panel { padding: 8px 0; }
.lr-refined .dx-button { border-radius: 6px; border-color: var(--lr-line); box-shadow: none; }
.lr-refined .dx-texteditor { border-color: var(--lr-line); border-radius: 4px; }
.lr-refined .form-control, .lr-refined select, .lr-refined textarea {
    color: var(--lr-ink);
    border-color: #d6dce3;
    border-radius: 4px !important;
    box-shadow: none;
    font-family: inherit;
    font-size: 12px;
}
.lr-refined .form-control { min-height: 34px; }
.lr-refined .form-control:focus { border-color: var(--lr-accent); box-shadow: 0 0 0 2px #35658f17; }
.lr-refined .form-control[readonly], .lr-refined .form-control[disabled] { background: #f4f6f8; color: #65707d; }
.lr-refined .forminput label { font-size: 12px; font-weight: 600; color: #485260; margin-bottom: 6px; }
.lr-refined .requiredcls input, .lr-refined .requiredcls textarea,
.lr-refined .requiredcls select, .lr-refined .requiredcls .dx-lookup-field-wrapper,
.lr-refined .requiredcls .dx-texteditor-container.dx-tag-container { background-color: #fffdf6 !important; }
.lr-refined .requiredcls label:after { content: ' *'; color: #a75b43; }
.lr-refined .forminput { margin-bottom: 15px; }
/* Plain dropdowns (Inspection Types, Process Status, profile settings): same height, border and arrow as the
   DevExtreme fields beside them. They still open the browser's own list. Multi-select lists are left alone. */
.lr-refined select.form-control:not([multiple]) {
    -webkit-appearance: none; appearance: none; height: 37px; padding: 0 34px 0 10px;
    border: 1px solid #dfe3e8; border-radius: 4px; box-shadow: none; color: #344862;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2365707d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center; background-size: 14px 14px;
}
.lr-refined select.form-control:not([multiple]):focus { border-color: var(--lr-accent); box-shadow: 0 0 0 2px #35658f26; }
.lr-refined select.form-control:not([multiple])::-ms-expand { display: none; }
/* Rich text editors (TinyMCE): white toolbar and the fields' rounded border instead of the old grey skin. */
.lr-refined .mce-tinymce.mce-panel { border: 1px solid #dfe3e8 !important; border-radius: 4px; overflow: hidden; box-shadow: none !important; }
.lr-refined .mce-tinymce .mce-toolbar-grp { background: #fff !important; border-bottom: 1px solid #e8ebef !important; padding: 2px 4px; }
.lr-refined .mce-tinymce .mce-btn { background: transparent !important; border-color: transparent !important; border-radius: 4px; box-shadow: none !important; }
.lr-refined .mce-tinymce .mce-btn:hover, .lr-refined .mce-tinymce .mce-btn.mce-active { background: #f0f4f8 !important; border-color: #dfe3e8 !important; }
.lr-refined .mce-tinymce .mce-ico, .lr-refined .mce-tinymce .mce-txt { color: #2f3d4c !important; }
.lr-refined .mce-tinymce .mce-caret { border-top-color: #2f3d4c !important; }
.lr-refined .mce-tinymce .mce-btn-group:not(:first-child) { border-left: 1px solid #e8ebef !important; }
.lr-refined .mce-tinymce .mce-statusbar { background: #fff !important; border-top: 1px solid #e8ebef !important; }
.lr-refined .btn { border-radius: 4px !important; box-shadow: none !important; text-shadow: none; font-size: 12px; padding: 7px 12px; }
/* DevExtreme buttons that also carry .btn (e.g. the workflow buttons under grids) pad their own inner content; adding .btn padding on top pushed the label down and clipped it. */
.lr-refined .btn.dx-button { padding: 0; }
.lr-refined .btn-default { background: var(--lr-paper) !important; border-color: #d6dce3; color: #465567; }
.lr-refined .btn-default:hover { background: var(--lr-soft) !important; border-color: #b7c4d1; }
.lr-refined .btn-primary, .lr-refined .btn-blue { background: var(--lr-accent) !important; border-color: var(--lr-accent); }
.lr-refined #workflow-button-box .btn-primary { background: var(--lr-paper) !important; border-color: #d6dce3; color: var(--lr-accent); }
.lr-refined #submit-button { background: var(--lr-accent) !important; border-color: var(--lr-accent); }
.lr-refined #submit-button-close { background: var(--lr-selected) !important; border-color: #c9d8e6; color: var(--lr-accent); }
/* On a new record the save actions are workflow buttons; give them the same look as Save / Save and Close on an existing record. */
.lr-refined #workflow-button-box .btn-primary.lr-primary-action { background: var(--lr-accent) !important; border-color: var(--lr-accent); color: #fff; }
.lr-refined #workflow-button-box .btn-primary.lr-save-close-action { background: var(--lr-selected) !important; border-color: #c9d8e6; color: var(--lr-accent); }
/* Focus: keyboard users get the accent outline; a mouse click no longer leaves the browser's (often orange) focus ring. */
.lr-refined .btn:focus:not(:focus-visible), .lr-refined .dx-button:focus:not(:focus-visible) { outline: none; }
.lr-refined .btn:focus-visible, .lr-refined .dx-button.dx-state-focused:focus-visible { outline: 2px solid var(--lr-accent); outline-offset: 2px; }
/* Yes/No switches (DevExtreme 16.1 dxSwitch): a rounded toggle in the accent colour with readable 11px Yes / No.
   The widget positions its track from the measured width at render, so these sizes must be in place before forms open. */
.lr-refined .dx-switch { width: 56px; height: 24px; }
/* No border on the track: the widget slides the knob by the switch's full width, so a border would leave it 1px off. */
.lr-refined .dx-switch .dx-switch-container {
    margin: 0; height: 24px; border: 0; border-radius: 12px; background: #eef1f4; box-shadow: inset 0 0 0 1px #c9d1da;
    transition: background-color .15s, box-shadow .15s;
}
.lr-refined .dx-switch.dx-switch-on-value .dx-switch-container { background: var(--lr-accent); box-shadow: none; }
.lr-refined .dx-switch .dx-switch-on, .lr-refined .dx-switch .dx-switch-off {
    font-size: 11px; font-weight: 600; line-height: 24px; padding-left: 4px; padding-right: 24px;
}
.lr-refined .dx-switch .dx-switch-on { color: #fff; }
.lr-refined .dx-switch .dx-switch-off { color: #596575; margin-left: 0; }
.lr-refined .dx-switch .dx-switch-handle { width: 24px; height: 24px; margin-top: 0; margin-left: -24px; padding: 3px; }
.lr-refined .dx-switch .dx-switch-handle::before,
.lr-refined .dx-switch.dx-state-hover .dx-switch-handle::before,
.lr-refined .dx-switch.dx-state-focused .dx-switch-handle::before,
.lr-refined .dx-switch.dx-state-active .dx-switch-handle::before,
.lr-refined .dx-switch.dx-switch-on-value .dx-switch-handle::before {
    background-color: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(36, 52, 72, .3);
}
.lr-refined .dx-switch.dx-state-hover:not(.dx-switch-on-value) .dx-switch-container { background: #e4e8ed; box-shadow: inset 0 0 0 1px #aab6c3; }
.lr-refined .dx-switch.dx-state-focused .dx-switch-container { box-shadow: inset 0 0 0 1px #aab6c3, 0 0 0 2px #35658f40; }
.lr-refined .dx-switch.dx-state-focused.dx-switch-on-value .dx-switch-container { box-shadow: 0 0 0 2px #35658f40; }
.lr-refined .dx-switch.dx-state-readonly .dx-switch-container { opacity: .65; }
.lr-refined .dx-switch.dx-state-readonly:not(.dx-switch-on-value) .dx-switch-container { background: #eef1f4; }
.lr-refined #delete-button { background: #fff !important; border-color: #e6caca; color: #a04b4b; }
.lr-refined .modal-edit-form .modal-content { border: 1px solid var(--lr-line); border-radius: 8px; box-shadow: 0 16px 52px #24344833; }
.lr-refined .modal-dialog.modal-edit-form { width: calc(100% - 32px); max-width: 1680px; margin: 10px auto; }
.lr-refined .edit_form_header { border-radius: 7px 7px 0 0; }
.lr-refined #form-body[data-is-nested="false"] { padding: 18px 22px !important; }
/* The error banner stays at the top of the form while it scrolls; the tab bar sits below it (sync_error_banner_offset). */
.lr-refined #form-body[data-is-nested="false"] > div > .lr-form-error-banner { position: sticky; top: -18px; z-index: 111; background: var(--lr-paper); }
/* Form error banner: the soft error style used on the sign-in card instead of the theme's solid red bar. */
.lr-refined .lr-form-error-banner .alert { margin: 0 0 12px; padding: 10px 40px 10px 14px; border: 1px solid #efd6d0; border-left: 3px solid #c0533f; border-radius: 4px; background: #fbefec; color: #8a3f33; font-size: 13px; line-height: 1.45; box-shadow: none; text-shadow: none; }
.lr-refined .lr-form-error-banner .alert > div + div { margin-top: 2px; }
.lr-refined .lr-form-error-banner .alert .close { top: 0; right: -26px; color: #8a3f33; opacity: .6; text-shadow: none; font-size: 18px; font-weight: 400; }
.lr-refined .lr-form-error-banner .alert .close:hover, .lr-refined .lr-form-error-banner .alert .close:focus-visible { opacity: 1; }
.lr-refined .lr-form-error-banner hr.wide { display: none; }
.lr-refined #workflow-button-box { background: var(--lr-paper); border-top: 1px solid var(--lr-line); padding-top: 10px !important; }
.lr-refined .lr-fieldset { border: 0; padding: 0; margin: 0 0 21px; min-width: 0; }
.lr-refined .lr-fieldset > legend,
.lr-refined .form_section_title {
    display: block;
    position: relative;
    width: 100%;
    padding: 0 0 10px;
    margin: 0 0 17px;
    border: 0;
    border-bottom: 2px solid var(--lr-line);
    color: var(--lr-heading);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}
.lr-refined .lr-fieldset > legend:after,
.lr-refined .form_section_title:after { content: ''; position: absolute; left: 0; bottom: -2px; width: 36px; height: 3px; background: var(--lr-accent); }
.lr-refined .lr-fields { display: flex; flex-wrap: wrap; margin: 0 -9px; align-items: flex-start; }
.lr-refined .lr-fields > .lr-field { position: relative; float: none; min-width: 0; padding: 0 9px; margin-top: 0 !important; }
.lr-refined .lr-fields > .lr-repeated-heading { display: none; }
.lr-refined .lr-fieldset .form_section_title { border: 0; padding: 0; margin: 0 0 4px; font-size: 12px; font-weight: 600; }
.lr-refined .lr-fieldset .form_section_title:after { display: none; }
.lr-refined .lr-fields > .lr-col-3 { width: 25%; }
.lr-refined .lr-fields > .lr-col-4 { width: 33.333333%; }
.lr-refined .lr-fields > .lr-col-6 { width: 50%; }
.lr-refined .lr-fields > .lr-col-12 { width: 100%; }
.lr-refined .lr-form-remaining { display: flow-root; margin: 0 -9px; }
.lr-refined .lr-form-remaining > [data-lr-field] { padding-left: 9px; padding-right: 9px; }
.lr-refined .lr-form-tabs {
    position: sticky;
    top: calc(-18px + var(--lr-error-banner-height, 0px));
    z-index: 110; /* above the reference fields' + / edit buttons (z-index 100), which otherwise scroll over it */
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin: -18px -22px 22px;
    padding: 0 18px;
    background: var(--lr-paper);
    border-bottom: 1px solid var(--lr-line);
}
.lr-refined .lr-form-tabs > button {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--lr-muted);
    font-size: 12px;
    font-weight: 600;
}
.lr-refined .lr-form-tabs > button:hover { background: var(--lr-soft); color: var(--lr-accent); }
.lr-refined .lr-form-tabs > button[aria-selected="true"] { border-bottom-color: var(--lr-accent); color: var(--lr-accent); }
.lr-refined .lr-form-tabs > button:focus-visible { outline-offset: -4px; }
.lr-refined .lr-form-tabs > button.lr-tab-disabled,
.lr-refined .lr-form-tabs > button.lr-tab-disabled:hover { color: var(--lr-muted); background: transparent; cursor: not-allowed; opacity: .65; }
.lr-refined .lr-form-tabs .lr-tab-count {
    display: inline-block;
    min-width: 20px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--lr-selected);
    color: var(--lr-accent);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.lr-refined .lr-form-tabs .lr-tab-count-empty { background: #eff1f4; color: var(--lr-muted); }
@media (max-width: 1000px) {
    .lr-refined .lr-fields > .lr-col-3, .lr-refined .lr-fields > .lr-col-4 { width: 50%; }
}
@media (max-width: 600px) {
    .lr-refined { --lr-page-gutter: 10px; }
    .lr-refined .navbar .navbar-inner .navbar-container { padding: 0 16px 0 12px; }
    .lr-refined .lr-product-name { margin-left: 12px; padding-left: 12px; }
    .lr-refined .page-body { padding: 10px; }
    .lr-refined #form-body[data-is-nested="false"] { padding: 14px !important; }
    .lr-refined .lr-fields > .lr-field { width: 100%; }
    .lr-refined .lr-form-tabs { top: calc(-14px + var(--lr-error-banner-height, 0px)); margin: -14px -14px 18px; padding: 0 8px; }
    .lr-refined #form-body[data-is-nested="false"] > div > .lr-form-error-banner { top: -14px; }
    .lr-refined .page-sidebar.menu-full-width { width: calc(100vw - 12px); z-index: 101; }
    .lr-refined .page-sidebar.menu-full-width:before { width: calc(100vw - 12px); }
}
@media (prefers-reduced-motion: reduce) {
    .lr-refined .lr-sidebar-toggle, .lr-refined .lr-form-tabs > button { transition: none; }
}

/* Match the option 5 page hierarchy and existing grid controls. */
.lr-refined h1, .lr-refined h2, .lr-refined h3,
.lr-refined .widget-caption, .lr-refined .section_title_text,
.lr-refined input, .lr-refined button, .lr-refined select, .lr-refined textarea {
    font-family: 'Segoe UI', Arial, sans-serif;
}
.lr-refined .fa { font-family: FontAwesome; }
.lr-refined .lr-list-heading {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 10px; color: var(--lr-heading);
}
.lr-refined .lr-list-heading h1 {
    margin: 0; font-size: 25px; font-weight: 650; letter-spacing: -.6px; line-height: 1.25;
}
.lr-refined .lr-list-caption { margin-top: 5px; font-size: 12px; color: var(--lr-muted); }
/* A list opened from a dashboard tile or chart, or a pivot drill-down: says what it is filtered to, with a way to clear it. */
.lr-refined .lr-filter-chip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    padding: 2px 4px 2px 10px; border: 1px solid var(--lr-accent); border-radius: 13px;
    background: var(--lr-selected); color: var(--lr-heading); line-height: 18px;
}
.lr-refined .lr-filter-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-refined .lr-filter-chip-clear {
    flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--lr-heading); font-size: 16px; line-height: 18px; cursor: pointer;
}
.lr-refined .lr-filter-chip-clear:hover, .lr-refined .lr-filter-chip-clear:focus { background: var(--lr-accent); color: #fff; outline: none; }
.lr-refined .lr-list-heading .widget-buttons { display: flex; align-items: center; gap: 4px; padding: 0; }
.lr-refined .lr-view-button, .lr-refined .lr-record-heading .widget-buttons > i,
.lr-refined .lr-record-heading .widget-buttons > span > i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; margin: 0 !important;
    border: 1px solid var(--lr-line); border-radius: 6px; background: var(--lr-paper);
    color: var(--lr-muted) !important; font-size: 14px; line-height: 1; cursor: pointer;
}
.lr-refined .lr-view-button[aria-pressed="true"], .lr-refined .lr-view-button:hover,
.lr-refined .lr-record-heading .widget-buttons i:hover { background: var(--lr-selected); color: var(--lr-accent) !important; }
.lr-refined .widget-header .widget-buttons .lr-view-button { line-height: 30px; text-align: center; vertical-align: middle; }
/* The related-grid collapse toggle. Its classes are rewritten on every toggle, so style it by attribute. */
.lr-refined .widget-header .widget-buttons [data-type-element="headBtn"] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; margin: 0 0 0 6px !important;
    border: 1px solid var(--lr-line); border-radius: 6px; background: var(--lr-paper);
    color: var(--lr-muted) !important; font-size: 14px; line-height: 30px; text-align: center; vertical-align: middle; cursor: pointer;
}
.lr-refined .widget-header .widget-buttons [data-type-element="headBtn"]:hover { background: var(--lr-selected); color: var(--lr-accent) !important; }
.lr-refined .lr-related-grid { min-height: 120px; position: relative; }
/* With always-visible scrollbars DevExtreme 16.1 reserves 8px under the rows for a horizontal scrollbar,
   but it also stretches the rows to fill the grid, so the content always overflows by those 8px and a
   vertical scrollbar appears on grids that fit. Related grids are sized to their rows, so drop the reserve;
   a horizontal scrollbar, when there is one, overlays the empty space below the last row. */
.lr-refined .lr-related-grid .dx-datagrid-rowsview .dx-scrollable-content { padding-bottom: 0; }
/* Loading overlay for related grids (DevExtreme's own load panel is turned off for them). It covers the
   grid below its toolbar, so Create new / Export stay readable. */
.lr-refined .lr-related-grid.lr-grid-loading::before {
    content: ''; position: absolute; z-index: 2; left: 0; right: 0; top: 66px; bottom: 0; background: rgba(255, 255, 255, .75);
}
.lr-refined .lr-related-grid.lr-grid-loading::after {
    content: ''; position: absolute; z-index: 3; left: calc(50% - 11px); top: calc(50% + 22px);
    width: 22px; height: 22px; border: 2px solid #dfe3e8; border-top-color: #35658f; border-radius: 50%;
    animation: lr-loading-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .lr-refined .lr-related-grid.lr-grid-loading::after { animation: none; } }
.lr-refined .page-body > .widget > .lr-list-heading + div {
    border: 1px solid var(--lr-line); border-radius: 6px; background: var(--lr-paper); overflow: hidden;
}
.lr-refined .dx-datagrid-header-panel { padding: 14px; border-bottom: 1px solid var(--lr-line); }
.lr-refined .dx-datagrid-header-panel .dx-toolbar { margin-bottom: 0; }
.lr-refined .lr-cell-hint {
    /* DevExtreme 16.1 renders the tooltip body as a nowrap inline-block, so the hint must size itself:
       max-content keeps short values on one line and long ones wrap at the limit instead of one character per line. */
    width: max-content; max-width: 380px; white-space: normal; overflow-wrap: anywhere; text-align: left; font-size: 12px; line-height: 1.5;
}
.lr-refined .dx-datagrid-header-panel .dx-toolbar-before { padding-right: 10px; }
.lr-refined .dx-datagrid-header-panel .dx-button { min-height: 35px; font-size: 12px; font-weight: 550; }
.lr-refined .dx-datagrid-addrow-button { background: var(--lr-accent); border-color: var(--lr-accent); color: white; }
.lr-refined .dx-datagrid-addrow-button .dx-icon { color: white; }
.lr-refined .dx-datagrid-headers .dx-header-row > td { font-size: 11px; font-weight: 550; }
.lr-refined .dx-datagrid-headers .dx-header-row .dx-datagrid-text-content {
    overflow: visible; text-overflow: clip; max-width: 100%; white-space: normal !important;
}
.lr-refined .edit_form_header { padding: 17px 18px; min-height: 81px; }
.lr-refined .lr-record-heading { display: flex; align-items: center; gap: 12px; width: 100%; flex-wrap: wrap; }
.lr-refined .lr-record-title { min-width: 0; margin-right: auto; text-align: left; }
.lr-refined .lr-record-kind { color: var(--lr-muted); font-size: 12px; line-height: 1.45; margin-bottom: 3px; }
.lr-refined .lr-record-title h2 { color: var(--lr-heading); font-size: 19px; font-weight: 650; letter-spacing: -.3px; margin: 0; line-height: 1.3; overflow-wrap: anywhere; }
.lr-refined .lr-record-heading .widget-buttons { display: flex; float: none; align-items: center; gap: 5px; padding: 0; height: auto; margin: 0; }
.lr-refined .lr-record-status .label { font-size: 10px; font-weight: 600; padding: 5px 8px; border-radius: 4px; }
.lr-refined #workflow-button-box { box-shadow: none !important; }
.lr-refined .lr-user-name { color: var(--lr-muted); font-size: 12px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
    .lr-refined .lr-user-name { display: none; }
}
@media (max-width: 720px) {
    .lr-refined { --lr-header-height: 118px; }
    .lr-refined .lr-navbar-brand-group { flex-basis: auto; }
    .lr-refined .lr-header-search { order: 1; flex-basis: 100%; max-width: none; height: 44px; margin-bottom: 12px; }
    .lr-refined .lr-header-search .searchinput { height: 42px; font-size: 16px; }
}
@media (max-width: 600px) {
    .lr-refined .lr-user-name { display: none; }
    .lr-refined .lr-list-heading { flex-wrap: wrap; }
    .lr-refined .edit_form_header { padding: 12px; }
    .lr-refined .lr-record-title { flex-basis: 100%; }
    .lr-refined .lr-record-heading .widget-buttons { margin-left: auto; }
    .lr-refined .dx-datagrid-header-panel { padding: 10px; }
}

/* Legacy theme uses !important on heading weights and more specific navbar rules. */
.lr-refined .lr-list-heading h1, .lr-refined .lr-record-title h2 { font-weight: 650 !important; }
.lr-refined .navbar .navbar-inner .navbar-account .account-area > li,
.lr-refined .navbar .navbar-inner .navbar-account .account-area > li .login-area { height: 61px; }
.lr-refined .navbar .navbar-inner .navbar-account .account-area > li .login-area {
    display: flex; align-items: center; gap: 12px; padding: 0 8px;
    background: transparent; border: 0; box-shadow: none;
}
.lr-refined .navbar .navbar-inner .navbar-header .navbar-account { height: 61px; }
.lr-refined .navbar .navbar-inner .navbar-header .navbar-account .account-area {
    display: block; position: relative; top: auto; right: auto; margin: 0; padding: 0;
}
.lr-refined .navbar .navbar-inner .navbar-header .navbar-account .account-area > li { padding-left: 0; }

.lr-refined .navbar .navbar-inner .navbar-header .navbar-account .account-area > li.open > .login-area,
.lr-refined .navbar .navbar-inner .navbar-header .navbar-account .account-area > li > .login-area:hover {
    background: var(--lr-soft); box-shadow: none;
}
.lr-refined .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .lr-account-menu {
    width: 270px; max-width: calc(100vw - 42px); min-width: 0; padding: 6px;
    background: var(--lr-paper); border: 1px solid var(--lr-line); border-radius: 8px !important;
    box-shadow: 0 6px 20px #263c501a; animation: none;
}
.lr-refined .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .lr-account-menu > li {
    padding: 0; background: transparent;
}
.lr-refined .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .lr-account-menu > .lr-account-summary {
    padding: 8px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--lr-line); overflow-wrap: anywhere;
}
.lr-refined .lr-account-summary strong { display: block; color: var(--lr-heading); font-size: 14px; }
.lr-refined .lr-account-summary span { color: var(--lr-muted); font-size: 12px; }
.lr-refined .lr-account-organization form { padding: 6px 10px 10px; }
.lr-refined .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .lr-account-menu .lr-account-action {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 8px 10px;
    color: var(--lr-ink); background: transparent; border: 0; border-radius: 5px;
    font-size: 13px; text-align: left;
}
.lr-refined .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .lr-account-menu .lr-account-action:hover,
.lr-refined .navbar .navbar-inner .navbar-header .navbar-account .account-area > li .lr-account-menu .lr-account-action:focus {
    color: var(--lr-accent); background: var(--lr-selected);
}
.lr-refined .lr-account-action > .fa { width: 16px; color: var(--lr-accent); text-align: center; }

.lr-refined .lr-profile {
    --lr-profile-inset: 22px;
    max-width: 1060px; margin: 10px auto 18px;
    background: var(--lr-paper); border: 1px solid var(--lr-line); border-radius: 8px;
}
.lr-refined .lr-profile-page-body { min-height: calc(100vh - var(--lr-header-height)); }
.lr-refined .lr-profile-mobile { min-height: 100vh; padding: 12px var(--lr-page-gutter) 0; background: var(--lr-bg); }
.lr-refined .lr-profile-mobile > .lr-profile { margin-top: 0; }
.lr-refined .lr-profile-heading {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    padding: 16px var(--lr-profile-inset); border-bottom: 1px solid var(--lr-line);
}
.lr-refined .lr-profile-heading h1 {
    margin: 0 0 5px; color: var(--lr-heading); font-size: 24px; font-weight: 650 !important;
    line-height: 1.3; letter-spacing: -.3px;
}
.lr-refined .lr-profile-heading p { margin: 0; color: var(--lr-muted); }
.lr-refined .lr-profile-close { flex: 0 0 34px; height: 34px; padding: 0; }
.lr-refined .lr-profile-layout {
    display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
}
.lr-refined .lr-profile-column + .lr-profile-column {
    border-left: 1px solid var(--lr-line);
}
.lr-refined .lr-profile-card { padding: 18px var(--lr-profile-inset); }
.lr-refined .lr-profile-card + .lr-profile-card { border-top: 1px solid var(--lr-line); }
.lr-refined .lr-profile-card h2 {
    margin: 0 0 16px; color: var(--lr-heading); font-size: 16px; font-weight: 650 !important;
}
.lr-refined .lr-profile-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lr-refined .lr-profile-card label, .lr-refined .lr-profile-image > p {
    margin: 0 0 6px; color: var(--lr-ink); font-size: 13px; font-weight: 600;
}
.lr-refined .lr-profile-card .form-control { height: 38px; }
.lr-refined .lr-profile-image + .lr-profile-image { margin-top: 14px; }
.lr-refined .lr-profile-image > div {
    padding: 7px 9px; background: var(--lr-soft);
    border: 1px dashed #c5d0dc; border-radius: 6px;
}
/* The uploader's preview and controls need room to wrap inside the drop zone. */
.lr-refined .lr-profile-image table, .lr-refined .lr-profile-image tbody { display: block; }
.lr-refined .lr-profile-image tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    max-height: none !important; overflow: visible !important;
}
.lr-refined .lr-profile-image th { height: auto; max-width: 100%; }
.lr-refined .lr-profile-image th:empty, .lr-refined .lr-profile-image th:nth-child(2) { display: none; }
.lr-refined .lr-profile-image th:last-child { flex: 1 1 200px; }
.lr-refined .lr-profile-image .img-wrap {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
    background: var(--lr-paper); border: 1px solid var(--lr-line); border-radius: 6px;
}
.lr-refined .lr-profile-image .img-wrap .delete-image-span {
    border: 1px solid var(--lr-line); opacity: 1; background-position: center; background-size: 15px; background-repeat: no-repeat;
}
.lr-refined .lr-profile-image .dx-fileuploader-wrapper { padding: 0; }
.lr-refined .lr-profile-image .dx-fileuploader-input-wrapper { padding: 0; border: 0; white-space: normal; }
.lr-refined .lr-profile #error_notification { margin: 12px var(--lr-profile-inset) 0; }
.lr-refined .lr-profile-actions {
    display: flex; justify-content: flex-end; gap: 8px; padding: 12px var(--lr-profile-inset);
    background: var(--lr-soft); border-top: 1px solid var(--lr-line); border-radius: 0 0 7px 7px;
}
.lr-refined .lr-profile-actions > button { min-height: 34px; }
@media (max-width: 1050px) {
    .lr-refined .lr-profile-layout { grid-template-columns: minmax(0, 1fr); }
    .lr-refined .lr-profile-column + .lr-profile-column { border-top: 1px solid var(--lr-line); border-left: 0; }
}
@media (max-width: 520px) {
    .lr-refined .lr-profile { --lr-profile-inset: 14px; }
    .lr-refined .lr-profile-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Keep the sign-in surface in the same visual family as the workspace. */
.lr-refined.login-body { background: var(--lr-bg); }
.lr-refined.login-body::before { content: none; }
.lr-refined .lr-login-shell {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 32px 20px;
}
.lr-refined .lr-login-card {
    width: 100%; max-width: 440px; padding: 32px 36px;
    background: var(--lr-paper); border: 1px solid var(--lr-line);
    border-top: 3px solid var(--lr-accent); border-radius: 8px;
    box-shadow: 0 8px 28px #2434480d;
}
.lr-refined .lr-login-brand { position: relative; overflow: hidden; width: 164px; height: 66px; margin: 0 auto 20px; }
.lr-refined .lr-login-brand img { position: absolute; width: 164px; height: 164px; max-width: none; top: 50%; transform: translateY(-50%); }
.lr-refined .lr-login-heading { text-align: center; margin-bottom: 28px; }
.lr-refined .lr-login-product { color: var(--lr-muted); font-size: 12px; margin: 0 0 8px; }
.lr-refined .lr-login-heading h1 { color: var(--lr-heading); font-size: 22px; line-height: 1.35; font-weight: 650 !important; letter-spacing: -.3px; margin: 0; }
.lr-refined .lr-login-field { margin-bottom: 18px; }
.lr-refined .lr-login-field label { display: block; color: #485260; font-size: 12px; font-weight: 600; margin-bottom: 7px; }
.lr-refined .lr-login-field .form-control { height: 42px; padding: 10px 12px; font-size: 13px; background: var(--lr-paper); }
.lr-refined .lr-login-field .form-control::placeholder { color: #87919c !important; font-style: normal !important; }
.lr-refined .lr-login-submit { margin-top: 24px; }
.lr-refined .lr-login-submit .btn { min-height: 42px; font-size: 13px; font-weight: 600; color: white; }
.lr-refined .lr-login-submit .btn:hover { background: #2d567a !important; border-color: #2d567a; }
.lr-refined .lr-login-forgot { margin: 20px 0 0; text-align: center; font-size: 12px; color: var(--lr-muted); }
.lr-refined .lr-login-forgot a { color: var(--lr-accent); text-decoration: underline; text-underline-offset: 3px; }
.lr-refined .lr-login-card .alert { margin-bottom: 20px; border-radius: 4px; text-align: left; }
/* Forgot / reset password pages share the login card. */
.lr-refined .lr-login-intro { margin: -14px 0 24px; text-align: center; color: var(--lr-muted); font-size: 13px; line-height: 1.5; }
.lr-refined .lr-login-question { margin: 0 0 8px; color: var(--lr-heading); font-size: 13px; line-height: 1.45; }
/* Invite acceptance page: hints under a field (suggested usernames, password rules). */
.lr-refined .lr-login-hint { margin: 6px 0 0; color: var(--lr-muted); font-size: 12px; line-height: 1.45; }
.lr-refined .lr-login-hint a { color: var(--lr-accent); text-decoration: underline; text-underline-offset: 2px; }
.lr-refined .lr-login-card .alert-danger { background: #fbefec; color: #954d42; border: 1px solid #efd6d0; box-shadow: none; }
@media (max-width: 480px) {
    .lr-refined .lr-login-shell { padding: 24px 16px; }
    .lr-refined .lr-login-card { padding: 26px 24px; }
}

/* Option 5 uses neutral navigation text, status dots in the menu, and compact
   semibold badges in records. Keep the server-provided semantic color classes. */
.lr-refined .page-body > #datalist_cmp { margin-bottom: 0; }
.lr-refined .page-body > #datalist_cmp > .lr-list-heading + div > .widget-body { padding: 0; }
.lr-refined .page-sidebar { height: calc(100vh - var(--lr-header-height)); min-height: 0; }
.lr-refined .page-sidebar:not(.menu-compact) { overflow-y: auto; overflow-x: hidden; }
.lr-refined .lr-form-panel .widget-body[data-unique-id] { padding: 0 0 8px; }
.lr-refined .page-sidebar .sidebar-menu a { color: var(--lr-muted); }
.lr-refined .page-sidebar .sidebar-menu a .menu-text { color: inherit; }
.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon { color: var(--lr-muted); }
.lr-refined .page-sidebar .sidebar-menu .submenu > li > a { color: var(--lr-muted); }
.lr-refined .page-sidebar .sidebar-menu li.open > a,
.lr-refined .page-sidebar .sidebar-menu a:hover { color: var(--lr-accent); }
.lr-refined .label-lightyellow { --lr-state: #ad891c; --lr-state-bg: #fbf6e7; --lr-state-ink: #705812; }
.lr-refined .label-yellow, .lr-refined .label-gold, .lr-refined .label-warning, .lr-refined .label-orange { --lr-state: #b48b36; --lr-state-bg: #fbf5e8; --lr-state-ink: #75591e; }
.lr-refined .label-lightblue, .lr-refined .label-sky { --lr-state: #75a9d2; --lr-state-bg: #edf5fc; --lr-state-ink: #38668b; }
.lr-refined .label-blue, .lr-refined .label-primary, .lr-refined .label-info, .lr-refined .label-azure { --lr-state: #468ac4; --lr-state-bg: #eaf2fa; --lr-state-ink: #2d6392; }
.lr-refined .label-green, .lr-refined .label-success { --lr-state: #629b50; --lr-state-bg: #eff5eb; --lr-state-ink: #416e32; }
.lr-refined .label-palegreen { --lr-state: #83a866; --lr-state-bg: #f1f6ec; --lr-state-ink: #526f38; }
.lr-refined .label-darkgreen { --lr-state: #31864a; --lr-state-bg: #e9f3eb; --lr-state-ink: #25653a; }
.lr-refined .label-red, .lr-refined .label-danger, .lr-refined .label-maroon, .lr-refined .label-darkorange { --lr-state: #bf6658; --lr-state-bg: #fbefec; --lr-state-ink: #954d42; }
.lr-refined .label-purple, .lr-refined .label-magenta { --lr-state: #9269a8; --lr-state-bg: #f3edf7; --lr-state-ink: #74478d; }
.lr-refined .label-gray, .lr-refined .label-default, .lr-refined .label-lightgray { --lr-state: #8b939d; --lr-state-bg: #eff1f4; --lr-state-ink: #596575; }
.lr-refined .label-pink { --lr-state: #bd7194; --lr-state-bg: #f8edf2; --lr-state-ink: #915271; }
/* Calendar view (DevExtreme 16.1 scheduler). Work orders keep their status colour, in the same palette as the
   status badges in the lists: the appointment content carries the status's label-* class, which sets these variables. */
/* Analysis view: the empty table explains how to start (label_analysis_no_data). */
.lr-refined .dx-pivotgrid .dx-datagrid-nodata { font-size: 13px; color: var(--lr-muted); line-height: 1.5; }
.lr-refined .dx-scheduler-header-panel-cell { font-size: 12px; font-weight: 600; color: var(--lr-muted); }
.lr-refined .dx-scheduler-time-panel-cell, .lr-refined .dx-scheduler-all-day-title { font-size: 12px; color: var(--lr-muted); }
.lr-refined .dx-scheduler-appointment { background-color: transparent !important; border: 0; box-shadow: none; }
.lr-refined .dx-scheduler-appointment-content[class*="label-"] {
    height: 100%; box-sizing: border-box; border-radius: 3px; border-left: 3px solid var(--lr-state, #8b939d);
    background: var(--lr-state-bg, #eff1f4) !important; color: var(--lr-state-ink, #596575) !important;
    font-size: 11px; font-weight: 600; text-shadow: none;
}
/* The overflow button's count repeats a long work order once for every day it covers, so it is not a count of
   work orders; show "More…" instead. */
.lr-refined .dx-scheduler-dropdown-appointments {
    background: var(--lr-paper, #fff) !important; box-shadow: none !important; border: 1px solid var(--lr-line);
    color: var(--lr-accent); border-radius: 4px;
}
.lr-refined .dx-scheduler-dropdown-appointments:hover { background: var(--lr-soft, #f3f6f9) !important; }
.lr-refined .dx-scheduler-dropdown-appointments-content { color: var(--lr-accent) !important; text-align: center; }
.lr-refined .dx-scheduler-dropdown-appointments-content > span { display: none !important; }
.lr-refined .dx-scheduler-dropdown-appointments-content::after { content: 'More\2026'; font-size: 11px; font-weight: 600; }
.lr-refined .label.lr-status-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 7px;
    border-radius: 4px; font-size: 11px; line-height: 1.3; font-weight: 600 !important;
    background: var(--lr-state-bg, #eff1f4) !important; color: var(--lr-state-ink, #596575) !important;
    text-shadow: none; vertical-align: middle;
}
.lr-refined .lr-status-badge::before, .lr-refined .lr-status-menu::before {
    content: ''; display: inline-block; width: 5px; height: 5px; flex-shrink: 0;
    border-radius: 50%; background: var(--lr-state, #8b939d);
}
.lr-refined .page-sidebar .menu-text.lr-status-menu {
    display: inline-flex; align-items: center; gap: 9px; background: transparent !important;
    color: inherit !important; padding: 0; font-size: 11px; line-height: 1.45;
    letter-spacing: .05px; font-weight: 400 !important; box-shadow: none;
}
.lr-refined .page-sidebar .lr-status-menu::before { width: 7px; height: 7px; box-shadow: 0 0 0 3px var(--lr-state-bg, #eff1f4); }
/* Export can be a plain button or a dropdown. Reset the legacy bottom margin
   for both variants so they align with the other grid toolbar buttons. */
.lr-refined .dx-datagrid-header-panel .dx-datagrid-toolbar-button,
.lr-refined .dx-datagrid-header-panel .dx-datagrid-export-button { margin-bottom: 0; }
.lr-refined .dx-datagrid-header-panel .dx-toolbar-before > .dx-toolbar-item { vertical-align: middle; }
.lr-refined .dx-datagrid-header-panel .dx-button-content { display: flex; align-items: center; justify-content: center; }
/* Font Awesome icons on the DevExtreme 16.1 export button and its menu (set in restyle_legacy_export). */
.lr-refined .dx-datagrid-export-button .dx-icon.fa,
.lr-refined .dx-datagrid-export-menu .dx-icon.fa {
    font-family: FontAwesome; font-size: 14px; line-height: 18px; width: 18px; height: 18px; text-align: center;
    background: none; color: inherit;
}
.lr-refined .dx-datagrid-export-button .dx-icon.fa:before,
.lr-refined .dx-datagrid-export-menu .dx-icon.fa:before { position: static; margin: 0; }
.lr-refined .dx-datagrid-export-menu .dx-icon.fa-file-excel-o { color: #1d6f42; }
.lr-refined .dx-datagrid-headers .dx-header-row > td { white-space: normal !important; }
.lr-refined .dx-datagrid-headers .dx-header-row .dx-datagrid-text-content { overflow-wrap: break-word; }

/* Compact navigation search results. */
.lr-search-results { list-style: none; margin: 0; padding: 0; }
.lr-search-result { padding: 12px 0; border-top: 1px solid #dfe3e8; }
.lr-search-result-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lr-search-type { flex: 0 0 auto; max-width: 38%; padding: 3px 8px; border-radius: 4px; background: #edf3f9; color: #344862; font-size: 12px; }
.lr-search-title { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.lr-search-status { flex: 0 1 auto; max-width: 25%; color: #65707d; font-size: 12px; }
.lr-search-summary { margin-top: 5px; color: #65707d; line-height: 20px; }
.lr-search-title, .lr-search-type, .lr-search-status, .lr-search-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-search-count { margin: 0 0 10px; color: #65707d; }
.lr-search-more { padding: 14px 0 4px; border-top: 1px solid #dfe3e8; }
/* List heading: default order that is not a column (app.component.data-list.js). */
.lr-refined .lr-sort-note { margin-left: 10px; padding-left: 10px; border-left: 1px solid #d5dbe2; color: #65707d; }
.lr-search-more-error { margin-left: 12px; color: #a94442; }
.lr-search-panel .alert p { margin-bottom: 10px; }
/* Search results close: the same bordered square as the form close button, not a faint blue "x". */
.lr-refined .lr-search-panel .btn.btn-close { position: relative; width: 32px; height: 32px; padding: 0; border: 1px solid #dfe3e8 !important; border-radius: 4px; background: #fff; color: transparent !important; font-size: 0; box-shadow: none; }
.lr-refined .lr-search-panel .btn.btn-close::before { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; background: linear-gradient(45deg, transparent 44%, #2f3d4c 44%, #2f3d4c 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #2f3d4c 44%, #2f3d4c 56%, transparent 56%); }
.lr-refined .lr-search-panel .btn.btn-close:hover { background: #f4f6f8; }

/* Switches are shorter than inputs: centre them on the input line beside them (inputs 39px, switches 24px: (39 - 24) / 2). */
.lr-refined [data-lr-field] .pull-down > .dx-switch { margin-top: 8px; margin-bottom: 7px; }
/* Single-list menu entries (Projects, Assets, Inspector Profile) render their caption as an inline <span> after
   the icon, so its leading space showed and pushed the text 3px right of the other entries (their caption is a
   <div>). An inline-block drops the leading space; Home's -3px correction for that space is then not needed.
   Expanded sidebar only: the collapsed sidebar hides captions and shows them as fly-outs. */
.lr-refined .page-sidebar:not(.menu-compact) .sidebar-menu > li > a > span.menu-text { display: inline-block; margin-left: 0; }
/* Captions can be given a min-height (refinedAlignFieldRows); min-height needs a block box. */
.lr-refined [data-lr-field] .form-group > label, .lr-refined [data-lr-field] .form-group > .pull-down > label { display: inline-block; }
@media (max-width: 600px) {
    .lr-search-result-heading { flex-wrap: wrap; gap: 6px; }
    .lr-search-type { max-width: 100%; }
    .lr-search-title { flex-basis: 45%; }
    .lr-search-status { max-width: 100%; }
}

/* Shared loading states. Only startup/sign-in occupy the full viewport. */
.lr-loading-region { position: relative; min-width: 0; }
.lr-workspace-loading { min-height: 100vh; }
.lr-loading-initial { min-height: 400px; }
.lr-loading-initial > .lr-loading-content { visibility: hidden; }
/* DevExtreme keeps its load panel inside the grid. When the shared region is
   already busy, show only that region's feedback; grid-only refreshes retain
   the native indicator and its normal request lifecycle. */
.lr-loading-content[aria-busy="true"] .dx-loadpanel,
.lr-loading-content[aria-busy="true"] .dx-loadpanel-wrapper {
    display: none !important;
}
.lr-loading {
    display: flex; align-items: center; justify-content: center;
    font-family: 'Segoe UI', Arial, sans-serif; font-size: 13px;
    color: #344862; box-sizing: border-box;
}
.lr-loading.loading-container {
    position: fixed; inset: 0; z-index: 2000; background: #f5f6f8 !important;
}
.lr-loading-feedback { text-align: center; }
.lr-loading-inline { min-height: 180px; padding: 32px 20px; }
.lr-loading-brand { margin-bottom: 30px; }
.lr-loading-brand img { display: block; width: 164px; height: 164px; margin: -40px auto -25px; }
.lr-loading-brand > span { display: block; font-size: 12px; color: #65707d; }
.lr-loading-message { display: flex; justify-content: center; align-items: center; gap: 10px; line-height: 1.5; }
.lr-loading-spinner {
    display: inline-block; flex: 0 0 20px; width: 20px; height: 20px;
    border: 2px solid #dfe3e8; border-top-color: #35658f; border-radius: 50%;
    animation: lr-loading-spin .8s linear infinite;
}
.lr-loading-overlay, .lr-loading-form {
    position: absolute; inset: 0; z-index: 100;
}
.lr-loading-overlay, .lr-loading-form .lr-loading-message {
    animation: lr-loading-reveal .12s linear .2s both;
}
.lr-loading-overlay { background: #f5f6f859; }
.lr-loading-overlay .lr-loading-feedback {
    padding: 16px 24px; border: 1px solid #dfe3e8; border-radius: 6px;
    background: #fff; box-shadow: 0 5px 20px #24344812;
}
/* A stalled or failed save keeps the region locked and offers Close inside the notice. */
.lr-loading-overlay .lr-loading-feedback { max-width: 440px; margin: 0 16px; }
.lr-loading-actions { margin-top: 14px; }
.lr-loading-form { background: #fff; align-items: flex-start; border-radius: 8px; padding: 32px 24px; }
.lr-loading-form .lr-loading-feedback { width: 100%; }
.lr-loading-form .lr-loading-message { justify-content: flex-start; margin-bottom: 32px; }
.lr-loading-skeleton { display: flex; flex-direction: column; gap: 22px; }
.lr-loading-skeleton > div { display: flex; gap: 18px; }
.lr-loading-skeleton span { display: block; height: 36px; flex: 1; border-radius: 4px; background: #f1f3f6; }
.lr-loading-skeleton .lr-loading-skeleton-title { width: 150px; flex: none; height: 12px; background: #e8edf3; }
.lr-loading-skeleton .lr-loading-skeleton-wide { flex: none; height: 65px; margin-bottom: 15px; }
.lr-refined .dx-loadpanel-content { background: #fff; border: 1px solid var(--lr-line); border-radius: 6px; box-shadow: 0 5px 20px #24344812; }
.lr-refined .dx-loadpanel-message { color: var(--lr-heading); font-family: 'Segoe UI', Arial, sans-serif; font-size: 12px; }
@keyframes lr-loading-spin { to { transform: rotate(360deg); } }
@keyframes lr-loading-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) {
    .lr-loading-form { padding: 24px 16px; }
    .lr-loading-skeleton > div { flex-direction: column; }
    .lr-loading-skeleton > div > span { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lr-loading-spinner, .lr-loading-overlay, .lr-loading-form .lr-loading-message { animation: none; }
}

/* LR inspection delivery dashboard */
.lr-delivery-title { white-space: normal; padding-bottom: 10px; }
.lr-delivery-title > a { font-size: 15px; font-weight: 600; color: #263d54; }
.lr-delivery-title .lr-delivery-description { font-size: 12px; line-height: 1.5; color: #627286; font-weight: 400; margin: 6px 0 3px; }
.lr-delivery-title .lr-delivery-period { font-size: 11px; line-height: 1.5; color: #627286; font-weight: 400; margin: 0; }
/* "Needs attention" / "My work" strip (UX review #15) */
.lr-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.lr-tiles .lr-tile {
    display: flex; flex: 1 1 120px; flex-direction: column; align-items: flex-start; min-width: 110px;
    padding: 10px 12px; background: #fff; border: 1px solid var(--lr-line, #dfe3e8); border-radius: 6px;
    color: #263d54; text-align: left; cursor: pointer;
}
.lr-tiles .lr-tile:hover, .lr-tiles .lr-tile:focus-visible { border-color: var(--lr-accent, #0f6e73); background: var(--lr-selected, #eef6f6); }
.lr-tiles .lr-tile-count { font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--lr-accent, #0f6e73); }
.lr-tiles .lr-tile-caption { margin-top: 2px; font-size: 12px; font-weight: 600; }
.lr-tiles .lr-tile-hint { margin-top: 2px; font-size: 11px; line-height: 1.35; color: #627286; }
.lr-tiles .lr-tile-empty { cursor: default; }
.lr-tiles .lr-tile-empty:hover { border-color: var(--lr-line, #dfe3e8); background: #fff; }
.lr-tiles .lr-tile-empty .lr-tile-count { color: #9aa5b1; }
/* Compact strip so it fits two grid rows when the tiles are on one line (Nov 9; the panel height follows
   the content, see lr_fit_tiles_height). */
.lr-delivery-title.lr-tiles-title { padding-bottom: 6px; }
.lr-delivery-title.lr-tiles-title .lr-delivery-description { margin: 2px 0 0; line-height: 1.4; }
.lr-tiles .lr-tile { padding: 7px 10px; }
.lr-tiles .lr-tile-count { font-size: 22px; }
.lr-tiles .lr-tile-caption, .lr-tiles .lr-tile-hint { margin-top: 1px; }
.lr-tiles .lr-tile-hint { line-height: 1.3; }
/* A chart that could not be loaded: the same quiet note, where the chart would be. */
.lr-delivery-failed { font-size: 12px; line-height: 1.5; color: #627286; font-weight: 400; margin: 0; padding: 12px 0; }
@media (max-width: 1100px) {
    #home_grid.lr-delivery-dashboard { height: auto !important; }
    #home_grid.lr-delivery-dashboard > .grid-stack-item {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        top: auto !important;
        margin-bottom: 10px;
    }
}

/* ---------------------------------------------------------------------------
   Lucide icons for the sidebar menu and grid row actions (design review, option 4).
   The markup still carries the Font Awesome / Glyphicon classes set in modules.js
   and data-grid-view-component.js; the glyph is hidden and the Lucide SVG is drawn
   with a CSS mask so it takes the text colour. Add a selector here to map a new icon.
   --------------------------------------------------------------------------- */
.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon,
.lr-refined .dx-datagrid .dx-link.fa {
    display: inline-block; vertical-align: middle; background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon::before,
.lr-refined .dx-datagrid .dx-link.fa::before { content: none; }
/* Keep the theme's 30px (58px compact) icon box; the mask is centred inside it at 17px. */
.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon { height: 17px; font-size: 0; line-height: inherit; top: 0; left: 0; -webkit-mask-size: 17px 17px; mask-size: 17px 17px; }
.lr-refined .dx-datagrid .dx-link.fa { width: 16px; height: 16px; font-size: 0; margin: 0 4px; }
.lr-refined .dx-datagrid .dx-link.fa:hover { background-color: var(--lr-accent); }

.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon.glyphicon-home { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8%22 /%3E%3Cpath d=%22M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8%22 /%3E%3Cpath d=%22M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z%22 /%3E%3C/svg%3E"); }
.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon.fa-users { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2%22 /%3E%3Ccircle cx=%229%22 cy=%227%22 r=%224%22 /%3E%3Cpath d=%22M22 21v-2a4 4 0 0 0-3-3.87%22 /%3E%3Cpath d=%22M16 3.13a4 4 0 0 1 0 7.75%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2%22 /%3E%3Ccircle cx=%229%22 cy=%227%22 r=%224%22 /%3E%3Cpath d=%22M22 21v-2a4 4 0 0 0-3-3.87%22 /%3E%3Cpath d=%22M16 3.13a4 4 0 0 1 0 7.75%22 /%3E%3C/svg%3E"); }
.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon.fa-dollar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z%22 /%3E%3Cpath d=%22M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8%22 /%3E%3Cpath d=%22M12 17.5v-11%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z%22 /%3E%3Cpath d=%22M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8%22 /%3E%3Cpath d=%22M12 17.5v-11%22 /%3E%3C/svg%3E"); }
.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon.fa-check-square { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M8 2v4%22 /%3E%3Cpath d=%22M16 2v4%22 /%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%224%22 rx=%222%22 /%3E%3Cpath d=%22M3 10h18%22 /%3E%3Cpath d=%22m9 16 2 2 4-4%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M8 2v4%22 /%3E%3Cpath d=%22M16 2v4%22 /%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%224%22 rx=%222%22 /%3E%3Cpath d=%22M3 10h18%22 /%3E%3Cpath d=%22m9 16 2 2 4-4%22 /%3E%3C/svg%3E"); }
/* Projects when it is alone at the top level (single_list_menu_icon gives it fa-briefcase): a project folder, as the
   briefcase shape is already Work Orders'. */
.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon.fa-briefcase { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z%22 /%3E%3Cpath d=%22M8 10v4%22 /%3E%3Cpath d=%22M12 10v2%22 /%3E%3Cpath d=%22M16 10v6%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z%22 /%3E%3Cpath d=%22M8 10v4%22 /%3E%3Cpath d=%22M12 10v2%22 /%3E%3Cpath d=%22M16 10v6%22 /%3E%3C/svg%3E"); }
.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon.fa-cubes { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z%22 /%3E%3Cpath d=%22m7 16.5-4.74-2.85%22 /%3E%3Cpath d=%22m7 16.5 5-3%22 /%3E%3Cpath d=%22M7 16.5v5.17%22 /%3E%3Cpath d=%22M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z%22 /%3E%3Cpath d=%22m17 16.5-5-3%22 /%3E%3Cpath d=%22m17 16.5 4.74-2.85%22 /%3E%3Cpath d=%22M17 16.5v5.17%22 /%3E%3Cpath d=%22M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z%22 /%3E%3Cpath d=%22M12 8 7.26 5.15%22 /%3E%3Cpath d=%22m12 8 4.74-2.85%22 /%3E%3Cpath d=%22M12 13.5V8%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z%22 /%3E%3Cpath d=%22m7 16.5-4.74-2.85%22 /%3E%3Cpath d=%22m7 16.5 5-3%22 /%3E%3Cpath d=%22M7 16.5v5.17%22 /%3E%3Cpath d=%22M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z%22 /%3E%3Cpath d=%22m17 16.5-5-3%22 /%3E%3Cpath d=%22m17 16.5 4.74-2.85%22 /%3E%3Cpath d=%22M17 16.5v5.17%22 /%3E%3Cpath d=%22M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z%22 /%3E%3Cpath d=%22M12 8 7.26 5.15%22 /%3E%3Cpath d=%22m12 8 4.74-2.85%22 /%3E%3Cpath d=%22M12 13.5V8%22 /%3E%3C/svg%3E"); }
.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon.fa-area-chart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 16v5%22 /%3E%3Cpath d=%22M16 14v7%22 /%3E%3Cpath d=%22M20 10v11%22 /%3E%3Cpath d=%22m22 3-8.646 8.646a.5.5 0 0 1-.708 0L9.354 8.354a.5.5 0 0 0-.707 0L2 15%22 /%3E%3Cpath d=%22M4 18v3%22 /%3E%3Cpath d=%22M8 14v7%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 16v5%22 /%3E%3Cpath d=%22M16 14v7%22 /%3E%3Cpath d=%22M20 10v11%22 /%3E%3Cpath d=%22m22 3-8.646 8.646a.5.5 0 0 1-.708 0L9.354 8.354a.5.5 0 0 0-.707 0L2 15%22 /%3E%3Cpath d=%22M4 18v3%22 /%3E%3Cpath d=%22M8 14v7%22 /%3E%3C/svg%3E"); }
.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon.fa-clipboard { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect width=%228%22 height=%224%22 x=%228%22 y=%222%22 rx=%221%22 ry=%221%22 /%3E%3Cpath d=%22M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2%22 /%3E%3Cpath d=%22M12 11h4%22 /%3E%3Cpath d=%22M12 16h4%22 /%3E%3Cpath d=%22M8 11h.01%22 /%3E%3Cpath d=%22M8 16h.01%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect width=%228%22 height=%224%22 x=%228%22 y=%222%22 rx=%221%22 ry=%221%22 /%3E%3Cpath d=%22M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2%22 /%3E%3Cpath d=%22M12 11h4%22 /%3E%3Cpath d=%22M12 16h4%22 /%3E%3Cpath d=%22M8 11h.01%22 /%3E%3Cpath d=%22M8 16h.01%22 /%3E%3C/svg%3E"); }
.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon.fa-gear { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z%22 /%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z%22 /%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22 /%3E%3C/svg%3E"); }
.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon.fa-pencil { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M13 7 8.7 2.7a2.41 2.41 0 0 0-3.4 0L2.7 5.3a2.41 2.41 0 0 0 0 3.4L7 13%22 /%3E%3Cpath d=%22m8 6 2-2%22 /%3E%3Cpath d=%22m18 16 2-2%22 /%3E%3Cpath d=%22m17 11 4.3 4.3c.94.94.94 2.46 0 3.4l-2.6 2.6c-.94.94-2.46.94-3.4 0L11 17%22 /%3E%3Cpath d=%22M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z%22 /%3E%3Cpath d=%22m15 5 4 4%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M13 7 8.7 2.7a2.41 2.41 0 0 0-3.4 0L2.7 5.3a2.41 2.41 0 0 0 0 3.4L7 13%22 /%3E%3Cpath d=%22m8 6 2-2%22 /%3E%3Cpath d=%22m18 16 2-2%22 /%3E%3Cpath d=%22m17 11 4.3 4.3c.94.94.94 2.46 0 3.4l-2.6 2.6c-.94.94-2.46.94-3.4 0L11 17%22 /%3E%3Cpath d=%22M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z%22 /%3E%3Cpath d=%22m15 5 4 4%22 /%3E%3C/svg%3E"); }
.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon.fa-question-circle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E%3Cpath d=%22M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3%22 /%3E%3Cpath d=%22M12 17h.01%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E%3Cpath d=%22M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3%22 /%3E%3Cpath d=%22M12 17h.01%22 /%3E%3C/svg%3E"); }
.lr-refined .dx-datagrid .dx-link.fa.fa-files-o { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect width=%2214%22 height=%2214%22 x=%228%22 y=%228%22 rx=%222%22 ry=%222%22 /%3E%3Cpath d=%22M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect width=%2214%22 height=%2214%22 x=%228%22 y=%228%22 rx=%222%22 ry=%222%22 /%3E%3Cpath d=%22M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2%22 /%3E%3C/svg%3E"); }
.lr-refined .dx-datagrid .dx-link.fa.fa-pencil-square-o { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7%22 /%3E%3Cpath d=%22M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7%22 /%3E%3Cpath d=%22M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z%22 /%3E%3C/svg%3E"); }
.lr-refined .dx-datagrid .dx-link.fa.fa-trash-o { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M3 6h18%22 /%3E%3Cpath d=%22M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6%22 /%3E%3Cpath d=%22M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2%22 /%3E%3Cline x1=%2210%22 x2=%2210%22 y1=%2211%22 y2=%2217%22 /%3E%3Cline x1=%2214%22 x2=%2214%22 y1=%2211%22 y2=%2217%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M3 6h18%22 /%3E%3Cpath d=%22M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6%22 /%3E%3Cpath d=%22M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2%22 /%3E%3Cline x1=%2210%22 x2=%2210%22 y1=%2211%22 y2=%2217%22 /%3E%3Cline x1=%2214%22 x2=%2214%22 y1=%2211%22 y2=%2217%22 /%3E%3C/svg%3E"); }
.lr-refined .dx-datagrid .dx-link.fa.fa-print { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2%22 /%3E%3Cpath d=%22M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6%22 /%3E%3Crect x=%226%22 y=%2214%22 width=%2212%22 height=%228%22 rx=%221%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2%22 /%3E%3Cpath d=%22M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6%22 /%3E%3Crect x=%226%22 y=%2214%22 width=%2212%22 height=%228%22 rx=%221%22 /%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------------------
   File attachment chips on edit forms (tag template in app.component.edit-form.js).
   Matches the design's attachment cards: white chip, thin border, muted Lucide file icon.
   --------------------------------------------------------------------------- */
.lr-refined .dx-tag-content.lr-file-tag {
    position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 280px;
    margin: 3px 6px 3px 0; padding: 4px 28px 4px 8px; min-height: 26px;
    background: var(--lr-paper); border: 1px solid var(--lr-line); border-radius: 6px;
    color: var(--lr-ink); font-family: inherit; font-size: 12px; line-height: 16px;
    cursor: pointer; transition: border-color .12s, background-color .12s;
}
.lr-refined .dx-tag-content.lr-file-tag:hover { border-color: #b9c6d3; background: var(--lr-soft); }
.lr-refined .dx-tag-content.lr-file-tag:hover .lr-file-tag-name { color: var(--lr-accent); text-decoration: underline; }
.lr-refined .lr-file-tag .lr-file-tag-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.lr-refined .lr-file-tag .lr-file-tag-icon {
    flex: 0 0 15px; width: 15px; height: 15px; font-size: 0; background-color: var(--lr-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z%22 /%3E%3Cpath d=%22M14 2v4a2 2 0 0 0 2 2h4%22 /%3E%3Cpath d=%22M10 9H8%22 /%3E%3Cpath d=%22M16 13H8%22 /%3E%3Cpath d=%22M16 17H8%22 /%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z%22 /%3E%3Cpath d=%22M14 2v4a2 2 0 0 0 2 2h4%22 /%3E%3Cpath d=%22M10 9H8%22 /%3E%3Cpath d=%22M16 13H8%22 /%3E%3Cpath d=%22M16 17H8%22 /%3E%3C/svg%3E") center / contain no-repeat;
}
.lr-refined .lr-file-tag .lr-file-tag-icon::before { content: none; }
.lr-refined .lr-file-tag .dx-tag-remove-button {
    position: absolute; top: 50%; right: 6px; width: 16px; height: 16px; margin-top: -8px;
    border-radius: 3px; background: none; cursor: pointer;
}
.lr-refined .lr-file-tag .dx-tag-remove-button::before,
.lr-refined .lr-file-tag .dx-tag-remove-button::after { content: none; }
.lr-refined .lr-file-tag .dx-tag-remove-button {
    background-color: var(--lr-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M18 6 6 18%22 /%3E%3Cpath d=%22m6 6 12 12%22 /%3E%3C/svg%3E") center / 12px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M18 6 6 18%22 /%3E%3Cpath d=%22m6 6 12 12%22 /%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.lr-refined .lr-file-tag .dx-tag-remove-button:hover { background-color: #bf6658; }
.lr-refined .dx-tag-content.lr-file-tag:not(:has(.dx-tag-remove-button)) { padding-right: 10px; }

/* ---------------------------------------------------------------------------
   Add / Edit buttons beside reference dropdowns on edit forms. DevExtreme's
   dx-icon-edit-button-addrow glyph renders as a list icon; draw Lucide plus /
   square-pen instead (markup in client_model_utils.js and ref-lookup-container.js).
   --------------------------------------------------------------------------- */
.lr-refined .edit-controls-add-button .dx-icon,
.lr-refined .edit-controls-edit-button .dx-icon {
    display: inline-block; width: 16px; height: 16px; font-size: 0; vertical-align: middle;
    background: var(--lr-muted) none; -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 16px 16px; mask-size: 16px 16px;
}
.lr-refined .edit-controls-add-button .dx-icon::before,
.lr-refined .edit-controls-edit-button .dx-icon::before { content: none; }
.lr-refined .edit-controls-add-button .dx-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M5 12h14%22 /%3E%3Cpath d=%22M12 5v14%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M5 12h14%22 /%3E%3Cpath d=%22M12 5v14%22 /%3E%3C/svg%3E"); }
.lr-refined .edit-controls-edit-button .dx-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7%22 /%3E%3Cpath d=%22M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7%22 /%3E%3Cpath d=%22M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z%22 /%3E%3C/svg%3E"); }
.lr-refined .edit-controls-add-button:hover .dx-icon,
.lr-refined .edit-controls-edit-button:hover .dx-icon { background-color: var(--lr-accent); }

/* Related lists on work-order tabs are always open (the tab opens them on first visit in
   refined_form_layout.js), so hide their expand/collapse toggle and stop the heading
   from collapsing them. Lists on untabbed forms keep the toggle. */
.lr-refined .lr-form-panel:not([id$="-panel-details"]) [data-type-element="headBtn"] { display: none !important; }
.lr-refined .lr-form-panel:not([id$="-panel-details"]) .widget-caption.clickable { pointer-events: none; cursor: default !important; }

/* ---------------------------------------------------------------------------
   Help dialog (lr_help.js), opened by the "?" buttons on lists and edit forms.
   --------------------------------------------------------------------------- */
.lr-help-root { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lr-help-backdrop { position: absolute; inset: 0; background: rgba(38, 60, 80, 0.38); }
.lr-help-dialog {
    position: relative; width: 880px; max-width: 100%; max-height: calc(100vh - 48px);
    display: flex; flex-direction: column; background: var(--lr-paper, #fff); color: var(--lr-ink, #30353b);
    border: 1px solid var(--lr-line, #dfe3e8); border-radius: 8px; box-shadow: 0 14px 40px rgba(38, 60, 80, 0.22);
    font-size: 13px; line-height: 1.5; outline: none;
}
.lr-help-header { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--lr-line, #dfe3e8); }
.lr-help-kicker { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lr-muted, #65707d); line-height: 20px; }
.lr-help-header h2 { flex: 1; margin: 0; font-size: 17px; line-height: 20px; font-weight: 600; color: var(--lr-heading, #344862); }
.lr-help-close {
    flex: 0 0 28px; width: 28px; height: 28px; margin: -4px -6px 0 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; padding: 0;
}
.lr-help-close::before {
    content: ''; display: block; width: 16px; height: 16px; margin: 6px; background-color: var(--lr-muted, #65707d);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M18 6 6 18%22 /%3E%3Cpath d=%22m6 6 12 12%22 /%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M18 6 6 18%22 /%3E%3Cpath d=%22m6 6 12 12%22 /%3E%3C/svg%3E") center / contain no-repeat;
}
.lr-help-close:hover { background: var(--lr-soft, #f7f8fa); }
.lr-help-close:hover::before { background-color: var(--lr-ink, #30353b); }
.lr-help-body { overflow: auto; padding: 14px 20px 20px; }
.lr-help-summary { margin: 0 0 6px; font-size: 13.5px; color: var(--lr-ink, #30353b); }
.lr-help-section { margin-top: 16px; }
.lr-help-section h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--lr-heading, #344862); }
.lr-help-section p { margin: 0; }
.lr-help-list, .lr-help-steps { margin: 0; padding-left: 20px; }
.lr-help-list li, .lr-help-steps li { margin: 3px 0; }
.lr-help-list strong { font-weight: 600; color: var(--lr-heading, #344862); }
.lr-help-table-wrap { border: 1px solid var(--lr-line, #dfe3e8); border-radius: 6px; overflow: hidden; }
.lr-help-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lr-help-table th { text-align: left; padding: 7px 10px; background: var(--lr-soft, #f7f8fa); color: var(--lr-muted, #65707d); font-weight: 600; font-size: 11.5px; border-bottom: 1px solid var(--lr-line, #dfe3e8); }
.lr-help-table td { padding: 7px 10px; border-top: 1px solid var(--lr-line, #dfe3e8); vertical-align: top; }
.lr-help-table tbody tr:first-child td { border-top: 0; }
.lr-help-table-key { white-space: nowrap; font-weight: 600; color: var(--lr-heading, #344862); width: 1%; }
body.lr-help-open { overflow: hidden; }
@media (max-width: 640px) {
    .lr-help-root { padding: 0; align-items: stretch; }
    .lr-help-dialog { width: 100%; max-height: none; border-radius: 0; border: 0; }
    .lr-help-table-key { white-space: normal; width: auto; }
}

/* Field help popovers on edit forms (hover a field caption). The popover wrapper keeps the
   source element's class, rowses or prevent_margin; width is set in app.component.edit-form.js. */
.lr-refined .dx-popover-wrapper.rowses .dx-popover-content,
.lr-refined .dx-popover-wrapper.prevent_margin .dx-popover-content,
.lr-refined .dx-popover-wrapper.rowses .dx-popup-content,
.lr-refined .dx-popover-wrapper.prevent_margin .dx-popup-content {
    padding: 10px 14px; font-size: 12.5px; line-height: 1.5; color: var(--lr-ink, #30353b);
    white-space: normal; overflow-wrap: anywhere;
}
.lr-refined .dx-popover-wrapper.rowses .dx-overlay-content,
.lr-refined .dx-popover-wrapper.prevent_margin .dx-overlay-content {
    border: 1px solid var(--lr-line, #dfe3e8); border-radius: 6px; box-shadow: 0 6px 20px rgba(38, 60, 80, 0.16);
}

/* Help button on non-grid form tabs (File Attachments). */
.lr-refined .lr-panel-tools { display: flex; justify-content: flex-end; margin: -4px 0 4px; }
.lr-refined .lr-panel-help {
    width: 26px; height: 26px; border: 1px solid var(--lr-line, #dfe3e8); border-radius: 5px; background: var(--lr-paper, #fff);
    color: var(--lr-muted, #65707d); font-weight: 600; font-size: 13px; line-height: 24px; padding: 0; cursor: pointer;
}
.lr-refined .lr-panel-help:hover { color: var(--lr-accent, #35658f); border-color: #b9c6d3; }

/* LR sidebar (UX review #14): top-level icons for Work Orders (Lucide briefcase) and Inspection Reports (file-check). */
.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon.lr-icon-inspection-reports { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z%22 /%3E%3Cpath d=%22M14 2v4a2 2 0 0 0 2 2h4%22 /%3E%3Cpath d=%22m9 15 2 2 4-4%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z%22 /%3E%3Cpath d=%22M14 2v4a2 2 0 0 0 2 2h4%22 /%3E%3Cpath d=%22m9 15 2 2 4-4%22 /%3E%3C/svg%3E"); }
.lr-refined .page-sidebar .sidebar-menu > li > a > .menu-icon.lr-icon-work-orders { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16%22 /%3E%3Crect width=%2220%22 height=%2214%22 x=%222%22 y=%226%22 rx=%222%22 /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16%22 /%3E%3Crect width=%2220%22 height=%2214%22 x=%222%22 y=%226%22 rx=%222%22 /%3E%3C/svg%3E"); }

/* Report preview (/previewer_docx): its one control, Download, took its icon from Mozilla's hosted pdf.js
   viewer.css, which no longer has an icon for it, so it showed as a small black square on the dark bar.
   Draw it here as a labelled button instead. */
/* The bar itself was solid black (#222); use the page's own panel style. */
.lr-refined .App-header { height: auto; padding: 8px 4px 8px 16px; background: #fff; color: #2f3d4c; border: 1px solid #dfe3e8; border-radius: 4px 4px 0 0; }
.lr-refined .App-header .Toolbar { height: 32px; }
/* Behind the report pages: a soft grey instead of charcoal, with the pages outlined so they still stand out. */
.lr-refined .App-body .Viewer { background: #e4e8ee; padding-top: 16px; border: 1px solid #dfe3e8; border-top: 0; border-radius: 0 0 4px 4px; }
.lr-refined .App-body .pdfViewer .page { border: 1px solid #d3d9e0; box-shadow: 0 1px 4px rgba(38, 61, 84, 0.12); background-color: #fff; }
.lr-refined .Toolbar .toolbarButton.download { display: inline-flex; align-items: center; gap: 7px; width: auto; min-width: 0; max-width: none; aspect-ratio: auto; flex: 0 0 auto; justify-content: flex-start; white-space: nowrap; height: 32px; margin: 0 12px 0 0; padding: 0 12px; border: 1px solid #dfe3e8; border-radius: 4px; background: #fff; color: #2f3d4c; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; opacity: 1; }
.lr-refined .Toolbar .toolbarButton.download:hover, .lr-refined .Toolbar .toolbarButton.download:focus-visible { background: #edf3f9; }
.lr-refined .Toolbar .toolbarButton.download > span { display: none; }
.lr-refined .Toolbar .toolbarButton.download::before { content: ""; display: inline-block !important; flex: 0 0 15px; width: 15px; height: 15px; margin: 0; opacity: 1; transform: none; background-color: #2f3d4c; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3v12%22/%3E%3Cpath d=%22M7 10l5 5 5-5%22/%3E%3Cpath d=%22M4 20h16%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3v12%22/%3E%3Cpath d=%22M7 10l5 5 5-5%22/%3E%3Cpath d=%22M4 20h16%22/%3E%3C/svg%3E") center / contain no-repeat; }
.lr-refined .Toolbar .toolbarButton.download::after { content: "Download PDF"; white-space: nowrap; }