/* PictureViewer application skin. Loaded after vendor themes; page styles consume these tokens. */
:root {
    --app-font: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
    --app-canvas: #f3f5f8;
    --app-surface: #ffffff;
    --app-detail-bg: #f8f9fb;
    --app-tree-bg: #eef2f6;
    --app-header-bg: #e8eef5;
    --app-text: #24364b;
    --app-muted: #586b80;
    --app-border: #cbd5e1;
    --app-accent: #245db0;
    --app-accent-hover: #194986;
    --app-accent-soft: #e3edf9;
    --app-selection: #d4e3f6;
    --app-radius: 6px;
    --app-dialog-radius: 10px;
    --app-popup-body-space: 1rem;
    --app-popup-padding-x: 1rem;
    --app-popup-footer-space: 0.375rem;
    --app-popup-action-gap: 0.5rem;
    --app-space: 8px;
    --app-shadow: 0 8px 28px rgb(36 54 75 / 12%);
    --app-action-height: 2.125rem;
    --app-action-gap: .375rem;
    --app-bom-details-height: 19.25rem;
    --app-bom-details-font-size: .875rem;
    --app-bom-details-editor-height: 2rem;
    --app-bom-details-padding-top: 1rem;
    --app-bom-details-padding-bottom: .125rem;
    --app-danger: #b42332;
}

body.pictureviewer-app {
    --bs-primary: var(--app-accent);
    --bs-primary-rgb: var(--app-accent-rgb, 36, 93, 176);
    --bs-link-color: var(--app-accent);
    --bs-link-hover-color: var(--app-accent-hover);
    --bs-body-color: var(--app-text);
    --bs-body-bg: var(--app-detail-bg);
    --bs-border-color: var(--app-border);
    --bs-tertiary-bg: var(--app-tree-bg);
    --bs-body-font-family: var(--app-font);
    font-family: var(--app-font);
    color: var(--app-text);
    background: var(--app-canvas);
}

.pictureviewer-app .app-header {
    background: var(--app-header-bg);
    border-color: var(--app-border);
    box-shadow: 0 1px 4px rgb(36 54 75 / 6%);
}
.pictureviewer-app .app-header__product {
    color: var(--app-text);
    font-size: 1.365rem;
    letter-spacing: .01em;
}
.pictureviewer-app .app-header__tagline { color: var(--app-muted); }
.pictureviewer-app .account-toolbar {
    background: var(--app-detail-bg);
    border-radius: var(--app-radius);
}
.pictureviewer-app .sidebar {
    --sidebar-bg: var(--app-tree-bg);
    --sidebar-text: var(--app-muted);
    --sidebar-text-strong: var(--app-text);
    --sidebar-accent: var(--app-accent);
    --sidebar-accent-hover: var(--app-accent-hover);
    --sidebar-hover-bg: var(--app-accent-soft);
    --sidebar-active-bg: var(--app-selection);
    --sidebar-focus: var(--app-accent);
    border-color: var(--app-border);
    box-shadow: none;
}
.pictureviewer-app .main-content { background-color: var(--app-canvas); }

/* Use component variables rather than changing measured row heights or editors. */
.pictureviewer-app .dxbl-grid {
    --dxbl-grid-font-family: var(--app-font);
    --dxbl-grid-color: var(--app-text);
    --dxbl-grid-border-color: var(--app-border);
    --dxbl-grid-header-bg: var(--app-tree-bg);
    --dxbl-grid-header-color: var(--app-text);
    --dxbl-grid-footer-bg: var(--app-tree-bg);
    --dxbl-grid-hover-bg: var(--app-accent-soft);
    --dxbl-grid-hover-color: var(--app-text);
    --dxbl-grid-selection-bg: var(--app-selection);
    --dxbl-grid-selection-color: var(--app-text);
    --dxbl-grid-selection-focus-bg: var(--app-accent);
    --dxbl-grid-selection-focus-color: #fff;
    --dxbl-grid-focus-bg: var(--app-accent);
    --dxbl-grid-focus-color: #fff;
    --dxbl-grid-focus-frame-color: var(--app-accent);
}
/* Shared TreeLists follow PictureViewer's folder-tree presentation. Keep the
   native expand buttons so keyboard navigation and theme chevrons still work. */
.pictureviewer-app dxbl-tree-list.dxbl-grid {
    --app-tree-indent: 0.8625rem;
    --dxbl-grid-bg: var(--app-tree-bg);
    --dxbl-grid-text-cell-padding-x: 12px;
    --dxbl-grid-selection-focus-bg: var(--app-selection);
    --dxbl-grid-selection-focus-color: var(--app-text);
    --dxbl-grid-focus-bg: var(--app-selection);
    --dxbl-grid-focus-color: var(--app-text);
    --dxbl-grid-expand-btn-color: var(--app-text);
    --dxbl-grid-expand-btn-hover-color: var(--app-text);
    --dxbl-grid-expand-btn-hover-bg: var(--app-accent-soft);
    border: 0;
    border-radius: 0;
}

/* Restrict row spacing to real data: virtual spacer heights are measured by
   DevExpress and must not inherit data-row padding or borders. */
.pictureviewer-app dxbl-tree-list.dxbl-grid .dxbl-grid-table > tbody > tr[data-visible-index] > td {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    border-color: transparent;
    vertical-align: middle;
}

.pictureviewer-app dxbl-tree-list .dxbl-grid-tree-node-indent,
.pictureviewer-app dxbl-tree-list .dxbl-grid-tree-node-expand-button-placeholder {
    width: var(--app-tree-indent);
    min-width: var(--app-tree-indent);
}

.pictureviewer-app dxbl-tree-list .dxbl-grid-tree-node-expand-controls-cell .dxbl-grid-tree-node-expand-controls-container {
    margin-right: 6px;
}

.pictureviewer-app dxbl-tree-list .dxbl-grid-tree-node-expand-button > svg.dxbl-image {
    color: var(--app-text);
    opacity: .7;
}

/* A separate formatting context keeps labels and their custom backgrounds
   beside the floated expand controls at every depth, including leaf nodes. */
.pictureviewer-app dxbl-tree-list :is(.tree-node-context-target, .picture-folder-node) {
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pictureviewer-app .dxbl-tabs {
    --dxbl-tabs-font-family: var(--app-font);
    --dxbl-tabs-bg: var(--app-detail-bg);
    --dxbl-tabs-color: var(--app-text);
    --dxbl-tabs-separator-border-color: var(--app-border);
    --dxbl-tabs-tab-hover-bg: var(--app-accent-soft);
    --dxbl-tabs-tab-hover-color: var(--app-accent-hover);
    --dxbl-tabs-tab-selected-bg: var(--app-selection);
    --dxbl-tabs-tab-selected-color: var(--app-accent-hover);
    --dxbl-tabs-tab-focus-outline-color: var(--app-accent);
}
.pictureviewer-app .dxbl-toolbar {
    --dxbl-toolbar-bg: var(--app-detail-bg);
    --dxbl-toolbar-color: var(--app-text);
    --dxbl-toolbar-title-color: var(--app-text);
    --dxbl-toolbar-btn-border-radius: var(--app-radius);
    --dxbl-toolbar-btn-hover-bg: var(--app-accent-soft);
    --dxbl-toolbar-btn-hover-color: var(--app-accent-hover);
    --dxbl-toolbar-btn-active-bg: var(--app-selection);
    --dxbl-toolbar-btn-active-color: var(--app-accent-hover);
}
/* Keep the scheduler's gap between navigation and view buttons undecorated.
   This outranks the raised-theme toolbar surface rules without changing buttons. */
.pictureviewer-app .schedule-scheduler .dxbl-sc-tb-wrapper .dxbl-toolbar {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}
.pictureviewer-app .dxbl-btn {
    --dxbl-btn-border-radius: var(--app-radius);
    --dxbl-btn-focus-outline-color: var(--app-accent);
    font-family: var(--app-font);
}
.pictureviewer-app .dxbl-btn-primary {
    --dxbl-btn-bg: var(--app-accent);
    --dxbl-btn-border-color: var(--app-accent);
    --dxbl-btn-hover-bg: var(--app-accent-hover);
    --dxbl-btn-hover-border-color: var(--app-accent-hover);
    --dxbl-btn-active-bg: var(--app-accent-hover);
    --dxbl-btn-active-border-color: var(--app-accent-hover);
    --dxbl-btn-disabled-bg: #9bb5da;
    --dxbl-btn-disabled-border-color: #9bb5da;
}
.pictureviewer-app .dxbl-btn-secondary {
    --dxbl-btn-bg: var(--app-surface);
    --dxbl-btn-color: var(--app-text);
    --dxbl-btn-border-color: var(--app-border);
    --dxbl-btn-hover-bg: var(--app-accent-soft);
    --dxbl-btn-hover-color: var(--app-text);
    --dxbl-btn-hover-border-color: var(--app-accent);
}
.pictureviewer-app .dxbl-text-edit {
    --dxbl-text-edit-font-family: var(--app-font);
    --dxbl-text-edit-border-radius: var(--app-radius);
    --dxbl-text-edit-border-color: var(--app-border);
    --dxbl-text-edit-focus-border-color: var(--app-accent);
    --dxbl-text-edit-color: var(--app-text);
}

/* BOM details use normal theme editors; these tokens control their shared sizing. */
.pictureviewer-app .bom-part-details .dxbl-text-edit {
    --dxbl-text-edit-font-size: var(--app-bom-details-font-size);
    min-height: var(--app-bom-details-editor-height);
}

/* Popup roots are portaled outside isolated component styles. Anchor this editor
   to the viewport rather than the static position of its tree container. */
.dxbl-modal > .dxbl-modal-root:has(> .tree-expanded-state-popup) {
    inset: 0;
    width: 100%;
    height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
}

.pictureviewer-app .dxbl-popup {
    --dxbl-popup-font-family: var(--app-font);
    --dxbl-popup-border-radius: var(--app-dialog-radius);
    --dxbl-popup-border-color: var(--app-border);
    --dxbl-popup-bg: var(--app-surface);
    --dxbl-popup-color: var(--app-text);
    --dxbl-popup-header-bg: var(--app-tree-bg);
    --dxbl-popup-header-color: var(--app-text);
    --dxbl-popup-footer-bg: var(--app-detail-bg);
}
/* Office White header density for Fluent popups, including dialogs rendered in portals.
   Keep these overrides on the popup so Fluent's component defaults cannot shadow them. */
:root[data-app-theme^="fluent-"] .dxbl-modal .dxbl-popup {
    --dxbl-popup-header-font-size: 1rem;
    --dxbl-popup-header-line-height: 1.25;
    --dxbl-popup-header-font-weight: 600;
    --dxbl-popup-header-padding-top: 0.3125rem;
    --dxbl-popup-header-padding-bottom: 0.3125rem;
    --dxbl-popup-header-padding-x: 0.75rem;
    --dxbl-popup-header-content-padding-x: 0;
    --dxbl-popup-header-content-padding-y: 0;
    --dxbl-popup-header-btn-padding: 0.25rem;
}

:root[data-app-theme^="fluent-"] .dxbl-modal.dxbl-sm .dxbl-popup {
    --dxbl-popup-header-font-size: 0.875rem;
    --dxbl-popup-header-line-height: 1.285714;
    --dxbl-popup-header-padding-top: 0.1875rem;
    --dxbl-popup-header-padding-bottom: 0.1875rem;
    --dxbl-popup-header-padding-x: 0.5rem;
}

:root[data-app-theme^="fluent-"] .dxbl-modal.dxbl-lg .dxbl-popup {
    --dxbl-popup-header-font-size: 1.125rem;
    --dxbl-popup-header-line-height: 1.222222;
    --dxbl-popup-header-padding-top: 0.4375rem;
    --dxbl-popup-header-padding-bottom: 0.4375rem;
    --dxbl-popup-header-padding-x: 1rem;
}

/* Shared dialog spacing, including portal-rendered and built-in edit dialogs.
   BodyContentTemplate retains DevExpress padding; inner forms must not add it again.
   Both variable families are required by the installed Fluent and Bootstrap themes. */
.pictureviewer-app .dxbl-modal .dxbl-popup:not(.dxbl-edit-dropdown) {
    --dxbl-popup-body-padding-top: var(--app-popup-body-space);
    --dxbl-popup-body-padding-bottom: var(--app-popup-body-space);
    --dxbl-popup-body-padding-y: var(--app-popup-body-space);
    --dxbl-popup-body-padding-x: var(--app-popup-padding-x);
    --dxbl-popup-footer-padding-top: var(--app-popup-footer-space);
    --dxbl-popup-footer-padding-bottom: var(--app-popup-footer-space);
    --dxbl-popup-footer-padding-y: var(--app-popup-footer-space);
    --dxbl-popup-footer-padding-x: var(--app-popup-padding-x);
    --dxbl-popup-footer-content-padding-top: 0;
}

/* Fluent resets this on the content element when no native footer is present. */
.pictureviewer-app .dxbl-popup:not(.dxbl-edit-dropdown) > .dxbl-modal-content {
    --dxbl-popup-body-padding-bottom: var(--app-popup-body-space);
}

.pictureviewer-app .app-popup-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    gap: var(--app-popup-action-gap);
    margin: 0;
    padding: 0;
}

/* Wrapped FormLayouts need the same inset reset as direct popup children. */
.pictureviewer-app .dxbl-modal-body > .tree-edit-form > .dxbl-fl {
    --dxbl-fl-padding-x: 0;
    --dxbl-fl-padding-y: 0;
}

/* Scheduler owns its body wrapper and explicitly removes outer popup padding. */
.pictureviewer-app .dxbl-apt-edit-dialog .dxbl-apt-edit-dialog-body {
    padding: var(--app-popup-body-space) var(--app-popup-padding-x);
}

.pictureviewer-app .dxbl-modal-body > :first-child {
    margin-top: 0;
}

.pictureviewer-app .dxbl-modal-body > :last-child {
    margin-bottom: 0;
}

/* Grid popup editors place their action row inside the form, not a popup footer. */
.pictureviewer-app .dxbl-popup .dxbl-grid-popup-edit-form {
    padding: 0;
}

.pictureviewer-app .dxbl-popup .dxbl-grid-edit-form-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--app-popup-action-gap);
    margin: var(--app-popup-body-space) calc(-1 * var(--app-popup-padding-x)) calc(-1 * var(--app-popup-body-space));
    padding: var(--app-popup-footer-space) var(--app-popup-padding-x);
    border-top: 1px solid var(--app-border);
    background: var(--app-detail-bg);
}

.pictureviewer-app .dxbl-popup .dxbl-grid-edit-form-buttons > .dxbl-btn {
    margin: 0;
    min-height: var(--app-action-height);
}

/* Busy overlays include controls that otherwise supply their own cursor. */
.pictureviewer-app .app-wait-cursor,
.pictureviewer-app .app-wait-cursor * {
    cursor: wait !important;
}

/* Keep cancellation visibly available while the rest of the overlay is busy. */
.pictureviewer-app .app-wait-cursor .app-wait-cancel:not(.dx-state-disabled),
.pictureviewer-app .app-wait-cursor .app-wait-cancel:not(.dx-state-disabled) * {
    cursor: default !important;
}

/* DevExtreme dialogs render under body, outside the File Manager page host. */
.pictureviewer-app :is(.app-devextreme-popup, .dx-filemanager-dialog-popup, .dx-dialog) .dx-widget {
    font-family: var(--app-font);
}
.pictureviewer-app :is(.app-devextreme-popup, .dx-filemanager-dialog-popup, .dx-dialog) .dx-overlay-content {
    background: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
    border-radius: var(--app-dialog-radius);
    box-shadow: var(--app-shadow);
}
.pictureviewer-app :is(.app-devextreme-popup, .dx-filemanager-dialog-popup, .dx-dialog) .dx-popup-title {
    background-color: var(--app-header-bg);
    color: var(--app-text);
    border-color: var(--app-border);
}
.pictureviewer-app :is(.app-devextreme-popup, .dx-filemanager-dialog-popup, .dx-dialog) :is(.dx-popup-content, .dx-form, .dx-field-item-label-text, .dx-list-item) {
    color: var(--app-text);
}
.pictureviewer-app :is(.app-devextreme-popup, .dx-filemanager-dialog-popup, .dx-dialog) :is(.dx-texteditor, .dx-texteditor-input) {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}
.pictureviewer-app :is(.app-devextreme-popup, .dx-filemanager-dialog-popup, .dx-dialog) .dx-texteditor.dx-state-focused {
    border-color: var(--app-accent);
}
.pictureviewer-app :is(.app-devextreme-popup, .dx-filemanager-dialog-popup, .dx-dialog) .dx-button-mode-contained {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
    border-radius: var(--app-radius);
}
.pictureviewer-app :is(.app-devextreme-popup, .dx-filemanager-dialog-popup, .dx-dialog) .dx-button-mode-contained.dx-button-default {
    background-color: var(--app-accent);
    color: #fff;
    border-color: var(--app-accent);
}
.pictureviewer-app :is(.app-devextreme-popup, .dx-filemanager-dialog-popup, .dx-dialog) .dx-button-mode-contained.dx-button-default.dx-state-hover {
    background-color: var(--app-accent-hover);
}
.pictureviewer-app :is(.app-devextreme-popup, .dx-filemanager-dialog-popup, .dx-dialog) .dx-list-item.dx-state-hover {
    background-color: var(--app-accent-soft);
}
.pictureviewer-app :is(.app-devextreme-popup, .dx-filemanager-dialog-popup, .dx-dialog) .dx-list-item.dx-list-item-selected {
    background-color: var(--app-selection);
}

/* Delete confirmations size to their message instead of the vendor's fixed minimum. */
.pictureviewer-app .dx-filemanager-dialog-delete-item-popup > .dx-overlay-content {
    min-height: 0;
    min-width: min(300px, calc(100vw - 32px));
    max-width: min(420px, calc(100vw - 32px));
}
.pictureviewer-app .dx-filemanager-dialog-delete-item-popup .dx-filemanager-dialog-delete-item {
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Standard compact chrome for File Manager, scan and confirmation dialogs. */
.pictureviewer-app :is(.dx-filemanager-dialog-popup, .app-devextreme-popup, .dx-dialog) .dx-popup-title.dx-toolbar {
    padding: 0.3125rem var(--app-popup-padding-x);
    min-height: 0;
}
.pictureviewer-app :is(.dx-filemanager-dialog-popup, .app-devextreme-popup, .dx-dialog) .dx-popup-title .dx-toolbar-items-container {
    height: 1.75rem;
    min-height: 0;
}
.pictureviewer-app :is(.dx-filemanager-dialog-popup, .app-devextreme-popup, .dx-dialog) .dx-popup-title .dx-toolbar-label {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 600;
}
.pictureviewer-app :is(.dx-filemanager-dialog-popup, .app-devextreme-popup, .dx-dialog) .dx-popup-title .dx-closebutton {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 0;
    min-height: 0;
}
.pictureviewer-app :is(.dx-filemanager-dialog-popup, .app-devextreme-popup, .dx-dialog) .dx-popup-title .dx-closebutton .dx-button-content {
    padding: 0.25rem;
}
.pictureviewer-app :is(.dx-filemanager-dialog-popup, .app-devextreme-popup, .dx-dialog) .dx-popup-content {
    padding: var(--app-popup-body-space) var(--app-popup-padding-x);
}
.pictureviewer-app :is(.dx-filemanager-dialog-popup, .app-devextreme-popup, .dx-dialog) .dx-popup-bottom.dx-toolbar {
    padding: 0.25rem var(--app-popup-padding-x);
    min-height: 0;
    border-top: 1px solid var(--app-border);
    background: var(--app-detail-bg);
}
.pictureviewer-app :is(.dx-filemanager-dialog-popup, .app-devextreme-popup, .dx-dialog) .dx-popup-bottom .dx-toolbar-items-container {
    height: var(--app-action-height);
    min-height: 0;
}
.pictureviewer-app :is(.dx-filemanager-dialog-popup, .app-devextreme-popup, .dx-dialog) .dx-popup-bottom .dx-toolbar-item {
    padding: 0;
}
.pictureviewer-app :is(.dx-filemanager-dialog-popup, .app-devextreme-popup, .dx-dialog) .dx-popup-bottom .dx-toolbar-item + .dx-toolbar-item {
    padding-inline-start: var(--app-popup-action-gap);
}
.pictureviewer-app :is(.dx-filemanager-dialog-popup, .app-devextreme-popup, .dx-dialog) .dx-popup-bottom .dx-button {
    height: var(--app-action-height);
    min-height: 0;
}
.pictureviewer-app :is(.dx-filemanager-dialog-popup, .app-devextreme-popup, .dx-dialog) .dx-popup-bottom .dx-button-content {
    padding: 0.25rem 0.75rem;
}

.pictureviewer-app .dxbl-splitter {
    --dxbl-splitter-separator-bg: var(--app-border);
    --dxbl-splitter-separator-hover-bg: var(--app-accent-soft);
    --dxbl-splitter-separator-active-bg: var(--app-accent);
}

/* Shared plain HTML / Bootstrap surfaces used alongside DevExpress controls. */
.pictureviewer-app .btn-primary {
    --bs-btn-bg: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-bg: var(--app-accent-hover);
    --bs-btn-hover-border-color: var(--app-accent-hover);
    --bs-btn-active-bg: var(--app-accent-hover);
    --bs-btn-active-border-color: var(--app-accent-hover);
}
.pictureviewer-app :is(.btn, .form-control, .form-select, .alert) { border-radius: var(--app-radius); }
.pictureviewer-app :is(.form-control, .form-select) { border-color: var(--app-border); }
.pictureviewer-app :is(.form-control, .form-select):focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px rgb(36 93 176 / 15%);
}
.pictureviewer-app :is(.card, .modal-content) {
    border-color: var(--app-border);
    border-radius: var(--app-dialog-radius);
}
.pictureviewer-app .modal-content { box-shadow: var(--app-shadow); }
.pictureviewer-app :is(.modal-header, .card-header) { background-color: var(--app-tree-bg); }
.pictureviewer-app .modal-footer { background-color: var(--app-detail-bg); }
.pictureviewer-app :is(.fm-toolbar, .tree-toolbar, .fm-view-toolbar) {
    gap: calc(var(--app-space) / 2);
    padding: calc(var(--app-space) / 2) var(--app-space);
    border-color: var(--app-border);
}

/* DevExtreme is loaded dynamically: these selectors outrank its theme rules. */
.pictureviewer-app .file-explorer-host .dx-widget { font-family: var(--app-font); }
.pictureviewer-app .file-explorer-host .dx-filemanager { color: var(--app-text); border-color: var(--app-border); }
.pictureviewer-app .file-explorer-host .dx-datagrid { color: var(--app-text); }
.pictureviewer-app .file-explorer-host .dx-datagrid-headers {
    color: var(--app-text);
    border-color: var(--app-border);
}
.pictureviewer-app .file-explorer-host .dx-button { border-radius: var(--app-radius); }
.pictureviewer-app .file-explorer-host .dx-filemanager .dx-filemanager-thumbnails .dx-filemanager-thumbnails-item.dx-item-selected {
    color: var(--app-text);
    background: var(--app-selection);
}
.pictureviewer-app .file-explorer-host .dx-filemanager .dx-filemanager-thumbnails .dx-filemanager-thumbnails-item.dx-item-selected.dx-state-focused {
    color: #fff;
    background: var(--app-accent);
}
.pictureviewer-app .file-explorer-host .dx-filemanager-dirs-tree.dx-treeview .dx-treeview-item-without-checkbox > .dx-treeview-item.dx-filemanager-focused-item {
    background: var(--app-selection);
}
.pictureviewer-app .file-explorer-host .dx-filemanager-dirs-tree.dx-treeview .dx-treeview-item-without-checkbox > .dx-treeview-item.dx-filemanager-focused-item * {
    color: var(--app-text);
}

@media (prefers-reduced-motion: reduce) {
    .pictureviewer-app :is(.sidebar, .app-header__fullwidth-toggle, .btn, .dxbl-btn) { transition: none; }
}

/* The selected palette also styles custom pages, not just DevExpress widgets. */
:root:is([data-app-theme="fluent-light"], [data-app-theme="fluent-light-3d-3x"], [data-app-theme="fluent-light-3d-5x"]) {
    --app-canvas: #f5f5f5;
    --app-tree-bg: #f0f0f0;
    --app-detail-bg: #fafafa;
    --app-header-bg: #ebebeb;
    --app-accent: #0f6cbd;
    --app-accent-hover: #115ea3;
    --app-accent-rgb: 15, 108, 189;
    --app-radius: 4px;
}
:root[data-app-theme="blazing-berry"],
:root[data-app-theme="purple"] {
    --app-accent: #6f42c1;
    --app-accent-hover: #59359a;
    --app-accent-rgb: 111, 66, 193;
    --app-accent-soft: #f0eafa;
    --app-selection: #e2d5f5;
    --app-header-bg: #ece6f4;
    --app-tree-bg: #f1edf7;
}
:root[data-app-theme="purple"] {
    --app-accent: #7952b3;
    --app-accent-hover: #614092;
    --app-accent-rgb: 121, 82, 179;
    --app-radius: 3px;
}
:root[data-app-theme$="dark"] {
    color-scheme: dark;
    --app-canvas: #171b22;
    --app-surface: #252b35;
    --app-detail-bg: #202630;
    --app-tree-bg: #282f3b;
    --app-header-bg: #242b36;
    --app-text: #e4eaf3;
    --app-muted: #b4c0d1;
    --app-border: #4a5669;
    --app-accent: #416fae;
    --app-accent-hover: #355b92;
    --app-accent-rgb: 65, 111, 174;
    --app-accent-soft: #2b3e59;
    --app-selection: #344b6c;
    --app-shadow: 0 8px 28px rgb(0 0 0 / 35%);
    --app-danger: #ff9aa5;
}
:root[data-app-theme="blazing-dark"] {
    --app-accent: #7950b3;
    --app-accent-hover: #644194;
    --app-accent-rgb: 121, 80, 179;
    --app-accent-soft: #382e49;
    --app-selection: #4a395f;
}
.pictureviewer-app .app-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}
.pictureviewer-app .app-theme-switcher {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .875rem;
}
.pictureviewer-app .app-theme-switcher select {
    max-width: min(275px, 60vw);
    padding: 5px 8px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-text);
}
.pictureviewer-app .app-theme-switcher select:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}
.pictureviewer-app .app-theme-error { color: var(--bs-danger); max-width: 220px; }
[data-app-theme$="dark"] body.pictureviewer-app {
    --bs-body-color-rgb: 228, 234, 243;
    --bs-secondary-color: var(--app-muted);
    --bs-secondary-color-rgb: 180, 192, 209;
    --bs-link-color: #a8caff;
    --bs-link-hover-color: #d0e2ff;
}
[data-app-theme$="dark"] .pictureviewer-app :is(.card.login-card, .card.register-card, .card, .modal-content) {
    color: var(--app-text);
    background-color: var(--app-surface);
}
[data-app-theme$="dark"] .pictureviewer-app :is(.account-toolbar__dropdown, .account-toolbar__menu, .dropdown-menu) {
    color: var(--app-text);
    background: var(--app-surface);
    border-color: var(--app-border);
}
[data-app-theme$="dark"] .pictureviewer-app :is(.login-footer, .register-footer, .account-toolbar__name, .app-header__login-link) { color: var(--app-muted); }
[data-app-theme$="dark"] .pictureviewer-app .dxbl-tabs { --dxbl-tabs-tab-selected-color: var(--app-text); }
[data-app-theme$="dark"] .pictureviewer-app .dxbl-toolbar {
    --dxbl-toolbar-btn-hover-color: var(--app-text);
    --dxbl-toolbar-btn-active-color: var(--app-text);
}
[data-app-theme$="dark"] .pictureviewer-app :is(.form-control, .form-select) {
    background-color: var(--app-surface);
    color: var(--app-text);
}
[data-app-theme$="dark"] .pictureviewer-app .dxbl-tabs {
    --dxbl-tabs-tab-hover-color: var(--app-text);
}
[data-app-theme$="dark"] .pictureviewer-app .sidebar {
    --sidebar-accent: #a8caff;
    --sidebar-accent-hover: #d0e2ff;
}


/* Shared raised treatment for the Office White and Fluent Light 5x choices. */
:root:is([data-app-theme="office-white-soft-3d"], [data-app-theme="fluent-light-3d-5x"]) {
    --app-radius: 7px;
    --app-border: #9aaec5;
    --app-shadow: 0 20px 50px rgb(36 54 75 / 32%);
    --app-raised-shadow: inset 0 2px 0 rgb(255 255 255 / 95%), inset 0 -2px 0 rgb(36 54 75 / 24%), 0 5px 10px rgb(36 54 75 / 36%);
}
:is([data-app-theme="office-white-soft-3d"], [data-app-theme="fluent-light-3d-5x"]) .pictureviewer-app :is(.app-header, .dxbl-toolbar, .card-header, .modal-header) {
    background-image: linear-gradient(to bottom, rgb(255 255 255 / 95%), rgb(255 255 255 / 25%) 45%, rgb(36 54 75 / 20%));
    box-shadow: inset 0 2px 0 #fff, inset 0 -2px 0 rgb(36 54 75 / 20%), 0 5px 15px rgb(36 54 75 / 30%);
}
:is([data-app-theme="office-white-soft-3d"], [data-app-theme="fluent-light-3d-5x"]) .pictureviewer-app .dxbl-grid {
    --dxbl-grid-header-bg: var(--app-3d-header, #e2e9f2);
}
:is([data-app-theme="office-white-soft-3d"], [data-app-theme="fluent-light-3d-5x"]) .pictureviewer-app :is(.card, .modal-content) {
    box-shadow: var(--app-raised-shadow), var(--app-shadow);
}
:is([data-app-theme="office-white-soft-3d"], [data-app-theme="fluent-light-3d-5x"]) .pictureviewer-app .dxbl-popup {
    --dxbl-popup-header-bg: var(--app-3d-header, #e2e9f2);
}
:is([data-app-theme="office-white-soft-3d"], [data-app-theme="fluent-light-3d-5x"]) .pictureviewer-app :is(.dxbl-btn-primary, .dxbl-btn-secondary, .dxbl-btn-danger, .btn, .dx-button-mode-contained):not(:disabled):not(.disabled):not(.dx-state-disabled) {
    background-image: linear-gradient(to bottom, rgb(255 255 255 / 45%), transparent 45%, rgb(0 0 0 / 30%));
    box-shadow: var(--app-raised-shadow);
}
:is([data-app-theme="office-white-soft-3d"], [data-app-theme="fluent-light-3d-5x"]) .pictureviewer-app :is(.dxbl-btn-primary, .dxbl-btn-secondary, .dxbl-btn-danger, .btn, .dx-button-mode-contained):not(:disabled):not(.disabled):not(.dx-state-disabled):is(:active, .dx-state-active, [aria-pressed="true"]) {
    background-image: linear-gradient(to bottom, rgb(0 0 0 / 35%), rgb(0 0 0 / 8%));
    box-shadow: inset 0 5px 10px rgb(36 54 75 / 45%), 0 1px 0 #fff;
}
:is([data-app-theme="office-white-soft-3d"], [data-app-theme="fluent-light-3d-5x"]) .pictureviewer-app :is(.dxbl-text-edit, .form-control, .form-select, .app-theme-switcher select):not(:focus-within) {
    box-shadow: inset 0 5px 15px rgb(36 54 75 / 25%), 0 2px 0 #fff;
}
:is([data-app-theme="office-white-soft-3d"], [data-app-theme="fluent-light-3d-5x"]) .pictureviewer-app .dxbl-splitter {
    --dxbl-splitter-separator-bg: var(--app-3d-separator, #b9c7d8);
}
:is([data-app-theme="office-white-soft-3d"], [data-app-theme="fluent-light-3d-5x"]) .pictureviewer-app .file-explorer-host .dx-filemanager .dx-filemanager-toolbar,
:is([data-app-theme="office-white-soft-3d"], [data-app-theme="fluent-light-3d-5x"]) .pictureviewer-app .file-explorer-host .dx-datagrid-headers {
    background-image: linear-gradient(to bottom, #fff, var(--app-3d-header, #e2e9f2) 45%, var(--app-3d-header-edge, #b2c2d6));
    box-shadow: inset 0 2px 0 #fff, inset 0 -2px 0 rgb(36 54 75 / 20%), 0 5px 10px rgb(36 54 75 / 30%);
}
:is([data-app-theme="office-white-soft-3d"], [data-app-theme="fluent-light-3d-5x"]) .pictureviewer-app .file-explorer-host .dx-filemanager .dx-filemanager-toolbar .dx-toolbar {
    background-color: transparent;
}

:is([data-app-theme="office-white-soft-3d"], [data-app-theme="fluent-light-3d-5x"]) .pictureviewer-app .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell),
:is([data-app-theme="office-white-soft-3d"], [data-app-theme="fluent-light-3d-5x"]) .pictureviewer-app :is(.dxbl-popup-header, .app-devextreme-popup .dx-popup-title, .dx-filemanager-dialog-popup .dx-popup-title, .dx-dialog .dx-popup-title) {
    background-image: linear-gradient(to bottom, #fff, var(--app-3d-header, #e2e9f2) 45%, var(--app-3d-header-edge, #b2c2d6));
    box-shadow: inset 0 2px 0 #fff, inset 0 -2px 3px rgb(36 54 75 / 25%);
}

/* Medium depth: approximately 3x the original Soft 3D treatment. */
:root:is([data-app-theme="office-white-soft-3d-3x"], [data-app-theme="fluent-light-3d-3x"]) {
    --app-radius: 7px;
    --app-border: #aabbd0;
    --app-shadow: 0 15px 40px rgb(36 54 75 / 18%);
    --app-raised-shadow: inset 0 2px 0 rgb(255 255 255 / 85%), inset 0 -2px 0 rgb(36 54 75 / 18%), 0 3px 6px rgb(36 54 75 / 28%);
}
:is([data-app-theme="office-white-soft-3d-3x"], [data-app-theme="fluent-light-3d-3x"]) .pictureviewer-app :is(.app-header, .dxbl-toolbar, .card-header, .modal-header) {
    background-image: linear-gradient(to bottom, rgb(255 255 255 / 85%), rgb(255 255 255 / 16%) 45%, rgb(36 54 75 / 12%));
    box-shadow: inset 0 2px 0 #fff, inset 0 -2px 0 rgb(36 54 75 / 12%), 0 3px 9px rgb(36 54 75 / 18%);
}
:is([data-app-theme="office-white-soft-3d-3x"], [data-app-theme="fluent-light-3d-3x"]) .pictureviewer-app .dxbl-grid {
    --dxbl-grid-header-bg: var(--app-3d-header, #e2e9f2);
}
:is([data-app-theme="office-white-soft-3d-3x"], [data-app-theme="fluent-light-3d-3x"]) .pictureviewer-app :is(.card, .modal-content) {
    box-shadow: var(--app-raised-shadow), var(--app-shadow);
}
:is([data-app-theme="office-white-soft-3d-3x"], [data-app-theme="fluent-light-3d-3x"]) .pictureviewer-app .dxbl-popup {
    --dxbl-popup-header-bg: var(--app-3d-header, #e2e9f2);
}
:is([data-app-theme="office-white-soft-3d-3x"], [data-app-theme="fluent-light-3d-3x"]) .pictureviewer-app :is(.dxbl-btn-primary, .dxbl-btn-secondary, .dxbl-btn-danger, .btn, .dx-button-mode-contained):not(:disabled):not(.disabled):not(.dx-state-disabled) {
    background-image: linear-gradient(to bottom, rgb(255 255 255 / 30%), transparent 45%, rgb(0 0 0 / 18%));
    box-shadow: var(--app-raised-shadow);
}
:is([data-app-theme="office-white-soft-3d-3x"], [data-app-theme="fluent-light-3d-3x"]) .pictureviewer-app :is(.dxbl-btn-primary, .dxbl-btn-secondary, .dxbl-btn-danger, .btn, .dx-button-mode-contained):not(:disabled):not(.disabled):not(.dx-state-disabled):is(:active, .dx-state-active, [aria-pressed="true"]) {
    background-image: linear-gradient(to bottom, rgb(0 0 0 / 22%), rgb(0 0 0 / 5%));
    box-shadow: inset 0 3px 6px rgb(36 54 75 / 30%), 0 1px 0 #fff;
}
:is([data-app-theme="office-white-soft-3d-3x"], [data-app-theme="fluent-light-3d-3x"]) .pictureviewer-app :is(.dxbl-text-edit, .form-control, .form-select, .app-theme-switcher select):not(:focus-within) {
    box-shadow: inset 0 3px 9px rgb(36 54 75 / 16%), 0 2px 0 #fff;
}
:is([data-app-theme="office-white-soft-3d-3x"], [data-app-theme="fluent-light-3d-3x"]) .pictureviewer-app .dxbl-splitter {
    --dxbl-splitter-separator-bg: var(--app-3d-separator, #b9c7d8);
}
:is([data-app-theme="office-white-soft-3d-3x"], [data-app-theme="fluent-light-3d-3x"]) .pictureviewer-app .file-explorer-host .dx-filemanager .dx-filemanager-toolbar,
:is([data-app-theme="office-white-soft-3d-3x"], [data-app-theme="fluent-light-3d-3x"]) .pictureviewer-app .file-explorer-host .dx-datagrid-headers {
    background-image: linear-gradient(to bottom, #fff, var(--app-3d-header, #e2e9f2) 45%, var(--app-3d-header-edge, #c6d2e2));
    box-shadow: inset 0 2px 0 #fff, inset 0 -2px 0 rgb(36 54 75 / 12%), 0 3px 6px rgb(36 54 75 / 18%);
}
:is([data-app-theme="office-white-soft-3d-3x"], [data-app-theme="fluent-light-3d-3x"]) .pictureviewer-app .file-explorer-host .dx-filemanager .dx-filemanager-toolbar .dx-toolbar {
    background-color: transparent;
}

:is([data-app-theme="office-white-soft-3d-3x"], [data-app-theme="fluent-light-3d-3x"]) .pictureviewer-app .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell),
:is([data-app-theme="office-white-soft-3d-3x"], [data-app-theme="fluent-light-3d-3x"]) .pictureviewer-app :is(.dxbl-popup-header, .app-devextreme-popup .dx-popup-title, .dx-filemanager-dialog-popup .dx-popup-title, .dx-dialog .dx-popup-title) {
    background-image: linear-gradient(to bottom, #fff, var(--app-3d-header, #e2e9f2) 45%, var(--app-3d-header-edge, #c6d2e2));
    box-shadow: inset 0 2px 0 #fff, inset 0 -2px 3px rgb(36 54 75 / 16%);
}

/* Fluent variants retain the Fluent palette and corner radius at each depth. */
:root:is([data-app-theme="fluent-light-3d-3x"], [data-app-theme="fluent-light-3d-5x"]) {
    --app-radius: 4px;
    --app-3d-header: #ebebeb;
    --app-3d-separator: #c2c2c2;
}
:root[data-app-theme="fluent-light-3d-3x"] {
    --app-border: #b8b8b8;
    --app-3d-header-edge: #d2d2d2;
}
:root[data-app-theme="fluent-light-3d-5x"] {
    --app-border: #a3a3a3;
    --app-3d-header-edge: #bdbdbd;
}

/* Shared application actions. DevExpress retains its own widget-internal controls. */
.pictureviewer-app .pictureviewer-action-button {
    min-height: var(--app-action-height);
    border-radius: var(--app-radius);
    font-family: var(--app-font);
    font-weight: 400;
}
.pictureviewer-app :is(button, a).pictureviewer-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-action-gap);
}
.pictureviewer-app :is(.pictureviewer-action-button, .pictureviewer-action-item) .pictureviewer-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    font-size: 1rem;
    text-align: center;
}
.pictureviewer-app .pictureviewer-action-button--icon {
    flex: 0 0 var(--app-action-height);
    width: var(--app-action-height);
    padding: 0;
}
.pictureviewer-app :is(.pictureviewer-action-button, button.pictureviewer-action-item):focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}
.pictureviewer-app .pictureviewer-action-button:disabled {
    cursor: default;
}
/* Plain HTML actions use the same palette as secondary DevExpress buttons. */
.pictureviewer-app .pictureviewer-action-button.btn-secondary {
    --bs-btn-color: var(--app-text);
    --bs-btn-bg: var(--app-surface);
    --bs-btn-border-color: var(--app-border);
    --bs-btn-hover-color: var(--app-text);
    --bs-btn-hover-bg: var(--app-accent-soft);
    --bs-btn-hover-border-color: var(--app-accent);
    --bs-btn-active-color: var(--app-text);
    --bs-btn-active-bg: var(--app-selection);
    --bs-btn-active-border-color: var(--app-accent);
    --bs-btn-disabled-color: var(--app-muted);
    --bs-btn-disabled-bg: var(--app-surface);
    --bs-btn-disabled-border-color: var(--app-border);
}
.pictureviewer-app .pictureviewer-action-button[aria-pressed="true"] {
    background-color: var(--app-selection);
    border-color: var(--app-accent);
    color: var(--app-text);
}
/* Dropdowns and context menus can render in portals, outside page-scoped CSS.
   Flatten the buttons inside each item while keeping item hover/focus feedback. */
.pictureviewer-app .pictureviewer-action-menu {
    /* Dropdown popups need their own separator value outside the button's scope. */
    --dxbl-btn-dropdown-item-separator-border-top: 1px solid var(--app-border);
    --dxbl-menu-font-family: var(--app-font);
    --dxbl-menu-item-hover-bg: var(--app-accent-soft);
    --dxbl-menu-item-hover-color: var(--app-text);
}
.pictureviewer-app .pictureviewer-action-item,
.pictureviewer-app .pictureviewer-action-item .dxbl-btn,
.pictureviewer-app .pictureviewer-action-item button {
    border-color: transparent !important;
    border-radius: 0 !important;
    background-color: transparent;
    background-image: none !important;
    box-shadow: none !important;
    font-weight: 400 !important;
    font-family: var(--app-font);
}
.pictureviewer-app .pictureviewer-action-item .dxbl-btn,
.pictureviewer-app .pictureviewer-action-item button {
    background-color: transparent !important;
}
.pictureviewer-app button.pictureviewer-action-item {
    display: flex;
    align-items: center;
    gap: var(--app-action-gap);
}
.pictureviewer-app .pictureviewer-action-item--danger,
.pictureviewer-app .pictureviewer-action-item--danger .dxbl-btn {
    color: var(--app-danger);
}
.pictureviewer-app .pictureviewer-action-item:not(:disabled):not([aria-disabled="true"]):not(.dxbl-disabled):is(:hover, :focus-visible) {
    background-color: var(--app-accent-soft);
}
/* DevExpress may mark the nested button disabled rather than the item wrapper.
   Keep disabled actions visibly muted, including destructive actions and icons. */
.pictureviewer-app .pictureviewer-action-item:is(:disabled, [aria-disabled="true"], .dxbl-disabled),
.pictureviewer-app .pictureviewer-action-item:has(.dxbl-btn:is(:disabled, [aria-disabled="true"], .dxbl-disabled)) {
    --app-icon-shadow: none;
    color: var(--app-muted) !important;
    background-color: transparent !important;
    opacity: 0.55;
    filter: grayscale(1);
    cursor: default;
}
.pictureviewer-app .pictureviewer-action-item:is(:disabled, [aria-disabled="true"], .dxbl-disabled) :is(.dxbl-btn, .pictureviewer-icon),
.pictureviewer-app .pictureviewer-action-item:has(.dxbl-btn:is(:disabled, [aria-disabled="true"], .dxbl-disabled)) :is(.dxbl-btn, .pictureviewer-icon) {
    color: inherit !important;
}