/* Lubi Admin Dashboard Styles */

.lubiadmin-dashboard {
    padding: 20px;
}

.lubiadmin-dashboard .alert {
    padding: 15px;
    margin-top: 15px;
    border-radius: 4px;
}

.lubiadmin-dashboard .alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.lubiadmin-dashboard .alert-error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.lubiadmin-dashboard .umb-control-group {
    margin-bottom: 20px;
}

/* Non-sticky toolbar (Refresh) at the top of the dashboard */
.lubiadmin-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 15px;
}

/* Side-by-side layout for dashboard sections */
.lubiadmin-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 20px;
}

.lubiadmin-row > .umb-box {
    flex: 1 1 320px;
    min-width: 320px;
    margin: 0;
}

/* Mini bar chart for content type counts */
.lubiadmin-chart {
    margin-top: 15px;
    border-top: 1px solid #eaeaec;
    padding-top: 12px;
}

.lubiadmin-chart-title {
    font-weight: bold;
    margin-bottom: 10px;
    color: #515159;
}

.lubiadmin-chart-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 10px;
}

.lubiadmin-chart-label {
    flex: 0 0 150px;
    font-size: 13px;
    color: #515159;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lubiadmin-chart-track {
    flex: 1 1 auto;
    background: #f0f0f2;
    border-radius: 3px;
    height: 22px;
    overflow: hidden;
}

.lubiadmin-chart-bar {
    height: 100%;
    background: linear-gradient(90deg, #2152a3, #3544b1);
    border-radius: 3px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transition: width 0.4s ease;
}

.lubiadmin-chart-value {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 0 8px;
}

/* Media cleanup confirmation dialog — reclaim some of the overlay's side padding for a tighter layout */
.lubiadmin-cleanup-dialog {
    margin: 0 -18px;
}

/* Media cleanup confirmation table */
.lubiadmin-media-table-wrap {
    max-height: 360px;
    overflow: auto;
    border: 1px solid #e9e9eb;
    border-radius: 4px;
    margin: 12px 0;
}

.lubiadmin-media-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 13px;
}

.lubiadmin-media-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f6f6f7;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #e9e9eb;
    font-weight: bold;
    color: #515159;
}

.lubiadmin-media-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f2;
    vertical-align: middle;
}

.lubiadmin-media-table tbody tr:hover {
    background: #fafafa;
}

.lubiadmin-media-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid #e0e0e0;
    display: block;
}

.lubiadmin-media-icon {
    font-size: 26px;
    color: #555;
}

/* Media cleanup progress */
.lubiadmin-progress {
    max-width: 420px;
}

.lubiadmin-progress__info {
    font-size: 13px;
    color: #515159;
    margin-bottom: 6px;
}

.lubiadmin-progress__track {
    background: #f0f0f2;
    border-radius: 4px;
    height: 16px;
    overflow: hidden;
    margin-bottom: 10px;
}

.lubiadmin-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, #2152a3, #3544b1);
    border-radius: 4px;
    width: 0;
    transition: width 0.3s ease;
}

.lubiadmin-progress__bar--restore {
    background: linear-gradient(90deg, #1b9e57, #2bc275);
}

.lubiadmin-progress__bar--scan {
    background: linear-gradient(90deg, #8a5cf6, #b07cf0);
}

/* Scan summary breakdown */
.lubiadmin-summary {
    border: 1px solid #e9e9eb;
    border-radius: 4px;
    padding: 10px 14px;
    margin: 4px 0 14px;
    background: #fafafa;
    max-width: 420px;
}

.lubiadmin-summary__head {
    font-weight: bold;
    color: #515159;
    margin-bottom: 6px;
}

.lubiadmin-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    font-size: 13px;
    color: #444;
}

.lubiadmin-summary__sub {
    color: #777;
    padding-left: 14px;
    font-size: 12px;
}

.lubiadmin-summary__total {
    border-top: 1px solid #e0e0e2;
    margin-top: 4px;
    padding-top: 6px;
    color: #b3261e;
}

/* Media statistics stat cards */
.lubiadmin-stat-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lubiadmin-stat-card {
    flex: 1 1 120px;
    min-width: 120px;
    border: 1px solid #e9e9eb;
    border-radius: 6px;
    padding: 14px 16px;
    background: #fff;
    text-align: center;
}

.lubiadmin-stat-card__value {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.1;
    color: #2152a3;
}

.lubiadmin-stat-card__label {
    margin-top: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #777;
}

.lubiadmin-stat-card--used .lubiadmin-stat-card__value {
    color: #1b9e57;
}

.lubiadmin-stat-card--unused .lubiadmin-stat-card__value {
    color: #b3261e;
}

.lubiadmin-stats .lubiadmin-summary {
    max-width: 100%;
}

/* ===== Content ordering (Manage Products / Manage Series) ===== */
.lubi-order-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.lubi-order-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}

.lubi-order-field label {
    font-size: 12px;
    font-weight: bold;
    color: #515159;
}

.lubi-order-field select {
    padding: 6px 8px;
    border: 1px solid #d8d7d9;
    border-radius: 3px;
    background: #fff;
}

/* Actions field has no label. A hidden label-height spacer pushes the button row down so it
   sits level with the sibling fields' controls (the parent filterbar is align-items:flex-end). */
.lubi-order-field--actions {
    min-width: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.lubi-order-field--actions::before {
    content: "\00a0";
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    visibility: hidden;
}

.lubi-order-field--actions .lubi-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
}

.lubi-order-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.lubi-order-empty {
    text-align: center;
    color: #8e8e93;
    padding: 24px 12px;
}

.lubi-order-empty--block {
    border: 1px dashed #e0e0e2;
    border-radius: 4px;
    background: #fafafa;
}

.lubi-order-resetbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f2;
}

.lubi-order-reset-title {
    font-weight: bold;
    color: #515159;
}

.lubi-order-reset-select {
    padding: 6px 8px;
    border: 1px solid #d8d7d9;
    border-radius: 3px;
    background: #fff;
}

.lubi-order-reset-hint {
    color: #8e8e93;
    font-size: 12px;
}

/* ---- Reset-order inline modal (own backdrop; not an overlayService view) ---- */
/* z-index above the Umbraco left tree/nav so the backdrop blocks the whole screen (tree included). */
.lubi-reset-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483000; /* above Umbraco's nav/tree stacking contexts */
}

.lubi-reset-modal {
    width: 520px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    padding: 24px;
}

/* Wider variant so APPLY TO + SORT MODE sit side by side and the space is used. */
.lubi-reset-modal--wide {
    width: 640px;
}

/* Two-column row for the top radio groups. */
.lubi-reset-cols {
    display: flex;
    gap: 28px;
}

.lubi-reset-cols > .lubi-reset-section {
    flex: 1 1 0;
    margin-bottom: 16px;
}

/* Spacing input + its help text on one line, vertically centered. */
.lubi-reset-inline--center {
    align-items: center;
}

.lubi-reset-spacing-hint {
    align-self: center;
    line-height: 1.4;
}

.lubi-reset-modal__title {
    font-size: 17px;
    font-weight: bold;
    color: #1b264f;
    margin-bottom: 16px;
}

.lubi-reset-section {
    margin-bottom: 16px;
}

.lubi-reset-section__label {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8e8e93;
    margin-bottom: 6px;
}

.lubi-reset-muted {
    color: #8e8e93;
    font-size: 12px;
}

.lubi-reset-inline {
    display: flex;
    gap: 14px;
}

.lubi-reset-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 0;
}

.lubi-reset-field label {
    font-size: 12px;
    font-weight: bold;
    color: #515159;
}

.lubi-reset-field .lubi-order-reset-select {
    width: 100%;
}

.lubi-reset-modal__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f2;
}

.lubi-btn-link {
    border: none;
    background: transparent;
    color: #515159;
    font-size: 13px;
    cursor: pointer;
    padding: 8px 12px;
}

.lubi-btn-link:hover { color: #1b264f; }

.lubi-btn-warning {
    border: none;
    border-radius: 4px;
    background: #f0ad4e;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    padding: 9px 20px;
}

.lubi-btn-warning:hover { background: #ec9c31; }

.lubi-reset-radio {
    display: block;
    margin: 2px 0;
    font-size: 13px;
    color: #2c2c34;
    cursor: pointer;
}

.lubi-reset-radio input {
    margin-right: 6px;
}

/* Every control in a level row is a uniform 32px tall and vertically centred, so the badge, selects and
   ▲▼✕ buttons line up flush with no top gap. */
.lubi-reset-level {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.lubi-reset-level__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2152a3;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    flex: 0 0 auto;
}

.lubi-reset-level .lubi-order-reset-select {
    flex: 1 1 auto;
    height: 32px;
    box-sizing: border-box;
    margin: 0;
}

.lubi-reset-level__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: 1px solid #c7cfdd;
    border-radius: 4px;
    background: #fff;
    color: #41506b;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}

.lubi-reset-level__btn:hover:not(:disabled) {
    border-color: #2152a3;
    background: #eef4ff;
}

.lubi-reset-level__btn:disabled {
    color: #c9ced8;
    border-color: #e4e8ef;
    background: #f6f7f9;
    cursor: default;
}

.lubi-reset-level__btn--del:hover:not(:disabled) {
    border-color: #b3261e;
    background: #fdeceb;
    color: #b3261e;
}

.lubi-reset-addlevel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 6px 12px;
    border: 1px dashed #c7cfdd;
    border-radius: 4px;
    background: #fff;
    color: #2152a3;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.lubi-reset-addlevel:hover {
    border-color: #2152a3;
    background: #eef4ff;
}

.lubi-order-dirty {
    background: #fff6e5;
    border: 1px solid #f5d488;
    color: #8a6100;
    padding: 8px 12px;
    border-radius: 3px;
    margin-bottom: 12px;
}

.lubi-order-table {
    width: 100%;
}

.lubi-order-row .lubi-drag-handle {
    cursor: move;
    color: #b5b5ba;
}

.lubi-order-row:hover .lubi-drag-handle {
    color: #515159;
}

.lubi-order-input {
    width: 64px;
    padding: 4px 6px;
    border: 1px solid #d8d7d9;
    border-radius: 3px;
    text-align: center;
}

.ui-sortable-helper {
    display: table;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.lubi-order-group {
    border: 1px solid #e9e9eb;
    border-radius: 4px;
    margin-bottom: 10px;
    background: #fff;
}

.lubi-order-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f6f6f7;
    border-bottom: 1px solid #e9e9eb;
    border-radius: 4px 4px 0 0;
}

.lubi-order-group-header .lubi-group-handle {
    cursor: move;
    color: #b5b5ba;
}

.lubi-order-group-count {
    color: #8e8e93;
    font-size: 12px;
}

.lubi-order-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0 0;
    border-top: 1px solid #d8d7d9;
    margin-top: 12px;
}

.lubi-order-pager-left {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #515054;
    font-size: 14px;
}

.lubi-order-pagesize {
    padding: 5px 8px;
    border: 1px solid #d8d7d9;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}

.lubi-order-pager-right {
    display: flex;
    gap: 8px;
}

/* ===== Reusable progress modal (lubi-progress-modal) ===== */
.lubi-progress-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483000; /* above Umbraco's nav/tree stacking contexts */
}

.lubi-progress-modal {
    width: 440px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    padding: 24px;
}

.lubi-progress-modal__title {
    font-size: 16px;
    font-weight: bold;
    color: #1b264f;
    margin-bottom: 16px;
}

.lubi-progress-bar {
    height: 10px;
    background: #ececed;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.lubi-progress-bar__fill {
    height: 100%;
    background: #2bc37c;
    border-radius: 5px;
    transition: width 0.2s ease;
}

.lubi-progress-bar--indeterminate .lubi-progress-bar__fill {
    width: 40%;
    position: absolute;
    left: 0;
    animation: lubi-progress-indeterminate 1.1s ease-in-out infinite;
}

@keyframes lubi-progress-indeterminate {
    0% { left: -40%; }
    100% { left: 100%; }
}

.lubi-progress-modal__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    color: #515159;
    font-size: 13px;
}

.lubi-progress-modal__percent {
    font-weight: bold;
}

.lubi-progress-modal__actions {
    margin-top: 16px;
    text-align: right;
}
/* ---- ui-grid (Manage Products / Manage Series) ------------------------------ */
/* ui-grid needs an explicit height or it renders 0px tall. */
.lubi-products-grid,
.lubi-series-grid {
    width: 100%;
    /* Height is set inline via vm.gridStyle() to fit the loaded rows exactly (no trailing empty space); past a
       viewport cap the grid scrolls internally with a frozen header. Small min-height only as a pre-render
       fallback. */
    min-height: 120px;
    margin: 8px 0 4px;
}

/* Order cell: drag grip + index sit inline. */
.lubi-grid-order {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Lazy group-tree header row (rendered by the grid rowTemplate). ui-grid lays each row out as a fixed-height
   box whose cells are absolutely positioned; a normal in-flow div does NOT stretch to fill it (that left the
   short tinted strip + big gaps). So the bar is absolutely positioned to fill the ENTIRE row box edge-to-edge
   and top-to-bottom — no gaps, full width, controls reachable on the right. */
.lubi-group-row {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
    gap: 6px;
    background: #e7ecf5;
    border-bottom: 1px solid #d8dee9;
    cursor: grab;
    font-weight: bold;
    color: #1b264f;
    overflow: hidden;
    z-index: 1;
    user-select: none;
}

.lubi-group-row:active {
    cursor: grabbing;
}

/* Drag grip at the far left — the affordance that the whole bar is draggable. */
.lubi-group-grip {
    color: #a9adba;
    font-size: 13px;
    flex: 0 0 auto;
}

.lubi-group-row:hover .lubi-group-grip {
    color: #5b6b7a;
}

/* Deeper (nested) groups get progressively lighter so hierarchy reads at a glance. */
.lubi-group-row--l1 { background: #eef2f8; }
.lubi-group-row--l2 { background: #f3f5fa; }
.lubi-group-row--l3 { background: #f7f9fc; }

.lubi-group-row:hover {
    background: #dde4f1;
}

/* Toggle area (caret + label + count) fills the row so a click anywhere but the buttons expands. */
.lubi-group-row__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
}

.lubi-group-caret {
    color: #6b6b74;
    font-size: 12px;
    flex: 0 0 auto;
}

.lubi-group-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.lubi-group-count {
    color: #8e8e93;
    font-weight: normal;
    flex: 0 0 auto;
}

/* Group reorder controls (▲▼) — on the LEFT of the bar, ALWAYS visible. A button is disabled (not removed)
   at the first/last sibling so the layout width is constant (no shifting). */
.lubi-group-row__controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin-right: 4px;
}

.lubi-products-grid .ui-grid-row,
.lubi-series-grid .ui-grid-row {
    box-sizing: border-box;
}

/* The rowTemplate's outer wrapper is the positioning context + full row height so the absolutely-positioned
   group bar fills exactly one row (ui-grid rows themselves are static, so inset:0 needs this anchor). Leaf
   cells are inline-block in normal flow, so a relative wrapper does not disturb their horizontal layout. */
.lubi-products-grid .ui-grid-canvas .ui-grid-row > div,
.lubi-series-grid .ui-grid-canvas .ui-grid-row > div {
    position: relative;
    height: 100%;
}

/* Vertically centre leaf cell text within the taller (44px) rows so it lines up with the column headers and
   group bars — ui-grid's default cell padding is tuned for ~30px rows and left the text sitting high/low. */
.lubi-products-grid .ui-grid-cell-contents,
.lubi-series-grid .ui-grid-cell-contents {
    display: flex;
    align-items: center;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    min-width: 0;               /* allow the flex item to shrink so ellipsis works */
}

/* Column header: consistent padding, bold label vertically centred, and the filter input beneath it aligned
   to the same horizontal padding as the header label so header text + filter box line up in each column. */
.lubi-products-grid .ui-grid-header-cell,
.lubi-series-grid .ui-grid-header-cell {
    background: #f6f7f9;
}

.lubi-products-grid .ui-grid-header-cell .ui-grid-cell-contents,
.lubi-series-grid .ui-grid-header-cell .ui-grid-cell-contents {
    padding: 8px 10px;
    font-weight: bold;
    color: #33333a;
}

.lubi-products-grid .ui-grid-filter-container,
.lubi-series-grid .ui-grid-filter-container {
    padding: 4px 10px 8px;
}

.lubi-products-grid .ui-grid-filter-container input,
.lubi-series-grid .ui-grid-filter-container input {
    width: 100%;
    box-sizing: border-box;
    height: 28px;
    padding: 4px 8px;
    border: 1px solid #d8d7d9;
    border-radius: 3px;
}

/* Multi-value cells still truncate under the flex layout. */
.lubi-products-grid .lubi-multi-cell,
.lubi-series-grid .lubi-multi-cell {
    display: block;             /* keep single-line ellipsis behaviour, just vertically centred by the flex parent */
    width: 100%;
    line-height: 44px;          /* matches rowHeight so the single line sits centred */
}

/* Load-more row under an expanded leaf group. */
/* Inline "Load more" row in the tree (rendered by the rowTemplate; fills the row box like a group bar). */
.lubi-loadmore-row {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background: #fbfcfe;
    border-bottom: 1px solid #eef0f4;
    z-index: 1;
}

.lubi-loadmore-btn {
    border: 1px solid #c7cfdd;
    border-radius: 4px;
    background: #fff;
    color: #2152a3;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 14px;
    cursor: pointer;
}

.lubi-loadmore-btn:hover {
    border-color: #2152a3;
    background: #eef4ff;
}

/* Plain box header (replaces umb-box-header so the count binds live to vm.total). */
.lubi-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #e9e9eb;
}

.lubi-box-header .umb-box-header__title {
    font-size: 15px;
    font-weight: bold;
    color: #1b264f;
}

/* Dedicated drag-handle column cell — grip + move buttons. */
.lubi-grid-handle-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Move up/down buttons — always visible, on the left of the grip. */
.lubi-move-btns {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

/* Chip-style move buttons — shared look for group + leaf controls. Bigger for an easy click target. */
.lubi-move-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid #c7cfdd;
    border-radius: 5px;
    background: #fff;
    padding: 0;
    margin: 0;
    font-size: 12px;
    line-height: 1;
    color: #41506b;
    cursor: pointer;
}

.lubi-move-btn:hover:not(:disabled) {
    border-color: #2152a3;
    background: #eef4ff;
    color: #1b264f;
}

/* Disabled edge button (first ▲ / last ▼) — visible but greyed and non-interactive, so width stays constant. */
.lubi-move-btn:disabled {
    color: #c9ced8;
    border-color: #e4e8ef;
    background: #f6f7f9;
    cursor: default;
}

/* Insert / move-here controls in the handle cell (⇅ pick-up, ⤒ insert-above, ⤓ insert-below). */
.lubi-insert-btns {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
}

.lubi-insert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid #d6dbe6;
    border-radius: 5px;
    background: #fff;
    color: #6b7688;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.lubi-insert-btn:hover {
    border-color: #2152a3;
    background: #eef4ff;
    color: #1b264f;
}

.lubi-insert-btn--active {
    background: #2152a3;
    border-color: #2152a3;
    color: #fff;
}

/* Row that is picked up for placing (select-then-place). The rowTemplate root wrapper has no real height
   (its ui-grid cells are positioned children), so an outline on IT doesn't show. Instead: full-height wrapper
   + a dashed top/bottom border spanning every cell, and a tinted background, so the WHOLE row reads as a
   blue dashed selection. */
.lubi-row-moving {
    display: block;
    height: 100%;
    box-sizing: border-box;
    background: #eef4ff;
}

/* Dashed top/bottom on the cells forms one continuous horizontal line across the row (no wrapper border, so
   it never doubles). Interior cells get NO left/right border, so there are no vertical dashes at cell seams;
   only the first and last cell close the ends. */
.lubi-row-moving .ui-grid-cell {
    background: #eef4ff !important;
    border-top: 2px dashed #2152a3 !important;
    border-bottom: 2px dashed #2152a3 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

.lubi-row-moving .ui-grid-cell:first-child { border-left: 2px dashed #2152a3 !important; }
.lubi-row-moving .ui-grid-cell:last-child { border-right: 2px dashed #2152a3 !important; }

/* Normal-mode reorder controls: drag, ▲, ▼, place — aligned on one row. */
.lubi-normal-controls {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Row whose Sort Order was edited locally but not yet saved — amber tint + left accent bar, so pending
   changes are obvious at a glance until Save Change persists them. */
.lubi-row-edited,
.lubi-row-edited .ui-grid-cell {
    background: #fff8e6 !important;
}

.lubi-row-edited {
    box-shadow: inset 3px 0 0 #f0ad4e;
}

/* Publish state is conveyed solely by the dedicated Status column badge below — no row strike-through,
   graying, or in-name pill (removed as redundant with the Status column). */

/* Dedicated Status column badge: green = Published, gray = Unpublished. */
.lubi-status-cell {
    display: flex;
    align-items: center;
}

.lubi-status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 3px;
    border: 1px solid transparent;
}

.lubi-status-badge--on {
    color: #1f7a3d;
    background: #e3f5e9;
    border-color: #a9dcbc;
}

.lubi-status-badge--off {
    color: #6b7688;
    background: #eceef2;
    border-color: #ccd2dc;
}

/* Keep the Status badge readable even on a grayed unpublished row (cell colour is overridden !important). */
.lubi-row-unpublished .lubi-status-badge--off {
    color: #6b7688 !important;
}

/* Insert-mode banner above the grid. */
.lubi-insert-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #eef4ff;
    border: 1px solid #b9cdf0;
    color: #1b264f;
    padding: 8px 12px;
    border-radius: 3px;
    margin-bottom: 10px;
}

/* Prominent cancel button in the insert banner. */
.lubi-insert-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    line-height: 1;
    padding: 7px 16px;
    border: 1px solid #d99;
    border-radius: 4px;
    background: #fff;
    color: #b3261e;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

.lubi-insert-cancel-btn .icon {
    line-height: 1;
    font-size: 11px;
}

.lubi-insert-cancel-btn:hover {
    background: #fdeceb;
    border-color: #b3261e;
}

/* The picked-up row's cell shows a 'Placing…' label + cancel. */
.lubi-insert-picked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lubi-insert-picked__label {
    font-size: 11px;
    font-weight: bold;
    color: #2152a3;
    white-space: nowrap;
}

/* In insert mode, the above/below drop buttons are wider labelled chips. */
.lubi-insert-btn--active {
    width: auto;
    padding: 0 12px;
    height: 28px;
    background: #2152a3;
    border-color: #2152a3;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.lubi-insert-btn--active:hover {
    background: #1a4488;
    border-color: #1a4488;
    color: #fff;
}

.lubi-insert-btn--cancel {
    color: #b3261e;
    border-color: #e7b6b2;
}

.lubi-insert-btn--cancel:hover {
    background: #fdeceb;
    border-color: #b3261e;
    color: #b3261e;
}

/* Inline position editor (Sort Order column). */
.lubi-pos-view {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
}

.lubi-pos-view:hover {
    background: #eef4ff;
    color: #2152a3;
}

.lubi-pos-input {
    width: 60px;
    height: 26px;
    text-align: center;
    border: 1px solid #2152a3;
    border-radius: 3px;
    box-sizing: border-box;
}

/* Short numbered instructions in the insert-search dialog. */
.lubi-insert-help {
    margin: 0 0 14px;
    padding-left: 20px;
    color: #515159;
    font-size: 12.5px;
    line-height: 1.6;
}

.lubi-insert-help li {
    margin: 0;
}

/* Insert-search results list. */
.lubi-insert-results {
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 8px;
    border: 1px solid #eaeaec;
    border-radius: 4px;
}

.lubi-insert-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid #f0f0f2;
    background: #fff;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
}

.lubi-insert-result:hover {
    background: #eef4ff;
}

.lubi-insert-result__id {
    color: #9a9aa0;
    font-size: 12px;
}

/* Group-bar action cluster + the 'Reset to this grouping' button. */
.lubi-group-bar__actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lubi-groupreset-btn {
    color: #8a6100;
    border-color: #f5d488;
    background: #fff8ea;
}

.lubi-groupreset-btn:hover {
    border-color: #f0ad4e;
    background: #fdf1d8;
}

/* Leaf drag grip: visible affordance, brighter on hover. */
.lubi-products-grid .lubi-drag-handle,
.lubi-series-grid .lubi-drag-handle {
    cursor: move;
    color: #b5b5ba;
}

.lubi-products-grid .ui-grid-row:hover .lubi-drag-handle,
.lubi-series-grid .ui-grid-row:hover .lubi-drag-handle {
    color: #515159;
}

/* jQuery-UI sortable placeholder while dragging a ui-grid row. */
.ui-grid-row.ui-sortable-helper {
    background: #eef4ff;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* Collapsible "How to reorder?" help. */
.lubi-grid-help {
    margin: 0 0 10px;
}

.lubi-help-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: #2152a3;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 0;
}

.lubi-help-toggle .icon { font-size: 10px; }

.lubi-grid-hint {
    color: #6b6b74;
    font-size: 12px;
    margin: 6px 0 0;
}

.lubi-grid-hint ul {
    margin: 0;
    padding-left: 18px;
    line-height: 1.7;
}

.lubi-grid-hint .icon {
    color: #b5b5ba;
}

/* Multi-value (comma-separated) cells: single-line ellipsis with a tooltip carrying the full list. */
.lubi-multi-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lubi-sortorder-cell {
    color: #8e8e93;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* ---- Searchable single-select (lubi-search-select) --------------------------- */
.lubi-ss {
    position: relative;
    min-width: 180px;
}

.lubi-ss__control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    height: 34px;
    padding: 6px 8px;
    border: 1px solid #d8d7d9;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #2c2c34;
}

.lubi-ss--open .lubi-ss__control {
    border-color: #2152a3;
    box-shadow: 0 0 0 2px rgba(33, 82, 163, 0.12);
}

.lubi-ss__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lubi-ss__value--placeholder {
    color: #9a9aa0;
}

.lubi-ss__caret {
    color: #b5b5ba;
    font-size: 11px;
    flex: 0 0 auto;
}

.lubi-ss__panel {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d8d7d9;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.lubi-ss__search {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    outline: none;
}

.lubi-ss__list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 240px;
    overflow-y: auto;
}

.lubi-ss__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    font-size: 13px;
    cursor: pointer;
    color: #2c2c34;
}

.lubi-ss__opt:hover,
.lubi-ss__opt--active {
    background: #eef4ff;
}

.lubi-ss__opt-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lubi-ss__opt-count {
    color: #9a9aa0;
    font-size: 12px;
    flex: 0 0 auto;
}

.lubi-ss__empty {
    padding: 10px;
    text-align: center;
    color: #9a9aa0;
    font-size: 12px;
}

/* ---- Filter loading hint + spinner ------------------------------------------- */
.lubi-filter-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #515159;
    font-size: 12px;
    width: 100%;
    margin-top: 4px;
}

.lubi-inline-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #d6e0f5;
    border-top-color: #2152a3;
    border-radius: 50%;
    animation: lubi-spin 0.7s linear infinite;
}

.lubi-inline-spinner--lg {
    width: 26px;
    height: 26px;
    border-width: 3px;
}

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

/* ---- Grid overlay loader ----------------------------------------------------- */
.lubi-grid-wrap {
    position: relative;
}

.lubi-grid-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.lubi-grid-overlay__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #515159;
    font-size: 13px;
}

/* ---- Group bar --------------------------------------------------------------- */
.lubi-group-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    margin-bottom: 10px;
    background: #f6f6f7;
    border: 1px dashed #d8d7d9;
    border-radius: 4px;
}

.lubi-group-bar--over {
    background: #eef4ff;
    border-color: #2152a3;
}

.lubi-group-bar__label {
    font-weight: bold;
    color: #515159;
    font-size: 12px;
}

.lubi-group-bar__hint {
    color: #9a9aa0;
    font-size: 12px;
    font-style: italic;
}

.lubi-group-bar__divider {
    width: 1px;
    height: 20px;
    background: #d8d7d9;
}

/* Expand/Collapse-all toggle — pinned to the right of the group bar (tree mode only). */
.lubi-expandall-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #c7cfdd;
    border-radius: 4px;
    background: #fff;
    color: #2152a3;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.lubi-expandall-btn:hover {
    border-color: #2152a3;
    background: #eef4ff;
}

.lubi-expandall-btn .icon {
    font-size: 11px;
}

.lubi-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}

.lubi-group-chip--source {
    background: #fff;
    border: 1px solid #d8d7d9;
    color: #515159;
}

.lubi-group-chip--source:hover {
    border-color: #2152a3;
    color: #2152a3;
}

.lubi-group-chip--source.lubi-dragging {
    opacity: 0.5;
}

.lubi-group-chip--active {
    background: #2152a3;
    color: #fff;
}

.lubi-group-chip--active .icon {
    font-size: 10px;
}

/* ---- Pagination -------------------------------------------------------------- */
.lubi-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 0 0;
    margin-top: 12px;
    border-top: 1px solid #d8d7d9;
}

.lubi-pager__info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #515159;
    font-size: 13px;
}

.lubi-pager__size {
    padding: 5px 8px;
    border: 1px solid #d8d7d9;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}

.lubi-pager__nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lubi-pager__btn,
.lubi-pager__num {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d8d7d9;
    border-radius: 3px;
    background: #fff;
    color: #2c2c34;
    cursor: pointer;
    font-size: 13px;
}

.lubi-pager__btn:disabled {
    color: #c4c4c9;
    cursor: default;
    background: #f7f7f8;
}

.lubi-pager__num:hover {
    border-color: #2152a3;
}

.lubi-pager__num--active {
    background: #2152a3;
    border-color: #2152a3;
    color: #fff;
    font-weight: bold;
}

.lubi-pager__jump {
    color: #515159;
    font-size: 13px;
}

/* The Products (order) column header + cell emphasis. */
.lubi-order-num {
    font-weight: bold;
}