/* Shared popup / split styles (DxPopup renders outside component scope) */

.ix-layout-popup.ix-add-field-popup .dxbl-popup-content {
    border-radius: .8rem !important;
    overflow: hidden !important;
}

.ix-add-field-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 2px 8px;
}

.ix-add-field-section {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    background: #f8fafc;
}

.ix-add-field-section-main {
    background: #fff;
}

.ix-add-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
}

.ix-add-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ix-add-field-group.full {
    grid-column: 1 / -1;
}

.ix-add-field-group label {
    font-size: 11px;
    font-weight: 700;
    color: #344054;
}

.ix-add-field-select {
    width: 100%;
    height: 28px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 8px;
    font-size: 12px;
    color: #1e3a5f;
    background: #fff;
    box-sizing: border-box;
}

.ix-add-field-builder-btn {
    margin-top: 8px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.ix-add-field-builder-btn:hover {
    background: #dbeafe;
}

.ix-custom-field-list-title {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
}

.ix-custom-field-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow: auto;
}

.ix-custom-field-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.ix-custom-field-row.active {
    border-color: #93c5fd;
    background: #eff6ff;
}

.ix-custom-field-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}

.ix-custom-field-row-text strong {
    color: #0f172a;
}

.ix-custom-field-row-text span {
    color: #64748b;
    font-size: 11px;
}

.ix-custom-field-row-btn {
    height: 26px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.ix-custom-field-row-btn:hover {
    background: #f8fafc;
}

.ix-custom-field-row-btn.danger {
    color: #b91c1c;
    border-color: #fecaca;
}

.ix-save-split-caret {
    display: block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

.ix-save-split-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1202;
    min-width: 168px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
    padding: 4px;
}

.ix-save-split-menu-item {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #0056b3;
    cursor: pointer;
}

.ix-save-split-menu-item:hover {
    background: #eff6ff;
    color: #0056b3;
}

.ix-expression-editor-popup .dxbl-popup-content {
    padding: 0 !important;
}

.ix-expr-editor-shell {
    display: flex;
    flex-direction: column;
    height: 458px;
    max-height: 458px;
    background: #f3f3f3;
}

.ix-expr-editor-top {
    flex: 0 0 auto;
    padding: 8px 10px;
    background: #fff;
    border-bottom: 1px solid #d1d1d1;
}

.ix-expr-editor-label {
    font-size: 11px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    display: block;
}

.ix-expr-editor-formula {
    width: 100%;
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    border: 1px solid #d1d1d1;
    border-radius: 0;
    padding: 6px 8px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    color: #000;
    resize: none;
    box-sizing: border-box;
    background: #fff;
}

.ix-expr-editor-workspace {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 118px 1fr 200px;
    gap: 0;
    min-height: 0;
    border-top: 1px solid #d1d1d1;
}

.ix-expr-editor-nav {
    background: #fff;
    border-right: 1px solid #d1d1d1;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: auto;
}

.ix-expr-nav-btn {
    border: none;
    background: transparent;
    text-align: left;
    padding: 6px 12px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    cursor: pointer;
}

.ix-expr-nav-btn.active {
    background: #e5f3ff;
    color: #000;
}

.ix-expr-editor-list {
    background: #fff;
    border-right: 1px solid #d1d1d1;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

.ix-expr-editor-list-body {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.ix-expr-table-group {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    padding: 6px 4px 2px;
}

.ix-expr-item-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    text-align: left;
    padding: 4px 6px;
    border-radius: 0;
    font-size: 12px;
    color: #000;
    cursor: pointer;
}

.ix-expr-item-btn:hover {
    background: #e8e8e8;
}

.ix-expr-item-ico {
    width: 20px;
    height: 16px;
    border-radius: 2px;
    background: #e8e8e8;
    color: #555;
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ix-expr-editor-help {
    background: #fff;
    padding: 8px 10px;
    overflow: auto;
}

.ix-expr-help-title {
    font-size: 12px;
    font-weight: 600;
    color: #000;
    margin-bottom: 4px;
}

.ix-expr-help-text {
    font-size: 11px;
    color: #666;
    line-height: 1.35;
}

.ix-expr-help-insert {
    margin-top: 8px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    background: #f3f3f3;
    color: #000;
    font-size: 11px;
    cursor: pointer;
}

.ix-expr-help-insert:hover {
    background: #e8e8e8;
}

/* Menu workspace — add field / expression / split menus (popups portaled to body) */
body:has(.workspace-shell.ix-menu-theme) .ix-add-field-section {
    border-color: #cfc0ae;
    background: #f7f3ef;
}

body:has(.workspace-shell.ix-menu-theme) .ix-add-field-builder-btn {
    border-color: #cfc0ae;
    background: #f7f3ef;
    color: #6d5a45;
}

body:has(.workspace-shell.ix-menu-theme) .ix-add-field-builder-btn:hover {
    background: #ebe3d8;
}

body:has(.workspace-shell.ix-menu-theme) .ix-custom-field-row.active {
    border-color: #cfc0ae;
    background: #f7f3ef;
}

body:has(.workspace-shell.ix-menu-theme) .ix-expr-nav-btn.active {
    background: #ebe3d8;
    color: #6d5a45;
}

body:has(.workspace-shell.ix-menu-theme) .ix-save-split-menu-item {
    color: #6d5a45;
}

body:has(.workspace-shell.ix-menu-theme) .ix-save-split-menu-item:hover {
    background: #f7f3ef;
    color: #5c4a38;
}

body:has(.workspace-shell.ix-menu-theme) .ix-layout-popup .dxbl-btn.dxbl-btn-primary,
body:has(.workspace-shell.ix-menu-theme) .ix-add-field-popup .dxbl-btn.dxbl-btn-primary,
body:has(.workspace-shell.ix-menu-theme) .ix-expression-editor-popup .dxbl-btn.dxbl-btn-primary,
body:has(.workspace-shell.ix-menu-theme) .rv-edit-columns-popup .dxbl-btn.dxbl-btn-primary,
body:has(.workspace-shell.ix-menu-theme) .rv-filter-editor-popup .dxbl-btn.dxbl-btn-primary,
body:has(.workspace-shell.ix-menu-theme) .rv-cf-popup .dxbl-btn.dxbl-btn-primary,
body:has(.workspace-shell.ix-menu-theme) .ix-layout-popup .dxbl-btn.layout-btn-save,
body:has(.workspace-shell.ix-menu-theme) .rv-filter-editor-popup .dxbl-btn.layout-btn-save,
body:has(.workspace-shell.ix-menu-theme) .rv-cf-popup .dxbl-btn.layout-btn-save {
    background: #8b7355 !important;
    border-color: #6d5a45 !important;
    color: #fff !important;
}

body:has(.workspace-shell.ix-menu-theme) .ix-layout-popup .dxbl-btn.dxbl-btn-primary:hover:not(:disabled),
body:has(.workspace-shell.ix-menu-theme) .ix-add-field-popup .dxbl-btn.dxbl-btn-primary:hover:not(:disabled),
body:has(.workspace-shell.ix-menu-theme) .ix-expression-editor-popup .dxbl-btn.dxbl-btn-primary:hover:not(:disabled),
body:has(.workspace-shell.ix-menu-theme) .ix-layout-popup .dxbl-btn.layout-btn-save:hover:not(:disabled),
body:has(.workspace-shell.ix-menu-theme) .rv-filter-editor-popup .dxbl-btn.layout-btn-save:hover:not(:disabled),
body:has(.workspace-shell.ix-menu-theme) .rv-cf-popup .dxbl-btn.layout-btn-save:hover:not(:disabled) {
    background: #6d5a45 !important;
    border-color: #5c4a38 !important;
}

body:has(.workspace-shell.ix-menu-theme) .ix-layout-popup .dxbl-btn.layout-btn-cancel,
body:has(.workspace-shell.ix-menu-theme) .rv-filter-editor-popup .dxbl-btn.layout-btn-cancel,
body:has(.workspace-shell.ix-menu-theme) .rv-cf-popup .dxbl-btn.layout-btn-cancel,
body:has(.workspace-shell.ix-menu-theme) .ix-add-field-popup .dxbl-btn.dxbl-btn-secondary {
    background: #fff !important;
    border-color: #cfc0ae !important;
    color: #6d5a45 !important;
}

body:has(.workspace-shell.ix-menu-theme) .ix-layout-popup .dxbl-btn.layout-btn-cancel:hover:not(:disabled),
body:has(.workspace-shell.ix-menu-theme) .rv-filter-editor-popup .dxbl-btn.layout-btn-cancel:hover:not(:disabled),
body:has(.workspace-shell.ix-menu-theme) .rv-cf-popup .dxbl-btn.layout-btn-cancel:hover:not(:disabled),
body:has(.workspace-shell.ix-menu-theme) .ix-add-field-popup .dxbl-btn.dxbl-btn-secondary:hover:not(:disabled) {
    background: #f7f3ef !important;
    border-color: #8b7355 !important;
    color: #5c4a38 !important;
}

/* Fill Barcodes popup — 3 columns, header-style controls + theme */
.frm-fill-barcodes-popup.dxbl-popup {
    max-width: 96vw !important;
    --ix-accent: #0d6efd;
    --ix-accent-hover: #0a58ca;
    --ix-frm-accent: var(--ix-accent);
    --ix-frm-accent-strong: var(--ix-accent-hover);
    --ix-frm-soft: color-mix(in srgb, var(--ix-frm-accent) 12%, #ffffff);
    --ix-frm-border: color-mix(in srgb, var(--ix-frm-accent) 35%, #ffffff);
    --ix-frm-text: var(--ix-frm-accent);
}

body:has(.workspace-shell.ix-blue-workspace) .frm-fill-barcodes-popup,
body:has(.theme-host.ix-app-theme-blue) .frm-fill-barcodes-popup,
body:has(.workspace-shell.ix-blue-workspace) .frm-fill-barcodes-footer-band,
body:has(.theme-host.ix-app-theme-blue) .frm-fill-barcodes-footer-band {
    --ix-accent: #0d6efd;
    --ix-accent-hover: #0a58ca;
    --ix-frm-accent: #0d6efd;
    --ix-frm-accent-strong: #0a58ca;
    --ix-frm-soft: #e8f2ff;
    --ix-frm-border: #b6d4fe;
    --ix-frm-text: #0d6efd;
}

body:has(.workspace-shell.ix-navy-workspace) .frm-fill-barcodes-popup,
body:has(.theme-host.ix-app-theme-navy) .frm-fill-barcodes-popup,
body:has(.workspace-shell.ix-navy-workspace) .frm-fill-barcodes-footer-band,
body:has(.theme-host.ix-app-theme-navy) .frm-fill-barcodes-footer-band {
    --ix-accent: #2F80ED;
    --ix-accent-hover: #1c6dd0;
    --ix-frm-accent: #2F80ED;
    --ix-frm-accent-strong: #1c6dd0;
    --ix-frm-soft: #E8F1FF;
    --ix-frm-border: #bfdbfe;
    --ix-frm-text: #2F80ED;
}

body:has(.workspace-shell.ix-graphite-workspace) .frm-fill-barcodes-popup,
body:has(.theme-host.ix-app-theme-graphite) .frm-fill-barcodes-popup,
body:has(.workspace-shell.ix-graphite-workspace) .frm-fill-barcodes-footer-band,
body:has(.theme-host.ix-app-theme-graphite) .frm-fill-barcodes-footer-band {
    --ix-accent: #059669;
    --ix-accent-hover: #047857;
    --ix-frm-accent: #059669;
    --ix-frm-accent-strong: #047857;
    --ix-frm-soft: #ecfdf5;
    --ix-frm-border: #a7f3d0;
    --ix-frm-text: #059669;
}

body:has(.workspace-shell.ix-glass-workspace) .frm-fill-barcodes-popup,
body:has(.theme-host.ix-app-theme-glass) .frm-fill-barcodes-popup,
body:has(.workspace-shell.ix-glass-workspace) .frm-fill-barcodes-footer-band,
body:has(.theme-host.ix-app-theme-glass) .frm-fill-barcodes-footer-band {
    --ix-accent: #4F46E5;
    --ix-accent-hover: #4338ca;
    --ix-frm-accent: #4F46E5;
    --ix-frm-accent-strong: #4338ca;
    --ix-frm-soft: #eef2ff;
    --ix-frm-border: #c7d2fe;
    --ix-frm-text: #4F46E5;
}

body:has(.workspace-shell.ix-platinum-workspace) .frm-fill-barcodes-popup,
body:has(.theme-host.ix-app-theme-platinum) .frm-fill-barcodes-popup,
body:has(.workspace-shell.ix-platinum-workspace) .frm-fill-barcodes-footer-band,
body:has(.theme-host.ix-app-theme-platinum) .frm-fill-barcodes-footer-band {
    --ix-accent: #2563EB;
    --ix-accent-hover: #1d4ed8;
    --ix-frm-accent: #2563EB;
    --ix-frm-accent-strong: #1d4ed8;
    --ix-frm-soft: #DBEAFE;
    --ix-frm-border: #93C5FD;
    --ix-frm-text: #2563EB;
}

body:has(.workspace-shell.ix-charcoal-workspace) .frm-fill-barcodes-popup,
body:has(.theme-host.ix-app-theme-charcoal) .frm-fill-barcodes-popup,
body:has(.workspace-shell.ix-charcoal-workspace) .frm-fill-barcodes-footer-band,
body:has(.theme-host.ix-app-theme-charcoal) .frm-fill-barcodes-footer-band {
    --ix-accent: #B87333;
    --ix-accent-hover: #A65E2E;
    --ix-frm-accent: #B87333;
    --ix-frm-accent-strong: #A65E2E;
    --ix-frm-soft: #F5E6D3;
    --ix-frm-border: #DDD6CE;
    --ix-frm-text: #A65E2E;
}

body:has(.workspace-shell.ix-menu-theme) .frm-fill-barcodes-popup,
body:has(.theme-host.ix-app-theme-brown) .frm-fill-barcodes-popup,
body:has(.workspace-shell.ix-menu-theme) .frm-fill-barcodes-footer-band,
body:has(.theme-host.ix-app-theme-brown) .frm-fill-barcodes-footer-band {
    --ix-accent: #8b7355;
    --ix-accent-hover: #6d5a45;
    --ix-frm-accent: #8b7355;
    --ix-frm-accent-strong: #6d5a45;
    --ix-frm-soft: #f5f0ea;
    --ix-frm-border: #d4c4b0;
    --ix-frm-text: #8b7355;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-body {
    max-height: calc(90vh - 120px);
    overflow: auto;
    padding: 4px 2px 8px;
    font-family: inherit;
    color: inherit;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-split {
    display: grid !important;
    grid-template-columns: max-content minmax(380px, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-left {
    min-width: 0 !important;
    width: max-content !important;
    max-width: 100% !important;
    overflow: auto !important;
    max-height: calc(90vh - 160px) !important;
    padding: 0 4px 4px 6px !important;
    align-self: stretch !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 150px) !important;
    justify-content: start !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
    width: max-content !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-table-wrap {
    margin-top: 0;
    border: 1px solid var(--ix-frm-border, #b6d4fe);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    height: 100%;
    min-height: calc(90vh - 180px);
    max-height: calc(90vh - 160px);
    display: flex;
    flex-direction: column;
    align-self: stretch !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-table-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ix-frm-text, var(--ix-accent, #0d6efd));
    padding: 6px 10px;
    border-bottom: 1px solid var(--ix-frm-border, #b6d4fe);
    background: var(--ix-frm-soft, #e8f2ff);
    flex: 0 0 auto;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-dxgrid {
    min-height: 0;
    flex: 1 1 auto;
    height: 100%;
    overflow: auto;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-dxgrid .dxbl-grid {
    height: 100% !important;
    border: 0 !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-dxgrid .dxbl-grid-table {
    font-size: 12px !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-cell {
    min-width: 0 !important;
    max-width: 150px !important;
    width: 150px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-cell.is-full-width {
    grid-column: 1 / -1 !important;
    max-width: none !important;
    width: auto !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-cell.is-line-separator {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-line {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 14px !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-line-title {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--ix-frm-text, var(--ix-accent, #0d6efd)) !important;
    white-space: nowrap !important;
    text-align: center !important;
    padding: 0 2px !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-line-rule {
    flex: 1 1 0 !important;
    height: 1px !important;
    min-width: 16px !important;
    background: var(--ix-frm-accent, var(--ix-accent, #0d6efd)) !important;
    opacity: .55 !important;
    border: 0 !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-cell.is-label-field .frm-fill-barcodes-caption.is-section-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--ix-frm-text, var(--ix-accent, #0d6efd)) !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-caption {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    opacity: .9 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-cell.is-field-bold .frm-fill-barcodes-caption {
    font-weight: 700 !important;
    font-size: 12px !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-editor {
    min-width: 0 !important;
    width: 150px !important;
    max-width: 150px !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-editor .ix-master-editor,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-text-edit,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-combobox,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-dropdown-edit,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-spin-edit,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-date-edit,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-button-edit,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .combo-master-wrap,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .ix-master-field-button {
    width: 150px !important;
    max-width: 150px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    min-height: 26px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-text-edit,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-spin-edit,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-date-edit,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-button-edit,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-combobox,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-dropdown-edit {
    height: 26px !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-cell.is-button-field {
    grid-column: 1 / -1 !important;
    max-width: none !important;
    width: auto !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding-top: 10px !important;
    padding-left: 0 !important;
    overflow: visible !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-cell.is-button-field .frm-fill-barcodes-editor {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-cell.is-button-field .frm-fill-barcodes-editor .ix-master-field-button {
    width: auto !important;
    max-width: none !important;
    min-width: 88px !important;
    padding: 0 14px !important;
    min-height: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    border-color: var(--ix-frm-accent, #0d6efd) !important;
    color: var(--ix-frm-text, #0d6efd) !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-text-edit,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-combobox,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-dropdown-edit,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-spin-edit,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-date-edit,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-button-edit,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-text-edit *,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-combobox *,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-dropdown-edit *,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-spin-edit *,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-date-edit * {
    border-radius: 4px !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-combobox input,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-dropdown-edit input,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-text-edit input,
.frm-fill-barcodes-popup .frm-fill-barcodes-editor .dxbl-spin-edit input {
    pointer-events: auto !important;
    caret-color: auto !important;
    border-radius: 4px !important;
    font-size: 12px !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-cell.is-button-field .frm-fill-barcodes-editor .ix-master-field-button:hover {
    background: var(--ix-frm-soft, #e8f2ff) !important;
    border-color: var(--ix-frm-accent-strong, #0a58ca) !important;
}

.frm-fill-barcodes-popup .dxbl-text-edit:focus-within,
.frm-fill-barcodes-popup .dxbl-combobox:focus-within,
.frm-fill-barcodes-popup .dxbl-dropdown-edit:focus-within,
.frm-fill-barcodes-popup .dxbl-spin-edit:focus-within,
.frm-fill-barcodes-popup .dxbl-date-edit:focus-within {
    border-color: var(--ix-frm-accent, #0d6efd) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ix-frm-accent, #0d6efd) 25%, transparent) !important;
}

.frm-fill-barcodes-popup .dxbl-popup-header,
body .frm-fill-barcodes-popup .dxbl-popup-header,
body .dxbl-popup.frm-fill-barcodes-popup .dxbl-popup-header,
.frm-fill-barcodes-popup .dxbl-popup-footer,
body .frm-fill-barcodes-popup .dxbl-popup-footer,
body .dxbl-popup.frm-fill-barcodes-popup .dxbl-popup-footer {
    background: var(--ix-frm-soft, #e8f2ff) !important;
    background-color: var(--ix-frm-soft, #e8f2ff) !important;
    border-color: var(--ix-frm-border, #b6d4fe) !important;
    color: var(--ix-frm-text, var(--ix-accent, #0d6efd)) !important;
}

.frm-fill-barcodes-popup .dxbl-popup-header,
body .frm-fill-barcodes-popup .dxbl-popup-header {
    border-bottom: 1px solid var(--ix-frm-border, #b6d4fe) !important;
    min-height: 38px !important;
    padding: 6px 12px !important;
}

.frm-fill-barcodes-popup .dxbl-popup-footer,
body .frm-fill-barcodes-popup .dxbl-popup-footer,
body .dxbl-popup.frm-fill-barcodes-popup .dxbl-popup-footer,
body .frm-fill-barcodes-popup .dxbl-popup-footer-content,
body .dxbl-popup.frm-fill-barcodes-popup > .dxbl-popup-footer {
    border-top: 1px solid var(--ix-frm-border, #b6d4fe) !important;
    min-height: 40px !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    background: var(--ix-frm-soft, #e8f2ff) !important;
    background-color: var(--ix-frm-soft, #e8f2ff) !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-footer-band,
body .frm-fill-barcodes-popup .frm-fill-barcodes-footer-band,
body .dxbl-popup.frm-fill-barcodes-popup .frm-fill-barcodes-footer-band {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
    min-height: 40px !important;
    margin: 0 !important;
    background: var(--ix-frm-soft, #e8f2ff) !important;
    background-color: var(--ix-frm-soft, #e8f2ff) !important;
    border: 0 !important;
    color: var(--ix-frm-text, var(--ix-accent, #0d6efd)) !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-bulk {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    color: inherit !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-footer-options {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-right: auto !important;
}

body:has(.workspace-shell.ix-blue-workspace) .frm-fill-barcodes-footer-band,
body:has(.theme-host.ix-app-theme-blue) .frm-fill-barcodes-footer-band { background: #e8f2ff !important; background-color: #e8f2ff !important; }
body:has(.workspace-shell.ix-navy-workspace) .frm-fill-barcodes-footer-band,
body:has(.theme-host.ix-app-theme-navy) .frm-fill-barcodes-footer-band { background: #E8F1FF !important; background-color: #E8F1FF !important; }
body:has(.workspace-shell.ix-graphite-workspace) .frm-fill-barcodes-footer-band,
body:has(.theme-host.ix-app-theme-graphite) .frm-fill-barcodes-footer-band { background: #ecfdf5 !important; background-color: #ecfdf5 !important; }
body:has(.workspace-shell.ix-glass-workspace) .frm-fill-barcodes-footer-band,
body:has(.theme-host.ix-app-theme-glass) .frm-fill-barcodes-footer-band { background: #eef2ff !important; background-color: #eef2ff !important; }
body:has(.workspace-shell.ix-platinum-workspace) .frm-fill-barcodes-footer-band,
body:has(.theme-host.ix-app-theme-platinum) .frm-fill-barcodes-footer-band { background: #DBEAFE !important; background-color: #DBEAFE !important; }
body:has(.workspace-shell.ix-charcoal-workspace) .frm-fill-barcodes-footer-band,
body:has(.theme-host.ix-app-theme-charcoal) .frm-fill-barcodes-footer-band { background: #F5E6D3 !important; background-color: #F5E6D3 !important; }
body:has(.workspace-shell.ix-menu-theme) .frm-fill-barcodes-footer-band,
body:has(.theme-host.ix-app-theme-brown) .frm-fill-barcodes-footer-band { background: #f5f0ea !important; background-color: #f5f0ea !important; }

.frm-fill-barcodes-popup .dxbl-popup-header .dxbl-popup-header-text {
    color: var(--ix-frm-text, var(--ix-accent, #0d6efd)) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

.frm-fill-barcodes-popup .dxbl-popup-header .dxbl-btn,
.frm-fill-barcodes-popup .dxbl-popup-header .dxbl-close-btn,
.frm-fill-barcodes-popup .dxbl-popup-header button {
    color: var(--ix-frm-text, var(--ix-accent, #0d6efd)) !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-footer-band .dxbl-btn {
    border-radius: 4px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-footer-band .dxbl-btn:not(.frm-fill-barcodes-btn-update) {
    border-color: var(--ix-frm-accent, #0d6efd) !important;
    color: var(--ix-frm-text, var(--ix-accent, #0d6efd)) !important;
    background: #fff !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-footer-band .frm-fill-barcodes-btn-update,
.frm-fill-barcodes-popup .frm-fill-barcodes-footer-band .dxbl-btn.frm-fill-barcodes-btn-update,
body .frm-fill-barcodes-popup .frm-fill-barcodes-btn-update {
    border-color: var(--ix-frm-accent, #0d6efd) !important;
    background: var(--ix-frm-accent, #0d6efd) !important;
    background-color: var(--ix-frm-accent, #0d6efd) !important;
    color: #fff !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-footer-band .frm-fill-barcodes-btn-update:hover,
body .frm-fill-barcodes-popup .frm-fill-barcodes-btn-update:hover {
    background: var(--ix-frm-accent-strong, var(--ix-accent-hover, #0b5ed7)) !important;
    background-color: var(--ix-frm-accent-strong, var(--ix-accent-hover, #0b5ed7)) !important;
    border-color: var(--ix-frm-accent-strong, var(--ix-accent-hover, #0b5ed7)) !important;
    color: #fff !important;
}

.frm-fill-barcodes-popup .frm-fill-barcodes-dxgrid .form-control-sm {
    height: 28px;
    min-height: 28px;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px !important;
}

@media (max-width: 1100px) {
    .frm-fill-barcodes-popup .frm-fill-barcodes-split {
        grid-template-columns: 1fr !important;
    }

    .frm-fill-barcodes-popup .frm-fill-barcodes-left,
    .frm-fill-barcodes-popup .frm-fill-barcodes-table-wrap {
        max-height: none !important;
    }
}

@media (max-width: 900px) {
    .frm-fill-barcodes-popup .frm-fill-barcodes-grid {
        grid-template-columns: repeat(2, 150px) !important;
    }
}